¿Manejo de ventanas emergentes en folleto con características superpuestas?

8

Soy nuevo en Leaflet y en Javascript.

Actualmente, estoy tratando de crear un índice espacial de los fondos de la biblioteca para mapas topográficos antiguos a los que las personas pueden acceder y descargar en línea. La fuente de las características es un archivo GeoJSON.

Mapa de muestra

El problema es que la biblioteca de la escuela tiene varios tipos del mismo mapa a lo largo de los años, pero cuando hago clic en un mapa, solo aparece una ventana emergente. Quiero la opción de recorrer varios mapas, pero no estoy seguro de cómo abordar el problema.

¿Existe un término especial en la jerga local para ciclar a través de polígonos superpuestos, o hay un enfoque más fuerte para este problema?

brianbancroft
fuente

Respuestas:

10

Una opción sería usar el punto de folleto en poly (leaflet.pip) que está disponible a través de Mapbox: https://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/ O como un complemento de folleto: https://github.com/mapbox/leaflet-pip

El violín aquí: http://jsfiddle.net/TnX96/136/ mostrará exactamente cómo funcionaría esto. O vea el código a continuación ...

HTML asegúrese de incluir la biblioteca 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);
usuario3103373
fuente