hide clustered overlays from map when page loads

Question

I'm using the leaflet styled layer control, marker cluster and marker cluster layer support plugins to create overlays that you check on or off in the layer controls. Everything is working perfectly, except that I want the map to be blank when the page first loads, and the user can choose which overlays they want to turn on. I've tried the built in methods for the styled layer control for this but they don't work. Through trial and error I've figured out the issue is this:

    var markerClusters = L.markerClusterGroup.layerSupport().addTo(map);

//monday groups
var mFood = L.layerGroup().addTo(markerClusters);
var mDrink = L.layerGroup().addTo(markerClusters);
var mEntertainment= L.layerGroup().addTo(markerClusters);

if I don't add the markerClusterGroup to the map, the overlays do not appear until the user checks them in the layer control. However, this means the markers do not cluster. I feel like the issue could be solved with an if..then.. loop, but I'm not sure how to create this. For example if an overlay is checked, add the markerClusters to the map. I worry though that wording it like this would mean all overlays are checked/markerClusters appear and I only want the checked overlay to appear, and be clustered if necessary.

Answer 1

As a general rule, your overlays will be on map as soon as you use myOverlay.addTo(map) or addTo(group) where group is itself already on map.

As you figured out, this is exactly what happens if you avoid adding your markerCluters layer support to the map. But then you have issues with your overlays as you describe.

To overcome these issue, look at layer support checkIn method: it "registers" an overlay to be clustered later on, but without adding it right away into the cluster group.

Therefore you still add the layer support group to your map, but you just check in your overlays so that they do not appear now on map, but will appear clustered when user selects them later on.