title: How can I use Leaflet.Clusters with two maps in tabs and multiples geoJson properties?
body: <p>I'm here because I read <a href="https://stackoverflow.com/questions/33143237/cluster-multiple-layers-with-markercluster">this topic</a> and <a href="https://stackoverflow.com/questions/51544086/using-several-marker-cluster-groups-displays-overlapping-clusters/51549989#51549989">this one</a></p>
  
  <p>I'm looking for some help to use the SubGroup plugin.</p>
  
  <p>I'm building a map like this</p>
  
  <pre><code>var cartoDb = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
          attribution: '&amp;copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors &amp;copy; &lt;a href="https://carto.com/attributions"&gt;CARTO&lt;/a&gt;',
          subdomains: 'abcd',
          maxZoom: 19
      });
  </code></pre>
  
  <p>then I'm adding code for custom markers, like this</p>
  
  <pre><code> var ccl18Icon = L.AwesomeMarkers.icon({
          prefix: 'fa', //font awesome rather than bootstrap
          iconColor: 'white',
          markerColor: 'orange', // see colors above
          icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
      });
  </code></pre>
  
  <p>I add my map</p>
  
  <pre><code>var map = L.map('map')
          .addLayer(cartoDb)
          .setView([46.85, 2.3518], 6); 
  </code></pre>
  
  <p>Then I create an OnEachFeature function, inside of which I get all my geoJson properties, and a "layer.on" function. Like this</p>
  
  <pre><code> function onEachFeature(feature, layer) {
  
          var html = '';
          if (feature.properties.Myfirstproperty) {
              html += '&lt;p class="myfirstproperty"&gt;' + feature.properties.Myfirstproperty+ '&lt;/p&gt;';
          }
          (....more html)
          layer.on('click', function() {
              $('#layer_infos .fill').html(html);
              if (L.Browser.mobile) {
                  $('#infos').addClass("slide"); 
                  $('#filters').removeClass('slide');
                  $('.hamburger').text('Sélect something').fadeIn();
               }
          })
  </code></pre>
  
  <p>I duplicate this part because I have two maps in tabs, only changing the id and class of elements</p>
  
  <p>Then I get all data from geoJson file</p>
  
  <pre><code>  var promise = $.getJSON("examen.json");
      promise.then(function(data) {
          var all = L.geoJson(data);
  
  
          var ccl18 = L.geoJson(data, {
              filter: function(feature, layer) {
                  return feature.properties.Category == "ccl18";
              },
              onEachFeature: onEachFeature,
              pointToLayer: function(feature, latlng) {
  
                  return L.marker(latlng, {
                      icon: ccl18Icon
                  })
              }
          })
  </code></pre>
  
  <p>After all this code, I create click functions to show hide layer, depending on chekcbox filters, something like this.</p>
  
  <pre><code>$("#ccl18").click(function() {
              if (this.checked) {
                  map.addLayer(ccl18)
                  map.fitBounds(allexamens.getBounds(), {
                      padding: [50, 50]
                  });
                  map.removeLayer(glucomarker)
              } else {
                  map.removeLayer(ccl18)
  
              }
          });
  </code></pre>
  
  <p>I post all this code because I don't know if I can use the SubGroup plugin with my configuration.
  What I'm looking for, is to let user click on multiple checkbox filters and to cluster markers even if they are from different categories; For the moment, I can cluster each group separatly, but not different groups together.
  I saw this code, from the plugin author :</p>
  
  <pre><code>var parentGroup = L.markerClusterGroup().addTo(map);
  
  var overlays = {};
  
  for (var i = 1; i &lt;= 5; i += 1) {
     overlays['Group ' + i] = L.featureGroup.subGroup(
     parentGroup,
     getArrayOfMarkers()
    ).addTo(map);
   }
  
   L.control.layers(null, overlays, {
    collapsed: false,
   }).addTo(map);
  
   function getArrayOfMarkers() {
    var result = [];
    for (var i = 0; i &lt; 10; i += 1) {
     result.push(L.marker();
   }
   return result;
   }
  </code></pre>
  
  <p>but I don't understand how to implement it.. Does someone managed to make it work with geoJson data ?
  Any help would be appreciated !!</p>
  
  <p>Thanks</p>