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

An ArcGIS Location Platform or ArcGIS Online account.

Steps

Get the starter app

Select a type of authentication below and follow the steps to create a new application.

You can choose one of the following to create a new CodePen:

Option 1: Complete the Display a map tutorial; or,
Option 2: Start from the Display a map tutorial .

Set up authentication

Create developer credentials in your portal for the type of authentication you selected.

Create a new API key credential 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.

Set developer credentials

Use the API key or OAuth developer credentials so your application can access location services.

Update the accessToken variable to use your API key.

Expand
Use dark colors for code blocks
    /* Use for API key authentication */
    const accessToken = "YOUR_ACCESS_TOKEN";
Expand

In both the index.html and callback.html files, replace YOUR_CLIENT_ID and YOUR_REDIRECT_URL with the client ID and redirect URL of your OAuth credentials.

index.html
Use dark colors for code blocks
    /* Use for user authentication */
    const clientId = "YOUR_CLIENT_ID"; // Your client ID from OAuth credentials
    const redirectUri = "YOUR_REDIRECT_URI"; // The redirect URL registered in your OAuth credentials
    const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
        clientId,
        redirectUri,
        portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
    })

    const accessToken = session.token;

callback.html
Use dark colors for code blocks
    arcgisRest.ArcGISIdentityManager.completeOAuth2({
      clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
      redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
      portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
    })

Run the app and ensure you can sign in successfully.

If you are unable to sign in, make sure you have the correct redirect URL and port. This URL varies based on your application and typically takes the format of https://<server>[:port]/callback.html or http://my-arcgis-app:/auth. For example, if you are running an application on http://127.0.0.1:5500/, set http://127.0.0.1:5500/callback.html as your redirect URL in the index.html and callback.html file and your developer credential. They all have to match!

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.5.0/ol.css" type="text/css" />
  <script src="https://cdn.jsdelivr.net/npm/ol@v10.5.0/dist/ol.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@12.5.0/dist/olms.js" type="text/javascript"></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>
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>

    /* 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>
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();
      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);

    });
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();
      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");


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

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