Mutually exclusive layers in Leaflet layer control
A setTimeout is necessary to keep the overlayadd event from firing multiple times
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<div id="map" style="height: 300px"></div>
JavaScript
var map = new L.Map('map', {
center: new L.LatLng(45.5 + 0.003,-73.5 + 0.003),
zoom: 16
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
map.on('click', function(e){
var containerPoint = map.latLngToContainerPoint(e.latlng);
var layerPoint = map.latLngToLayerPoint(e.latlng);
console.log("container point: " + containerPoint.x + "," + containerPoint.y);
console.log("layer point: " + containerPoint.x + "," + layerPoint.y);
console.log("layer point from event: " + e.layerPoint.x + "," + e.layerPoint.y);
});
var greenIcon = new LeafIcon({
iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png'
});
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);