Find a route and directions

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

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

Before starting this tutorial:

You need an ArcGIS Location Platform or ArcGIS Online account.
Your system meets the system requirements.
The ArcGIS Runtime API for Qt is installed.

Steps

Get an access token

You need an access token to use the location services used in this tutorial.

Go to the Create an API key tutorial to obtain an access token using your ArcGIS Location Platform or ArcGIS Online account.
Ensure that the following privileges are enabled: Location services > Basemaps > Basemap styles service and Location services > Routing.
Copy the access token as it will be used in the next step.

To learn more about other ways to get an access token, go to Types of authentication.

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.
In the Projects window, in the Sources folder, open the main.cpp file.

Modify the code to set the API key to the access token. Save and close the file.

main.cpp
Expand
Use dark colors for code blocks
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
43
44
45
46
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
Change line    // 2. API key authentication: Get a long-lived access token that gives your application access to
    // ArcGIS location services. Go to the tutorial at https://links.esri.com/create-an-api-key.
    // Copy the API Key access token.

    const QString accessToken = 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. Include the four classes shown.

Display_a_map.h
Expand
Use dark colors for code blocks
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
22
23
24
25
26
27
28
28
28
28
28
27
26
25
24
23
22
21
20
19
19
19
19
19
19
19
19
18
17
17
17
17
17
17
17
17
17
16
15
15
15
15
15
15
14
13
12
11
11
11
11
10
9
8
7
6
5
4
3
2
2
2
2
Add line.Add line.Add line.Add line.class Map;
class MapQuickView;

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

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
Expand
Use dark colors for code blocks
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
40
40
40
40
40
40
40
40
39
38
38
38
38
38
38
38
38
38
37
36
36
36
36
36
36
35
34
33
32
32
32
32
31
30
29
28
27
26
25
24
23
23
23
23
Add line.Add line.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,
};

#include "RouteParameters.h"
Expand

Use Q_PROPERTY to create a member variable m_directions.

Display_a_map.h
Expand
Use dark colors for code blocks
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
46
47
48
49
49
49
49
49
49
49
49
49
49
48
47
47
47
47
47
47
46
45
44
43
43
43
43
42
41
40
39
38
37
36
35
34
34
34
34
Add line.  Q_PROPERTY(Esri::ArcGISRuntime::MapQuickView* mapView READ mapView WRITE setMapView NOTIFY mapViewChanged)

  Q_PROPERTY(QAbstractListModel* directions MEMBER m_directions NOTIFY directionsChanged)
Expand

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

Display_a_map.h
Expand
Use dark colors for code blocks
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
56
57
58
59
59
59
59
59
59
59
58
57
56
55
55
55
55
54
53
52
51
50
49
48
47
46
46
46
46
Add line.signals:
  void mapViewChanged();

  void directionsChanged();
Expand

Declare the following private methods.

Display_a_map.h
Expand
Use dark colors for code blocks
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
61
62
63
64
65
66
67
68
68
68
68
68
67
66
65
64
63
62
61
60
59
59
59
59
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();
Expand

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
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
80
80
80
80
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. Include the six classes shown.

Display_a_map.cpp
Expand
Use dark colors for code blocks
15
15
15
15
15
15
15
15
15
15
15
15
15
15
15
16
17
18
19
20
21
22
23
24
25
25
25
25
25
25
25
25
25
25
25
24
23
23
23
22
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
20
19
18
18
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
0
-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
-26
-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
-78
-79
-80
-81
-82
-83
-84
-84
-84
-84
-84
-84
-84
-84
-84
-84
-84
-84
-84
Add line.Add line.Add line.Add line.Add line.Add line.#include "ArcGISRuntimeEnvironment.h"
#include "Map.h"
#include "MapQuickView.h"

#include "Point.h"
#include "RouteTask.h"
#include "RouteParameters.h"
#include "SimpleLineSymbol.h"
#include "SimpleMarkerSymbol.h"
#include "Stop.h"
Expand

Update the constructor

Update the constructor as shown, to use a BasemapStyle and to initialize the RouteBuilderStatus enumeration.

Display_a_map.cpp
Expand
Use dark colors for code blocks
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
31
32
33
34
35
36
36
36
36
35
34
34
34
34
34
34
34
34
34
34
34
34
34
34
34
33
32
31
31
31
30
29
28
27
26
25
24
23
22
21
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
0
-1
-2
-3
-4
-5
-6
-7
-8
-9
-10
-11
-12
-13
-13
-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
-71
-71
-71
-71
-71
-71
-71
-71
-71
-71
-71
-71
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
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
31
32
33
34
35
36
37
38
39
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
39
38
37
37
37
36
35
34
33
32
31
30
29
28
27
26
25
24
23
22
21
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
0
-1
-2
-3
-4
-5
-6
-7
-7
-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
-65
-65
-65
-65
-65
-65
-65
-65
-65
-65
-65
-65
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
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
52
53
54
55
56
57
57
57
57
56
55
54
53
52
51
50
49
48
47
46
45
44
43
42
41
40
39
38
37
36
35
34
33
32
31
30
29
28
27
26
25
24
23
22
21
20
19
18
17
16
15
14
13
13
13
12
11
10
9
8
7
6
5
4
3
2
1
0
-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
-45
-45
-45
-45
-45
-45
-45
-45
-45
-45
-45
-45
Change lineChange linevoid 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
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
55
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
82
81
80
79
78
77
76
75
74
73
72
71
70
69
68
67
66
65
64
63
62
61
61
61
60
59
58
57
56
55
54
53
52
51
50
49
48
47
46
45
44
43
42
41
40
39
38
37
36
35
34
33
32
31
30
29
28
27
26
25
24
23
22
21
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3
3
3
3
3
3
3
3
3
3
3
3
3
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.  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.x(), mouse.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
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
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
103
103
103
103
102
101
100
99
98
97
96
95
94
93
92
91
90
89
88
87
86
85
84
83
82
81
80
79
78
77
76
75
74
73
72
71
70
69
68
67
66
65
64
63
62
61
60
59
58
57
56
55
54
53
52
51
50
49
48
47
46
45
45
45
45
45
45
45
45
45
45
45
45
45
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
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
107
108
109
110
111
112
113
114
115
116
117
117
116
115
114
113
112
111
110
109
108
107
106
105
104
103
102
101
100
99
98
97
96
95
94
93
92
91
90
89
88
87
86
85
84
83
82
81
80
79
78
77
76
75
74
73
72
71
71
71
71
71
71
71
71
71
71
71
71
71
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](QUuid, 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
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
134
133
132
131
130
129
128
127
126
125
124
123
122
121
120
119
118
117
116
115
114
113
112
111
110
109
108
107
106
105
105
105
105
105
105
105
105
105
105
105
105
105
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](QUuid, RouteParameters routeParameters)
  {
    // Store the resulting route parameters
    m_routeParameters = routeParameters;
  });

  // connect to solveRouteCompleted signal
  connect(m_routeTask, &RouteTask::solveRouteCompleted, this, [this](QUuid, 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 Stops 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
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
154
153
152
151
150
149
148
147
146
145
145
145
145
145
145
145
145
145
145
145
145
145
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(m_startGraphic->geometry());
  const Stop stop2(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 Points, set m_directions to nullptr, and reset RouteBuilderStatus. Then save the file.

Display_a_map.cpp
Expand
Use dark colors for code blocks
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
155
156
157
158
159
160
161
162
163
163
163
163
163
163
163
163
163
163
163
163
163
163
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
Expand
Use dark colors for code blocks
13
13
13
13
13
13
13
13
13
13
13
13
13
14
15
16
17
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
0
-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
-51
Add line.import QtQuick 2.6
import QtQuick.Controls 2.2
import Esri.display_a_map 1.0

import QtQuick.Shapes 1.12
Expand

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
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
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
103
104
104
104
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.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.    // Declare the C++ instance which creates the map etc. and supply the view
    Display_a_map {
        id: model
        mapView: view
    }

    // Create window for displaying the route directions
    Rectangle {
        id: directionWindow
        anchors {
            right: parent.right
            top: parent.top
            margins: 5
        }
        radius: 5

        visible: model.directions
        width: Qt.platform.os === "ios" || Qt.platform.os === "android" ? 250 : 350
        height: parent.height / 2
        color: "#FBFBFB"
        clip: true

        ListView {
            id: directionsView
            anchors {
                fill: parent
                margins: 5
            }
            header: Component {
                Text {
                    height: 40
                    text: "Directions:"
                    font.pixelSize: 22
                }
            }

            // set the model to the DirectionManeuverListModel returned from the route
            model: model.directions
            delegate: directionDelegate
        }
    }

    Component {
        id: directionDelegate
        Rectangle {
            id: rect
            width: parent.width
            height: textDirections.height
            color: directionWindow.color

            // separator for directions
            Shape {
                height: 2
                ShapePath {
                    strokeWidth: 1
                    strokeColor: "darkgrey"
                    strokeStyle: ShapePath.SolidLine
                    startX: 20; startY: 0
                    PathLine { x: parent.width - 20 ; y: 0 }
                }
            }

            Text {
                id: textDirections
                text: qsTr("%1 (%2 miles)".arg(directionText).arg((length * 0.00062137).toFixed(2)))
                wrapMode: Text.WordWrap
                anchors {
                    leftMargin: 5
                    left: parent.left
                    right: parent.right
                }
            }
        }
    }
Expand

Press Ctrl + R to run the app.

The map should support two clicks to create an origin and destination point and then use the route service to display the resulting route and turn-by-turn directions.

What's next?

Learn how to use additional API features, ArcGIS location services, and ArcGIS tools in these tutorials: