WebGL rain animation for Leaflet maps
Clone or download
Latest commit 902a099 Jan 8, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Test Leaflet version Jan 8, 2019
src Update readme Jan 7, 2019
.gitignore Initial commit Jan 6, 2019
README.md Test Leaflet version Jan 8, 2019
package.json Test Leaflet version Jan 8, 2019



WebGL rain animation for Leaflet maps. Extends L.Polygon.



works with leaflet@1.0.0 and higher

npm install leaflet
npm install leaflet-rain
import L from 'leaflet';
import 'leaflet-rain';


let map = L.map(...);

let points = [[latlngs], [latlngs], ...],
    options = {
        angle: 80,
        width: 1,
        spacing: 10,
        length: 4,
        interval: 10,
        speed: 1,
        color: 'Oxa6b3e9'
    rain = L.rain(points, options).addTo(map);

API reference


Factory Description
L.rain(LatLng[] latlngs, options options?) Create rain animation inside (multi)polygon with given latlngs.


Option Type Default Description
angle Number 80 Rain angle (degrees)
width Number 1 Drop width (px)
spacing Number 10 X-spacing between drops (px)
length Number 4 Drop length (px)
interval Number 10 Y-spacing between drops (px)
speed Number 1 Rain speed factor. Values greater 1 increase speed
color String Oxa6b3e9 Rain color hex value


Method Description
setAngle(Number) Sets rain angle (degrees).
setWidth(Number) Sets drop width (px).
setSpacing(Number) Sets x-spacing between drops (px).
setLength(Number) Sets drop length (px).
setInterval(Number) Sets y-spacing between drops (px).
setSpeed(Number) Sets rain speed factor.
setColor(hex string) Sets rain color.