Leaflet event
HTML
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/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(e);
$('#log').html(new Date().toLocaleTimeString() + ', [' + e.name + '] event: [' + e.type + '], overlay: [' + e.overlay + ']<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);
}
}