Time Zone Label

ESM:

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-time-zone-label";

CDN:

No specific import is needed for this component.

Since:ArcGIS Maps SDK for JavaScript 4.33

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` reflected	`disabled`	`boolean`
`expandDirection` reflected	`expand-direction`	`"end" \| "start"`
`expanded` reflected	`expanded`	`boolean`
`icon` reflected	`icon`	`string`
`label`	`label`	`string`
`messageOverrides`		`Record<string, unknown>`
`position` reflected	`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`
`state` readonlyreflected	`state`	`"disabled" \| "ready"`
`view`		`MapView`

disabled

Property

disabled: boolean

When true, sets the component to a disabled state so the user cannot interact with it.

Attribute: disabled
Default value: false

expandDirection

Property

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

expanded

Property

expanded: boolean

The expanded state of the component.

Attribute: expanded
Default value: false

icon

Property

icon: string

ArcGIS Maps SDK for JavaScript 4.34

Time Zone Label since 4.33, icon added at 4.34.

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: "time-zone"

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

Property

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

Property

referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string

Attribute: reference-element

state

readonly

Property

state: "disabled" | "ready"

The state of the component.

Attribute: state

view

Property

view: MapView

Methods

Method	Signature
`componentOnReady`	`componentOnReady(): 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 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>

Events

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

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.