> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)
# Add a snow effect to a map
> **Note (new): Feature available in Mapbox GL JS v3.9. or higher**
>
> To use this feature your application must use Mapbox GL JS v3.9 or any later releases.
This example adds a snow effect to the map by setting the style's [`snow`](https://docs.mapbox.com/style-spec/reference/root/#snow) property. [`setSnow()`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setsnow) is called after the style is loaded, specifying the snow parameters. An [expression](https://docs.mapbox.com/style-spec/reference/expressions/) is used on the `density` and `vignette` properties to gradually fade in the snow effect between zoom levels 11 and 13.
> **Related content (playground): [Rain and Snow Playground](https://docs.mapbox.com/playground/rain-and-snow/)**
>
> To test this feature before implementing it, see our Rain and Snow Playground.
> Example code:
**JavaScript**
```html
Add a snow effect to a map
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: mapContainerRef.current,
zoom: 16.8,
center: [24.951528, 60.169573],
pitch: 74,
bearing: 12.8,
hash: true,
style: 'mapbox://styles/mapbox/standard'
});
mapRef.current.on('style.load', () => {
const map = mapRef.current;
map.setConfigProperty('basemap', 'lightPreset', 'dusk');
// use an expression to transition some properties between zoom levels 11 and 13, preventing visibility when zoomed out
const zoomBasedReveal = (value) => {
return ['interpolate', ['linear'], ['zoom'], 11, 0.0, 13, value];
};
map.setSnow({
density: zoomBasedReveal(0.85),
intensity: 1.0,
'center-thinning': 0.1,
direction: [0, 50],
opacity: 1.0,
color: `#ffffff`,
'flake-size': 0.71,
vignette: zoomBasedReveal(0.3),
'vignette-color': `#ffffff`
});
});
}, []);
return ;
};
export default MapboxExample;
```
## More Examples
View some examples of our other style features here:
> **Related content (example): [Fog Example Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/example/add-fog/)**
>
> This example adds a fog effect to the map, giving the ability to shift between night and day.
> **Related content (example): [Rain Example Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/example/rain/)**
>
> This example adds a rain effect to the map by setting the style's rain property. You can adjust the intensity, direction, color, and more of the precipitation presented on screen.