Hide Table of Contents
Analysis
Data Reviewer
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
Download as a zip file
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 uses a helper method, added at version 3.4, that defines a proxy for a set of resources. In this example all requests to route.arcgis.com are routed to the specified proxy url.
urlUtils.addProxyRule({ urlPrefix: "route.arcgis.com", proxyUrl: "/sproxy/" });
For demonstration purposes this sample uses a proxy that has been setup to use app logins and OAuth2 so you aren't required to log-in with an ArcGIS Online organizational subscription to run the sample.
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.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/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.29/"></script>
<script>
require([
"esri/urlUtils", "esri/map", "esri/dijit/Directions",
"dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
urlUtils, Map, Directions,
parser
) {
parser.parse();
//all requests to route.arcgis.com will proxy to the proxyUrl defined in this object.
urlUtils.addProxyRule({
urlPrefix: "route.arcgis.com",
proxyUrl: "/sproxy/"
});
urlUtils.addProxyRule({
urlPrefix: "traffic.arcgis.com",
proxyUrl: "/sproxy/"
});
var map = new Map("map", {
basemap: "streets",
center:[-98.56,39.82],
zoom: 4
});
//default will point to ArcGIS world routing service
var directions = new Directions({
map: map
// --------------------------------------------------------------------
// 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>