Cluster styling tweaks, tweaks to NP

Models/ThemeConfig/Json/LayoutConfigJson.ts

@@ -1,6 +1,5 @@
 import {TagRenderingConfigJson} from "./TagRenderingConfigJson";
 import {LayerConfigJson} from "./LayerConfigJson";
-import UnitConfigJson from "./UnitConfigJson";
 
 /**
  * Defines the entire theme.
@@ -237,12 +236,6 @@ export interface LayoutConfigJson {
          * If clustering is defined, defaults to 25
          */
         minNeededElements?: number
-        /**
-         * By default, a box is shown indicating the number of features even if the map is zoomed out beyond the minzoom of the layer.
-         * This flag switches this behaviour to not show these boxes.
-         */
-        hideClustersAboveMinZoom?: boolean;
-
     },
 
     /**

Models/ThemeConfig/LayoutConfig.ts

@@ -31,7 +31,6 @@ export default class LayoutConfig {
     public readonly clustering?: {
         maxZoom: number,
         minNeededElements: number,
-        hideClustersAboveMinzoom: boolean
     };
     public readonly hideFromOverview: boolean;
     public lockLocation: boolean | [[number, number], [number, number]];
@@ -141,13 +140,16 @@ export default class LayoutConfig {
         this.clustering = {
             maxZoom: 16,
             minNeededElements: 25,
-            hideClustersAboveMinzoom: false
         };
-        if (json.clustering) {
+        if(json.clustering === false){
+            this.clustering = {
+                maxZoom: 0,
+                minNeededElements: 100000,
+            };
+        }else         if (json.clustering) {
             this.clustering = {
                 maxZoom: json.clustering.maxZoom ?? 18,
                 minNeededElements: json.clustering.minNeededElements ?? 25,
-                hideClustersAboveMinzoom: json.clustering.hideClustersAboveMinZoom ?? false
             }
         }
 

UI/ShowDataLayer/TileHierarchyAggregator.ts

@@ -22,7 +22,7 @@ export class TileHierarchyAggregator implements FeatureSource {
     public readonly name;
 
     private readonly featuresStatic = []
-    private readonly featureProperties: { count: string, tileId: string, id: string };
+    private readonly featureProperties: { count: string, kilocount: string, tileId: string, id: string };
 
     private constructor(parent: TileHierarchyAggregator, z: number, x: number, y: number) {
         this._parent = parent;
@@ -36,7 +36,8 @@ export class TileHierarchyAggregator implements FeatureSource {
         const totals = {
             id: ""+this._tileIndex,
             tileId: ""+this._tileIndex,
-            count: ""+0
+            count: `0`,
+            kilocount: "0"
         }
         this.featureProperties = totals
 
@@ -108,6 +109,7 @@ export class TileHierarchyAggregator implements FeatureSource {
             this.features.setData(TileHierarchyAggregator.empty)
         } else {
             this.featureProperties.count = "" + total;
+            this.featureProperties.kilocount = "" +Math.floor(total/1000);
             this.features.data = this.featuresStatic
             this.features.ping()
         }

Utils.ts

@@ -78,18 +78,6 @@ export class Utils {
         return res;
     }
 
-    static DoEvery(millis: number, f: (() => void)) {
-        if (Utils.runningFromConsole) {
-            return;
-        }
-        window.setTimeout(
-            function () {
-                f();
-                Utils.DoEvery(millis, f);
-            }
-            , millis)
-    }
-
     public static NoNull<T>(array: T[]): T[] {
         const ls: T[] = [];
         for (const t of array) {
@@ -440,5 +428,19 @@ export class Utils {
             window.setTimeout(resolve, timeMillis);
         })
     }
+    
+    public static toHumanTime(seconds): string{
+        seconds = Math.floor(seconds)
+        let minutes = Math.floor(seconds / 60)
+        seconds = seconds % 60
+        let hours = Math.floor(minutes / 60)
+        minutes = minutes % 60
+        let days = Math.floor(hours / 24)
+        hours = hours % 24
+        if(days > 0){
+            return days+"days"+" "+hours+"h"
+        }
+            return hours+":"+Utils.TwoDigits(minutes)+":"+Utils.TwoDigits(seconds)
+    }
 }
 

assets/layers/cluster_style/cluster_style.json

@@ -28,8 +28,8 @@
         "render": "<div class='rounded-full text-xl font-bold' style='width: 2rem; height: 2rem; background: white'>{count}</div>",
         "mappings": [
             {
-                "if": "count>99",
+                "if": "count>1000",
-                "then": "<div class='rounded-full text-xl font-bold flex flex-col' style='width: 2.5rem; height: 2.5rem; background: white'>&gt;99</div>"
+                "then": "<div class='rounded-full text-xl font-bold flex flex-col' style='width: 2.5rem; height: 2.5rem; background: white'>{kilocount}K</div>"
             }
         ]
     }

assets/themes/natuurpunt/natuurpunt.json

@@ -32,10 +32,9 @@
   "enablePdfDownload": true,
   "enableDownload": true,
   "hideFromOverview": true,
-  "clustering": {
     "#": "Disable clustering for this theme",
-    "maxZoom": 1,
+  "clustering": {
-    "hideBoxesAboveMinZoom": true
+    "maxZoom": 0
   },
   "layers": [
     {
@@ -110,10 +109,10 @@
             ]
           },
           "geoJson": "https://pietervdvn.github.io/natuurpunt_cache/natuurpunt_{layer}_{z}_{x}_{y}.geojson",
-          "geoJsonZoomLevel": 10,
+          "geoJsonZoomLevel": 12,
           "isOsmCache": true
         },
-        "minzoom": "13",
+        "minzoom": 10,
         "icon": {
           "render": "circle:#FE6F32;./assets/themes/natuurpunt/trail.svg",
           "mappings": [