A better scalebar for leaflet maps
JavaScript CSS HTML
Latest commit 51bb23a Sep 30, 2016 @daniellsu Correct styling height
Corrects a slight glitch in how the bar is represented in Microsoft Edge
browser.

README.md

leaflet-betterscale

A better scalebar for leaflet maps that is more GIS-like with alternating black/white bars.

Example

https://daniellsu.github.io/leaflet-betterscale/

All that is required is to include the CSS, the JS and the following line of code:

Simple example

var map = L.map('map').setView([30.182505,-93.318665], 12);        
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {    
        maxZoom: 18,
        attribution:'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
L.control.betterscale().addTo(map);

Options

  • The options are the exact same as the leaflet built-in scale control, L.Control.Scale().