import "@arcgis/map-components/components/arcgis-time-zone-label";Time Zone Label is a component for displaying the current time zone of a Map. The component has two states, collapsed as a small button and expanded displaying the internationalized name of the Map's time zone. Users can toggle between these states by clicking the component's expand/collapse button. By default the component is collapsed.
When expanding, the component will lengthen inwards when positioned within a Map.
This behavior can be overridden by setting the expandDirection property to either "start" or "end".
Demo
Properties
| Property | Attribute | Type |
|---|---|---|
disabled | boolean | |
expand-direction | "end" | "start" | |
expanded | boolean | |
label | string | |
| Record<string, unknown> | |
position | "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing" | |
reference-element | ||
statereadonly | state | "disabled" | "ready" |
disabled
disabled: booleanWhen true, sets the component to a disabled state so the user cannot interact with it.
- Attribute
- disabled
- Default value
- false
expandDirection
expandDirection: "end" | "start"The direction the component will expand.
By default, the component will expand inward if assigned to a View UI corner. If the component is positioned manually, the component will expand towards the "end" which is equivalent to right in a LTR application.
- Attribute
- expand-direction
messageOverrides
messageOverrides: Record<string, unknown>Replace localized message strings with your own strings.
Note: Individual message keys may change between releases.
position
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"- Attribute
- position
- Default value
- "top-left"
referenceElement
referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string- Attribute
- reference-element
Slots
Events
| Event | Type |
|---|---|
CustomEvent<{ name: "state"; }> | |
CustomEvent<void> |
arcgisPropertyChange
arcgisPropertyChange: CustomEvent<{ name: "state"; }>Emitted when the value of a property is changed. Use this to listen to changes to properties.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisReady
arcgisReady: CustomEvent<void>Emitted when the component associated with a map or scene view is is ready to be interacted with.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
Methods
| Method | Signature |
|---|---|
componentOnReady(): Promise<void> |
componentOnReady
componentOnReady(): Promise<void>Create a promise that resolves once component is fully loaded.
Example
const arcgisTimeZoneLabel = document.querySelector("arcgis-time-zone-label");
document.body.append(arcgisTimeZoneLabel);
await arcgisTimeZoneLabel.componentOnReady();
console.log("arcgis-time-zone-label is ready to go!");- Returns
- Promise<void>