×
GPX Routing and Navigation | Maps SDK for Qt | General Magic GPX Routing and Navigation — Maps & Navigation SDKs documentation
Skip to content

GPX Routing and Navigation

In this guide you will learn how to use RoutingService to compute a route based on GPX data, and NavigationService to start a real or simulated navigation on 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.

See the Routing and Navigation guide on how to calculate a route, and simulate navigation along that route, between preset or programmatically selected start (departure) and end (destination) points.

QML GPX 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 GPX routing navigation example

GpxRoutingNavigation demonstrates using RoutingService to calculate a route between preset start (departure), a GPX path as the middle waypoint, and end (destination) points, and NavigationService to simulate navigation on the computed route.

How it works

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

QML GPX routing navigation example

then browse to the GpxRoutingNavigation example folder and open GpxRoutingNavigation.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.generalmagic.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 General Magic 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.Bicycle
 8  }
 9  waypoints: LandmarkList
10  {
11    // departure position is optional.
12    // If missing it will use the first path coordinate as the departure
13    Landmark
14    {
15      name: "departure"
16      coordinates: Coordinates
17      {
18        latitude: 48.849289
19        longitude: 2.346027
20      }
21    }
22
23    Landmark
24    {
25      name: "gpx waypoint"
26      path: ServicesManager.loadPathFromGpxFile(":/testParis.gpx") // load it from resources
27    }
28
29    // destination position is optional as well.
30    // If missing it will use the last path coordinate as the destination
31    Landmark
32    {
33      name: "destination"
34      coordinates: Coordinates
35      {
36        latitude: 48.874630
37        longitude: 2.331512
38      }
39    }
40  }
41  onCompleted:
42  {
43    mapView.preferences.routeCollection.set(routes);
44    mapView.centerOnRoutes(routes);
45  }
46}

to be used for calculating the route(s).

Note that ServicesManager::loadPathFromGpxFile is used to load a GPX file. Thus the start (departure) and end (destination) points of the route do not have to be specified.

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 GPX routing navigation example

QML Examples

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