import {Or, TagsFilter} from "./Tags"; import {UIEventSource} from "./UIEventSource"; import {FilteredLayer} from "./FilteredLayer"; import {Bounds} from "./Bounds"; import {Overpass} from "./Osm/Overpass"; import {State} from "../State"; import {LayerDefinition} from "../Customizations/LayerDefinition"; export class LayerUpdater { public readonly sufficentlyZoomed: UIEventSource; public readonly runningQuery: UIEventSource = new UIEventSource(false); public readonly retries: UIEventSource = new UIEventSource(0); /** * The previous bounds for which the query has been run at the given zoom level * * Note that some layers only activate on a certain zoom level. * If the map location changes, we check for each layer if it is loaded: * we start checking the bounds at the first zoom level the layer might operate. If in bounds - no reload needed, otherwise we continue walking down */ private readonly previousBounds: Map = new Map(); private readonly state: State; /** * The most important layer should go first, as that one gets first pick for the questions */ constructor(state: State) { this.state = state; const self = this; this.sufficentlyZoomed = State.state.locationControl.map(location => { let minzoom = Math.min(...state.layoutToUse.data.layers.map(layer => (layer as LayerDefinition).minzoom ?? 18)); return location.zoom >= minzoom; }, [state.layoutToUse] ); for (let i = 0; i < 25; i++) { // This update removes all data on all layers -> erase the map on lower levels too this.previousBounds.set(i, []); } state.locationControl.addCallback(() => { self.update(state) }); state.layoutToUse.addCallback(() => { self.update(state) }); self.update(state); } private GetFilter(state: State) { const filters: TagsFilter[] = []; state = state ?? State.state; for (const layer of state.layoutToUse.data.layers) { if(typeof(layer) === "string"){ continue; } if (state.locationControl.data.zoom < layer.minzoom) { console.log("Not loading layer ", layer.id, " as it needs at least ", layer.minzoom, "zoom") continue; } // Check if data for this layer has already been loaded let previouslyLoaded = false; for (let z = layer.minzoom; z < 25 && !previouslyLoaded; z++) { const previousLoadedBounds = this.previousBounds.get(z); if (previousLoadedBounds === undefined) { continue; } for (const previousLoadedBound of previousLoadedBounds) { previouslyLoaded = previouslyLoaded || this.IsInBounds(state, previousLoadedBound); if(previouslyLoaded){ break; } } } if (previouslyLoaded) { continue; } filters.push(layer.overpassFilter); } if (filters.length === 0) { return undefined; } return new Or(filters); } private handleData(geojson: any) { const self = this; self.retries.setData(0); function renderLayers(layers: FilteredLayer[]) { if (layers.length === 0) { self.runningQuery.setData(false); if (geojson.features.length > 0) { console.warn("Got some leftovers: ", geojson) } return; } // We use window.setTimeout to give JS some time to update everything and make the interface not too laggy window.setTimeout(() => { const layer = layers[0]; const rest = layers.slice(1, layers.length); geojson = layer.SetApplicableData(geojson); renderLayers(rest); }, 50) } renderLayers(State.state.filteredLayers.data); } private handleFail(state: State, reason: any) { this.retries.data++; this.ForceRefresh(); console.log(`QUERY FAILED (retrying in ${5 * this.retries.data} sec)`, reason); this.retries.ping(); const self = this; window?.setTimeout( function () { self.update(state) }, this.retries.data * 5000 ) } private update(state: State): void { const filter = this.GetFilter(state); if (filter === undefined) { return; } if (this.runningQuery.data) { console.log("Still running a query, skip"); return; } const bounds = state.bm.map.getBounds(); const diff = state.layoutToUse.data.widenFactor; const n = Math.min(90, bounds.getNorth() + diff); const e = Math.min(180, bounds.getEast() + diff); const s = Math.max(-90, bounds.getSouth() - diff); const w = Math.max(-180, bounds.getWest() - diff); const queryBounds = {north: n, east: e, south: s, west: w}; const z = Math.floor(state.locationControl.data.zoom); this.runningQuery.setData(true); const self = this; const overpass = new Overpass(filter); overpass.queryGeoJson(queryBounds, function (data) { self.previousBounds.get(z).push(queryBounds); self.handleData(data) }, function (reason) { self.handleFail(state, reason) } ); } private IsInBounds(state: State, bounds: Bounds): boolean { if (this.previousBounds === undefined) { return false; } const b = state.bm.map.getBounds(); return b.getSouth() >= bounds.south && b.getNorth() <= bounds.north && b.getEast() <= bounds.east && b.getWest() >= bounds.west; } public ForceRefresh() { for (let i = 0; i < 25; i++) { this.previousBounds.set(i, []); } this.update(this.state); } }