Skip to content

Instantly share code, notes, and snippets.

Created Mar 13, 2014
What would you like to do?
Leaflet BoundingBox Sample
<!DOCTYPE html>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src=""></script>
<link rel="stylesheet" href="" />
<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;
<div id="map"></div>
var map ='map').setView([0, 0], 3);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}{z}/{x}/{y}.png', {
attribution: '&amp;copy; &lt;a href=""&gt;OpenStreetMap&lt;/a&gt; contributors'
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
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:'
function updateBBox() {
map.on('drag', updateBBox);
map.on('zoomend', updateBBox)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment