Mapbox personalized icons with cluster and filter checkbox

Question

I have created a map using mapbox. I add icons from an Url and a type of "filter". But I want to add a marker cluster and in and also that the filter function with checkbox to select more than one option.

http://jsfiddle.net/MichelleCh/3du88qtr/7/

This is my example. I'll tried with the Leaflet marker cluster but... I'm totally new with code then, I don´t know in what place I should put the cluster code.

I think now, the most important form me is the checkbox for the filters. I tried to make put "true" or "false" to certain values in the properties of the icon and this at final. But aren´t checkboxes :(

myLayer.on('layeradd', function(e) {
    var marker = e.layer;
    var feature = marker.feature;

    var images = feature.properties.images
    var slideshowContent = '';

marker.setIcon(L.icon(feature.properties.icon));
    for(var i = 0; i < images.length; i++) {
        var img = images[i];
    }
    var popupContent =  '<div id="' + feature.properties.id + '" class="popup">' +
                            '<h2>' + '<p align=center>'+ feature.properties.title + '</p>'+'</h2>' +
                            '<h5>' + feature.properties.description +'</h5>'

                        '</div>';

    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 400
    });

});



myLayer.setGeoJSON(geoJson)
.addTo(map);

$('.menu-ui a').on('click', function() {
      var filter = $(this).data('filter');
    $(this).addClass('active').siblings().removeClass('active');
    myLayer.setFilter(function(f) {

        return (filter === 'Development') ? true : f.properties[filter] === true;
    });
    return false;
});

Answer 1

I recommend checking out this Mapbox.js example. It demonstrates how to use a filter UI in conjunction with Leaflet MarkerCluster. The generalized approach from the example is:

• Set up variables for us to use later on in our filter function.

  // Add an empty layerGroup to the map 
  // (for the layers you'd like to filter interactively) 
  var overlays = L.layerGroup().addTo(map);
  // we create the 'layers' variable outside of the on('ready' callback
  // so that it can be accessible in the showStations function.
  var layers;
  // Get our checkbox elements and store them in a variable
  // In the Mapbox.js example, there are checkboxes with
  // name="filter" inside a form element
  var filters = document.getElementById('yourId').filters;
  

• Create a featureLayer for your point data:

  L.mapbox.featureLayer()
    .loadURL('/path/to/your/geojson.geojson')
    .on('ready', function(e) {
      layers = e.target;
      yourFilterFunction();
  });
  

• Create a function to filter your cluster groups. Note that Mapbox.js' setFilter() method only applies to L.mapbox.featureLayers, which means it won't work on the cluster groups we want to use.

  function yourFilterFunction() {
    // first collect all of the selected filters and create an array of strings
    // like ['green', 'blue']
    var list = [];
    for (var i = 0; i < filters.length; i++) {
      if (filters[i].checked) list.push(filters[i].value);
    }
    // then remove any previously-displayed marker groups
    overlays.clearLayers();
    // create a new marker group
    var clusterGroup = new L.MarkerClusterGroup().addTo(overlays);
    // and add any markers that fit the filtered criteria to that group.
    layers.eachLayer(function(layer) {
      if (list.indexOf(layer.feature.properties.line) !== -1) {
        clusterGroup.addLayer(layer);
      }
    });
  }