Skip to content

Routing and Navigation

In this guide you will learn how to use RoutingService to compute a route and NavigationService to start a real or simulated navigation on that route.

See the GPX Routing and Navigation guide on how to calculate a route based on GPX data, and simulate navigation along that route.

See the Landmark List guide on how to calculate a route, and simulate navigation along that route, between interactively user selected start (departure) and end (destination) points.

QML routing navigation example

First, get an API key token, see the Getting Started guide.

Qt should be installed to continue.

The Maps SDK for Qt should be installed, see the Setup Maps SDK for Qt guide.

Overview

QML routing navigation example

RoutingNavigation demonstrates using RoutingService to calculate a route between preset start (departure) and end (destination) points, and NavigationService to simulate navigation on a computed route.

How it works

In Qt, go to the File menu and select Open File or Project…

QML routing navigation example

then browse to the RoutingNavigation example folder and open RoutingNavigation.pro

You may want to have a look at Setting your API Key to see how to open and configure a project and set your API Key.

In main.qml, we import the GeneralMagic QML plugin. Next, we need to make sure we allow online access, and that we are using the latest data.

 1import QtQuick.Window 2.12
 2import GeneralMagic 2.0
 3
 4Window
 5{
 6  visible: true
 7  width: 640
 8  height: 480
 9  title: qsTr("Routing and Navigation Example")
10
11  Component.onCompleted:
12  {
13    ServicesManager.settings.token = __my_secret_token;
14    ServicesManager.settings.allowInternetConnection = true;
15
16    var updater = ServicesManager.contentUpdater(ContentItem.Type.RoadMap);
17    updater.autoApplyWhenReady = true;
18    updater.update();
19  }

The __my_secret_token property in the above QML code is set in C++ like this.

1// C++ code
2QQmlApplicationEngine engine;
3//...
4//! [Set API Key token safely]
5// go to https://developer.magiclane.com to get your token
6engine.rootContext()->setContextProperty("__my_secret_token", "YOUR_TOKEN");
7//! [Set API Key token safely]
8
9engine.load(url);

In this example, in main.cpp, replace YOUR_TOKEN with your actual Magic Lane Maps API Key.

To start a simulation/navigation there are three steps involved:

Compute the route(s)

The first step is to declare a RoutingService

 1RoutingService
 2{
 3  id: routingService
 4  preferences
 5  {
 6    type: RoutePreferences.Type.Fastest
 7    transportMode: RoutePreferences.TransportMode.Car
 8  }
 9  waypoints: LandmarkList
10  {
11    Landmark
12    {
13      name: "start"
14      coordinates: Coordinates
15      {
16        latitude: 48.849289
17        longitude: 2.346027
18      }
19    }
20    Landmark
21    {
22      name: "stop"
23      coordinates: Coordinates
24      {
25        latitude: 48.874630
26        longitude: 2.331512
27      }
28    }
29  }
30  onCompleted:
31  {
32    mapView.preferences.routeCollection.set(routes);
33    mapView.centerOnRoutes(routes);
34  }
35}

to be used for calculating the route(s).

The second step is to declare a NavigationService to be used for the simulation/navigation.

 1function distance(meters)
 2{
 3  return meters >= 1000 ? (meters / 1000.).toFixed(3)
 4  + " Km" :  meters.toFixed(0) + " m";
 5}
 6
 7NavigationService
 8{
 9  id: navigation
10  route: mapView.preferences.routeCollection.mainRoute
11  simulation: true // change it to false (default) to perform real turn by turn navigation
12  onActiveChanged:
13  {
14    if (active)
15    {
16      mapView.startFollowingPosition();
17      mapView.preferences.routeCollection.clear();
18      mapView.preferences.routeCollection.add(
19        mapView.preferences.routeCollection.mainRoute);
20    }
21  }
22  navigationListener: NavigationListener
23  {
24    onWaypointReached: console.log("WaypointReached :" + waypoint.name);
25    onDestinationReached: mapView.preferences.routeCollection.clear();
26    onNavigationError:
27    {
28      console.log("NavigationError :" + error);
29      mapView.preferences.routeCollection.clear();
30    }
31    onRouteChanged:
32    {
33      console.log("RouteUpdated :" + route.summary);
34      mapView.preferences.routeCollection.clear();
35      mapView.preferences.routeCollection.add(route);
36    }
37    onNavigationInstructionUpdated:
38    {
39      nextTurnIcon.iconSource = navigationInstruction.nextTurnDynamicIcon;
40      nextTurnInfo.text = navigationInstruction.nextStreetName + " ("
41      + distance(navigationInstruction.distanceToNextTurn) + ")";
42    }
43  }
44}

Do simulation/navigation

1Button
2{
3  text: "Compute route(s)"
4  enabled: ServicesManager.settings.connected && !navigation.active
5  onClicked: routingService.update()
6}

Show everything on a MapView

The last step is to follow the navigation/simulation on the route(s) shown on the map.

 1MapView
 2{
 3  id: mapView
 4  anchors.fill: parent
 5  viewAngle: 25
 6  preferences.cursorVisibility: false
 7
 8  onRouteSelected:
 9  {
10    preferences.routeCollection.mainRoute = route;
11    centerOnRoute(route);
12  }
13}
QML routing navigation example

QML Examples

Maps SDK for Qt Examples can be downloaded or cloned with Git