1

I'm trying to make a buffer with Leafler, Turf, work out of the drawnItems of Leaflet Draw; but the result isn't right. It's too high but not large enough. Could you help me fix it?enter image description here

I'm using this button to get the custom buffer value:

<input type="text" id="number" value="15"><button onclick="myFunction()">Disabled buffer</button>

the script that call it is:

var x, myFunction, data, features, buffered, bufferedLayer;
function myFunction() {
var x = document.getElementById("number").value;
var xdiv = x/100;
var data = drawnItems.toGeoJSON();
  var buffered = turf.buffer(data, xdiv,{units: 'kilometers'});
        var bufferedLayer = L.geoJSON(null);
        bufferedLayer.addData(buffered);
            drawnItems.addLayer(bufferedLayer); 
               bufferedLayer.options.crs = L.CRS.EPSG4326;   
        bufferedLayer.addTo(map);
 }
8
  • @TomazicM It may be an error. I changed it
    – Vincent Dc
    Feb 18, 2022 at 23:14
  • What is your map projection?
    – TomazicM
    Feb 19, 2022 at 15:04
  • @TomazicM it is still leaflet default, 3857, mercator (also named 900913 like I sometimes see it)
    – Vincent Dc
    Feb 19, 2022 at 18:04
  • The code above cannot be the reason for described problem, see simple JSFiddle example: jsfiddle.net/TomazicM/zoc6vxjd
    – TomazicM
    Feb 19, 2022 at 19:06
  • But there is a clear situation, that could cause it. Leaflet uses [lat, lng] coordinate order, but GeoJSON uses [lng, lat] order. If you would feed Leaflet coordinate to turf.buffer method and then take result and swap coordinates for each polygon coordinate, you would get vertically flattened circle. Reason for this is that buffer coordinates would be calculated nearer to equator, where meridians are further apart. When then moved back to north where meridians are closer together, this would cause horizontal squeeze of circle polygon.
    – TomazicM
    Feb 19, 2022 at 19:14

1 Answer 1

1

The egg-shaped buffer is a known bug to Turf.min.js on older versions, especially version 2, that I used.

Switched to turf.min.js version 6 and solved the problem.

Your Answer

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

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