Directions

1
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

PropertyAttributeType
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

Property
apiKey: string

An authorization string used to access a resource or service.

Read more...

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.

Read more...

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.

Read more...

Default value
null

layer

Property
layer: RouteLayer

The RouteLayer associated with the Directions widget.

Read more...

maxStops

Property
maxStops: number

The maximum number of stops allowed for routing.

Read more...

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.

Read more...

Default value
null

state

readonlyProperty
state: "disabled" | "error" | "initializing" | "ready" | "routing" | "unauthenticated"

The current state of the view model.

Read more...

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.

Read more...

Attribute
unit

useDefaultRouteLayer

Property
useDefaultRouteLayer: boolean
Attribute
use-default-route-layer
Default value
false

Methods

MethodSignature
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

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
ParameterTypeOptional?
portalItem
options
{ folder: PortalFolder; }
Returns
Promise<PortalItem>

zoomToRoute

Method
zoomToRoute(): Promise<void>
Returns
Promise<void>

Events

EventType
{ name: "state" | "lastRoute"; }
undefined

arcgisPropertyChange

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

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

arcgisReady

Event
arcgisReady: undefined

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close