Skip to main content

Snow

Additional Developer Resources

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.

EXAMPLE
Add a snow effect to a map

See what a style using the snow 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.

 
"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​

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

Thinning factor of snow 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 "#ffffff". Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Snow particles 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.85]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Snow particles density. Controls the overall particles number.

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,50]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Main snow 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

flake-size​

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

Snow flake particle size. Correlates with individual particle screen size

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.

Snow particles movement factor. Controls the overall particles movement 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 1. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Snow 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,0.3]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Snow vignette screen-space effect. Adds snow tint to screen corners

SDK SupportMapbox GL JSAndroid SDKiOS SDK

basic functionality

>= 3.9.0>= 11.9.0>= 11.9.0

vignette-color​

EXPERIMENTAL
Optional color . Defaults to "#ffffff". Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Snow 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?