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?
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It only takes a minute to sign up.Sign up to join this community
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.
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'