Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Leaflet with latlng scale in meters and Control.Scale to match
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Custom Simple Map Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/ardhi/Leaflet.MousePosition/master/src/L.Control.MousePosition.css">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.leaflet-control-scale-line {
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%"></div>
<script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ardhi/Leaflet.MousePosition/master/src/L.Control.MousePosition.js"></script>
<script>
var customCRS = L.extend(L.CRS.Simple, {
projection: L.extend( L.Projection.LonLat, {
bounds: L.bounds([0, 0], [2160, 4096])
}),
transformation: new L.Transformation(1, 0, 1, 0),
scale: function (zoom) {
return Math.pow(2, zoom -2);
},
infinite: false
});
var map = L.map('map',{
crs: customCRS
}).setView([0, 0], 1);
L.control.scale({imperial: false}).addTo(map);
L.control.mousePosition().addTo(map);
L.imageOverlay(
'https://upload.wikimedia.org/wikipedia/commons/0/0c/Vector_Video_Standards8.svg',
[[0, 0], [2160, 4096]],
{
attribution: '<a href="https://commons.wikimedia.org/wiki/File:Vector_Video_Standards8.svg">Vector Video Standards</a>'
}
).addTo(map);
</script>
</body>
</html>
/*
* Meter Projection
* marko@zabreznik.net
* needs 0.8-dev
* With this lovely mess of code we force Leaflet to use latlng in meters
* Update: Added an example and cleaned up code
* */
L.CRS.Meters = L.extend(L.CRS, {
projection: L.extend( L.Projection.LonLat, {
bounds: L.bounds([0, 0], [2160, 4096])
}),
transformation: new L.Transformation(1, 0, -1, 0),
scale: function (zoom) {
return Math.pow(2, zoom);
},
infinite: false
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.