add-controls-map-ios.md

title	titleSuffix	description	author	ms.author	ms.date	ms.topic	ms.service	services
Add controls to an iOS map	Microsoft Azure Maps	How to add zoom control, pitch control, rotate control and a style picker to a map in Microsoft Azure Maps iOS SDK.	stevemunk	v-munksteve	11/19/2021	how-to	azure-maps	azure-maps

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

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

The screenshot below is of a zoom control loaded on a map.

:::image type="content" source="./media/ios-sdk/add-controls-to-map-ios/zoom.png" alt-text="Screenshot showing the zoom control on a map." lightbox="./media/ios-sdk/add-controls-to-map-ios/zoom.png":::

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

The screenshot below is of a pitch control loaded on a map.

:::image type="content" source="./media/ios-sdk/add-controls-to-map-ios/pitch.png" alt-text="Screenshot showing the pitch control on a map." lightbox="./media/ios-sdk/add-controls-to-map-ios/pitch.png":::

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

The screenshot below is of a rotation control loaded on a map.

:::image type="content" source="./media/ios-sdk/add-controls-to-map-ios/rotation.png" alt-text="Screenshot showing the rotation control on a map." lightbox="./media/ios-sdk/add-controls-to-map-ios/rotation.png":::

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

The screenshot below is of a traffic control loaded on a map.

:::image type="content" source="./media/ios-sdk/add-controls-to-map-ios/traffic.png" alt-text="Screenshot showing the traffic control on a map." lightbox="./media/ios-sdk/add-controls-to-map-ios/traffic.png":::

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

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

The screenshot below shows all controls loaded on a map. The order they are added to the map, is the order they will appear.

:::image type="content" source="./media/ios-sdk/add-controls-to-map-ios/all.png" alt-text="Screenshot showing a map with all controls added to it." lightbox="./media/ios-sdk/add-controls-to-map-ios/all.png":::

Additional information

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

• Add a symbol layer
• Add a bubble layer
• Add a line layer
• Add a polygon layer