Learn how to calculate the area
A service area
To calculate service areas
In this tutorial, you use ArcGIS REST JS
Prerequisites
You need an ArcGIS Location Platform or ArcGIS Online account.
Steps
Get the starter app
Select a type of authentication and follow the steps to create a new app.
Choose API key authentication if you:
- Want the easiest way to get started.
- Want to build public applications
A public application is an application that allows anonymous access without requiring users to sign in with an ArcGIS account. It supports API key or app authentication. that access ArcGIS Location ServicesArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. and secure itemsAn item, also known as a content item, is a resource stored in a portal such as a web map, hosted layer, style, script tool, file, or notebook. . - Have an ArcGIS Location Platform or ArcGIS Online account.
Choose user authentication if you:
- Want to build private applications.
- Require application users to sign in with their own ArcGIS account
An ArcGIS account is an identity with a user type and set of privileges that can access specific ArcGIS products, tools, APIs, services, and resources. The main account types that can be used for development are an ArcGIS Location Platform account, ArcGIS Online account, and ArcGIS Enterprise account. ArcGIS Location Platform and ArcGIS Online accounts are also associated with a subscription. and access resources their behalf. - Have an ArcGIS Online account.
To learn more about both types of authentication, go to Authentication.
Set up authentication
Set developer credentials
Use the API key or OAuth developer credentials
Add references to ArcGIS REST JS
-
In the
<headelement, 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.9.0/ol.css"> <script src="https://cdn.jsdelivr.net/npm/ol@v10.9.0/dist/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@13.4.1/dist/olms.js"></script> <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>
Update the map
An arcgis/navigation basemap style
-
Update the basemap and the map initialization to center on location
[100.5231,13.7367], Bangkok.Use dark colors for code blocks Copy <script> /* Use for API key authentication */ const accessToken = "YOUR_ACCESS_TOKEN"; // or /* Use for user authentication */ // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({ // clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials // redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials // portal: "YOUR_PORTAL_URL" // Your portal URL // }) // const accessToken = session.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(); const poweredByEsriString = "Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | "; const attributionFn = source.getAttributions(); if (attributionFn) { source.setAttributions((ViewStateLayerStateExtent) => { return [poweredByEsriString, ...attributionFn(ViewStateLayerStateExtent)]; }); } else source.setAttributions(poweredByEsriString); }); </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 Vectorlayer. Use aLayer Circlestyle, with whiteFilland 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 addfunction.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 areasVector. 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
Fromproperty to choose a shade of blue. Use a black stroke. Pass the style function to theBreak Vectorconstructor.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 addfunction.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
olmsload handler, calladdandService 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(); const poweredByEsriString = "Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | "; const attributionFn = source.getAttributions(); if (attributionFn) { source.setAttributions((ViewStateLayerStateExtent) => { return [poweredByEsriString, ...attributionFn(ViewStateLayerStateExtent)]; }); } else source.setAttributions(poweredByEsriString); });
Get click location
Before you call the Service area serviceol.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(); const poweredByEsriString = "Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | "; const attributionFn = source.getAttributions(); if (attributionFn) { source.setAttributions((ViewStateLayerStateExtent) => { return [poweredByEsriString, ...attributionFn(ViewStateLayerStateExtent)]; }); } else source.setAttributions(poweredByEsriString); }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); }); -
Create a new
VectorforSource starting, containing one feature. Construct thisPoint Layer Featurewith 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
arcgisto access the route service. Call theRest. Api Key arcgiswith the transformed coordinates to calculate the service areaRest.service Area A service area is a polygon representing the distance that can be reached within a specified length of time while traveling in a street network. .The
facilitiesparameter 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
defaultparameter.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 areasa property to update the source of the service.
-
Add a
thenhandler. Inside, create aGeofeature format that projects from EPSG:4326 to EPSG:3857. Use itsJSON readfunction to convertFeatures sato an array of Features. Create aPolygons.geo Json Vectorwith these features, and callSource setonSource serviceto 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
Run the app.
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 location services in these tutorials:
