Geek Answers Handbook

Problem with multiple jQuery / Mapbox filters

I have a map built in Mapbox that passes GeoJSON. I am trying to filter markers by two criteria: category (several true / false properties) and year. I want the two filters to work simultaneously, and not cancel each other out, but I get stuck when combining them.

Each filter works independently - this is what I have for the 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 the 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 that I am 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 skipped the step to distinguish the two filter searches, but I'm not very familiar with jQuery, so I'm not sure what I need to do. In particular, I think that I am missing the part where the var category is associated with .category a, and year var is associated with .year a.

. !

+4
2

suoz,

, , click. :

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

, , .

+2

year calendar . this, .

$('.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;
});
+1

More articles:


All Articles