Find a route and directions
Learn how to find a route and directions with the route service.
Routing is the process of finding the path from an origin to a destination in a street network. You can use the Routing service to find routes, get driving directions, calculate drive times, and solve complicated, multiple vehicle routing problems. To create a route, you typically define a set of stops (origin and one or more destinations) and use the service to find a route with directions. You can also use a number of additional parameters such as barriers and mode of travel to refine the results.
In this tutorial, you define an origin and destination by clicking on the map. These values are used to get a route and directions from the route service. The directions are also displayed on the map.
Prerequisites
You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.
Steps
Create a new pen
- To get started, either complete the Display a map tutorial or .
Set the API key
To access ArcGIS services, you need an API key.
Go to your dashboard to get an API key.
In CodePen, set the
apiKey
to your key, so it can be used to access basemap layer and location services.Use dark colors for code blocks Change line 1 2 3 4
esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-topographic" // Basemap layer service });
Add modules
In the
require
statement, add theGraphic
,route
,RouteParameters
, andFeatureSet
modules.The ArcGIS API for JavaScript uses AMD modules. The
require
function is used to load modules so they can be used in the mainfunction
. It's important to keep the module references and function parameters in the same order.Use dark colors for code blocks Add line. Add line. Add line. Add 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
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Update the map
A streets basemap layer is typically used in routing applications. Update the basemap
property to use the arcgis-navigation
basemap layer and change the position of the map to center on Los Angeles.
Update the
basemap
property toarcgis-navigation
.Use dark colors for code blocks 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
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>Update the
center
property to-118.24532,34.05398
and set thezoom
property to12
to center on Los Angeles.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
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Define the service url
The rest module makes a request to a service and returns the results. Use the route
module to access the Routing service.
Create a variable called
routeUrl
to reference the route service.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
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Get an origin and destination
A route
module uses a stops
parameter to find a route. Stops
are graphics that represent the origin and destination locations for a route. Use a click
handler in the View
to add graphics when the map is clicked. The graphics will define the stops
for the route.
Add a
click
handler to add graphics to the view.Use dark colors for code blocks 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
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>Create an
addGraphic
function to display a white marker for the origin location and a black marker for the destination. Add thegraphic
to theview
.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. 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
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>Update the
click
handler to reference theaddGraphic
function. The first click will create the origin and the second will create the destination. Subsequent clicks will clear the graphics to define a new origin and destination.Use dark colors for code blocks 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
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>Click on the map twice to ensure the graphics are created.
Find the route
To solve the route, add the origin and destination graphics to the stops
parameter as a FeatureSet
and then use the solve
method. The resulting route will be added to the map as a Graphic
.
Input parameters are necessary to solve the route. While there are many parameters you can add, such as stops and barriers, at minimum you need to provide an origin and destination point.
Create a
getRoute
function to addRouteParameters
and pass in the point graphics.Use dark colors for code blocks 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
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>Call the
solve
method to get the route. When the method returns, get the route fromrouteResults
and add it to the view as aGraphic
with a blue line.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. 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
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>Update the
click
handler with thegetRoute
function after the second graphic is passed in (destination
).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
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>Click two locations on the map to display a route.
Get directions
You can get driving directions from the route service with the returnDirections
property on RouteParameters
. Use this property to return directions and add them to the map as HTML elements.
Go back to the
getRoute
function and set thereturnDirections
property totrue
.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
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>After the
solve
method has resolved, create adirections
ordered list element that will display if there are results returned to generate a route.Use dark colors for code blocks 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
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>Create a
li
element for each route feature to generate an ordered list of directions with their distances in miles. Append eachdirection
to thedirections
element.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
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>For each new route created, remove all existing HTML elements from the view with the
empty
method. Add thedirection
element, with the directions as list items, to the top-right of the view.Use dark colors for code blocks