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.

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.

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.

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@3.0.0/dist/umd/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-routing@3.0.0/dist/umd/routing.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.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 = new arcgisRest.ApiKey({
          key: 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.

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@3.0.0/dist/umd/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-routing@3.0.0/dist/umd/routing.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.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 = new arcgisRest.ApiKey({
          key: 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;

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@3.0.0/dist/umd/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-routing@3.0.0/dist/umd/routing.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.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 = new arcgisRest.ApiKey({
          key: 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.

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@3.0.0/dist/umd/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-routing@3.0.0/dist/umd/routing.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.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 = new arcgisRest.ApiKey({
          key: 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'.

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@3.0.0/dist/umd/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-routing@3.0.0/dist/umd/routing.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.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 = new arcgisRest.ApiKey({
          key: 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.

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@3.0.0/dist/umd/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-routing@3.0.0/dist/umd/routing.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.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 = new arcgisRest.ApiKey({
          key: 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.

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@3.0.0/dist/umd/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-routing@3.0.0/dist/umd/routing.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.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 = new arcgisRest.ApiKey({
          key: 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.

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@3.0.0/dist/umd/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-routing@3.0.0/dist/umd/routing.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.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 = new arcgisRest.ApiKey({
          key: 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.

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@3.0.0/dist/umd/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-routing@3.0.0/dist/umd/routing.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.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 = new arcgisRest.ApiKey({
          key: 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.

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@3.0.0/dist/umd/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-routing@3.0.0/dist/umd/routing.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.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 = new arcgisRest.ApiKey({
          key: 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.

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@3.0.0/dist/umd/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-routing@3.0.0/dist/umd/routing.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.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 = new arcgisRest.ApiKey({
          key: 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.

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@3.0.0/dist/umd/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-routing@3.0.0/dist/umd/routing.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.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 = new arcgisRest.ApiKey({
          key: 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);
          })