Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ggolikov/Leaflet.River
Draw river-like polylines (extending from the beginning to the end) with Leaflet
https://github.com/ggolikov/Leaflet.River
Last synced: 18 days ago
JSON representation
Draw river-like polylines (extending from the beginning to the end) with Leaflet
- Host: GitHub
- URL: https://github.com/ggolikov/Leaflet.River
- Owner: ggolikov
- Created: 2016-11-11T11:11:42.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-06-08T15:50:45.000Z (over 3 years ago)
- Last Synced: 2024-10-01T10:10:18.578Z (about 1 month ago)
- Language: JavaScript
- Homepage: http://ggolikov.github.io/Leaflet.River/
- Size: 10.5 MB
- Stars: 28
- Watchers: 4
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://ggolikov.github.io/Leaflet.River)
## Installation
requires [email protected]
```
npm install leaflet-river
```
```javascript
require('leaflet');
require('leaflet-river');
```
or
```html
```
## 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.
```javascript
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)).
```javascript
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](https://opensource.org/licenses/MIT)