Add controls to a map (Android SDK)

This article shows you how to add UI controls to the map.

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 to a map.

//Construct a zoom control and add it to the map.
map.controls.add(new ZoomControl());

//Construct a zoom control and add it to the map.
map.controls.add(ZoomControl())

The following screenshot shows a zoom control loaded on a map.

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 and adds it to a map.

//Construct a pitch control and add it to the map.
map.controls.add(new PitchControl());

//Construct a pitch control and add it to the map.
map.controls.add(PitchControl())

The following screenshot shows a pitch control loaded on a map.

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 to a map.

//Construct a compass control and add it to the map.
map.controls.add(new CompassControl());

//Construct a compass control and add it to the map.
map.controls.add(CompassControl())

The following screenshot shows a compass control loaded on a map.

Add traffic control

A traffic control adds a button for toggling the visibility of traffic data on the map. The following code sample creates an instance of the TrafficControl class and adds it to a map.

//Construct a traffic control and add it to the map.
map.controls.add(new TrafficControl());

//Construct a traffic control and add it to the map.
map.controls.add(TrafficControl())

The following screenshot shows a traffic control loaded on a map.

A map with all controls

To simplify development, add multiple controls to an array and map simultaneously then position in the same area. The following code adds the standard navigation controls to the map using this approach.

map.controls.add(
    new Control[]{
        new ZoomControl(),
        new CompassControl(),
        new PitchControl(),
        new TrafficControl()
    }
);

map.controls.add(
    arrayOf<Control>(
        ZoomControl(),
        CompassControl(),
        PitchControl(),
        TrafficControl()
    )
)

The following screenshot shows all controls loaded on a map. They appear in the order they're added to the map.

Next steps

See the following articles for more code samples to add to your maps:

Add a symbol layer

Add a bubble layer

Add a line layer

Add a polygon layer