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 use ArcGIS REST JS to access the routing service to 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 Location Platform or ArcGIS Online account.
Steps
Create a new pen
- To get started, you can complete the Display a map tutorial or use the .
Get an access token
You need an access token with the correct privileges to access the resources used in this tutorial.
-
Go to the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
- Location services > Basemaps
- Location services > Routing
- Privileges
-
Copy the API key access token to your clipboard when prompted.
-
In CodePen, update the
access
variable to use your access token.Token Use dark colors for code blocks const accessToken = "YOUR_ACCESS_TOKEN"; const basemapId = "arcgis/outdoor"; const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${accessToken}`; olms.apply(map, basemapURL);
-
Run the code to ensure the basemap is displayed in the map.
To learn about the other types of authentication available, go to Types of authentication.
Add references to ArcGIS REST JS
-
In the
<head
element, add references to the ArcGIS REST JS library.> Use dark colors for code blocks <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.1.0/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@12.3.5/dist/olms.js" type="text/javascript"></script> <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.Use dark colors for code blocks <script> const accessToken = "YOUR_ACCESS_TOKEN"; const map = new ol.Map({ target: "map" }); const view = new ol.View({ center: ol.proj.fromLonLat([100.5231, 13.7367]), // Bangkok zoom: 12 }); map.setView(view); const basemapId = "arcgis/navigation"; const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${accessToken}`; olms.apply(map, basemapURL).then(function (map) { // Add Esri attribution // Learn more in https://esriurl.com/attribution const source = map.getLayers().item(0).getSource(); source.setAttributions("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | ") }); </script>
Create a starting point layer
Add a Vector
to show the user where they clicked, with a white circle and black outline.
-
Add a function called
add
. Inside, create aStarting Point Layer Vector
layer. Use aLayer Circle
style, with whiteFill
and blackStroke
. Store the layer in a variable calledstarting
;Point Layer Use dark colors for code blocks map.setView(view); let startingPointLayer; function addStartingPointLayer() { startingPointLayer = new ol.layer.Vector({ style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); }
-
After creating the
Vector
, add it to the map using theLayer add
function.Layer Use dark colors for code blocks style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); map.addLayer(startingPointLayer); window.s = startingPointLayer;
Create service area layer
To show the service areas, you will use another Vector
. Each service area feature has a property called From
which contains the lower bound of the number of minutes of travel: 0, 5 and 10 minutes. You will use a style function to choose a different shade of blue based on this property.
-
Add a function called
add
. Store the layer as a variable called 'serviceAreaLayer'.Service Area Layer() Use dark colors for code blocks map.setView(view); let serviceAreaLayer; function addServiceAreaLayer() { serviceAreaLayer = new ol.layer.Vector({ }); }
-
Create a function which takes a feature and returns a fill style. Use the
From
property to choose a shade of blue. Use a black stroke. Pass the style function to theBreak Vector
constructor.Layer Use dark colors for code blocks let serviceAreaLayer; function addServiceAreaLayer() { const style = (feature) => { const fillColors = { 0: "hsla(210, 80%, 40%, 50%)", 5: "hsla(210, 80%, 60%, 50%)", 10: "hsla(210, 80%, 80%, 50%)" }; return new ol.style.Style({ fill: new ol.style.Fill({ color: fillColors[feature.get("FromBreak")] }), stroke: new ol.style.Stroke({ color: "black" }) }); }; serviceAreaLayer = new ol.layer.Vector({ style: style }); }
-
After creating the
Vector
, add it to the map using theLayer add
function.Layer Use dark colors for code blocks serviceAreaLayer = new ol.layer.Vector({ style: style }); map.addLayer(serviceAreaLayer);
Display layers
Use the load handler to display your layers when the map is ready.
-
Inside
olms
load handler, calladd
andService Area Layer add
.Starting Point Layer Use dark colors for code blocks const basemapId = "arcgis/navigation"; const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${accessToken}`; olms.apply(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); // Add Esri attribution // Learn more in https://esriurl.com/attribution const source = map.getLayers().item(0).getSource(); source.setAttributions("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | ") });
Get click location
Before you call the Service area service, you need the location of the clicked point. You can use ol.proj.transform
to convert this into a latitude and longitude. Use the location to set a new Vector
of the starting
.
-
Add a click handler to the map. Inside, convert the clicked coordinates from the event object into latitude and longitude.
Use dark colors for code blocks olms.apply(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); // Add Esri attribution // Learn more in https://esriurl.com/attribution const source = map.getLayers().item(0).getSource(); source.setAttributions("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | ") }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); });
-
Create a new
Vector
forSource starting
, containing one feature. Construct thisPoint Layer Feature
with aol.geom.
, passing in the coordinate of the mouse click.Point The mouse click is in the same coordinate system as the map, so you do not need to transform.
Use dark colors for code blocks const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) );
-
At the top right, click Run.
When you click on the map, the white circle should move to each location that you click.
Get the service area
With the longitude and latitude of the click event, you can now call the service
function in the route service to get the service area.
-
Inside the click handler, create a new
arcgis
to access the route service. Call theRest. Api Key arcgis
with the transformed coordinates to calculate the service area.Rest.service Area 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
parameter.Breaks Use dark colors for code blocks startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) ); const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken); arcgisRest .serviceArea({ facilities: [coordinates], authentication })
Display the service area on the map
The response to the request contains the geographic information of the service areas. Use the sa
property to update the source of the service
.
-
Add a
then
handler. Inside, create aGeo
feature format that projects from EPSG:4326 to EPSG:3857. Use itsJSON read
function to convertFeatures sa
to an array of Features. Create aPolygons.geo Json Vector
with these features, and callSource set
onSource service
to apply it.Area Layer Use dark colors for code blocks arcgisRest .serviceArea({ facilities: [coordinates], authentication }) .then((response) => { const geojson = new ol.format.GeoJSON({ defaultDataProjection: "EPSG:4326", featureProjection: "EPSG:3857" }); const features = geojson.readFeatures(response.saPolygons.geoJson); const source = new ol.source.Vector({ features: features }); serviceAreaLayer.setSource(source); })
-
Add an error handler. Inside, show a message and write the error to the console.
Use dark colors for code blocks serviceAreaLayer.setSource(source); }) .catch((error) => { alert("There was a problem using the geocoder. See the console for details."); console.error(error); });
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 white circle. 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: