From 9e7dec010163d11c17ba4370ec8da119b34e21b8 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Wed, 13 Oct 2021 00:43:19 +0200 Subject: [PATCH] Add toggle to disable squares on low zoom levels, fix maxzoom property --- InitUiElements.ts | 32 ++++++++++++--------- Models/ThemeConfig/Json/LayoutConfigJson.ts | 8 +++++- Models/ThemeConfig/LayoutConfig.ts | 11 ++++--- UI/ShowDataLayer/TileHierarchyAggregator.ts | 11 +++++-- assets/themes/natuurpunt/natuurpunt.json | 5 ++-- 5 files changed, 43 insertions(+), 24 deletions(-) diff --git a/InitUiElements.ts b/InitUiElements.ts index e7113e2d6..59f56b849 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -423,13 +423,13 @@ export class InitUiElements { flayers.push(flayer); } state.filteredLayers = new UIEventSource(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] ) diff --git a/Models/ThemeConfig/Json/LayoutConfigJson.ts b/Models/ThemeConfig/Json/LayoutConfigJson.ts index 89439f529..64d6be83e 100644 --- a/Models/ThemeConfig/Json/LayoutConfigJson.ts +++ b/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; diff --git a/Models/ThemeConfig/LayoutConfig.ts b/Models/ThemeConfig/LayoutConfig.ts index 9add1c7f9..fbfc924f7 100644 --- a/Models/ThemeConfig/LayoutConfig.ts +++ b/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; diff --git a/UI/ShowDataLayer/TileHierarchyAggregator.ts b/UI/ShowDataLayer/TileHierarchyAggregator.ts index 4b1685981..e1d934a95 100644 --- a/UI/ShowDataLayer/TileHierarchyAggregator.ts +++ b/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 diff --git a/assets/themes/natuurpunt/natuurpunt.json b/assets/themes/natuurpunt/natuurpunt.json index fb45742ca..0090eb237 100644 --- a/assets/themes/natuurpunt/natuurpunt.json +++ b/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",