Leaflet.scalefactor-master NPM

leaflet.ScaleFactor

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

Quick Start

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/jquery@3.0.0/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);
```

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">
<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/leaflet@1.0.0-rc.1/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/jquery@3.0.0/dist/jquery.min.js"></script>
	<script src="https://npmcdn.com/leaflet@1.0.0-rc.1/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 &copy; 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

Options

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).

@everything-registry/sub-chunk-2054

1.0.0

1 year ago