Map UI Extensions

The iOS Maps SDK provides the following built-in UI views:

• Compass button
• Current location button
• Panning controls
• Zooming controls

You can toggle the visibility of these views using the UiSettings class. Changes made on this class are immediately reflected on the map. Each UI element has a predefined style that determines its position relative to the edge of the map. This style can be overridden to provide a custom position, adjust size, or replace default colors. It is also possible to alter these parameters in runtime by modifying the view’s LayoutParams.

Getting started

TTControlView class is a part of TomTomOnlieSDKMapsUIExtensions framework. To be able to use it, add this framework to Podfile as follows:

pod 'TomTomOnlineSDKMapsUIExtensions'

The next step is to add TTControlView on top of TTMapView with the same size, either through constraints or a frame, and then to make a relation between these views.

controlView.mapView = mapView

controlView.mapView = self.mapView

Compass

By default, the compass button is enabled and located at the top left corner of the map: "MapView". The compass only appears when the map orientation is different than zero (‘North' position). When the user clicks on the compass button, the map orientation is set to zero and the compass disappears.

• To disable the compass button:

controlView.compassButton?.isHidden = true

self.controlView.compassButton.hidden = YES;

• To enable the compass button:

controlView.initDefaultCompassButton()

[self.controlView initDefaultCompassButton];

• To override the default style:

controlView.setCompassButton(customCompassButton, withDefaultConstraints: true)

[self.controlView setCenterButton:customCompassButton withDefaultConstraints:YES];

Current location

By default, the current location button is enabled and placed in the bottom-left corner of the map: "MapView". The current location button appears only when the map center position on the screen is different from the user’s current location. When the user clicks the current location button, the map location is set to the user’s location and the button disappears. The default action for the button centers the map on the user’s location if "MapView" has been set up to show the current position on 'YES'.

• To disable the current location button:

controlView.centerButton?.isHidden = true

self.controlView.centerButton.hidden = YES;

• To enable the current location button:

controlView.initDefaultCenterButton()

[self.controlView initDefaultCenterButton];

• To override the default style:

controlView.setCenter(customCurrentLocationButton, withDefaultConstraints: true)

[self.controlView setCenterButton:customCurrentLocationButton withDefaultConstraints:YES];

Panning controls

By default, the panning controls view is disabled and it is placed vertically in the center and horizontally on right-side of the map: "MapView". The default action for the view is to move the map in a desired direction.

• To enable the panning controls:

controlView.initDefaultTTPanControlView()

[self.controlView initDefaultTTPanControlView];

• To disable the panning controls:

controlView.controlView?.isHidden = true

self.controlView.controlView.hidden = YES;

* To override the default style:

controlView.controlView?.leftControlBtn = customControlLeftButton

self.controlView.controlView.leftControlBtn = customControlLeftButton;

Zooming controls

By default, the zooming controls view is disabled and it is placed vertically in the center and horizontally on right-side of the map: "MapView". The default action for the view is to zoom in or zoom out the map.

• To enable the zooming controls:

controlView.initDefaultTTZoom()

[self.controlView initDefaultTTZoomView];

• To disable the zooming controls:

controlView.zoomView?.isHidden = true

self.controlView.zoomView.hidden = YES;

• To override the default style:

controlView.zoomView?.zoomIn = customControlZoomInButton

self.controlView.zoomView.zoomIn = customControlZoomInButton;

== Api Reference Map UI Extensions API reference for Map UI Extensions