Leaflet.Rain

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

Demo

Installation

works with leaflet@1.0.0 and higher

npm install leaflet
npm install leaflet-rain

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

Usage

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

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

Options

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

Methods

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.

License