Toggle marker color on click AND show popup

Question

I have a geojson featurelayer and for each marker I can bind a popup and I can modify the properties to change marker color onclick, but I can't mix both. I want to change the color and show the popup. I followed this mapbox example

It seems that when I add a click event to change the color it "deactivate" the popup... As soon as I remove this click event, the popup appears EDIT: This code is working

featureLayer = L.mapbox.featureLayer()
.loadURL( getUrl() )
.on('ready', setStyle)
.on('click', function(e) {
    e.layer.bindPopup(e.layer.feature.properties.name);
    resetColors();
    e.layer.feature.properties['old-color'] = e.layer.feature.properties['marker-color'];
    e.layer.feature.properties['marker-color'] = '#ffffb2';
    featureLayer.setGeoJSON(geoJson);
    setPopup();
})
.addTo(map);
function resetColors() {
for (var i = 0; i < geoJson.features.length; i++) {
    geoJson.features[i].properties['marker-color'] = geoJson.features[i].properties['old-color'] || geoJson[i].features.properties['marker-color'];
}
}

function setStyle() { 

geoJson = featureLayer.getGeoJSON();
for (var i = 0; i < geoJson.features.length; i++) {

    if(geoJson.features[i].properties['d'] <= distanceLocal)
        var color = '#a1d99b';
    else
        var color = '#636363';

    geoJson.features[i].properties['marker-color'] = color;
    geoJson.features[i].properties['old-color'] = color;
}
featureLayer.setGeoJSON(geoJson);
setPopup();
}
function setPopup() { 


featureLayer.eachLayer(function(marker) {
    marker.bindPopup(marker.feature.properties.name);
});
}

muzaffar muzaffar · Accepted Answer · 2015-10-01T07:38:38

As you're using this line featureLayer.setGeoJSON(geoJson);

this way you change the context of feature layer every time, so in order to trigger both the popup and color alteration you need the following two steps

change e.layer.openPopup(); with e.layer.bindPopup();
move this line before resetColors(); i.e this line e.layer.bindPopup(); would become the first line inside click function.

Note: If it doesn't work, don't hesitate to mention it in comments

Toggle marker color on click AND show popup

1 Answers