I am new to Leaflet as well as Javascript, and I'm looking for some advice on a basic topic.

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?

Any advice on the direction I should take is appreciated. Thanks!


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)
  • Wow, and thank you! I was hoping for a term or two to google when I asked this. This, is quite a lot more. – brianbancroft Jun 7 '15 at 4:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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