Comment gérer les fenêtres contextuelles dans Leaflet avec des fonctionnalités qui se chevauchent?

Je suis nouveau sur Leaflet ainsi que Javascript.

Actuellement, j'essaie de créer un index spatial des fonds de bibliothèque pour les anciennes cartes topographiques auxquelles les gens peuvent accéder et télécharger en ligne. La source des fonctionnalités est un fichier GeoJSON.

Exemple de carte

Le problème est que la bibliothèque de l'école a plusieurs types de la même carte au fil des ans, mais lorsque je clique sur une carte, une seule fenêtre apparaît. Je veux l'option de parcourir plusieurs cartes, mais je ne sais pas comment aborder le problème.

Existe-t-il un terme spécial dans le jargon local pour parcourir les polygones qui se chevauchent, ou existe-t-il une approche plus forte de ce problème?

Une option serait d'utiliser le point de dépliant en poly (leaflet.pip) qui est disponible via Mapbox: https://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/ ou en tant que plugin de brochure: https://github.com/mapbox/leaflet-pip

Le violon ici: http://jsfiddle.net/TnX96/136/ montrera exactement comment cela fonctionnerait. Ou consultez le code ci-dessous ....

Assurez-vous d'inclure la bibliothèque PIP dans HTML:

<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js'></script>

Javascript:

var map = new L.Map('map', {center: new L.LatLng(51, -100), zoom: 4});
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var ggl = new L.Google();
var ggl2 = new L.Google('TERRAIN');
map.addLayer(osm);
map.addControl(new L.Control.Layers( {'Street Maps':osm, 'Satellite':ggl, 'Terrain':ggl2}, {}));

function handleClick(e) {
    var html = '';
        var match = leafletPip.pointInLayer(
            // the clicked point
            e.latlng,
            // this layer
            streets,
            // whether to stop at first match
            false);
        if (match.length) {
            for (var i = 0; i < match.length; i++) { 
                html += "<br>"+"_____"+
                        "<br><b>" + match[i].feature.properties.title + ", " + match[i].feature.properties.subtitle + ":</b>" + 
                        "<br>Scale: " + match[i].feature.properties.Scale + 
                        "<br>Year Published: " + match[i].feature.properties.year + 
                        "<br><br><b>URL for map:</b> <a>" + match[i].feature.properties.location2 + "</a>"+
                        "<br><b>URL for cropped, georeferenced map:</b> <a>"+ match[i].feature.properties.location1 + "</a>"+
                        "<br><b>URL for KML:</b> <a>" + match[i].feature.properties.location3 +"</a>"

            }
        }
    if (html) {
        map.openPopup(html, e.latlng);
    }
}

var streets = new L.geoJson(histMap)
    .on('click', handleClick)
    .addTo(map);