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 create and display five, ten, and fifteen minute drive time service areas when the map is clicked. You use data-driven styling to give each polygon a different shade of blue.

Prerequisites

You need an ArcGIS Location Platform or ArcGIS Online account.

Steps

Create a new pen

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

Get an access token

You need an access token with the correct privileges to access the resources used in this tutorial.

  1. Go to the Create an API key tutorial and create an API key with the following privilege(s):

    • Privileges
      • Location services > Basemaps
      • Location services > Routing
  2. Copy the API key access token to your clipboard when prompted.

  3. In CodePen, update the accessToken variable to use your access token.

    Use dark colors for code blocks
    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
          const map = L.map("map", {
            minZoom: 2
          })
    
          map.setView([34.02, -118.805], 13);
    
          const accessToken = "YOUR_ACCESS_TOKEN";
    
          const basemapEnum = "arcgis/streets";
    
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            token: accessToken
          }).addTo(map);
    

To learn about the other types of authentication available, go to Types of authentication.

Add references to ArcGIS REST JS

  1. Reference the routing and request packages from ArcGIS REST JS.

    Expand
    Use dark colors for code blocks
    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
        <!-- Load Leaflet from CDN -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
    
        <!-- Load Esri Leaflet from CDN -->
        <script src="https://unpkg.com/esri-leaflet@3.0.12/dist/esri-leaflet.js"></script>
        <script src="https://unpkg.com/esri-leaflet-vector@4.2.5/dist/esri-leaflet-vector.js"></script>
    
        <!-- Load ArcGIS REST JS from CDN -->
        <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-routing@4/dist/bundled/routing.umd.js"></script>
    
    Expand

Update the map

A navigation basemap layer is typically used in geocoding and routing applications. Update the basemap layer to use arcgis/navigation.

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

    Expand
    Use dark colors for code blocks
    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
          const accessToken = "YOUR_ACCESS_TOKEN";
    
          const basemapEnum = "arcgis/streets";
    
          const map = L.map("map", {
            minZoom: 2
          });
    
          map.setView([13.7367, 100.5231], 13); // Bangkok
    
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            token: accessToken
          }).addTo(map);
    
    Expand

Add layer groups

In this app, you display a marker for the starting point location and polygons for the service areas. Add a LayerGroup to display the point and polygons on the map.

  1. Add a LayerGroup for the clickedPoint and another for the serviceAreas.

    Expand
    Use dark colors for code blocks
    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
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            token: accessToken
          }).addTo(map);
    
          const clickedPoints = L.layerGroup().addTo(map);
          const serviceAreas = L.layerGroup().addTo(map);
    
    Expand

Add a click handler

When you click on the map, you will update the location of the clickedPoint and return a new service area.

  1. Add a click event handler. Inside, remove the data from the previous click with clearLayers.

    Expand
    Use dark colors for code blocks
    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
          const clickedPoints = L.layerGroup().addTo(map);
          const serviceAreas = L.layerGroup().addTo(map);
    
          map.on("click", (e) => {
            clickedPoints.clearLayers();
            serviceAreas.clearLayers();
    
          });
    
    Expand
  2. Display a Marker at the clicked location.

    Expand
    Use dark colors for code blocks
    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
          map.on("click", (e) => {
            clickedPoints.clearLayers();
            serviceAreas.clearLayers();
    
            L.marker(e.latlng).addTo(clickedPoints);
    
          });
    
    Expand

Get the service area

With the longitude and latitude of the click event, you can call the serviceArea function from ArcGIS REST JS to get the service area.

  1. Create a new ApiKeyManager to access the route service.

    Expand
    Use dark colors for code blocks
    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
          const clickedPoints = L.layerGroup().addTo(map);
          const serviceAreas = L.layerGroup().addTo(map);
    
          const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);
    
          map.on("click", (e) => {
            clickedPoints.clearLayers();
            serviceAreas.clearLayers();
    
            L.marker(e.latlng).addTo(clickedPoints);
    
          });
    
    Expand
  2. Call the serviceArea operation. Set the facilities parameter with the clicked coordinates to calculate the service area.

    Expand
    Use dark colors for code blocks
    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
          const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);
    
          map.on("click", (e) => {
            clickedPoints.clearLayers();
            serviceAreas.clearLayers();
    
            L.marker(e.latlng).addTo(clickedPoints);
    
            arcgisRest
              .serviceArea({
                endpoint: "https://route-api.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea",
                authentication,
                facilities: [[e.latlng.lng, e.latlng.lat]]
              })
    
          });
    
    Expand
  3. Add an error handler. Inside, show a message and write the error to the console.

    Expand
    Use dark colors for code blocks
    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
            arcgisRest
              .serviceArea({
                endpoint: "https://route-api.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea",
                authentication,
                facilities: [[e.latlng.lng, e.latlng.lat]]
              })
    
              .catch((error) => {
                console.error(error);
                alert("There was a problem using the route service. See the console for details.");
              });
    
    Expand

Display the service area on the map

The response to the request contains the geographic information of the service areas that you can access and display on the map.

  1. Add a response handler. Inside, add a GeoJSON layer that adds the features to the serviceAreas layer.

    Expand
    Use dark colors for code blocks
    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
            arcgisRest
              .serviceArea({
                endpoint: "https://route-api.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea",
                authentication,
                facilities: [[e.latlng.lng, e.latlng.lat]]
              })
    
              .then((response) => {
                L.geoJSON(response.saPolygons.geoJson, {
    
                }
                ).addTo(serviceAreas);
              })
    
              .catch((error) => {
                console.error(error);
                alert("There was a problem using the route service. See the console for details.");
              });
    
    Expand
  2. Style the different polygons using the FromBreak property to distinguish the 5, 10, and 15 minute drive time polygons.

    Expand
    Use dark colors for code blocks
    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
              .then((response) => {
                L.geoJSON(response.saPolygons.geoJson, {
    
                  style: (feature) => {
                    const style = {
                      fillOpacity: 0.5,
                      weight: 1
                    };
                    if (feature.properties.FromBreak === 0) {
                      style.color = "hsl(210, 80%, 40%)";
                    } else if (feature.properties.FromBreak === 5) {
                      style.color = "hsl(210, 80%, 60%)";
                    } else {
                      style.color = "hsl(210, 80%, 80%)";
                    }
                    return style;
                  }
    
                }
                ).addTo(serviceAreas);
              })
    
    Expand

Run the app

In CodePen, run your code to display the map.

When you click on the map, three service areas are shown as concentric polygons around a marker. 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.