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

Steps

Get an access token

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

1. Go to the Create an API key tutorial to obtain an access token.

2. Ensure that the following privileges are enabled: Location services > Basemaps > Basemap styles service and Location services > Routing.

3. 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

1. To start this tutorial, complete the Display a map tutorial or download and unzip the solution.

2. Open the Display_a_map project in Qt Creator.

3. In the Projects window, in the Sources folder, open the main.cpp file.

4. 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

   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
   78
   79
   80
       // 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

1. 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

   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
   78
   79
   80
   81
   namespace Esri::ArcGISRuntime {
   
   class Map;
   class MapQuickView;
   
   class Graphic;
   class GraphicsOverlay;
   class PictureMarkerSymbol;
   class RouteTask;
   

2. 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

   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
   78
   79
   80
   81
   class Graphic;
   class GraphicsOverlay;
   class PictureMarkerSymbol;
   class RouteTask;
   
   }  // namespace Esri::ArcGISRuntime
   
   enum RouteBuilderStatus
   {
     NotStarted,
     SelectedStart,
     SelectedStartAndEnd,
   };
   

3. Add an #include statement, class declaration, and a Meta Object Compiler (MOC) to add an include that exposes the QAbstractListModel.

   Display_a_map.h

   Use dark colors for code blocks

   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
   78
   79
   80
   81
   enum RouteBuilderStatus
   {
     NotStarted,
     SelectedStart,
     SelectedStartAndEnd,
   };
   
   #include <QObject>
   
   #include "RouteParameters.h"
   class QAbstractListModel;
   Q_MOC_INCLUDE("QAbstractListModel")
   
   Q_MOC_INCLUDE("MapQuickView.h")
   

4. Use Q_PROPERTY to create a member variable m_directions.

   Display_a_map.h

   Use dark colors for code blocks

   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
   78
   79
   80
   81
   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)
   

5. 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

   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
   78
   79
   80
   81
   public:
       explicit Display_a_map(QObject* parent = nullptr);
       ~Display_a_map() override;
   
   signals:
       void mapViewChanged();
   
        void directionsChanged();
   

6. Declare the following private methods.

   Display_a_map.h

   Use dark colors for code blocks

   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
   78
   79
   80
   81
   private:
       Esri::ArcGISRuntime::MapQuickView* mapView() const;
       void setMapView(Esri::ArcGISRuntime::MapQuickView* mapView);
       void setupViewpoint();
   
       void setupRouteTask();
       void findRoute();
       void resetState();
   

7. 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

   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
   78
   79
   80
   81
       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

1. 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

   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
   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
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
   179
   180
   181
   182
   183
   #include "Display_a_map.h"
   #include "Map.h"
   #include "MapTypes.h"
   #include "MapQuickView.h"
   #include "Point.h"
   #include "Viewpoint.h"
   #include "SpatialReference.h"
   #include <QFuture>
   
   
   #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 "SymbolTypes.h"
   #include <QGeoPositionInfoSource>
   #include <QList>
   #include <QUrl>
   #include <QUuid>
   

Update the constructor

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

   Display_a_map.cpp

   Use dark colors for code blocks

   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
   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
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
   179
   180
   181
   182
   183
   Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
       QObject(parent),
   
       m_map(new Map(BasemapStyle::ArcGISStreets, this)),
   
       m_currentState(RouteBuilderStatus::NotStarted)
   

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

   Display_a_map.cpp

   Use dark colors for code blocks

   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
   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
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
   179
   180
   181
   182
   183
   Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
       QObject(parent),
   
       m_map(new Map(BasemapStyle::ArcGISStreets, this)),
   
       m_currentState(RouteBuilderStatus::NotStarted)
   
   {
   
       setupRouteTask();
   

Change the map's view point

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

   Display_a_map.cpp

   Use dark colors for code blocks

   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
   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
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
   179
   180
   181
   182
   183
   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);
   

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

1. 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

   Use dark colors for code blocks

   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
   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
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
   179
   180
   181
   182
   183
   void Display_a_map::setupViewpoint()
   {
   
       const Point center(-118.24532, 34.05398, SpatialReference::wgs84());
       const Viewpoint viewpoint(center, 144447.638572);
   
       m_mapView->setViewpointAsync(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;
           }
       });
   

Create route graphics

1. 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

   Use dark colors for code blocks

   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
   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
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
   179
   180
   181
   182
   183
           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});
   
   }
   

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.

1. Begin implementing the setRouteTask() method. Point the RouteTask to an online service. Call the create default parameters async method obtain the route parameters.

   Display_a_map.cpp

   Use dark colors for code blocks

   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
   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
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
   179
   180
   181
   182
   183
   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);
   
       // Create the default parameters which will load the route task implicitly.
       m_routeTask->createDefaultParametersAsync().then(this,[this](const RouteParameters& routeParameters)
       {
           // Store the resulting route parameters.
           m_routeParameters = routeParameters;
       });
   }
   

Create the findRoute() method

1. Begin implementing 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. Call solveRouteAsync(), passing in RouteParameters. 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.

   Display_a_map.cpp

   Use dark colors for code blocks

   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
   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
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
   179
   180
   181
   182
   183
   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->solveRouteAsync(m_routeParameters).then(this,[this](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 resetState() method

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

1. 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

   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
   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
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
   167
   168
   169
   170
   171
   172
   173
   174
   175
   176
   177
   178
   179
   180
   181
   182
   183
   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

1. 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

   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
   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
   import QtQuick
   import QtQuick.Controls
   import Esri.Display_a_map
   
   import QtQuick.Shapes
   

2. 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

   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
   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
       // 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

3. 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:

• Search for an address
• Display a web map
• Add a feature layer
• Add a point, line, and polygon
• Display a scene