1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.