Directions

ESM:

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-directions";

CDN:

No specific import is needed for this component.

Since:ArcGIS Maps SDK for JavaScript 4.28

The 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`
`goToOverride`		`(((view: MapView \| SceneView, goToParameters: GoToParameters) => void))`
`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` deprecated	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`referenceElement`	`reference-element`	`HTMLArcgisLinkChartElement \| HTMLArcgisMapElement \| HTMLArcgisSceneElement \| string`
`routeLayerItemId`	`route-layer-item-id`	`string`
`searchProperties`		`DirectionsSearchProperties`
`state` readonlyreflected	`state`	`"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`
`view`		`MapView \| SceneView`

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

goToOverride

Property

goToOverride: (((view: MapView | SceneView, goToParameters: GoToParameters) => void))

ArcGIS Maps SDK for JavaScript 4.33

Directions since 4.28, goToOverride added at 4.33.

This function provides the ability to override either the MapView goTo() or SceneView goTo() methods.

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).

See also

Calcite Icons

Attribute: icon
Default value: "right"

label

Property

label: string

The widget'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

deprecatedProperty

position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"

Deprecatedsince 4.34, use slot instead.

Attribute: position

referenceElement

Property

referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string

By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.

See also

Associate components with a Map or Scene component

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: { popupEnabled: false, resultGraphicEnabled: false }

state

readonly

Property

The current state of the component.

Attribute: state
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

view

Property

view: MapView | SceneView

The view associated with the component.

Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Directions component will be associated with a map or scene component rather than using the view property.

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.

Example

Use dark colors for code blocksCopy
const arcgisDirections = document.querySelector("arcgis-directions");
document.body.append(arcgisDirections);
await arcgisDirections.componentOnReady();
console.log("arcgis-directions is ready to go!");

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`	`CustomEvent<{ name: "state" \| "lastRoute"; }>`
`arcgisReady`	`CustomEvent<void>`

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "state" | "lastRoute"; }>

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

arcgisReady

Event

arcgisReady: CustomEvent<void>

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