Leaflet per pixel flowmeter at zoom level

Question

I am trying to determine how to calculate the number of meters represented by 1 pixel at a given zoom level and a geocentric point in a sheet. Can someone direct me to the math involved, or if there is a way to do this from the box in the leaflet? I do not find much there.

Answer 1

You can use the containerPointToLatLng L.Map transform function to get latLng coordinates for a given pixel coordinator. If you take one of the first pixel and one of the following, you can use the distanceTo utility for L.LatLng to calculate the distance in meters between them. See the following code (assuming the map is an instance of L.Map):

 var centerLatLng = map.getCenter(); // get map center var pointC = map.latLngToContainerPoint(centerLatLng); // convert to containerpoint (pixels) var pointX = [pointC.x + 1, pointC.y]; // add one pixel to x var pointY = [pointC.x, pointC.y + 1]; // add one pixel to y // convert containerpoints to latlng's var latLngC = map.containerPointToLatLng(pointC); var latLngX = map.containerPointToLatLng(pointX); var latLngY = map.containerPointToLatLng(pointY); var distanceX = latLngC.distanceTo(latLngX); // calculate distance between c and x (latitude) var distanceY = latLngC.distanceTo(latLngY); // calculate distance between c and y (longitude) 

This should work, thanks to Jarek Piorkowski for pointing out my mistake before editing.

Answer 2

You can use this to determine the number of meters per pixel:

 metresPerPixel = 40075016.686 * Math.abs(Math.cos(map.getCenter().lat * Math.PI/180)) / Math.pow(2, map.getZoom()+8); 

Answer 3

Take a look at the openstreetmap.org page at zoom levels . It gives this formula for calculating counters per pixel:

The distance represented by one pixel (S) is determined

S=C*cos(y)/2^(z+8) where ...

C - (equatorial) circumference of the Earth

z - zoom level

y is the latitude of where the scale interests you.

Answer 4

Correct me if I'm wrong, IMHO, the number of meters per pixel = map height in meters / map height in pixels

 function metresPerPixel() { const southEastPoint = map.getBounds().getSouthEast(); const northEastPoint = map.getBounds().getNorthEast(); const mapHeightInMetres = southEastPoint.distanceTo(northEastPoint); const mapHeightInPixels = map.getSize().y; return mapHeightInMetres / mapHeightInPixels; } 

Answer 5

For Mercator web counters, you can use this:

 let mpp = (2*Math.PI*L.CRS.EPSG3857.R) / L.CRS.EPSG3857.scale(map.getZoom()); 

This gives you meters per pixel for the current zoom level in the EPSG3857 "meters".

(Leaflet version 1.5.0)