Rain

Search Style Specification

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 Support	Mapbox GL JS	Android SDK	iOS 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 Support	Mapbox GL JS	Android SDK	iOS 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 Support	Mapbox GL JS	Android SDK	iOS 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 Support	Mapbox GL JS	Android SDK	iOS 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 Support	Mapbox GL JS	Android SDK	iOS 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 Support	Mapbox GL JS	Android SDK	iOS 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 Support	Mapbox GL JS	Android SDK	iOS 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 Support	Mapbox GL JS	Android SDK	iOS 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 Support	Mapbox GL JS	Android SDK	iOS 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 Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 3.9.0	>= 11.9.0	>= 11.9.0

このpageは役に立ちましたか？