require(["esri/dijit/Directions"], function(Directions) { /* code goes here */ });
locationType
passed to the addressToLocations() method. The default value will be "street" for any locator source that does not define a locationType
. 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.
routeTaskUrl
constructor parameter.Name | Summary |
---|---|
new Directions(options, srcNodeRef) | Creates a new Directions dijit using the given DOM node. |
esri/dijit/Directions | Download source
Name | Description |
---|---|
esriDirectionsContainer | Class applied to the div that contains the directions widgets including the stops and the directions. |
esriFindOptimalOrderOption | Class assigned to the list item that contains the 'Find Optimal order' checkbox. |
esriInfoWindowRoute | The class assigned to the div that contains the content displayed in the popup. |
esriPrintBar | Class assigned to the div on the print page that contains the print button. |
esriPrintButton | Class associated with the print button that appears on the print page. |
esriPrintFooter | Class assigned to the div that contains the legal disclaimer displayed in the footer section of the directions print page. |
esriPrintHeader | Class assigned to the div that contains the header information on the directions print page. This is the section of the page that displays the route title and distance and provides the space for adding additional notes. |
esriPrintLogo | Class assigned to the image tag that displays the esri logo on the directions print page. |
esriPrintMain | Class assigned to the container that contains the direction information on the directions print page. |
esriPrintName | Class assigned to the div that displays the route name on the directions print page.
.simpleDirections .esriPrintName { font-size: 120%; font-weight: bold; margin: 10px 0 5px; } |
esriPrintPage | Class assigned to the print page container. |
esriResultsButtonsContainer | Defines the styles for the container that holds the buttons. |
esriResultsContainer | Class assigned to the div that contains the direction text results. |
esriResultsLoading | Define the loading icon that displays when driving directions are being calculated. .simpleDirections .esriResultsLoading .esriResultsContainer { background: url("images/loading.gif") height: 32px; } |
esriResultsPrint | Class assigned to the "Print" button. |
esriResultsRouteName | Class assigned to the div that contains the route name details. This text is used on the print page. |
esriResultsSummary | Class assigned to the div that contains the directions summary information like total distance and time.
.simpleDirections .esriResultsSummary { font-weight: bold; line-height: 18px; margin: 0; } |
esriResultsViewFullRoute | Class assigned to the 'Zoom to full route' button./*Change the color of the Zoom to full route text*/ .simpleDirections .esriResultsViewFullRoute{ color:#999; } |
esriRoute | Class assigned to a row of direction information in the table of driving directions. The row contains two columns one holding the direction maneuver icon and the other contains the text. |
esriRouteIcon | Class assigned to the div that contains the route icon maneuver image. |
esriRouteIconColumn | Class assigned to the column in the directions table that contains the maneuver icon. |
esriRouteInfo | Class assigned to the div that contains text for one step of the directions. Use this to modify the text color for the directions info.
.simpleDirections .esriRouteInfo { color: #666666; } |
esriRouteLength | Class assigned to the div that contains the direction length information for each step in the directions table.
.simpleDirections .esriRouteLength { font-size: 11px; line-height: 14px; } |
esriRouteOrigin | The origin route styles. |
esriRouteText | Class assigned to the div that contains the text for one step of the route directions. |
esriRouteTextColumn | The class assigned to the column in the directions detail table that displays text information about one step of the route. |
esriRoutes | Class assigned to the container that contains the table of driving directions. |
esriRoutesContainer | Styles for the container that holds the route results. |
esriRoutesError | Class assigned to the div that displays error messages. |
esriStop | The class assigned to the individual rows in the stops table. |
esriStopDestination | Class used to denote that the stop is the final destination.
/*Specify a custom image for the destination icon*/ .simpleDirections .esriStopDestination .esriStopIcon { background: url(images/destinationIcon.png); } |
esriStopGeocoderColumn | Class assigned to the column in the stops table that contains the geocoder for the stop. |
esriStopIcon | Defines the column that contains the stop icon in the stop container. |
esriStopIconColumn | The class assigned to the column in the stops table that contains the stop icons. |
esriStopIconRemove | Class assigned to the div that contains the 'Remove Stop' button. |
esriStopIconRemoveColumn | Class applied to the column that contains the remove stop icon in the stops container. |
esriStopOrigin | Class used to denote that the stop is the origin.
/*Define a custom icon for the origin stop*/ .simpleDirections .esriStopOrigin .esriStopIcon { background: url(images/customOrigin.png); } |
esriStopReverseColumn | Class assigned to the column in the stops table that contains the 'reverse directions' button. |
esriStops | Class assigned to the table that contains the route stops. |
esriStopsAdd | Class assigned to the 'Add destination' link. |
esriStopsAddDestination | The class assigned to the div that contains the 'Add destination' link.
/* Set the text color to orange */ .esriStopsAddDestination{ color: #FFA500; } |
esriStopsButtons | Class associated with the div that contains the 'Add Destination' link.
/*Change the background color of the button*/ .esriStopsGetDirections { background: #b5bdc8; } |
esriStopsContainer | Class applied to the div that contains the stops and 'Get Directions' button..esriStopsContainer { margin: 0; } |
esriStopsGetDirections | The class assigned to the 'Get Directions' button. |
esriStopsGetDirectionsContainer | The class assigned to the div that contains the 'Get Directions' button. |
esriStopsOptionsEnabled | Class added to the directions container when 4 or more stops are added which enables the options menu with the 'Find optimal order' checkbox. |
esriStopsOptionsMenu | The class assigned to the div that contains additional routing options like 'Find optimal order'. |
esriStopsRemovable | Class added to the directions container when more than two stops are present. If more than two stops are present a delete icon appears that allows stops to be deleted. |
esriStopsReverse | Defines the styles associated with the 'Reverse Directions' button..esriStopsReverse { background: url("images/customImage.png"); cursor: pointer; height: 30px; margin: 0; width: 30px; } |
Name | Type | Summary |
---|---|---|
directions | DirectionsFeatureSet | Read-only: Get the directions to all the locations along the route. |
mapClickActive | Boolean | Indicates whether the Directions widget adds a stop on each map click. |
maxStopsReached | Boolean | Read-only: When true, the maximum number of stops for the route has been reached. |
mergedRouteGraphic | Graphic | Read-only: The graphic for the calculated route. |
portalUrl | String | If specified, this specifies the portal where the produced route layers are going to be stored and accessed. |
routeTask | RouteTask | Routing task for the widget. |
serviceDescription | Object | Read-only: The Service Description object returned by the Route REST Endpoint. |
showActivateButton | Boolean | Indicates whether the Directions widget will display the map-click-active toggle button. |
showBarriersButton | Boolean | Indicates whether to expose barriers when using the widget. |
showClearButton | Boolean | If true, the Clear button is shown. |
showMilesKilometersOption | Boolean | If true, the toggle button group allowing user to choose between Miles and Kilometers is shown. |
showSaveButton | Boolean | Applicable if the widget works with a Network Analyst Server federated with ArcGIS Online or Portal. |
showTravelModesOption | Boolean | If true, and supported by the service, then two toggle button groups are shown: one to allow user to choose between driving a car, a truck, or walking, and one more group to choose between fastest or shortest routes. |
stops | Graphic[] | An array of graphics that define the stop locations along the route. |
theme | String | The css theme used to style the widget. |
travelModeName | String | Read-only: If Directions Widget runs with Travel Modes enabled, this property returns current Travel Mode name. |
Name | Return type | Summary |
---|---|---|
activate() | None | Deprecated at v3.13. |
addStop(stop, index?) | Promise | Add a stop to the directions widget at the specified index location. |
addStops(stops, index?) | Promise | Add multiple stops to the directions list starting at the specified location. |
centerAtSegmentStart(index) | None | Center the map at the start of the specified route segment. |
clearDirections() | None | Remove the route directions from the directions list. |
deactivate() | None | Deprecated at v3.13. |
destroy() | None | Destroy the Directions widget. |
getDirections() | Promise | Calculate the route to the input locations and display the list of directions. |
getSupportedTravelModeNames() | String[] | If widget runs with Travel Modes enabled, call this method to obtain the list of supported Travel Mode names. |
highlightSegment(index) | None | Highlight the specified route segment on the map. |
loadRoute(itemId) | Promise | Loads a stored route layer from either ArcGIS Online or Portal. |
removeStop(index) | Promise | Remove the stop at the specified index. |
removeStops() | Promise | Removes the existing stops from the directions widget. |
reset() | Promise | Resets the directions widget removing any directions, stops and map graphics. |
setDirectionsLanguage(locale) | Promise | Specify the language used for the directions. |
setDirectionsLengthUnits(units) | Promise | Specify the length units used for the directions widget. |
setTravelMode(travelModeName) | Promise | If widget runs with Travel Modes enabled, call this method to switch to particular Travel mode programmatically. |
startup() | None | Finalizes the creation of this dijit. |
unhighlightSegment() | None | Removes the highlight symbol from the currently highlighted route segment. |
updateStop(stop, index) | Promise | Update the existing stop at the specified index location. |
updateStops(stops) | Promise | Update multiple stops in the directions widget by specifying an array of stops information. |
useMyCurrentLocation(stopIndex) | Promise | Sets the corresponding stop to point at the user's current location. |
zoomToFullRoute() | None | Zoom so that the full route is displayed within the current map extent. |
zoomToSegment(index) | None | Zoom to the specified route segment. |
Name | Event Object | Summary |
---|---|---|
activate | Deprecated at v3.13. | |
deactivate | Deprecated at v3.13. | |
directions-clear | Fires when the directions display is reset. | |
directions-finish | {
result: < | Fires when the route service has calculated the route and the directions are ready for display. |
directions-start | Fires when the route services starts to calculate the route. | |
feature-collection-created | Fires after a user clicks the Save or Save as New button and subsequently does not have permission to create an item in ArcGIS Online or Portal. | |
load | Fires when the directions widget has fully loaded. | |
map-click-active | {
mapClickActive: < | Fires when the widget starts or stops listening for map clicks. |
route-item-created | Fires after a user clicks the Save or Save as New button for the first time in order to store a new route in either ArcGIS Online or Portal. | |
route-item-updated | Fires when a existing route layer item is successfully updated in ArcGIS Online or Portal after user clicks the Save button. | |
segment-highlight | {
graphic: < | Fired when you hover over a route segment in the directions display. |
segment-select | {
graphic: < | Fires when a route segment is selected in the directions display. |
< > options |
Required | Various options to configure this dijit. See the list below for details. |
< > srcNodeRef |
Required | Reference or id of a HTML element that this dijit is rendered into. This parameter is always required. |
options
properties: < > alphabet |
Optional | Defines the values that label each stop. When false no text labels are displayed. |
< > autoSolve |
Optional | When true, solve will start when the last destination is complete and enter key is hit. Default is true. |
< > canModifyStops |
Optional | Display the 'Add Destination' button. This button allows users add additional stops. The default value is true. |
< > centerAtSegmentStart |
Optional | Center the map at the start of the selected route segment. Default value is true. |
< > directionsLanguage |
Optional | The locale used for the directions. For example "EN-US", for United States English. |
< > directionsLengthUnits |
Optional | Length units. Supported units are miles and kilometers. Use the constant units or their string equivalents ("esriKilometers" | "esriMiles").
Known values: esriUnits.KILOMETERS | esriUnits.MILES |
< > dragging |
Optional | Enable the dragging of stop locations on the map. When true stops can be dragged to a new location and the route will be recalculated. The default value is true. |
< > focusOnNewStop |
Optional | Focus the cursor in the stop input when a new stop is added. The default value is true. |
< > fromSymbol |
Optional | The symbol that is used to denote the start location on the map. Default symbol is a green marker: |
< > fromSymbolDrag |
Optional | The symbol that displays when the from location is dragged to a new location. Default symbol: |
< > geometryTaskUrl |
Optional | If available, this geometry service is used to provide latitude/longitude values for stops whose reverse geocoding did not return an address (Added at v3.11).
When using Directions widget with the ArcGIS Online Route endpoint, the widget automatically defaults to using ArcGIS Online Geometry service, so there is no need to set the geometryTaskUrl property. If the geometryTaskUrl value is omitted, and the ArcGIS Online routing service is not used, then the stop's coordinate values will display as is.
Example: geometryTaskUrl: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer" |
< > map |
Required | Reference to the map object. |
< > mapClickActive |
Optional | Activates the map-click-active toggle button when true . This indicates whether you can add a stop for each map click on startup. The default value is false . Added at version 3.13. |
< > maxStops |
Optional | Maximum number of stops. Default is 20. |
< > minStops |
Optional | Minimum number of stops. Default is 2. |
< > optimalRoute |
Optional | When true, stops on the route are re-ordered to provide an optimal route. Default is false. |
< > portalUrl |
Optional | If specified, this specifies the portal where the produced route layers are going to be stored and accessed. If this is not specified, the owning system (Portal or ArcGIS Online) of the route service will be used to store and manage route layers. |
< > printPage |
Optional | URL link to a custom print page. If set, printTemplate is not used. |
< > printTaskUrl |
Optional | If available, this print task is used to display an overview map of the route on the directions print page (Added at v3.11).
When using Directions widget with the ArcGIS Online Route endpoint, the widget automatically defaults to using ArcGIS Online Geometry service, so there is no need to set the printTaskUrl property. If the printTaskUrl value is omitted, and the ArcGIS Online routing service is not used, then no overview map will be displayed on the directions print page.
The URL needs to be for an ArcGIS Server Export Web Map Task, for example: printTaskUrl: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task" |
< > printTemplate |
Optional | HTML string for providing a custom printing page |
< > returnToStart |
Optional | When true, the route will return to start point. Default is false. |
< > routeSymbol |
Optional | Define the symbol used to draw the route on the map. |
< > routeTaskUrl |
Optional | Specify the service that will be used to calculate directions. The Directions widget uses the World Network Analysis as 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 that service. |
< > searchOptions |
Optional | Used to define optional search options. View the Search help for details on the object's properties.
If searchOptions is set at runtime (after the widget's initialization), all of the populated stops will get updated with the new sources[] array.
NOTE: Prior to 3.14, this option was named 'geocoderOptions'. |
< > segmentInfoTemplate |
Optional | Define the info template for the popup that appears when the popup for a route segment is displayed. By default the direction details for that route segment are displayed. |
< > segmentSymbol |
Optional | Specify the symbol used to render the individual route segments that display on the map when a direction step is clicked. |
< > showActivateButton |
Optional | Defines whether the Directions widget will show the map-click-active toggle button. Default is true . |
< > showBarriersButton |
Optional | Indicates whether to expose barriers when using the widget. Default value is true . |
< > showClearButton |
Optional | If true, the Clear button is shown. Default is false. |
< > showMilesKilometersOption |
Optional | If true, the toggle button group allowing user to choose between Miles and Kilometers is shown. Default is true. |
< > showOptimalRouteOption |
Optional | When true, the Optimize order option is shown. Default is true. |
< > showPrintPage |
Optional | When true the 'Print' button is displayed that allows users to display driving directions in a print page. Default value is true. |
< > showReturnToStartOption |
Optional | When true, the Return to start option is shown. Default is true. |
< > showReverseStopsButton |
Optional | Display the 'Show Reverse Stops' button. This button allows users to click to reverse the origin and destination stops. The default value is true. |
< > showSaveButton |
Optional | Applicable if the widget works with a Network Analyst Server federated with ArcGIS Online or Portal. In addition, the widget may display this button in instances where it's needed to save and share routes with Navigator or other client applications. The default value is false . |
< > showSegmentHighlight |
Optional | Highlight the route segment when a directions step is clicked. Default value is true. |
< > showSegmentPopup |
Optional | Display a popup with segment details when a direction step is clicked. The default value is true. |
< > showTrafficOption |
Optional | When true, the Use traffic option is shown. Default is true. |
< > showTravelModesOption |
Optional | If true, and six Standard Travel Modes are supported by the service and accessible using current credentials, then two toggle button groups are shown: one to allow user to choose between Driving a Car, a Truck, and Walking, and one more group to choose between Fastest and Shortest routes. Default is true. |
< > solving |
Optional | True if currently calculating the route from the routing service. |
< > stopGraphics |
Optional | List of graphics used to display the point marker. |
< > stopSymbol |
Optional | The symbol that displays on the map for the locations between the origin and final destination locations. Default symbol: bluePoint.png |
< > stopSymbolDrag |
Optional | The symbol that displays when an intermediate location is dragged to a new location. Default symbol: bluePointMove.png |
< > stops |
Optional | An array of points that define the stop locations. See the stop parameter in the addStop() method for information on how to specify each point. |
< > stopsInfoTemplate |
Optional | Define the info template for the popup that appears when a stop is clicked. By default it displays the stop address information. |
< > textGraphics |
Optional | List of graphics used to display the text over the point marker. |
< > textSymbolColor |
Optional | The text color for the text that appears for each destination. Default color is white (255,255,255). |
< > textSymbolFont |
Optional | The font used for the text that displays on the map for each stop location. (A,B,C). Default is 11px normal weight with a font family of "Arial, Helvetica, sans-serif". |
< > textSymbolOffset |
Optional | Define an x and/or y offset for the text symbols that are used for the stop locations on the map.
{ x: 10, y: 20 } |
< > theme |
Optional | Specify a theme for the widget. The default value is "simpleDirections". To create a custom look for the widget define your own theme using css and specify the theme class name here. |
< > toSymbol |
Optional | The symbol that is used to denote the final destination location on the map. Default symbol: redPoint.png |
< > toSymbolDrag |
Optional | The symbol that displays when an final destination location is dragged to a new location. Default symbol: redPointMove.png |
< > traffic |
Optional | When true, real-time traffic is used to plan the route. Default is false. |
< > trafficLayer |
Optional | The traffic layer used for real-time traffic. |
var directionsWidget = new Directions({ map: map },"dir"); directionsWidget.startup();
DirectionsFeatureSet
> directionsrequire(["esri/dijit/Directions"],function( arcgisPortal ){ function displayDirections(){ var directions = directionsWidget.directions; } .... });
Boolean
> mapClickActivetrue | false
false
directions.set("mapClickActive", true);
Boolean
> maxStopsReachedtrue | false
Graphic
> mergedRouteGraphicString
> portalUrlRouteTask
> routeTaskObject
> serviceDescriptionBoolean
> showActivateButtontrue | false
true
Boolean
> showBarriersButtontrue
Boolean
> showClearButtontrue | false
false
Boolean
> showMilesKilometersOptiontrue | false
true
Boolean
> showSaveButtonfalse
Boolean
> showTravelModesOptiontrue | false
true
Graphic[]
> stopsString
> themeString
> travelModeNamesetTravelMode()
method to change Travel mode programmatically. (Added at v3.10)Promise
< > stop |
Required | A point that defines the stop location. The point can be specified in four ways:
|
< > index |
Optional | The index location where the stop should be added. |
Promise
< > index |
Required | The index of the segment where the map should be centered. |
destroy
when the widget is no longer needed by the application. Promise
String[]
< > index |
Required | The index of the route segment to highlight. |
Promise
< > itemId |
Required | The itemId of the stored route layer from either ArcGIS Online or Portal. |
//load the item id of the route service from either ArcGIS Online or Portal directionsWidget.loadRoute("5544837f56bc4b95b60c2408c40ef50c").then(function (res){ console.log("OK", res); }, function (err) { console.log("ERR", err); })
Promise
< > index |
Required | The index of the stop to remove. |
Promise
Promise
directionsWidget.serviceDescription.directionsSupportedLanguages
.Promise
< > locale |
Required | The locale used for the directions. For example "EN-US" , for United States English. |
Promise
< > units |
Required | The length units used for the directions widget. The complete list is: esriFeet , esriKilometers , esriMeters , esriMiles , esriNauticalMiles , and esriYards . |
directionsWidget.getSupportedTravelModeNames()
method. (Added at v3.10)Promise
< > travelModeName |
Required | Travel mode. |
Promise
Promise
< > stops |
Required | An array of points that define the stop locations. See the stop parameter in the addStop() method for information on how to specify each point. |
Promise
< > stopIndex |
Required | Index of the stop that will point to the user's current location. |
< > index |
Required | The index for a route segment. |
require([ "esri/dijit/Directions", ... ], function(Directions, ... ) { var directions = new Directions({ map: map}, "directionsDiv"); directions.startup(); directions.on("activate", function(event){ // do something }); ... });
require([ "esri/dijit/Directions", ... ], function(Directions, ... ) { var directions = new Directions({ map: map}, "directionsDiv"); directions.startup(); directions.on("deactivate", function(event){ // do something }); ... });
< > result |
The result from the route task including route directions. See the RouteResult class for more details. |
Save
or Save as New
button and subsequently does not have permission to create an item in ArcGIS Online or Portal. The resulting object contains the user-specified layer name and the layerInfo object with corresponding feature collection. (Added at v3.17)mapClickActive
property. (Added at v3.13)< > mapClickActive |
Indicates the state of the map-click-active button. A value of true shows the button is activated and a value of false indicates it is deactivated. |
require([ "esri/dijit/Directions", ... ], function(Directions, ...){ var directionsWidget = new Directions({ map: map }, "directionsDiv"); directionsWidget.startup(); directionsWidget.on("map-click-active", function(state){ if(state.mapClickActive === true) //do something if the map-click-active button is activated if(state.mapClickActive === false) //do something if the map-click-active button is deactivated }); });
Save
or Save as New
button for the first time in order to store a new route in either ArcGIS Online or Portal. The user must have permission to create Portal items (addItem
operation). (Added at v3.17)Save
button. The user must have permission to create Portal items (update
operation). (Added at v3.17)< > graphic |
The graphic for the highlighted route segment. |
< > graphic |
The graphic for the selected route segment. |