Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Display a Scale Factor (e.g. 1:50,000) for Leaflet maps, checkout the Demo.

Leaflet.ScaleFactor is based on Leaflet's Control.Scale and works with the latest version of Leaflet, 1.0.0-rc1 it also likely works with older versions. Jquery 1.0 or higher is required for its .height() function. A pure JavaScript alternative would be better but i'm not sure how to go about implementing that.

The calculation to determine the scale factor is approximate and could likely be improved further, as of right now its calculated as follows.

  1. Find half the map height in pixels (middle of map)
  2. Get Leaflet to determine the lat/long of (0,middle of map)
  3. Get Leaflet to determine the lat/long of (100,middle of map)
  4. Get Leaflet to calculate the real world distance in meters between the two points.
  5. Get the pixels per physical screen millimeter
  6. Add a div with height:1mm; to the page
  7. Get jQuery to return the calculated height in pixels
  8. Multiply 100px by the pixels/mm
  9. Convert physical screen size of 100px from milimeters to meters
  10. Divide real world meters per 100px by screen meters per 100px
  11. Format and display the scale

Quick Start

  1. Create a leaflet map. Checkout Leaflets Quick Start Guide for a basic map example.

  2. Include jQuery, Leaflet.ScaleFactor.min.css and Leaflet.ScaleFactor.min.js

    <link rel="stylesheet" type="text/css" href="">
    <script src=""></script>
    <script src=""></script>
  3. Add the ScaleFactor control:


Complete Example

Here is everything you need to get this up and running. Copy and past the following to an .html file:

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>Leaflet.ScaleFactor DEMO</title>
	<link rel="stylesheet" href="" />
	<link rel="stylesheet" type="text/css" href="">
	<div id="map"></div>
	<script src=""></script>
	<script src=""></script>
	<script src=""></script>
	    osm = new L.TileLayer(
	    	{attribution: 'Map data &copy; OpenStreetMap contributors'}

	    var map ='map', {
	        center: [52.26869,-113.81034],
	        zoom: 18


Checkout the Demo



Option Type Default Description
position String 'bottomleft' The position of the control (one of the map corners). See control positions.
updateWhenIdle Boolean false If true, the control is updated on moveend, otherwise it's always up-to-date (updated on move).


Display a Scale Factor (1:50,000) for Leaflet maps




No releases published


No packages published
You can’t perform that action at this time.