Add a rain 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 rain effect to the map by setting the style's rain property. setRain() is called after the style is loaded, specifying the rain parameters. An expression is used on the density and vignette properties to gradually fade in the rain effect between zoom levels 11 and 13.

JavaScript

React

JavaScript

React


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a rain 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', 'dawn');

            // 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.setRain({
                density: zoomBasedReveal(0.5),
                intensity: 1.0,
                color: '#a8adbc',
                opacity: 0.7,
                vignette: zoomBasedReveal(1.0),
                'vignette-color': '#464646',
                direction: [0, 80],
                'droplet-size': [2.6, 18.2],
                'distortion-strength': 0.7,
                'center-thinning': 0 // Rain to be displayed on the whole screen area
            });
        });
    };
</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', 'dawn');

      // 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.setRain({
        density: zoomBasedReveal(0.5),
        intensity: 1.0,
        color: '#a8adbc',
        opacity: 0.7,
        vignette: zoomBasedReveal(1.0),
        'vignette-color': '#464646',
        direction: [0, 80],
        'droplet-size': [2.6, 18.2],
        'distortion-strength': 0.7,
        'center-thinning': 0 // Rain to be displayed on the whole screen area
      });
    });
  }, []);

  return <div id="map" style={{ height: '100%' }} ref={mapContainerRef} />;
};

export default MapboxExample;

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

追加の開発者リソース

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