Javascript issue using .setFilter and Mapbox API

1
votes

I'm using Mapbox's API to load markers on a map, and I want different markers to appear depending on whether the checkbox corresponding to their marker color is checked.

My data.geoJSON file looks something like this:

{ 
  "type": "FeatureCollection",
  "features": [ { 
    "type": "Feature",
    "geometry": { 
      "type": "Point", 
      "coordinates": [13.353323936462402, 38.11200434622822]
    },
    "properties": {
      "marker-color": "#9c89cc", 
      "marker-color": "#3b5998"
    }
  } ]
}

My HTML looks something like this: 

<div id='filters' class='ui-select'>
  <input type='checkbox' checked=checked class='filter' name='filter' id='blue' value='blue'/>
  <label for='blue'>
    Blue marker checkbox
  </label>
</div>

<div id='map'></div>

However, I'm having trouble figuring out how to get a .change() function to work inside .setFilter( function(feature) {} ). 

var featureLayer = L.mapbox.featureLayer()
  .loadURL('/map/getjson/')
  .addTo(map)
  .setFilter(
    function (feature) {
      //$("input[type='checkbox']").click(function() {
        if ($("#blue").prop("checked")) {
          return (feature.properties["marker-color"] === "#3b5998");
        } else {
          return false;
        }
      //});
    }
  );

Basically, if return(feature.properties["marker-color"] === "#3b5998") evaluates to true, the marker with the indicated set of features will be display. Otherwise, the markers won't display.

This is some example javascript that Mapbox gives (no use of jQuery).

map.featureLayer.setFilter(function(feature) {
  return (feature.properties['marker-symbol'] in enabled);
}

But I'm stumped about how to use .change() or .click() here, since I want the markers to display depending on whether or not their corresponding checkbox is checked.

I tried using .click():

function (feature) {
  //$("input[type='checkbox']").click(function() {
    if ($("#blue").prop("checked")) {
      return (feature.properties["marker-color"] === "#3b5998");
    } else {
      return false;
    }
  //});
}

... but it doesn't work! I guess I can't use .click() inside this function?

2
javascriptjquerymapbox

2 Answers

1
votes

Okay, so to review the time-dimension:

  • Calling setFilter() will set the filter of markers immediately.
  • jQuery's .click() will fire when someone clicks.

So the idea of using click() inside of setFilter is backwards. Do the opposite:

var featureLayer = L.mapbox.featureLayer()
  .loadURL('/map/getjson/')
  .addTo(map)
  // initially set the filter
  .setFilter(showBlueIfChecked);

$("input[type='checkbox']").click(function() {
  // refilter items when people click the checkbox
  featureLayer.setFilter(showBlueIfChecked);
});

function showBlueIfChecked(feature) {
  if ($("#blue").prop("checked")) {
    return (feature.properties["marker-color"] === "#3b5998");
  } else {
    return false;
  }
}
0
votes

For the event handler try this

function (feature){
    $('.filter').on('change', function(){
        alert($(this).val() + " has changed"); //You can remove this line after testing
        //do stuff to map
    })
}

Assuming all the check boxes have the class="filter"

fiddle