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.

PLAYGROUND

Rain and Snow Playground

To test this feature before implementing it, see our Rain and Snow Playground.

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.11.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.11.0/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アカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

More Examples

View some examples of our other style features here:

EXAMPLE

Fog Example Mapbox GL JS

This example adds a fog effect to the map, giving the ability to shift between night and day.

EXAMPLE

Snow Example Mapbox GL JS

This example adds a snow effect to the map by setting the style's snow property. You can adjust the intensity, direction, color, and more of the precipitation presented on screen.

追加の開発者リソース

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

More Examples​

More Examples