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 account to access the developer dashboard and create an API key.
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
<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="initial-scale=1,maximum-scale=1,user-scalable=no" /><title>Esri Leaflet</title><!-- Load Leaflet from CDN --><linkrel="stylesheet"href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="crossorigin=""/><scriptsrc="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="crossorigin=""></script><!-- Load Esri Leaflet from CDN --><scriptsrc="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script><scriptsrc="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"></script><!-- Load ArcGIS REST JS from CDN --><scriptsrc="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script><scriptsrc="https://unpkg.com/@esri/arcgis-rest-routing@3.0.0/dist/umd/routing.umd.js"></script><scriptsrc="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script><style>body { margin:0; padding:0; }
#map {
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style></head><body><divid="map"></div><script>const apiKey = "YOUR_API_KEY";
const basemapEnum = "ArcGIS:Navigation";
const map = L.map('map', {
minZoom: 2 }).setView([13.7367,100.5231], 13); // Bangkok L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey: apiKey
}).addTo(map);
// Layer Group for source pointconst startLayerGroup = L.layerGroup().addTo(map);
// Layer Group for service area resultsconst layerGroup = L.layerGroup().addTo(map);
// Create the arcgis-rest-js authentication object to use later.const authentication = new arcgisRest.ApiKey({
key: apiKey
});
// When the map is clicked, call the service area REST service with the// clicked point and display the results. map.on("click", (e) => {
// Clear the previous results startLayerGroup.clearLayers();
layerGroup.clearLayers();
// Add the source point L.marker(e.latlng).addTo(startLayerGroup);
// Make the API request 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) => {
// Show the result route on the map. 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%)';
} elseif(feature.properties.FromBreak === 5) {
style.color = "hsl(210, 80%, 60%)";
} else {
style.color = "hsl(210, 80%, 80%)";
}
return style;
}
}).addTo(layerGroup);
})
.catch((error) => {
console.error(error);
alert("There was a problem using the route service. See the console for details.");
});
});
</script></body></html>
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.
