Trouble using Leafletjs MarkerClusterGroup and filters with Mapbox

Question

I've tried Mapbox and their API to create an interactive map. The purpose is to fetch points in a geojson file, and display them on the map. They have to be filtered by their marker-icon and grouped depending on the zoom applied.

I had no trouble using the MarkerClusterGroup plugin with leaflet and Mapbox, but I can't get the filters to work.

This is my code :

https://gist.github.com/KuneStudio/5985864

And this is the content of my json with the points :

https://gist.github.com/KuneStudio/5985858

The markers are displaying correctly, the cluster part too, but I can't get the filters to work...

Any idea?

Thanks !

(Note : using the console, I tried to display a log in the map.markerLayer.setFilter(function(f) {} , before the return true, but I have nothing showing up.

Thanks again for your time

Answer 1

I found the solution with some help. This is the method I used :

<script type='text/javascript'>

// I suppose that the json is saved in the var dataJSON

L.MarkerClusterGroup.include({
    fromGeoJSON: function (geojson) {
        this._geojson = geojson;
        this.filter();
    },

    filter: function (f) {
        f = f || function (m) { return true; }
        var markers = Array();
        for (var i = 0; i < this._geojson.features.length; i++) {
            var a = this._geojson.features[i];
            if (!f(a)) { continue; }
            var title = a.properties['title'];
            var description = a.properties['description']
            var marker = L.marker(new L.LatLng(a.geometry.coordinates[1], a.geometry.coordinates[0]), {
                icon: L.mapbox.marker.icon({'marker-symbol': a.properties['marker-symbol'], 'marker-color': a.properties['marker-color']}),
                title: title
            });
            marker.bindPopup('<b>'+title+'</b><br>'+description);
            markers.push(marker);
        }
        this.clearLayers();
        this.addLayers(markers);
    }
});

var map = L.mapbox.map('map', 'mymapid',  {markerLayer: false});
map.on('error', function (e) {
    console.log(e);
})
var cluster = new L.MarkerClusterGroup();
map.addLayer(cluster);

cluster.fromGeoJSON(dataJSON);
map.addLayer(cluster);
var filter = L.DomUtil.get('filter');
var food = L.DomUtil.get('filter-food');
var test = L.DomUtil.get('filter-test');
var all = L.DomUtil.get('filter-all');




jQuery('.chktax').on('click', function(e) {
    var allChecked = {};
    var cat = [];
    jQuery(".chktax:checked").each(function(i, elem){
            var name = elem.name;
            allChecked[name] = allChecked[name] || [];
            cat = cat || []
            allChecked[name].push(elem.value);
            cat.push(elem.value);
        });

    cluster.filter(function (m) {
            return superbag(m.properties['categories'], cat);
        });

});

L.DomEvent.on(all, 'click', function (e) {
    cluster.filter();
})


function superbag(sup, sub) {
    sup.sort();
    sub.sort();
    var i, j;
    for (i=0,j=0; i<sup.length && j<sub.length;) {
        if (sup[i] < sub[j]) {
            ++i;
        } else if (sup[i] == sub[j]) {
            ++i; ++j;
        } else {
            return false;
        }
    }
    return j == sub.length;
}
</script>