Skip to main content

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.

EXAMPLE
Add a rain effect to a map

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

EXPERIMENTAL
Optional number between 0 and 1 inclusive. Defaults to 0.57. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Thinning factor of rain particles from center. 0 - no thinning. 1 - maximal central area thinning.

SDK SupportMapbox GL JSAndroid SDKiOS SDK

basic functionality

>= 3.9.0>= 11.9.0>= 11.9.0

color

EXPERIMENTAL
Optional color . Defaults to ["interpolate",["linear"],["measure-light","brightness"],0,"#03113d",0.3,"#a8adbc"]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Individual rain particle dorplets color.

SDK SupportMapbox GL JSAndroid SDKiOS SDK

basic functionality

>= 3.9.0>= 11.9.0>= 11.9.0

density

EXPERIMENTAL
Optional number between 0 and 1 inclusive. Defaults to ["interpolate",["linear"],["zoom"],11,0,13,0.5]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Rain particles density. Controls the overall screen density of the rain.

SDK SupportMapbox GL JSAndroid SDKiOS SDK

basic functionality

>= 3.9.0>= 11.9.0>= 11.9.0

direction

EXPERIMENTAL
Optional array of numbers between 0 and 360 inclusive. Defaults to [0,80]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Main rain particles direction. Azimuth and polar angles.

[
0,
45
]
SDK SupportMapbox GL JSAndroid SDKiOS SDK

basic functionality

>= 3.9.0>= 11.9.0>= 11.9.0

distortion-strength

EXPERIMENTAL
Optional number between 0 and 1 inclusive. Defaults to 0.7. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Rain particles screen-space distortion strength.

SDK SupportMapbox GL JSAndroid SDKiOS SDK

basic functionality

>= 3.9.0>= 11.9.0>= 11.9.0

droplet-size

EXPERIMENTAL
Optional array of numbers between 0 and 50 inclusive. Defaults to [2.6,18.2]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Rain droplet size. x - normal to direction, y - along direction

[
0,
45
]
SDK SupportMapbox GL JSAndroid SDKiOS SDK

basic functionality

>= 3.9.0>= 11.9.0>= 11.9.0

intensity

EXPERIMENTAL
Optional number between 0 and 1 inclusive. Defaults to 1. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Rain particles movement factor. Controls the overall rain particles speed

SDK SupportMapbox GL JSAndroid SDKiOS SDK

basic functionality

>= 3.9.0>= 11.9.0>= 11.9.0

opacity

EXPERIMENTAL
Optional number between 0 and 1 inclusive. Defaults to ["interpolate",["linear"],["measure-light","brightness"],0,0.88,1,0.7]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Rain particles opacity.

SDK SupportMapbox GL JSAndroid SDKiOS SDK

basic functionality

>= 3.9.0>= 11.9.0>= 11.9.0

vignette

EXPERIMENTAL
Optional number between 0 and 1 inclusive. Defaults to ["interpolate",["linear"],["zoom"],11,0,13,1]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Screen-space vignette rain tinting effect intensity.

SDK SupportMapbox GL JSAndroid SDKiOS SDK

basic functionality

>= 3.9.0>= 11.9.0>= 11.9.0

vignette-color

EXPERIMENTAL
Optional color . Defaults to ["interpolate",["linear"],["measure-light","brightness"],0,"#001736",0.3,"#464646"]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Rain vignette screen-space corners tint color.

SDK SupportMapbox GL JSAndroid SDKiOS SDK

basic functionality

>= 3.9.0>= 11.9.0>= 11.9.0
Was this page helpful?