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

Thanks and have a nice day! :)

will will · Accepted Answer · 2016-03-25T13:13:17

Taking this as reference, you can have clustering on your map by using the following code after your layers are added to the map.

var clusterGroup = new L.MarkerClusterGroup();
    clusterGroup.addLayer(myLayer);
    map.addLayer(clusterGroup);

Regarding the checkbox behavior, seems more like a JS problem. The option to select all adds some complexity to control when to hide/show the pins. Check out here the full example, based on yours, including this and the clustering feature.

Mapbox personalized icons with cluster and filter checkbox

1 Answers