arcgis-weather | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/map-components/components/arcgis-weather";

Inheritance:: ArcgisWeather→PublicLitElement

Since: ArcGIS Maps SDK for JavaScript 4.28

The Weather component allows easy selection and configuration of weather effects in a arcgis-scene component. The available weather types are: sunny, cloudy, rainy, snowy, and foggy.

To set the weather programmatically, apply the desired weather type to the arcgis-scene.environment property of the Scene component.

// Access the Scene component.
const viewElement = document.querySelector("arcgis-scene");
await viewElement.viewOnReady();
// Specify the weather settings.
viewElement.environment.weather = {
   type: "rainy", // autocasts as new RainyWeather({ cloudCover: 0.7, precipitation: 0.3 })
   cloudCover: 0.7,
   precipitation: 0.3
};

To determine if the weather visualization is available, check the boolean value of viewElement.environment.weatherAvailable. The weather is only available:

in global arcgis-scene.viewingMode,
when atmosphereEnabled property on arcgis-scene.environment is true,
at lower altitudes, near the ground.

Known limitations

Weather is only supported in a 3D arcgis-scene component.

See also

Demo

Properties

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`headingLevel`	`heading-level`	`HeadingLevel`
`hideHeader`	`hide-header`	`boolean`
`icon`	`icon`	`string`
`label`	`label`	`string \| undefined`
`messageOverrides`		`Record<string, unknown> \| undefined`
`referenceElement`	`reference-element`	`ArcgisReferenceElement \| string \| undefined`
`state` readonly		`WeatherState`
`view`		`SceneView \| undefined`

autoDestroyDisabled

Property

Type: 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

Type: HeadingLevel

Indicates the heading level to use for the title of the component. By default, this message is rendered as a level 4 heading (e.g. <h4>Time range</h4>). Depending on the component's placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.

See also

Heading Elements

Attribute: heading-level
Default value: 4

hideHeader

Property

Type: boolean

Whether to hide the component's header.

Attribute: hide-header
Default value: false

icon

Property

Type: 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: "partly-cloudy"

label

Property

Type: string | undefined

The component's default label.

Attribute: label
Default value: "Weather"

messageOverrides

Property

Type: Record<string, unknown> | undefined

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

referenceElement

Property

Type: ArcgisReferenceElement | string | undefined

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

state

readonly Property

Type: WeatherState

The current state of the component.

view

Property

Type: SceneView | undefined

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 arcgis-weather component will be associated with a map or scene component rather than using the view property.

Methods

Method	Signature
`componentOnReady` inherited	`componentOnReady(): Promise<this>`
`destroy`	`destroy(): Promise<void>`

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Inherited from: PublicLitElement

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

Example

const arcgisWeather = document.querySelector("arcgis-weather");
document.body.append(arcgisWeather);
await arcgisWeather.componentOnReady();
console.log("arcgis-weather is ready to go!");

destroy

Method

Signature: destroy (): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

Events

Name	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.