VERSION 0.2.1455

The Map Display module allows you to handle route planning and driving actions on the map. This guide covers how to draw a Route, show the progress along it, and track the user’s location during the trip.

If you’re looking for route planning, see the Planning a route guide. For navigation functionality, go to the Navigation module. A good place to start is the Navigation quickstart guide.

Adding a route

To show a Route on the map, call the TomTomMap.addRoute(RouteOptions) method. You can configure its shape and appearance with the RouteOptions class. Drawing a route on the map requires a list with coordinates of the route points.

You can also define its appearance by setting the color, width, and departure and destination marker images. Route width can be defined as a single value (which will be the same for all zoom levels), or different route widths can be set for different zoom levels. The width will then be interpolated for any zoom levels in between. RouteOptions also supports specific routing features such as reachable distance, or providing a list of instructions along the route. For a detailed description of all the parameters see the API reference.

1var routeOptions = RouteOptions(coordinates: calculatedRoute.geometry)
2routeOptions.color = UIColor(red: 0.2, green: 0.6, blue: 1.0, alpha: 1.0)
3let route = try? tomTomMap.addRoute(routeOptions)

If adding the route was successful, the TomTomMap.addRoute(RouteOptions) method returns the Route object. Otherwise, the method throws an exception. The returned Route instance can be used to update the color, progress along a route, or observe click events.

To remove the previously added Route, provide its instance to the TomTomMap.removeRoute(Route) method.


You can also remove all routes added to the map by invoking the TomTomMap.removeRoutes() method.


You can get the list of all routes visible on the map with the TomTomMap.routesAll property. You can also display an overview of all routes. The camera will be centered and zoomed properly to fit all the routes on the screen, together with applied padding. The padding is expressed in pixels.

tomTomMap.zoomToRoutes(padding: 32)


You can listen for click events performed on Route objects. To do it, set the RouteDelegate to the Route.delegate property. If the user clicks on the Route its method will be called with the Route object, clicked coordinates, and the index of the waypoint as parameters.

1func mapRoute(_: TomTomSDKMapsDisplay.Route, didTapOnCoordinate _: CLLocationCoordinate2D, waypointIndex _: Int) {

Updating route progress

The progress made along the Route can be indicated on the drawn map. The traveled part of the route is colored with the outline color. See the following example.

Progress can be updated by operating on the Route object returned during drawing. Its value is expressed in meters. In the following example, the map will show that 2km has already been traveled.

route.progressOnRouteMeters = 2000.0

To clear the progress along the Route use the following method. The color of the Route will return to the initial color.



The Map Display SDK allows you to set how the camera tracks the user’s locations to suit different interaction modes. Do this by setting CameraTrackingMode to the TomTomMap instance. There are three options for tracking mode:

  • NONE - The camera does not track the user’s location. This is the default setting and is mainly used to show the user’s location on the map.
  • FOLLOW - The camera follows the user’s location, but its tilt and zoom do not change.
  • FOLLOW_WITH_HEADING - The camera follows the user’s location. As the user moves, the camera properties change to show where the user is heading.

The last two modes are mainly used in navigation applications.

To apply a given tracking mode, set the cameraTrackingMode parameter:

tomTomMap.cameraTrackingMode = .followWithHeading

To check what tracking mode is currently set:

let cameraTrackingMode = tomTomMap.cameraTrackingMode


The Route added to the map can also show the location and type of maneuvers the driver must perform to follow it. These maneuvers are indicated with arrows displayed on the route (see the following image).

Route instruction

The instructions for the maneuvers have to be provided to the RouteOptions class using its RouteOptions.instructions property .

Instructions can be taken from Planning a route, mapped to TomTomSDKMapsDisplay.RouteInstructions and set to the RouteOptions. You can also create RouteInstruction on your own. A RouteInstruction requires the distance from the start of the route to the instruction point in meters. You can also specify whether the arrow can be merged with the next arrow and define its length.

1routeOptions.instructions = calculatedRoute.instructions
2 .map { routeInstruction in
3 TomTomSDKMapsDisplay.RouteInstruction(
4 distanceAlongRouteMeters: routeInstruction.distanceAlongRouteMeters,
5 lengthInMeters: routeInstruction.lengthInMeters,
6 combineWithNext: routeInstruction.combineWithNext
7 )
8 }