Leaflet: How to create a group layer that shows all other layers?

Question

I created the following script but it won't show both layers. If i delete the single groups ("commerciele parkeerplaatsen" and "rodents") and only leave the "both" group it does work.

var CommercialParkingSpots = L.geoJson(CommercialParking,{
    onEachFeature: MakePopupWindow  
})/*.addTo(map)*/;

var Rodents = L.geoJson(rodents,{
    onEachFeature: MakePopupWindow2  
})/*.addTo(map)*/;

var both = L.layerGroup([CommercialParkingSpots, Rodents]);

var overlays = {
    "commerciele parkeerplaatsen" : CommercialParkingSpots, 
    "rodents" : Rodents,
    "both" : both,
}

L.control.layers(null, overlays).addTo(map)

Answer 1

A Leaflet layer can only be added to one entity (map or grouping layer) at a time. So what happens is that once you click the 'rodents' checkbox the layer gets removed from the 'both' layergroup and added to the map. The same goes for the 'commercialparking' layer. Once they are both added to the map, the 'both' layergroup is empty and thus will do nothing when added/removed to the map. It does get added/removed to/from the map, but you won't see a difference because the layer is empty.

So to be short. What you're trying to do isn't possible. Perhaps a solution similar to something like this can be of use to you:

https://stackoverflow.com/a/34392545/2019281

Answer 2

Create a group of layers:

baseLayers = {
  "OpenStreetMap": lyrOSM,
  "OpenTopoMap": lyrOpenTopoMap,
  "Esri-WorldImagery": lyrWorldImagery
};

overlays = {
  "Mountains": Mountains,
  "River": River 
};

L.control.layers(baseLayers, overlays).addTo(myMap);