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>

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

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;

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

Additional Developer Resources

Mapbox Developer Discord

Developer Cheatsheet

Mapbox Support

Ask AI

Was this example helpful?