Fog | Mapbox Style Spec

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 smooth-rampinterpolateexpressions. opacityTransitionable.

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
basic functionality	>= 2.3.0	>= 10.6.0	>= 10.6.0

high-color

Optional color. Defaults to "#245cdf". Supports smooth-rampinterpolateexpressions. opacityTransitionable.

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
basic functionality	>= 2.9.0	>= 10.6.0	>= 10.6.0

horizon-blend

Optional number between 0 and 1 inclusive. Defaults to ["interpolate",["linear"],["zoom"],4,0.2,7,0.1]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

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
basic functionality	>= 2.3.0	>= 10.6.0	>= 10.6.0

range

Optional array of numbers between -20 and 20 inclusive. Defaults to [0.5,10]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

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
basic functionality	>= 2.3.0	>= 10.6.0	>= 10.6.0

space-color

Optional color. Defaults to ["interpolate",["linear"],["zoom"],4,"#010b19",7,"#367ab9"]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

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
basic functionality	>= 2.9.0	>= 10.6.0	>= 10.6.0

star-intensity

Optional number between 0 and 1 inclusive. Defaults to ["interpolate",["linear"],["zoom"],5,0.35,6,0]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

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
basic functionality	>= 2.9.0	>= 10.6.0	>= 10.6.0

vertical-range

Optional array of numbers greater than or equal to 0. Defaults to [0,0]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

An array of two number values, specifying the vertical range, measured in meters, over which the fog should gradually fade out. When both parameters are set to zero, the fog will be rendered without any vertical constraints.

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 3.0.0	>= 11.0.0	>= 11.0.0

Was this page helpful?