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 You need a free ArcGIS developer account to access your dashboard and API keys . The API key must be scoped to access the services used in this tutorial.
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 ArcGIS services , you need an API key .
Go to your dashboard to get an API key .
In CodePen , set the api to your key, so it can be used to access basemap layer and location services.
Use dark colors for code blocks
Change line
1
2
3
4
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic" // Basemap layer service
});
Add modules In the require statement, add the GraphicrouteRouteFeature
More info The ArcGIS API for JavaScript uses AMD modules . The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add 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
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/Graphic" ,
"esri/rest/route" ,
"esri/rest/support/RouteParameters" ,
"esri/rest/support/FeatureSet"
], function ( esriConfig, Map , MapView, Graphic, route, RouteParameters, FeatureSet ) {
Update the map A streets basemap layer is typically used in routing applications. Update the basemaparcgis-navigation basemap layer and change the position of the map to center on Los Angeles.
Update the basemaparcgis-navigation.
Expand
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
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
], function ( esriConfig, Map , MapView, Graphic, route, RouteParameters, FeatureSet ) {
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-navigation" //Basemap layer service
});
Update the center-118.24532,34.05398 and set the zoom12 to center on Los Angeles.
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
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-navigation" //Basemap layer service
});
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 118.24532 , 34.05398 ], //Longitude, latitude
zoom : 12
});
Define the service url The rest module makes a request to a service and returns the results. Use the routeRouting service .
Create a variable called route to reference the route service.
Expand
Use dark colors for code blocks
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
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 118.24532 , 34.05398 ], //Longitude, latitude
zoom : 12
});
const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World" ;
Get an origin and destination A routestopsStops are graphics that represent the origin and destination locations for a route . Use a click handler in the Viewstops
Add a click handler to add graphics to the view.
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
const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World" ;
view.on( "click" , function ( event ) {
});
Create an add function to display a white marker for the origin location and a black marker for the destination . Add the graphic to the view.
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
view.on( "click" , function ( event ) {
});
function addGraphic ( type, point ) {
const graphic = new Graphic({
symbol : {
type : "simple-marker" ,
color : (type === "origin" ) ? "white" : "black" ,
size : "8px"
},
geometry : point
});
view.graphics.add(graphic);
}
Update the click handler to reference the add function. The first click will create the origin and the second will create the destination. Subsequent clicks will clear the graphics to define a new origin and destination.
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.
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
view.on( "click" , function ( event ) {
if (view.graphics.length === 0 ) {
addGraphic( "origin" , event.mapPoint);
} else if (view.graphics.length === 1 ) {
addGraphic( "destination" , event.mapPoint);
} else {
view.graphics.removeAll();
addGraphic( "origin" ,event.mapPoint);
}
});
Click on the map twice to ensure the graphics are created.
Find the route To solve the route, add the origin and destination graphics to the stopsFeaturesolveGraphic
More info Input parameters are necessary to solve the route. While there are many parameters you can add, such as stops and barriers, at minimum you need to provide an origin and destination point .
Create a get function to add Routepoint graphics .
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.
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
function addGraphic ( type, point ) {
const graphic = new Graphic({
symbol : {
type : "simple-marker" ,
color : (type === "origin" ) ? "white" : "black" ,
size : "8px"
},
geometry : point
});
view.graphics.add(graphic);
}
function getRoute ( ) {
const routeParams = new RouteParameters({
stops : new FeatureSet({
features : view.graphics.toArray()
}),
});
}
Call the solve method to get the route. When the method returns, get the route from routeGraphic
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
function getRoute ( ) {
const routeParams = new RouteParameters({
stops : new FeatureSet({
features : view.graphics.toArray()
}),
});
route.solve(routeUrl, routeParams)
.then( function ( data ) {
data.routeResults.forEach( function ( result ) {
result.route.symbol = {
type : "simple-line" ,
color : [ 5 , 150 , 255 ],
width : 3
};
view.graphics.add(result.route);
});
})
}
Update the click handler with the get function after the second graphic is passed in (destination).
Expand
Use dark colors for code blocks
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
view.on( "click" , function ( event ) {
if (view.graphics.length === 0 ) {
addGraphic( "origin" , event.mapPoint);
} else if (view.graphics.length === 1 ) {
addGraphic( "destination" , event.mapPoint);
getRoute(); // Call the route service
} else {
view.graphics.removeAll();
addGraphic( "origin" ,event.mapPoint);
}
});
Click two locations on the map to display a route.
Get directions You can get driving directions from the route service with the returnRoute
Go back to the get function and set the returntrue.
Expand
Use dark colors for code blocks
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
function getRoute ( ) {
const routeParams = new RouteParameters({
stops : new FeatureSet({
features : view.graphics.toArray()
}),
returnDirections : true
});
route.solve(routeUrl, routeParams)
.then( function ( data ) {
data.routeResults.forEach( function ( result ) {
result.route.symbol = {
type : "simple-line" ,
color : [ 5 , 150 , 255 ],
width : 3
};
view.graphics.add(result.route);
});
})
}
After the solve method has resolved, create a directions ordered list element that will display if there are results returned to generate a route.
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.
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
route.solve(routeUrl, routeParams)
.then( function ( data ) {
data.routeResults.forEach( function ( result ) {
result.route.symbol = {
type : "simple-line" ,
color : [ 5 , 150 , 255 ],
width : 3
};
view.graphics.add(result.route);
});
// Display directions
if (data.routeResults.length > 0 ) {
const directions = document .createElement( "ol" );
directions.classList = "esri-widget esri-widget--panel esri-directions__scroller" ;
directions.style.marginTop = "0" ;
directions.style.padding = "15px 15px 15px 30px" ;
const features = data.routeResults[ 0 ].directions.features;
}
})
Create a li element for each route feature to generate an ordered list of directions with their distances in miles. Append each direction to the directions element.
Expand
Use dark colors for code blocks
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
// Display directions
if (data.routeResults.length > 0 ) {
const directions = document .createElement( "ol" );
directions.classList = "esri-widget esri-widget--panel esri-directions__scroller" ;
directions.style.marginTop = "0" ;
directions.style.padding = "15px 15px 15px 30px" ;
const features = data.routeResults[ 0 ].directions.features;
// Show each direction
features.forEach( function ( result,i ) {
const direction = document .createElement( "li" );
direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed( 2 ) + " miles)" ;
directions.appendChild(direction);
});
}
For each new route created, remove all existing HTML elements from the view with the empty method. Add the direction element, with the directions as list items, to the top-right of the view.
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
// Show each direction
features.forEach( function ( result,i ) {
const direction = document .createElement( "li" );
direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed( 2 ) + " miles)" ;
directions.appendChild(direction);
});
view.ui.empty( "top-right" );
view.ui.add(directions, "top-right" );
Add a catch statement to display any errors in the console.
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
route.solve(routeUrl, routeParams)
.then( function ( data ) {
data.routeResults.forEach( function ( result ) {
result.route.symbol = {
type : "simple-line" ,
color : [ 5 , 150 , 255 ],
width : 3
};
view.graphics.add(result.route);
});
// Display directions
if (data.routeResults.length > 0 ) {
const directions = document .createElement( "ol" );
directions.classList = "esri-widget esri-widget--panel esri-directions__scroller" ;
directions.style.marginTop = "0" ;
directions.style.padding = "15px 15px 15px 30px" ;
const features = data.routeResults[ 0 ].directions.features;
// Show each direction
features.forEach( function ( result,i ) {
const direction = document .createElement( "li" );
direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed( 2 ) + " miles)" ;
directions.appendChild(direction);
});
view.ui.empty( "top-right" );
view.ui.add(directions, "top-right" );
}
})
.catch( function ( error ) {
console .log(error);
})
Run the App In CodePen , run your code to display the map.
Click on the map twice to display the route directions. 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 and
ArcGIS services in these tutorials: