Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elfalem/Leaflet.curve
A Leaflet plugin for drawing Bézier curves and other complex shapes.
https://github.com/elfalem/Leaflet.curve
bezier-curve complex-shapes curve leaflet
Last synced: 5 days ago
JSON representation
A Leaflet plugin for drawing Bézier curves and other complex shapes.
- Host: GitHub
- URL: https://github.com/elfalem/Leaflet.curve
- Owner: elfalem
- License: other
- Created: 2015-09-17T02:25:30.000Z (about 9 years ago)
- Default Branch: gh-pages
- Last Pushed: 2023-10-02T21:43:01.000Z (about 1 year ago)
- Last Synced: 2024-09-18T14:51:11.729Z (about 2 months ago)
- Topics: bezier-curve, complex-shapes, curve, leaflet
- Language: JavaScript
- Homepage:
- Size: 613 KB
- Stars: 216
- Watchers: 7
- Forks: 52
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - elfalem/Leaflet.curve - A Leaflet plugin for drawing Bézier curves and other complex shapes. (others)
README
# Leaflet.curve
A [Leaflet](http://leafletjs.com) plugin for drawing Bézier curves and other complex shapes. ([DEMO])
### Usage
If using directly, include the plugin after Leaflet:
```
```
(If rendering using canvas AND using animations, include [tween.js](https://github.com/tweenjs/tween.js) as well.)
If using Node.js, install and import:
```
yarn add @elfalem/leaflet-curve
```
```
import L from 'leaflet' // import { curve, Curve } from 'leaflet'; // for TypeScript
import '@elfalem/leaflet-curve'
```
Add a path that includes a Bézier curve and straight lines:
```
var path = L.curve(['M',[50.54136296522163,28.520507812500004],
'C',[52.214338608258224,28.564453125000004],
[48.45835188280866,33.57421875000001],
[50.680797145321655,33.83789062500001],
'V',[48.40003249610685],
'L',[47.45839225859763,31.201171875],
[48.40003249610685,28.564453125000004],'Z'],
{color:'red',fill:true}).addTo(map);
```
### Notes
* This plugin is based on Leaflet version 1.1.0.
* SVG rendering is best supported. Canvas rendering is also possible.
* Browser and device compatibility testing is very limited.
### API
The first argument to L.curve() is an array of path data. This is composed of commands and coordinates. The commands are a subset of the SVG path [specification](http://www.w3.org/TR/SVG/paths.html).
|Command|Parameters|Description|
|-------|----------|-----------|
|M|[lat,lng]+|move to [lat,lng]|
|L|[lat,lng]+|line to [lat,lng]|
|H|[lng]+|horizontal line to [lng]|
|V|[lat]+|vertical line to [lat]|
|C|([lat1,lng1],[lat2,lng2],[lat,lng])+|cubic Bézier curve to [lat,lng] with control points at [lat1,lng1] and [lat2,lng2]|
|S|([lat2,lng2],[lat,lng])+|cubic bézier curve to [lat,lng] with control points at reflection of second control point of previous curve [lat1,lng1] and [lat2,lng2]|
|Q|([lat1,lng1],[lat,lng])+|quadratic Bézier curve to [lat,lng] with control point at [lat1,lng1]|
|T|([lat,lng])+|quadratic Bézier curve to [lat,lng] with control point at reflection of control point of previous curve [lat1,lng1]|
|Z||close path (line to M)|
Note that only absolute commands (uppercase) are implemented. It's possible to approximate elliptical arcs (command 'A') with Bézier curves (the `elliptical-arc` branch implements this command if you're interested).
The `L.Curve` class extends `L.Path` so options, events, and methods inherited from `L.Path` are available. The following new option and methods are introduced by `L.Curve`.
**Options**
|Option|Type|Default|Description|
|------|----|-------|-----------|
|animate|Integer or animate options object|`undefined`|Animates the curve. It takes a parameter which is the same one provided to the `options` parameter of [Element.animate()](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) method. Note: Web Animations API support [varies](http://caniuse.com/#feat=web-animation) across browsers.|
**Methods**
|Method|Returns|Description|
|------|-------|-----------|
|setPath(`pathData[]`)|`this`|Replaces the current path with the given array of commands and coordinates.|
|getPath()|`pathData[]`|Returns array of the commands and coordinates in the path.|
|setLatLngs(`pathData[]`)|`this`|Alias to method this.setPath(`pathData[]`) using the naming convention of L.Polyline and other Leaflet components.|
|getLatLngs()|`pathData[] `|Alias to method this.getPath() using the naming convention of L.Polyline and other Leaflet components.|
|trace(`samplingDistance[]`)|`latLng[]`|Returns array of points that lie on the curve at the given distances. Sampling distance is a decimal value between 0 and 1 inclusive and is applied to each segment (i.e. command) of the curve. See [DEMO] for example.|
### License
MIT
### Contributions
* Bug reports and pull requests are welcome!
[DEMO]: http://elfalem.github.io/Leaflet.curve/