map-add-controls.md

title	description	author	ms.author	ms.date	ms.topic	ms.service	ms.custom
Add controls to a map | Microsoft Azure Maps	How to add zoom control, pitch control, rotate control and a style picker to a map in Microsoft Azure Maps.	stevemunk	v-munksteve	07/29/2019	conceptual	azure-maps	devx-track-js

Add controls to a map

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.

Add zoom control

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.

//Construct a zoom control and add it to the map.
map.controls.add(new atlas.control.ZoomControl(), {
    position: 'bottom-right'
});

Below is the complete running code sample of the above functionality.

<iframe height='500' scrolling='no' title='Adding a zoom control' src='//codepen.io/azuremaps/embed/WKOQyN/?height=265&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen Adding a zoom control by Azure Maps (@azuremaps) on CodePen. </iframe>

Add pitch control

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.

//Construct a pitch control and add it to the map.
map.controls.add(new atlas.control.PitchControl(), {
    position: 'top-right'
});

Below is the complete running code sample of the above functionality.

<iframe height='500' scrolling='no' title='Adding a pitch control' src='//codepen.io/azuremaps/embed/xJrwaP/?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 Adding a pitch control by Azure Maps (@azuremaps) on CodePen. </iframe>

Add compass control

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.

//Construct a compass control and add it to the map.
map.controls.add(new atlas.control.CompassControl(), {
    position: 'bottom-left'
});

Below is the complete running code sample of the above functionality.

<iframe height='500' scrolling='no' title='Adding a rotate control' src='//codepen.io/azuremaps/embed/GBEoRb/?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 Adding a rotate control by Azure Maps (@azuremaps) on CodePen. </iframe>

A Map with all controls

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 adds the standard navigation controls to the map using this approach.

map.controls.add([
    new atlas.control.ZoomControl(),
    new atlas.control.CompassControl(),
    new atlas.control.PitchControl(),
    new atlas.control.StyleControl()
], {
    position: "top-right"
});

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.

<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 map with all the controls by Azure Maps (@azuremaps) on CodePen. </iframe>

The style picker control is defined by the StyleControl class. For more information on using the style picker control, see choose a map style.

Customize controls

Here is a tool to test out the various options for customizing the controls.

<iframe height="700" scrolling="no" title="Navigation control options" src="//codepen.io/azuremaps/embed/LwBZMx/?height=700&theme-id=0&default-tab=result" frameborder='no' loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen Navigation control options by Azure Maps (@azuremaps) on CodePen. </iframe>

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.

Next steps

Learn more about the classes and methods used in this article:

[!div class="nextstepaction"] Compass Control

[!div class="nextstepaction"] PitchControl

[!div class="nextstepaction"] StyleControl

[!div class="nextstepaction"] ZoomControl

See the following articles for full code:

[!div class="nextstepaction"] Add a pin

[!div class="nextstepaction"] Add a popup

[!div class="nextstepaction"] Add a line layer

[!div class="nextstepaction"] Add a polygon layer

[!div class="nextstepaction"] Add a bubble layer