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

This commit is contained in:
pietervdvn 2021-10-13 00:43:19 +02:00
parent 6330bd5bfd
commit 9e7dec0101
5 changed files with 43 additions and 24 deletions

View file

@ -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]
)

View file

@ -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;

View file

@ -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;

View file

@ -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

View file

@ -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",