Search code examples
dictionarysizewidthleaflet

Leaflet map width in metres


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?


Solution

  • 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.