Cómo permitir que los eventos de la capa de folletos se propaguen a la capa inferior

Question

Estoy trabajando en un mapa de folletos con tres capas: una capa base de azulejos, una capa GeoJson y una capa de etiquetas de azulejos. Para la visualización, quiero que la capa de etiquetas esté en la parte superior, pero para la interacción me gustaría dejar que los eventos de clic en el mapa se propaguen a la capa GeoJson, para mostrar ventanas emergentes.

Aquí hay una adaptación del ejemplo del folleto geojson que ilustra mi problema:

http://jsfiddle.net/3h6yytg3/

¿Hay alguna manera de mostrar las ventanas emergentes GeoJson con una configuración similar a esta?

Answer 1

Una pequeña solución de CSS te servirá. Puedes ver el resultado en el siguiente fiddle: http://jsfiddle.net/GFarkas/kkwgc1nh/

Hice todas las imágenes irresponsables a los eventos de puntero, por lo que los clics caerán a través de ellos y activarán el contenido emergente de la capa GeoJSON. El código CSS es:

img.leaflet-tile{
    pointer-events: none;
}

Crédito original: https://stackoverflow.com/questions/1401658/html-overlay-which-allows-clicks-to-fall-through-to-elements-behind-it

También puede ver los límites de la versión del navegador aquí: http://caniuse.com/#feat=pointer-events .

Answer 2

Otra forma, y quizás mejor, de utilizar el código de Leaflet directamente es usar la bandera interactiva.

L.geoJson(gisData, {
    pane: 'apane',
    onEachFeature: someFunction,
    interactive: false
}).addTo(something);