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.
- Find half the map height in pixels (middle of map)
- Get Leaflet to determine the lat/long of (0,middle of map)
- Get Leaflet to determine the lat/long of (100,middle of map)
- Get Leaflet to calculate the real world distance in meters between the two points.
- Get the pixels per physical screen millimeter
- Add a div with height:1mm; to the page
- Get jQuery to return the calculated height in pixels
- Multiply 100px by the pixels/mm
- Convert physical screen size of 100px from milimeters to meters
- Divide real world meters per 100px by screen meters per 100px
- Format and display the scale
-
Create a leaflet map. Checkout Leaflets Quick Start Guide for a basic map example.
-
Include jQuery, Leaflet.ScaleFactor.min.css and Leaflet.ScaleFactor.min.js
<link rel="stylesheet" type="text/css" href="https://rawgit.com/MarcChasse/leaflet.ScaleFactor/master/leaflet.scalefactor.min.css"> <script src="https://npmcdn.com/[email protected]/dist/jquery.min.js"></script> <script src="https://rawgit.com/MarcChasse/leaflet.ScaleFactor/master/leaflet.scalefactor.min.js"></script>
-
Add the ScaleFactor control:
L.control.scalefactor().addTo(map);
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">
<head>
<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="https://npmcdn.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" type="text/css" href="https://rawgit.com/MarcChasse/leaflet.ScaleFactor/master/leaflet.scalefactor.min.css">
<style>html,body{margin:0;}#map{width:100vw;height:100vh;}</style>
</head>
<body>
<div id="map"></div>
<script src="https://npmcdn.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<script src="https://rawgit.com/MarcChasse/leaflet.ScaleFactor/master/leaflet.scalefactor.min.js"></script>
<script>
osm = new L.TileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: 'Map data © OpenStreetMap contributors'}
);
var map = L.map('map', {
center: [52.26869,-113.81034],
zoom: 18
});
map.addLayer(osm);
L.control.scalefactor().addTo(map);
</script>
</body>
</html>Checkout the Demo
L.control.scalefactor
| 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). |