Need help with Leaflet.curve?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

elfalem
120 Stars 38 Forks Other 49 Commits 4 Opened issues

Description

A Leaflet plugin for drawing Bézier curves and other complex shapes.

Services available

!
?

Need anything else?

Contributors list

Leaflet.curve

A Leaflet 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 as well.)

If using Node.js, install and import:

yarn add @elfalem/leaflet-curve
import L from 'leaflet'
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.

|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() method. Note: Web Animations API support varies 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.| |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!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.