Leaflet Map: MarkerCluster show/hide markers under layersGroups

Question

What i try to achive is make MarkerCluster Plugin work with an layersGroup from leaflet, like in this examples: http://bl.ocks.org/ismyrnow/6123517

So in my code I create MarkerCluster function

var markersCluster = new L.MarkerClusterGroup({ 
  iconCreateFunction: function(cluster){ return new L.DivIcon({ html: cluster.getChildCount(), className: 'map__marker-cluster', iconSize:   L.point(40, 40) }); } });

then i add them to my markers and map

marker.bindPopup(popup).addTo(allMarkers); //allMarkers is one of my layersGroup
markersCluster.addLayer(allMarkers);
map.addLayer(markersCluster);

but at the same time I add my marker to my layersGroup marker.bindPopup(dit.popup).addTo(dit.allMarkers); //dit.allMarkers is my layer. It will show a checkbox in the legend and when clicked markers show or hide.

So when I click allMarkers checkbox on map legenda, the markers aggregated by cluster are still visible.

I didn't find any examples of MarkClusters used with layersGroup so i wonder if is possible..

Stranded Kid Stranded Kid · Accepted Answer · 2015-09-16T20:31:47

I think doing

marker.bindPopup(popup).addTo(allMarkers);

is kinda useless, because MarkerClusterGroup class is just an extend of a layerGroup, meaning you add markers to a layerGroup that you add yo a layerGroup.

Why not add your markers directly in the MarkerClusterGroup?

If you want to keep both control on MarkerClusterGroup and layerGroup, then add your markers to both.

marker.addTo(allMarkers);
marker.addTo(markersCluster);
map.addLayer(allMarkers); // when toggled on/off, will show/hide markers
map.addLayer(markersCluster); // will show clusters

Technically, layerGroups are just an "abstract" tool to gather Markers, Polygons, ... and manage them easilyn they have no DOM relation.

Leaflet Map: MarkerCluster show/hide markers under layersGroups

1 Answers