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
title: Add controls to a map | Microsoft Azure Maps
3
3
description: How to add zoom control, pitch control, rotate control and a style picker to a map in Microsoft Azure Maps.
4
-
author: eriklindeman
5
-
ms.author: eriklind
6
-
ms.date: 07/29/2019
4
+
author: dubiety
5
+
ms.author: yuchungchen
6
+
ms.date: 05/15/2023
7
7
ms.topic: conceptual
8
8
ms.service: azure-maps
9
9
ms.custom: devx-track-js
10
10
---
11
11
12
12
# Add controls to a map
13
13
14
-
This article shows you how to add controls to a map. You'll also learn how to create a map with all controls and a [style picker](./choose-map-style.md).
14
+
This article shows you how to add controls to a map. You'll also learn how to create a map with all controls and a [style picker].
15
15
16
16
## Add zoom control
17
17
18
-
A zoom control adds buttons for zooming the map in and out. The following code sample creates an instance of the [ZoomControl](/javascript/api/azure-maps-control/atlas.control.zoomcontrol) class, and adds it the bottom-right corner of the map.
18
+
A zoom control adds buttons for zooming the map in and out. The following code sample creates an instance of the [ZoomControl] class, and adds it the bottom-right corner of the map.
A pitch control adds buttons for tilting the pitch to map relative to the horizon. The following code sample creates an instance of the [PitchControl](/javascript/api/azure-maps-control/atlas.control.pitchcontrol) class. It adds the PitchControl to top-right corner of the map.
35
+
A pitch control adds buttons for tilting the pitch to map relative to the horizon. The following code sample creates an instance of the [PitchControl] class. It adds the PitchControl to top-right corner of the map.
37
36
38
37
```javascript
39
38
//Construct a pitch control and add it to the map.
A compass control adds a button for rotating the map. The following code sample creates an instance of the [CompassControl](/javascript/api/azure-maps-control/atlas.control.compasscontrol) class and adds it the bottom-left corner of the map.
52
+
A compass control adds a button for rotating the map. The following code sample creates an instance of the [CompassControl] class and adds it the bottom-left corner of the map.
55
53
56
54
```javascript
57
55
//Construct a compass control and add it to the map.
The following code sample adds the zoom, compass, pitch, and style picker controls to 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.
82
+
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.
86
83
87
-
<br/>
84
+
:::image type="content" source="./media/map-add-controls/map-with-all-controls.png" alt-text="Screenshot showing a map displaying zoom, compass, pitch and style controls.":::
<iframe height='500' scrolling='no' title='A map with all the controls' src='//codepen.io/azuremaps/embed/qyjbOM/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen <a href='https://codepen.io/azuremaps/pen/qyjbOM/'>A map with all the controls</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
The style picker control is defined by the [StyleControl](/javascript/api/azure-maps-control/atlas.control.stylecontrol) class. For more information on using the style picker control, see [choose a map style](choose-map-style.md).
92
+
The style picker control is defined by the [StyleControl] class. For more information on using the style picker control, see [choose a map style].
93
93
94
94
## Customize controls
95
95
96
-
Here is a tool to test out the various options for customizing the controls.
96
+
The [Navigation Control Options] sample is a tool to test out the various options for customizing the controls.
97
97
98
-
<br/>
98
+
:::image type="content" source="./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.":::
If you want to create customized navigation controls, create a class that extends from the `atlas.Control` class or create an HTML element and position it above the map div. Have this UI control call the maps `setCamera` function to move the map.
106
109
@@ -109,30 +112,43 @@ If you want to create customized navigation controls, create a class that extend
109
112
Learn more about the classes and methods used in this article:
0 commit comments