Fog

A style's fog property is a global effect that improves depth perception by fading out distant objects.

Fog is a subtle rendering effect that improves the visuals of maps. Fog can fit a specific mood, and fading with distance provides an important visual cue to help perceive depth. Developers can also use fog to optimize their maps, as this effect can greatly reduce the number of tiles loaded in the distance.

"fog": {
    "range": [-0.5, 3],
    "color": "white",
    "horizon-blend": 0.1
});

color

Optional color. Defaults to "#ffffff". Supports interpolateexpressions. Transitionable.

The color of the fog. Using opacity is recommended only for smoothly transitioning fog on/off as anything less than 100% opacity results in more tiles loaded and drawn.

SDK SupportMapbox GL JSAndroid SDKiOS SDKmacOS SDK

basic functionality

>= 2.3.0Not yet supportedNot yet supportedNot yet supported

horizon-blend

Optional number between 0 and 1 inclusive. Defaults to 0.1. Supports interpolateexpressions. Transitionable.

Horizon blend applies a smooth fade from the color of the fog to the color of the sky. A value of zero leaves a sharp transition from fog to sky. Increasing the value blends the color of fog into increasingly high angles of the sky.

SDK SupportMapbox GL JSAndroid SDKiOS SDKmacOS SDK

basic functionality

>= 2.3.0Not yet supportedNot yet supportedNot yet supported

range

Optional array of numbers between -20 and 20 inclusive. Defaults to [0.5,10]. Supports interpolateexpressions. Transitionable.

The start and end distance range in which fog fades from fully transparent to fully opaque. The distance to the point at the center of the map is defined as zero, so that negative range values are closer to the camera, and positive values are farther away.

"range": [
  0.5,
  10
]
SDK SupportMapbox GL JSAndroid SDKiOS SDKmacOS SDK

basic functionality

>= 2.3.0Not yet supportedNot yet supportedNot yet supported