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
A scale control adds a scale bar to the map. The following code sample creates an instance of the [ScaleControl] class and adds it to the bottom-left corner of the map.
67
+
68
+
```javascript
69
+
//Construct a scale control and add it to the map.
A fullscreen control adds a button to toggle the map or specified HTML element between fullscreen and normal view. The following code sample creates an instance of the [FullscreenControl] class and adds it to the top-right corner of the map.
78
+
79
+
```javascript
80
+
//Construct a fullscreen control and add it to the map.
Multiple controls can be put into an array and added to the map all at once and positioned in the same area of the map to simplify development. The following code snippet adds the standard navigation controls to the map using this approach.
67
89
68
90
```javascript
69
-
map.controls.add([
91
+
map.controls.add(
92
+
[
70
93
newatlas.control.ZoomControl(),
71
-
newatlas.control.CompassControl(),
72
94
newatlas.control.PitchControl(),
73
-
newatlas.control.StyleControl()
74
-
], {
75
-
position:"top-right"
76
-
});
95
+
newatlas.control.CompassControl(),
96
+
newatlas.control.StyleControl(),
97
+
newatlas.control.FullscreenControl(),
98
+
newatlas.control.ScaleControl(),
99
+
],
100
+
{
101
+
position:'top-right',
102
+
}
103
+
);
77
104
```
78
105
79
-
The following image shows a map with the zoom, compass, pitch, and style picker controls in the top-right corner of the map. Notice how they automatically stack. The order of the control objects in the script dictates the order in which they appear on the map. To change the order of the controls on the map, you can change their order in the array.
106
+
The following image shows a map with the zoom, pitch, compass, style, fullscreen, and scale controls in the top-right corner of the map. Notice how they automatically stack. The order of the control objects in the script dictates the order in which they appear on the map. To change the order of the controls on the map, you can change their order in the array.
80
107
81
-
:::image type="content" source="./media/map-add-controls/map-with-all-controls.png" lightbox="./media/map-add-controls/map-with-all-controls.png" alt-text="Screenshot showing a map displaying zoom, compass, pitch and style controls.":::
108
+
:::image type="content" source="./media/map-add-controls/map-with-all-controls.png" lightbox="./media/map-add-controls/map-with-all-controls.png" alt-text="Screenshot showing a map displaying zoom, pitch, compass, style, fullscreen, and scale controls.":::
@@ -91,7 +118,11 @@ The style picker control is defined by the [StyleControl] class. For more inform
91
118
92
119
The [Navigation Control Options] sample is a tool to test out the various options for customizing the controls. For the source code for this sample, see [Navigation Control Options source code].
93
120
94
-
:::image type="content" source="./media/map-add-controls/map-navigation-control-options.png" lightbox="./media/map-add-controls/map-navigation-control-options.png" alt-text="Screenshot showing the Map Navigation Control Options sample, which contains a map displaying zoom, compass, pitch and style controls and options on the left side of the screen that enable you to change the Control Position, Control Style, Zoom Delta, Pitch Delta, Compass Rotation Delta, Picker Styles, and Style Picker Layout properties.":::
121
+
:::image type="content" source="./media/map-add-controls/map-navigation-control-options.png" lightbox="./media/map-add-controls/map-navigation-control-options.png" alt-text="Screenshot showing the Map Navigation Control Options sample, which contains a map displaying zoom, compass, pitch, style and scale controls and options on the left side of the screen that enable you to change the Control Position, Control Style, Zoom Delta, Pitch Delta, Compass Rotation Delta, Picker Styles, Style Picker Layout, Scale Max Width, and Scale Unit properties.":::
122
+
123
+
The [Fullscreen Control Options] sample provides a tool to test out the options for customizing the fullscreen control. For the source code for this sample, see [Fullscreen Control Options source code].
124
+
125
+
:::image type="content" source="./media/map-add-controls/fullscreen-control-options.png" lightbox="./media/map-add-controls/fullscreen-control-options.png" alt-text="Screenshot showing the Fullscreen Control Options sample, which contains a map displaying a fullscreen control and options on the left side of the screen that enable you to change the Control Style, and Fullscreen Control properties.":::
0 commit comments