Find service areas

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
Copy the API key access token to your clipboard when prompted.

In CodePen, update the accessToken variable to use your access 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.

Expand
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>
Expand

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.

Expand
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>
Expand

Create a starting point layer

Add a VectorLayer to show the user where they clicked, with a white circle and black outline.

Add a function called addStartingPointLayer. Inside, create a VectorLayer layer. Use a Circle style, with white Fill and black Stroke. Store the layer in a variable called startingPointLayer;

Expand
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 })
            })
          })
        });

      }
Expand

After creating the VectorLayer, add it to the map using the addLayer function.

Expand
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;
Expand

Create service area layer

To show the service areas, you will use another VectorLayer. Each service area feature has a property called FromBreak 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 addServiceAreaLayer(). Store the layer as a variable called 'serviceAreaLayer'.

Expand
Use dark colors for code blocks
      map.setView(view);

      let serviceAreaLayer;
      function addServiceAreaLayer() {

        serviceAreaLayer = new ol.layer.Vector({

        });

      }
Expand

Create a function which takes a feature and returns a fill style. Use the FromBreak property to choose a shade of blue. Use a black stroke. Pass the style function to the VectorLayer constructor.

Expand
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

        });

      }
Expand

After creating the VectorLayer, add it to the map using the addLayer function.

Expand
Use dark colors for code blocks
        serviceAreaLayer = new ol.layer.Vector({

          style: style

        });

        map.addLayer(serviceAreaLayer);
Expand

Display layers

Use the load handler to display your layers when the map is ready.

Inside olms load handler, call addServiceAreaLayer and addStartingPointLayer.

Expand
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> | ")

      });
Expand

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 VectorSource of the startingPointLayer.

Add a click handler to the map. Inside, convert the clicked coordinates from the event object into latitude and longitude.

Expand
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");


      });
Expand

Create a new VectorSource for startingPointLayer, containing one feature. Construct this Feature with a ol.geom.Point, passing in the coordinate of the mouse click.

The mouse click is in the same coordinate system as the map, so you do not need to transform.

Expand
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))]
          })
        );
Expand

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 serviceArea function in the route service to get the service area.

Inside the click handler, create a new arcgisRest.ApiKey to access the route service. Call the arcgisRest.serviceArea with the transformed coordinates to calculate the 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 defaultBreaks parameter.

Expand
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
          })
Expand

Display the service area on the map

The response to the request contains the geographic information of the service areas. Use the saPolygons.geoJson property to update the source of the serviceAreaLayer.

Add a then handler. Inside, create a GeoJSON feature format that projects from EPSG:4326 to EPSG:3857. Use its readFeatures function to convert saPolygons.geoJson to an array of Features. Create a VectorSource with these features, and call setSource on serviceAreaLayer to apply it.

Expand
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);
          })
Expand

Add an error handler. Inside, show a message and write the error to the console.

Expand
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);
          });
Expand

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:

Search for an address

Find an address or place using a search box and the geocoding service.

Find nearby places and details

Find points of interest near a location and get detailed information about them

Find a route and directions

Find a route and directions with the route service.