过滤后重新绑定Mapbox弹出框
Rebind Mapbox popups after filtering
我已经构建了一个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"。
相关文章:
- 在VanillaJS中模拟模型双向数据绑定
- 无法通过数组映射绑定
- 主干-不管怎样,检查事件以前是否绑定过
- 用于搜索的聚合物嵌套绑定
- Angular:更新一次性绑定的数据
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- react.js中的密钥绑定
- 使用regex的jquery keydown绑定不会验证撇号和句点
- 将事件处理程序绑定到任何可能的事件
- AngularJS指令只识别双向绑定类型
- Telerik rad组合框多列数据绑定
- 对API数据使用声明性绑定
- 如何销毁/删除/取消绑定SnapSVG.js
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 数据绑定:'系统Char'不包含名为'xxxxx'
- react组件中的绑定方法
- Mapbox-无法将移除功能绑定到每个层
- MapBox/Leaflet/maybe jQuery-将函数绑定到单击时调用的弹出窗口
- 如何“解除绑定”Mapbox中的弹出窗口?只允许从一定范围内的标记弹出(当用户移动时改变)
- 过滤后重新绑定Mapbox弹出框