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

Map Examples

Map Examples

Map Display

The TomTomOnlineSDKMaps contains variety of options, like various map layers: map
tiles and traffic tiles.

Map tiles

Allow your users to display the map in either raster or vector format:

  • Raster tiles are served as images. They require less processing power and memory to render, but have a larger file size than vector tiles.

  • Vector tiles take the form of data that describes map entries such as geographic points, forests, lakes,
    built up areas (as polygons), and roads (as lines). They are styled by means of a style sheet.
    Vector tiles can be scaled to different sizes without losing quality. The file size of vector tiles is smaller than that of raster tiles.

Sample use case 1: Your app is designed to use raster tiles for map display. You want to update the app with TomTom Maps API raster tiles.

Sample use case 2: You want to take advantages of vector tiles features such as map 2.5 D perspective, custom map styles, etc.

Sample use case 3: Your app runs on devices with different capabilities. You want to use vector tiles for map display on powerful devices and raster tiles on devices with less processing power.

Use the code snippets below in your app to display the map with raster or vector tiles.


Raster tiles.


[self.mapView setTilesType:TTMapTilesRaster];



Vector tiles.


[self.mapView setTilesType:TTMapTilesVector];


Traffic layers

Traffic layers

Give your users the ability to see real time traffic in your mobile apps.

With Traffic API Flow tiles your users will have information about congestion,
the speed of traffic on different road segments, and the difference between that speed and the
free-flow speed on the same road segments. You can find more information and details about
Traffic API Flow tile parameters on
Online Vector Traffic Flow tiles or
Online Raster Traffic Flow tiles.

Traffic API flow tiles

Traffic flow tiles are available in two formats: vector (.pbf) and raster (.png).
Vector tiles provide a possibility for visual customization and better visual experience.
Therefore, we recommend using the vector tiles for map and traffic display.
Raster tiles are especially suitable for low performance devices.

Vector traffic flow tiles are used by default for traffic flow in Maps SDK.
Traffic flow tiles are available from map zoom levels: 0 to 22.

You can switch to raster traffic by using these methods:


mapView.trafficTileStyle = TTRasterTileType.setStyle(.relative)
mapView.trafficIncidentsStyle = .raster
self.mapView.trafficTileStyle = [TTRasterTileType setStyle:TTRasterStyleRelative];
self.mapView.trafficIncidentsStyle = TTTrafficIncidentsStyleRaster;

You can switch to vector traffic by using these methods:


mapView.trafficTileStyle = TTVectorTileType.setStyle(.relative)
mapView.trafficIncidentsStyle = .vector
self.mapView.trafficTileStyle = [TTVectorTileType setStyle:TTVectorStyleRelative];
self.mapView.trafficIncidentsStyle = TTTrafficIncidentsStyleVector;

To turn on/off traffic flow or incidents use these methods:


mapView.trafficIncidentsOn = true
mapView.trafficFlowOn = true
self.mapView.trafficIncidentsOn = YES;
self.mapView.trafficFlowOn = YES;

Vector Traffic Flow Tiles Delegate

Additionally, you can get details about the specific traffic flow or incident of the road fragment (e.g. current speed, travel times, etc)
from Flow Segment Data
service which is integrated in Maps SDK. This service is designed to work alongside the traffic to support clickable
flow and incidents data visualizations. This is handled for you in the Maps SDK. SDK provides default implementation of trafficDelegate which is


mapView.trafficDelegate = TTMapTrafficDelegateDefault()
self.mapView.trafficDelegate = [[TTMapTrafficDelegateDefault alloc] init];

By default implementation, when you click on the specific traffic incident, a balloon with details is shown for incident flows:


let callout = TTMapTrafficCalloutFactory.create(with: trafficIncidentPoi)
mapView.display(callout, atPosition: coordinate)
TTMapTrafficCallout* callout = [TTMapTrafficCalloutFactory createWithIncidentPoi:trafficIncidentPoi];
[mapView displayTrafficCallout:callout atPosition:position];

The default implementation of incident click listener zoom the map when traffic cluster is clicked:


let newZoom = mapView.zoom + 1
if(newZoom < mapView.maxZoom) { position, withZoom: newZoom)
double newZoom = mapView.zoom + 1;
[mapView closeTrafficCallout];
if(newZoom < mapView.maxZoom) {
    [mapView centerOnCoordinate:position withZoom:newZoom];

Traffic type style

Traffic API flow tiles style types are represented in the SDK as an enum.
The available traffic flow styles are the following:




Traffic vector flow layer on vector map.


Traffic raster flow shown on raster map.


Traffic vector incidents layer on vector map.


Traffic raster incidents layer on vector map.


Traffic vector incidents and vector flow layer on vector map.


Traffic raster incidents and raster flow layer on raster map.

Map language

Allow your user to see the map in different languages to make your app international.
The language parameter determines the language of labels on the map.
It does not affect any proper nouns, like the names of streets, plazas, etc.
List of the supported languages can be found

Sample use case: You want to have all labels only in British English

To change language for the map:


Map labels in English


[self.mapView setLanguage:@"en-GB"];



Map labels in Russian


    [self.mapView setLanguage:@"ru-RU"];

Map labels in Dutch


    [self.mapView setLanguage:@"nl-NL"];

Geopolitical view

Allow your user to see the map boundaries based on international or local country views.
The local view is available for a particular area of the world that is considered
as disputed by two or more countries. As a result, each country can show this area as
a part of his country. List of the supported views can be found

Sample use case: You want to display local map view for Israel.

To change geopolitical view for the map:


Israel international view


[self.mapView setGeopoliticalView:TTGeoViewNone];



Israel local view


[self.mapView setGeopoliticalView:TTGeoViewIL];


Custom styles

Allow your user to create and provide the map with one or more custom styles for vector map tiles.

Modify default TomTom style

The best way to create a custom style is to modify the default TomTom style for vector maps using the Maputnik editor.
You can find the json map style in the resources directory.
The tutorial on how to modify the style is available for all Maps SDKs (for Android, iOS and Web) here link.
Note, that after step 9 of the linked tutorial, you need to save the json file and place it in resources directory of your app project.

Provide your style
You can provide an external map style file on the server and provide the URL. Sprites and fonts
should be stored locally in the application. Currently, we don’t support loading resources and fonts
from a server.

Sample use case: You want to display a night styled map at night or in a tunnel.

To change the style of the map:


let customStyle = Bundle.main.path(forResource: "style", ofType: "json")
NSString *customStyle = [NSBundle.mainBundle pathForResource:@"style" ofType:@"json"];
[self.mapView setStylePath:customStyle];
[self.mapView applyInvertedLogo];



Basic style


Night custom style

Switching Map Layers

Allow your users to dynamically toggle the visibility of map entities. You can hide map layers to get
the level of detail you need and highlight the layers that are important for your use case.

Sample use case: You want to provide a clear map view for driving that focuses on the road network
in your app. You can achieve that by switching off some map layers e.g. woodland, build-up areas, etc.
You can turn these layers back on at run time to bring back the details for a better map viewing experience.

The following articles provide more information on map layer visibility and map layers available in
the default style: Map layers, Default style.

You can retrieve all layers available in the style or only those that match provided regex.
To filter, you can use layer ID or source layer ID properties, as shown below:


Map Road network layers


layers = currentStyle.getLayersBySourceLayerRegexs([".*[rR]oad.*", ".*[mM]otorway.*"])
layers = [self.currentStyle getLayersBySourceLayerRegexs:@[@".*[rR]oad.*", @".*[mM]otorway.*"]];



Map woodland layers


layers = currentStyle.getLayersBySourceLayerRegex("Woodland.*")
layers = [self.currentStyle getLayersBySourceLayerRegex:@"Woodland.*"];



Map No Build-Up layers


layers = currentStyle.getLayersBySourceLayerRegex("Built-up area")
layers = [self.currentStyle getLayersBySourceLayerRegex:@"Built-up area"];


Unresolved directive in index.adoc - include::7MapLayersVisibility.adoc[]

Unresolved directive in index.adoc - include::8DynamicMapSources.adoc[]

Multiple Maps

Developers are not limited to attaching only a single map. You can put as many map objects as you want on the same page without any issues.

Sample use case: You want to display two independent maps in your app.


Map manipulation

When you use the TomTomOnlineSDKMaps in your application, users would like to play
with it in a variety of ways. In this section you will learn how to
implement such actions and how to register for their callbacks.

Map centering

Center the map in your mobile app either at the current coordinates or any other location, at the zoom level of your choice.

Sample use case: You want to display the maps for selected cities in specific zoom levels.
Your users should be able to easily to switch between different locations.

Use the code snippets below in your app to display maps of different locations (in this case, the current location and the TomTom offices in Amsterdam and Berlin).

The example shows how to center the map on Amsterdam:

_ TTCoordinate.AMSTERDAM(), withZoom: 10)
[self.mapView centerOnCoordinate:[TTCoordinate AMSTERDAM] withZoom:10];



Map centered on Amsterdam with 10 zoom level


Map centered on GPS with 10 zoom level

Map perspective

Set either 2D map perspective for typical map view mode, or 2.5D map perspective for custom scenarios such as moving the map.

Sample use case: You want to switch from 2D to 2.5D modes to support following the moving location in your app.
Use the code snippets below in your app to switch between perspectived.

Note, that switching between 2D and 3D mode only changes the perspective.
The zoom level and map orientation are set with the methods described in the "Map centering" example.

Perspective ratio can be changed fluent in value - false to true.


[self.mapView setPerspective3D:YES];



3D map perspective


2D map perspective

Map events

Implement any action you need to be triggered on one of the following map events:

  • Panning.

  • Single press.

  • Double press.

  • Long press.

To receive events you need to register id<TTMapViewDelegate> on map

Sample use case: In your app, users invoke one behavior with a single press and another with a long press.

Use the code snippets below in your app to catch map events. In this example,
the action is simply to display a toast with latitude and longitude on each map event.
Of course, you can implement other cool features instead.


func mapView(_ mapView: TTMapView, didDoubleTap coordinate: CLLocationCoordinate2D) {
- (void)mapView:(TTMapView *)mapView didDoubleTap:(CLLocationCoordinate2D)coordinate {



func mapView(_ mapView: TTMapView, didSingleTap coordinate: CLLocationCoordinate2D) {
- (void)mapView:(TTMapView *)mapView didSingleTap:(CLLocationCoordinate2D)coordinate {



func mapView(_ mapView: TTMapView, didLongPress coordinate: CLLocationCoordinate2D) {
- (void)mapView:(TTMapView *)mapView didLongPress:(CLLocationCoordinate2D)coordinate {



func mapView(_ mapView: TTMapView, didPanning coordinate: CLLocationCoordinate2D) {
- (void)mapView:(TTMapView *)mapView didPanning:(CLLocationCoordinate2D)coordinate {


In this example you will see a Toast with latitude and longitude of a
point that was clicked on the map, but you can utilize these information
in your own manner.


Receive callbacks after the map panning


Receive callbacks after the map panning


Receive callbacks after the map panning


Enable and disable gestures

You can disable gestures such as zooming, scrolling and rotating in your application by setting up an integer mask on properties like below:

Disable zooming gesture


self.mapView.disableGesturesMask = TTOptionGesturesDisableZoom;
self.mapView.disableGesturesMask = .zoom;


Disable the rotating gesture


self.mapView.disableGesturesMask = .rotate;
self.mapView.disableGesturesMask = TTOptionGesturesDisableRotate;


Disable the scrolling gesture


self.mapView.disableGesturesMask = .scroll;
self.mapView.disableGesturesMask = TTOptionGesturesDisableScroll;


You can turn off more than one gesture by setting up the mask on properties like below:


self.mapView.disableGesturesMask = [.scroll, .zoom]
self.mapView.disableGesturesMask = TTOptionGesturesDisableScroll | TTOptionGesturesDisableZoom;


If you want to enable gestures, setup the integer mask on a property like below:


self.mapView.disableGesturesMask = .none;
self.mapView.disableGesturesMask = TTOptionGesturesDisableNone;


Map annotations


You can place custom images on the map using TTAnnotation.
You can do that with a TTAnnotationManager which can be obtained from TTMapView.
Use a one of factory method from TTAnnotation to create an annotation, then pass it to manager.

You can display icons using a two of different types:

  • Focal (default) - where the icon always stands vertically even when the map is rotated. All nine callout anchor points are supported with this annotation type.

  • Decal - where icon sticks to the map even when the map is rotated. Only one callout anchor point is supported for decal TTAnnotationAnchorBottom

  • Draggable markers – allow your users to drag and drop a marker around the map

Mixing icons of focal and decal modes is generally unsupported and advised against, as there are unresolvable depth-sorting issues and the results
will not always look correct. It is safe to mix some modes, however, such as either of the decal modes with any of the standing modes.
For performance purposes, it is recommended to use the same tag for same images so they can be reused from cache.

Sample use case: In your app, you want to display a number of annotations, to mark places on the map.
Use the code snippet below to display a single annotation at specific coordinates on the map



Focal annotations examples


Decal annotations examples



let annotation = TTAnnotation(coordinate: cooridnate)
TTAnnotation *annotation = [TTAnnotation annotationWithCoordinate:coordinate];
[self.mapView.annotationManager addAnnotation:annotation];



let annotation = TTAnnotation(coordinate: cooridnate)
annotation.selectable = false
annotation.isDraggable = true
TTAnnotation *annotation = [TTAnnotation annotationWithCoordinate:coordinate];
annotation.selectable = NO;
annotation.isDraggable = YES;
[self.mapView.annotationManager addAnnotation:annotation];


Animated markers

Thanks to this feature you can use GIFs as marker icons. For this purpose, you need to place your images
in the assets folder and then use them in the following way:


let customIcon = TTAnnotationImage.createGIF(withName: "gif_annotation")!
let annotation = TTAnnotation(coordinate: cooridnate, annotationImage: customIcon, anchor: .bottom, type: .decal)
annotation.selectable = false
TTAnnotationImage *customIcon = [TTAnnotationImage createGIFWithName:@"gif_annotation"];
TTAnnotation *annotation = [TTAnnotation annotationWithCoordinate:coordinate annotationImage:customIcon anchor:TTAnnotationAnchorBottom type:TTAnnotationTypeDecal];
annotation.selectable = NO;
[self.mapView.annotationManager addAnnotation:annotation];


Annotation anchor

You have a possibility to change the anchoring point for your icon. The anchor specifies which point of an annotation image is attached to the map.
The annotation will rotate around this anchoring point when rotating the map.
You can use the default image representation of an annotation which is attached to the bottom height center width.
You can change this behavior by TTAnnotationAnchor enumeration.
E.g. if you want to use a crosshair annotation image, you should set the anchor to TTAnnotationAnchorCenter

Annotation selected

You can implement an observable of annotation selected event. You can do that with the global delegate TTAnnotationDelegate
for all annotations that has to be registered on TTAnnotationManager as following

Annotation click listener

Maps SDK allows to observe annotation selected event.
There is one global delegate TTAnnotationDelegate for all annotations that has to be registered on TTAnnotationManager as followed.


mapView.annotationManager.delegate = self
self.mapView.annotationManager.delegate = self;



func annotationManager(_ manager: TTAnnotationManager, annotationSelected annotation: TTAnnotation) {
    //handle annotation selected event
- (void)annotationManager:(id<TTAnnotationManager>)annotationManager annotationSelected:(TTAnnotation *)annotation {
    //handle annotation selected event


Annotations clustering

Allow your users to cluster annotations for better visualization. By default, annotations clustering is disabled.
You can decide per each marker, if it should be included in the clustering process or not (e.g. you want to have a few
annotations that are never clustered). To manipulate marker clustering, use TTAnnotationManager obtained
from TTMapView.

Sample use case: You want to display the distribution of parking spots across the city. Individual parking spots are
shown only at higher zoom levels, otherwise data is clustered for better visualization.

To enable annotations clustering:


mapView.annotationManager.clustering = true
self.mapView.annotationManager.clustering = YES;


To flag a marker that it should be clustered:


annotation.shouldCluster = true
annotation.shouldCluster = YES;


Examples are shown below:


Lower zoom level


Higher zoom level


Allow your users to display and customize balloons in a few lines of code.

Sample use case: You would like to learn more about a place on the map. Depending on the
selected location, the app displays a balloon containing either text or additional information such
as icons or pictures.

To display a balloon, attach a callout to a TTAnnotation. The map can display only one annotation
at a time

A callout can be triggered in two ways:

  • Automatically, if the annotation is tapped on the map

  • Calling TTAnnotationManager:selectAnnotation

There can be only one selected annotation on the map at a time.

A callout can be closed in the following ways:

  • Automatically, if a user taps on the map

  • Automatically, if a user taps on another annotation

  • Calling TTAnnotationManager:deselectAnnotation if the annotation is attached to the map, it is removed from the map

A callout is an instance of UIView that implements the TTCalloutView protocol. You can use one of the built-in callout views, such as the default TTCalloutViewSimple, or make your own custom balloon.

Default Balloons

The default behavior for an annotation is to display an instance of TTCalloutViewSimple containing the annotation’s coordinates. You can change the following properties:

  • TTAnnotation:canShowCallout determines if the annotation can display a callout. The default value is YES. If it is set to NO, the annotation can still be selected but no callout will appear.

  • TTAnnotation:selectable: determines if the annotation can be selected at all. The default value is YES. If it is set to NO, then no callout will be displayed.

To change the default text of a simple callout, register your delegate on the annotation manager and override the viewForSelectedAnnotation method


mapView.annotationManager.delegate = self
self.mapView.annotationManager.delegate = self;



func annotationManager(_ manager: TTAnnotationManager, viewForSelectedAnnotation selectedAnnotation: TTAnnotation) -> UIView & TTCalloutView {
        return TTCalloutOutlineView(text: "\(selectedAnnotation.coordinate.latitude),\(selectedAnnotation.coordinate.longitude)")
- (UIView<TTCalloutView>*)annotationManager:(id<TTAnnotationManager>)manager viewForSelectedAnnotation:(TTAnnotation *)selectedAnnotation {
        return [[TTCalloutOutlineView alloc] initWithText:[NSString stringWithFormat:@"%f,%f", selectedAnnotation.coordinate.latitude, selectedAnnotation.coordinate.longitude]];




Custom Balloons

Although you can use default callouts, SDK also allows you to create fully customizable ones.
A callout is nothing more than a Cocoa UIView implementing the TTCalloutView protocol. Callouts can be built by either Interface Builder or programmatically.

This is an example of a custom callout:


mapView.annotationManager.delegate = self
self.mapView.annotationManager.delegate = self;



var customAnnotation: TTAnnotation?
@interface MapBallonsViewController() <TTAnnotationDelegate>
@property (nonatomic, strong) TTAnnotation *customAnnotation;



func annotationManager(_ manager: TTAnnotationManager, viewForSelectedAnnotation selectedAnnotation: TTAnnotation) -> UIView & TTCalloutView {
        return CustomCallout(frame:
- (UIView<TTCalloutView>*)annotationManager:(id<TTAnnotationManager>)manager viewForSelectedAnnotation:(TTAnnotation *)selectedAnnotation {
        return [[CustomCallout alloc] initWithFrame:CGRectZero];





Allow your users to draw shapes like circles, polygons and polylines on your map to mark different areas on the map.

Sample use case: You are developing an app for a delivery company and need to illustrate ranges of the transportation area around different cities.
What you need to do is e.g. to render circles round cities with radiuses indicating zones of deliveries.
The details on the example implementation of shapes rendering are described below.

A TTMapView supports several shape overlays. These are:

  • TTCircle

  • TTPolygon

  • TTPolyline

Shape overlays are immutable i.e. once they have been created, their shapes cannot be changed (although you may change their visibility and color).
If you want to change a shape, you must remove the existing shape and replace it with a new one.

It is the responsibility of the framework user to be conscientious about performance and how many shape overlays they are using.
You should use as few shapes as possible, and hide or dispose of ones that are not being displayed.

Code examples are below:


let polygon = TTPolygon(coordinates: &coordinates, count: UInt(pointsCount), opacity: 1, color: color, colorOutline: color)
TTPolygon *polygon = [TTPolygon polygonWithCoordinates:coordinates count:pointsCount opacity:1 color:color colorOutline:color];
[self.mapView.annotationManager addOverlay:polygon];



let polyline = TTPolyline(coordinates: &coordinates, count: UInt(pointsCount), opacity: 1, width: 8, color: color)
TTPolyline *polyline = [TTPolyline polylineWithCoordinates:coordinates count:pointsCount opacity:1 width:8 color:color];
[self.mapView.annotationManager addOverlay:polyline];



let circle = TTCircle(center: TTCoordinate.AMSTERDAM(), radius: 5000, opacity: 1, width: 10, color: color, fill: true, colorOutlet: color)
TTCircle *circle = [TTCircle circleWithCenterCoordinate:[TTCoordinate AMSTERDAM] radius:5000 opacity:1 width:10 color:color fill:YES colorOutlet:color];
[self.mapView.annotationManager addOverlay:circle];








Click delegate

You can implement an observable of shape clicked event. You can do that with the global delegate TTAnnotationDelegate
for all shapes that has to be registered on TTAnnotationManager as following

Maps SDK allows to observe shape selected event.
There is one global delegate TTAnnotationDelegate for all shapes that has to be registered on TTAnnotationManager as followed.


mapView.annotationManager.delegate = self
self.mapView.annotationManager.delegate = self;



func annotationManager(_ manager: TTAnnotationManager, touchUp polyline: TTPolyline) {
    //called when polyline clicked
- (void)annotationManager:(id<TTAnnotationManager>)manager touchUpPolyline:(TTPolyline *)polyline{
    //called when polyline clicked



func annotationManager(_ manager: TTAnnotationManager, touchUp polygon: TTPolygon) {
    //called when polygon clicked
-(void)annotationManager:(id<TTAnnotationManager>)manager touchUpPolygon:(TTPolygon *)polygon{
    //called when polygon clicked



func annotationManager(_ manager: TTAnnotationManager, touchUp circle: TTCircle) {
    //called when circle clicked
- (void)annotationManager:(id<TTAnnotationManager>)manager touchUpCircle:(TTCircle *)circle{
    //called when circle clicked


Route display

You can display a route on the map and customize its origin and destination icons.
It is also possible to specify the fill color, outline color and width of the route.

Sample use case: when you add the route, you would like to highlight the starting and
the destination points. Also you would like to plan several routes simultaneously
with different origin and destination points and use different icons.


TTMapView *mapView object was created and configured. Route coordinates are prepared.

Origin and destination icons customization

If you need to customize start and destination icons, you should create icons through UIImage class.

The icon can be created in following ways:


iconStart = UIImage(named: "Start")!
iconEnd = UIImage(named: "End")!
self.iconStart = [UIImage imageNamed:@"Start"];
self.iconEnd = [UIImage imageNamed:@"End"];
Route customization

You can create a route with custom style properties like fill color, outline color and width. Firstly, you need to create RouteStyle object:


routeStyle = TTMapRouteStyleBuilder()
self.routeStyle = [[[[[TTMapRouteStyleBuilder new]

Next, you need to pass mapRoute object to addRoute`method of `mapView.routeManager object, e.g.:


let mapRoute = TTMapRoute(coordinatesData: plannedRoute, with: routeStyle,
                          imageStart: iconStart, imageEnd: iconEnd)
TTMapRoute *mapRoute = [TTMapRoute routeWithCoordinatesData:plannedRoute withRouteStyle:self.routeStyle imageStart:self.iconStart imageEnd:self.iconEnd];
[self.mapView.routeManager addRoute:mapRoute];

If you provide nil for imageStart or imageEnd there will be no icons on the route.
If you don’t call style then the default style will be applied.

Route segmented customization

You can create a route with segmented sections where each segment contains custom style properties like fill color, outline color and width.


// Section 1
let routeStyle1 = TTMapRouteStyleBuilder()
let startPoint1 = plannedRoute.sections[0].startPointIndexValue
let endPoint1 = plannedRoute.sections[0].endPointIndexValue
var coordinatesSection1 = arrayOfCoordiantes(plannedRoute: plannedRoute, start: startPoint1, end: endPoint1)
let mapRoute = TTMapRoute(coordinates: &coordinatesSection1, count: UInt(coordinatesSection1.count) , with: routeStyle1,
                          imageStart: iconStart, imageEnd: iconEnd)
// Section 2
let routeStyle2 = TTMapRouteStyleBuilder()
let startPoint2 = plannedRoute.sections[1].startPointIndexValue
let endPoint2 = plannedRoute.sections[1].endPointIndexValue
var coordinatesSection2 = arrayOfCoordiantes(plannedRoute: plannedRoute, start: startPoint2, end: endPoint2)
mapRoute.addCoordinates(&coordinatesSection2, count: UInt(coordinatesSection2.count), with: routeStyle2)
// Section 1
TTMapRouteStyle *routeStyle1 = [[[[[TTMapRouteStyleBuilder new]
NSInteger startPoint1 = plannedRoute.sections[0].startPointIndexValue;
NSInteger endPoint1 = plannedRoute.sections[0].endPointIndexValue;
CLLocationCoordinate2D coordinateArray[endPoint1-startPoint1];
[self arrayOfCoordinates:plannedRoute withStart:startPoint1 withEnd:endPoint1 withArray:coordinateArray];
TTMapRoute *mapRoute = [TTMapRoute routeWithCoordinates:coordinateArray count:endPoint1 withRouteStyle:routeStyle1 imageStart:self.iconStart imageEnd:self.iconEnd];
// Section 2
TTMapRouteStyle *routeStyle2 = [[[[[TTMapRouteStyleBuilder new]
NSInteger startPoint2 = plannedRoute.sections[1].startPointIndexValue;
NSInteger endPoint2 = plannedRoute.sections[1].endPointIndexValue;
CLLocationCoordinate2D coordinateArray2[endPoint2-startPoint2];
[self arrayOfCoordinates:plannedRoute withStart:startPoint2 withEnd:endPoint2 withArray:coordinateArray2];
[mapRoute addCoordinates:coordinateArray2 count:endPoint2-startPoint2 withRouteStyle:routeStyle2];

You are here