Control.Scale
Quick answer
L.control.scale displays a scale bar computed from ground distance along the horizontal center line at the current zoom. It supports metric and imperial units and recalculates automatically whenever the map moves or zooms. Position, maximum bar width and idle updating are all configurable.
L.control.scale( options ) → Control.Scale
Key points
- maxWidth rounds the bar to a clean value instead of an arbitrary pixel width.
- updateWhenIdle true skips recalculation while the map is actively being dragged.
- Enabling metric and imperial together produces a two-line bar.
Example
var scale = L.control.scale({
position: 'bottomleft',
maxWidth: 120,
metric: true,
imperial: false,
updateWhenIdle: false
}).addTo(map);
/* 同时显示公制与英制会撑成两行 */
L.control.scale({ maxWidth: 90, imperial: true }).addTo(map);
/* 比例尺文字随地图缩放自动重算，监听 zoomend 只用于读取 */
map.on('zoomend', function () {
console.log(map.getZoom(), scale.getContainer().textContent.trim());
});Notes
- The bar reflects center-line pixels only, so north-south distances differ at high latitudes.
- Printed or rescaled screenshots invalidate the numbers, so annotate exported images separately.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Control.Scale. https://www.jingweizhi.com/en/leaflet/api/control-scale.html (accessed 2026-11-03).