JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css">
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.label/leaflet.label.css">
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="http://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
CSS
.leaflet-ville-label {
pointer-events:none;
}
JavaScript
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmade = new L.TileLayer(cloudmadeUrl, {
maxZoom: 18
}),
map = new L.Map('map', {
layers: [cloudmade],
center: new L.LatLng(-37.76525, 175.2558),
zoom: 15
});
var polygon = L.polygon([
[-37.7599, 175.2515],
[-37.7599, 175.2595],
[-37.7653, 175.2595],
[-37.7653, 175.2515],
[-37.7599, 175.2515]
]);
polygon.on("click", function (e) {
alert("Polygon clicked");
});
polygon.addTo(map);
var circleMarker = L.circleMarker(polygon.getBounds().getCenter());
circleMarker.on("click", function (e) {
alert("circleMarker clicked");
});
circleMarker.bindLabel("clickThrough label", {
noHide: true,
className: "leaflet-ville-label"
})
circleMarker.addTo(map);