Weather component

This sample exemplifies how to apply the weather visualization to a Scene component. The clouds and weather effects such as rain can help tell a story in a more realistic and immersive way. Click the "Flooding" button to see the effects of an extreme rainfall event in the city of Utrecht, NL, or explore different weather settings with the Weather component:

Use dark colors for code blocksCopy
1
2
3
4
5
<arcgis-scene item-id="c56dab9e4d1a4b0c9d1ee7f589343516">
  <!-- include the Weather component inside the Scene component -->
  <arcgis-weather>
  </arcgis-weather>
</arcgis-scene>

The weather can also be set after initialization of the view and specified as a weather type in the environment property of the Scene component. The five different weather types are sunny, cloudy, rainy, snowy, and foggy. Make sure to check the documentation for the different weather types for weather-specific properties, such as precipitation for rainy weather:

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
const arcgisScene = document.querySelector("arcgis-scene");
// wait for the view to initialize
arcgisScene.addEventListener("arcgisViewReadyChange", () => {
  arcgisScene.environment.weather = {
    type: "rainy",     // autocasts as new RainyWeather({ cloudCover: 0.7, precipitation: 0.3 })
    cloudCover: 0.7,
    precipitation: 0.3
  };
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.