Si agrego una imagen al mapa del folleto como una superposición con el código
let newOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(mapObj); newOverlay.addEventListener('click', (e) => { let thisImg = e.currentTarget; console.log(thisImg); }); Veo mi imagen en el mapa, pero cuando hago clic en ella, se hace clic en el elemento <canvas> que está encima de la imagen con z-index: 100 y se extiende a todo el ancho y alto de la pantalla. Si agrego z-index: 200 a la imagen, no ayuda.
Tal vez sea más un problema de HTML/CSS que Leaflet y JS, pero no estoy seguro y no puedo resolverlo.
Debe configurar ImageOverlay interactive , luego se puede hacer clic:
var newOverlay = L.imageOverlay(imageUrl, imageBounds, {interactive: true}).addTo(map);Suponiendo que no desea reaccionar a un clic en ninguna parte del lienzo superpuesto, puede configurarlo para que tenga pointer-events: none
Aquí hay un ejemplo trivial donde el elemento superior no reacciona a un clic:
.under, .over { width: 100vw; height: 100vh; position: absolute; } .under { background-color: pink; } .over { background-color: rgba(0, 0, 255, 0.5); pointer-events: none; } <div class="under" onclick="alert('under clicked');"></div> <div class="over" onclick="alert('over clicked');"></div>