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 account to access the developer dashboard and create an API key.

Steps

Create a new pen

To get started, either complete the Display a map tutorial or .

Set the 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 apiKey to use your key.

Use dark colors for code blocks

Change line
const apiKey = "YOUR_API_KEY";
const basemapId = "ArcGIS:Streets";
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
olms(map, basemapURL);

Add references to ArcGIS REST JS

In the <head> element, add references to the ArcGIS REST JS library.

Use dark colors for code blocks
Add line.Add line.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>OpenLayers Tutorials: Find service areas</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/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>

  </head>

  <body>

    <div id="map"></div>

    <div id="directions"></div>

    <script>

      const apiKey = "YOUR_API_KEY";
      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);

      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

        });

        map.addLayer(serviceAreaLayer);

      }

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

        map.addLayer(startingPointLayer);
        window.s = startingPointLayer;

      }

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms(map, basemapURL).then(function (map) {

        addServiceAreaLayer();
        addStartingPointLayer();

      });

      map.on("click", (e) => {

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

        const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

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


          .catch((error) => {
            alert("There was a problem using the geocoder. See the console for details.");
            console.error(error);
          });

      });

    </script>

  </body>

</html>

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.

Use dark colors for code blocks
Change lineChange line
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>OpenLayers Tutorials: Find service areas</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/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>

  </head>

  <body>

    <div id="map"></div>

    <div id="directions"></div>

    <script>

      const apiKey = "YOUR_API_KEY";
      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);

      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

        });

        map.addLayer(serviceAreaLayer);

      }

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

        map.addLayer(startingPointLayer);
        window.s = startingPointLayer;

      }

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms(map, basemapURL).then(function (map) {

        addServiceAreaLayer();
        addStartingPointLayer();

      });

      map.on("click", (e) => {

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

        const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

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


          .catch((error) => {
            alert("There was a problem using the geocoder. See the console for details.");
            console.error(error);
          });

      });

    </script>

  </body>

</html>

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;

Use dark colors for code blocks
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.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>OpenLayers Tutorials: Find service areas</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/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>

  </head>

  <body>

    <div id="map"></div>

    <div id="directions"></div>

    <script>

      const apiKey = "YOUR_API_KEY";
      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);

      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

        });

        map.addLayer(serviceAreaLayer);

      }

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

        map.addLayer(startingPointLayer);
        window.s = startingPointLayer;

      }

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms(map, basemapURL).then(function (map) {

        addServiceAreaLayer();
        addStartingPointLayer();

      });

      map.on("click", (e) => {

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

        const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

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


          .catch((error) => {
            alert("There was a problem using the geocoder. See the console for details.");
            console.error(error);
          });

      });

    </script>

  </body>

</html>

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

Use dark colors for code blocks
Add line.Add line.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>OpenLayers Tutorials: Find service areas</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/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>

  </head>

  <body>

    <div id="map"></div>

    <div id="directions"></div>

    <script>

      const apiKey = "YOUR_API_KEY";
      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);

      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

        });

        map.addLayer(serviceAreaLayer);

      }

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

        map.addLayer(startingPointLayer);
        window.s = startingPointLayer;

      }

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms(map, basemapURL).then(function (map) {

        addServiceAreaLayer();
        addStartingPointLayer();

      });

      map.on("click", (e) => {

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

        const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

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


          .catch((error) => {
            alert("There was a problem using the geocoder. See the console for details.");
            console.error(error);
          });

      });

    </script>

  </body>

</html>

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

Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>OpenLayers Tutorials: Find service areas</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/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>

  </head>

  <body>

    <div id="map"></div>

    <div id="directions"></div>

    <script>

      const apiKey = "YOUR_API_KEY";
      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);

      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

        });

        map.addLayer(serviceAreaLayer);

      }

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

        map.addLayer(startingPointLayer);
        window.s = startingPointLayer;

      }

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms(map, basemapURL).then(function (map) {

        addServiceAreaLayer();
        addStartingPointLayer();

      });

      map.on("click", (e) => {

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

        const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

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


          .catch((error) => {
            alert("There was a problem using the geocoder. See the console for details.");
            console.error(error);
          });

      });

    </script>

  </body>

</html>

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.

Use dark colors for code blocks
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.Add line.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>OpenLayers Tutorials: Find service areas</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/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>

  </head>

  <body>

    <div id="map"></div>

    <div id="directions"></div>

    <script>

      const apiKey = "YOUR_API_KEY";
      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);

      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

        });

        map.addLayer(serviceAreaLayer);

      }

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

        map.addLayer(startingPointLayer);
        window.s = startingPointLayer;

      }

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms(map, basemapURL).then(function (map) {

        addServiceAreaLayer();
        addStartingPointLayer();

      });

      map.on("click", (e) => {

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

        const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

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


          .catch((error) => {
            alert("There was a problem using the geocoder. See the console for details.");
            console.error(error);
          });

      });

    </script>

  </body>

</html>

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

Use dark colors for code blocks
Add line.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>OpenLayers Tutorials: Find service areas</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/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>

  </head>

  <body>

    <div id="map"></div>

    <div id="directions"></div>

    <script>

      const apiKey = "YOUR_API_KEY";
      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);

      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

        });

        map.addLayer(serviceAreaLayer);

      }

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

        map.addLayer(startingPointLayer);
        window.s = startingPointLayer;

      }

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms(map, basemapURL).then(function (map) {

        addServiceAreaLayer();
        addStartingPointLayer();

      });

      map.on("click", (e) => {

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

        const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

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


          .catch((error) => {
            alert("There was a problem using the geocoder. See the console for details.");
            console.error(error);
          });

      });

    </script>

  </body>

</html>

Display layers

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

Add a then handler to the existing olms(map, basemapURL) call. Inside, call addServiceAreaLayer and addStartingPointLayer.

Use dark colors for code blocks
Add line.Add line.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>OpenLayers Tutorials: Find service areas</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/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>

  </head>

  <body>

    <div id="map"></div>

    <div id="directions"></div>

    <script>

      const apiKey = "YOUR_API_KEY";
      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);

      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

        });

        map.addLayer(serviceAreaLayer);

      }

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

        map.addLayer(startingPointLayer);
        window.s = startingPointLayer;

      }

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms(map, basemapURL).then(function (map) {

        addServiceAreaLayer();
        addStartingPointLayer();

      });

      map.on("click", (e) => {

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

        const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

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


          .catch((error) => {
            alert("There was a problem using the geocoder. See the console for details.");
            console.error(error);
          });

      });

    </script>

  </body>

</html>

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.

Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>OpenLayers Tutorials: Find service areas</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/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>

  </head>

  <body>

    <div id="map"></div>

    <div id="directions"></div>

    <script>

      const apiKey = "YOUR_API_KEY";
      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);

      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

        });

        map.addLayer(serviceAreaLayer);

      }

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

        map.addLayer(startingPointLayer);
        window.s = startingPointLayer;

      }

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms(map, basemapURL).then(function (map) {

        addServiceAreaLayer();
        addStartingPointLayer();

      });

      map.on("click", (e) => {

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

        const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

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


          .catch((error) => {
            alert("There was a problem using the geocoder. See the console for details.");
            console.error(error);
          });

      });

    </script>

  </body>

</html>

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.

Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>OpenLayers Tutorials: Find service areas</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/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>

  </head>

  <body>

    <div id="map"></div>

    <div id="directions"></div>

    <script>

      const apiKey = "YOUR_API_KEY";
      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);

      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

        });

        map.addLayer(serviceAreaLayer);

      }

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

        map.addLayer(startingPointLayer);
        window.s = startingPointLayer;

      }

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms(map, basemapURL).then(function (map) {

        addServiceAreaLayer();
        addStartingPointLayer();

      });

      map.on("click", (e) => {

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

        const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

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


          .catch((error) => {
            alert("There was a problem using the geocoder. See the console for details.");
            console.error(error);
          });

      });

    </script>

  </body>

</html>

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

Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>OpenLayers Tutorials: Find service areas</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/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>

  </head>

  <body>

    <div id="map"></div>

    <div id="directions"></div>

    <script>

      const apiKey = "YOUR_API_KEY";
      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);

      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

        });

        map.addLayer(serviceAreaLayer);

      }

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

        map.addLayer(startingPointLayer);
        window.s = startingPointLayer;

      }

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms(map, basemapURL).then(function (map) {

        addServiceAreaLayer();
        addStartingPointLayer();

      });

      map.on("click", (e) => {

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

        const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

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


          .catch((error) => {
            alert("There was a problem using the geocoder. See the console for details.");
            console.error(error);
          });

      });

    </script>

  </body>

</html>

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.

Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>OpenLayers Tutorials: Find service areas</title>

    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/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>

  </head>

  <body>

    <div id="map"></div>

    <div id="directions"></div>

    <script>

      const apiKey = "YOUR_API_KEY";
      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);

      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

        });

        map.addLayer(serviceAreaLayer);

      }

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

        map.addLayer(startingPointLayer);
        window.s = startingPointLayer;

      }

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms(map, basemapURL).then(function (map) {

        addServiceAreaLayer();
        addStartingPointLayer();

      });

      map.on("click", (e) => {

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

        const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

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


          .catch((error) => {
            alert("There was a problem using the geocoder. See the console for details.");
            console.error(error);
          });

      });

    </script>

  </body>

</html>

Add an error handler. Inside, show a message and write the error to the console.
Use dark colors for code blocks