Fog | Style Specification | Mapbox GL JS

A style's fog property is a global styling effect that can be used to create an atmospheric gradient, stars, and haze. These properties can increase realism or match a designer's aesthetic. Fog provides a visual cue to improves depth perception and can boost performance by reducing the number of tiles loaded in the distance.

Fog is supported only in globe and mercator projections.

"fog": {
    "range": [0.8, 8],
    "color": "#dc9f9f",
    "horizon-blend": 0.5,
    "high-color": "#245bde",
    "space-color": "#000000",
    "star-intensity": 0.15
}

color

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

The color of the atmosphere region immediately below the horizon and within the range and above the horizon and within horizon-blend. 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 Support	Mapbox GL JS	Android SDK	iOS SDK	macOS SDK
basic functionality	>= 2.3.0	>= 10.6.0	>= 10.6.0	Not yet supported

high-color

Optional color. Defaults to "#245cdf". Supports interpolateexpressions. Transitionable.

The color of the atmosphere region above the horizon, high-color extends further above the horizon than the color property and its spread can be controlled with horizon-blend. The opacity can be set to 0 to remove the high atmosphere color contribution.

SDK Support	Mapbox GL JS	Android SDK	iOS SDK	macOS SDK
basic functionality	>= 2.9.0	>= 10.6.0	>= 10.6.0	Not yet supported

horizon-blend

Optional number between 0 and 1 inclusive. Defaults to ["interpolate",["linear"],["zoom"],4,0.2,7,0.1]. Supports interpolateexpressions. Transitionable.

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

SDK Support	Mapbox GL JS	Android SDK	iOS SDK	macOS SDK
basic functionality	>= 2.3.0	>= 10.6.0	>= 10.6.0	Not 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 Support	Mapbox GL JS	Android SDK	iOS SDK	macOS SDK
basic functionality	>= 2.3.0	>= 10.6.0	>= 10.6.0	Not yet supported

space-color

Optional color. Defaults to ["interpolate",["linear"],["zoom"],4,"#010b19",7,"#367ab9"]. Supports interpolateexpressions. Transitionable.

The color of the region above the horizon and after the end of the horizon-blend contribution. The opacity can be set to 0 to have a transparent background.

SDK Support	Mapbox GL JS	Android SDK	iOS SDK	macOS SDK
basic functionality	>= 2.9.0	>= 10.6.0	>= 10.6.0	Not yet supported

star-intensity

Optional number between 0 and 1 inclusive. Defaults to ["interpolate",["linear"],["zoom"],5,0.35,6,0]. Supports interpolateexpressions. Transitionable.

A value controlling the star intensity where 0 will show no stars and 1 will show stars at their maximum intensity.

SDK Support	Mapbox GL JS	Android SDK	iOS SDK	macOS SDK
basic functionality	>= 2.9.0	>= 10.6.0	>= 10.6.0	Not yet supported