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
You need an ArcGIS Developer or ArcGIS Online account to access the developer dashboard and create an API key.
Steps
Create a new pen
- If you are using the CDN libraries, to get started.
Get an 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
apito use your key.Key
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
apiwith the API key from your dashboard.Key -
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.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>
<script>
/* when including ArcGIS REST JS all exports are available
from the same arcgisRest global */
const apiKey = "YOUR_API_KEY";
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
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: