Learn how to calculate the area
The ArcGIS Routing service
In this tutorial, use the MapLibre ArcGIS plugin to display a map and 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 Location Platform or ArcGIS Online account.
Steps
Get the starter app
Select a type of authentication and follow the steps to create a new app.
Choose API key authentication if you:
- Want the easiest way to get started.
- Want to build public applications
A public application is an application that allows anonymous access without requiring users to sign in with an ArcGIS account. It supports API key or app authentication. that access ArcGIS Location ServicesArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Static Maps service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. and secure itemsAn item, also known as a content item, is a resource stored in a portal such as a web map, hosted layer, style, script tool, file, or notebook. . - Have an ArcGIS Location Platform or ArcGIS Online account.
Choose user authentication if you:
- Want to build private applications.
- Require application users to sign in with their own ArcGIS account
An ArcGIS account is an identity with a user type and set of privileges that can access specific ArcGIS products, tools, APIs, services, and resources. The main account types that can be used for development are an ArcGIS Location Platform account, ArcGIS Online account, and ArcGIS Enterprise account. ArcGIS Location Platform and ArcGIS Online accounts are also associated with a subscription. and access resources their behalf. - Have an ArcGIS Online account.
To learn more about both types of authentication, go to Authentication.
Set up authentication
Set developer credentials
Use the API key or OAuth developer credentials
Reference the ArcGIS REST JS
-
Add links to the ArcGIS REST JS libraries in the
<scriptsection.> Use dark colors for code blocks <head> <title>MapLibre ArcGIS tutorial: Find service areas</title> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <!-- Load MapLibre GL JS and MapLibre ArcGIS from CDN --> <script type="importmap"> { "imports": { "maplibre-gl": "https://unpkg.com/maplibre-gl@6.8.0/dist/maplibre-gl.mjs", "@esri/maplibre-arcgis": "https://unpkg.com/@esri/maplibre-arcgis@1.3.1/dist/esm/maplibre-arcgis.min.js" } } </script> <link href="https://unpkg.com/maplibre-gl@6.8.0/dist/maplibre-gl.css" rel="stylesheet"> <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> <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>
Update the map
An arcgis/navigation basemap style
-
Update the basemap and the map initialization to center on location
[100.5231,13.7367], Bangkok.Use dark colors for code blocks Copy /* 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 map = new maplibregl.Map({ container: "map", // the id of the div element zoom: 12, // starting zoom center: [100.5231, 13.7367] // Bangkok }); const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, { style: "arcgis/navigation", token: accessToken });
Add a starting point layer
Add a source
-
Start a new function called
addStarting Point Layer() Use dark colors for code blocks center: [100.5231, 13.7367] // Bangkok }); const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, { style: "arcgis/navigation", token: accessToken }); function addStartingPointLayer() { } -
Add a GeoJSON
GeoJSON is an open standard for representing geographic information in a JSON file. It is commonly used for sharing data between web services or manipulating vector data in the browser. sourceA source in Mapbox GL JS is a file or service that supplies data for a layer displayed in a map. with idstart. Set thedataattribute 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
GeoJSON is an open standard for representing geographic information in a JSON file. It is commonly used for sharing data between web services or manipulating vector data in the browser. : a feature collection that contains no features.Use dark colors for code blocks function addStartingPointLayer() { map.addSource("start", { type: "geojson", data: { type: "FeatureCollection", features: [] } } -
Add a circle layer
A layer in Mapbox GL JS is a visual element that displays data from a source. with idstart-circle, connected to thestartsource. Set the paint properties to make it white with a black outline.Use dark colors for code blocks 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 } }); }
Add service area layer
To show the service areaFrom 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.
-
Start a new function called
add.Service Area Layer() Use dark colors for code blocks center: [100.5231, 13.7367] // Bangkok }); const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, { style: "arcgis/navigation", token: accessToken }); function addServiceAreaLayer() { } -
Add a GeoJSON
GeoJSON is an open standard for representing geographic information in a JSON file. It is commonly used for sharing data between web services or manipulating vector data in the browser. source for 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. , with idservicearea. Set thedataattribute 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
GeoJSON is an open standard for representing geographic information in a JSON file. It is commonly used for sharing data between web services or manipulating vector data in the browser. : a feature collection that contains no features.Use dark colors for code blocks function addServiceAreaLayer() { map.addSource("servicearea", { type: "geojson", data: { type: "FeatureCollection", features: [] } }); } -
Add a layer of type
fillto display 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. polygons, connected to theserviceareasource. Use amatchexpression for thefill-colorto show each polygon in a different shade of blue: darkest for shortest time, and lightest for longest time.The
matchexpression is like aswitchstatement: it compares the value of theFromproperty of each polygon feature, and compares it against the values 0, 5 or 10. If it matches, the corresponding color becomes theBreak fill-color. Otherwise, the last value,transparentis used.Use dark colors for code blocks 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 } }); }
Add a load event handler
You need to use the load event to ensure the map is fully loaded, before adding your layers.
-
Add an event handler to the map
loadevent. Call theaddandService Area Layer() addfunctions here.Starting Point Layer() 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.
Use dark colors for code blocks paint: { "circle-radius": 6, "circle-color": "white", "circle-stroke-color": "black", "circle-stroke-width": 2 } }); } map.on("load", () => { addServiceAreaLayer(); addStartingPointLayer(); });
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.
-
Add a click handler to the map.
Use dark colors for code blocks map.on("load", () => { addServiceAreaLayer(); addStartingPointLayer(); }); map.on("click", (e) => { }); -
Use the
lngproperty of the event parameter to construct a GeoJSONLat GeoJSON is an open standard for representing geographic information in a JSON file. It is commonly used for sharing data between web services or manipulating vector data in the browser. point. Update the geometry information of thestartsource with it.The object passed to the
clickevent contains several useful properties, including:lng: the map location where the click took place.Lat point: the screen location in pixels where the click took place.original: the DOM event, which contains information about modifier keys.Event
For more information, see the MapLibre GL JS documentation.
Use dark colors for code blocks map.on("click", (e) => { const coordinates = e.lngLat.toArray(); const point = { type: "Point", coordinates }; map.getSource("start").setData(point); }); -
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 service function in the route service to get the service area
-
Inside the click handler, create a new
arcgisto access the route service. Call theRest. Api Key Manager servicemethod. Set theArea facilitiesparameter with the clicked coordinates to calculate 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. .The
facilitiesparameter 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
defaultparameter.Breaks Use dark colors for code blocks const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken); arcgisRest .serviceArea({ authentication, facilities: [coordinates] })
Display the service area on the map
The response to the request contains the geographic information of the service areasa property to update the servicearea source.
-
Use
Map.getto access theSource serviceareasource. Callsetto update the data with the GeoJSONData GeoJSON is an open standard for representing geographic information in a JSON file. It is commonly used for sharing data between web services or manipulating vector data in the browser. returned from the API.Use dark colors for code blocks arcgisRest .serviceArea({ authentication, facilities: [coordinates] }) .then((response) => { map.getSource("servicearea").setData(response.saPolygons.geoJson); }); -
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 location services in these tutorials:
