Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
esri/workers
Class: Directions

require(["esri/dijit/Directions"], function(Directions) { /* code goes here */ });

Description

(Added at v3.4)
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. If a map is associated with the widget, the Directions widget route and stops are displayed on the map. When searching for an address, the location of the points used to navigate depends on the 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.

Stops can be defined as strings or points and can be added to the widget as a constructor option. For example, if you want to provide directions to your business you can set your business address to the default destination. If four or more stops are added then the options menu is displayed allowing users to choose to find the optimal order between stops. The widget offers standard directions capabilities like print and reverse route.

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 the service using the Directions widget routeTaskUrl constructor parameter.

Samples

Search for samples that use this class.

Constructors

NameSummary
new Directions(options, srcNodeRef)Creates a new Directions dijit using the given DOM node.

CSS

esri/dijit/Directions | Download source

NameDescription
esriDirectionsContainerClass applied to the div that contains the directions widgets including the stops and the directions.
esriFindOptimalOrderOptionClass assigned to the list item that contains the 'Find Optimal order' checkbox.
esriInfoWindowRouteThe class assigned to the div that contains the content displayed in the popup.
esriPrintBarClass assigned to the div on the print page that contains the print button.
esriPrintButtonClass associated with the print button that appears on the print page.
esriPrintFooterClass assigned to the div that contains the legal disclaimer displayed in the footer section of the directions print page.
esriPrintHeaderClass 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.
esriPrintLogoClass assigned to the image tag that displays the esri logo on the directions print page.
esriPrintMainClass assigned to the container that contains the direction information on the directions print page.
esriPrintNameClass 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;
}
esriPrintPageClass assigned to the print page container.
esriResultsButtonsContainerDefines the styles for the container that holds the buttons.
esriResultsContainerClass assigned to the div that contains the direction text results.
esriResultsLoadingDefine the loading icon that displays when driving directions are being calculated.
.simpleDirections .esriResultsLoading .esriResultsContainer {
    background: url("images/loading.gif") 
    height: 32px;
}
esriResultsPrintClass assigned to the "Print" button.
esriResultsRouteNameClass assigned to the div that contains the route name details. This text is used on the print page.
esriResultsSummaryClass 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;
}
esriResultsViewFullRouteClass assigned to the 'Zoom to full route' button.
/*Change the color of the Zoom to full route text*/
.simpleDirections .esriResultsViewFullRoute{
  color:#999;
}
esriRouteClass 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.
esriRouteIconClass assigned to the div that contains the route icon maneuver image.
esriRouteIconColumnClass assigned to the column in the directions table that contains the maneuver icon.
esriRouteInfoClass 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;
}
esriRouteLengthClass 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;
}
esriRouteOriginThe origin route styles.
esriRouteTextClass assigned to the div that contains the text for one step of the route directions.
esriRouteTextColumnThe class assigned to the column in the directions detail table that displays text information about one step of the route.
esriRoutesClass assigned to the container that contains the table of driving directions.
esriRoutesContainerStyles for the container that holds the route results.
esriRoutesErrorClass assigned to the div that displays error messages.
esriStopThe class assigned to the individual rows in the stops table.
esriStopDestinationClass 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);
}
esriStopGeocoderColumnClass assigned to the column in the stops table that contains the geocoder for the stop.
esriStopIconDefines the column that contains the stop icon in the stop container.
esriStopIconColumnThe class assigned to the column in the stops table that contains the stop icons.
esriStopIconRemoveClass assigned to the div that contains the 'Remove Stop' button.
esriStopIconRemoveColumnClass applied to the column that contains the remove stop icon in the stops container.
esriStopOriginClass 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);
}
esriStopReverseColumnClass assigned to the column in the stops table that contains the 'reverse directions' button.
esriStopsClass assigned to the table that contains the route stops.
esriStopsAddClass assigned to the 'Add destination' link.
esriStopsAddDestinationThe class assigned to the div that contains the 'Add destination' link.
/* Set the text color to orange */
.esriStopsAddDestination{
    color: #FFA500;
}
esriStopsButtonsClass associated with the div that contains the 'Add Destination' link.
/*Change the background color of the button*/
.esriStopsGetDirections {
    background: #b5bdc8; 
}
esriStopsContainerClass applied to the div that contains the stops and 'Get Directions' button.
.esriStopsContainer {
   margin: 0;
}
esriStopsGetDirectionsThe class assigned to the 'Get Directions' button.
esriStopsGetDirectionsContainerThe class assigned to the div that contains the 'Get Directions' button.
esriStopsOptionsEnabledClass added to the directions container when 4 or more stops are added which enables the options menu with the 'Find optimal order' checkbox.
esriStopsOptionsMenuThe class assigned to the div that contains additional routing options like 'Find optimal order'.
esriStopsRemovableClass 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.
esriStopsReverseDefines the styles associated with the 'Reverse Directions' button.
.esriStopsReverse {
    background: url("images/customImage.png");
    cursor: pointer;
    height: 30px;
    margin: 0;
    width: 30px;
}

Properties

NameTypeSummary
directionsDirectionsFeatureSetRead-only: Get the directions to all the locations along the route.
mapClickActiveBooleanIndicates whether the Directions widget adds a stop on each map click.
maxStopsReachedBooleanRead-only: When true, the maximum number of stops for the route has been reached.
mergedRouteGraphicGraphicRead-only: The graphic for the calculated route.
portalUrlStringIf specified, this specifies the portal where the produced route layers are going to be stored and accessed.
routeTaskRouteTaskRouting task for the widget.
serviceDescriptionObjectRead-only: The Service Description object returned by the Route REST Endpoint.
showActivateButtonBooleanIndicates whether the Directions widget will display the map-click-active toggle button.
showBarriersButtonBooleanIndicates whether to expose barriers when using the widget.
showClearButtonBooleanIf true, the Clear button is shown.
showMilesKilometersOptionBooleanIf true, the toggle button group allowing user to choose between Miles and Kilometers is shown.
showSaveButtonBooleanApplicable if the widget works with a Network Analyst Server federated with ArcGIS Online or Portal.
showTravelModesOptionBooleanIf 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.
stopsGraphic[]An array of graphics that define the stop locations along the route.
themeStringThe css theme used to style the widget.
travelModeNameStringRead-only: If Directions Widget runs with Travel Modes enabled, this property returns current Travel Mode name.

Methods

NameReturn typeSummary
activate()NoneDeprecated at v3.13.
addStop(stop, index?)PromiseAdd a stop to the directions widget at the specified index location.
addStops(stops, index?)PromiseAdd multiple stops to the directions list starting at the specified location.
centerAtSegmentStart(index)NoneCenter the map at the start of the specified route segment.
clearDirections()NoneRemove the route directions from the directions list.
deactivate()NoneDeprecated at v3.13.
destroy()NoneDestroy the Directions widget.
getDirections()PromiseCalculate 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)NoneHighlight the specified route segment on the map.
loadRoute(itemId)PromiseLoads a stored route layer from either ArcGIS Online or Portal.
removeStop(index)PromiseRemove the stop at the specified index.
removeStops()PromiseRemoves the existing stops from the directions widget.
reset()PromiseResets the directions widget removing any directions, stops and map graphics.
setDirectionsLanguage(locale)PromiseSpecify the language used for the directions.
setDirectionsLengthUnits(units)PromiseSpecify the length units used for the directions widget.
setTravelMode(travelModeName)PromiseIf widget runs with Travel Modes enabled, call this method to switch to particular Travel mode programmatically.
startup()NoneFinalizes the creation of this dijit.
unhighlightSegment()NoneRemoves the highlight symbol from the currently highlighted route segment.
updateStop(stop, index)PromiseUpdate the existing stop at the specified index location.
updateStops(stops)PromiseUpdate multiple stops in the directions widget by specifying an array of stops information.
useMyCurrentLocation(stopIndex)PromiseSets the corresponding stop to point at the user's current location.
zoomToFullRoute()NoneZoom so that the full route is displayed within the current map extent.
zoomToSegment(index)NoneZoom to the specified route segment.

Events

[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.

Events

NameEvent ObjectSummary
activateDeprecated at v3.13.
deactivateDeprecated at v3.13.
directions-clearFires when the directions display is reset.
directions-finish
{
  result: <RouteResult>
}
Fires when the route service has calculated the route and the directions are ready for display.
directions-startFires when the route services starts to calculate the route.
feature-collection-createdFires 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.
loadFires when the directions widget has fully loaded.
map-click-active
{
  mapClickActive: <Boolean>
}
Fires when the widget starts or stops listening for map clicks.
route-item-createdFires 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-updatedFires when a existing route layer item is successfully updated in ArcGIS Online or Portal after user clicks the Save button.
segment-highlight
{
  graphic: <Graphic>
}
Fired when you hover over a route segment in the directions display.
segment-select
{
  graphic: <Graphic>
}
Fires when a route segment is selected in the directions display.
Constructor Details

new Directions(options, srcNodeRef)

Creates a new Directions dijit using the given DOM node.
Parameters:
<Object> options Required Various options to configure this dijit. See the list below for details.
<Node | String> srcNodeRef Required Reference or id of a HTML element that this dijit is rendered into. This parameter is always required.
options properties:
<String | String[] | Boolean> alphabet Optional Defines the values that label each stop. When false no text labels are displayed.
<Boolean> autoSolve Optional When true, solve will start when the last destination is complete and enter key is hit. Default is true.
<Boolean> canModifyStops Optional Display the 'Add Destination' button. This button allows users add additional stops. The default value is true.
<Boolean> centerAtSegmentStart Optional Center the map at the start of the selected route segment. Default value is true.
<String> directionsLanguage Optional The locale used for the directions. For example "EN-US", for United States English.
<String> 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
<Boolean> 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.
<Boolean> focusOnNewStop Optional Focus the cursor in the stop input when a new stop is added. The default value is true.
<PictureMarkerSymbol> fromSymbol Optional The symbol that is used to denote the start location on the map. Default symbol is a green marker:
<PictureMarkerSymbol> fromSymbolDrag Optional The symbol that displays when the from location is dragged to a new location. Default symbol:
<String> 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> map Required Reference to the map object.
<Boolean> 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.
<Number> maxStops Optional Maximum number of stops. Default is 20.
<Number> minStops Optional Minimum number of stops. Default is 2.
<Boolean> optimalRoute Optional When true, stops on the route are re-ordered to provide an optimal route. Default is false.
<String> 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.
<String> printPage Optional URL link to a custom print page. If set, printTemplate is not used.
<String> 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"
<String> printTemplate Optional HTML string for providing a custom printing page
<Boolean> returnToStart Optional When true, the route will return to start point. Default is false.
<SimpleLineSymbol> routeSymbol Optional Define the symbol used to draw the route on the map.
<String> 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.
<Object> 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'.

<InfoTemplate> 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.
<SimpleLineSymbol> segmentSymbol Optional Specify the symbol used to render the individual route segments that display on the map when a direction step is clicked.
<Boolean> showActivateButton Optional Defines whether the Directions widget will show the map-click-active toggle button. Default is true.
<Boolean> showBarriersButton Optional Indicates whether to expose barriers when using the widget. Default value is true.
<Boolean> showClearButton Optional If true, the Clear button is shown. Default is false.
<Boolean> showMilesKilometersOption Optional If true, the toggle button group allowing user to choose between Miles and Kilometers is shown. Default is true.
<Boolean> showOptimalRouteOption Optional When true, the Optimize order option is shown. Default is true.
<Boolean> showPrintPage Optional When true the 'Print' button is displayed that allows users to display driving directions in a print page. Default value is true.
<Boolean> showReturnToStartOption Optional When true, the Return to start option is shown. Default is true.
<Boolean> 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.
<Boolean> 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.
<Boolean> showSegmentHighlight Optional Highlight the route segment when a directions step is clicked. Default value is true.
<Boolean> showSegmentPopup Optional Display a popup with segment details when a direction step is clicked. The default value is true.
<Boolean> showTrafficOption Optional When true, the Use traffic option is shown. Default is true.
<Boolean> 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.
<Boolean> solving Optional True if currently calculating the route from the routing service.
<Graphic[]> stopGraphics Optional List of graphics used to display the point marker.
<PictureMarkerSymbol> stopSymbol Optional The symbol that displays on the map for the locations between the origin and final destination locations. Default symbol: bluePoint.png
<PictureMarkerSymbol> stopSymbolDrag Optional The symbol that displays when an intermediate location is dragged to a new location. Default symbol: bluePointMove.png
<Point[] | Number[][] | String[] | Object[]> 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.
<InfoTemplate> stopsInfoTemplate Optional Define the info template for the popup that appears when a stop is clicked. By default it displays the stop address information.
<Graphic[]> textGraphics Optional List of graphics used to display the text over the point marker.
<Color> textSymbolColor Optional The text color for the text that appears for each destination. Default color is white (255,255,255).
<Font> 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".
<Object> 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
}
<String> 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.
<PictureMarkerSymbol> toSymbol Optional The symbol that is used to denote the final destination location on the map. Default symbol: redPoint.png
<PictureMarkerSymbol> toSymbolDrag Optional The symbol that displays when an final destination location is dragged to a new location. Default symbol: redPointMove.png
<Boolean> traffic Optional When true, real-time traffic is used to plan the route. Default is false.
<ArcGISDynamicMapServiceLayer> trafficLayer Optional The traffic layer used for real-time traffic.
Sample:
  var directionsWidget = new Directions({
    map: map
   },"dir");
  directionsWidget.startup();
Property Details
Read-only: Get the directions to all the locations along the route. See DirectionsFeatureSet for more details.
Sample:
 
require(["esri/dijit/Directions"],function(
    arcgisPortal
  ){
    function displayDirections(){
      var directions = directionsWidget.directions;
    }

  ....
});

<Boolean> mapClickActive

Indicates whether the Directions widget adds a stop on each map click. Can be used to programmatically change the map-click-active button's state between activated and deactivated. (Added at v3.13)
Known values: true | false
Default value: false
Sample:
directions.set("mapClickActive", true);

<Boolean> maxStopsReached

Read-only: When true, the maximum number of stops for the route has been reached.
Known values: true | false

<Graphic> mergedRouteGraphic

Read-only: The graphic for the calculated route.

<String> portalUrl

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. (Added at v3.17)

<RouteTask> routeTask

Routing task for the widget. (Added at v3.8)

<Object> serviceDescription

Read-only: The Service Description object returned by the Route REST Endpoint. This object contains service specific details like available Cost attributes, supported Restrictions, default Attribute Parameter Values, Service Limits (like maximum input stop count), default Impedance Attribute, etc. This information is useful when implementing complex logistics scenarios operating with limitations or preferences on vehicle or stop properties, for example avoiding toll roads, dealing with hazardous materials, working with stop service times, etc. (Added at v3.10)

<Boolean> showActivateButton

Indicates whether the Directions widget will display the map-click-active toggle button. (Added at v3.13)
Known values: true | false
Default value: true

<Boolean> showBarriersButton

Indicates whether to expose barriers when using the widget. (Added at v3.20)
Default value: true

<Boolean> showClearButton

If true, the Clear button is shown. (Added at v3.10)
Known values: true | false
Default value: false

<Boolean> showMilesKilometersOption

If true, the toggle button group allowing user to choose between Miles and Kilometers is shown. (Added at v3.10)
Known values: true | false
Default value: true

<Boolean> showSaveButton

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. (Added at v3.17)
Default value: false

<Boolean> showTravelModesOption

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. (Added at v3.10)
Known values: true | false
Default value: true

<Graphic[]> stops

An array of graphics that define the stop locations along the route.

<String> theme

The css theme used to style the widget.

<String> travelModeName

Read-only: If Directions Widget runs with Travel Modes enabled, this property returns current Travel Mode name. Use setTravelMode() method to change Travel mode programmatically. (Added at v3.10)
Method Details

activate()

Deprecated at v3.13. Use the mapClickActive property instead. See the map-click-active event for more details. (Added at v3.12)

addStop(stop, index?)

Add a stop to the directions widget at the specified index location. If no index value is provided the stop will be added as the last stop. This method will add an extra stop to the list. To update an existing stop, see the updateStop method.
Return type: Promise
Parameters:
<Point | Number[] | String | Object> stop Required A point that defines the stop location. The point can be specified in four ways:
  • esri.geometry.Point
  • The longitude and latitude as an array of number. For example: [-118, 34].
  • A string of location. For example: "Redlands, CA".
  • A location object returned by the geocoder /find method. See the Geocoder REST API documentation for more information. For example:
    {
      "name": "380 New York St, Redlands, CA, 92373",
      "extent": {
        "xmin": -117.196647,
        "ymin": 34.056162,
        "xmax": -117.194647,
        "ymax": 34.058162000000003
      },
      "feature": {
        "geometry": {
          "x": -117.19564614675159,
          "y": 34.057161575247562
        },
        "attributes": {
          "Score": 100,
          "Addr_Type": "PointAddress"
        }
      }
    }
<Number> index Optional The index location where the stop should be added.

addStops(stops, index?)

Add multiple stops to the directions list starting at the specified location. If no index value is provided the stops will be added to the end of the directions list. To update existing stops, see the updateStops method.
Return type: Promise
Parameters:
<Point[] | Number[][] | String[] | Object[]> 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.
<Number> index Optional The index location where the stops will be added.

centerAtSegmentStart(index)

Center the map at the start of the specified route segment.
Parameters:
<Number> index Required The index of the segment where the map should be centered.

clearDirections()

Remove the route directions from the directions list. The route and locations persist on the map.

deactivate()

Deprecated at v3.13. Use the mapClickActive property instead. See the map-click-active event for more details. (Added at v3.12)

destroy()

Destroy the Directions widget. Call destroy when the widget is no longer needed by the application.

getDirections()

Calculate the route to the input locations and display the list of directions. If a map is specified display the calculated route and locations as graphics on the map.
Return type: Promise

getSupportedTravelModeNames()

If widget runs with Travel Modes enabled, call this method to obtain the list of supported Travel Mode names. These names can be used later to programmatically switch between different Travel Modes. (Added at v3.10)
Return type: String[]

highlightSegment(index)

Highlight the specified route segment on the map.
Parameters:
<Number> index Required The index of the route segment to highlight.

loadRoute(itemId)

Loads a stored route layer from either ArcGIS Online or Portal (Added at v3.17)
Return type: Promise
Parameters:
<String> itemId Required The itemId of the stored route layer from either ArcGIS Online or Portal.
Sample:
//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);
})

removeStop(index)

Remove the stop at the specified index.
Return type: Promise
Parameters:
<Number> index Required The index of the stop to remove.

removeStops()

Removes the existing stops from the directions widget. If a route has already been calculated based on the input stops the route graphics and directions are not removed.
Return type: Promise

reset()

Resets the directions widget removing any directions, stops and map graphics.
Return type: Promise

setDirectionsLanguage(locale)

Specify the language used for the directions. The supported languages can be requested from either the Route Service REST API, or from the widget itself. For example, directionsWidget.serviceDescription.directionsSupportedLanguages.
Return type: Promise
Parameters:
<String> locale Required The locale used for the directions. For example "EN-US", for United States English.

setDirectionsLengthUnits(units)

Specify the length units used for the directions widget.
Return type: Promise
Parameters:
<String> units Required The length units used for the directions widget. The complete list is: esriFeet, esriKilometers, esriMeters, esriMiles, esriNauticalMiles, and esriYards.

setTravelMode(travelModeName)

If widget runs with Travel Modes enabled, call this method to switch to particular Travel mode programmatically. To obtain the list of supported Travel Modes call directionsWidget.getSupportedTravelModeNames() method. (Added at v3.10)
Return type: Promise
Parameters:
<String> travelModeName Required Travel mode.

startup()

Finalizes the creation of this dijit. This method should be called after the constructor for this dijit is called and before letting the users interact with it.

unhighlightSegment()

Removes the highlight symbol from the currently highlighted route segment.

updateStop(stop, index)

Update the existing stop at the specified index location. To add a new stop, see the addStop method.
Return type: Promise
Parameters:
<Point | Number[] | String | Object> stop Required A point that defines the stop location. See the stop parameter in the addStop() method for information on how to specify it.
<Number> index Required The index of the stop to update.

updateStops(stops)

Update multiple stops in the directions widget by specifying an array of stops information. To add new stops, see the addStops method.
Return type: Promise
Parameters:
<Point[] | Number[][] | String[] | Object[]> 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.

useMyCurrentLocation(stopIndex)

Sets the corresponding stop to point at the user's current location. (Added at v3.13)
Return type: Promise
Parameters:
<Number> stopIndex Required Index of the stop that will point to the user's current location.

zoomToFullRoute()

Zoom so that the full route is displayed within the current map extent.

zoomToSegment(index)

Zoom to the specified route segment.
Parameters:
<Number> index Required The index for a route segment.
Event Details
[ On Style Events | Connect Style Event ]

activate

Deprecated at v3.13. Use map-click-active instead. (Added at v3.13)
Sample:
require([
  "esri/dijit/Directions", ... 
], function(Directions, ... ) {
  var directions = new Directions({
    map: map},
    "directionsDiv");
  directions.startup();

  directions.on("activate", function(event){
    // do something
  });
  ...
});

deactivate

Deprecated at v3.13. Use map-click-active instead. (Added at v3.13)
Sample:
require([
  "esri/dijit/Directions", ... 
], function(Directions, ... ) {
  var directions = new Directions({
    map: map},
    "directionsDiv");
  directions.startup();

  directions.on("deactivate", function(event){
    // do something
  });
  ...
});

directions-clear

Fires when the directions display is reset. (Added at v3.6)
See also: reset()

directions-finish

Fires when the route service has calculated the route and the directions are ready for display. (Added at v3.6)
Event Object Properties:
<RouteResult> result The result from the route task including route directions. See the RouteResult class for more details.

directions-start

Fires when the route services starts to calculate the route. (Added at v3.6)

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. The resulting object contains the user-specified layer name and the layerInfo object with corresponding feature collection. (Added at v3.17)

load

Fires when the directions widget has fully loaded. (Added at v3.6)

map-click-active

Fires when the widget starts or stops listening for map clicks. The change of this state can be triggered through the map-click-active toggle button, or programmatically through the mapClickActive property. (Added at v3.13)
Event Object Properties:
<Boolean> 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.
Sample:
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
  });
});

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. The user must have permission to create Portal items (addItem operation). (Added at v3.17)

route-item-updated

Fires when a existing route layer item is successfully updated in ArcGIS Online or Portal after user clicks the Save button. The user must have permission to create Portal items (update operation). (Added at v3.17)

segment-highlight

Fired when you hover over a route segment in the directions display. (Added at v3.6)
Event Object Properties:
<Graphic> graphic The graphic for the highlighted route segment.

segment-select

Fires when a route segment is selected in the directions display. (Added at v3.6)
Event Object Properties:
<Graphic> graphic The graphic for the selected route segment.
Show Modal