Find service areas
Learn how to calculate the area that can be reached in a given drive 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 Service area 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.
To learn how to find a route and directions to different locations, visit the Get a route and directions tutorial.
Prerequisites
You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.
Steps
Create a new pen
- To get started, either complete the Display a map tutorial or .
Set the API key
To access ArcGIS services, you need an API key.
Go to your dashboard to get an API key.
In CodePen, set the
apiKey
to your key, so it can be used to access basemap layer and location services.Change line esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-topographic" //Basemap layer service });
Add modules
In the
require
statement, add theServiceAreaTask
,ServiceAreaParameters
,FeatureSet
, andGraphic
modules.The ArcGIS API for JavaScript uses AMD modules. The
require
function is used to load modules so they can be used in the mainfunction
. It's important to keep the module references and function parameters in the same order.Add line. Add line. Add line. Add line. Change line <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Update the map
A streets basemap layer is typically used in routing applications. Update the basemap
property to use the arcgis-navigation
basemap layer and change the position of the map to center on Osaka.
Update the
basemap
property fromarcgis-topographic
toarcgis-navigation
.Change line <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Change the
zoom
andcenter
properties to center on Osaka.Change line Change line <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Create the service area task
A task makes a request to a service and returns the results. Use the ServiceAreaTask
class to access the Service area service.
Create a
ServiceAreaTask
and set theurl
property to reference the service.Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Add a point graphic
Use a point graphic to display the location (facility) for the service area starting point.
Add a
click
handler to add a point graphic to theview
.Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Create a
createGraphic
function that takes a point as a parameter and returns a whiteGraphic
. It should remove all graphics each time.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. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Update the
click
handler to call thecreateGraphic
function and store the graphic inlocationGraphic
.Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Click on the map to see a point graphic.
Create service task parameters
A ServiceAreaTask
uses drive times (cutoffs) and spatial reference parameters to calculate the service area. It also uses a FeatureSet
to set the facilities
(location) from where the service area polygon will be drawn. Use a click
handler in the View
to set the parameters required to create the service area.
Create a
createServiceAreaParams
function that takes point graphic, drive time, and spatial reference parameters.Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Create a
FeatureSet
to set thefeatures
property with the point graphic.Add line. Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Create a
ServiceAreaParams
and return thetaskParameters
element.Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Update the click handler to add drive time cutoffs of 5, 10, and 15 minutes and to call the
createServiceAreaParams
function.Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Execute the service area task
To execute the task, pass the serviceAreaParams
to the solve
method. Use a executeServiceAreaTask
function to find the service area polygon and add the resulting graphic to the view
.
Create a
executeServiceAreaTask
function.Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Call the
solve
method to find the service area and add the results to theview
.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. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Update the
click
handler to execute the area task.Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find service areas</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/ServiceAreaTask", "esri/tasks/support/ServiceAreaParameters", "esri/tasks/support/FeatureSet", "esri/Graphic" ], function(esriConfig,Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaTask = new ServiceAreaTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea" }); view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); executeServiceAreaTask(serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function executeServiceAreaTask(serviceAreaParams) { return serviceAreaTask.solve(serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Run the app
In CodePen, run your code to display the map.
Click on the map to create service areas. When you click on the map, you will see a point graphic along with drive time service areas. The service areas represent the area that can be reached within 5, 10, and 15 minutes.
What's next?
Learn how to use additional API features and ArcGIS services in these tutorials: