Add cubic bezier curves to Leaflet paths

Question

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.

score 4 · Answer 1 · answered Feb 21 '16 at 20:18

4

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

answered Feb 21 '16 at 20:18

Elfalem

347
3
17

Thanks for this! Would you mind giving me an idea on how to make this work with [Leaflet.Editable](https://github.com/Leaflet/Leaflet.Editable)? Thanks again! – dev Mar 01 '16 at 07:34
Unfortunately, it's not possible to use those two plugins together. I do plan into looking into making them work together in the future, unless someone beats me to it ;-) – Elfalem Mar 23 '16 at 16:10

score 0 · Answer 2 · edited Aug 28 '21 at 19:18

0

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?

edited Aug 28 '21 at 19:18

webjay

5,358
9
45
62

answered Sep 04 '15 at 18:52

iH8

27,722
4
67
76

I apologize for not having included this information earlier, but I need support for cubic bezier curves, preferrably identical to how SVG `d` works. I tried using Turf before, but I couldn't understand if I can make this work and how. Could you give me a short example? Thanks! – Whatbithever Sep 04 '15 at 19:13
@Whatbithever that is information you should have put, and should still put, in your question: show what you've tried, and explain why that wasn't what you wanted, so people don't have to spend time on giving you an answer that you already ruled out without telling – Mike 'Pomax' Kamermans Sep 06 '15 at 02:13

Add cubic bezier curves to Leaflet paths

2 Answers2