Skip to content

Rain and thunderstorms ​

RainLayer brings rain to the map: streaks falling around the camera, an overcast sky and a darker scene, lightning flashes with the odd bolt, and wet roofs.

ts
import { RainLayer } from 'maplibre-landmarks';

// After the other 3D layers (and after a FogLayer), right under the labels.
map.addLayer(new RainLayer({ id: 'rain', intensity: 0.8 }), firstSymbolLayerId);
OptionDefaultDescription
intensity0.70 (drizzle) to 1 (downpour): drops, streak opacity and how dark it gets
wind{ strength: 0.5, directionDeg: 250 }Slants the rain (1 ≈ 20°); the direction the wind blows from
lightningtruefalse for plain rain, or { intervalS: 10, bolts: 0.6 }
darken0.45How much the scene darkens under the clouds at full intensity
overcastSkytrueGrey MapLibre's sky (restored when the layer is removed)
wettrueWet roofs: darker and glossier on every RoofsLayer of the map
maxDrops15000Drops at full intensity
minZoom10Below this zoom no rain or flashes are drawn (the sky stays overcast)

Methods: setIntensity(intensity), setWind(wind), setLightning(lightning), strike(bolt?) and getStats() (drops, strikes, current flash).

How it works ​

  • Rain is a box of streaks between the camera and the ground it looks at, sized by the camera's distance, so it reads the same at every zoom. Drops are anchored to the ground, so they don't drift as the map pans, and buildings hide the rain behind them.
  • Overcast and lightning share one full-screen pass that dims everything drawn under the layer and adds the flash on top. Labels are drawn after it, so they stay readable.
  • Strikes come at random, intervalS apart on average, with one to three flickers each. A share of them (bolts) shows a jagged bolt to the ground ahead of the camera; the rest light up the clouds only. strike() sets one off now.
  • Wet roofs: the layer tells the map's shared renderer how wet it is (intensity), and roofs turn darker and glossier. They dry again when the rain stops or the layer is removed.

The sky follows setTheme: rain clouds are grey by day and stay dark at night.

MIT licensed. Models: Open Landmarks; map data © OpenStreetMap contributors and Overture Maps Foundation.