Utilize leaflet layering

[Adventsparky]

It would be fantastic if the marker clusterer supported layers like the stock leaflet layer functionality so users can enable/disable layers of markers and have the clusters update accordingly.

[danzel]

This might be a bit hard as a MarkerClusterGroup is a FeatureGroup. We do support addLayer/removeLayer so you can add and remove Markers which will get you most of the way there. I'll do a bit of a write up on this at some stage as adding/removing after clustering can lead to some weird results.

[Adventsparky]

Is there no way to make cluster layers then as opposed to the leaflet layering? As in we can add the markers to the clusterer in groups, which then adds a button to the map, or is that what you mean isn't possible?

[danzel]

Not currently. I may have to tackle this for our own internal purposes, so I may build it yet. Happy for a contributor to add it :-)

[alexcwatt]

I agree this would be cool. Maybe if I dig into the Leaflet documentation I can take a stab at this...

[sidsjobackis]

How is the progress going in this area? I found myself in need of this exact functionality and i'm afraid my skillset is not up to par with the scope of this problem. So is there any plans, within a near future, to attack this problem or should I head for a different solution?

[alexcwatt]

I just posted a gist that gives an example of how to have markers in multiple layers, and how to toggle layers and add/remove markers: https://gist.github.com/alexcwatt/5412222

The basic strategy is having arrays ("layers") of markers. Markers can be in multiple layers. When the user toggles layer visibility, all markers are removed, and then all the ones that are still in the layers that are visible are added back.

[pvhee]

Sounds great, do you have a demo for this functionality?

[alexcwatt]

@pvhee I just put one together here: http://jsfiddle.net/pvwKJ/4/

I also realized that I left the definition for the contains function out of my gist. I tried updating it but am getting an error from GitHub... will try again later.

[JacopoOttaviani]

@pvhee @alexcwatt I'm extremely interested in this. Any clue on how I can use the clusters and layers? This doesn't work: http://jsfiddle.net/pvwKJ/4/

[danzel]

I thought I'd written up a work around on here, but there isn't :-/ so here is the idea:

Create an empty LayerGroup for each of your groups of markers you want in the cluster control. Add these empty groups to the layers control.

Listen to overlayadd and overlayremove events on the map, these will tell you when those layers are ticked/unticked. When the events are fired, add/remove the relevant set of markers to MarkerClusterGroup.

And that should do it :-)

[JacopoOttaviani]

Hi @danzel, Thanks for your comment. I'm doing what you suggested, but I can't "compare" the layer returned by the listener and the layer I created. The following code always enter in the first if statement (when I click on the layer control).

                map.on('overlayadd', function(ol) {

                  if (ol.layer.id == layerUS.id ) {
                    console.log('add US ' + ol); 
                    markers.addLayers(us);
                  }
                  else if (ol.layer.id == layerUK.id) { 
                    markers.addLayers(uk);
                  } 

Hope you can help me. adrift

[danzel]

Is .id even a valid attribute? Why not: if (ol.layer == layersUS)

[JacopoOttaviani]

@danzel, Apparently if (ol.layer == layersUS) doesn't work

while if I use .id, it always gets into the ol.layer.id == layerUS.id...

[chriscalip]

comment by adrift http://jsfiddle.net/pvwKJ/4/ would not work. The problem is on the event of either ('overlayadd', 'overlayremove') you only have access to e.target aka one layer. during that time inside

XXXXX is either ('overlayadd', 'overlayremove') map.on('XXXXXX', function(a) { console.clear(); console.log(a); //console.log(jQuery("input.myClass:checkbox")); / jQuery('input.leaflet-control-layers-selector:checkbox').each(function() { console.log(this); }); / markers.clearLayers(); // remove all markers from map markers.addLayers(markers_visible); });

Doing all clear layers then add would simply yield trouble. because of troublesome situation of not having exact access to markers_visible because of only having access to one context e.target -- one layer.

Currently trying to figure out cluster object aka markers are just lumped sequentially and not grouped at all.

[alexcwatt]

@chriscalip It should be working again now: http://jsfiddle.net/pvwKJ/7/ I just updated all the external scripts (bootstrap, leaflet, markercluster).

Please let me know if it works for you or if there's another issue (not sure exactly what you meant above) and I'll see if I can help.

[chriscalip]

@alexcwatt nice one. that example of yours works. too bad its making use of bootstrap.js and bypass leaflet.js map.on functionality to bring about this feature. Still with the exigencies of the situation l might also have to go with your technique.

Also what I meant above is that leaflet.js map.on hook . on events overlayadd and overlayremove you only have access to the layer "added" or "removed"

To illustrate point right now the suggested workaround is to listen in map.on events then do a clearLayers and addLayers appropriately. on hook map.on context "a" is not directly tied to the storage arrays of markers_category..

map.on('overlayremove', function(a) { cluster.clearLayers(); cluster.addLayers(markers_category[1]); });

* EDIT * I have pulled off what danzel mentioned "Listen to overlayadd and overlayremove events on the map, these will tell you when those layers are ticked/unticked. When the events are fired, add/remove the relevant set of markers to MarkerClusterGroup."

After the work day. I'll scrub and do a jsfiddle for illustration purposes.

[alexcwatt]

@chriscalip If you come up with anything better, I'd appreciate if you post the code.

[chriscalip]

@alexcwatt for sure, here's an illustrative link on what danzel mentioned. Hope it helps people that are encountering this need. http://jsfiddle.net/k3hqa/3/

[odelphia]

Is there an example with mapbox layers used? I publish a lot with mapbox and it would be great to have a snippet of code to handle layer toggling.

[danzel]

This is implemented in a plugin now https://github.com/Leaflet/Leaflet.markercluster#sub-plugins

[blandofgod]

Not sure if anyone is still on this, however I have fixed the fiddle example from above using multiple layers for marker cluster. I am now looking into using the sub-plugins. http://jsfiddle.net/pvwKJ/39/