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

Map Initialization

Map Initialization

The Maps SDK for iOS allows you to initialize the map with a previously setup configuration. For this purpose, use the init method TTMapView with frame and mapConfiguration. The TTMapConfiguration object allows you to set initial map values with the following method:

  • viewportTransform: The TTViewportTransform object allows you to set an initial viewport transform for the map configuration.

  • mapStyleConfiguration: The TTStyleConfiguration object allows you to add your own style configuration.

  • TomTomLogoPosition: The TTLogoPosition object allows you to place the logo on the map where you wish by using enumerations containing positions and Offset information.

Use the following code snippets in your app to display maps of different locations (in this case, the current location by placing a bounding box on Amsterdam and by centering the point to the TomTom office in Łódź).

Centering the map on load using bounding box:

_

let transform = TTCenterOnGeometryBuilder.create(withGeometry: [
    .init(TTCoordinate.AMSTERDAM_BOUNDINGBOX_LT()),
    .init(TTCoordinate.AMSTERDAM_BOUNDINGBOX_RT()),
    .init(TTCoordinate.AMSTERDAM_BOUNDINGBOX_LB()),
    .init(TTCoordinate.AMSTERDAM_BOUNDINGBOX_RB()),
], withPadding: .zero)
    .withPitch(30)
    .withBearing(-90)
    .build()
let config = TTMapConfigurationBuilder.create().withViewportTransform(transform).withMapKey(Key.Map).withTrafficKey(Key.Traffic)
NSArray *arrayCoordinates = [NSArray
    arrayWithObjects:[[CLLocation alloc] init:[TTCoordinate AMSTERDAM_BOUNDINGBOX_LT]], [[CLLocation alloc] init:[TTCoordinate AMSTERDAM_BOUNDINGBOX_RT]], [[CLLocation alloc] init:[TTCoordinate AMSTERDAM_BOUNDINGBOX_LB]], [[CLLocation alloc] init:[TTCoordinate AMSTERDAM_BOUNDINGBOX_RB]], nil];
TTCenterOnGeometry *transform = [[[[TTCenterOnGeometryBuilder createWithGeometry:arrayCoordinates withPadding:UIEdgeInsetsZero] withPitch:30] withBearing:-90] build];
TTMapConfigurationBuilder *config = [[[[TTMapConfigurationBuilder createBuilder] withViewportTransform:transform] withMapKey:Key.Map] withTrafficKey:Key.Traffic];

 

Centering the map on load using center on point:

_

let builder = TTMapConfigurationBuilder.create().withTrafficKey(Key.Traffic).withMapKey(Key.Map)
let transform = TTCenterOnPointBuilder.create(withCenter: TTCoordinate.LODZ_ZEROMSKIEGO()).withZoom(15).build()
let config = builder.withViewportTransform(transform)
TTCenterOnPoint *transform = [[[TTCenterOnPointBuilder createWithCenter:[TTCoordinate LODZ_ZEROMSKIEGO]] withZoom:15] build];
TTMapConfigurationBuilder *config = [[[[TTMapConfigurationBuilder createBuilder] withViewportTransform:transform] withMapKey:Key.Map] withTrafficKey:Key.Traffic];

 

You can also set the positions of the TomTom logo, but remember that the logo must fully fit into the bounds of mapview. Otherwise there is an exception due to an error in displaying the logo on the map.

_

let position = TTLogoPosition(verticalPosition: .bottom, horizontalPosition: .right, verticalOffset: -65, horizontalOffset: -170)
config.withTomTomLogoPosition(position)
TTLogoPosition *position = [[TTLogoPosition alloc] initWithVerticalPosition:bottom horizontalPosition:right verticalOffset:-65 horizontalOffset:-170];
[config withTomTomLogoPosition:position];

 

Use the configuration object to initialize the map with the following code:

_

let style = TTMapStyleDefaultConfiguration()
config.withMapStyleConfiguration(style)
map = TTMapView(mapConfiguration: config.build())
TTMapStyleDefaultConfiguration *style = [[TTMapStyleDefaultConfiguration alloc] init];
[config withMapStyleConfiguration:style];
self.map = [[TTMapView alloc] initWithMapConfiguration:[config build]];

 

image

Bounding Box

image

Starting point