How to add a buffer with fixed size in pixels using leaflet and turf

Question

I'm trying to create a buffer with fixed size using leaflet and turf, the buffer should be created when the mapClick event is emitted, so basically a buffer is created when I click the map

when creating a buffer or a circle you need to pass a radius property which is pretty much the "size" of the buffer, which can be in Kilometers, Meters, Miles and so on

The problem is: I need the buffer to always be the same size in pixels regardless of the mapZoom or Scale, for instance, using circle:

const center = [LatlongFromMouseEvent];
const radius = 5;
const options = {steps: 10, units: 'kilometers', properties: {foo: 'bar'}};
const circle = turf.circle(center, radius, options);

OR using buffer

const point = turf.point([LatlongFromMouseEvent]);
const buffered = turf.buffer(point, 5, {units: 'kilometers'});

OR using native Leaflet "Circle" constructor

 const lCircle = new Circle([event.latlng.lat, event.latlng.lng], {
 color: 'red',
 fillColor: '#f03',
 fillOpacity: 0.5,
 radius: 500
})

  lCircle.addTo(mapInstance)

All of those "buffers" will change it's size depending on the level of zoom of the map

AND "circleMarker" from leaflet automatically changes size when you change the zoom

So what's the units of the size of the "buffer", pixels or meters? — IvanSanchez
Pixels would be ideal, but there's no unit size for "pixels" on turf or leaflet — Hugo
CircleMarker wont work for me, I also need the buffer polygon, I already tried CircleMarker with tools like circleToPolygon and it just converts the tiny point to a polygon and not the whole buffer with the radius — Hugo
You want something like github.com/bbecquet/Leaflet.PolylineOffset then. — IvanSanchez

Hugo Hugo · Accepted Answer · 2021-09-08T10:41:26

Found a solution by using the metersPerPixel formula

const zoom = map.getZoom()
const lat = map.getCenter().lat
const metersPerPixel = 156543.03392 * Math.cos(lat * Math.PI / 180) / Math.pow(2, zoom)
const radius = metersPerPixel * sizeInPixels

More info about the formula in:

https://gis.stackexchange.com/questions/7430/what-ratio-scales-do-google-maps-zoom-levels-correspond-to

How to add a buffer with fixed size in pixels using leaflet and turf

1 Answers