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
-
new DirectionsViewModel(properties)
-
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 |
---|---|---|---|
String | An authorization string used to access a resource or service. more details | DirectionsViewModel | |
String | The name of the class. more details | Accessor | |
GoToOverride | This function provides the ability to override either the MapView goTo() or SceneView goTo() methods. more details | DirectionsViewModel | |
Object | The network attribute name to be used as the impedance attribute in the analysis. more details | DirectionsViewModel | |
RouteLayerSolveResult | The most recent route result. more details | DirectionsViewModel | |
RouteLayer | The RouteLayer associated with the DirectionsViewModel. more details | DirectionsViewModel | |
Number | The maximum number of stops allowed for routing. more details | DirectionsViewModel | |
RouteParameters | Route Parameters object used to call the service. more details | DirectionsViewModel | |
String | The URL of the REST endpoint of the Route service. more details | DirectionsViewModel | |
SimpleLineSymbol | Defines the symbol used to draw the route on the map. more details | DirectionsViewModel | |
TravelMode | The travel mode that will be used by getDirections() when requesting the route and directions. more details | DirectionsViewModel | |
ServiceDescription | The Service Description object returned by the Route REST Endpoint. more details | DirectionsViewModel | |
String | The current state of the view model. more details | DirectionsViewModel | |
Collection<Stop> | A Collection of Stops that define the stop locations along the route. more details | DirectionsViewModel | |
RouteStopSymbols | The default stop symbols used to display locations between the origin and final destination. more details | DirectionsViewModel | |
Object | The name of the network attribute to use for the drive time when computing directions. more details | DirectionsViewModel | |
TravelMode[] | An array of available travel modes from the associated RouteLayer's routing service (see RouteLayer.url). more details | DirectionsViewModel | |
MapView|SceneView | The view from which the widget will operate. more details | DirectionsViewModel |
Property Details
-
apiKey StringSince: ArcGIS Maps SDK for JavaScript 4.19
-
An authorization string used to access a resource or service. API keys are generated and managed in the ArcGIS Developer dashboard. 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
-
Since: ArcGIS Maps SDK for JavaScript 4.7
-
The name of the class. The declared class name is formatted as
esri.folder.className
.
-
goToOverride GoToOverrideSince: ArcGIS Maps SDK for JavaScript 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 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 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. Respresents the start, end, or midpoint of a route.
- Default Value:null
- See also
-
layer RouteLayerSince: ArcGIS Maps SDK for JavaScript 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 Number
-
The maximum number of stops allowed for routing.
- Default Value:50
-
routeParameters RouteParameters
-
Route Parameters object used to call the service. Please refer to the RouteParameters documentation for the list of available settings.
-
routeServiceUrl String
-
The URL of the REST endpoint of the Route service.
By default, the DirectionsViewModel will use the global routing serice (see config.routeServiceUrl).
If connected to a Portal you can use the route service advertised on the portal's helper services as demonstrated below.
Example// Create DirectionsViewModel using the route service advertised on the portal const portal = Portal.getDefault(); const viewModel = new DirectionsViewModel({ routeServiceUrl: portal.helperServices.route.url });
-
routeSymbol SimpleLineSymbolDeprecated since version 4.24. Use directionLines from layer instead.
-
Defines the symbol used to draw the route on the map.
-
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 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 Stringreadonly
-
The current state of the view model.
Possible Values:"disabled"|"ready"
- Default Value:disabled
-
stops Collection<Stop>autocast
-
A Collection of Stops that define the stop locations along the route.
-
stopSymbols RouteStopSymbolsDeprecated since version 4.24. Use RouteStopSymbols from layer instead.
-
The default stop symbols used to display locations between the origin and final destination.
- Properties
-
The first stop symbol.
The middle stop symbol.
The last stop symbol.
An unlocated stop symbol.
A waypoint stop symbol.
-
timeAttribute Objectreadonly
-
The name of the network attribute to use for the drive time when computing directions.
-
travelModes TravelMode[]readonly
-
An array of available travel modes from the associated RouteLayer's routing service (see RouteLayer.url).
-
The view from which the widget will operate.
Method Overview
Name | Return Type | Summary | Class |
---|---|---|---|
Adds one or more handles which are to be tied to the lifecycle of the object. more details | Accessor | ||
Centers the map at the specified maneuver or stop. more details | DirectionsViewModel | ||
Clears any highlighted route segments. more details | DirectionsViewModel | ||
Removes the route directions from the directions list, leaving the inputs untouched. more details | DirectionsViewModel | ||
Object | Returns the cost attribute associated with the parsed name. more details | DirectionsViewModel | |
Promise<RouteLayerSolveResult> | Computes a route and directions. more details | DirectionsViewModel | |
Boolean | Returns true if a named group of handles exist. more details | Accessor | |
Promise | Highlights the specified network feature. more details | DirectionsViewModel | |
Highlights the specified route segment on the map. more details | DirectionsViewModel | ||
Promise | This method should be called to load the view model's routing resources. more details | DirectionsViewModel | |
Removes a group of handles owned by the object. more details | Accessor | ||
Resets the state of the ViewModel, clearing all the input stops and results in the widget and in the map. more details | DirectionsViewModel | ||
Promise<PortalItem> | Saves the RouteLayer associated with the view model. more details | DirectionsViewModel | |
Promise<PortalItem> | Saves the RouteLayer associated with the view model as a new portal item. more details | DirectionsViewModel | |
Zoom so that the full route is displayed within the current map extent. more details | DirectionsViewModel |
Method Details
-
addHandles(handleOrHandles, groupKey)inheritedSince: ArcGIS Maps SDK for JavaScript 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.
-
centerAt(stopOrManeuver)
-
Centers the map at the specified maneuver or stop.
ParameterstopOrManeuver GraphicThe stop or maneuver where the map should be centered.
-
clearHighlights()
-
Clears any highlighted route segments.
-
clearResults()
-
Removes the route directions from the directions list, leaving the inputs untouched. The route and locations persist on the map.
-
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(){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.
-
Since: ArcGIS Maps SDK for JavaScript 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(networkFeature){Promise}Since: ArcGIS Maps SDK for JavaScript 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.
-
highlightSegment(maneuver)Deprecated since version 4.24. Use highlight instead.
-
Highlights the specified route segment on the map.
Parametermaneuver GraphicThe route segment to highlight.
-
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.
-
removeHandles(groupKey)inheritedSince: ArcGIS Maps SDK for JavaScript 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");
-
reset()
-
Resets the state of the ViewModel, clearing all the input stops and results in the widget and in the map.
-
save(){Promise<PortalItem>}Since: ArcGIS Maps SDK for JavaScript 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(portalItem, options){Promise<PortalItem>}Since: ArcGIS Maps SDK for JavaScript 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
-
zoomToRoute()
-
Zoom so that the full route is displayed within the current map extent.