过滤后重新绑定Mapbox弹出窗口 [英] Rebind Mapbox popups after filtering

问题描述

我建立了一个Mapbox地图，该地图具有相当复杂的自定义弹出结构，包括照片和格式.我正在使用.csv文件和多功能记录来提供数据，并准备好弹出式窗口.我还有一个搜索框，可使用jQuery搜索数据.

I've built a Mapbox map that has a fairly involved custom popup structure, including photos and formatting. I'm using a .csv file and omnivore to feed my data, and creating the popup .on ready. I've also got a search box that searches the data using jQuery.

每个人都独立工作.弹出窗口可以正常加载，并且搜索正常.但是在使用搜索内容进行过滤之后，我丢失了弹出窗口.

Independently, each one works. The popups load fine, and the search is working. But after filtering using the search thing, I lose the popups.

我已经看过类似帖子，但似乎没有任何建议起作用.我认为这与我的popup变量包含在.on ready函数中有关.我在这里想念什么吗?我需要重组弹出窗口的创建方式吗?

I've looked at this similar post but nothing suggested seems to be working. I think this has to do with my popup variable being contained inside of the .on ready function. Is there something I'm missing here? Do I need to restructure how the popups are created?

这是我的代码:

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！在就绪"上设置地图边界，在"addlayer"上设置弹出窗口创建就可以了.

Fixed, thanks to Twitter! Setting map bounds on "ready" and setting the popup creation on "addlayer" took care of it.

这篇关于过滤后重新绑定Mapbox弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！