How to get current scale of a Leaflet map?

Question

I've been looking through the Leaflet API to see if there is a getScale method or scale property of a map, and have't seen anything.

Does anyone know if Leaflet provides a way to get the current map scale?

Answer 1

You can get the current zoom level using getZoom().

Assuming that you're using the tile layer system as used by Google Maps, Bing, Open Street Map and Esri, you can use that to infer the scale - see What ratio scales do Google Maps zoom levels correspond to?

If you're not using that tile system, you may need to find another way to infer the scale from the zoom level.

There is a scale control but this only shows a scale bar, not the scale value. As far as I can see, the L.control.scale object doesn't contain the scale value.

Answer 2

If you want just the label:

// add a scale at at your map.
var scale = L.control.scale().addTo(map); 

// Get the label.
var metres = scale._getRoundNum(map.containerPointToLatLng([0, map.getSize().y / 2 ]).distanceTo( map.containerPointToLatLng([scale.options.maxWidth,map.getSize().y / 2 ])))
  label = metres < 1000 ? metres + ' m' : (metres / 1000) + ' km';

  console.log(label);

---

Now if you know the dimensions of the scale, drawn upon the map, and the geographical distance of the x axis of the map container from one side to the other, you can calculate the dominator, as seen below:

scale = dimension of the map / distance

Notice that from the scale controller, which Stephen shows, maxWidth is taken into account when leaflet calculates that number. More information on how leaflet calculates the number can be found here.

Said that, you can calculate how many meters each pixel represents by:

// Get the y,x dimensions of the map
var y = map.getSize().y,
    x = map.getSize().x;
// calculate the distance the one side of the map to the other using the haversine formula
var maxMeters = map.containerPointToLatLng([0, y]).distanceTo( map.containerPointToLatLng([x,y]));
// calculate how many meters each pixel represents
var MeterPerPixel = maxMeters/x ;

so if your scale is p pixels long, multiple p by MeterPerPixel to find out the scale value you would add.

// say this is your scale
var scale = L.control.scale().addTo(map);    

// This is the scale denominator
console.log(MeterPerPixel*scale.options.maxWidth);   

warning: LF rounds it as per code here

Currently, as far as I know, where isn't a way for a browser to report the dpi or the resolution of the screen which the map is drawn, so you can not reduce the scale to represent 'cm of map equals meters of distance'