Navigation Icon Color

In this guide you will learn how to change the colors 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 colors

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

NavigationIconColor demonstrates how to change the colors 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 the default colors. Press the Custom icon color 1 button to change the color of the icons displayed after the next turn. The color of the icons that are already on screen are not changed.

How it works

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

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

Window {
   visible: true
   width: 640
   height: 480
   title: qsTr("Navigation Icon Color 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);

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: 96
    RowLayout {
        anchors.fill: parent
        anchors.margins: 10
        DynamicIconView {
            id: iconLeft
            Layout.fillHeight: true
            Layout.maximumWidth: height
            width: height
            arrowInner: "darkblue"
            arrowOuter: "gold"
            slotInner: "grey"
            slotOuter: arrowOuter

            iconSource: navigation.currentInstruction.nextTurnDynamicIcon
        }
        Label {
            Layout.fillWidth: true
            font.pixelSize: 16

            text: navigation.currentInstruction.nextStreetName + " ("
            + distance(navigation.currentInstruction.distanceToNextTurn) + ")";
        }
        DynamicIconView {
            id: iconRight
            Layout.fillHeight: true
            Layout.maximumWidth: height
            width: height
            arrowInner: "darkgrey"
            arrowOuter: "black"
            slotInner: "grey"
            slotOuter: "darkgreen"

            iconSource: navigation.currentInstruction.nextNextTurnDynamicIcon
        }
        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 panel within the MapView block, appears at the top of the map during simulated navigation, and shows 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.

Button {
    text: "Custom icon color 1"
    onClicked: {
    iconLeft.setArrowInner ( "blue")
    iconLeft.setArrowOuter ( "cyan")
    iconLeft.setSlotInner  ( "yellow")
    iconLeft.setSlotOuter  ( "red")
    iconRight.setArrowInner( "yellow")
    iconRight.setArrowOuter( "cyan")
    iconRight.setSlotInner ( "red")
    iconRight.setSlotOuter ( "magenta")
    }
}
Button {
    text: "Custom icon color 2"
    onClicked: {
    iconLeft.setArrowInner ( "blue")
    iconLeft.setArrowOuter ( "cyan")
    iconLeft.setSlotInner  ( "orange")
    iconLeft.setSlotOuter  ( "cyan")
    iconRight.setArrowInner( "green")
    iconRight.setArrowOuter( "magenta")
    iconRight.setSlotInner ( "yellow")
    iconRight.setSlotOuter ( "magenta")
    }
}
Button {
    text: "Custom icon color 3"
    onClicked: {
    iconLeft.setArrowInner ( "magenta")
    iconLeft.setArrowOuter ( "cyan")
    iconLeft.setSlotInner  ( "white")
    iconLeft.setSlotOuter  ( "magenta")
    iconRight.setArrowInner( "cyan")
    iconRight.setArrowOuter( "magenta")
    iconRight.setSlotInner ( "white")
    iconRight.setSlotOuter ( "red")
    }
}

Finally, there are 3 buttons, each one setting a different set of rendering colors for both the left (next turn) and the right (next next turn) icons. To set/modify the colors of a turn icon, the color of 4 attributes must be set:

setArrowInner()
setArrowOuter()
setSlotInner ()
setSlotOuter ()

The arrow inner color is the color of the turn arrow, and the arrow outer is its outline, for the road that will be taken/followed at the next turn. The slot inner color is the color of any sideroad which will not be taken, and slot outer is the outline of that sideroad.

QML Examples

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