map-add-controls.md

title	description	author	ms.author	ms.date	ms.topic	ms.service	services	manager
Add map controls in Azure Maps| Microsoft Docs	How to add zoom control, pitch control, rotate control and a style picker to a map in Azure Maps.	walsehgal	v-musehg	10/08/2018	conceptual	azure-maps	azure-maps	timlt

Add Map Controls to Azure Maps

This article shows you how to add map controls to a map. You will also learn how to create a map with all controls and a style picker.

Add zoom control

<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' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Adding a zoom control by Azure Maps (@azuremaps) on CodePen. </iframe>

The first code block sets the subscription key and creates a Map object without pre-setting the style. See create a map for instructions on how to create a map.

Zoom control adds the ability to zoom in and out of the map. The second code block creates a Zoom Control object using the atlas ZoomControl and adds it to the map using map's controls.add method. The Zoom control is within the map event listener to ensure it loads after the map loads fully.

Add pitch control

<iframe height='500' scrolling='no' title='Adding a pitch control' src='//codepen.io/azuremaps/embed/xJrwaP/?height=265&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Adding a pitch control by Azure Maps (@azuremaps) on CodePen. </iframe>

The first code block sets the subscription key and creates a Map object without pre-setting the style. See create a map for instructions on how to create a map.

Pitch control adds the ability to change the pitch of the map. The second block of code creates a Pitch Control object using the atlas PitchControl and adds it to the map using map's controls.add method. The Pitch control is within the map event listener to ensure it loads after the map loads fully.

Add compass control

<iframe height='500' scrolling='no' title='Adding a rotate control' src='//codepen.io/azuremaps/embed/GBEoRb/?height=265&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Adding a rotate control by Azure Maps (@azuremaps) on CodePen. </iframe>

The first code block sets the subscription key and creates a Map object without pre-setting the style. See create a map for instructions on how to create a map.

The second block of code creates a Compass Control object using the atlas Compass Control. It also adds the compass control to the map using map's controls.add method. The Compass control is within the map event listener to ensure it loads after the map loads fully.

A Map with all controls

<iframe height='500' scrolling='no' title='A map with all the controls' src='//codepen.io/azuremaps/embed/qyjbOM/?height=265&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen A map with all the controls by Azure Maps (@azuremaps) on CodePen. </iframe>

The first code block sets the subscription key and creates a Map object without pre-setting the style. See create a map for instructions on how to create a map.

The second code block creates a Compass Control object using the atlas CompassControl and adds it to the map using map's controls.add method.

The third block of code creates a Zoom Control object using the atlas ZoomControl and adds it to the map using map's controls.add method.

The fourth code block creates a Pitch Control object using the atlas PitchControl and adds it to the map using map's controls.add method.

The last block of code creates a Style Picker object by using the atlas StyleControl and adds it to the map using map's controls.add method. All of the control objects are added within the map event listener to ensure that they load after the map loads fully.

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 script.

Next steps

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

[!div class="nextstepaction"] Map

[!div class="nextstepaction"] Atlas

See the following articles for full code:

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

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