Export Track

In this guide you will learn how to play back a previously recorded position (GPS) log of a navigation, to demonstrate how to display dynamic path tracking/tracing of the traveled path on an interactive map, and then save the track in a desired format, such as .gpx or .nmea

Travel path rendering on map

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

How it works

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

then browse to the ExportTrack example folder and open ExportTrack.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.

Setup

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("gpslog_paris.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 also has 5 buttons, the one on the bottom left of the viewport to start/stop the position datasource playback, and the one on the bottom right to start/resume following position.

Playback

Button {
    text: ServicesManager.dataSource.type === DataSource.Type.Live
    ? "Position Log playback" : "Live position"
    background: Rectangle {
        opacity: parent.hovered ? 1 : 0.5
        color: enabled ? parent.down ? "#aa00aa" :
               (parent.hovered ? "#0000ff" : "#2000ff") : "#aaaaaa"
    }
    palette { buttonText: "#ffffff"; }
    onClicked: ServicesManager.dataSource.type = ServicesManager.dataSource.type
    === DataSource.Type.Live ? DataSource.Type.Playback : DataSource.Type.Live;
}

Playback starts automatically when the data source type is set to DataSource.Type.Playback and stops when the data source type is set to DataSource.Type.Live which means that the position indicator on the map shows the actual position of the device, obtained from the location (GPS) sensor.

Thus, if the device is on the road, it can track/trace a live path of its actual motion outside in live mode.

To restart playback from the beginning, click Live position to switch to live GPS position sensor input, thus turning off playback mode, then click Position Log playback to restart the pre-recorded navigation playback from the beginning.

Export Format

The second button is to cycle through the available formats to export the track. The default is gpx

Button {
   id: cycleSaveFormat
   text: formatToSave.pathFileFormat[formatToSave.index]
   property int maxElements: 0
   background: Rectangle {
      opacity: parent.hovered ? 1 : 0.5
      color: enabled ? parent.down ? "#aa00aa" :
         (parent.hovered ? "#0000ff" : "#2000ff") : "#aaaaaa"
   }
   palette { buttonText: "#ffffff"; }
   onClicked: {
      formatToSave.maxElements = formatToSave.pathFileFormat.length;
      formatToSave.index += 1;
      if ( formatToSave.index >= formatToSave.maxElements )
         formatToSave.index = 0;
      console.log("Current format to save tracks is " + formatToSave.index + ", "
         + formatToSave.pathFileFormat[formatToSave.index]);
   }
}

Save Track

The third button is to save the path track/trace obtained so far. This button is enabled only when path tracking/tracing is active.

Button {
   id: saveButton
   text: "Save Track"
   enabled: false
   background: Rectangle {
      opacity: parent.hovered ? 1 : 0.5
      color: enabled ? parent.down ? "#aa00aa" :
         (parent.hovered ? "#0000ff" : "#2000ff") : "#aaaaaa"
   }
   palette { buttonText: "#ffffff"; }
   onClicked: {
      let filename = generateFileName(formatToSave.pathFileFormat[formatToSave.index]);
      mapView.extensions.exportAs(filename,formatToSave.index);
      fileSaved.text = "Saved: " + filename;
      console.log(fileSaved.text);
   }
}

The name of the file saved is generated from the current date and time, as well as the selected file format, and is displayed in the upper left corner of the screen in a text label:

Label {
   id: fileSaved
   anchors.left: parent.left
   anchors.top: parent.top
   text: ""
   background: Rectangle {
      opacity: 0.5
      color: "#008000"
   }
   color: "#ffffff"
}

Start / Stop Tracking

When tracking is active, a new point is added every milliSecondsSampleFrequency milliseconds, as specified in the call to start tracking: mapView.extensions.startTrackPositions(milliSecondsSampleFrequency,markerListRenderSettings); and a polyline is rendered dynamically on the map, tracing the motion of the device, regardless if the motion is real, or simulated, as in playback from a pre-recorded position log, as in this example.

The green position arrow plays back the previously recorded GPS positions log file, which is in the .nmea format, on the interactive map, from the data source file specified above.

A circle icon is configured to indicate a new point being added to the track/trace. A triangle icon is configured to indicate any grouping of icons, low, medium or high.

Different icons can be chosen for different levels of marker groupings, but that is not relevant in this example. See the Markers and MarkersProgrammatic examples for more on that.

Button {
   id: startStopTracking
   text: mapView.extensions.isTrackedPositions ? "Stop Tracking" : "Start Tracking"
   background: Rectangle {
       opacity: parent.hovered ? 1 : 0.5
       color: enabled ? parent.down ? "#aa00aa" :
                                      (parent.hovered ? "#0000ff" : "#2000ff") : "#aaaaaa"
   }
   palette { buttonText: "#ffffff"; }
   onClicked: {
      if (mapView.extensions.isTrackedPositions)
      {
         mapView.extensions.stopTrackPositions();
      }
      else
      {
         let milliSecondsSampleFrequency = 500;
         let markerListRenderSettings = ServicesManager.createMarkerListRenderSettings();
         markerListRenderSettings.imageSize = 32;
         markerListRenderSettings.icon = ServicesManager.createIconFromFile("qrc:/violetcircle.png");
         markerListRenderSettings.labelingMode = MarkerRenderSettings.Group;
         markerListRenderSettings.pointsGroupingZoomLevel = 98;
         markerListRenderSettings.lowDensityPointsGroupMaxCount = 6;
         markerListRenderSettings.mediumDensityPointsGroupMaxCount = 9;
         markerListRenderSettings.highDensityPointsGroupMaxCount = 12;
         markerListRenderSettings.lowDensityPointsGroupIcon = ServicesManager.createIconFromFile("qrc:/bluetriangle.png");
         markerListRenderSettings.mediumDensityPointsGroupIcon = ServicesManager.createIconFromFile("qrc:/bluetriangle.png");
         markerListRenderSettings.highDensityPointsGroupIcon = ServicesManager.createIconFromFile("qrc:/bluetriangle.png");

         mapView.extensions.startTrackPositions(milliSecondsSampleFrequency,markerListRenderSettings);
      }
      startStopTracking.text = (mapView.extensions.isTrackedPositions) ? "Stop Tracking" : "Start Tracking";
   }
}

Follow Position

Button {
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    text: qsTr("Follow position")
    enabled: !mapView.followingPosition
    background: Rectangle {
        opacity: parent.hovered ? 1 : 0.5
        color: enabled ? parent.down ? "#aa00aa" :
        (parent.hovered ? "#0000ff" : "#2000ff") : "#aaaaaa"
    }
    palette { buttonText: "#ffffff"; }
    onClicked: mapView.followingPosition = true
}

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

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.

QML Examples

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