require(["esri/widgets/Directions/DirectionsViewModel"], (DirectionsVM) => { /* code goes here */ });
import DirectionsVM from "@arcgis/core/widgets/Directions/DirectionsViewModel.js";
esri/widgets/Directions/DirectionsViewModel
Provides the communication and data manipulation logic for the Directions widget.
- See also
const directions = new Directions({
viewModel: { // autocasts as new DirectionsViewModel
routeServiceUrl: "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"
}
});
Constructors
-
Parameterproperties Objectoptional
See the properties for a list of all the properties that may be passed into the constructor.
Property Overview
Name | Type | Summary | Class |
---|---|---|---|
An authorization string used to access a resource or service. | DirectionsViewModel | ||
The name of the class. | Accessor | ||
This function provides the ability to override either the MapView goTo() or SceneView goTo() methods. | DirectionsViewModel | ||
The network attribute name to be used as the impedance attribute in the analysis. | DirectionsViewModel | ||
The most recent route result. | DirectionsViewModel | ||
The RouteLayer associated with the DirectionsViewModel. | DirectionsViewModel | ||
The maximum number of stops allowed for routing. | DirectionsViewModel | ||
Route Parameters object used to call the service. | DirectionsViewModel | ||
The travel mode that will be used by getDirections() when requesting the route and directions. | DirectionsViewModel | ||
The Service Description object returned by the Route REST Endpoint. | DirectionsViewModel | ||
The current state of the view model. | DirectionsViewModel | ||
The name of the network attribute to use for the drive time when computing directions. | DirectionsViewModel | ||
An array of available travel modes from the associated RouteLayer's routing service (see RouteLayer.url). | DirectionsViewModel | ||
The view from which the widget will operate. | DirectionsViewModel |
Property Details
-
apiKey
apiKey String
Since: ArcGIS Maps SDK for JavaScript 4.19DirectionsViewModel 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
-
goToOverride
goToOverride GoToOverride
Since: ArcGIS Maps SDK for JavaScript 4.8DirectionsViewModel 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 the Search widget 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); };
-
impedanceAttribute
impedanceAttribute Objectreadonly
-
The network attribute name to be used as the impedance attribute in the analysis. The value is defined in the specific routing network layer used in the route.
For more information, see Understanding the network attribute.
-
lastRoute
lastRoute RouteLayerSolveResultreadonly
-
The most recent route result. Returns a RouteLayerSolveResult object containing properties for barriers (if any), stops, and directions.
- Properties
-
directionLines Collection<DirectionLine>
Collection of direction polylines associated with line segments between turns.
directionPoints Collection<DirectionPoint>Collection of direction items as points with various display information.
pointBarriers Collection<PointBarrier>Collection of point barriers.
polygonBarriers Collection<PolygonBarrier>Collection of polygon barriers.
polylineBarriers Collection<PolylineBarrier>Collection of polyline barriers.
routeInfo RouteInfoInformation about a solved route including the route's geometry and overall distance and time.
stops Collection<Stop>Collection of stops. Represents the start, end, or midpoint of a route.
- Default Value:null
- See also
-
layer
layer RouteLayer
Since: ArcGIS Maps SDK for JavaScript 4.24DirectionsViewModel since 4.6, layer added at 4.24. -
The RouteLayer associated with the DirectionsViewModel. The route layer contains stops and barriers and will be used to display and solve routes.
-
maxStops
maxStops Number
-
The maximum number of stops allowed for routing.
- Default Value:50
-
routeParameters
routeParameters RouteParameters
-
Route Parameters object used to call the service. Please refer to the RouteParameters documentation for the list of available settings.
-
selectedTravelMode
selectedTravelMode TravelMode
-
The travel mode that will be used by getDirections() when requesting the route and directions.
For a list of available travel modes please access travelModes or the
supportedTravelModes
property on the serviceDescription.If the RouteLayer assigned to layer is hosted on ArcGIS Online and ArcGIS Enterprise then this property will attempt to assign the previously used travel mode.
By default, if the layer is not an ArcGIS Online and ArcGIS Enterprise item, this property will be to routing service's default travel mode (see
defaultTravelMode
of ServiceDescription).- Default Value:null
- See also
Example// Create a RouteLayer and assign to the DirectionsViewModel. const layer = new RouteLayer(); map.add(layer); const apiKey = "<your api key>"; const directionsViewModel = new DirectionsViewModel({ apiKey, layer }); await directionsViewModel.load(); // wait for the view model to load the route service's "service description". // Print view model's selected travel mode. This will be equivalent to the routing service's default travel mode. console.log(directionsViewModel.selectedTravelMode.name); // Assign the "Walking Time" travel mode. directionsViewModel.selectedTravelMode = directionsViewModel.travelModes.find(({ name }) => name === "Walking Time");
-
serviceDescription
serviceDescription ServiceDescriptionreadonly
-
The Service Description object returned by the Route REST Endpoint. This object contains three properties:
currentVersion
,defaultTravelMode
, andsupportedTravelModes
.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.
- Default Value:null
-
state
state Stringreadonly
-
The current state of the view model.
Possible Values:"disabled" |"ready"
- Default Value:disabled
-
timeAttribute
timeAttribute Objectreadonly
-
The name of the network attribute to use for the drive time when computing directions.
-
travelModes
travelModes TravelMode[]readonly
-
An array of available travel modes from the associated RouteLayer's routing service (see RouteLayer.url).
Method Overview
Name | Return Type | Summary | Class |
---|---|---|---|
Adds one or more handles which are to be tied to the lifecycle of the object. | Accessor | ||
Centers the map at the specified maneuver or stop. | DirectionsViewModel | ||
Clears any highlighted route segments. | DirectionsViewModel | ||
Removes the route directions from the directions list, leaving the inputs untouched. | DirectionsViewModel | ||
Returns the cost attribute associated with the parsed name. | DirectionsViewModel | ||
Computes a route and directions. | DirectionsViewModel | ||
Returns true if a named group of handles exist. | Accessor | ||
Highlights the specified network feature. | DirectionsViewModel | ||
This method should be called to load the view model's routing resources. | DirectionsViewModel | ||
Removes a group of handles owned by the object. | Accessor | ||
Resets the state of the ViewModel, clearing all the input stops and results in the widget and in the map. | DirectionsViewModel | ||
Saves the RouteLayer associated with the view model. | DirectionsViewModel | ||
Saves the RouteLayer associated with the view model as a new portal item. | DirectionsViewModel | ||
Zoom so that the full route is displayed within the current map extent. | DirectionsViewModel |
Method Details
-
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25Accessor 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();
ParametershandleOrHandles WatchHandle|WatchHandle[]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.
-
Centers the map at the specified maneuver or stop.
ParameterstopOrManeuver GraphicThe stop or maneuver where the map should be centered.
-
Removes the route directions from the directions list, leaving the inputs untouched. The route and locations persist on the map.
-
getCostAttribute
getCostAttribute(attributeName){Object}
-
Returns the cost attribute associated with the parsed name.
ParameterattributeName StringThe attribute name specifying the cost attribute used as an impedance.
ReturnsType Description Object The cost attribute associated with the passed name. Property Type Description name string Name of the impedance network attribute. units string Units of this network attribute.
-
getDirections
getDirections(){Promise<RouteLayerSolveResult>}
-
Computes a route and directions. If successful, results will be assigned to lastRoute and returned in a resolving promise. If a view is assigned, it will zoom to the extent of the route.
ReturnsType Description Promise<RouteLayerSolveResult> When resolved, returns a RouteLayerSolveResult.
-
hasHandles
InheritedMethodhasHandles(groupKey){Boolean}
Inherited from AccessorSince: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, hasHandles added at 4.25. -
Returns true if a named group of handles exist.
ParametergroupKey *optionalA group key.
ReturnsType Description Boolean Returns true
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"); }
-
highlight
highlight(networkFeature){Promise}
Since: ArcGIS Maps SDK for JavaScript 4.24DirectionsViewModel since 4.6, highlight added at 4.24. -
Highlights the specified network feature.
ParameternetworkFeature DirectionLine|DirectionPoint|PointBarrier|PolygonBarrier|PolylineBarrier|RouteInfo|StopThe network feature to highlight.
ReturnsType Description Promise Resolves when the highlight has been completed.
-
load
load(){Promise}
-
This method should be called to load the view model's routing resources.
This method downloads service metadata from the assigned routing service. Call this method before accessing properties on the view model or whenever the routeServiceUrl changes.
ReturnsType Description Promise When resolved, the view model has loaded the route service metadata necessary for routing.
-
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, removeHandles added at 4.25. -
Removes a group of handles owned by the object.
ParametergroupKey *optionalA group key or an array or collection of group keys to remove.
Exampleobj.removeHandles(); // removes handles from default group obj.removeHandles("handle-group"); obj.removeHandles("other-handle-group");
-
Resets the state of the ViewModel, clearing all the input stops and results in the widget and in the map.
-
save
save(){Promise<PortalItem>}
Since: ArcGIS Maps SDK for JavaScript 4.24DirectionsViewModel 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.
ReturnsType Description Promise<PortalItem> When resolved, returns a PortalItem. - See also
-
saveAs
saveAs(portalItem, options){Promise<PortalItem>}
Since: ArcGIS Maps SDK for JavaScript 4.24DirectionsViewModel since 4.6, saveAs added at 4.24. -
Saves the RouteLayer associated with the view model as a new portal item.
ParametersportalItem Promise<PortalItem>The new portal item to which the layer will be saved.
options ObjectoptionalSave options. Currently, there is only one property that can be set, which is
folder
.Specificationfolder PortalFolderoptionalThe folder in which to save the item.
ReturnsType Description Promise<PortalItem> Saved portal item. - See also