Toggle clustering on/off in qgis2web map

Question

I downloaded the Leaflet.MarkerCluster.Freezable addon which let's users control enabling/disabling clustering described in this post.

After exporting a web map using qgis2web, I followed the Quick Guide on using the freezable addon:

1. I placed the freezable.js file in the js directory of the exported map.

2. In the index.html file, I included the path after Leaflet and Leaflet.markercluster scripts

    <script src="js/leaflet-measure.js"></script>
    <script src="js/leaflet.markercluster.js"></script>
    <script src="js/freezable.js"></script>
   

3. I create a new checkbox button connected to a function to toggle the clustering

    mcg = L.markerClusterGroup();
   
    function toggleFunction(map) {
        if(document.getElementById('command').checked){
          mcg.freezeAtZoom('max');
        }
        else {
            mcg.unfreeze();
        }
    }
   
    var command = L.control({position: 'bottomright'});
    command.onAdd = function (map) {
        var div = L.DomUtil.create('div');
        div.innerHTML = `
        <div class="leaflet-control-layers leaflet-control-layers-expanded">
          <form>
            <input class="leaflet-control-layers-overlays" id="command"
              onclick=toggleFunction(this.checked) type="checkbox" checked>
              "ToggleName"
            </input>
          </form>
        </div>`; 
        return div;
    };
    command.addTo(map);
   

But when I click the checkbox, the map is still clustered. Is my code incorrect or is the addon not compatible with qgis2web?

---

Update

Inserting the addLayers() and addTo() functions allows the checkbox to run the freeze/unfreeze function.

mcg = L.markerClusterGroup();
mcg.addLayers(layer_name)
mcg.addTo(map);

The freezing and unfreezing makes weird artifacts on the map, the clusters remain when the map in the legend is unchecked. When the map is checked again, new clusters are shown on top of the old ones. Seems like the map is not being refreshed correctly and it doesn't seem possible to completely remove clusters from view. It just freezes them on the map.

Does anyone know if it's possible to completely remove/show clusters from view via a button?

I want to achieve something similar to this example map where when you click the FreezeAtZoom("max") button, the clusters disappear and you're left with the markers.

---

2nd update

Turns out the L.markerClusterGroup() function was assigned to each map layer already. So instead of defining mcg, I just had to use the defined layer name.

    function toggleFunction(map) {
        if(document.getElementById('command').checked){
          cluster_layer_1.unfreeze();
        }
        else {
          cluster_layer_1.freezeAtZoom("max");
        }
    }

Now this is almost working completely. The issue now is when the map layer in the legend is checked and you uncheck the cluster toggle button (disable clusters), the clusters are still there. If you toggle the map layer, the clusters disappear (guess this is needed to refresh the style). But if you check the toggle button again (enable clusters), the clusters appear with a nice animation.

Just need to sort this last issue! When I use Web Developer tools on Firefox and I enable clusters, there is an error message:

Uncaught TypeError: i.contains is not a function

It only occurs when the map layer in the legend is checked, not sure why...

Answer 1

Got it! Have to remove the feature layer from the cluster group, freeze it, then add the feature layer back. Shame there's no animation when removing the clusters but at least it works.

    function toggleFunction(map) {
        if(document.getElementById('command').checked){
            cluster_layer_1.unfreeze();
        }
        else {
            cluster_layer_1.removeLayer(layer_layer_1)
            cluster_layer_1.freezeAtZoom("max");                
            cluster_layer_1.addLayer(layer_layer_1);
             }
    }

    var command = L.control({position: 'bottomright'});
    command.onAdd = function (map) {
        var div = L.DomUtil.create('div');
        div.innerHTML = `
        <div class="leaflet-control-layers leaflet-control-layers-expanded">
          <form>
            <input class="leaflet-control-layers-overlays" id="command"
              onclick=toggleFunction(this.checked) type="checkbox" checked>
              "ToggleName"
            </input>
          </form>
        </div>`; 
        return div;
    };
    command.addTo(map);