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 scene 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 Key
to use your key. Update cesium Access Token
to use your Cesium ion access token .
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
const apiKey = "YOUR_API_KEY" ;
Cesium.ArcGisMapService.defaultAccessToken = apiKey;
const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN" ;
Cesium.Ion.defaultAccessToken = cesiumAccessToken;
const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
const viewer = new Cesium.Viewer( "cesiumContainer" , {
baseLayer : Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
});
Add references to ArcGIS REST JS In the <head>
element, reference the routing
and request
packages from ArcGIS REST JS.
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
< script src = "https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Cesium.js" > </ script >
< link href = "https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Widgets/widgets.css" rel = "stylesheet" >
< 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 scene This routing application uses an integrated mesh layer of Frankfurt, Germany. Update the scene extent to focus on Frankfurt.
Update the set View
command to center on location [8.68019, 50.1147]
, Frankfurt.
Expand
Use dark colors for code blocks
Change line Change line Change line 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
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
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees( 8.68019 , 50.1147 , 500 ),
orientation : {
heading : Cesium.Math.toRadians(- 120 ),
pitch : Cesium.Math.toRadians(- 28.0 ),
}
});
Add the Frankfurt integrated mesh layer to the scene as an I3SData Provider
.
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
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
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees( 8.68019 , 50.1147 , 500 ),
orientation : {
heading : Cesium.Math.toRadians(- 120 ),
pitch : Cesium.Math.toRadians(- 28.0 ),
}
});
const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl( "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer" );
const i3sProvider = await Cesium.I3SDataProvider.fromUrl( "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer" , {
geoidTiledTerrainProvider : geoidService,
token : apiKey
})
viewer.scene.primitives.add(i3sProvider);
Create start and end point graphics Billboard
entities are used to represent the start and end points of the route. You can customize Billboard
entities to display custom pins and images.
Add two new Billboard
entities to the viewer to represent start and end points. Set the position
of both entities to null
.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl( "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer" );
const i3sProvider = await Cesium.I3SDataProvider.fromUrl( "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer" , {
geoidTiledTerrainProvider : geoidService,
token : apiKey
})
viewer.scene.primitives.add(i3sProvider);
const startPoint = viewer.entities.add({
name : 'start' ,
position : null ,
billboard : {
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
}
})
const endPoint = viewer.entities.add({
name : 'end' ,
position : null ,
billboard : {
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
}
})
Create a Pin Builder
and use it to set the image
property of the billboards.
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
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
const pinBuilder = new Cesium.PinBuilder();
const startPoint = viewer.entities.add({
name : 'start' ,
position : null ,
billboard : {
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
image : pinBuilder.fromText( "1" ,Cesium.Color.fromCssColorString( '#348bdb' ), 48 ).toDataURL(),
}
})
const endPoint = viewer.entities.add({
name : 'end' ,
position : null ,
billboard : {
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
image : pinBuilder.fromText( "2" ,Cesium.Color.fromCssColorString( '#348bdb' ), 48 ).toDataURL(),
}
})
Add a click handler Use an event handler to set the start (origin) and end (destination) points for the route. The first click will set the start Coords
for the route and the second click will set the end Coords
. Subsequent clicks will start a new route.
Create a current Step
variable initialized to 'start'
. Declare start Coords
and end Coords
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
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
const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl( "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer" );
const i3sProvider = await Cesium.I3SDataProvider.fromUrl( "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer" , {
geoidTiledTerrainProvider : geoidService,
token : apiKey
})
viewer.scene.primitives.add(i3sProvider);
let currentStep = 'start' ;
let startCoords,endCoords;
const pinBuilder = new Cesium.PinBuilder();
Create a Screen Space Event Handler
for the Viewer
that listens for left clicks. Create an o n Left Click
function that runs when a click is detected.
Expand
Use dark colors for code blocks
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
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
const endPoint = viewer.entities.add({
name : 'end' ,
position : null ,
billboard : {
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
image : pinBuilder.fromText( "2" ,Cesium.Color.fromCssColorString( '#348bdb' ), 48 ).toDataURL(),
}
})
function onLeftClick ( movement ) {
}
viewer.screenSpaceEventHandler.setInputAction(onLeftClick,Cesium.ScreenSpaceEventType.LEFT_CLICK);
Get the coordinates of the clicked location and use transform them from Cartesian
coordinates to longitude and latitude degrees to use with the routing service .
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
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
function onLeftClick ( movement ) {
const pickedPosition = viewer.scene.pickPosition(movement.position);
const cartographic = Cesium.Cartographic.fromCartesian(pickedPosition);
const point = [Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude)]
}
viewer.screenSpaceEventHandler.setInputAction(onLeftClick,Cesium.ScreenSpaceEventType.LEFT_CLICK);
Set the locations of the start Point
and end Point
billboards using a conditional statement. When a new starting position is set, remove all previous billboards and routes.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
function onLeftClick ( movement ) {
const pickedPosition = viewer.scene.pickPosition(movement.position);
const cartographic = Cesium.Cartographic.fromCartesian(pickedPosition);
const point = [Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude)]
if (currentStep === 'start' ) {
startCoords = point;
startPoint.position = pickedPosition;
viewer.dataSources.removeAll();
endPoint.position = null ;
endCoords = null ;
currentStep = 'end' ;
}
else {
endCoords = point;
endPoint.position = pickedPosition;
currentStep = 'start' ;
}
}
viewer.screenSpaceEventHandler.setInputAction(onLeftClick,Cesium.ScreenSpaceEventType.LEFT_CLICK);
Run the app. You should be able to click on the map to create two billboards that display the numbers "1" and "2". Subsequent clicks should set new positions for the billboards.
Get the route and directions To find a route between the points as well as turn-by-turn directions, use the ArcGIS REST JS solve Route
function to make a request to 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.
Create a new arcgis Rest.Api K e y Manager
and set your API key.
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
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
const apiKey = "YOUR_API_KEY" ;
Cesium.ArcGisMapService.defaultAccessToken = apiKey;
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
Create a function called get Route
that accepts two sets of coordinate pairs. Inside, call arcgis Rest.solve Route
and provide the coordinates of the starting and ending points.
More info arcgis Rest.solve Route
creates a direct request to the solve
endpoint of the routing service . To learn more about the solve
endpoint, go to the Routing service page in the Mapping APIs and location services guide.
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
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
viewer.screenSpaceEventHandler.setInputAction(onLeftClick,Cesium.ScreenSpaceEventType.LEFT_CLICK);
function getRoute ( start,end ) {
arcgisRest
.solveRoute({
stops : [start,end],
authentication
})
}
Access the service response and add the returned GeoJSON to your application as a Geo Json Data Source
.
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.
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
function getRoute ( start,end ) {
arcgisRest
.solveRoute({
stops : [start,end],
authentication
})
.then( ( response ) => {
Cesium.GeoJsonDataSource.load(response.routes.geoJson,{
stroke :Cesium.Color.fromCssColorString( '#76fcfc' ),
strokeWidth : 5 ,
clampToGround : true
}).then( ( data )=> {
viewer.dataSources.add(data);
});
})
}
Access the directions
returned by the service and format them as HTML. Create an invisible Entity
and set its description
to display directions on the map.
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
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
function getRoute ( start,end ) {
arcgisRest
.solveRoute({
stops : [start,end],
authentication
})
.then( ( response ) => {
Cesium.GeoJsonDataSource.load(response.routes.geoJson,{
stroke :Cesium.Color.fromCssColorString( '#76fcfc' ),
strokeWidth : 5 ,
clampToGround : true
}).then( ( data )=> {
viewer.dataSources.add(data);
});
const directionsHTML = response.directions[ 0 ].features.map( ( f ) => f.attributes.text).join( "<br/>" );
const directionsPopup = viewer.entities.add({
name : "Directions" ,
description :directionsHTML,
position :Cesium.Cartesian3.fromDegrees( 0 , 0 ),
});
viewer.selectedEntity = directionsPopup;
})
}
In your o n Left Click
function, call get Route
when both a start point and end point have been 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
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
function onLeftClick ( movement ) {
const pickedPosition = viewer.scene.pickPosition(movement.position);
const cartographic = Cesium.Cartographic.fromCartesian(pickedPosition);
const point = [Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude)]
if (currentStep === 'start' ) {
startCoords = point;
startPoint.position = pickedPosition;
viewer.dataSources.removeAll();
endPoint.position = null ;
endCoords = null ;
currentStep = 'end' ;
}
else {
endCoords = point;
endPoint.position = pickedPosition;
currentStep = 'start' ;
}
if (startCoords && endCoords) {
getRoute(startCoords,endCoords);
}
}
viewer.screenSpaceEventHandler.setInputAction(onLeftClick,Cesium.ScreenSpaceEventType.LEFT_CLICK);
Run the app In CodePen , run your code to display the map.
When the application loads, you should be able to click on two different locations to create an origin point and a destination. The routing service should then calculate a driving route between them.
What's next? Learn how to use additional ArcGIS location services in these tutorials: