Learn how to calculate the area that can be reached in a given driving time from a location.
A service area , also known as an isochrone, is a polygon that represents the area that can be reached when driving or walking on a street network. The area that can be reached is restricted by either time or distance. To calculate service areas , you can use the routing service . You provide a start location (facilities), one or more time or distance values, and a spatial reference. Once processed, the service returns the service areas that can be reached.
In this tutorial, you create and display five, ten, and fifteen minute drive time service areas when the map is clicked. You use data-driven styling to give each polygon a different shade of blue.
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 Key
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 routing
and request
packages from ArcGIS REST JS.
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
<!-- 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.1.0/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/navigation
.
Update the basemap and the map initialization to center on location [100.5231,13.7367]
, Bangkok.
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
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "arcgis/streets" ;
const map = L.map( "map" , {
minZoom : 2
});
map.setView([ 13.7367 , 100.5231 ], 13 ); // Bangkok
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
Add layer groups In this app, you display a marker for the starting point location and polygons for the service areas. Add a Layer Group
to display the point and polygons on the map.
Add a Layer Group
for the clicked Point
and another for the service Areas
.
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
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
const clickedPoints = L.layerGroup().addTo(map);
const serviceAreas = L.layerGroup().addTo(map);
Add a click handler When you click on the map, you will update the location of the clicked Point
and return a new service area .
Add a click
event handler. Inside, remove the data from the previous click with clear Layers
.
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
const clickedPoints = L.layerGroup().addTo(map);
const serviceAreas = L.layerGroup().addTo(map);
map.on( "click" , ( e ) => {
clickedPoints.clearLayers();
serviceAreas.clearLayers();
});
Display a Marker
at the clicked location.
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
map.on( "click" , ( e ) => {
clickedPoints.clearLayers();
serviceAreas.clearLayers();
L.marker(e.latlng).addTo(clickedPoints);
});
Get the service area With the longitude and latitude of the click event, you can call the service Area
function from ArcGIS REST JS to get the service area .
Create a new Api K e y Manager
to access the route 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.
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
const clickedPoints = L.layerGroup().addTo(map);
const serviceAreas = L.layerGroup().addTo(map);
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
map.on( "click" , ( e ) => {
clickedPoints.clearLayers();
serviceAreas.clearLayers();
L.marker(e.latlng).addTo(clickedPoints);
});
Call the service Area
operation. Set the facilities
parameter with the clicked coordinates to calculate the service area.
More info The facilities
parameter lets you pass in multiple locations around which the service area is calculated. In this case, you are only passing one.
By default, the three drive times that are requested are 5, 10 and 15 minutes. You can change these by passing the default Breaks
parameter.
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
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
map.on( "click" , ( e ) => {
clickedPoints.clearLayers();
serviceAreas.clearLayers();
L.marker(e.latlng).addTo(clickedPoints);
arcgisRest
.serviceArea({
endpoint : "https://route-api.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" ,
authentication,
facilities : [[e.latlng.lng, e.latlng.lat]]
})
});
Add an error handler. Inside, show a message and write the error to the console.
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
arcgisRest
.serviceArea({
endpoint : "https://route-api.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" ,
authentication,
facilities : [[e.latlng.lng, e.latlng.lat]]
})
.catch( ( error ) => {
console .error(error);
alert( "There was a problem using the route service. See the console for details." );
});
Display the service area on the map The response to the request contains the geographic information of the service areas that you can access and display on the map.
Add a response handler. Inside, add a Geo JSON
layer that adds the features to the service Areas
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
arcgisRest
.serviceArea({
endpoint : "https://route-api.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" ,
authentication,
facilities : [[e.latlng.lng, e.latlng.lat]]
})
.then( ( response ) => {
L.geoJSON(response.saPolygons.geoJson, {
}
).addTo(serviceAreas);
})
.catch( ( error ) => {
console .error(error);
alert( "There was a problem using the route service. See the console for details." );
});
Style the different polygons using the From Break
property to distinguish the 5, 10, and 15 minute drive time polygons.
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.
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
.then( ( response ) => {
L.geoJSON(response.saPolygons.geoJson, {
style : ( feature ) => {
const style = {
fillOpacity : 0.5 ,
weight : 1
};
if (feature.properties.FromBreak === 0 ) {
style.color = "hsl(210, 80%, 40%)" ;
} else if (feature.properties.FromBreak === 5 ) {
style.color = "hsl(210, 80%, 60%)" ;
} else {
style.color = "hsl(210, 80%, 80%)" ;
}
return style;
}
}
).addTo(serviceAreas);
})
Run the app In CodePen , run your code to display the map.
When you click on the map, three service areas are shown as concentric polygons around a marker. These indicate the areas that can be reached by driving for 5, 10 or 15 minutes.
What's next? Learn how to use additional ArcGIS location services in these tutorials: