Weather visualization

Explore in the sandboxView live

This sample shows how to change the weather visualization in a SceneView. This is part of the environment property of the SceneView. Use the dropdown menu on top right to change the weather type in the scene. The daylight widget on the bottom right allows you to check out the weather with different lighting conditions.

Four different weather types are available: sunny, cloudy, rainy and foggy. The easiest way to change the weather is to specify it in the SceneView constructor:

Use dark colors for code blocks
            
1
2
3
4
5
6
7
8
9
10
11
12
let view = new SceneView({
  container: "viewDiv",
  map: new Map({
    basemap: "satellite",
    ground: "world-elevation"
    }),
  environment: {
    weather: {
      type: "cloudy"   // autocasts as new CloudyWeather()
    }
  }
});

Additionally you can adapt the amount of clouds in the sky with the cloudCover property:

Use dark colors for code blocks
    
1
2
3
4
view.environment.weather = {
  type: "cloudy",
  cloudCover: 0.4   // autocasts as new CloudyWeather({ cloudCover: 0.4 })
}

For foggy weather, use the parameter fogStrength instead:

Use dark colors for code blocks
    
1
2
3
4
view.environment.weather = {
  type: "foggy",
  fogStrength: 0.6   // autocasts as new FoggyWeather({ fogStrength: 0.6 })
}

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