Rain
A style's rain property is a global styling effect that can be used to add animated rain to the map. 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.
The rain and snow playground allows you to test these style values in browser, offering UI to adjust the particle density, intensity, color, speed, etc.
"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 interpolateexpressions. 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 interpolateexpressions. 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 interpolateexpressions. 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 interpolateexpressions. 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 interpolateexpressions. 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 interpolateexpressions. 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 interpolateexpressions. 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 interpolateexpressions. 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 interpolateexpressions. 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 interpolateexpressions. 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 |