leaflet-river v1.0.1

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

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

Options

Methods

License