Snow
A style's snow
property is a global styling effect that can be used to add animated snow to the map. This property can be used to create a winter scene or match a designer's aesthetic. Snow provides a visual cue to improve the appearance of a map and can be used to create a festive or more true-to-life atmosphere.
See what a style using the snow
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.
"snow": {
"density": 0.85,
"intensity": 1.0,
"center-thinning": 0.1,
"direction": [0, 50],
"opacity": 1.0,
"color": "#ffffff",
"flake-size": 0.71,
"vignette": 0.3,
"vignette-color": "#ffffff"
}
center-thinning
0
and 1
inclusive. Defaults to 0.4
. Supports interpolate
expressions. Transitionable. Thinning factor of snow 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
Snow particles 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.85]
. Supports interpolate
expressions. Transitionable. Snow particles density. Controls the overall particles number.
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,50]
. Supports interpolate
expressions. Transitionable. Main snow 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 |
flake-size
0
and 5
inclusive. Defaults to 0.71
. Supports interpolate
expressions. Transitionable. Snow flake particle size. Correlates with individual particle screen size
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. Snow particles movement factor. Controls the overall particles movement 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 1
. Supports interpolate
expressions. Transitionable. Snow 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,0.3]
. Supports interpolate
expressions. Transitionable. Snow vignette screen-space effect. Adds snow tint to screen corners
SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
---|---|---|---|
basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |
vignette-color
Snow 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 |