Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Jul 9, 2017
src
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
setMinWidth(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

About

Draw river-like polylines (extending from the beginning to the end) with Leaflet

Resources

Releases

No releases published
You can’t perform that action at this time.