Add toggle to disable squares on low zoom levels, fix maxzoom property

InitUiElements.ts

@@ -423,13 +423,13 @@ export class InitUiElements {
             flayers.push(flayer);
         }
         state.filteredLayers = new UIEventSource<FilteredLayer[]>(flayers);
-        
-        
 
 
+
+        const clustering = State.state.layoutToUse.clustering
         const clusterCounter = TileHierarchyAggregator.createHierarchy()
         new ShowDataLayer({
-            features: clusterCounter.getCountsForZoom(State.state.locationControl, State.state.layoutToUse.clustering.minNeededElements),
+            features: clusterCounter.getCountsForZoom(clustering, State.state.locationControl, State.state.layoutToUse.clustering.minNeededElements),
             leafletMap: State.state.leafletMap,
             layerToShow: ShowTileInfo.styling,
             enablePopups: false
@@ -440,7 +440,7 @@ export class InitUiElements {
 
                 clusterCounter.addTile(source)
 
-                const clustering = State.state.layoutToUse.clustering
+                // Do show features indicates if the 'showDataLayer' should be shown
                 const doShowFeatures = source.features.map(
                     f => {
                         const z = State.state.locationControl.data.zoom
@@ -449,6 +449,18 @@ export class InitUiElements {
                             return false;
                         }
 
+                        const bounds = State.state.currentBounds.data
+                        if(bounds === undefined){
+                            // Map is not yet displayed
+                            return false;
+                        }
+
+                        if (!source.bbox.overlapsWith(bounds)) {
+                            // Not within range -> features are hidden
+                            return false
+                        }
+
+
                         if (z < source.layer.layerDef.minzoom) {
                             // Layer is always hidden for this zoom level
                             return false;
@@ -473,21 +485,13 @@ export class InitUiElements {
                             }
 
                             if (clusterCounter.getTile(Tiles.tile_index(tileZ, tileX, tileY))?.totalValue > clustering.minNeededElements) {
+                                // To much elements
                                 return false
                             }
                         }
 
 
-                        const bounds = State.state.currentBounds.data
+                      
-                        if(bounds === undefined){
-                            // Map is not yet displayed
-                            return false;
-                        }
-                        if (!source.bbox.overlapsWith(bounds)) {
-                            // Not within range
-                            return false
-                        }
-
                         return true
                     }, [State.state.currentBounds, source.layer.isDisplayed]
                 )

Models/ThemeConfig/Json/LayoutConfigJson.ts

@@ -237,6 +237,12 @@ 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;
+
     },
 
     /**
@@ -253,7 +259,7 @@ export interface LayoutConfigJson {
      * If set to [[lat0, lon0], [lat1, lon1]], the map will not scroll outside of those bounds.
      * Off by default, which will enable panning to the entire world
      */
-    lockLocation?: boolean | [[number, number], [number, number]];
+    lockLocation?: boolean | [[number, number], [number, number]] | number[][];
 
     enableUserBadge?: boolean;
     enableShareScreen?: boolean;

Models/ThemeConfig/LayoutConfig.ts

@@ -30,7 +30,8 @@ export default class LayoutConfig {
     public layers: LayerConfig[];
     public readonly clustering?: {
         maxZoom: number,
-        minNeededElements: number
+        minNeededElements: number,
+        hideClustersAboveMinzoom: boolean
     };
     public readonly hideFromOverview: boolean;
     public lockLocation: boolean | [[number, number], [number, number]];
@@ -139,12 +140,14 @@ export default class LayoutConfig {
 
         this.clustering = {
             maxZoom: 16,
-            minNeededElements: 25
+            minNeededElements: 25,
+            hideClustersAboveMinzoom: false
         };
         if (json.clustering) {
             this.clustering = {
                 maxZoom: json.clustering.maxZoom ?? 18,
-                minNeededElements: json.clustering.minNeededElements ?? 25
+                minNeededElements: json.clustering.minNeededElements ?? 25,
+                hideClustersAboveMinzoom: json.clustering.hideClustersAboveMinZoom ?? false
             }
         }
 
@@ -153,7 +156,7 @@ export default class LayoutConfig {
         if (json.hideInOverview) {
             throw "The json for " + this.id + " contains a 'hideInOverview'. Did you mean hideFromOverview instead?"
         }
-        this.lockLocation = json.lockLocation ?? undefined;
+        this.lockLocation = <[[number, number], [number, number]]> json.lockLocation ?? undefined;
         this.enableUserBadge = json.enableUserBadge ?? true;
         this.enableShareScreen = json.enableShareScreen ?? true;
         this.enableMoreQuests = json.enableMoreQuests ?? true;

UI/ShowDataLayer/TileHierarchyAggregator.ts

@@ -153,13 +153,18 @@ export class TileHierarchyAggregator implements FeatureSource {
         }
     }
     
-    getCountsForZoom(locationControl: UIEventSource<{ zoom : number }>, cutoff: number = 0) : FeatureSource{
+    getCountsForZoom(clusteringConfig: {maxZoom: number}, locationControl: UIEventSource<{ zoom : number }>, cutoff: number = 0) : FeatureSource{
         const self = this
-        
+        const empty = []
         return new StaticFeatureSource(
             locationControl.map(loc => {
-                const features = []
                 const targetZoom = loc.zoom
+                
+                if(targetZoom > clusteringConfig.maxZoom){
+                    return empty
+                }
+                
+                const features = []
                 self.visitSubTiles(aggr => {
                     if(aggr.totalValue < cutoff) {
                         return false

assets/themes/natuurpunt/natuurpunt.json

@@ -34,7 +34,8 @@
   "hideFromOverview": true,
   "clustering": {
     "#": "Disable clustering for this theme",
-    "maxZoom": 1
+    "maxZoom": 1,
+    "hideBoxesAboveMinZoom": true
   },
   "layers": [
     {
@@ -109,7 +110,7 @@
             ]
           },
           "geoJson": "https://pietervdvn.github.io/natuurpunt_cache/natuurpunt_{layer}_{z}_{x}_{y}.geojson",
-          "geoJsonZoomLevel": 12,
+          "geoJsonZoomLevel": 10,
           "isOsmCache": true
         },
         "minzoom": "13",