CODEWITHSUNDEEP
javascriptleafletbezier
Whatbithever
Whatbithever

Reputation: 21

Add cubic bezier curves to Leaflet paths

I'm using Leaflet 1.0 beta as a tiled image viewer, so I don't need any fancy coordinate translations, GeoJSON, etc.

I'd like to be able to add cubic bezier lines to overlays, preferrably identical to how SVG d attribute works, since Leaflet seems to only support polygonal paths (straight lines). Is there a simple way to achieve this (e.g. by extending the Polygon class)?

I've tried directly changing the d attribute of the paths, but they get redrawn when the view changes.
I've also tried using turfjs' bezier splines, but apparently there's no support for what I want, just the smoothing of a list of coordinates.

Upvotes: 2

Views: 3871

Answers (2)

iH8
iH8

Reputation: 28688

You can use turf-bezier to create an interpolated bezier line out of any LineString geometry.

Bezier spline @ http://turfjs.org/

Answer kindly taken from tmcw @ In Mapbox.js, how to smooth a polyline?

Upvotes: 0

Elfalem
Elfalem

Reputation: 367

I've created a Leaflet plugin to draw bézier curves. The format of the path data is similar to SVG path commands but only absolute commands are supported:

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);

Upvotes: 4

Related Questions