I'm trying to draw a Bezier curve in OpenLayers (geometryFunction2) but there is something wrong with my approach I don't get. The first line seems fine but I can't place the next one. It work's fine with turf.js (geometryFunction). I'm trying that with a LineString geometry but I would also like to know if I could do that with Polygon lines also?


  • See github.com/openlayers/openlayers/issues/896 Here is the draw interaction fiddle linked there updated to OpenLayers 6 jsfiddle.net/79n4ockt
    – Mike
    Jul 16, 2020 at 21:03
  • I’m aware of that thread but that solution you mentioned uses turf js. I would like to know how I can apply a custom mathematical Formular
    – BR75
    Jul 16, 2020 at 21:12
  • 2
    You could use your own function - I've removed the turf library and created a function based on the turf source code jsfiddle.net/Lmkq4yof
    – Mike
    Jul 16, 2020 at 22:10
  • thanks, that works. Can I make this somehow for polygons too?
    – BR75
    Jul 17, 2020 at 7:12

1 Answer 1


For a polygon you would need a smooth transition at the start/end of the ring, which you could get by wrapping the line coordinates three times (increasing the default resolution used in the calculation to match) then taking the middle section of the curve

var geometryFunction = function(coordinates, geometry) {
        if (!geometry) {
          geometry = new ol.geom.Polygon([]);
        var extendedCoordinates = bezier(coordinates.concat(coordinates,coordinates,[coordinates[0]]), {resolution: 30000});
        var length = extendedCoordinates.length / 3;
        var section = extendedCoordinates.slice(length, length * 2);
        return geometry;


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.