TileLayer bounds

testing option

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<div id="map"></div>

CSS

#map { height: 400px; }

.leaflet-tile { border: solid 1px; }

.msgContainer {
    position: absolute;
    text-align: center;
    padding: 3px;
}

.message {
    background-color: #ffffff;
    padding: 3px;
}

JavaScript

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([43.42929958543752,-89.79147434234619], 14);

var bounds = [[43.3377,-89.8235],[43.4741,-89.5952]];

// add an OpenStreetMap tile layer
var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    bounds: bounds
});

tileLayer.on('tileload', function(tileevent) { 
    var container = tileevent.tile.parentNode;
    var msgContainer = document.createElement('div');
    msgContainer.setAttribute('style', tileevent.tile.getAttribute('style'));
    console.log(tileevent);
    msgContainer.setAttribute('class', 'msgContainer');
    msgContainer.innerHTML = '<span class="message">' + tileevent.url + '</span>';
    container.appendChild(msgContainer);
});

tileLayer.addTo(map);


L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);

map.on('move', function() { console.log(map.getCenter()); });