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

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

  1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

  2. In CodePen, update apiKey to use your key.

              
    Change line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //
    
    const apiKey = "YOUR_API_KEY";
    const basemapEnum = "ArcGIS:Streets";
    const map = new mapboxgl.Map({
      container: "map", // the id of the div element
      style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
      zoom: 12, // starting zoom
      center: [-118.805, 34.027] // starting location [longitude, latitude]
    });
    

Reference the ArcGIS REST JS

  1. Add links to the ArcGIS REST JS libraries in the <script> section.

                                                                                                                                              
    Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
        <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>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
        </style>
      </head>
    
      <body>
        <div id="map"></div>
        <script>
          const apiKey = "YOUR_API_KEY";
          const basemapEnum = "ArcGIS:Navigation";
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 12, // starting zoom
            center: [100.5231,13.7367] // Bangkok
          function addServiceAreaLayer() {
            map.addSource("servicearea", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "servicearea-fill",
              type: "fill",
              source: "servicearea",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "FromBreak"],
                  0,
                  "hsl(210, 80%, 40%)",
                  5,
                  "hsl(210, 80%, 60%)",
                  10,
                  "hsl(210, 80%, 80%)",
                  "transparent"
                "fill-outline-color": "black",
                "fill-opacity": 0.5
          function addStartingPointLayer() {
            map.addSource("start", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "start-circle",
              type: "circle",
              source: "start",
              paint: {
                "circle-radius": 6,
                "circle-color": "white",
                "circle-stroke-color": "black",
                "circle-stroke-width": 2
          map.on("load", () => {
          map.on("click", (e) => {
            const coordinates = e.lngLat.toArray();
            const point = {
              type: "Point",
            map.getSource("start").setData(point);
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
                facilities: [coordinates]
              .then((response) => {
                map.getSource("servicearea").setData(response.saPolygons.geoJson);
        </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.

  1. Update the basemap and the map initialization to center on location [100.5231,13.7367], Bangkok.

                                                                                                                                              
    Change lineChange line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
        <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>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
        </style>
      </head>
    
      <body>
        <div id="map"></div>
        <script>
          const apiKey = "YOUR_API_KEY";
    
          const basemapEnum = "ArcGIS:Navigation";
    
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 12, // starting zoom
    
            center: [100.5231,13.7367] // Bangkok
    
          });
          function addServiceAreaLayer() {
            map.addSource("servicearea", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "servicearea-fill",
              type: "fill",
              source: "servicearea",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "FromBreak"],
                  0,
                  "hsl(210, 80%, 40%)",
                  5,
                  "hsl(210, 80%, 60%)",
                  10,
                  "hsl(210, 80%, 80%)",
                  "transparent"
                "fill-outline-color": "black",
                "fill-opacity": 0.5
          function addStartingPointLayer() {
            map.addSource("start", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "start-circle",
              type: "circle",
              source: "start",
              paint: {
                "circle-radius": 6,
                "circle-color": "white",
                "circle-stroke-color": "black",
                "circle-stroke-width": 2
          map.on("load", () => {
          map.on("click", (e) => {
            const coordinates = e.lngLat.toArray();
            const point = {
              type: "Point",
            map.getSource("start").setData(point);
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
                facilities: [coordinates]
              .then((response) => {
                map.getSource("servicearea").setData(response.saPolygons.geoJson);
        </script>
      </body>
    </html>

Add a starting point layer

Add a source and a layer to show a white circle for the starting point of the calculation. This will show the user where they clicked.

  1. Start a new function called addStartingPointLayer()

                                                                                                                                              
    Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
        <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>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
        </style>
      </head>
    
      <body>
        <div id="map"></div>
        <script>
          const apiKey = "YOUR_API_KEY";
          const basemapEnum = "ArcGIS:Navigation";
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 12, // starting zoom
            center: [100.5231,13.7367] // Bangkok
    
          });
    
          function addServiceAreaLayer() {
            map.addSource("servicearea", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "servicearea-fill",
              type: "fill",
              source: "servicearea",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "FromBreak"],
                  0,
                  "hsl(210, 80%, 40%)",
                  5,
                  "hsl(210, 80%, 60%)",
                  10,
                  "hsl(210, 80%, 80%)",
                  "transparent"
                "fill-outline-color": "black",
                "fill-opacity": 0.5
          function addStartingPointLayer() {
    
            map.addSource("start", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "start-circle",
              type: "circle",
              source: "start",
              paint: {
                "circle-radius": 6,
                "circle-color": "white",
                "circle-stroke-color": "black",
                "circle-stroke-width": 2
          }
          map.on("load", () => {
          map.on("click", (e) => {
            const coordinates = e.lngLat.toArray();
            const point = {
              type: "Point",
            map.getSource("start").setData(point);
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
                facilities: [coordinates]
              .then((response) => {
                map.getSource("servicearea").setData(response.saPolygons.geoJson);
        </script>
      </body>
    </html>
  2. Add a GeoJSON source with id start. Set the data attribute to an empty FeatureCollection.

    This source will later contain the geometry information of the start or end point that the user has selected. For now, you can simply provide it with an empty piece of GeoJSON: a feature collection that contains no features.

                                                                                                                                              
    Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
        <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>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
        </style>
      </head>
    
      <body>
        <div id="map"></div>
        <script>
          const apiKey = "YOUR_API_KEY";
          const basemapEnum = "ArcGIS:Navigation";
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 12, // starting zoom
            center: [100.5231,13.7367] // Bangkok
          function addServiceAreaLayer() {
            map.addSource("servicearea", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "servicearea-fill",
              type: "fill",
              source: "servicearea",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "FromBreak"],
                  0,
                  "hsl(210, 80%, 40%)",
                  5,
                  "hsl(210, 80%, 60%)",
                  10,
                  "hsl(210, 80%, 80%)",
                  "transparent"
                "fill-outline-color": "black",
                "fill-opacity": 0.5
          function addStartingPointLayer() {
    
            map.addSource("start", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              }
    
              id: "start-circle",
              type: "circle",
              source: "start",
              paint: {
                "circle-radius": 6,
                "circle-color": "white",
                "circle-stroke-color": "black",
                "circle-stroke-width": 2
          }
          map.on("load", () => {
          map.on("click", (e) => {
            const coordinates = e.lngLat.toArray();
            const point = {
              type: "Point",
            map.getSource("start").setData(point);
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
                facilities: [coordinates]
              .then((response) => {
                map.getSource("servicearea").setData(response.saPolygons.geoJson);
        </script>
      </body>
    </html>
  3. Add a circle layer with id start-circle, connected to the start source. Set the paint properties to make it white with a black outline.

                                                                                                                                              
    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.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
        <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>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
        </style>
      </head>
    
      <body>
        <div id="map"></div>
        <script>
          const apiKey = "YOUR_API_KEY";
          const basemapEnum = "ArcGIS:Navigation";
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 12, // starting zoom
            center: [100.5231,13.7367] // Bangkok
          function addServiceAreaLayer() {
            map.addSource("servicearea", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "servicearea-fill",
              type: "fill",
              source: "servicearea",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "FromBreak"],
                  0,
                  "hsl(210, 80%, 40%)",
                  5,
                  "hsl(210, 80%, 60%)",
                  10,
                  "hsl(210, 80%, 80%)",
                  "transparent"
                "fill-outline-color": "black",
                "fill-opacity": 0.5
          function addStartingPointLayer() {
    
            map.addSource("start", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              }
    
          });
            map.addLayer({
              id: "start-circle",
              type: "circle",
              source: "start",
    
              paint: {
                "circle-radius": 6,
                "circle-color": "white",
                "circle-stroke-color": "black",
                "circle-stroke-width": 2
              }
            });
    
          }
          map.on("load", () => {
          map.on("click", (e) => {
            const coordinates = e.lngLat.toArray();
            const point = {
              type: "Point",
            map.getSource("start").setData(point);
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
                facilities: [coordinates]
              .then((response) => {
                map.getSource("servicearea").setData(response.saPolygons.geoJson);
        </script>
      </body>
    </html>

Add service area layer

To show the service area, you will use a fill layer to display a GeoJSON source. Each polygon has a property called FromBreak which contains the lower bound of the number of minutes of travel: 0, 5 and 10 minutes. You can use an expression for the fill-color to display each polygon in a different shade of blue.

  1. Start a new function called addServiceAreaLayer().

                                                                                                                                              
    Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
        <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>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
        </style>
      </head>
    
      <body>
        <div id="map"></div>
        <script>
          const apiKey = "YOUR_API_KEY";
          const basemapEnum = "ArcGIS:Navigation";
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 12, // starting zoom
            center: [100.5231,13.7367] // Bangkok
    
          });
    
          function addServiceAreaLayer() {
    
            map.addSource("servicearea", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "servicearea-fill",
              type: "fill",
              source: "servicearea",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "FromBreak"],
                  0,
                  "hsl(210, 80%, 40%)",
                  5,
                  "hsl(210, 80%, 60%)",
                  10,
                  "hsl(210, 80%, 80%)",
                  "transparent"
                "fill-outline-color": "black",
                "fill-opacity": 0.5
          }
          function addStartingPointLayer() {
            map.addSource("start", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "start-circle",
              type: "circle",
              source: "start",
              paint: {
                "circle-radius": 6,
                "circle-color": "white",
                "circle-stroke-color": "black",
                "circle-stroke-width": 2
          map.on("load", () => {
          map.on("click", (e) => {
            const coordinates = e.lngLat.toArray();
            const point = {
              type: "Point",
            map.getSource("start").setData(point);
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
                facilities: [coordinates]
              .then((response) => {
                map.getSource("servicearea").setData(response.saPolygons.geoJson);
        </script>
      </body>
    </html>
  2. Add a GeoJSON source for the service area, with id servicearea. Set the data attribute of each source to be an empty FeatureCollection.

    This source will later contain the geometry information of the service area. For now, you can simply provide it with an empty piece of GeoJSON: a feature collection that contains no features.

                                                                                                                                              
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
        <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>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
        </style>
      </head>
    
      <body>
        <div id="map"></div>
        <script>
          const apiKey = "YOUR_API_KEY";
          const basemapEnum = "ArcGIS:Navigation";
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 12, // starting zoom
            center: [100.5231,13.7367] // Bangkok
          function addServiceAreaLayer() {
    
            map.addSource("servicearea", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              }
            });
    
              id: "servicearea-fill",
              type: "fill",
              source: "servicearea",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "FromBreak"],
                  0,
                  "hsl(210, 80%, 40%)",
                  5,
                  "hsl(210, 80%, 60%)",
                  10,
                  "hsl(210, 80%, 80%)",
                  "transparent"
                "fill-outline-color": "black",
                "fill-opacity": 0.5
          }
          function addStartingPointLayer() {
            map.addSource("start", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "start-circle",
              type: "circle",
              source: "start",
              paint: {
                "circle-radius": 6,
                "circle-color": "white",
                "circle-stroke-color": "black",
                "circle-stroke-width": 2
          map.on("load", () => {
          map.on("click", (e) => {
            const coordinates = e.lngLat.toArray();
            const point = {
              type: "Point",
            map.getSource("start").setData(point);
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
                facilities: [coordinates]
              .then((response) => {
                map.getSource("servicearea").setData(response.saPolygons.geoJson);
        </script>
      </body>
    </html>
  3. Add a layer of type fill to display the service area polygons, connected to the servicearea source. Use a match expression for the fill-color to show each polygon in a different shade of blue: darkest for shortest time, and lightest for longest time.

    The match expression is like a switch statement: it compares the value of the FromBreak property of each polygon feature, and compares it against the values 0, 5 or 10. If it matches, the corresponding color becomes the fill-color. Otherwise, the last value, transparent is used.

                                                                                                                                              
    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.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
        <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>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
        </style>
      </head>
    
      <body>
        <div id="map"></div>
        <script>
          const apiKey = "YOUR_API_KEY";
          const basemapEnum = "ArcGIS:Navigation";
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 12, // starting zoom
            center: [100.5231,13.7367] // Bangkok
          function addServiceAreaLayer() {
    
            map.addSource("servicearea", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              }
            });
    
            map.addLayer({
              id: "servicearea-fill",
              type: "fill",
              source: "servicearea",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "FromBreak"],
                  0,
                  "hsl(210, 80%, 40%)",
                  5,
                  "hsl(210, 80%, 60%)",
                  10,
                  "hsl(210, 80%, 80%)",
                  "transparent"
                ],
                "fill-outline-color": "black",
                "fill-opacity": 0.5
              }
            });
    
          }
          function addStartingPointLayer() {
            map.addSource("start", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "start-circle",
              type: "circle",
              source: "start",
              paint: {
                "circle-radius": 6,
                "circle-color": "white",
                "circle-stroke-color": "black",
                "circle-stroke-width": 2
          map.on("load", () => {
          map.on("click", (e) => {
            const coordinates = e.lngLat.toArray();
            const point = {
              type: "Point",
            map.getSource("start").setData(point);
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
                facilities: [coordinates]
              .then((response) => {
                map.getSource("servicearea").setData(response.saPolygons.geoJson);
        </script>
      </body>
    </html>

Add a load event handler

You need to use the load event to ensure the map is fully loaded, before adding your layers.

  1. Add an event handler to the map load event. Call the addServiceAreaLayer() and addStartingPointLayer() functions here.

    The order in which layers are added to the map is the order in which they will be displayed: layers added later are displayed over the top. Therefore, to have the starting point layer remain visible, you should add it after the service area layer.

                                                                                                                                              
    Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
        <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>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
        </style>
      </head>
    
      <body>
        <div id="map"></div>
        <script>
          const apiKey = "YOUR_API_KEY";
          const basemapEnum = "ArcGIS:Navigation";
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 12, // starting zoom
            center: [100.5231,13.7367] // Bangkok
          function addServiceAreaLayer() {
            map.addSource("servicearea", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "servicearea-fill",
              type: "fill",
              source: "servicearea",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "FromBreak"],
                  0,
                  "hsl(210, 80%, 40%)",
                  5,
                  "hsl(210, 80%, 60%)",
                  10,
                  "hsl(210, 80%, 80%)",
                  "transparent"
                "fill-outline-color": "black",
                "fill-opacity": 0.5
          function addStartingPointLayer() {
            map.addSource("start", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "start-circle",
              type: "circle",
              source: "start",
              paint: {
                "circle-radius": 6,
                "circle-color": "white",
                "circle-stroke-color": "black",
                "circle-stroke-width": 2
              }
            });
    
          }
    
          map.on("load", () => {
            addServiceAreaLayer();
            addStartingPointLayer();
          });
          map.on("click", (e) => {
            const coordinates = e.lngLat.toArray();
            const point = {
              type: "Point",
            map.getSource("start").setData(point);
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
                facilities: [coordinates]
              .then((response) => {
                map.getSource("servicearea").setData(response.saPolygons.geoJson);
        </script>
      </body>
    </html>

Add a click handler

When you click on the map, you will update the location of the startingpoint source data to show the starting point location.

  1. Add a click handler to the map.

                                                                                                                                              
    Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
        <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>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
        </style>
      </head>
    
      <body>
        <div id="map"></div>
        <script>
          const apiKey = "YOUR_API_KEY";
          const basemapEnum = "ArcGIS:Navigation";
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 12, // starting zoom
            center: [100.5231,13.7367] // Bangkok
          function addServiceAreaLayer() {
            map.addSource("servicearea", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "servicearea-fill",
              type: "fill",
              source: "servicearea",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "FromBreak"],
                  0,
                  "hsl(210, 80%, 40%)",
                  5,
                  "hsl(210, 80%, 60%)",
                  10,
                  "hsl(210, 80%, 80%)",
                  "transparent"
                "fill-outline-color": "black",
                "fill-opacity": 0.5
          function addStartingPointLayer() {
            map.addSource("start", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "start-circle",
              type: "circle",
              source: "start",
              paint: {
                "circle-radius": 6,
                "circle-color": "white",
                "circle-stroke-color": "black",
                "circle-stroke-width": 2
          map.on("load", () => {
            addServiceAreaLayer();
            addStartingPointLayer();
          });
    
          map.on("click", (e) => {
    
            const coordinates = e.lngLat.toArray();
            const point = {
              type: "Point",
            map.getSource("start").setData(point);
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
                facilities: [coordinates]
              .then((response) => {
                map.getSource("servicearea").setData(response.saPolygons.geoJson);
          });
        </script>
      </body>
    </html>
  2. Use the lngLat property of the event parameter to construct a GeoJSON point. Update the geometry information of the start source with it.

    The object passed to the click event contains several useful properties, including:

    • lngLat: the map location where the click took place.

    • point: the screen location in pixels where the click took place.

    • originalEvent: the DOM event, which contains information about modifier keys.

      For more information, see the Mapbox GL JS documentation.

                                                                                                                                              
    Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
        <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>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
        </style>
      </head>
    
      <body>
        <div id="map"></div>
        <script>
          const apiKey = "YOUR_API_KEY";
          const basemapEnum = "ArcGIS:Navigation";
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 12, // starting zoom
            center: [100.5231,13.7367] // Bangkok
          function addServiceAreaLayer() {
            map.addSource("servicearea", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "servicearea-fill",
              type: "fill",
              source: "servicearea",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "FromBreak"],
                  0,
                  "hsl(210, 80%, 40%)",
                  5,
                  "hsl(210, 80%, 60%)",
                  10,
                  "hsl(210, 80%, 80%)",
                  "transparent"
                "fill-outline-color": "black",
                "fill-opacity": 0.5
          function addStartingPointLayer() {
            map.addSource("start", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "start-circle",
              type: "circle",
              source: "start",
              paint: {
                "circle-radius": 6,
                "circle-color": "white",
                "circle-stroke-color": "black",
                "circle-stroke-width": 2
          map.on("load", () => {
          map.on("click", (e) => {
    
            const coordinates = e.lngLat.toArray();
            const point = {
              type: "Point",
              coordinates
            };
            map.getSource("start").setData(point);
    
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
                facilities: [coordinates]
              .then((response) => {
                map.getSource("servicearea").setData(response.saPolygons.geoJson);
          });
        </script>
      </body>
    </html>
  3. 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 coordinates of the click event, you can now call the serviceArea function in the route service to get the service area.

  1. Inside the click handler, create a new arcgisRest.ApiKey to access the route service. Call the ArcGIS REST API endpoint with the clicked 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.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
        <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>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
        </style>
      </head>
    
      <body>
        <div id="map"></div>
        <script>
          const apiKey = "YOUR_API_KEY";
          const basemapEnum = "ArcGIS:Navigation";
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 12, // starting zoom
            center: [100.5231,13.7367] // Bangkok
          function addServiceAreaLayer() {
            map.addSource("servicearea", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "servicearea-fill",
              type: "fill",
              source: "servicearea",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "FromBreak"],
                  0,
                  "hsl(210, 80%, 40%)",
                  5,
                  "hsl(210, 80%, 60%)",
                  10,
                  "hsl(210, 80%, 80%)",
                  "transparent"
                "fill-outline-color": "black",
                "fill-opacity": 0.5
          function addStartingPointLayer() {
            map.addSource("start", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "start-circle",
              type: "circle",
              source: "start",
              paint: {
                "circle-radius": 6,
                "circle-color": "white",
                "circle-stroke-color": "black",
                "circle-stroke-width": 2
          map.on("load", () => {
          map.on("click", (e) => {
            const coordinates = e.lngLat.toArray();
            const point = {
              type: "Point",
            map.getSource("start").setData(point);
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
            });
    
            arcgisRest
              .serviceArea({
                authentication,
                facilities: [coordinates]
              })
              .then((response) => {
                map.getSource("servicearea").setData(response.saPolygons.geoJson);
        </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 servicearea source.

  1. Use Map.getSource to access the servicearea source. Call setData to update the data with the GeoJSON returned from the API.

                                                                                                                                              
    Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
        <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>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
        </style>
      </head>
    
      <body>
        <div id="map"></div>
        <script>
          const apiKey = "YOUR_API_KEY";
          const basemapEnum = "ArcGIS:Navigation";
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 12, // starting zoom
            center: [100.5231,13.7367] // Bangkok
          function addServiceAreaLayer() {
            map.addSource("servicearea", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "servicearea-fill",
              type: "fill",
              source: "servicearea",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "FromBreak"],
                  0,
                  "hsl(210, 80%, 40%)",
                  5,
                  "hsl(210, 80%, 60%)",
                  10,
                  "hsl(210, 80%, 80%)",
                  "transparent"
                "fill-outline-color": "black",
                "fill-opacity": 0.5
          function addStartingPointLayer() {
            map.addSource("start", {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              id: "start-circle",
              type: "circle",
              source: "start",
              paint: {
                "circle-radius": 6,
                "circle-color": "white",
                "circle-stroke-color": "black",
                "circle-stroke-width": 2
          map.on("load", () => {
          map.on("click", (e) => {
            const coordinates = e.lngLat.toArray();
            const point = {
              type: "Point",
            map.getSource("start").setData(point);
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
            arcgisRest
              .serviceArea({
                authentication,
                facilities: [coordinates]
              })
    
              .then((response) => {
    
                map.getSource("servicearea").setData(response.saPolygons.geoJson);
    
              });
        </script>
      </body>
    </html>
  2. At the top right, click Run.

When you click on the map, three service areas are shown as concentric polygons around a white circle. These indicate the areas that can be reached by driving for 5, 10 or 15 minutes.

What's next?

Learn how to use additional ArcGIS location services in these tutorials:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.