Expose clustering in layoutConfig

Customizations/JSON/LayoutConfig.ts

@@ -24,7 +24,9 @@ export default class LayoutConfig {
     public readonly roamingRenderings: TagRenderingConfig[];
     public readonly defaultBackgroundId?: string;
     public readonly layers: LayerConfig[];
-    public readonly clustering: {  };
+    public readonly clustering?: { 
+        maxZoom: number
+    };
     
     public readonly hideFromOverview: boolean;
     public readonly enableUserBadge: boolean;
@@ -76,22 +78,28 @@ export default class LayoutConfig {
         );
         this.defaultBackgroundId = json.defaultBackgroundId;
         this.layers = json.layers.map((layer, i) => {
-            if (typeof layer === "string")
+            if (typeof layer === "string"){
                 if (SharedLayers.sharedLayers[layer] !== undefined) {
                     return SharedLayers.sharedLayers[layer];
                 } else {
                     throw "Unkown fixed layer " + layer;
                 }
+            }
             return new LayerConfig(layer, this.roamingRenderings, `${this.id}.layers[${i}]`);
         });
 
 
-        this.clustering = json.clustering ?? false;
+        this.clustering = undefined;
+        if(json.clustering){
+            this.clustering = {
+                maxZoom : json.clustering.maxZoom ?? 18
+            }
+        }
 
         if(this.clustering){
             for (const layer of this.layers) {
                 if(layer.wayHandling !== LayerConfig.WAYHANDLING_CENTER_ONLY){
-                    throw "In order to allow clustering, every layer must be set to CENTER_ONLY";
+                    console.error("WARNING: In order to allow clustering, every layer must be set to CENTER_ONLY. Layer", layer.id,"does not respect this for layout",this.id);
                 }
             }
         }

Customizations/JSON/LayoutConfigJson.ts

@@ -126,7 +126,10 @@ export interface LayoutConfigJson {
     /**
      * If defined, data will be clustered.
      */
-    clustering: { 
+    clustering: {
+        /**
+         * All zoom levels above 'maxzoom' are not clustered anymore
+         */
         maxZoom?: number
     },
 

InitUiElements.ts

@@ -421,7 +421,9 @@ export class InitUiElements {
             MetaTagging.addMetatags(features);
         })
         
-        new ShowDataLayer(source.features, State.state.leafletMap, flayers);
+        new ShowDataLayer(source.features, State.state.leafletMap, 
+            State.state.locationControl.map(l => l.zoom),
+            State.state.layoutToUse.data);
 
 
     }

UI/ShowDataLayer.ts

@@ -20,6 +20,7 @@ export default class ShowDataLayer {
 
     constructor(features: UIEventSource<{ feature: any, freshness: Date }[]>,
                 leafletMap: UIEventSource<L.Map>,
+                zoom: UIEventSource<number>,
                 layoutToUse: LayoutConfig) {
         this._leafletMap = leafletMap;
         const self = this;
@@ -41,11 +42,14 @@ export default class ShowDataLayer {
 
             const feats = features.data.map(ff => ff.feature);
             let geoLayer = self.CreateGeojsonLayer(feats)
-            const cl = window["L"];
-            const cluster = cl.markerClusterGroup();
-            cluster.addLayer(geoLayer);
-            geoLayer = cluster;
-
+            if (layoutToUse.clustering !== undefined) {
+                if (layoutToUse.clustering.maxZoom >= zoom.data) {
+                    const cl = window["L"];
+                    const cluster = cl.markerClusterGroup();
+                    cluster.addLayer(geoLayer);
+                    geoLayer = cluster;
+                }
+            }
 
             if (oldGeoLayer) {
                 mp.removeLayer(oldGeoLayer);
@@ -56,6 +60,9 @@ export default class ShowDataLayer {
 
         features.addCallbackAndRun(() => update());
         leafletMap.addCallback(() => update());
+        zoom.map(z => (layoutToUse.clustering?.maxZoom ?? 0) >= z).addCallback(() => {
+            update();
+        });
 
     }
 

Utils.ts

@@ -178,5 +178,5 @@ export class Utils {
         }
         
     }
-
+    
 }

assets/layers/trees/tree_nodes.json

@@ -4,7 +4,7 @@
     "nl": "Boom",
     "en": "Tree"
   },
-  "minzoom": 18,
+  "minzoom": 14,
   "overpassTags": {
     "and": ["natural=tree"]
   },
@@ -347,22 +347,23 @@
   ],
   "hideUnderlayingFeaturesMinPercentage": 0,
   "icon": {
-    "render": "./assets/themes/trees/unknown.svg",
+    "render": "circle:#ffffff;./assets/themes/trees/unknown.svg",
     "mappings": [
       {
         "if": {
           "and": ["leaf_type=broadleaved"]
         },
-        "then": "./assets/themes/trees/broadleaved.svg"
+        "then": "circle:#ffffff;./assets/themes/trees/broadleaved.svg"
       },
       {
         "if": {
           "and": ["leaf_type=needleleaved"]
         },
-        "then": "./assets/themes/trees/needleleaved.svg"
+        "then": "circle:#ffffff;./assets/themes/trees/needleleaved.svg"
       }
     ]
   },
+  "wayHandling": 1,
   "width": {
     "render": "8"
   },

assets/themes/trees/trees.json

@@ -24,6 +24,9 @@
   "startZoom": 8,
   "widenFactor": 0.01,
   "socialImage": "./assets/themes/trees/logo.svg",
+  "clustering": {
+    "maxZoom": 18
+  },
   "layers": [
     "tree_nodes"
   ],