Skip to content

Instantly share code, notes, and snippets.

@mpfeil
Created Mar 13, 2014
Embed
What would you like to do?
Leaflet BoundingBox Sample
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>BoundingBox</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<style type="text/css">
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.info h5 {
margin: 0 0 5px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([0, 0], 3);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
}).addTo(map);
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function () {
var bounds = map.getBounds();
this._div.innerHTML = '<h4>BoundingBox</h4><hr><h5>NE:'
+bounds._northEast+'</h5><br/><h5>NE:'
+bounds._southWest+'</h5>';
};
info.addTo(map);
function updateBBox() {
info.update();
}
map.on('drag', updateBBox);
map.on('zoomend', updateBBox)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment