I have set up features from an external geoJson file in Mapbox and bound popups to these features following the example at https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-popup/
var myLayer = L.mapbox.featureLayer(bldgData).addTo(map);
myLayer.eachLayer(function(layer) {
// set up popup for each marker
var content = "";
var props = layer.feature.properties;
var imagePart = "<img class='popupPic' src='images/thumbnails/" + props.filename + "' ></img>";
var infoPart = "<h3 class='popupInfo'>" + props.bldgName + "</h3><p>" +
props.architect + "<br />" + props.year + "</p>";
content = imagePart + infoPart;
layer.bindPopup(content, {closeButton: false});
});
The popups are set up to display on mouseover...
myLayer.on('mouseover', function(e) {
e.layer.closePopup();
e.layer.openPopup();
});
myLayer.on('mouseout', function(e) {
e.layer.closePopup();
});
I have also set up filtering to display selected features following the example at https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering-markers/
function chooseBldg(){
var bldgs = document.getElementById("buildingTypeMenu").value;
if(bldgs == "all") {
myLayer.setFilter(function(f) {return true;});
}
else {
myLayer.setFilter(function(f) {
return f.properties['buildingType'] === bldgs;
});
}
}
The popups display correctly when I first display the page, and the filters correctly select the subset of markers to display, but after the filter has been triggered the popups no longer display on mouseover. Do I need to rebind the popups (by explicitly triggering the eachLayer function or something) after the filter has been done?
