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);
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. |