I am new to Leaflet as well as Javascript.

Currently, I am trying to create a spatial index of library holdings for old topographic maps that people can access and download online. The source of the features is a GeoJSON file.

Sample Map

The problem is that the school library has multiple types of the same map over the years, but when I click on a map, only one popup shows up. I want the option to cycle through multiple maps, but I am unsure on how to approach the problem.

Is there a special term in the local jargon for cycling through overlapping polygons, or is there a stronger approach to this problem?

1 Answer 1


One option would be to use leaflet point in poly (leaflet.pip) which is available through Mapbox: https://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/ Or as a leaflet plugin: https://github.com/mapbox/leaflet-pip

The fiddle here: http://jsfiddle.net/TnX96/136/ will show exactly how this would work. Or see the code below....

HTML be sure to include the PIP library:

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


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.addControl(new L.Control.Layers( {'Street Maps':osm, 'Satellite':ggl, 'Terrain':ggl2}, {}));

function handleClick(e) {
    var html = '';
        var match = leafletPip.pointInLayer(
            // the clicked point
            // this layer
            // whether to stop at first match
        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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.