Add a snow effect to a map | Mapbox GL JS

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.

JavaScript

React

JavaScript

React


<!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>

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

JavaScript

React


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;

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

追加の開発者リソース

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