A FogEffect allows you to apply a fog-like effect on a 3D WebGLMap.

It provides an approximation of fog in the atmosphere, and can greatly increase the user's perception of depth and scale in a 3D view.

No fog Fog
Fog disabled Fog enabled
Fog only has an effect on 3D WebGLMaps.

  map.effects.fog = {
fogColor: "rgb(147, 183, 222)",
maximumAltitude: 50e3




  • FogEffect


density?: number

The density of the fog is a non-negative value. Typical values range from 0 to 15.

Increasing the value makes the fog thicker.


fogColor?: string

The color of the fog.


"rgb(148, 194, 231)"
heightFalloff?: number

Height falloff is a non-negative value. Typical values range from 0 to 15. It represents the rate at which the fog density decreases above the earth.

Height falloff can be used for example to simulate thick fog limited to lower altitudes. It is unrelated to the camera's altitude above the earth. This setting contrasts with maximumAltitude, which is a setting that can be used to completely turn off fog when the camera is above some altitude. Even if there were some fog present at lower altitudes, the entire fog effect will be turned off.

You can set heightFalloff to 0. In that case, fog density does not depend on height. It is uniform across all heights. The maximumAltitude setting still applies.


lightColor?: string

The color of the light (if any) as seen through the fog.

If you want to disable this, you can set it to the same color as the fogColor.


"rgb(255, 230, 179)"
maximumAltitude?: number

The altitude of the camera, in meters above the ellipsoid, above which all fog disappears.

The fog effect automatically and gradually reduces as the camera gets farther away from the earth, and moves closer to the maximum altitude. This setting contrasts with heightFalloff, which is a setting that limits the fog to lower altitudes and is unrelated to the camera's position.