Track

ESM:

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

CDN:

No specific import is needed for this component.

Since:ArcGIS Maps SDK for JavaScript 4.28

The Track component is a button that when activated continuously animates the Map or Scene to the user's location as the user moves. The view rotates based on device heading, and the default heading symbol will display when speed is greater than zero and the browser provides heading information.

This component uses the browser's Geolocation API which is only available in secure contexts, such as HTTPS. Note that localhost is considered "potentially secure" and can be used for easy testing in browsers that support Window.isSecureContext.

Known limitations

The heading symbol is not currently supported within a Scene component.

Demo

Properties

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`error`	`error`	`any`
`geolocationOptions`	`geolocation-options`	`any`
`goToLocationDisabled` reflected	`go-to-location-disabled`	`boolean`
`goToOverride`		`(((view: MapView \| SceneView, goToParameters: GoToParameters) => void))`
`graphic`		`Graphic`
`icon`	`icon`	`string`
`label`	`label`	`string`
`messageOverrides`		`Record<string, unknown>`
`position` deprecatedreflected	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`positionFilterFunction`		`Function`
`referenceElement`	`reference-element`	`HTMLArcgisLinkChartElement \| HTMLArcgisMapElement \| HTMLArcgisSceneElement \| string`
`rotationDisabled`	`rotation-disabled`	`boolean`
`scale`	`scale`	`number`
`state` readonlyreflected	`state`	`"disabled" \| "error" \| "feature-unsupported" \| "ready" \| "tracking" \| "waiting"`
`tracking` readonly		`boolean`
`view`		`MapView \| SceneView`

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

error

Property

error: any

Error that caused the last track-error event to fire.

Attribute: error
Default value: null

geolocationOptions

Property

geolocationOptions: any

An object used for setting optional position parameters.

Attribute: geolocation-options
Default value: null

goToLocationDisabled

Property

goToLocationDisabled: boolean

Indicates whether to navigate the view to the position and scale of the geolocated result.

Attribute: go-to-location-disabled
Default value: false

goToOverride

Property

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

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

graphic

Property

graphic: Graphic

The graphic used to show the user's location on the map.

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: "compass-north-circle"

label

Property

label: string

The component's default label.

Attribute: label

messageOverrides

Property

messageOverrides: Record<string, unknown>

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

position

deprecated

Property

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

positionFilterFunction

Property

positionFilterFunction: Function

A function that is used as an expression to evaluate geolocation points, and returns a boolean value.

Default value: null

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

rotationDisabled

Property

rotationDisabled: boolean

Indicates whether the component will automatically rotate to the device heading based on the Geolocation APIs GeolocationCoordinates.heading property.

Attribute: rotation-disabled
Default value: false

scale

Property

scale: number

Indicates the scale to set on the view when navigating to the position of the geolocated result, after a location is returned from the track event.

Attribute: scale
Default value: null

state

readonly

Property

The current state of the component.

Attribute: state
Default value: "disabled"

tracking

readonlyProperty

tracking: boolean

Indicates whether new positions are being watched.

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 Track 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>`
`start`	`start(): Promise<void>`
`stop`	`stop(): 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 arcgisTrack = document.querySelector("arcgis-track");
document.body.append(arcgisTrack);
await arcgisTrack.componentOnReady();
console.log("arcgis-track is ready to go!");

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

start

Method

start(): Promise<void>

Start tracking the user's location. Only start the component on a user gesture such as a click event.

Returns: Promise<void>

stop

Method

stop(): Promise<void>

Stop tracking the user's location.

Returns: Promise<void>

Events

Event	Type
`arcgisComplete`	`CustomEvent<TrackViewModelTrackEvent>`
`arcgisError`	`CustomEvent<TrackViewModelTrackErrorEvent>`
`arcgisPropertyChange`	`CustomEvent<{ name: "state"; }>`
`arcgisReady`	`CustomEvent<void>`

arcgisComplete

Event

arcgisComplete: CustomEvent<TrackViewModelTrackEvent>

arcgisError

Event

arcgisError: CustomEvent<TrackViewModelTrackErrorEvent>

arcgisPropertyChange

Event

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

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.