Rain
A style's rain
property is a global styling effect that can be used to create an animated rain effect. This property can be used to create a rainy scene or match a designer's aesthetic. Rain provides a visual cue to improve the appearance of a map and can be used to create a more true-to-life atmosphere.
See what a style using the rain
property looks like in a web browser with Mapbox GL JS.
"rain": {
"density": 0.5,
"intensity": 1.0,
"color": "#a8adbc",
"opacity": 0.7,
"vignette": 1.0,
"vignette-color": "#464646",
"direction": [0, 80],
"droplet-size": [2.6, 18.2],
"distortion-strength": 0.7,
"center-thinning": 0
}
center-thinning
0
and 1
inclusive. Defaults to 0.57
. Supports interpolate
expressions. Transitionable. Thinning factor of rain particles from center. 0 - no thinning. 1 - maximal central area thinning.
SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
---|---|---|---|
basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |
color
["interpolate",["linear"],["measure-light","brightness"],0,"#03113d",0.3,"#a8adbc"]
. Supports interpolate
expressions. Transitionable. Individual rain particle dorplets color.
SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
---|---|---|---|
basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |
density
0
and 1
inclusive. Defaults to ["interpolate",["linear"],["zoom"],11,0,13,0.5]
. Supports interpolate
expressions. Transitionable. Rain particles density. Controls the overall screen density of the rain.
SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
---|---|---|---|
basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |
direction
0
and 360
inclusive. Defaults to [0,80]
. Supports interpolate
expressions. Transitionable. Main rain particles direction. Azimuth and polar angles.
[
0,
45
]
SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
---|---|---|---|
basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |
distortion-strength
0
and 1
inclusive. Defaults to 0.7
. Supports interpolate
expressions. Transitionable. Rain particles screen-space distortion strength.
SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
---|---|---|---|
basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |
droplet-size
0
and 50
inclusive. Defaults to [2.6,18.2]
. Supports interpolate
expressions. Transitionable. Rain droplet size. x - normal to direction, y - along direction
[
0,
45
]
SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
---|---|---|---|
basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |
intensity
0
and 1
inclusive. Defaults to 1
. Supports interpolate
expressions. Transitionable. Rain particles movement factor. Controls the overall rain particles speed
SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
---|---|---|---|
basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |
opacity
0
and 1
inclusive. Defaults to ["interpolate",["linear"],["measure-light","brightness"],0,0.88,1,0.7]
. Supports interpolate
expressions. Transitionable. Rain particles opacity.
SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
---|---|---|---|
basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |
vignette
0
and 1
inclusive. Defaults to ["interpolate",["linear"],["zoom"],11,0,13,1]
. Supports interpolate
expressions. Transitionable. Screen-space vignette rain tinting effect intensity.
SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
---|---|---|---|
basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |
vignette-color
["interpolate",["linear"],["measure-light","brightness"],0,"#001736",0.3,"#464646"]
. Supports interpolate
expressions. Transitionable. Rain vignette screen-space corners tint color.
SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
---|---|---|---|
basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |