I want to have a button that creates a circle on my leaflet map.
The circle should be placed in the map Center and the diameter should be 75% of the current displayed area width.
To get the lat
and lgn
of the Center was easy. But I don't know how the 75% of the map with in metres for the radius.
I tried the Method getsize
but it returns the width in px. But I need this in metres.
Is there a plugin? Or is it possible to calculate it with the zoomlevel and the Pixel from getsize?
Fetch the map bounds (which is a LatLngBounds
), get the east (or west) longitude of those bounds, and use L.LatLng.distanceTo
to get meters out of that, like:
var center = map.getCenter();
var eastBound = map.getBounds().getEast();
var centerEast = L.latLng(center.lat, eastBound);
var dist = center.distanceTo(centerEast);
var radius = dist * 0.75
Also remember that Leaflet has L.Circle
which works in meters (or CRS units), and L.CircleMarker
which works in pixels.