Find a route and directions

Learn how to find a route and directions with the route service.

find a route and directions

Routing is the process of finding the path from an origin to a destination in a street network. You can use the Routing service to find routes, get driving directions, calculate drive times, and solve complicated, multiple vehicle routing problems. To create a route, you typically define a set of stops (origin and one or more destinations) and use the service to find a route with directions. You can also use a number of additional parameters such as barriers and mode of travel to refine the results.

In this tutorial, you define an origin and destination by clicking on the map. These values are used to get a route and directions from the route service. The directions are also displayed on the map.

Prerequisites

The following are required for this tutorial:

An ArcGIS account to access API keys. If you don't have an account, sign up for free.
Your system meets the system requirements.
The ArcGIS Maps SDK for Qt, version 200.0.0 or later is installed. ArcGIS Maps SDK for Qt version 200.0.0 and later requires Qt 6.
The Qt 6 software development framework is installed.

Steps

Open the project in Qt Creator

To start this tutorial, complete the Display a map tutorial or download and unzip the solution.
Open the display_a_map project in Qt Creator.
If you downloaded the Display a map solution, set your API key.
An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.
1. Go to your developer dashboard to get your API key. For these tutorials, use your default API key. It is scoped to include all of the services demonstrated in the tutorials.
2. In the Projects window, in the Sources folder, open the main.cpp file.
3. Modify the code to set the API key. Paste the API key, acquired from your dashboard, between the quotes. Then save and close the file.
  main.cpp
  Expand
  Use dark colors for code blocks
  36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 37 38 39 40 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41
  Change line
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 // 2. API key: A permanent key that gives your application access to Esri // location services. Create a new API key or access existing API keys from // your ArcGIS for Developers dashboard (https://links.esri.com/arcgis-api-keys). const QString apiKey = QString("");
  Expand

Declare classes, functions, variables, enumerations and signals

In the display_a_map project, double click on Headers > Display_a_map.h to open the file. Add the four class declarations shown.

Display_a_map.h
Use dark colors for code blocks
Add line.Add line.Add line.Add line.
namespace Esri::ArcGISRuntime {

class Map;
class MapQuickView;

class Graphic;
class GraphicsOverlay;
class PictureMarkerSymbol;
class RouteTask;

Create an enum to monitor user route selections and maintain the route builder status. This will be initialized in Display_a_map.cpp in a later step.

Display_a_map.h
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.
class Graphic;
class GraphicsOverlay;
class PictureMarkerSymbol;
class RouteTask;

}

enum RouteBuilderStatus
{
  NotStarted,
  SelectedStart,
  SelectedStartAndEnd,
};

Add these #include statements and a class declaration.

Display_a_map.h
Use dark colors for code blocks
Add line.Add line.Add line.Add line.
enum RouteBuilderStatus
{
  NotStarted,
  SelectedStart,
  SelectedStartAndEnd,
};

#include <QObject>

#include "RouteParameters.h"
class QAbstractListModel;
Q_MOC_INCLUDE("QAbstractListModel")
Q_MOC_INCLUDE("MapQuickView.h")

Use Q_PROPERTY to create a member variable m_directions.

Display_a_map.h
Use dark colors for code blocks
Add line.
class Display_a_map : public QObject
{
    Q_OBJECT
    Q_PROPERTY(Esri::ArcGISRuntime::MapQuickView* mapView READ mapView WRITE setMapView NOTIFY mapViewChanged)

    Q_PROPERTY(QAbstractListModel* directions MEMBER m_directions NOTIFY directionsChanged)

Add the following signal declaration; this will be used to prompt updates to route directions.

Display_a_map.h
Use dark colors for code blocks
Add line.
public:
    explicit Display_a_map(QObject* parent = nullptr);
    ~Display_a_map() override;

signals:
    void mapViewChanged();

     void directionsChanged();

Declare the following private methods.

Display_a_map.h
Use dark colors for code blocks
Add line.Add line.Add line.
private:
    Esri::ArcGISRuntime::MapQuickView* mapView() const;
    void setMapView(Esri::ArcGISRuntime::MapQuickView* mapView);
    void setupViewpoint();

    void setupRouteTask();
    void findRoute();
    void resetState();

Declare and initialize the following pointers, object, and enumeration. Then save and close the file.

Display_a_map.h
Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    void setupRouteTask();
    void findRoute();
    void resetState();

    Esri::ArcGISRuntime::Map* m_map = nullptr;
    Esri::ArcGISRuntime::MapQuickView* m_mapView = nullptr;

    Esri::ArcGISRuntime::GraphicsOverlay* m_graphicsOverlay = nullptr;
    Esri::ArcGISRuntime::RouteTask* m_routeTask = nullptr;
    Esri::ArcGISRuntime::Graphic* m_startGraphic = nullptr;
    Esri::ArcGISRuntime::Graphic* m_endGraphic = nullptr;
    Esri::ArcGISRuntime::Graphic* m_lineGraphic = nullptr;
    QAbstractListModel* m_directions = nullptr;
    Esri::ArcGISRuntime::RouteParameters m_routeParameters;
    RouteBuilderStatus m_currentState;
Expand

Include header files to access needed classes

In the display_a_map project, double click on Sources > Display_a_map.cpp to open the file. Add #include statements for the classes shown.

Display_a_map.cpp
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
#include "Display_a_map.h"
#include "Map.h"
#include "MapTypes.h"
#include "MapQuickView.h"
#include "Point.h"
#include "Viewpoint.h"
#include "SpatialReference.h"
#include "TaskWatcher.h"

#include "DirectionManeuverListModel.h"
#include "Graphic.h"
#include "GraphicListModel.h"
#include "GraphicsOverlay.h"
#include "GraphicsOverlayListModel.h"
#include "Polyline.h"
#include "RouteTask.h"
#include "RouteResult.h"
#include "RouteParameters.h"
#include "Route.h"
#include "SimpleLineSymbol.h"
#include "SimpleMarkerSymbol.h"
#include "Stop.h"
#include "Symbol.h"
#include "SymbolStyle.h"
#include "SymbolTypes.h"
#include <QGeoPositionInfoSource>
#include <QList>
#include <QUrl>
#include <QUuid>

Update the constructor

Update the constructor as shown. Set BasemapStyle to ArcGISStreets and initialize the RouteBuilderStatus enumeration.

Display_a_map.cpp
Expand
Use dark colors for code blocks
Change lineAdd line.
Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
    QObject(parent),

    m_map(new Map(BasemapStyle::ArcGISStreets, this)),

    m_currentState(RouteBuilderStatus::NotStarted)
Expand

Call the setupRouteTask() method within the constructor. This will be populated in a later step.

Display_a_map.cpp
Expand
Use dark colors for code blocks
Add line.
Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
    QObject(parent),

    m_map(new Map(BasemapStyle::ArcGISStreets, this)),

    m_currentState(RouteBuilderStatus::NotStarted)

{

    setupRouteTask();
Expand

Change the map's view point

In setupViewpoint() change the map's Point and Viewpoint to place the map over over downtown Los Angeles.

Display_a_map.cpp
Expand
Use dark colors for code blocks
Change lineChange line
MapQuickView* Display_a_map::mapView() const
{
    return m_mapView;
}

void Display_a_map::setupViewpoint()
{

    const Point center(-118.24532, 34.05398, SpatialReference::wgs84());
    const Viewpoint viewpoint(center, 144447.638572);
Expand

Change setupViewpoint() to respond to mouse clicks and find the route

Add a connect statement to setupViewpoint() to detect user mouse clicks, set and display point graphics, respond to the first and second click (using the switch statement), and call findRoute on the second mouse click.

Display_a_map.cpp
Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    const Point center(-118.24532, 34.05398, SpatialReference::wgs84());
    const Viewpoint viewpoint(center, 144447.638572);

    m_mapView->setViewpoint(viewpoint);

    connect(m_mapView, &MapQuickView::mouseClicked, this, [this](QMouseEvent& mouse)
    {
        const Point mapPoint = m_mapView->screenToLocation(mouse.position().x(), mouse.position().y());
        switch (m_currentState)
        {
        case RouteBuilderStatus::NotStarted:
            resetState();
            m_currentState = RouteBuilderStatus::SelectedStart;
            m_startGraphic->setGeometry(mapPoint);
            break;
        case RouteBuilderStatus::SelectedStart:
            m_currentState = RouteBuilderStatus::SelectedStartAndEnd;
            m_endGraphic->setGeometry(mapPoint);
            findRoute();
            break;

        case RouteBuilderStatus::SelectedStartAndEnd:
            // Ignore touches while routing is in progress
            break;
        }
    });
Expand

Create route graphics

Add code to setupViewpoint() to create the route's starting point Graphic, determined by the user's first mouse click. This consists of a SimpleLineSymbol, color blue, size 2, that outlines a SimpleMarkerSymbol, diamond shaped and orange in color.
Create the route's ending point Graphic, determined by the user's second mouse click. This consists of a SimpleLineSymbol, color red, size 2, that outlines a SimpleMarkersymbol, square shaped and green in color.

Create a line Graphic connecting the route's starting and ending points using a SimpleLineSymbol, color blue, size 4. Then append the starting point graphic, ending point graphic, and route line graphic to a GraphicsOverlay.

Display_a_map.cpp
Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
        case RouteBuilderStatus::SelectedStartAndEnd:
            // Ignore touches while routing is in progress
            break;
        }
    });

    m_graphicsOverlay = new GraphicsOverlay(this);
    m_mapView->graphicsOverlays()->append(m_graphicsOverlay);

    SimpleLineSymbol* startOutlineSymbol = new SimpleLineSymbol(SimpleLineSymbolStyle::Solid, QColor("blue"), 2/*width*/, this);
    SimpleMarkerSymbol* startSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle::Diamond, QColor("orange"), 12/*width*/, this);
    startSymbol->setOutline(startOutlineSymbol);
    m_startGraphic = new Graphic(this);
    m_startGraphic->setSymbol(startSymbol);

    SimpleLineSymbol* endOutlineSymbol = new SimpleLineSymbol(SimpleLineSymbolStyle::Solid, QColor("red"), 2/*width*/, this);
    SimpleMarkerSymbol* endSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle::Square, QColor("green"), 12/*width*/, this);
    endSymbol->setOutline(endOutlineSymbol);
    m_endGraphic = new Graphic(this);
    m_endGraphic->setSymbol(endSymbol);

    SimpleLineSymbol* lineSymbol = new SimpleLineSymbol(SimpleLineSymbolStyle::Solid, QColor("blue"), 4/*width*/, this);
    m_lineGraphic = new Graphic(this);
    m_lineGraphic->setSymbol(lineSymbol);

    m_graphicsOverlay->graphics()->append(QList<Graphic*> {m_startGraphic, m_endGraphic, m_lineGraphic});
Expand

Create the setRouteTask() method

A task makes a request to a service and returns the results. Use the RouteTask class to access a routing service.

Create a RouteTask with a string URL to reference the routing service.

Begin implementing the setRouteTask() method. Point the RouteTask to an online service. Then connect to createDefaultParametersCompleted and store the resulting route parameters.

Display_a_map.cpp
Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
void Display_a_map::setupRouteTask()
{
    // create the route task pointing to an online service
    m_routeTask = new RouteTask(QUrl("https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"), this);

    // Connect to createDefaultParametersCompleted signal.
    connect(m_routeTask, &RouteTask::createDefaultParametersCompleted, this, [this](const QUuid&, const RouteParameters& routeParameters)
    {
        // Store the resulting route parameters.
        m_routeParameters = routeParameters;
    });
Expand

Connect to solveRouteCompleted. With the route completed, set the route graphic's Geometry and reset RouteBuilderStatus to prepare for a new route task. Then display the route directions. Outside of connect, configure the RouteTask with default parameters.

Display_a_map.cpp
Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    // Connect to createDefaultParametersCompleted signal.
    connect(m_routeTask, &RouteTask::createDefaultParametersCompleted, this, [this](const QUuid&, const RouteParameters& routeParameters)
    {
        // Store the resulting route parameters.
        m_routeParameters = routeParameters;
    });

    // Connect to solveRouteCompleted signal.
    connect(m_routeTask, &RouteTask::solveRouteCompleted, this, [this](const QUuid&, const RouteResult& routeResult)
    {
        // Add the route graphic once the solve completes.
        const Route generatedRoute = routeResult.routes().at(0);
        m_lineGraphic->setGeometry(generatedRoute.routeGeometry());
        m_currentState = RouteBuilderStatus::NotStarted;

        // Set the direction maneuver list model.
        m_directions = generatedRoute.directionManeuvers(this);
        emit directionsChanged();
    });

    // Create the default parameters which will load the route task implicitly.
    m_routeTask->createDefaultParameters();
}
Expand

Create the findRoute() method

Add code to first confirm that RouteTask has loaded and RouteParameters is not empty. Then set RouteParameters to return directions, and clear stops from previous routes.

Then create Stop objects for the route from the geometries of the start and end graphics, and pass those to RouteParameters. Finally, call solveRoute(), passing in RouteParameters.

Display_a_map.cpp
Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
void Display_a_map::findRoute()
{
    if (m_routeTask->loadStatus() != LoadStatus::Loaded || m_routeParameters.isEmpty())
        return;

    // Set parameters to return directions.
    m_routeParameters.setReturnDirections(true);

    // Clear previous stops from the parameters.
    m_routeParameters.clearStops();

    // Set the stops to the parameters.
    const Stop stop1(Point(m_startGraphic->geometry()));
    const Stop stop2(Point(m_endGraphic->geometry()));
    m_routeParameters.setStops(QList<Stop> { stop1, stop2 });

    // Solve the route with the parameters.
    m_routeTask->solveRoute(m_routeParameters);
}
Expand

Create the resetState() method

This method resets all graphics and directions, and the RouteBuilderStatus enumeration. This happens at the beginning of every new route task.

Reset all graphics with empty Point objects, set m_directions to nullptr, and reset RouteBuilderStatus. Then save the file.

Display_a_map.cpp
Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
void Display_a_map::resetState()
{
    m_startGraphic->setGeometry(Point());
    m_endGraphic->setGeometry(Point());
    m_lineGraphic->setGeometry(Point());
    m_directions = nullptr;
    m_currentState = RouteBuilderStatus::NotStarted;
}
Expand

Create the GUI

In the display_a_map project, double click on Resources > qml\qml.qrc > /qml > Display_a_mapForm.qml to open the file. Add the following import.

display_a_mapForm.qml
Use dark colors for code blocks
Add line.
import QtQuick
import QtQuick.Controls
import Esri.Display_a_map

import QtQuick.Shapes

Add the code highlighted below. This builds out the application GUI and displays the route and route directions.
display_a_mapForm.qml
Expand
Use dark colors for code blocks
28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 102 102
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.

ArcGIS Maps SDK for Qt