Add controls to a map in the iOS SDK (Preview)

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

Note

Azure Maps iOS SDK retirement

The Azure Maps Native SDK for iOS is now deprecated and will be retired on 3/31/25. To avoid service disruptions, migrate to the Azure Maps Web SDK by 3/31/25. For more information, see The Azure Maps iOS SDK migration guide.

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(ZoomControl())

This screenshot shows a zoom control loaded on a map.

Screenshot showing the zoom control 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(PitchControl())

This screenshot shows a pitch control loaded on a map.

Screenshot showing the pitch control on a map.

Add rotation control

A rotation control adds a button for rotating the map. The following code sample creates an instance of the RotationControl class and adds it to a map.

// Construct a rotation control and add it to the map.
map.controls.add(RotationControl())

This screenshot shows a rotation control loaded on a map.

Screenshot showing the rotation control 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(TrafficControl())

This screenshot shows a traffic control loaded on a map.

Screenshot showing the traffic control on a map.

A map with all controls

Multiple controls can be added to an array and the map then positioned in the same area of the map to simplify development. The following code adds the standard navigation controls to the map using this approach.

map.controls.add([
    ZoomControl(),
    RotationControl(),
    PitchControl(),
    TrafficControl()
])

This screenshot shows all controls loaded on a map, appearing in the order they were added.

Screenshot showing a map with all controls added to it.

Additional information

The following articles show how to add other available layers to your maps: