Skip to content

Set Position Tracker

In this guide you will learn how to change the default green navigation arrow/position tracker with a custom object of your choice in gltf format, while playing back a previously recorded GPS position log, using DataSource on an interactive map, displayed using MapView, with frame per second (FPS) counter.

Set a custom gltf position tracker

Set Custom gltf Position Tracker 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

SetPositionTracker demonstrates how easy it is to replace the default position tracker with a custom object of your choice in gltf format.

How it works

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

then browse to the SetPositionTracker example folder and open SetPositionTracker.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, in the Component.onCompleted: block, the datasource is set by specifying the filename of a previously recorded [GPS] position log:

ServicesManager.dataSource.playbackFile = Qt.resolvedUrl("strasbourg.nmea");

Also the content type that will be downloaded upon demand is specified:

let updater = ServicesManager.contentUpdater(ContentItem.Type.RoadMap);

The MapView displaying the interactive map has 3 buttons; the one on the bottom left of the viewport to start/stop the position datasource playback (started automatically), and the one on the bottom right to start/resume following position (following position started automatically).

Panning the map during simulation/playback will stop follow position, and the button needs to be clicked again to resume following position.

 1MapView {
 2    id: mapView
 3    anchors.fill: parent
 4    viewAngle: 25
 5    zoomLevel: 69
 6    viewPerspective: MapView.ViewPerspective.View3D
 7    buildingsVisibility: MapView.BuildingsVisibility.Show3D
 8    detailsQualityLevel: MapView.DetailsQualityLevel.Medium
 9    gestures: MapView.Gesture.Pan
10              | MapView.Gesture.PanEnableVelocity
11              | MapView.Gesture.Pinch
12              | MapView.Gesture.Rotate
13              | MapView.Gesture.Tilt
14    Text {
15        anchors.left: parent.left
16        anchors.top: parent.top
17        text: fpsCounter.fps
18    }
19    ColumnLayout {
20        anchors.left: parent.left
21        anchors.bottom: parent.bottom
22        Button {
23            id: cycleButton
24            text: myCycleCounter.countCycle + " " + (myCycleCounter.countCycle < 1
25            ? "default" : myCycleCounter.countCycle === 1
26            ? "icosahedron" : myCycleCounter.countCycle === 2
27            ? "cube" : myCycleCounter.countCycle === 3
28            ? "cone" : myCycleCounter.countCycle === 4
29            ? "red arrow" : "other") + " - click to change"
30            onClicked: {
31                myCycleCounter.countCycle += 1;
32                console.log("count cycle " + myCycleCounter.countCycle);
33
34                ServicesManager.mapScene.setDefaultPositionTrackerFromGlbFile(
35                    Qt.resolvedUrl(myCycleCounter.countCycle === 1
36                    ? "icosahedron_orange.glb" : myCycleCounter.countCycle === 2
37                    ? "cyancube.glb" : myCycleCounter.countCycle === 3
38                    ? "cone.glb" : "redarrowquad.glb"));
39            }
40        }
41        Button {
42            text: ServicesManager.dataSource.type === DataSource.Type.Live
43                ? "Position Log playback" : "Live position"
44            onClicked: ServicesManager.dataSource.type
45                = ServicesManager.dataSource.type === DataSource.Type.Live
46                ? DataSource.Type.Playback : DataSource.Type.Live;
47        }
48    }
49    Button {
50        anchors.right: parent.right
51        anchors.bottom: parent.bottom
52        text: qsTr("Follow position")
53        enabled: !mapView.followingPosition
54        onClicked: mapView.followingPosition = true
55    }
56}

Follow position means that the camera flies to the position of the green arrow and then follows the simulated position arrow. This is necessary, as the arrow is likely to be located elsewhere on the map, not at the current location of the camera.

Set Custom gltf Position Tracker example

The green position arrow (default position tracker) indicates on the map the previously recorded positions, from the data source specified above, during playback.

Set Custom gltf Position Tracker example

There is a third button above the button in the lower left corner, to toggle through 4 additional custom position trackers - an icosahedron, a cube, a cone (all three untextured), and a flat quad with a red navigation arrow texture. Click this button to change the default position tracker.

ServicesManager.mapScene.setDefaultPositionTrackerFromGlbFile(Qt.resolvedUrl("icosahedron_orange.glb"))

The code above shows how to set a custom object in gltf format instead of the default green arrow position tracker.

Set Custom gltf Position Tracker example

 
 1<RCC>
 2   <qresource prefix="/">
 3       <file>main.qml</file>
 4       <file>strasbourg.nmea</file>
 5       <file>icosahedron_orange.glb</file>
 6       <file>icosahedron_yellowgreen.glb</file>
 7       <file>cyancube.glb</file>
 8       <file>cone.glb</file>
 9       <file>redarrowquad.glb</file>
10   </qresource>
11</RCC>

Note that both the datasource used for playback, strasbourg.nmea, and the .glb (binary gltf) custom position tracker files have to be defined in qml.qrc to enable Qt.resolvedUrl() to find them in the project path.

Set Custom gltf Position Tracker example

QML Examples

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