1

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?

qgis2web cluster


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...

6
  • I want to achieve something similar to this where when you click the FreezeAtZoom("max") button, the clusters disappear and you're left with the markers: ghybs.github.io/Leaflet.MarkerCluster.Freezable/examples/… – Jack Mahoon Jun 2 at 14:05
  • Thanks for the advice, its edited in now – Jack Mahoon Jun 2 at 14:24
  • What version of Leaflet and Leaflet.markercluster are you loading/using? Funny behavior is most probably consequence of wrong versions. – TomazicM Jun 2 at 14:29
  • Leaflet is 1.7.1 according to the GitHub page: github.com/tomchadwin/qgis2web/tree/master/qgis2web, not sure what version Leaflet.marketcluster is. – Jack Mahoon Jun 2 at 14:33
  • @TomazicM I dont know why it works in your jsfiddle but refuses to work with qgis2web. If I just try to freeze it without removing and re-adding the layer, the error occurs in the web developer console Uncaught TypeError: i.contains is not a function No idea where this comes from. – Jack Mahoon Jun 3 at 10:29
0

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);
1
  • It's hard to say why in your case you have to remove and add layer for freeze to work. If you look at this JSFiddle jsfiddle.net/TomazicM/nrb5dLqw, it works without that, with animation both ways. – TomazicM Jun 2 at 19:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.