ESM: import Directions from "@arcgis/core/widgets/Directions.js";
CDN: const Directions = await $arcgis.import("@arcgis/core/widgets/Directions.js");
Class: @arcgis/core/widgets/Directions
Since: ArcGIS Maps SDK for JavaScript 4.6
The Directions widget provides a way to calculate directions, between two or more input locations with a RouteLayer, using ArcGIS Online and custom Network Analysis Route services. Similar to how route works, this widget generates a route finding a least-cost path between multiple points using the routing service associated with the assigned route layer The resulting directions are displayed with detailed turn-by-turn instructions.
Directions widget uses Search to locate each stop, either by selecting a point on the map, or by entering a search term into the textbox. Search uses settings defined in Search properties. This includes the locationType, which defines the type of geocoding result that is returned, and defaults to "street".
The Directions widget requires a RouteLayer to be associated with the layer property. A RouteLayer can be programmatically created or derived from an external source like a portal item or webmap. Please note that in order to view or interact with routing inputs and results, the RouteLayer must be added to the map. Routing service and symbology is configured in the layer, specifically the url and defaultSymbols properties respectively.
It is important to note that the Directions widget will automatically assign two empty stops if the assigned RouteLayer does not have any stops defined. An empty stop is a stop without a name or location. In the UI, these empty stops will appear as a placeholder for the user to either enter a search term, or digitize a location on the map. This behavior existed in legacy mode (no RouteLayer explicitly passed to the Directions widget constructor) as well, in which the Directions widget would assign a temporary RouteLayer if one was not assigned. Additionally, there is different default symbology created for a Directions widget instantiated with and without a RouteLayer:
Directions with RouteLayerThis routing service requires authentication. If an API key is specified at the app level (see config.apiKey) or widget level (see Directions.apiKey) then this key will accompany requests to both the routing service and geocoder/reverse-geocoder. Please refer to the Search widget for more information on geocoding.
Pick a location on the mapLocations on the map can be reverse geocoded and used as stops in the route. Click the button with a crosshairs icon to associate a location with a new or existing stop. After clicking the button, click the map once. To cancel this process, press the escape key.
The resulting driving directions are automatically collapsed and can be optionally saved to a new or existing portal item. This can be achieved programically with Save and SaveAs. The Clear button calls the reset() method, which removes all stops, directions, and the solved route.
Selecting the Edit route button allows you to add/move/remove stops, add/move/remove/reshape polyline barriers. By default the route will be automatically resolve at the completion of any editing operation. For more complex routes, it may be advantageous to disable auto-solving and solve as and when needed with the dedicated solve button. Currently, this is only supported in 2D MapViews.
Note: Printing in Directions is in beta and considered experimental. The print preview dialog, in some scenarios, may not display as aniticipated. Please consider hiding the print button by setting visibleElements.printButton to false in these situations.
Examples
// 1. Add empty RouteLayer to Directions widget
// create a new empty RouteLayer
const routeLayer = new RouteLayer();
// new RouteLayer must be added to the map
// for route visualization
const map = new Map({
basemap: "topo-vector",
layers: [routeLayer]
});
// new RouteLayer must be added to Directions widget
const directionsWidget = new Directions({
view: view,
layer: routeLayer
});
// adds the Directions widget to the
// top right corner of the view
view.ui.add(directionsWidget, {
position: "top-right"
});// 2. Add RouteLayer from portal to Directions widget
// create a new RouteLayer from a portal item
const routeLayer = new RouteLayer({
portalItem: { // autocasts as new PortalItem()
id: "fd4188722f3e4e14986abca86cad80c6"
}
});
// new RouteLayer must be added to the map
// for route visualization
const map = new Map({
basemap: "topo-vector",
layers: [routeLayer]
});
// new RouteLayer must be added to Directions widget
const directionsWidget = new Directions({
view: view,
layer: routeLayer
});
// adds the Directions widget to the
// bottom right corner of the view
view.ui.add(directionsWidget, {
position: "bottom-right"
});// 3. Create a Directions widget with 2 pre-set stops
// create a new RouteLayer with 2 stops
const routeLayer = new RouteLayer({
stops: [
{ name: "Redlands, CA", geometry: { x: -117.1825, y: 34.0547 } },
{ name: "Palm Springs, CA", geometry: { x: -116.5452, y: 33.8302 } }
]
});
// new RouteLayer must be added to the map
// for route visualization
const map = new Map({
basemap: "topo-vector",
layers: [routeLayer]
});
// new RouteLayer must be added to Directions widget
const directionsWidget = new Directions({
view: view,
layer: routeLayer
});// 4. Update the empty stops that are automatically added by the Directions widget
// create a new empty RouteLayer
const routeLayer = new RouteLayer();
// new RouteLayer must be added to the map
// for route visualization
const map = new Map({
basemap: "topo-vector",
layers: [routeLayer]
});
// new RouteLayer must be added to Directions widget
const directionsWidget = new Directions({
view: view,
layer: routeLayer
});
// call the asynchronous function
directionsReady();
// asynchronous function to seed the Directions widget
// with two initials stops (Campton to Plymouth)
// instead of the empty stops
async function directionsReady(){
await directionsWidget.when();
directionsWidget.layer.stops.at(0).name = "Campton, NH";
directionsWidget.layer.stops.at(0).geometry = new Point({ x: -71.64133, y: 43.85191 });
directionsWidget.layer.stops.at(1).name = "Plymouth, NH";
directionsWidget.layer.stops.at(1).geometry = new Point({ x: -71.68808, y: 43.75792 });
} new Directions(properties)
Parameter
optionalSee the properties for a list of all the properties that may be passed into the constructor.
Show inherited properties Hide inherited properties
Property DetailsSince: ArcGIS Maps SDK for JavaScript 4.19 Directions since 4.6, apiKey added at 4.19.
An authorization string used to access a resource or service. API keys are generated and managed in the portal. An API key is tied explicitly to an ArcGIS account; it is also used to monitor service usage. Setting a fine-grained API key on a specific class overrides the global API key.
By default, the following URLs will be used (unless overwritten in the app, or if using different defaults from a portal):
Geocoding URL: https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer
Routing URL: https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World
Example
const directionsWidget = new Directions({
view: view,
layer: routeLayer,
apiKey: "YOUR_API_KEY"
});
// Add the Directions widget to the top right corner of the view
view.ui.add(directionsWidget, {
position: "top-right"
});The ID or node representing the DOM element containing the widget. This property can only be set once. The following examples are all valid use case when working with widgets.
Examples
// Create the HTML div element programmatically at runtime and set to the widget's container
const basemapGallery = new BasemapGallery({
view: view,
container: document.createElement("div")
});
// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
position: "top-right"
});// Specify an already-defined HTML div element in the widget's container
const basemapGallery = new BasemapGallery({
view: view,
container: basemapGalleryDiv
});
// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
position: "top-right"
});
// HTML markup
<body>
<div id="viewDiv"></div>
<div id="basemapGalleryDiv"></div>
</body>// Specify the widget while adding to the view's UI
const basemapGallery = new BasemapGallery({
view: view
});
// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
position: "top-right"
});Inherited
Property declaredClass Stringreadonly
Since: ArcGIS Maps SDK for JavaScript 4.7 Accessor since 4.0, declaredClass added at 4.7.
The name of the class. The declared class name is formatted as esri.folder.className.
Since: ArcGIS Maps SDK for JavaScript 4.8 Directions since 4.6, goToOverride added at 4.8.
This function provides the ability to override either the MapView goTo() or SceneView goTo() methods.
Example
// The following snippet uses Search but can be applied to any
// widgets that support the goToOverride property.
search.goToOverride = function(view, goToParams) {
goToParams.options = {
duration: updatedDuration
};
return view.goTo(goToParams.target, goToParams.options);
}; headingLevel Number
Since: ArcGIS Maps SDK for JavaScript 4.20 Directions since 4.6, headingLevel added at 4.20.
Indicates the heading level to use for the origin and destination addresses (i.e. "380 New York Street"). By default, this is rendered as a level 2 heading (e.g. <h2>380 New York Street</h2>). Depending on the widget's placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.
Example
// address text will render as an <h3>
directions.headingLevel = 3;Since: ArcGIS Maps SDK for JavaScript 4.27 Directions since 4.6, icon added at 4.27.
Icon which represents the widget. It is typically used when the widget is controlled by another one (e.g. in the Expand widget).
Inherited
Property id String
The unique ID assigned to the widget when the widget is created. If not set by the developer, it will default to the container ID, or if that is not present then it will be automatically generated.
Since: ArcGIS Maps SDK for JavaScript 4.7 Directions since 4.6, label added at 4.7.
The widget's default label.
The most recent route result. Returns a RouteLayerSolveResult object containing properties for barriers (if any), stops, and directions.
Since: ArcGIS Maps SDK for JavaScript 4.24 Directions since 4.6, layer added at 4.24.
The RouteLayer associated with the Directions widget. This property is required. The RouteLayer contains stops and barriers and will be used to display and solve routes.
maxStops Number
The maximum number of stops allowed for routing.
Controls the default properties used when searching. Note that the default searchProperties differ slightly from the Search component.
Since: ArcGIS Maps SDK for JavaScript 4.25 Directions since 4.6, unit added at 4.25.
Unit system (imperial, metric) or specific unit used for displaying the distance values. If not set, the widget will attempt to pick "imperial" or "metric" based on the user's portal settings.
This property will affect the summary distance as well as distance for each turn-by-turn maneuver.
Example
// Display distances in nautical miles.
const directions = new Directions({
unit: "nautical-miles",
layer: routeLayer,
view: view
});The view from which the widget will operate.
The view model for this widget. This is a class that contains all the logic (properties and methods) that controls this widget's behavior. See the DirectionsViewModel class to access all properties and methods on the widget.
Inherited
Property visible Boolean
Indicates whether the widget is visible.
If false, the widget will no longer be rendered in the web document. This may affect the layout of other elements or widgets in the document. For example, if this widget is the first of three widgets associated to the upper right hand corner of the view UI, then the other widgets will reposition when this widget is made invisible. For more information, refer to the css display value of "none".
Example
// Hides the widget in the view
widget.visible = false;Since: ArcGIS Maps SDK for JavaScript 4.24 Directions since 4.6, visibleElements added at 4.24.
The visible elements that are displayed within the widget. This property provides the ability to turn individual elements of the widget's display on/off.
Example
// Hide the save button, save-as button and layer details link.
const directions = new Directions({
view: view,
layer: routeLayer,
visibleElements: {
layerDetailsLink: false,
saveAsButton: false,
saveButton: false
}
});Show inherited methods Hide inherited methods
Method DetailsInherited
Method addHandles(handleOrHandles, groupKey)
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, addHandles added at 4.25.
Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.
// Manually manage handles
const handle = reactiveUtils.when(
() => !view.updating,
() => {
wkidSelect.disabled = false;
},
{ once: true }
);
this.addHandles(handle);
// Destroy the object
this.destroy();
Parameters
Handles marked for removal once the object is destroyed.
groupKey *
optionalKey identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.
Inherited
Method classes(classNames){String}
Since: ArcGIS Maps SDK for JavaScript 4.7 Widget since 4.2, classes added at 4.7.
A utility method used for building the value for a widget's class property. This aids in simplifying css class setup.
Returns
Type Description String The computed class name.Example
// .tsx syntax showing how to set css classes while rendering the widget
render() {
const dynamicClasses = {
[css.flip]: this.flip,
[css.primary]: this.primary
};
return (
<div class={classes(css.root, css.mixin, dynamicClasses)} />
);
}Inherited
Method destroy()
Destroys the widget instance.
Inherited
Method emit(type, event){Boolean}
Emits an event on the instance. This method should only be used when creating subclasses of this class.
Parameters
The name of the event.
optionalThe event payload.
Returns
Type Description Booleantrue if a listener was notified
Computes a route and directions. If successfully computed, results will be assigned to lastRoute returned. If a view is assigned, it will zoom to the extent of the route.
Returns
Inherited
Method hasEventListener(type){Boolean}
Indicates whether there is an event listener on the instance that matches the provided event name.
Returns
Type Description Boolean Returns true if the class supports the input event.Inherited
Method hasHandles(groupKey){Boolean}
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, hasHandles added at 4.25.
Returns true if a named group of handles exist.
Parameter
groupKey *
optionalA group key.
Returns
Type Description Boolean Returnstrue if a named group of handles exist.
Example
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
obj.removeHandles("watch-view-updates");
}Inherited
Method isFulfilled(){Boolean}
Since: ArcGIS Maps SDK for JavaScript 4.19 Widget since 4.2, isFulfilled added at 4.19.
isFulfilled() may be used to verify if creating an instance of the class is fulfilled (either resolved or rejected). If it is fulfilled, true will be returned.
Returns
Type Description Boolean Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).Inherited
Method isRejected(){Boolean}
Since: ArcGIS Maps SDK for JavaScript 4.19 Widget since 4.2, isRejected added at 4.19.
isRejected() may be used to verify if creating an instance of the class is rejected. If it is rejected, true will be returned.
Returns
Type Description Boolean Indicates whether creating an instance of the class has been rejected.Inherited
Method isResolved(){Boolean}
Since: ArcGIS Maps SDK for JavaScript 4.19 Widget since 4.2, isResolved added at 4.19.
isResolved() may be used to verify if creating an instance of the class is resolved. If it is resolved, true will be returned.
Returns
Type Description Boolean Indicates whether creating an instance of the class has been resolved.Inherited
Method on(type, listener){Object}
Registers an event handler on the instance. Call this method to hook an event with a listener.
Returns
Type Description Object Returns an event handler with aremove() method that should be called to stop listening for the event(s). Property Type Description remove Function When called, removes the listener from the event.
Example
view.on("click", function(event){
// event is the event handle returned after the event fires.
console.log(event.mapPoint);
});Inherited
Method postInitialize()
Executes after widget is ready for rendering.
Inherited
Method removeHandles(groupKey)
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, removeHandles added at 4.25.
Removes a group of handles owned by the object.
Parameter
groupKey *
optionalA group key or an array or collection of group keys to remove.
Example
obj.removeHandles(); // removes handles from default group
obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");Inherited
Method render(){Object}
This method is implemented by subclasses for rendering.
Returns
Type Description Object The rendered virtual node.Inherited
Method renderNow()
Renders widget to the DOM immediately.
Since: ArcGIS Maps SDK for JavaScript 4.24 Directions since 4.6, save added at 4.24.
Saves the RouteLayer associated with the view model. This method will update the portal-item associated with layer.
Returns
saveAs(portalItem, options){Promise<PortalItem>}
Since: ArcGIS Maps SDK for JavaScript 4.24 Directions since 4.6, saveAs added at 4.24.
Saves the RouteLayer associated with the view model as a new portal item.
Parameters
The new portal item to which the layer will be saved.
optionalSave options. Currently, there is only one property that can be set, which is folder.
Specification
optionalThe folder in which to save the item.
Returns
Type Description Promise<PortalItem> Saved portal item.Inherited
Method scheduleRender()
Schedules widget rendering. This method is useful for changes affecting the UI.
Inherited
Method when(callback, errback){Promise}
Since: ArcGIS Maps SDK for JavaScript 4.19 Widget since 4.2, when added at 4.19.
when() may be leveraged once an instance of the class is created. This method takes two input parameters: a callback function and an errback function. The callback executes when the instance of the class loads. The errback executes if the instance of the class fails to load.
Parameters
optionalThe function to call when the promise resolves.
optionalThe function to execute when the promise fails.
Returns
Type Description Promise Returns a new Promise for the result ofcallback.
Example
// Although this example uses the BasemapGallery widget, any class instance that is a promise may use when() in the same way
let bmGallery = new BasemapGallery();
bmGallery.when(function(){
// This function will execute once the promise is resolved
}, function(error){
// This function will execute if the promise is rejected due to an error
}); zoomToRoute()
Zoom so that the full route is displayed within the current map extent.
SearchProperties
Configurable Search properties of the widget.
Number index indicating the current selected source.
optionalString value used as a hint for input text when searching on multiple sources.
optionalDefault Value:true
Indicates whether to automatically navigate to the selected result once selected.
optionalIndicates whether to automatically select and zoom to the first geocoded result.
optionalIndicates whether or not to include defaultSources in the Search UI. This can be a boolean value or a function that returns an array of Search sources.
optionalDefine the type of location, either "street" or "rooftop". The default value will be "street" for any locator source that does not define a locationType.
Default Value:6
Indicates the maximum number of search results to return.
optionalDefault Value:6
Indicates the maximum number of suggestions to return for the widget's input.
optionalDefault Value:1
Indicates the minimum number of characters required before querying for a suggestion.
optionalDefault Value:false
Indicates whether to display a Popup when a selected result is clicked.
optionalA customized PopupTemplate for the selected feature.
optionalDefault Value:false
Indicates whether to show a graphic on the map for the selected source.
optionalIndicates whether to display the option to search all sources.
optionalThe value of the search box input text string.
optionalSpecifies the sources to search in the view.
optionalDefault Value:true
Indicates whether to display suggestions as the user enters input text in the widget.
optionalThe view of the widget.
optionalThe Search view model.
VisibleElements
The visible elements that are displayed within the widget. This provides the ability to turn individual elements of the widget's display on/off.
Indicates whether to the Edit Route button will be displayed. Default is true.
Indicates whether to a link to the route layer portal-item (if any) will be displayed. Default is true.
(beta) Indicates whether to the Print button will be displayed. Default is true.
Indicates whether to the Save As button will be displayed. Default is true.
Indicates whether to the Save button will be displayed. Default is true.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4