> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt)
# Add a rain effect to a map
> **Note (new): 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`](https://docs.mapbox.com/style-spec/reference/root/#rain) property. [`setRain()`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#setrain) is called after the style is loaded, specifying the rain parameters. An [expression](https://docs.mapbox.com/style-spec/reference/expressions/) is used on the `density` and `vignette` properties to gradually fade in the rain effect between zoom levels 11 and 13.
> **Related content (playground): [Rain and Snow Playground](https://docs.mapbox.com/playground/rain-and-snow/)**
>
> To test this feature before implementing it, see our Rain and Snow Playground.
> Example code:
**JavaScript**
```html
Add a rain effect to a map
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: mapContainerRef.current,
zoom: 16.8,
center: [24.951528, 60.169573],
pitch: 74,
bearing: 12.8,
hash: true,
style: 'mapbox://styles/mapbox/standard'
});
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 ;
};
export default MapboxExample;
```
## More Examples
View some examples of our other style features here:
> **Related content (example): [Fog Example Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/example/add-fog/)**
>
> This example adds a fog effect to the map, giving the ability to shift between night and day.
> **Related content (example): [Snow Example Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/example/snow/)**
>
> 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.