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.


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.


Add compass control

A compass control adds a button for rotating the map. The following code sample creates an instance of the Compass Control 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.Compass(), {
    position: 'bottom-left'
});

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


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.


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.


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:

See the following articles for full code: