Fog
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
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
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
0
and 1
inclusive. Defaults to ["interpolate",["linear"],["zoom"],4,0.2,7,0.1]
. Supports interpolate
expressions. 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 |
---|---|---|---|
basic functionality | >= 2.3.0 | >= 10.6.0 | >= 10.6.0 |
range
-20
and 20
inclusive. Defaults to [0.5,10]
. Supports interpolate
expressions. 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.
[
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
["interpolate",["linear"],["zoom"],4,"#010b19",7,"#367ab9"]
. Supports interpolate
expressions. 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 |
---|---|---|---|
basic functionality | >= 2.9.0 | >= 10.6.0 | >= 10.6.0 |
star-intensity
0
and 1
inclusive. Defaults to ["interpolate",["linear"],["zoom"],5,0.35,6,0]
. Supports interpolate
expressions. 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 |
---|---|---|---|
basic functionality | >= 2.9.0 | >= 10.6.0 | >= 10.6.0 |
vertical-range
0
. Defaults to [0,0]
. Supports interpolate
expressions. Transitionable. 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 |