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 route 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 You need an ArcGIS Developer or ArcGIS Online account to access the developer dashboard and create an API key .
Steps Create a new pen To get started, either complete the Display a map tutorial or use this pen . Set the API key To access location services , you need an API key or OAuth 2.0 access token . To learn how to create and scope your key, visit the Create an API key tutorial.
Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.
In CodePen , update api to use your key.
Use dark colors for code blocks
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
const map = L.map( "map" , {
minZoom : 2
})
map.setView([ 34.02 , - 118.805 ], 13 );
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Streets" ;
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
Add references to ArcGIS REST JS Reference the routingrequest
Expand
Use dark colors for code blocks
Add line. Add line. Add 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
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
<!-- Load Leaflet from CDN -->
< link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@3.0.10/dist/esri-leaflet.js" > </ script >
< script src = "https://unpkg.com/esri-leaflet-vector@4.0.2/dist/esri-leaflet-vector.js" > </ script >
<!-- Load ArcGIS REST JS from CDN -->
< script src = "https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js" > </ script >
< script src = "https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js" > </ script >
Update the map A navigation basemap layer is typically used in geocoding and routing applications. Update the basemap layer to use ArcGIS:.
Update the basemap enumeration and change the map view to center on location [-79.3832,43.6532], Toronto.
Expand
Use dark colors for code blocks
Change line 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
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
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Navigation" ;
const map = L.map( "map" , {
minZoom : 2
})
map.setView([ 43.6532 , - 79.3832 ], 12 ); // Toronto
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
Add layer groups To display a route, you need a start point, end point, and a connecting route line .
Add a separate Layer
Expand
Use dark colors for code blocks
Add line. Add line. Add 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
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
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
const startLayerGroup = L.layerGroup().addTo(map);
const endLayerGroup = L.layerGroup().addTo(map);
const routeLines = L.layerGroup().addTo(map);
Set start and end points Use an event handler to set the start (origin) and end (destination) points. The first click will set the start for the route and the second click will set the end. Subsequent clicks will start a new route.
Create a current variable with its initial value set to start. Declare start and end variables that will be used within the click handler.
Expand
Use dark colors for code blocks
Add line. Add 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
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
const startLayerGroup = L.layerGroup().addTo(map);
const endLayerGroup = L.layerGroup().addTo(map);
const routeLines = L.layerGroup().addTo(map);
let currentStep = "start" ;
let startCoords, endCoords;
Add a clickLatcoordinates variable.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add 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
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
let currentStep = "start" ;
let startCoords, endCoords;
map.on( "click" , ( e ) => {
const coordinates = [e.latlng.lng, e.latlng.lat];
});
Create a conditional statement that sets the current as either start or end. If a new start point is set, call the clearlayer.
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.
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
map.on( "click" , ( e ) => {
const coordinates = [e.latlng.lng, e.latlng.lat];
if (currentStep === "start" ) {
startLayerGroup.clearLayers();
endLayerGroup.clearLayers();
routeLines.clearLayers();
currentStep = "end" ;
} else {
currentStep = "start" ;
}
});
Add a Markerstart and end to display the locations of the start and end.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add 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
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
map.on( "click" , ( e ) => {
const coordinates = [e.latlng.lng, e.latlng.lat];
if (currentStep === "start" ) {
startLayerGroup.clearLayers();
endLayerGroup.clearLayers();
routeLines.clearLayers();
L.marker(e.latlng).addTo(startLayerGroup);
startCoords = coordinates;
currentStep = "end" ;
} else {
L.marker(e.latlng).addTo(endLayerGroup);
endCoords = coordinates;
currentStep = "start" ;
}
});
Run your app. You should be able to click in two places to set markers for the start and end.
Get the route To find the route, you use ArcGIS REST JS to call the solve function to access the routing service.
In order to access ArcGIS location services with ArcGIS REST JS , you need an access token , either an API key or a token created by OAuth 2.0 authentication. API keys have scopes, so make sure to scope your API key with permissions to access the service.
Above the click handler , create a function called update. Inside, create a new Apisolvestops array.
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.
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
let currentStep = "start" ;
let startCoords, endCoords;
function updateRoute ( ) {
// Create the arcgis-rest-js authentication object to use later.
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
// make the API request
arcgisRest
.solveRoute({
stops : [startCoords, endCoords],
endpoint : "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World/solve" ,
authentication
})
}
map.on( "click" , ( e ) => {
const coordinates = [e.latlng.lng, e.latlng.lat];
if (currentStep === "start" ) {
startLayerGroup.clearLayers();
endLayerGroup.clearLayers();
routeLines.clearLayers();
L.marker(e.latlng).addTo(startLayerGroup);
startCoords = coordinates;
currentStep = "end" ;
} else {
L.marker(e.latlng).addTo(endLayerGroup);
endCoords = coordinates;
currentStep = "start" ;
}
});
Create a response handler that clears any previous route and adds a Georoute layer.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add 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
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
function updateRoute ( ) {
// Create the arcgis-rest-js authentication object to use later.
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
// make the API request
arcgisRest
.solveRoute({
stops : [startCoords, endCoords],
endpoint : "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World/solve" ,
authentication
})
.then( ( response ) => {
routeLines.clearLayers();
L.geoJSON(response.routes.geoJson).addTo(routeLines);
})
}
Add an error handler. Inside, show an alert and log a message.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add 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
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
function updateRoute ( ) {
// Create the arcgis-rest-js authentication object to use later.
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
// make the API request
arcgisRest
.solveRoute({
stops : [startCoords, endCoords],
endpoint : "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World/solve" ,
authentication
})
.then( ( response ) => {
routeLines.clearLayers();
L.geoJSON(response.routes.geoJson).addTo(routeLines);
})
.catch( ( error ) => {
console .error(error);
alert( "There was a problem using the route service. See the console for details." );
});
}
Update the click event handler to call update once the start and end coordinates are set.
Expand
Use dark colors for code blocks
Add line. Add line. Add 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
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
map.on( "click" , ( e ) => {
const coordinates = [e.latlng.lng, e.latlng.lat];
if (currentStep === "start" ) {
startLayerGroup.clearLayers();
endLayerGroup.clearLayers();
routeLines.clearLayers();
L.marker(e.latlng).addTo(startLayerGroup);
startCoords = coordinates;
currentStep = "end" ;
} else {
L.marker(e.latlng).addTo(endLayerGroup);
endCoords = coordinates;
currentStep = "start" ;
}
if (startCoords && endCoords) {
updateRoute();
}
});
Run your app. You should be able to set start and end points and view a route line plotted between them.
Show directions The data returned from the routing service contains directions information. To display it, you can create a styled <div> element and populate it with the directions retrieved from the response.
Create a <div> element with an id of directions.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add 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
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
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
const directions = document .createElement( "div" );
directions.id = "directions" ;
directions.innerHTML = "Click on the map to create a start and end for the route." ;
document .body.appendChild(directions);
const startLayerGroup = L.layerGroup().addTo(map);
const endLayerGroup = L.layerGroup().addTo(map);
In the updateinner with the directions from the response. Clear the start and end.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add 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
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
function updateRoute ( ) {
// Create the arcgis-rest-js authentication object to use later.
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
// make the API request
arcgisRest
.solveRoute({
stops : [startCoords, endCoords],
endpoint : "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World/solve" ,
authentication
})
.then( ( response ) => {
routeLines.clearLayers();
L.geoJSON(response.routes.geoJson).addTo(routeLines);
const directionsHTML = response.directions[ 0 ].features.map( ( f ) => f.attributes.text).join( "<br/>" );
directions.innerHTML = directionsHTML;
startCoords = null ;
endCoords = null ;
})
.catch( ( error ) => {
console .error(error);
alert( "There was a problem using the route service. See the console for details." );
});
}
Run the app In CodePen , run your code to display the map.
When the map displays, you should be able to click on it once to create an origin point and again to create a destination point. The routing service should then display the resulting route and turn-by-turn directions.
What's next? Learn how to use additional ArcGIS location services in these tutorials:
