import "@arcgis/map-components/components/arcgis-directions";
Directions component provides a way to calculate directions, between two or more input locations with a RouteLayer, using ArcGIS Online and custom Network Analysis Route services.
Demo
Properties
Property | Attribute | Type |
---|---|---|
api-key | string | |
auto-destroy-disabled | boolean | |
heading-level | number | |
hide-layer-details | boolean | |
hide-save-as-button | boolean | |
hide-save-button | boolean | |
icon | string | |
label | string | |
lastRoute readonly |
| DirectionsLastRoute |
| ||
max-stops | number | |
position | "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing" | |
reference-element | ArcgisLinkChart | ArcgisMap | ArcgisScene | string | |
route-layer-item-id | string | |
| ||
state readonly |
| "disabled" | "error" | "initializing" | "ready" | "routing" | "unauthenticated" |
unit | "centimeters" | "decimeters" | "feet" | "imperial" | "inches" | "kilometers" | "meters" | "metric" | "miles" | "millimeters" | "nautical-miles" | "us-feet" | "yards" | |
use-default-route-layer | boolean |
apiKey
apiKey: string
An authorization string used to access a resource or service.
- Attribute
- api-key
autoDestroyDisabled
autoDestroyDisabled: boolean
If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the `destroy` method when you are done to prevent memory leaks.
- Attribute
- auto-destroy-disabled
- Default value
- false
headingLevel
headingLevel: number
Indicates the heading level to use for the origin and destination addresses (i.e.
- Attribute
- heading-level
- Default value
- 2
icon
icon: string
Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component). Search Calcite Icons for possible values.
- Attribute
- icon
- Default value
- "right"
lastRoute
lastRoute: DirectionsLastRoute
The most recent route result.
- Default value
- null
maxStops
maxStops: number
The maximum number of stops allowed for routing.
- Attribute
- max-stops
- Default value
- 50
position
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
- Attribute
- position
- Default value
- "bottom-left"
referenceElement
referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string
- Attribute
- reference-element
searchProperties
searchProperties: DirectionsSearchProperties
Controls the default properties used when searching.
- Default value
- null
state
state: "disabled" | "error" | "initializing" | "ready" | "routing" | "unauthenticated"
The current state of the view model.
- Default value
- "disabled"
unit
unit: "centimeters" | "decimeters" | "feet" | "imperial" | "inches" | "kilometers" | "meters" | "metric" | "miles" | "millimeters" | "nautical-miles" | "us-feet" | "yards"
Unit system (imperial, metric) or specific unit used for displaying the distance values.
- Attribute
- unit
useDefaultRouteLayer
useDefaultRouteLayer: boolean
- Attribute
- use-default-route-layer
- Default value
- false
Methods
Method | Signature |
---|---|
componentOnReady(): Promise<void> | |
destroy(): Promise<void> | |
getDirections(): Promise<__esri.RouteLayerSolveResult> | |
save(): Promise<__esri.PortalItem> | |
saveAs(portalItem: __esri.PortalItem, options: { folder: __esri.PortalFolder; }): Promise<__esri.PortalItem> | |
zoomToRoute(): Promise<void> |
componentOnReady
componentOnReady(): Promise<void>
Create a promise that resolves once component is fully loaded.
- Returns
- Promise<void>
getDirections
getDirections(): Promise<__esri.RouteLayerSolveResult>
- Returns
- Promise<RouteLayerSolveResult>
saveAs
saveAs(portalItem: __esri.PortalItem, options: { folder: __esri.PortalFolder; }): Promise<__esri.PortalItem>
Parameters
Parameter | Type | Optional? |
---|---|---|
portalItem | ||
options | { folder: PortalFolder; } |
- Returns
- Promise<PortalItem>
Events
Event | Type |
---|---|
{ name: "state" | "lastRoute"; } | |
undefined |