jQuery/Mapbox multiple data filters issue

Question

I have a map, built in Mapbox, that feeds off of a GeoJSON. I'm trying to filter markers by two criteria: category (multiple true/false properties) and year. I want the two filters to work at the same time, not cancel each other out, but I'm getting stuck when combining them.

Each filter works independently — this is what I have for year:

$('.year a').on("click", function() {
    var year = $(this).data('filter');
    $(this).addClass('active').siblings().removeClass('active');
    featureLayer.setFilter(function(f) {
        return (year === 'all' || f.properties.Year === year);
    });
    return false;
}); 

and this is what I have for category:

$('.category a').on("click", function() {
    var category = $(this).data('filter');
    $(this).addClass('active').siblings().removeClass('active');
    featureLayer.setFilter(function(f) {
        return ((category === 'all') ? true : f.properties[category] === true);
    });
    return false;
});

This is how I combined them, but I know I'm doing something wrong.

$('.category a, .year a').on("click", function() {
    var category = $(this).data('filter');
    var year = $(this).data('filter');
    $(this).addClass('active').siblings().removeClass('active');
    featureLayer.setFilter(function(f) {
        return ((category === 'all') ? true : f.properties[category] === true) &&
        (year === 'all' || f.properties.Year === year);
    });
    return false;
});

I think I'm missing a step to differentiate the two filter searches, but I'm not very familiar with jQuery, so I'm not sure what I need to do. Specifically, I think I'm missing the part where the category var gets associated with .category a, and year var gets associated with .year a.

Any pointers in the right direction would be much appreciated. Thanks!

Answer 1

suoz,

Your problem might be the way you are targeting the selectors to bind the click event. The right way is:

$('.category a, .year a').on('click', function() { ... });

You don't said the issue, but I think this might be the problem or one of them.

Answer 2

You're currently setting year and calendar to the same value. Try directly targeting the elements instead of using this to avoid that problem.

$('.category a, .year a').on("click", function() {

  var category = $('.category a').data('filter');
  var year = $('.year a').data('filter');

  $(this).addClass('active').siblings().removeClass('active');
  featureLayer.setFilter(function(f) {
      return ((category === 'all') ? true : f.properties[category] === true) &&
      (year === 'all' || f.properties.Year === year);
  });
  return false;
});