Automatically cluster maps with more then 250 elements

Customizations/JSON/LayoutConfig.ts

@@ -25,7 +25,8 @@ export default class LayoutConfig {
     public readonly defaultBackgroundId?: string;
     public readonly layers: LayerConfig[];
     public readonly clustering?: { 
-        maxZoom: number
+        maxZoom: number,
+        minNeededElements: number
     };
     
     public readonly hideFromOverview: boolean;
@@ -89,21 +90,22 @@ export default class LayoutConfig {
         });
 
 
-        this.clustering = undefined;
+        this.clustering = {
+            maxZoom: 16,
+            minNeededElements: 250
+        };
         if(json.clustering){
             this.clustering = {
-                maxZoom : json.clustering.maxZoom ?? 18
+                maxZoom : json.clustering.maxZoom ?? 18,
+                minNeededElements: json.clustering.minNeededElements ?? 1
             }
-        }
-
-        if(this.clustering){
             for (const layer of this.layers) {
                 if(layer.wayHandling !== LayerConfig.WAYHANDLING_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);
                 }
             }
         }
-        
+
         this.hideFromOverview = json.hideFromOverview ?? false;
 
         this.enableUserBadge = json.enableUserBadge ?? true;

Customizations/JSON/LayoutConfigJson.ts

@@ -128,9 +128,15 @@ export interface LayoutConfigJson {
      */
     clustering?: {
         /**
-         * All zoom levels above 'maxzoom' are not clustered anymore
+         * All zoom levels above 'maxzoom' are not clustered anymore.
+         * Defaults to 18
          */
-        maxZoom?: number
+        maxZoom?: number,
+        /**
+         * The number of elements that should be showed (in total) before clustering starts to happen.
+         * If clustering is defined, defaults to 0
+         */
+        minNeededElements?: number
     },
 
     /**

Models/Constants.ts

@@ -1,7 +1,7 @@
 import { Utils } from "../Utils";
 
 export default class Constants {
-    public static vNumber = "0.2.7-rc5";
+    public static vNumber = "0.2.7-rc6";
 
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

State.ts

@@ -76,13 +76,11 @@ export default class State {
      This message is shown full screen on mobile devices
      */
     public readonly fullScreenMessage = new UIEventSource<UIElement>(undefined)
-        .addCallback(fs => console.log("Fullscreen message is", fs));
 
     /**
      The latest element that was selected - used to generate the right UI at the right place
      */
     public readonly selectedElement = new UIEventSource<any>(undefined)
-        .addCallback(selected => console.log("Selected element is", selected));
 
     public readonly featureSwitchUserbadge: UIEventSource<boolean>;
     public readonly featureSwitchSearch: UIEventSource<boolean>;

UI/ShowDataLayer.ts

@@ -42,7 +42,7 @@ export default class ShowDataLayer {
 
             const feats = features.data.map(ff => ff.feature);
             let geoLayer = self.CreateGeojsonLayer(feats)
-            if (layoutToUse.clustering !== undefined) {
+            if (layoutToUse.clustering.minNeededElements <= features.data.length) {
                     const cl = window["L"];
                     const cluster = cl.markerClusterGroup({ disableClusteringAtZoom: layoutToUse.clustering.maxZoom });
                     cluster.addLayer(geoLayer);