Find service areas

Learn how to calculate the areaA service area is a polygon representing the distance that can be reached within a specified length of time while traveling in a street network.Learn more that can be reached in a given driving time from a location.

A service areaA service area is a polygon representing the distance that can be reached within a specified length of time while traveling in a street network.Learn more, 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 areasA service area is a polygon representing the distance that can be reached within a specified length of time while traveling in a street network.Learn more, you can use the ArcGIS Routing serviceA routing service is a service that uses network analysis and streets data to calculate the most effective path and turn-by-turn directions on a street network, optimize fleet routing and deliveries, find the closest facilities, calculate service areas, and more. It is hosted by Esri as the ArcGIS Routing service and can also be hosted in ArcGIS Enterprise.Learn more. You provide a start locationA location is a position or region (point, line, or polygon) on the earth's surface.Learn more (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

Steps

Get the starter app

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

Set up authentication

Set developer credentials

Use the API key or OAuth developer credentialsDeveloper credentials are a type of item in a portal that contains parameters for authentication. There are two types of developer credentials: API key credentials and OAuth credentials.Learn more so your application can access ArcGIS servicesA service, also known as an ArcGIS service, is software that supports an ArcGIS REST API and provides geospatial functionality or data. A service can be hosted by Esri or in ArcGIS Enterprise.Learn more.

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
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       <!-- 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.19/dist/esri-leaflet.js"></script>
       <script src="https://unpkg.com/esri-leaflet-vector@4.3.2/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 layerA basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service.Learn more 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 blocksCopy

   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
       /* Use for API key authentication */
       const accessToken = "YOUR_ACCESS_TOKEN";
   
       // or
   
       /* Use for user authentication */
       // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
       //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
       //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
       //   portal: "YOUR_PORTAL_URL" // Your portal URL
       // })
   
       // const accessToken = session.token;
   
       const 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
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       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 areaA service area is a polygon representing the distance that can be reached within a specified length of time while traveling in a street network.Learn more.

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
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       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
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       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 areaA service area is a polygon representing the distance that can be reached within a specified length of time while traveling in a street network.Learn more.

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
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       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.

   More info

   The facilities parameter lets you pass in multiple locations around which the service area is calculated. In this case, you are only passing one.

   By default, the three drive times that are requested are 5, 10 and 15 minutes. You can change these by passing the defaultBreaks parameter.

   Expand

   Use dark colors for code blocks

   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
       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
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
         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
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
         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
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
           .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

Run the app.

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 location services in these tutorials: