Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/opsdashboard
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: Directions
[ AMD Module Require | Legacy Module Require ]
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. 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
| Name | Summary |
|---|---|
| new Directions(options, srcNodeRef) | Creates a new Directions dijit using the given DOM node. |
CSS
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;
}
|
Properties
| 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. |
Methods
| 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. |
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
| 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. |
Constructor Details
Creates a new Directions dijit using the given DOM node.
Parameters:
< |
Required | Various options to configure this dijit. See the list below for details. |
< |
Required | Reference or id of a HTML element that this dijit is rendered into. This parameter is always required. |
options properties: < |
Optional | Defines the values that label each stop. When false no text labels are displayed. |
< |
Optional | When true, solve will start when the last destination is complete and enter key is hit. Default is true. |
< |
Optional | Display the 'Add Destination' button. This button allows users add additional stops. The default value is true. |
< |
Optional | Center the map at the start of the selected route segment. Default value is true. |
< |
Optional | The locale used for the directions. For example "EN-US", for United States English. |
< |
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 |
< |
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. |
< |
Optional | Focus the cursor in the stop input when a new stop is added. The default value is true. |
< |
Optional | The symbol that is used to denote the start location on the map. Default symbol is a green marker:  |
< |
Optional | The symbol that displays when the from location is dragged to a new location. Default symbol:  |
< |
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" |
< |
Required | Reference to the map object. |
< |
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. |
< |
Optional | Maximum number of stops. Default is 20. |
< |
Optional | Minimum number of stops. Default is 2. |
< |
Optional | When true, stops on the route are re-ordered to provide an optimal route. Default is false. |
< |
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. |
< |
Optional | URL link to a custom print page. If set, printTemplate is not used. |
< |
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" |
< |
Optional | HTML string for providing a custom printing page |
< |
Optional | When true, the route will return to start point. Default is false. |
< |
Optional | Define the symbol used to draw the route on the map. |
< |
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. |
< |
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'. |
< |
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. |
< |
Optional | Specify the symbol used to render the individual route segments that display on the map when a direction step is clicked. |
< |
Optional | Defines whether the Directions widget will show the map-click-active toggle button. Default is true. |
< |
Optional | Indicates whether to expose barriers when using the widget. Default value is true. |
< |
Optional | If true, the Clear button is shown. Default is false. |
< |
Optional | If true, the toggle button group allowing user to choose between Miles and Kilometers is shown. Default is true. |
< |
Optional | When true, the Optimize order option is shown. Default is true. |
< |
Optional | When true the 'Print' button is displayed that allows users to display driving directions in a print page. Default value is true. |
< |
Optional | When true, the Return to start option is shown. Default is true. |
< |
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. |
< |
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. |
< |
Optional | Highlight the route segment when a directions step is clicked. Default value is true. |
< |
Optional | Display a popup with segment details when a direction step is clicked. The default value is true. |
< |
Optional | When true, the Use traffic option is shown. Default is true. |
< |
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. |
< |
Optional | True if currently calculating the route from the routing service. |
< |
Optional | List of graphics used to display the point marker. |
< |
Optional | The symbol that displays on the map for the locations between the origin and final destination locations. Default symbol: bluePoint.png |
< |
Optional | The symbol that displays when an intermediate location is dragged to a new location. Default symbol: bluePointMove.png |
< |
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. |
< |
Optional | Define the info template for the popup that appears when a stop is clicked. By default it displays the stop address information. |
< |
Optional | List of graphics used to display the text over the point marker. |
< |
Optional | The text color for the text that appears for each destination. Default color is white (255,255,255). |
< |
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". |
< |
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
}
|
< |
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. |
< |
Optional | The symbol that is used to denote the final destination location on the map. Default symbol: redPoint.png |
< |
Optional | The symbol that displays when an final destination location is dragged to a new location. Default symbol: redPointMove.png |
< |
Optional | When true, real-time traffic is used to plan the route. Default is false. |
< |
Optional | The traffic layer used for real-time traffic. |
Sample:
var directionsWidget = new Directions({
map: map
},"dir");
directionsWidget.startup();Property Details
<DirectionsFeatureSet
DirectionsFeatureSetRead-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
BooleanIndicates 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 | falseDefault value:
falseSample:
directions.set("mapClickActive", true);
<Boolean
BooleanRead-only: When true, the maximum number of stops for the route has been reached.
Known values:
true | false<Graphic
GraphicRead-only: The graphic for the calculated route.
<String
StringIf 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
RouteTaskRouting task for the widget. (Added at v3.8)
<Object
ObjectRead-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
BooleanIndicates whether the Directions widget will display the map-click-active toggle button. (Added at v3.13)
Known values:
true | falseDefault value:
true<Boolean
BooleanIndicates whether to expose barriers when using the widget. (Added at v3.20)
Default value:
true<Boolean
BooleanIf true, the Clear button is shown. (Added at v3.10)
Known values:
true | falseDefault value:
false<Boolean
BooleanIf true, the toggle button group allowing user to choose between Miles and Kilometers is shown. (Added at v3.10)
Known values:
true | falseDefault value:
true<Boolean
BooleanApplicable 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
BooleanIf 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 | falseDefault value:
true<Graphic[]
Graphic[]An array of graphics that define the stop locations along the route.
<String
StringThe css theme used to style the widget.
<String
StringRead-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
Deprecated at v3.13. Use the mapClickActive property instead. See the map-click-active event for more details. (Added at v3.12)
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:
PromiseParameters:
< |
Required | A point that defines the stop location. The point can be specified in four ways:
|
< |
Optional | The index location where the stop should be added. |
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:
PromiseCenter the map at the start of the specified route segment.
Parameters:
< |
Required | The index of the segment where the map should be centered. |
Remove the route directions from the directions list. The route and locations persist on the map.
Deprecated at v3.13. Use the mapClickActive property instead. See the map-click-active event for more details. (Added at v3.12)
Destroy the Directions widget. Call
destroy when the widget is no longer needed by the application. 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:
PromiseIf 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[]Highlight the specified route segment on the map.
Parameters:
< |
Required | The index of the route segment to highlight. |
Loads a stored route layer from either ArcGIS Online or Portal (Added at v3.17)
Return type:
PromiseParameters:
< |
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);
})
Remove the stop at the specified index.
Return type:
PromiseParameters:
< |
Required | The index of the stop to remove. |
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:
PromiseResets the directions widget removing any directions, stops and map graphics.
Return type:
PromiseSee also: on("directions-clear")
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:
PromiseParameters:
< |
Required | The locale used for the directions. For example "EN-US", for United States English. |
Specify the length units used for the directions widget.
Return type:
PromiseParameters:
< |
Required | The length units used for the directions widget. The complete list is: esriFeet, esriKilometers, esriMeters, esriMiles, esriNauticalMiles, and esriYards. |
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:
PromiseParameters:
< |
Required | Travel mode. |
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.
Update the existing stop at the specified index location. To add a new stop, see the addStop method.
Return type:
PromiseUpdate multiple stops in the directions widget by specifying an array of stops information. To add new stops, see the addStops method.
Return type:
PromiseParameters:
< |
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. |
Sets the corresponding stop to point at the user's current location. (Added at v3.13)
Return type:
PromiseParameters:
< |
Required | Index of the stop that will point to the user's current location. |
Zoom to the specified route segment.
Parameters:
< |
Required | The index for a route segment. |
Event Details
[ On Style Events | Connect Style Event ]
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
});
...
});
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
});
...
});
Fires when the route service has calculated the route and the directions are ready for display. (Added at v3.6)
Event Object Properties:
< |
The result from the route task including route directions. See the RouteResult class for more details. |
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)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:
< |
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
});
});
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)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)Fired when you hover over a route segment in the directions display. (Added at v3.6)
Event Object Properties:
< |
The graphic for the highlighted route segment. |
Fires when a route segment is selected in the directions display. (Added at v3.6)
Event Object Properties:
< |
The graphic for the selected route segment. |