[GIS] Mapbox personalized icons with cluster and filter checkbox

filterjavascriptmapboxmarkers

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;
});

Best Answer

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);
    }
  });
}
Related Question