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

Map initialization

Map initialization

You can initiate the map in two ways with the Maps SDK:

  1. Map initialization using Storyboard – allows you to visualize/prototype the map display in the user interface of your app with Storyboards.

  2. Map initialization from the code using TTMapConfiguration – makes it possible to set the map configuration options from the code. Also, the TomTom logo placement can only be defined with TTMapConfiguration.

You can find both ways described in this page.

1. Map initialization using Storyboard

The main class that represents a Map is a TTMapView. The TTMapView is an interactive world map that pans and zooms in response to gestures. Use its methods to receive map-related update messages in your application as long as they conform to the TTMapViewDelegate protocol.

To initialize a map using storyboards:

  1. Drop the UIView object from the Library into your storyboard.

  2. In the Class field, set the class to TTMapView.

  3. Add the values MapKey and TrafficKey to the User Defined Runtime Key path attributes.

  4. Set the value type for these keys as String.

  5. Enter your service keys into the fields.

image

Map initialization using Storyboard

2. Map initialization using TTMapConfigurationBuilder

The basic steps for adding a map are:

  1. Set up your project as it is described in DOWNLOADS.

  2. Create the object 'TTMapView'.

  3. Obtain the keys to the constructor class.

  4. Use the 'TTMapView' object to set the map properties.

_

let builder = TTMapConfigurationBuilder.create()
let style = TTMapStyleDefaultConfiguration()
let config = builder.withMapStyleConfiguration(style).build()
let mapview = TTMapView(mapConfiguration: config)
TTMapConfigurationBuilder *builder = [TTMapConfigurationBuilder createBuilder];
TTMapStyleDefaultConfiguration *style = [[TTMapStyleDefaultConfiguration alloc] init];
TTMapConfiguration *configuration = [[builder withMapStyleConfiguration:style] build];
TTMapView *mapView = [[TTMapView alloc] initWithMapConfiguration:configuration];

[Optional] Create the TTMapConfiguration object and pass it to the MapView init method. The TTMapConfiguration object allows you to configure the initial viewport and TomTom logo position.

TTMapConfiguration

Map configuration is an extra parameter that can be used to init a 'TTMapView'.

_

let mapview = TTMapView(mapConfiguration: config)
TTMapView *mapView = [[TTMapView alloc] initWithMapConfiguration:configuration];

 

TomTom Keys

The service key is added by entering it into the class constructor.

_

let mapConfig = TTMapConfigurationBuilder.create().withMapKey(<Key>).withTrafficKey(<Key>).build()
self.mapView = TTMapView(frame: view.bounds, mapConfiguration: mapConfig)
TTMapConfiguration *mapConfig = [[[[[TTMapConfigurationBuilder createBuilder] withMapKey:<Key>] withTrafficKey:<Key>] build];
self.mapView = [[TTMapView alloc] initWithFrame:self.view.bounds mapConfiguration:mapConfig];

 

TomTom Logo

When using the Maps SDK for iOS, it is required that the TomTom logo is always visible. By default, the TomTom logo is located at the bottom-left corner of the map. However, you can easily customize its position to meet your app design by passing the TTLogoPosition object to your map configuration object.

_

let logoPosition = TTLogoPosition(verticalPosition: .bottom, horizontalPosition: .right)
let mapConfig = TTMapConfigurationBuilder.create().withTomTomLogoPosition(logoPosition).build()
let mapview = TTMapView(mapConfiguration: mapConfig)
TTLogoPosition *logoPosition = [[TTLogoPosition alloc] initWithVerticalPosition:bottom horizontalPosition:left];
TTMapConfiguration *mapConfig = [[[[TTMapConfigurationBuilder createBuilder] withViewportTransform:viewportTransform] withTomTomLogoPosition:logoPosition] build];
TTMapView *mapView = [[TTMapView alloc] initWithMapConfiguration:mapConfig];

 

ViewportTransform

If you want to init a 'TTMapView' centered on specific place with a custom bearing and pitch, you should check the TTViewportTransform param of TTMapConfiguration.

_

let viewportTransform = TTCenterOnGeometryBuilder.create(withGeometry: [
        .init(latitude: 52.3274167028, longitude: 4.72924173),
        .init(latitude: 52.43106373, longitude: 5.0310596876),
        .init(latitude: 52.43106373, longitude: 4.72924173),
        .init(latitude: 52.3274167028, longitude: 4.72924173),
    ], withPadding: .zero)
        .withPitch(30)
        .withBearing(-90)
        .build()
let mapConfig = TTMapConfigurationBuilder.create().withViewportTransform(viewportTransform).build()
self.mapView = TTMapView(frame: view.bounds, mapConfiguration: mapConfig)
NSArray<CLLocation *> *geometry = @[[[CLLocation alloc] initWithLatitude:52.3274167028 longitude:4.72924173], [[CLLocation alloc] initWithLatitude:52.43106373 longitude:5.0310596876], [[CLLocation alloc] initWithLatitude:52.43106373 longitude:4.72924173],[[CLLocation alloc] initWithLatitude:52.3274167028 longitude:4.72924173]];
TTCenterOnGeometry *viewportTransform = [[[[TTCenterOnGeometryBuilder createWithGeometry:geometry withPadding:UIEdgeInsetsZero] withPitch:30] withBearing:-90] build];
TTMapConfiguration *mapConfig = [[[[TTMapConfigurationBuilder createBuilder] withViewportTransform:viewportTransform] build];
TTMapView *mapView = [[TTMapView alloc] initWithMapConfiguration:mapConfig];

 

OnMapReadyCompletion:

_

self.mapView.onMapReadyCompletion {
    //
}
[self.mapView onMapReadyCompletion:^{
    //
}];