Sorry, you need to enable JavaScript to visit this website.

Map Extensions

Map Extensions

Have a look at our map extensions to make development more concise and pleasant.

Map UI Extensions

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 reflected on the map immediately.
Each UI element has a pre defined style that determines its position relative to the edge of the map.
This style can be overridden to provide custom position, adjust size or replace default colors.
It is also possible to alter these parameters in runtime by modifying 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'

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 in the top left corner of the map - ‘MapView'. The compass appears only 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.

 



image

Default

image

Pressed

image

North up

 

  • 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 default style:

_

controlView.compassButton = customCompassButton
self.controlView.compassButton = customCompassButton;

 

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 user’s current location. When the user clicks on the current location button, the map location is set to the user’s location and the button disappears.
The default action for the button centres the map on the user’s location if 'MapView' has set up shown current position on 'YES'.

 



image

Default

image

Pressed

 

  • 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 default style:

_

controlView.centerButton = customCurrentLocationButton
self.controlView.centerButton = customCurrentLocationButton;

 

Panning controls

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

 



image
image

Pan down

image
image

Pan left

image
image

Pan right

image
image

Pan up

 

  • 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 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 site of the map -'MapView'.
The default action for the view is to zoom in or zoom out the map.

 



image
image

Zoom in

image
image

Zoom out

 

  • 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 default style:

_

controlView.zoomView?.zoomIn = customControlZoomInButton
self.controlView.zoomView.zoomIn = customControlZoomInButton;

 

Static Map Image

Allow your user to render a user-defined, rectangular image, containing a map section.

For more details, please visit Static Map Image documentation

Sample use case 1: Your app is designed to use simple map. You do not want to show the entire map,
just some part of it to show and mark something simple. You don’t have to download the whole TomTomOnlineSDKMaps
library which is much heavier comparing to this library.

To use this library, add the following dependency to the Podfile file:

pod 'TomTomOnlineSDKMapsStaticImage'

Example of displaying static map:

_

let query = TTStaticImageQueryBuilder.withCenter(TTCoordinate.AMSTERDAM())
                                     .withLayer(.basic)
                                     .withStyle(.main)
                                     .withExt(.PNG)
                                     .withHeight(512)
                                     .withWidth(512)
                                     .build()
TTStaticImageQuery *query = [[[[[[[TTStaticImageQueryBuilder withCenter:[TTCoordinate AMSTERDAM]] withLayer:TTLayerTypeBasic] withStyle:TTStyleTypeMain] withExt:TTExtTypePNG] withHeight:512] withWidth:512] build];

 



image

Sample image retrieved from static map service.

image

Examples of static map images.