Leaflet plugin, allows to draw river-like polylines (extending from the beginning to the end)
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo Add min/max placeholders Jul 10, 2017
dist Add dist files Jul 9, 2017
src Fix demo bugs Jul 10, 2017
.gitignore revert GeoJSON coordinates Dec 9, 2016
README.md Update Readme Jul 9, 2017
index.js Add tune slider Jul 7, 2017
package.json Fix demo bugs Jul 10, 2017

README.md

Leaflet.River

A class for drawing lines of different width (like rivers) on a map.

Useful when you want to show how rivers 'flow' on the map.

Simple polylines without using Leaflet.River Using Leaflet.River
simple polylines using Leaflet.River

Demo

Installation

requires leaflet@1.0.2

npm install leaflet-river
require('leaflet');
require('leaflet-river');

or

<script src="path/to/leaflet@1.0.2/dist/leaflet.js"></script>
<script src="path/to/Leaflet.river.js"></script>

Usage

To create a L.River, pass an array of latlngs to the factory function as the first argument. The second optional argument is options object.

var latLngs = [[48.491, 99.613], [48.492, 99.601], [48.496, 99.599]];

var river = L.river(latLngs, {
    minWidth: 1,  // px
    maxWidth: 10  // px
}).addTo(map);

Attention:

  • L.River doesn't support multipolylines.
  • first point of an array has to be the source of the river.

You can specify parameters minWidth and maxWidth later using setMinWidth and setMaxWidth setters.

For better perfomance you can specify river width depending on its length, for example, when you create L.river objects from GeoJSON polylines. In this case, use useLength method, the single parameter is ratio, which is equal to (river length (px) / max width (px)).

var rivers = L.geoJson(geoJsonData, {
    onEachFeature: function(feature, layer) {
        var latLngs = L.GeoJSON.coordsToLatLngs(feature.geometry.coordinates),
            river = L.river(latLngs, {
                /**
                * ratio
                * for example, the longest river's length is 1000 px;
                * max width of the longest river has to be 10px;
                * ratio = 1000 / 10;
                * if ratio is specified,
                * all rivers will be drawn proportionally
                */
                ratio: 100
            }).addTo(map);
    }
});

API reference

Factory

Factory Description
L.river(LatLng[] latlngs, options options?) Create river polygon from latLngs array.

Options

Option Type Default Description
minWidth Number 1 Min width of the river (px)
maxWidth Number 10 Max width of the river (px)
ratio Number null Ratio between river length and max width. Used to draw river depending on its length
Options, inherited from Path options Styling options

Methods

Method Returns Description
setMintWidth(Number) this Set min river width (px).
setMaxWidth(Number) this Set max river width (px).
getMinWidth() Number Get min river width (px).
getMaxWidth() Number Get max river width (px).
useLength(Number) this Draw river depending on its length
convertToPolyline(options options?) Object Convert river polygon to initial polyline.

License