Xử lý các quảng cáo trong tờ rơi với các tính năng chồng chéo?

Tôi chưa quen với Leaflet cũng như Javascript.

Hiện tại, tôi đang cố gắng tạo một chỉ mục không gian của các tổ chức thư viện cho các bản đồ địa hình cũ mà mọi người có thể truy cập và tải xuống trực tuyến. Nguồn gốc của các tính năng là một tệp GeoJSON.

Bản đồ mẫu

Vấn đề là thư viện trường học có nhiều loại bản đồ trong nhiều năm, nhưng khi tôi nhấp vào bản đồ, chỉ có một cửa sổ bật lên xuất hiện. Tôi muốn tùy chọn xoay vòng qua nhiều bản đồ, nhưng tôi không chắc về cách tiếp cận vấn đề.

Có một thuật ngữ đặc biệt trong thuật ngữ địa phương để đi xe đạp qua các đa giác chồng chéo, hoặc có một cách tiếp cận mạnh mẽ hơn cho vấn đề này?

Một tùy chọn sẽ là sử dụng điểm tờ rơi trong poly (leaflet.pip) có sẵn thông qua Mapbox: https://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/ Hoặc dưới dạng plugin tờ rơi: https://github.com/mapbox/leaflet-pip

Fiddle ở đây: http://jsfiddle.net/TnX96/136/ sẽ hiển thị chính xác cách thức này sẽ hoạt động. Hoặc xem mã dưới đây ....

HTML chắc chắn bao gồm thư viện PIP:

<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);