WebGL rain animation for Leaflet maps
Clone or download
Latest commit 902a099 Jan 8, 2019
Permalink
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

README.md

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