过滤后重新绑定Mapbox弹出框

Rebind Mapbox popups after filtering

本文关键字:Mapbox 绑定 新绑定 过滤      更新时间:2023-09-26

我已经构建了一个Mapbox地图,它具有相当复杂的自定义弹出式结构,包括照片和格式。我使用。csv文件和杂食饲料我的数据,并创建弹出。on准备。我也有一个搜索框,使用jQuery搜索数据。

各自独立工作。弹出式加载良好,搜索工作。但是在使用搜索过滤后,我失去了弹出窗口。

我看过这个类似的帖子,但没有任何建议似乎是有效的。我认为这与我的弹出变量被包含在。on准备函数内。我是不是漏掉了什么?我需要重组如何创建弹出窗口?

下面是我的代码:

var featureLayer = L.mapbox.featureLayer().addTo(map);
jQuery('#search').keyup(search);

加载数据,格式化弹出窗口:

var csvLayer = omnivore.csv('Stats.csv', null, L.mapbox.featureLayer())
    .on('ready', function() {
        map.fitBounds(csvLayer.getBounds(), {paddingTopLeft: [0,25]});
 function updownFormat(updown, change){
            if (updown === '—') {
                return "No change ";
            } else if (updown === "N/A") {
                return "New store - no data ";
            } else if (updown === '▲') {
                return '<span class="upPercent">' + updown + "</span> " + change;
            } else {
                return '<span class="downPercent">' + updown + "</span> " + change;
            }
        };
        csvLayer.eachLayer(function(layer) {
            var prop = layer.feature.properties
            var popup = '<div class="popup"><h3>'+ prop.storename +'<'/h3>' +
            '<h4>'+ prop.town +'</h4>' +
            '<p><b>Rank:</b> #'+ prop.rank +' (of 80 stores) <br>' +
            '<b>Sales: </b>' + prop.money14 +' (2014)<br>' + 
            '<b>Growth: </b>' + updownFormat(prop.updown, prop.change) + ' (from 2013)</p>' +
            '<h5>Best selling bottles (2014)</h5>' + 
            '<img src="'+ prop.pop1img +'" class="liquorimg">' +
            '<ol><li><b>'+prop.pop1+'</b></li><li>'+prop.pop2+'</li><li>'+prop.pop3+'</li><li>'+prop.pop4+'</li><li>'+prop.pop5+'</li></ol></div>';
            layer.bindPopup(popup);
        });

    })
    .addTo(map);

搜索功能:

function search() {
    // get the value of the search input field
    var searchString = jQuery('#search').val().toLowerCase();
    csvLayer.setFilter(showStoreTown);
    function showStoreTown(feature) {
        return feature.properties.storetown
            .toLowerCase()
            .indexOf(searchString) !== -1;
    }
}

修复,感谢Twitter!将地图边界设置为"ready",并将弹出窗口创建设置为"addlayer"。