Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Explore in the sandbox
Open in CodePen
View live sample
Description
The Directions widget makes it easy to calculate directions between two or more input locations. The resulting directions are displayed with detailed turn-by-turn instructions. and if a map is associated with the widget the directions route and stops are displayed on the map. The stops displayed on the map are interactive you can click to display a popup with stop details or drag the stop to a new location to recalculate the route.
The Directions widget uses theWorld Network Analysisas the default service used to calculate driving directions. This is a subscription based service available through ArcGIS Online. If you have an ArcGIS Server Network Analysis service that you want to use to calculate directions specify the url to the service using the Directions widget routeTaskUrl constructor parameter.
This sample requires a proxy to handle communications with the Routing and Directions service. This example uses an ArcGIS Online hosted proxy. You can either remove it and log in once prompted, or create your own.
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Directions Widget</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
html, body, #map {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family:"Trebuchet MS";
}
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
require([
"esri/map", "esri/dijit/Directions", "dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, Directions, parser
) {
parser.parse();
var map = new Map("map", {
basemap: "streets-vector",
center:[-98.56,39.82],
zoom: 4
});
// default will point to ArcGIS world routing service
// here we use a service proxy to access that service without providing credentials
var directions = new Directions({
map: map,
routeTaskUrl: "https://utility.arcgis.com/usrsvcs/appservices/srsKxBIxJZB0pTZ0/rest/services/World/Route/NAServer/Route_World"
// --------------------------------------------------------------------
// New constuctor option and property showSaveButton added at version
// 3.17 to allow saving route. For more information see the API Reference.
// https://developers.arcgis.com/javascript/3/jsapi/directions-amd.html#showsavebutton
//
// Uncomment the line below to add the save button to the Directions widget
// --------------------------------------------------------------------
// , showSaveButton: true
},"dir");
directions.startup();
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width:100%;height:100%;">
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'"
style="width:250px;">
<div id="dir"></div>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>