CODEWITHSUNDEEP
javascriptmapbox
Bergen88
Bergen88

Reputation: 177

How do I keep GeoJSON style after filter?

My map has a simple filter for a small GeoJSON polygon dataset controlled by menu-ui toggles.

$('.menu-ui a').on('click', function() {
    // For each filter link, get the 'data-filter' attribute value.
    var filter = $(this).data('filter');
    $(this).addClass('active').siblings().removeClass('active');
    featureLayer.setFilter(function(f) {
        // If the data-filter attribute is set to "all", return
        // all (true). Otherwise, filter on markers that have
        // a value set to true based on the filter name.
        return (filter === 'all') ? true : f.properties.DISTRICT == filter;
    });
    return false;
});

The polygons styles are set before this:

var featureLayer = L.mapbox.featureLayer()
    .loadURL('citycouncils.geojson')
    .addTo(map);

function getMyColor(myargument) {
    if (myargument === '1') {
        return '#996767'
    };
    if (myargument === '2') {
        return '#679967'
    };
    if (myargument === '3') {
        return '#676799'
    };
    if (myargument === '4') {
        return '#676794'
    };
    if (myargument === '5') {
        return '#676799'
    };
}
featureLayer.on('ready', function() {
    featureLayer.eachLayer(function(polygon) {
         polygon.bindPopup('District ' + polygon.feature.properties.DISTRICT);
        console.log(typeof setStyle);
        polygon.setStyle({
            opacity: 0.55,
              weight: 2,
                opacity: 1,
            fillOpacity: 0.55,
            fillColor: getMyColor(polygon.feature.properties.DISTRICT),
            color: 'white'
        });
    });
});

The GeoJSON styles correctly on map load, but they loose style when menu-ui is toggled and GeoJSON is filtered. How do I preserve the styles through the filter process?

Edit: The filter function works fine. How to pass style in process?

Upvotes: 0

Views: 274

Answers (1)

iH8
iH8

Reputation: 28638

When you apply a filter, the filtered features get re-added to the layer, since you only apply the style on the ready event when you at first load the features and they get added, you'll lose the style when you use the filter because of the re-adding. You should apply the style again after you use the filter, try something like this: 

var featureLayer = L.mapbox.featureLayer('http://run.plnkr.co/1zb4Lj1NPtpu4MAM/data.geo.json').addTo(map);

// Fetch available inputs
var inputs = document.querySelectorAll('input.filter');

// Loop over inputs
for (i = 0; i < inputs.length; i++) {
  // Attach events
  inputs[i].onchange = function () {
    // Run filter on inputchange
    filter();
  }
}

// Object to hold the colors
var colors = {
  '1': 'red',
  '2': 'yellow',
  '3': 'blue'
};

// Method which applies style
var setStyle = function () {
  // Loop over layers in featureLayer
  featureLayer.eachLayer(function (layer) {
    // Set style on layer
    layer.setStyle({
      // set colors from object 
      fillColor: colors[layer.feature.id],
      color: colors[layer.feature.id]
    });
  });
}

// Filter function
var filter = function () {
  // Array for checked inputs
  var checked = [];
  // Loop over inputs
  for (i = 0; i < inputs.length; i++) {
    // See if input is checked
    if (inputs[i].checked) {
      // Is checked add to array
      checked.push(Number(inputs[i].value));
    }
  }
  // Set filter function on array
  featureLayer.setFilter(function (feature) {
    // return true is feature.id is in checked array
    return (checked.indexOf(feature.id) != -1);
  });
  // Call style function
  setStyle();
}

// Run filter when featureLayer is ready
featureLayer.on('ready', filter);

Working example on Plunker: http://plnkr.co/edit/UToM2gtLHEI6EZyjvtGy?p=preview

Upvotes: 1

Related Questions