Add a snow effect to a map
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 property. setSnow() is called after the style is loaded, specifying the snow parameters. An expression is used on the density and vignette properties to gradually fade in the snow effect between zoom levels 11 and 13.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a snow effect to a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.9.2/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.2/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
window.onload = () => {
const map = (window.map = new mapboxgl.Map({
container: 'map',
zoom: 16.8,
center: [24.951528, 60.169573],
pitch: 74,
bearing: 12.8,
hash: true,
style: 'mapbox://styles/mapbox/standard',
projection: 'globe'
}));
map.on('style.load', () => {
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`
});
});
};
</script>
</body>
</html>
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
mapRef.current = new mapboxgl.Map({
container: mapContainerRef.current,
zoom: 16.8,
center: [24.951528, 60.169573],
pitch: 74,
bearing: 12.8,
hash: true,
style: 'mapbox://styles/mapbox/standard',
projection: 'globe'
});
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 <div id="map" style={{ height: '100%' }} ref={mapContainerRef} />;
};
export default MapboxExample;
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.Was this example helpful?