Leaflet Distance Scale

The Leaflet mapping library does already have a scale control, which shows the scale of the current center of the map in metric (m/km) and /or imperial (mi/ft) systems. However, if you want a scale with more customization options, you can also use the leaflet-graphicscale plug-in.

This distance scale plug-in for Leaflet allows you to add an animated distance scale to a Leaflet map with a number of different style options. The basic options allow you to add a scale with a number of fill options for each measurement unit, You can view how these options look by adjusting the settings on this demo map.

You can also edit the css styles of leaflet-graphicscale to change the font family and font size used in the scale. If you're happy with JavaScript, you can also play with the leaflet-graphicscale JavaScript code itself to adapt the plug-in to display other measurement systems (e.g. create a scale which shows distance in smoots).