You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/azure-maps/drawing-tools-interactions-keyboard-shortcuts.md
+82-62Lines changed: 82 additions & 62 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,13 +15,13 @@ This article outlines all the different ways to draw and edit shapes using a mou
15
15
16
16
The drawing manager supports three different ways of interacting with the map, to draw shapes.
17
17
18
-
*`click` - Coordinates are added when the mouse or touch is clicked.
19
-
*`freehand ` - Coordinates are added when the mouse or touch is dragged on the map.
20
-
*`hybrid` - Coordinates are added when the mouse or touch is clicked or dragged.
18
+
-`click` - Coordinates are added when the mouse or touch is clicked.
19
+
-`freehand ` - Coordinates are added when the mouse or touch is dragged on the map.
20
+
-`hybrid` - Coordinates are added when the mouse or touch is clicked or dragged.
21
21
22
22
## How to draw shapes
23
23
24
-
Before any shape can be drawn, set the `drawingMode` option of the drawing manager to a supported drawing setting. This setting can be programmed, or invoked by pressing one of the drawing buttons on the toolbar. The drawing mode stays enabled, even after a shape has been drawn, making it easy to draw additional shapes of the same type. Programmatically set the drawing mode to an idle state. Or, switch to an idle state by clicking the current drawing modes button on the toolbar.
24
+
Before any shape can be drawn, set the `drawingMode` option of the drawing manager to a supported drawing setting. This setting can be programmed, or invoked by pressing one of the drawing buttons on the toolbar. The drawing mode stays enabled, even after a shape has been drawn, making it easy to draw more shapes of the same type. Programmatically set the drawing mode to an idle state. Or, switch to an idle state by clicking the current drawing modes button on the toolbar.
25
25
26
26
The next sections outline all the different ways that shapes can be drawn on the map.
27
27
@@ -30,118 +30,138 @@ The next sections outline all the different ways that shapes can be drawn on the
30
30
When the drawing manager is in `draw-point` drawing mode, the following actions can be done to draw points on the map. These methods work with all interaction modes.
31
31
32
32
**Start drawing**
33
-
- Click the left mouse button, or touch the map to add a point to the map.
34
-
- If the mouse is over the map, press the `F` key, and a point will be added at the coordinate of the mouse pointer. This method provides higher accuracy for adding a point to the map. There will be less movement on the mouse due to the pressing motion of the left mouse button.
35
-
- Keep clicking, touching, or pressing `F` to add more points to the map.
36
-
33
+
34
+
- Select the left mouse button, or touch the map to add a point to the map.
35
+
- If the mouse is over the map, press the `F` key, and a point is added at the coordinate of the mouse pointer. This method provides higher accuracy for adding a point to the map. There's less movement on the mouse due to the pressing motion of the left mouse button.
36
+
- Keep clicking, touching, or pressing `F` to add more points to the map.
37
+
37
38
**Finish drawing**
38
-
- Click on any button in the drawing toolbar.
39
-
- Programmatically set the drawing mode.
40
-
- Press the `C` key.
39
+
40
+
- Select any button in the drawing toolbar.
41
+
- Programmatically set the drawing mode.
42
+
- Press the `C` key.
41
43
42
44
**Cancel drawing**
43
-
- Press the `Escape` key.
45
+
46
+
- Press the `Escape` key.
44
47
45
48
### How to draw a line
46
49
47
50
When the drawing manager is in `draw-line` mode, the following actions can be done to draw points on the map, depending on the interaction mode.
48
51
49
52
**Start drawing**
50
-
- Click mode
51
-
* Click the left mouse button, or touch the map to add each point of a line on the map. A coordinate is added to the line for each click or touch.
52
-
* If the mouse is over the map, press the `F` key, and a point will be added at the coordinate of the mouse pointer. This method provides higher accuracy for adding a point to the map. There will be less movement on the mouse due to the pressing motion of the left mouse button.
53
-
* Keep clicking until all the desired points have been added to the line.
54
-
- Freehand mode
55
-
* Press down the left mouse button, or touch-down on the map and drag the mouse, or touch point around. Coordinates are added to the line as the mouse or touch point moves around the map. As soon as the mouse or touch-up event is triggered, the drawing is completed. The frequency at which coordinates are added is defined by the drawing managers `freehandInterval` option.
56
-
- Hybrid mode
57
-
* Alternate between click and freehand methods, as desired, while drawing a single line. For example, click a few points, then hold and drag the mouse to add a bunch of points, then click a few more.
53
+
54
+
- Click mode
55
+
- Select left mouse button, or touch the map to add each point of a line on the map. A coordinate is added to the line for each click or touch.
56
+
- If the mouse is over the map, press the `F` key, and a point is added at the coordinate of the mouse pointer. This method provides higher accuracy for adding a point to the map. There's less movement on the mouse due to the pressing motion of the left mouse button.
57
+
- Keep clicking until all the desired points have been added to the line.
58
+
- Freehand mode
59
+
- Press down the left mouse button, or touch-down on the map and drag the mouse, or touch point around. Coordinates are added to the line as the mouse or touch point moves around the map. As soon as the mouse or touch-up event is triggered, the drawing is completed. The drawing managers `freehandInterval` option defines the frequency at which coordinates are added.
60
+
- Hybrid mode
61
+
- Alternate between click and freehand methods, as desired, while drawing a single line. For example, click a few points, then hold and drag the mouse to add a bunch of points, then click a few more.
58
62
59
63
**Finish drawing**
60
-
- Hybrid/Click mode
61
-
* Double-click the map at the last point.
62
-
* Click on any button in the drawing toolbar.
63
-
* Programmatically set the drawing mode.
64
-
- Freehand mode
65
-
* Release the mouse button or touch point.
66
-
- Press the `C` key.
64
+
65
+
- Hybrid/Click mode
66
+
- Double-click the map at the last point.
67
+
- Click on any button in the drawing toolbar.
68
+
- Programmatically set the drawing mode.
69
+
- Freehand mode
70
+
- Release the mouse button or touch point.
71
+
- Press the `C` key.
67
72
68
73
**Cancel drawing**
69
-
- Press the `Escape` key.
74
+
75
+
- Press the `Escape` key.
70
76
71
77
### How to draw a polygon
72
78
73
79
When the drawing manager is in `draw-polygon` mode, the following actions can be done to draw points on the map, depending on the interaction mode.
74
80
75
81
**Start drawing**
76
-
- Click mode
77
-
* Click the left mouse button, or touch the map to add each point of a polygon on the map. A coordinate is added to the polygon for each click or touch.
78
-
* If the mouse is over the map, press the `F` key, and a point will be added at the coordinate of the mouse pointer. This method provides higher accuracy for adding a point to the map. There will be less movement on the mouse due to the pressing motion of the left mouse button.
79
-
* Keep clicking until all the desired points have been added to the polygon.
80
-
- Freehand mode
81
-
* Press down the left mouse button, or touch-down on the map and drag the mouse, or touch point around. Coordinates are added to the polygon as the mouse or touch point moves around the map. As soon as the mouse or touch-up event is triggered, the drawing is completed. The frequency at which coordinates are added is defined by the drawing managers `freehandInterval` option.
82
-
- Hybrid mode
83
-
* Alternate between click and freehand methods, as desired, while drawing a single polygon. For example, click a few points, then hold and drag the mouse to add a bunch of points, then click a few more.
82
+
83
+
- Click mode
84
+
- Select the left mouse button, or touch the map to add each point of a polygon on the map. A coordinate is added to the polygon for each click or touch.
85
+
- If the mouse is over the map, press the `F` key, and a point is added at the coordinate of the mouse pointer. This method provides higher accuracy for adding a point to the map. There's less movement on the mouse due to the pressing motion of the left mouse button.
86
+
- Keep clicking until all the desired points have been added to the polygon.
87
+
- Freehand mode
88
+
- Press down the left mouse button, or touch-down on the map and drag the mouse, or touch point around. Coordinates are added to the polygon as the mouse or touch point moves around the map. As soon as the mouse or touch-up event is triggered, the drawing is completed. The drawing managers `freehandInterval` option defines the frequency at which coordinates are added.
89
+
- Hybrid mode
90
+
- Alternate between click and freehand methods, as desired, while drawing a single polygon. For example, click a few points, then hold and drag the mouse to add a bunch of points, then click a few more.
84
91
85
92
**Finish drawing**
86
-
- Hybrid/Click mode
87
-
* Double-click the map at the last point.
88
-
* Click on the first point in the polygon.
89
-
* Click on any button in the drawing toolbar.
90
-
* Programmatically set the drawing mode.
91
-
- Freehand mode
92
-
* Release the mouse button or touch point.
93
-
- Press the `C` key.
93
+
94
+
- Hybrid/Click mode
95
+
- Double-click the map at the last point.
96
+
- Click on the first point in the polygon.
97
+
- Click on any button in the drawing toolbar.
98
+
- Programmatically set the drawing mode.
99
+
- Freehand mode
100
+
- Release the mouse button or touch point.
101
+
- Press the `C` key.
94
102
95
103
**Cancel drawing**
96
-
- Press the `Escape` key.
104
+
105
+
- Press the `Escape` key.
97
106
98
107
### How to draw a rectangle
99
108
100
-
When the drawing manager is in `draw-rectangle` mode, the following actions can be done to draw points on the map, depending on the interaction mode. The generated shape will follow the [extended GeoJSON specification for rectangles](extend-geojson.md#rectangle).
109
+
When the drawing manager is in `draw-rectangle` mode, the following actions can be done to draw points on the map, depending on the interaction mode. The generated shape follows the [extended GeoJSON specification for rectangles].
101
110
102
111
**Start drawing**
103
-
- Press down the left mouse button, or touch-down on the map to add the first corner of the rectangle and drag to create the rectangle.
112
+
113
+
- Press down the left mouse button, or touch-down on the map to add the first corner of the rectangle and drag to create the rectangle.
104
114
105
115
**Finish drawing**
106
-
- Release the mouse button or touch point.
107
-
- Programmatically set the drawing mode.
108
-
- Press the `C` key.
116
+
117
+
- Release the mouse button or touch point.
118
+
- Programmatically set the drawing mode.
119
+
- Press the `C` key.
109
120
110
121
**Cancel drawing**
111
-
- Press the `Escape` key.
122
+
123
+
- Press the `Escape` key.
112
124
113
125
### How to draw a circle
114
126
115
-
When the drawing manager is in `draw-circle` mode, the following actions can be done to draw points on the map, depending on the interaction mode. The generated shape will follow the [extended GeoJSON specification for circles](extend-geojson.md#circle).
127
+
When the drawing manager is in `draw-circle` mode, the following actions can be done to draw points on the map, depending on the interaction mode. The generated shape follows the [extended GeoJSON specification for circles].
116
128
117
129
**Start drawing**
118
-
- Press down the left mouse button, or touch-down on the map to add the center of the circle and drag give the circles a radius.
130
+
131
+
- Press down the left mouse button, or touch-down on the map to add the center of the circle and drag give the circles a radius.
119
132
120
133
**Finish drawing**
121
-
- Release the mouse button or touch point.
122
-
- Programmatically set the drawing mode.
123
-
- Press the `C` key.
134
+
135
+
- Release the mouse button or touch point.
136
+
- Programmatically set the drawing mode.
137
+
- Press the `C` key.
124
138
125
139
**Cancel drawing**
126
-
- Press the `Escape` key.
140
+
141
+
- Press the `Escape` key.
127
142
128
143
## Keyboard shortcuts
129
144
130
145
The drawing tools support keyboard shortcuts. These keyboard shortcuts are functional when the map is in focus.
131
146
132
147
| Key | Action |
133
148
|----------|-----------------------------------|
134
-
|`C`| Completes any drawing that is in progress and sets the drawing mode to idle. Focus will move to top-level map element. |
135
-
|`Escape`| Cancels any drawing that is in progress and sets the drawing mode to idle. Focus will move to top-level map element. |
149
+
|`C`| Completes any drawing that is in progress and sets the drawing mode to idle. Focus moves to top-level map element. |
150
+
|`Escape`| Cancels any drawing that is in progress and sets the drawing mode to idle. Focus moves to top-level map element. |
136
151
|`F`| Adds a coordinate to a point, line, or polygon if the mouse is over the map. Equivalent action of clicking the map when in click or hybrid mode. This shortcut allows for more precise and faster drawings. You can use one hand to position the mouse and other to press the button without moving the mouse from the press gesture. |
137
-
|`Delete` or `Backspace`| If shapes is selected while the edit mode, delete them. |
152
+
|`Delete` or `Backspace`| If shapes are selected while the edit mode, delete them. |
138
153
139
154
## Next steps
140
155
141
156
Learn more about the classes in the drawing tools module:
0 commit comments