Directions

Use dark colors for code blocksCopy
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
`apiKey`	`api-key`	`string`
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`headingLevel`	`heading-level`	`number`
`hideLayerDetails`	`hide-layer-details`	`boolean`
`hideSaveAsButton`	`hide-save-as-button`	`boolean`
`hideSaveButton`	`hide-save-button`	`boolean`
`icon`	`icon`	`string`
`label`	`label`	`string`
`lastRoute` readonly		`DirectionsLastRoute`
`layer`		`RouteLayer`
`maxStops`	`max-stops`	`number`
`position`	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`referenceElement`	`reference-element`	`ArcgisLinkChart \| ArcgisMap \| ArcgisScene \| string`
`routeLayerItemId`	`route-layer-item-id`	`string`
`searchProperties`		`DirectionsSearchProperties`
`state` readonly		`"disabled" \| "error" \| "initializing" \| "ready" \| "routing" \| "unauthenticated"`
`unit`	`unit`	`"centimeters" \| "decimeters" \| "feet" \| "imperial" \| "inches" \| "kilometers" \| "meters" \| "metric" \| "miles" \| "millimeters" \| "nautical-miles" \| "us-feet" \| "yards"`
`useDefaultRouteLayer`	`use-default-route-layer`	`boolean`

apiKey

Property

apiKey: string

An authorization string used to access a resource or service.

Attribute: api-key

autoDestroyDisabled

Property

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

Property

headingLevel: number

Indicates the heading level to use for the origin and destination addresses (i.e.

Attribute: heading-level
Default value: 2

hideLayerDetails

Property

hideLayerDetails: boolean

Attribute: hide-layer-details
Default value: false

hideSaveAsButton

Property

hideSaveAsButton: boolean

Attribute: hide-save-as-button
Default value: false

hideSaveButton

Property

hideSaveButton: boolean

Attribute: hide-save-button
Default value: false

icon

Property

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"

label

Property

label: string

The component's default label.

Attribute: label

lastRoute

readonlyProperty

lastRoute: DirectionsLastRoute

The most recent route result.

Default value: null

layer

Property

layer: RouteLayer

The RouteLayer associated with the Directions widget.

maxStops

Property

maxStops: number

The maximum number of stops allowed for routing.

Attribute: max-stops
Default value: 50

position

Property

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

Property

referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string

Attribute: reference-element

routeLayerItemId

Property

routeLayerItemId: string

Attribute: route-layer-item-id

searchProperties

Property

searchProperties: DirectionsSearchProperties

Controls the default properties used when searching.

Default value: null

state

readonlyProperty

The current state of the view model.

Default value: "disabled"

unit

Property

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

Property

useDefaultRouteLayer: boolean

Attribute: use-default-route-layer
Default value: false

Methods

Method	Signature
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`
`getDirections`	`getDirections(): Promise<__esri.RouteLayerSolveResult>`
`save`	`save(): Promise<__esri.PortalItem>`
`saveAs`	`saveAs(portalItem: __esri.PortalItem, options: { folder: __esri.PortalFolder; }): Promise<__esri.PortalItem>`
`zoomToRoute`	`zoomToRoute(): Promise<void>`

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

getDirections

Method

getDirections(): Promise<__esri.RouteLayerSolveResult>

Returns: Promise<RouteLayerSolveResult>

save

Method

save(): Promise<__esri.PortalItem>

Returns: Promise<PortalItem>

saveAs

Method

saveAs(portalItem: __esri.PortalItem, options: { folder: __esri.PortalFolder; }): Promise<__esri.PortalItem>

Parameters

Parameter	Type	Optional?
portalItem	`PortalItem`
options	`{ folder: PortalFolder; }`

Returns: Promise<PortalItem>

zoomToRoute

Method

zoomToRoute(): Promise<void>

Returns: Promise<void>

Events

Event	Type
`arcgisPropertyChange`	`{ name: "state" \| "lastRoute"; }`
`arcgisReady`	`undefined`

arcgisPropertyChange

Event

arcgisPropertyChange: { name: "state" | "lastRoute"; }

Emitted when the value of a property is changed. Use this to listen to changes to properties.

arcgisReady

Event

arcgisReady: undefined

Emitted when the component associated with a map view is is ready to be interacted with.