Navigation Icon Resize

In this guide you will learn how to change the size of the navigation turn icons, displayed during a real or simulated navigation; RoutingService is used to compute a route and NavigationService to start a real or simulated navigation on that route.

Change navigation icon rendering size

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

NavigationIconResize demonstrates how to change the size of the navigation turn icons, displayed during a real or simulated navigation. The Compute route(s) button causes the RoutingService to calculate a route between preset start (departure) and end (destination) points, and render the route on the map. The Start simulation button starts the simulated navigation along the resulting route using NavigationService

The turn icons are displayed using an initial size, such as 64x64 pixels. Press the Increase icon size button to increase the size of the icons displayed.

How it works

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

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

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Window 2.12
import NavigationTurnIconSize 1.0
import GeneralMagic 2.0

Window {
   visible: true
   width: 640
   height: 480
   title: qsTr("Navigation Icon Resize Example")

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.

property var updater: ServicesManager.contentUpdater(ContentItem.Type.RoadMap)
Component.onCompleted: {
    //! [Set token safely]
    ServicesManager.settings.token = __my_secret_token;
    //! [Set token safely]
    ServicesManager.settings.allowInternetConnection = true; // enable connection to online services

    updater.autoApplyWhenReady = true;
    updater.update();
}

The __my_secret_token property in the above QML code is set in C++ like this. In this example, in main.cpp, replace YOUR_TOKEN with your actual General Magic Maps API Key token string.

// C++ code
QQmlApplicationEngine engine;
//...
//! [Set API Key token safely]
// go to https://developer.generalmagic.com to get your token
engine.rootContext()->setContextProperty("__my_secret_token", "YOUR_API_KEY_TOKEN_STRING");
//! [Set API Key token safely]

engine.load(url);

In this example, it is possible to interactively increase and decrease the size of the navigation icons. A variable has to be defined in C++ to maintain the state of the current icon size. This variable must have get, set, and notify when value has changed functionality.

The class, of which this variable is an instance, is defined in navturniconsize.h

class NavigationTurnIconSize : public QObject {
   Q_OBJECT
   Q_PROPERTY(int navigationTurnIconSizePixels
      READ navigationTurnIconSizePixels
      WRITE setNavigationTurnIconSizePixels
      NOTIFY navigationTurnIconSizePixelsChanged)
public:
   NavigationTurnIconSize() { m_sizePixels = 64; } //initial size
   int navigationTurnIconSizePixels() const { return m_sizePixels; }
   void setNavigationTurnIconSizePixels(int newValue) {
      m_sizePixels = (newValue < m_minSizePixels) ? m_minSizePixels
      : newValue > m_maxSizePixels ? m_maxSizePixels
      : newValue; emit navigationTurnIconSizePixelsChanged(); }
signals:
   void navigationTurnIconSizePixelsChanged();
private:
   const int m_minSizePixels = 16;
   const int m_maxSizePixels = 384;
   int m_sizePixels;
};

First, the e {NavigationTurnIconSize} class is registered in e {main.cpp} like this:

qmlRegisterType<NavigationTurnIconSize>("NavigationTurnIconSize", 1, 0, "NavigationTurnIconSize");

Then it is imported in qml code as seen in the above import statement in e {main.qml} like this:

import NavigationTurnIconSize 1.0

And finally an instance is defined like this:

NavigationTurnIconSize {
    id: myNavigationTurnIconSize
}

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

Compute the route(s)

RoutingService {
    id: routingService
    type: Route.Type.Fastest
    transportMode: Route.TransportMode.Car

    waypoints: LandmarkList {
        Landmark {
            name: "start"
            coordinates: Coordinates {
                latitude: 52.37164
                longitude: 4.88220
            }
        }
        Landmark {
            name: "waypoint1"
            coordinates: Coordinates {
                latitude: 52.37118
                longitude: 4.88136
            }
        }
        Landmark {
            name: "waypoint2"
            coordinates: Coordinates {
                latitude: 52.37164
                longitude: 4.88220
            }
        }
        Landmark {
            name: "stop"
            coordinates: Coordinates {
                latitude: 52.37118
                longitude: 4.88136
            }
        }
    }
    onFinished: {
        mapView.routeCollection.set(routeList);
        mapView.centerOnRouteList(routeList);
    }
}

The first step is to declare a RoutingService to be used for calculating the route(s).

A minimum of two Landmarks are needed in a LandmarkList where the first one is the departure and the last one is the destination. There can be 0 or more intermediate waypoint landmarks. In this case, there are 2 intermediate waypoints, for a total of 4 landmarks through which the route must pass.

In the onFinished: section, the resulting route list is given to the MapView instance, identified as mapView to be rendered, and centerOnRouteList() causes the camera to fly to the rendered routes, at the appropriate altitude so that they fit in the viewport.

function distance(meters)
{
    return meters >= 1000 ? (meters / 1000.).toFixed(3) + " Km" :  meters.toFixed(0) + " m";
}
NavigationService {
    id: navigation
    route: mapView.routeCollection.mainRoute
    simulation: true // change it to false (default) to perform real turn by turn navigation
    onActiveChanged: {
        if (active) {
            mapView.startFollowingPosition();
            mapView.routeCollection.clear(true /*keepMainRoute*/);
        }
    }
    onCurrentInstructionChanged: {
        // WORKS ONLY with Qt 5.15.x or Qt 6.x
        const nextspeedlimit = currentInstruction.nextSpeedLimitVariation();
        console.log(nextspeedlimit.distance, nextspeedlimit.speed,
                    nextspeedlimit.coordinates.latitude, nextspeedlimit.coordinates.longitude);
    }
    onWaypointReached: console.log("WaypointReached :" + waypoint.name);
    onDestinationReached: mapView.routeCollection.clear();
    onNavigationError: {
        console.log("NavigationError :" + error);
        mapView.routeCollection.clear();
    }
    onNavigationRouteUpdated: {
        console.log("RouteUpdated :" + route.summary);
        mapView.routeCollection.add(route, true);
        mapView.routeCollection.clear(true);
    }
}

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

Do simulation/navigation

Button {
    text: "Compute route(s)"
    enabled: ServicesManager.settings.connected && !navigation.active
    onClicked: routingService.update()
}
//! [RoutingNavigation compute routing]
Button {
    enabled: mapView.routeCollection.mainRoute.valid
    text: navigation.active ? "Stop simulation" : "Start simulation"
    onClicked: navigation.active = !navigation.active
}

Within the MapView block, the Compute route(s) button causes the RoutingService to calculate a route between preset start (departure) and end (destination) points, and render the route on the map. The Start simulation button is enabled once a calculated route has been set as the main route, and starts the simulated navigation along the calculated route.

Show everything on a MapView

Rectangle {
    color: Qt.rgba(.8, 1, 1, 0.6)
    visible: navigation.active
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    height: myNavigationTurnIconSize.navigationTurnIconSizePixels + rowlayout.anchors.margins
    RowLayout {
        id: rowlayout
        anchors.fill: parent
        anchors.margins: 10
        DynamicIconView {
            id: iconLeft
            Layout.fillHeight: true
            arrowInner: "blue"
            arrowOuter: "cyan"
            slotInner: "yellow"
            slotOuter: "red"

            iconSource: navigation.currentInstruction.nextTurnDynamicIcon
            onWidthChanged: {
                iconLeft.width = myNavigationTurnIconSize.navigationTurnIconSizePixels
                iconLeft.height = myNavigationTurnIconSize.navigationTurnIconSizePixels
                iconRight.width = myNavigationTurnIconSize.navigationTurnIconSizePixels
                iconRight.height = myNavigationTurnIconSize.navigationTurnIconSizePixels
            }
        }
        DynamicIconView {
            id: iconRight
            Layout.fillHeight: true
            arrowInner: "cyan"
            arrowOuter: "magenta"
            slotInner: "white"
            slotOuter: "magenta"

            iconSource: navigation.currentInstruction.nextNextTurnDynamicIcon
        }
    }
    Rectangle {
        id: instructionRectangle
        color: Qt.rgba(.7, 1, 1, 0.6)
        visible: navigation.active
        anchors.left: parent.left
        anchors.right: parent.right
        height: 20
        RowLayout {
            anchors.fill: parent
            Label {
                Layout.fillWidth: true
                font.pixelSize: 16
                text: navigation.currentInstruction.nextStreetName + " ("
                + distance(navigation.currentInstruction.distanceToNextTurn) + ")";
            }
            Label {
                font.pixelSize: 16
                text: distance(navigation.currentInstruction.distanceToNextNextTurn)
            }
        }
    }
}

The last step is to follow the navigation/simulation on the routes shown on the map. The above Rectangle panels within the MapView block, appear at the top of the map during simulated navigation, and show a DynamicIconView with the next turn icon on the left, and the next next turn icon (the icon after the next turn) on the right, as well as the remaining distance in meters to the next turn (left icon), and to the turn after that (next next turn, the right icon).

Button {
    text: "Increase icon size"
    onClicked: {
        myNavigationTurnIconSize.navigationTurnIconSizePixels
        = myNavigationTurnIconSize.navigationTurnIconSizePixels + 20
        iconLeft.height = myNavigationTurnIconSize.navigationTurnIconSizePixels
        iconLeft.width = myNavigationTurnIconSize.navigationTurnIconSizePixels
        iconRight.height = myNavigationTurnIconSize.navigationTurnIconSizePixels
        iconRight.width = myNavigationTurnIconSize.navigationTurnIconSizePixels
    }
}
Button {
    text: "Decrease icon size"
    onClicked: {
        myNavigationTurnIconSize.navigationTurnIconSizePixels
        = myNavigationTurnIconSize.navigationTurnIconSizePixels - 20
        iconLeft.height = myNavigationTurnIconSize.navigationTurnIconSizePixels
        iconLeft.width = myNavigationTurnIconSize.navigationTurnIconSizePixels
        iconRight.height = myNavigationTurnIconSize.navigationTurnIconSizePixels
        iconRight.width = myNavigationTurnIconSize.navigationTurnIconSizePixels
    }
}

Finally, there are 2 buttons, to increase and decrease the icon size (in pixels, +/- 20 pixels) for both the left (next turn) and the right (next next turn) icons.

The value of the variable stored in C++ is increased/decreased, and then it is read and set into the left icon width and height, as well as the right icon width and height. This also updates the transparent panel height to fit the icon size, and the onWidthChanged: {} callback is used to detect and update the icon size changes immediately in the navigation icons currently rendered.

QML Examples

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