import "@arcgis/map-components/components/arcgis-time-slider";The Time Slider component simplifies visualization of temporal data in your application.
Demo
Properties
| Property | Attribute | Type |
|---|---|---|
actions | | Collection<Action> |
autoDestroyDisabled | auto-destroy-disabled | boolean |
disabledreflected | disabled | boolean |
effectiveStopsreadonly | | Array<Date> |
fullTimeExtent | | TimeExtent |
icon | icon | string |
label | label | string |
layout | layout | "auto" | "compact" | "wide" |
loop | loop | boolean |
mode | mode | "cumulative-from-end" | "cumulative-from-start" | "instant" | "time-window" |
playRate | play-rate | number |
positiondeprecated | 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 |
statereadonlyreflected | state | "disabled" | "playing" | "ready" |
stops | | StopsByCount | StopsByDates | StopsByInterval |
tickConfigs | | Array<TickConfig> |
timeExtent | | TimeExtent |
timeVisible | time-visible | boolean |
timeZone | time-zone | string |
view | | MapView | SceneView |
actions
actions: Collection<Action>Defines actions that will appear in a menu when the user clicks the ellipsis button
in the widget.
autoDestroyDisabled
autoDestroyDisabled: booleanIf 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
disabled
disabled: booleanWhen true, sets the widget to a disabled state so the user cannot interact with it.
- Attribute
- disabled
- Default value
- false
effectiveStops
effectiveStops: Array<Date>Lists the specific locations on the timeline where handle(s) will snap to when manipulated.
- Default value
- null
icon
icon: stringIcon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).
- See also
- Attribute
- icon
- Default value
- "clock"
layout
layout: "auto" | "compact" | "wide"Determines the layout used by the TimeSlider widget.
- Attribute
- layout
- Default value
- "auto"
loop
loop: booleanWhen true, the time slider will play its animation in a loop.
- Attribute
- loop
- Default value
- false
mode
mode: "cumulative-from-end" | "cumulative-from-start" | "instant" | "time-window"The time slider mode.
- Attribute
- mode
- Default value
- "time-window"
playRate
playRate: numberThe time (in milliseconds) between animation steps.
- Attribute
- play-rate
- Default value
- 1000
position
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"slot instead.- Attribute
- position
referenceElement
referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | stringBy 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.
- Attribute
- reference-element
state
state: "disabled" | "playing" | "ready"The current state of the component.
- Attribute
- state
- Default value
- "disabled"
stops
stops: StopsByCount | StopsByDates | StopsByIntervalDefines specific locations on the time slider where thumbs will snap to when manipulated.
- Default value
- { count : 10 }
tickConfigs
tickConfigs: Array<TickConfig>When set, overrides the default TimeSlider ticks labelling system.
- Default value
- null
timeExtent
timeExtent: TimeExtentThe current time extent of the time slider.
- Default value
- null
timeVisible
timeVisible: booleanShows/hides time in the display.
- Attribute
- time-visible
- Default value
- false
timeZone
timeZone: stringDates and times displayed in the widget will be displayed in this time zone.
- Attribute
- time-zone
view
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
viewproperty which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Time Slider component will be associated with a map or scene component rather than using theviewproperty.
Methods
| Method | Signature |
|---|---|
applyTimeSliderSettings | applyTimeSliderSettings(settings: Pick<__esri.TimeSliderProperties, "fullTimeExtent" | "loop" | "stops">): Promise<void> |
componentOnReady | componentOnReady(): Promise<void> |
destroy | destroy(): Promise<void> |
next | next(): Promise<void> |
play | play(): Promise<void> |
previous | previous(): Promise<void> |
stop | stop(): Promise<void> |
updateWebDocument | updateWebDocument(webmap: __esri.WebMap): Promise<void> |
applyTimeSliderSettings
applyTimeSliderSettings(settings: Pick<__esri.TimeSliderProperties, "fullTimeExtent" | "loop" | "stops">): Promise<void>Parameters
| Parameter | Type | Optional? |
|---|---|---|
| settings | {
loop?: boolean | undefined;
fullTimeExtent?: nullish | TimeExtentProperties;
stops?: nullish | Array<Date>;
} |
- Returns
- Promise<void>
componentOnReady
componentOnReady(): Promise<void>Create a promise that resolves once component is fully loaded.
Example
const arcgisTimeSlider = document.querySelector("arcgis-time-slider");
document.body.append(arcgisTimeSlider);
await arcgisTimeSlider.componentOnReady();
console.log("arcgis-time-slider is ready to go!");- Returns
- Promise<void>
updateWebDocument
updateWebDocument(webmap: __esri.WebMap): Promise<void>Parameters
| Parameter | Type | Optional? |
|---|---|---|
| webmap | WebMap |
- Returns
- Promise<void>
Events
| Event | Type |
|---|---|
arcgisPropertyChange | CustomEvent<{ name: "state" | "timeExtent" | "effectiveStops" | "fullTimeExtent"; }> |
arcgisReady | CustomEvent<void> |
arcgisTriggerAction | CustomEvent<TimeSliderTriggerActionEvent> |
arcgisPropertyChange
arcgisPropertyChange: CustomEvent<{ name: "state" | "timeExtent" | "effectiveStops" | "fullTimeExtent"; }>Emitted when the value of a property is changed. Use this to listen to changes to properties.
arcgisReady
arcgisReady: CustomEvent<void>Emitted when the component associated with a map or scene view is ready to be interacted with.
arcgisTriggerAction
arcgisTriggerAction: CustomEvent<TimeSliderTriggerActionEvent>Emitted when an action is triggered on the component.