Leaflet event

by Xelio

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<script src="http://github.com/Xelio/Leaflet/raw/test/dist/leaflet.js"></script>
<div id="map" style="height: 300px"></div>
<div id="button"><button onclick="toggleOverlay2();return false;">Toggle overlay 2</button><button onclick="toggleBaseLayer();return false;">Toggle baselayer</button></div>
<div id="log" style="height: 200px; overflow-x: scroll;"></div>

CSS

.div-icon {
font-size: 18px;
color: #000000;
}

JavaScript

var map = new L.Map('map');

var mapquestUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png';
var subDomains = ['otile1','otile2','otile3','otile4'];
var mapquestAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>,<a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors.';
var tilesLayer1 = new L.TileLayer(mapquestUrl, {maxZoom: 18, attribution: mapquestAttrib, subdomains: subDomains});
var mapquestUrl2 = 'http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png';
var tilesLayer2 = new L.TileLayer(mapquestUrl2, {maxZoom: 18, attribution: mapquestAttrib, subdomains: subDomains});
map.addLayer(tilesLayer1);

var icon1 = L.divIcon({className: 'div-icon', html: "1"});
var marker1 = L.marker([44.98131207805678, 6.0726203025917], {icon: icon1});
var icon2 = L.divIcon({className: 'div-icon', html: "2"});
var marker2 = L.marker([44.98131207805678, 6.073026722623153], {icon: icon2});

var layerChooser = new L.Control.Layers({'Map': tilesLayer1, 'Sat': tilesLayer2}, {'overlay 1': marker1, 'overlay 2': marker2});

map.addLayer(marker1);
map.addControl(layerChooser);

var objectBounds = [[44.98131207805678, 6.0726203025917], [44.981459751363204, 6.073026722623153]];
map.fitBounds(new L.LatLngBounds(objectBounds));

map.on('overlayadd overlayremove baselayerchange', function(e){
    console.log('overlay change');
    $('#log').html(new Date().toLocaleTimeString() + ', ' + e.layer.name + ' event: ' + e.type + '<br>'  +  $('#log').html());
});

toggleOverlay2 = function() {
    map.hasLayer(marker2) ? map.removeLayer(marker2) : map.addLayer(marker2);
}

toggleBaseLayer = function() {
    if(map.hasLayer(tilesLayer2)) {
        map.addLayer(tilesLayer1);
        map.removeLayer(tilesLayer2);
    } else {
        map.addLayer(tilesLayer2);
        map.removeLayer(tilesLayer1);
    }
}