Find service areas
Learn how to calculate the area that can be reached in a given driving time from a location.
A service area, also known as an isochrone, is a polygon that represents the area that can be reached when driving or walking on a street network. The area that can be reached is restricted by either time or distance.
To calculate service areas, you can use the routing service. You provide a start location (facilities), one or more time or distance values, and a spatial reference. Once processed, the service returns the service areas that can be reached.
In this tutorial, you use ArcGIS REST JS to access the routing service to create and display five, ten, and fifteen minute drive time service areas when the map is clicked. You use data-driven styling to give each polygon a different shade of blue.
Prerequisites
You need an ArcGIS account to access the developer dashboard and create an API key.
Steps
Create a new pen
- To get started, either complete the Display a map tutorial or .
Set the API key
To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.
Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.
In CodePen, update
apiKey
to use your key.Use dark colors for code blocks Change line 1 2 3 4
const apiKey = "YOUR_API_KEY"; const basemapId = "ArcGIS:Streets"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL);
Add references to ArcGIS REST JS
In the
<head>
element, add references to the ArcGIS REST JS library.Use dark colors for code blocks 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>OpenLayers Tutorials: Find service areas</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js"></script> </head> <body> <div id="map"></div> <div id="directions"></div> <script> const apiKey = "YOUR_API_KEY"; const map = new ol.Map({ target: "map" }); const view = new ol.View({ center: ol.proj.fromLonLat([100.5231, 13.7367]), // Bangkok zoom: 12 }); map.setView(view); let serviceAreaLayer; function addServiceAreaLayer() { const style = (feature) => { const fillColors = { 0: "hsla(210, 80%, 40%, 50%)", 5: "hsla(210, 80%, 60%, 50%)", 10: "hsla(210, 80%, 80%, 50%)" }; return new ol.style.Style({ fill: new ol.style.Fill({ color: fillColors[feature.get("FromBreak")] }), stroke: new ol.style.Stroke({ color: "black" }) }); }; serviceAreaLayer = new ol.layer.Vector({ style: style }); map.addLayer(serviceAreaLayer); } let startingPointLayer; function addStartingPointLayer() { startingPointLayer = new ol.layer.Vector({ style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); map.addLayer(startingPointLayer); window.s = startingPointLayer; } const basemapId = "ArcGIS:Navigation"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) ); const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey); arcgisRest .serviceArea({ facilities: [coordinates], authentication }) .then((response) => { const geojson = new ol.format.GeoJSON({ defaultDataProjection: "EPSG:4326", featureProjection: "EPSG:3857" }); const features = geojson.readFeatures(response.saPolygons.geoJson); const source = new ol.source.Vector({ features: features }); serviceAreaLayer.setSource(source); }) .catch((error) => { alert("There was a problem using the geocoder. See the console for details."); console.error(error); }); }); </script> </body> </html>
Update the map
A navigation basemap layer is typically used in geocoding and routing applications. Update the basemap layer to use ArcGIS:Navigation
.
Update the basemap and the map initialization to center on location
[100.5231,13.7367]
, Bangkok.Use dark colors for code blocks Change line Change 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>OpenLayers Tutorials: Find service areas</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js"></script> </head> <body> <div id="map"></div> <div id="directions"></div> <script> const apiKey = "YOUR_API_KEY"; const map = new ol.Map({ target: "map" }); const view = new ol.View({ center: ol.proj.fromLonLat([100.5231, 13.7367]), // Bangkok zoom: 12 }); map.setView(view); let serviceAreaLayer; function addServiceAreaLayer() { const style = (feature) => { const fillColors = { 0: "hsla(210, 80%, 40%, 50%)", 5: "hsla(210, 80%, 60%, 50%)", 10: "hsla(210, 80%, 80%, 50%)" }; return new ol.style.Style({ fill: new ol.style.Fill({ color: fillColors[feature.get("FromBreak")] }), stroke: new ol.style.Stroke({ color: "black" }) }); }; serviceAreaLayer = new ol.layer.Vector({ style: style }); map.addLayer(serviceAreaLayer); } let startingPointLayer; function addStartingPointLayer() { startingPointLayer = new ol.layer.Vector({ style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); map.addLayer(startingPointLayer); window.s = startingPointLayer; } const basemapId = "ArcGIS:Navigation"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) ); const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey); arcgisRest .serviceArea({ facilities: [coordinates], authentication }) .then((response) => { const geojson = new ol.format.GeoJSON({ defaultDataProjection: "EPSG:4326", featureProjection: "EPSG:3857" }); const features = geojson.readFeatures(response.saPolygons.geoJson); const source = new ol.source.Vector({ features: features }); serviceAreaLayer.setSource(source); }) .catch((error) => { alert("There was a problem using the geocoder. See the console for details."); console.error(error); }); }); </script> </body> </html>
Create a starting point layer
Add a VectorLayer
to show the user where they clicked, with a white circle and black outline.
Add a function called
addStartingPointLayer
. Inside, create aVectorLayer
layer. Use aCircle
style, with whiteFill
and blackStroke
. Store the layer in a variable calledstartingPointLayer
;Use dark colors for code blocks 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>OpenLayers Tutorials: Find service areas</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js"></script> </head> <body> <div id="map"></div> <div id="directions"></div> <script> const apiKey = "YOUR_API_KEY"; const map = new ol.Map({ target: "map" }); const view = new ol.View({ center: ol.proj.fromLonLat([100.5231, 13.7367]), // Bangkok zoom: 12 }); map.setView(view); let serviceAreaLayer; function addServiceAreaLayer() { const style = (feature) => { const fillColors = { 0: "hsla(210, 80%, 40%, 50%)", 5: "hsla(210, 80%, 60%, 50%)", 10: "hsla(210, 80%, 80%, 50%)" }; return new ol.style.Style({ fill: new ol.style.Fill({ color: fillColors[feature.get("FromBreak")] }), stroke: new ol.style.Stroke({ color: "black" }) }); }; serviceAreaLayer = new ol.layer.Vector({ style: style }); map.addLayer(serviceAreaLayer); } let startingPointLayer; function addStartingPointLayer() { startingPointLayer = new ol.layer.Vector({ style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); map.addLayer(startingPointLayer); window.s = startingPointLayer; } const basemapId = "ArcGIS:Navigation"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) ); const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey); arcgisRest .serviceArea({ facilities: [coordinates], authentication }) .then((response) => { const geojson = new ol.format.GeoJSON({ defaultDataProjection: "EPSG:4326", featureProjection: "EPSG:3857" }); const features = geojson.readFeatures(response.saPolygons.geoJson); const source = new ol.source.Vector({ features: features }); serviceAreaLayer.setSource(source); }) .catch((error) => { alert("There was a problem using the geocoder. See the console for details."); console.error(error); }); }); </script> </body> </html>After creating the
VectorLayer
, add it to the map using theaddLayer
function.Use dark colors for code blocks 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>OpenLayers Tutorials: Find service areas</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js"></script> </head> <body> <div id="map"></div> <div id="directions"></div> <script> const apiKey = "YOUR_API_KEY"; const map = new ol.Map({ target: "map" }); const view = new ol.View({ center: ol.proj.fromLonLat([100.5231, 13.7367]), // Bangkok zoom: 12 }); map.setView(view); let serviceAreaLayer; function addServiceAreaLayer() { const style = (feature) => { const fillColors = { 0: "hsla(210, 80%, 40%, 50%)", 5: "hsla(210, 80%, 60%, 50%)", 10: "hsla(210, 80%, 80%, 50%)" }; return new ol.style.Style({ fill: new ol.style.Fill({ color: fillColors[feature.get("FromBreak")] }), stroke: new ol.style.Stroke({ color: "black" }) }); }; serviceAreaLayer = new ol.layer.Vector({ style: style }); map.addLayer(serviceAreaLayer); } let startingPointLayer; function addStartingPointLayer() { startingPointLayer = new ol.layer.Vector({ style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); map.addLayer(startingPointLayer); window.s = startingPointLayer; } const basemapId = "ArcGIS:Navigation"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) ); const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey); arcgisRest .serviceArea({ facilities: [coordinates], authentication }) .then((response) => { const geojson = new ol.format.GeoJSON({ defaultDataProjection: "EPSG:4326", featureProjection: "EPSG:3857" }); const features = geojson.readFeatures(response.saPolygons.geoJson); const source = new ol.source.Vector({ features: features }); serviceAreaLayer.setSource(source); }) .catch((error) => { alert("There was a problem using the geocoder. See the console for details."); console.error(error); }); }); </script> </body> </html>
Create service area layer
To show the service areas, you will use another VectorLayer
. Each service area feature has a property called FromBreak
which contains the lower bound of the number of minutes of travel: 0, 5 and 10 minutes. You will use a style function to choose a different shade of blue based on this property.
Add a function called
addServiceAreaLayer()
. Store the layer as a variable called 'serviceAreaLayer'.Use dark colors for code blocks 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>OpenLayers Tutorials: Find service areas</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js"></script> </head> <body> <div id="map"></div> <div id="directions"></div> <script> const apiKey = "YOUR_API_KEY"; const map = new ol.Map({ target: "map" }); const view = new ol.View({ center: ol.proj.fromLonLat([100.5231, 13.7367]), // Bangkok zoom: 12 }); map.setView(view); let serviceAreaLayer; function addServiceAreaLayer() { const style = (feature) => { const fillColors = { 0: "hsla(210, 80%, 40%, 50%)", 5: "hsla(210, 80%, 60%, 50%)", 10: "hsla(210, 80%, 80%, 50%)" }; return new ol.style.Style({ fill: new ol.style.Fill({ color: fillColors[feature.get("FromBreak")] }), stroke: new ol.style.Stroke({ color: "black" }) }); }; serviceAreaLayer = new ol.layer.Vector({ style: style }); map.addLayer(serviceAreaLayer); } let startingPointLayer; function addStartingPointLayer() { startingPointLayer = new ol.layer.Vector({ style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); map.addLayer(startingPointLayer); window.s = startingPointLayer; } const basemapId = "ArcGIS:Navigation"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) ); const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey); arcgisRest .serviceArea({ facilities: [coordinates], authentication }) .then((response) => { const geojson = new ol.format.GeoJSON({ defaultDataProjection: "EPSG:4326", featureProjection: "EPSG:3857" }); const features = geojson.readFeatures(response.saPolygons.geoJson); const source = new ol.source.Vector({ features: features }); serviceAreaLayer.setSource(source); }) .catch((error) => { alert("There was a problem using the geocoder. See the console for details."); console.error(error); }); }); </script> </body> </html>Create a function which takes a feature and returns a fill style. Use the
FromBreak
property to choose a shade of blue. Use a black stroke. Pass the style function to theVectorLayer
constructor.Use dark colors for code blocks 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>OpenLayers Tutorials: Find service areas</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js"></script> </head> <body> <div id="map"></div> <div id="directions"></div> <script> const apiKey = "YOUR_API_KEY"; const map = new ol.Map({ target: "map" }); const view = new ol.View({ center: ol.proj.fromLonLat([100.5231, 13.7367]), // Bangkok zoom: 12 }); map.setView(view); let serviceAreaLayer; function addServiceAreaLayer() { const style = (feature) => { const fillColors = { 0: "hsla(210, 80%, 40%, 50%)", 5: "hsla(210, 80%, 60%, 50%)", 10: "hsla(210, 80%, 80%, 50%)" }; return new ol.style.Style({ fill: new ol.style.Fill({ color: fillColors[feature.get("FromBreak")] }), stroke: new ol.style.Stroke({ color: "black" }) }); }; serviceAreaLayer = new ol.layer.Vector({ style: style }); map.addLayer(serviceAreaLayer); } let startingPointLayer; function addStartingPointLayer() { startingPointLayer = new ol.layer.Vector({ style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); map.addLayer(startingPointLayer); window.s = startingPointLayer; } const basemapId = "ArcGIS:Navigation"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) ); const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey); arcgisRest .serviceArea({ facilities: [coordinates], authentication }) .then((response) => { const geojson = new ol.format.GeoJSON({ defaultDataProjection: "EPSG:4326", featureProjection: "EPSG:3857" }); const features = geojson.readFeatures(response.saPolygons.geoJson); const source = new ol.source.Vector({ features: features }); serviceAreaLayer.setSource(source); }) .catch((error) => { alert("There was a problem using the geocoder. See the console for details."); console.error(error); }); }); </script> </body> </html>After creating the
VectorLayer
, add it to the map using theaddLayer
function.Use dark colors for code blocks 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>OpenLayers Tutorials: Find service areas</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js"></script> </head> <body> <div id="map"></div> <div id="directions"></div> <script> const apiKey = "YOUR_API_KEY"; const map = new ol.Map({ target: "map" }); const view = new ol.View({ center: ol.proj.fromLonLat([100.5231, 13.7367]), // Bangkok zoom: 12 }); map.setView(view); let serviceAreaLayer; function addServiceAreaLayer() { const style = (feature) => { const fillColors = { 0: "hsla(210, 80%, 40%, 50%)", 5: "hsla(210, 80%, 60%, 50%)", 10: "hsla(210, 80%, 80%, 50%)" }; return new ol.style.Style({ fill: new ol.style.Fill({ color: fillColors[feature.get("FromBreak")] }), stroke: new ol.style.Stroke({ color: "black" }) }); }; serviceAreaLayer = new ol.layer.Vector({ style: style }); map.addLayer(serviceAreaLayer); } let startingPointLayer; function addStartingPointLayer() { startingPointLayer = new ol.layer.Vector({ style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); map.addLayer(startingPointLayer); window.s = startingPointLayer; } const basemapId = "ArcGIS:Navigation"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) ); const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey); arcgisRest .serviceArea({ facilities: [coordinates], authentication }) .then((response) => { const geojson = new ol.format.GeoJSON({ defaultDataProjection: "EPSG:4326", featureProjection: "EPSG:3857" }); const features = geojson.readFeatures(response.saPolygons.geoJson); const source = new ol.source.Vector({ features: features }); serviceAreaLayer.setSource(source); }) .catch((error) => { alert("There was a problem using the geocoder. See the console for details."); console.error(error); }); }); </script> </body> </html>
Display layers
Use a load handler to display your layers when the map is ready.
Add a
then
handler to the existingolms(map, basemapURL)
call. Inside, calladdServiceAreaLayer
andaddStartingPointLayer
.Use dark colors for code blocks 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>OpenLayers Tutorials: Find service areas</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js"></script> </head> <body> <div id="map"></div> <div id="directions"></div> <script> const apiKey = "YOUR_API_KEY"; const map = new ol.Map({ target: "map" }); const view = new ol.View({ center: ol.proj.fromLonLat([100.5231, 13.7367]), // Bangkok zoom: 12 }); map.setView(view); let serviceAreaLayer; function addServiceAreaLayer() { const style = (feature) => { const fillColors = { 0: "hsla(210, 80%, 40%, 50%)", 5: "hsla(210, 80%, 60%, 50%)", 10: "hsla(210, 80%, 80%, 50%)" }; return new ol.style.Style({ fill: new ol.style.Fill({ color: fillColors[feature.get("FromBreak")] }), stroke: new ol.style.Stroke({ color: "black" }) }); }; serviceAreaLayer = new ol.layer.Vector({ style: style }); map.addLayer(serviceAreaLayer); } let startingPointLayer; function addStartingPointLayer() { startingPointLayer = new ol.layer.Vector({ style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); map.addLayer(startingPointLayer); window.s = startingPointLayer; } const basemapId = "ArcGIS:Navigation"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) ); const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey); arcgisRest .serviceArea({ facilities: [coordinates], authentication }) .then((response) => { const geojson = new ol.format.GeoJSON({ defaultDataProjection: "EPSG:4326", featureProjection: "EPSG:3857" }); const features = geojson.readFeatures(response.saPolygons.geoJson); const source = new ol.source.Vector({ features: features }); serviceAreaLayer.setSource(source); }) .catch((error) => { alert("There was a problem using the geocoder. See the console for details."); console.error(error); }); }); </script> </body> </html>
Get click location
Before you call the Service area service, you need the location of the clicked point. You can use ol.proj.transform
to convert this into a latitude and longitude. Use the location to set a new VectorSource
of the startingPointLayer
.
Add a click handler to the map. Inside, convert the clicked coordinates from the event object into latitude and longitude.
Use dark colors for code blocks 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>OpenLayers Tutorials: Find service areas</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js"></script> </head> <body> <div id="map"></div> <div id="directions"></div> <script> const apiKey = "YOUR_API_KEY"; const map = new ol.Map({ target: "map" }); const view = new ol.View({ center: ol.proj.fromLonLat([100.5231, 13.7367]), // Bangkok zoom: 12 }); map.setView(view); let serviceAreaLayer; function addServiceAreaLayer() { const style = (feature) => { const fillColors = { 0: "hsla(210, 80%, 40%, 50%)", 5: "hsla(210, 80%, 60%, 50%)", 10: "hsla(210, 80%, 80%, 50%)" }; return new ol.style.Style({ fill: new ol.style.Fill({ color: fillColors[feature.get("FromBreak")] }), stroke: new ol.style.Stroke({ color: "black" }) }); }; serviceAreaLayer = new ol.layer.Vector({ style: style }); map.addLayer(serviceAreaLayer); } let startingPointLayer; function addStartingPointLayer() { startingPointLayer = new ol.layer.Vector({ style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); map.addLayer(startingPointLayer); window.s = startingPointLayer; } const basemapId = "ArcGIS:Navigation"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) ); const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey); arcgisRest .serviceArea({ facilities: [coordinates], authentication }) .then((response) => { const geojson = new ol.format.GeoJSON({ defaultDataProjection: "EPSG:4326", featureProjection: "EPSG:3857" }); const features = geojson.readFeatures(response.saPolygons.geoJson); const source = new ol.source.Vector({ features: features }); serviceAreaLayer.setSource(source); }) .catch((error) => { alert("There was a problem using the geocoder. See the console for details."); console.error(error); }); }); </script> </body> </html>Create a new
VectorSource
forstartingPointLayer
, containing one feature. Construct thisFeature
with aol.geom.Point
, passing in the coordinate of the mouse click.The mouse click is in the same coordinate system as the map, so you do not need to transform.
Use dark colors for code blocks 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>OpenLayers Tutorials: Find service areas</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js"></script> </head> <body> <div id="map"></div> <div id="directions"></div> <script> const apiKey = "YOUR_API_KEY"; const map = new ol.Map({ target: "map" }); const view = new ol.View({ center: ol.proj.fromLonLat([100.5231, 13.7367]), // Bangkok zoom: 12 }); map.setView(view); let serviceAreaLayer; function addServiceAreaLayer() { const style = (feature) => { const fillColors = { 0: "hsla(210, 80%, 40%, 50%)", 5: "hsla(210, 80%, 60%, 50%)", 10: "hsla(210, 80%, 80%, 50%)" }; return new ol.style.Style({ fill: new ol.style.Fill({ color: fillColors[feature.get("FromBreak")] }), stroke: new ol.style.Stroke({ color: "black" }) }); }; serviceAreaLayer = new ol.layer.Vector({ style: style }); map.addLayer(serviceAreaLayer); } let startingPointLayer; function addStartingPointLayer() { startingPointLayer = new ol.layer.Vector({ style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); map.addLayer(startingPointLayer); window.s = startingPointLayer; } const basemapId = "ArcGIS:Navigation"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) ); const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey); arcgisRest .serviceArea({ facilities: [coordinates], authentication }) .then((response) => { const geojson = new ol.format.GeoJSON({ defaultDataProjection: "EPSG:4326", featureProjection: "EPSG:3857" }); const features = geojson.readFeatures(response.saPolygons.geoJson); const source = new ol.source.Vector({ features: features }); serviceAreaLayer.setSource(source); }) .catch((error) => { alert("There was a problem using the geocoder. See the console for details."); console.error(error); }); }); </script> </body> </html>At the top right, click Run.
When you click on the map, the white circle should move to each location that you click.
Get the service area
With the longitude and latitude of the click event, you can now call the serviceArea
function in the route service to get the service area.
Inside the click handler, create a new
arcgisRest.ApiKey
to access the route service. Call theargisRest.serviceArea
with the transformed coordinates to calculate the service area.The
facilities
parameter lets you pass in multiple locations around which the service area is calculated. In this case, you are only passing one.By default, the three drive times that are requested are 5, 10 and 15 minutes. You can change these by passing the
defaultBreaks
parameter.Use dark colors for code blocks 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>OpenLayers Tutorials: Find service areas</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js"></script> </head> <body> <div id="map"></div> <div id="directions"></div> <script> const apiKey = "YOUR_API_KEY"; const map = new ol.Map({ target: "map" }); const view = new ol.View({ center: ol.proj.fromLonLat([100.5231, 13.7367]), // Bangkok zoom: 12 }); map.setView(view); let serviceAreaLayer; function addServiceAreaLayer() { const style = (feature) => { const fillColors = { 0: "hsla(210, 80%, 40%, 50%)", 5: "hsla(210, 80%, 60%, 50%)", 10: "hsla(210, 80%, 80%, 50%)" }; return new ol.style.Style({ fill: new ol.style.Fill({ color: fillColors[feature.get("FromBreak")] }), stroke: new ol.style.Stroke({ color: "black" }) }); }; serviceAreaLayer = new ol.layer.Vector({ style: style }); map.addLayer(serviceAreaLayer); } let startingPointLayer; function addStartingPointLayer() { startingPointLayer = new ol.layer.Vector({ style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); map.addLayer(startingPointLayer); window.s = startingPointLayer; } const basemapId = "ArcGIS:Navigation"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) ); const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey); arcgisRest .serviceArea({ facilities: [coordinates], authentication }) .then((response) => { const geojson = new ol.format.GeoJSON({ defaultDataProjection: "EPSG:4326", featureProjection: "EPSG:3857" }); const features = geojson.readFeatures(response.saPolygons.geoJson); const source = new ol.source.Vector({ features: features }); serviceAreaLayer.setSource(source); }) .catch((error) => { alert("There was a problem using the geocoder. See the console for details."); console.error(error); }); }); </script> </body> </html>
Display the service area on the map
The response to the request contains the geographic information of the service areas. Use the saPolygons.geoJson
property to update the source of the serviceAreaLayer
.
Add a
then
handler. Inside, create aGeoJSON
feature format that projects from EPSG:4326 to EPSG:3857. Use itsreadFeatures
function to convertsaPolygons.geoJson
to an array of Features. Create aVectorSource
with these features, and callsetSource
onserviceAreaLayer
to apply it.Use dark colors for code blocks 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>OpenLayers Tutorials: Find service areas</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js"></script> </head> <body> <div id="map"></div> <div id="directions"></div> <script> const apiKey = "YOUR_API_KEY"; const map = new ol.Map({ target: "map" }); const view = new ol.View({ center: ol.proj.fromLonLat([100.5231, 13.7367]), // Bangkok zoom: 12 }); map.setView(view); let serviceAreaLayer; function addServiceAreaLayer() { const style = (feature) => { const fillColors = { 0: "hsla(210, 80%, 40%, 50%)", 5: "hsla(210, 80%, 60%, 50%)", 10: "hsla(210, 80%, 80%, 50%)" }; return new ol.style.Style({ fill: new ol.style.Fill({ color: fillColors[feature.get("FromBreak")] }), stroke: new ol.style.Stroke({ color: "black" }) }); }; serviceAreaLayer = new ol.layer.Vector({ style: style }); map.addLayer(serviceAreaLayer); } let startingPointLayer; function addStartingPointLayer() { startingPointLayer = new ol.layer.Vector({ style: new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: "white" }), stroke: new ol.style.Stroke({ color: "black", width: 2 }) }) }) }); map.addLayer(startingPointLayer); window.s = startingPointLayer; } const basemapId = "ArcGIS:Navigation"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL).then(function (map) { addServiceAreaLayer(); addStartingPointLayer(); }); map.on("click", (e) => { const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); startingPointLayer.setSource( new ol.source.Vector({ features: [new ol.Feature(new ol.geom.Point(e.coordinate))] }) ); const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey); arcgisRest .serviceArea({ facilities: [coordinates], authentication }) .then((response) => { const geojson = new ol.format.GeoJSON({ defaultDataProjection: "EPSG:4326", featureProjection: "EPSG:3857" }); const features = geojson.readFeatures(response.saPolygons.geoJson); const source = new ol.source.Vector({ features: features }); serviceAreaLayer.setSource(source); }) .catch((error) => { alert("There was a problem using the geocoder. See the console for details."); console.error(error); }); }); </script> </body> </html>Add an error handler. Inside, show a message and write the error to the console.
Use dark colors for code blocks