Skip to main content

Rain

Additional Developer Resources

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.

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.
PLAYGROUND
Rain and Snow Playground

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​

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
Additional Developer Resources
Was this page helpful?