0
votes

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

1
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

1 Answers

0
votes

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