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 a area that can be reached from a location within a drive time with the route service.
Prerequisites
This tutorial requires an ArcGIS Location Platform or ArcGIS Online account.
Steps
Create a new pen
- If you are using the CDN libraries, to get started.
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 > Routing
- Privileges:
-
Copy the API key access token to your clipboard when prompted.
-
In CodePen, update the
accessvariable to use your access token.Token Use dark colors for code blocks Copy const accessToken = "YOUR_ACCESS_TOKEN"; const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);
To learn about the other types of authentication available, go to Types of authentication.
Make the request
Copy and paste the code below, following the steps to make a request to the Routing service.
-
Reference the ArcGIS REST JS libraries either through CDN, ES Modules, or Node JS.
-
- Set the
accesswith an API key access token from API key credentials.Token
- Set the
-
Define the parameters needed for the request.
-
Call the Routing service and handle the results.
<!-- require ArcGIS REST JS libraries from https://unpkg.com -->
<script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
<script src="https://unpkg.com/@esri/arcgis-rest-routing@4/dist/bundled/routing.umd.js"></script>
<script>
/* when including ArcGIS REST JS all exports are available
from the same arcgisRest global */
const accessToken = "YOUR_ACCESS_TOKEN";
const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);
arcgisRest
.serviceArea({
facilities: [
[-123.1171, 49.2818] // Vancouver
],
authentication
})
.then((response) => {
console.log(response);
document.getElementById("result").textContent = JSON.stringify(response, null, 2);
});
</script>
Result
Below is the response from the service:
{
"messages": [],
"saPolygons": {
"geometryType": "esriGeometryPolygon",
"spatialReference": {
"wkid": 4326,
"latestWkid": 4326
},
"features": [
{
"attributes": {
"ObjectID": 1,
"FacilityID": 1,
"Name": "Location 1 : 10 - 15",
"FromBreak": 10,
"ToBreak": 15,
"Shape_Length": 1.8343392272037797,
"Shape_Area": 0.008541652586953032
},
"geometry": {
"rings": [
[
[-123.10635981999997, 49.35633154900006],
[-123.10613524299998, 49.35633154900006],
[-123.10546150899995, 49.355433238000046],
[-123.10523693099998, 49.355433238000046],
[-123.10568608699998, 49.35363661500003],
[-123.10388946499995, 49.353412037000055],
[-123.10299115299995, 49.35228914800007],
[-123.10254199799999, 49.35071710400007],
What's next?
Learn how to use additional ArcGIS location services in these tutorials: