Leaflet calculating meters per pixel at zoom level

javascript leaflet geo
Matthew Kirkley picture Matthew Kirkley · Dec 18, 2014 · Viewed 11.4k times · Source

I am trying to determine a way to calculate the number of meters represented by 1 pixel at a given zoom level and geo centerpoint in Leaflet. Could anyone direct me to the math involved or if there is a way to do this out of the box in leaflet? I am not finding much out there.

Answer

iH8 picture iH8 · Dec 18, 2014

You can use the containerPointToLatLng conversion function of L.Map to get the latLngcoordinates for a given pixelcoordinate. If you take one of the first pixel, and one of the next, you can use the distanceTo utility method of L.LatLng to calculate the distance in meters between them. See the following code (assuming 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)

That should work, thanks to Jarek Piórkowski for pointing my mistake before the edit.

Related questions

How to change the map center in Leaflet.js

The following code initializes a leaflet map. The initialize function centers the map based on user location. How do I change the center of the map to a new position after calling the initialize function? function initialize() { map = L.map(…

Read More
How to reference static assets within vue javascript

I'm looking for the right url to reference static assets, like images within Vue javascript. For example, I'm creating a leaflet marker using a custom icon image, and I've tried several urls, but they all return a 404 (Not Found): Main.…

Read More
Marker in leaflet, click event

var map = L.map('map'); var marker = L.marker([10.496093,-66.881935]).on('click', onClick); function onClick(e) {alert(e.latlng);} marker.addTo(map) When I do click in the marker, the alert message is: undefined But if I put it in …

Read More