refactoring: more state splitting, basic layoutFeatureSource

Logic/FeatureSource/Actors/FeaturePropertiesStore.ts

@@ -0,0 +1,107 @@
+import FeatureSource, { IndexedFeatureSource } from "../FeatureSource"
+import { UIEventSource } from "../../UIEventSource"
+
+/**
+ * Constructs a UIEventStore for the properties of every Feature, indexed by id
+ */
+export default class FeaturePropertiesStore {
+    private readonly _source: FeatureSource & IndexedFeatureSource
+    private readonly _elements = new Map<string, UIEventSource<any>>()
+
+    constructor(source: FeatureSource & IndexedFeatureSource) {
+        this._source = source
+        const self = this
+        source.features.addCallbackAndRunD((features) => {
+            for (const feature of features) {
+                const id = feature.properties.id
+                if (id === undefined) {
+                    console.trace("Error: feature without ID:", feature)
+                    throw "Error: feature without ID"
+                }
+
+                const source = self._elements.get(id)
+                if (source === undefined) {
+                    self._elements.set(id, new UIEventSource<any>(feature.properties))
+                    continue
+                }
+
+                if (source.data === feature.properties) {
+                    continue
+                }
+
+                // Update the tags in the old store and link them
+                const changeMade = FeaturePropertiesStore.mergeTags(source.data, feature.properties)
+                feature.properties = source.data
+                if (changeMade) {
+                    source.ping()
+                }
+            }
+        })
+    }
+
+    public getStore(id: string): UIEventSource<Record<string, string>> {
+        return this._elements.get(id)
+    }
+
+    /**
+     * Overwrites the tags of the old properties object, returns true if a change was made.
+     * Metatags are overriden if they are in the new properties, but not removed
+     * @param oldProperties
+     * @param newProperties
+     * @private
+     */
+    private static mergeTags(
+        oldProperties: Record<string, any>,
+        newProperties: Record<string, any>
+    ): boolean {
+        let changeMade = false
+
+        for (const oldPropertiesKey in oldProperties) {
+            // Delete properties from the old record if it is not in the new store anymore
+            if (oldPropertiesKey.startsWith("_")) {
+                continue
+            }
+            if (newProperties[oldPropertiesKey] === undefined) {
+                changeMade = true
+                delete oldProperties[oldPropertiesKey]
+            }
+        }
+
+        // Copy all properties from the new record into the old
+        for (const newPropertiesKey in newProperties) {
+            const v = newProperties[newPropertiesKey]
+            if (oldProperties[newPropertiesKey] !== v) {
+                oldProperties[newPropertiesKey] = v
+                changeMade = true
+            }
+        }
+
+        return changeMade
+    }
+
+    addAlias(oldId: string, newId: string): void {
+        if (newId === undefined) {
+            // We removed the node/way/relation with type 'type' and id 'oldId' on openstreetmap!
+            const element = this._elements.get(oldId)
+            element.data._deleted = "yes"
+            element.ping()
+            return
+        }
+
+        if (oldId == newId) {
+            return
+        }
+        const element = this._elements.get(oldId)
+        if (element === undefined) {
+            // Element to rewrite not found, probably a node or relation that is not rendered
+            return
+        }
+        element.data.id = newId
+        this._elements.set(newId, element)
+        element.ping()
+    }
+
+    has(id: string) {
+        return this._elements.has(id)
+    }
+}

Logic/FeatureSource/Actors/MetaTagRecalculator.ts

@@ -1,6 +1,5 @@
 import { FeatureSourceForLayer, Tiled } from "../FeatureSource"
 import MetaTagging from "../../MetaTagging"
-import { ElementStorage } from "../../ElementStorage"
 import { ExtraFuncParams } from "../../ExtraFunctions"
 import FeaturePipeline from "../FeaturePipeline"
 import { BBox } from "../../BBox"
@@ -39,7 +38,6 @@ class MetatagUpdater {
                 }
                 return featurePipeline.GetFeaturesWithin(layerId, bbox)
             },
-            memberships: featurePipeline.relationTracker,
         }
         this.isDirty.stabilized(100).addCallback((dirty) => {
             if (dirty) {

Logic/FeatureSource/Actors/RegisteringAllFromFeatureSourceActor.ts

@@ -1,20 +0,0 @@
-import FeatureSource from "../FeatureSource";
-import { Store } from "../../UIEventSource";
-import { ElementStorage } from "../../ElementStorage";
-import { Feature } from "geojson";
-
-/**
- * Makes sure that every feature is added to the ElementsStorage, so that the tags-eventsource can be retrieved
- */
-export default class RegisteringAllFromFeatureSourceActor {
-    public readonly features: Store<Feature[]>
-
-    constructor(source: FeatureSource, allElements: ElementStorage) {
-        this.features = source.features
-        this.features.addCallbackAndRunD((features) => {
-            for (const feature of features) {
-                allElements.addOrGetElement(<any> feature)
-            }
-        })
-    }
-}

Logic/FeatureSource/FeaturePipeline.ts

@@ -13,16 +13,18 @@ import RegisteringAllFromFeatureSourceActor from "./Actors/RegisteringAllFromFea
 import SaveTileToLocalStorageActor from "./Actors/SaveTileToLocalStorageActor"
 import DynamicGeoJsonTileSource from "./TiledFeatureSource/DynamicGeoJsonTileSource"
 import { TileHierarchyMerger } from "./TiledFeatureSource/TileHierarchyMerger"
-import RelationsTracker from "../Osm/RelationsTracker"
 import { NewGeometryFromChangesFeatureSource } from "./Sources/NewGeometryFromChangesFeatureSource"
 import ChangeGeometryApplicator from "./Sources/ChangeGeometryApplicator"
+/**
+ * Keeps track of the age of the loaded data.
+ * Has one freshness-Calculator for every layer
+ * @private
+ */
 import { BBox } from "../BBox"
 import OsmFeatureSource from "./TiledFeatureSource/OsmFeatureSource"
 import { Tiles } from "../../Models/TileRange"
-import TileFreshnessCalculator from "./TileFreshnessCalculator"
 import FullNodeDatabaseSource from "./TiledFeatureSource/FullNodeDatabaseSource"
 import MapState from "../State/MapState"
-import { ElementStorage } from "../ElementStorage"
 import { OsmFeature } from "../../Models/OsmFeature"
 import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
 import { FilterState } from "../../Models/FilteredLayer"
@@ -47,7 +49,6 @@ export default class FeaturePipeline {
     public readonly somethingLoaded: UIEventSource<boolean> = new UIEventSource<boolean>(false)
     public readonly newDataLoadedSignal: UIEventSource<FeatureSource> =
         new UIEventSource<FeatureSource>(undefined)
-    public readonly relationTracker: RelationsTracker
     /**
      * Keeps track of all raw OSM-nodes.
      * Only initialized if `ReplaceGeometryAction` is needed somewhere
@@ -56,12 +57,6 @@ export default class FeaturePipeline {
     private readonly overpassUpdater: OverpassFeatureSource
     private state: MapState
     private readonly perLayerHierarchy: Map<string, TileHierarchyMerger>
-    /**
-     * Keeps track of the age of the loaded data.
-     * Has one freshness-Calculator for every layer
-     * @private
-     */
-    private readonly freshnesses = new Map<string, TileFreshnessCalculator>()
     private readonly oldestAllowedDate: Date
     private readonly osmSourceZoomLevel
     private readonly localStorageSavers = new Map<string, SaveTileToLocalStorageActor>()
@@ -87,7 +82,6 @@ export default class FeaturePipeline {
         const useOsmApi = state.locationControl.map(
             (l) => l.zoom > (state.overpassMaxZoom.data ?? 12)
         )
-        this.relationTracker = new RelationsTracker()
 
         state.changes.allChanges.addCallbackAndRun((allChanges) => {
             allChanges
@@ -141,11 +135,8 @@ export default class FeaturePipeline {
             )
             perLayerHierarchy.set(id, hierarchy)
 
-            this.freshnesses.set(id, new TileFreshnessCalculator())
-
             if (id === "type_node") {
                 this.fullNodeDatabase = new FullNodeDatabaseSource(filteredLayer, (tile) => {
-                    new RegisteringAllFromFeatureSourceActor(tile, state.allElements)
                     perLayerHierarchy.get(tile.layer.layerDef.id).registerTile(tile)
                     tile.features.addCallbackAndRunD((_) => self.onNewDataLoaded(tile))
                 })
@@ -473,7 +464,6 @@ export default class FeaturePipeline {
 
     private initOverpassUpdater(
         state: {
-            allElements: ElementStorage
             layoutToUse: LayoutConfig
             currentBounds: Store<BBox>
             locationControl: Store<Loc>
@@ -513,26 +503,10 @@ export default class FeaturePipeline {
             [state.locationControl]
         )
 
-        const self = this
-        const updater = new OverpassFeatureSource(state, {
+        return new OverpassFeatureSource(state, {
             padToTiles: state.locationControl.map((l) => Math.min(15, l.zoom + 1)),
-            relationTracker: this.relationTracker,
             isActive: useOsmApi.map((b) => !b && overpassIsActive.data, [overpassIsActive]),
-            freshnesses: this.freshnesses,
-            onBboxLoaded: (bbox, date, downloadedLayers, paddedToZoomLevel) => {
-                Tiles.MapRange(bbox.containingTileRange(paddedToZoomLevel), (x, y) => {
-                    const tileIndex = Tiles.tile_index(paddedToZoomLevel, x, y)
-                    downloadedLayers.forEach((layer) => {
-                        self.freshnesses.get(layer.id).addTileLoad(tileIndex, date)
-                        self.localStorageSavers.get(layer.id)?.MarkVisited(tileIndex, date)
-                    })
-                })
-            },
         })
-
-        // Register everything in the state' 'AllElements'
-        new RegisteringAllFromFeatureSourceActor(updater, state.allElements)
-        return updater
     }
 
     /**

Logic/FeatureSource/FeatureSource.ts

@@ -23,5 +23,5 @@ export interface FeatureSourceForLayer extends FeatureSource {
  * A feature source which is aware of the indexes it contains
  */
 export interface IndexedFeatureSource extends FeatureSource {
-    readonly containedIds: Store<Set<string>>
+    readonly featuresById: Store<Map<string, Feature>>
 }

Logic/FeatureSource/LayoutSource.ts

@@ -0,0 +1,129 @@
+import FeatureSource from "./FeatureSource"
+import { Store } from "../UIEventSource"
+import FeatureSwitchState from "../State/FeatureSwitchState"
+import OverpassFeatureSource from "../Actors/OverpassFeatureSource"
+import { BBox } from "../BBox"
+import OsmFeatureSource from "./TiledFeatureSource/OsmFeatureSource"
+import { Or } from "../Tags/Or"
+import FeatureSourceMerger from "./Sources/FeatureSourceMerger"
+import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+import GeoJsonSource from "./Sources/GeoJsonSource"
+import DynamicGeoJsonTileSource from "./TiledFeatureSource/DynamicGeoJsonTileSource"
+
+/**
+ * This source will fetch the needed data from various sources for the given layout.
+ *
+ * Note that special layers (with `source=null` will be ignored)
+ */
+export default class LayoutSource extends FeatureSourceMerger {
+    constructor(
+        filteredLayers: LayerConfig[],
+        featureSwitches: FeatureSwitchState,
+        newAndChangedElements: FeatureSource,
+        mapProperties: { bounds: Store<BBox>; zoom: Store<number> },
+        backend: string,
+        isLayerActive: (id: string) => Store<boolean>
+    ) {
+        const { bounds, zoom } = mapProperties
+        // remove all 'special' layers
+        filteredLayers = filteredLayers.filter((flayer) => flayer.source !== null)
+
+        const geojsonlayers = filteredLayers.filter(
+            (flayer) => flayer.source.geojsonSource !== undefined
+        )
+        const osmLayers = filteredLayers.filter(
+            (flayer) => flayer.source.geojsonSource === undefined
+        )
+        const overpassSource = LayoutSource.setupOverpass(osmLayers, bounds, zoom, featureSwitches)
+        const osmApiSource = LayoutSource.setupOsmApiSource(
+            osmLayers,
+            bounds,
+            zoom,
+            backend,
+            featureSwitches
+        )
+        const geojsonSources: FeatureSource[] = geojsonlayers.map((l) =>
+            LayoutSource.setupGeojsonSource(l, mapProperties)
+        )
+
+        const expiryInSeconds = Math.min(...(filteredLayers?.map((l) => l.maxAgeOfCache) ?? []))
+        super(overpassSource, osmApiSource, newAndChangedElements, ...geojsonSources)
+    }
+
+    private static setupGeojsonSource(
+        layer: LayerConfig,
+        mapProperties: { zoom: Store<number>; bounds: Store<BBox> },
+        isActive?: Store<boolean>
+    ): FeatureSource {
+        const source = layer.source
+        if (source.geojsonZoomLevel === undefined) {
+            // This is a 'load everything at once' geojson layer
+            return new GeoJsonSource(layer, { isActive })
+        } else {
+            return new DynamicGeoJsonTileSource(layer, mapProperties, { isActive })
+        }
+    }
+
+    private static setupOsmApiSource(
+        osmLayers: LayerConfig[],
+        bounds: Store<BBox>,
+        zoom: Store<number>,
+        backend: string,
+        featureSwitches: FeatureSwitchState
+    ): FeatureSource {
+        const minzoom = Math.min(...osmLayers.map((layer) => layer.minzoom))
+        const isActive = zoom.mapD((z) => {
+            if (z < minzoom) {
+                // We are zoomed out over the zoomlevel of any layer
+                console.debug("Disabling overpass source: zoom < minzoom")
+                return false
+            }
+
+            // Overpass should handle this if zoomed out a bit
+            return z > featureSwitches.overpassMaxZoom.data
+        })
+        const allowedFeatures = new Or(osmLayers.map((l) => l.source.osmTags)).optimize()
+        if (typeof allowedFeatures === "boolean") {
+            throw "Invalid filter to init OsmFeatureSource: it optimizes away to " + allowedFeatures
+        }
+        return new OsmFeatureSource({
+            allowedFeatures,
+            bounds,
+            backend,
+            isActive,
+        })
+    }
+
+    private static setupOverpass(
+        osmLayers: LayerConfig[],
+        bounds: Store<BBox>,
+        zoom: Store<number>,
+        featureSwitches: FeatureSwitchState
+    ): FeatureSource {
+        const minzoom = Math.min(...osmLayers.map((layer) => layer.minzoom))
+        const isActive = zoom.mapD((z) => {
+            if (z < minzoom) {
+                // We are zoomed out over the zoomlevel of any layer
+                console.debug("Disabling overpass source: zoom < minzoom")
+                return false
+            }
+
+            return z <= featureSwitches.overpassMaxZoom.data
+        })
+
+        return new OverpassFeatureSource(
+            {
+                zoom,
+                bounds,
+                layoutToUse: featureSwitches.layoutToUse,
+                overpassUrl: featureSwitches.overpassUrl,
+                overpassTimeout: featureSwitches.overpassTimeout,
+                overpassMaxZoom: featureSwitches.overpassMaxZoom,
+            },
+            {
+                padToTiles: zoom.map((zoom) => Math.min(15, zoom + 1)),
+                isActive,
+            }
+        )
+    }
+}

Logic/FeatureSource/PerLayerFeatureSourceSplitter.ts

@@ -1,4 +1,4 @@
-import FeatureSource, { FeatureSourceForLayer, Tiled } from "./FeatureSource"
+import FeatureSource from "./FeatureSource"
 import { Store } from "../UIEventSource"
 import FilteredLayer from "../../Models/FilteredLayer"
 import SimpleFeatureSource from "./Sources/SimpleFeatureSource"
@@ -12,7 +12,7 @@ import { Feature } from "geojson"
 export default class PerLayerFeatureSourceSplitter {
     constructor(
         layers: Store<FilteredLayer[]>,
-        handleLayerData: (source: FeatureSourceForLayer & Tiled) => void,
+        handleLayerData: (source: FeatureSource, layer: FilteredLayer) => void,
         upstream: FeatureSource,
         options?: {
             tileIndex?: number
@@ -71,10 +71,10 @@ export default class PerLayerFeatureSourceSplitter {
                 let featureSource = knownLayers.get(id)
                 if (featureSource === undefined) {
                     // Not yet initialized - now is a good time
-                    featureSource = new SimpleFeatureSource(layer, options?.tileIndex)
+                    featureSource = new SimpleFeatureSource(layer)
                     featureSource.features.setData(features)
                     knownLayers.set(id, featureSource)
-                    handleLayerData(featureSource)
+                    handleLayerData(featureSource, layer)
                 } else {
                     featureSource.features.setData(features)
                 }

Logic/FeatureSource/Sources/FeatureSourceMerger.ts

@@ -1,58 +1,40 @@
-import { UIEventSource } from "../../UIEventSource"
-import FeatureSource, { FeatureSourceForLayer, IndexedFeatureSource, Tiled } from "../FeatureSource"
-import FilteredLayer from "../../../Models/FilteredLayer"
-import { BBox } from "../../BBox"
+import { Store, UIEventSource } from "../../UIEventSource"
+import FeatureSource, { IndexedFeatureSource } from "../FeatureSource"
 import { Feature } from "geojson"
 
-export default class FeatureSourceMerger
-    implements FeatureSourceForLayer, Tiled, IndexedFeatureSource
-{
+/**
+ *
+ */
+export default class FeatureSourceMerger implements IndexedFeatureSource {
     public features: UIEventSource<Feature[]> = new UIEventSource([])
-    public readonly layer: FilteredLayer
-    public readonly tileIndex: number
-    public readonly bbox: BBox
-    public readonly containedIds: UIEventSource<Set<string>> = new UIEventSource<Set<string>>(
-        new Set()
-    )
-    private readonly _sources: UIEventSource<FeatureSource[]>
+    public readonly featuresById: Store<Map<string, Feature>>
+    private readonly _featuresById: UIEventSource<Map<string, Feature>>
+    private readonly _sources: FeatureSource[] = []
     /**
-     * Merges features from different featureSources for a single layer
-     * Uses the freshest feature available in the case multiple sources offer data with the same identifier
+     * Merges features from different featureSources.
+     * In case that multiple features have the same id, the latest `_version_number` will be used. Otherwise, we will take the last one
      */
-    constructor(
-        layer: FilteredLayer,
-        tileIndex: number,
-        bbox: BBox,
-        sources: UIEventSource<FeatureSource[]>
-    ) {
-        this.tileIndex = tileIndex
-        this.bbox = bbox
-        this._sources = sources
-        this.layer = layer
+    constructor(...sources: FeatureSource[]) {
+        this._featuresById = new UIEventSource<Map<string, Feature>>(undefined)
+        this.featuresById = this._featuresById
         const self = this
+        for (let source of sources) {
+            source.features.addCallback(() => {
+                self.addData(sources.map((s) => s.features.data))
+            })
+        }
+        this.addData(sources.map((s) => s.features.data))
+        this._sources = sources
+    }
 
-        const handledSources = new Set<FeatureSource>()
-
-        sources.addCallbackAndRunD((sources) => {
-            let newSourceRegistered = false
-            for (let i = 0; i < sources.length; i++) {
-                let source = sources[i]
-                if (handledSources.has(source)) {
-                    continue
-                }
-                handledSources.add(source)
-                newSourceRegistered = true
-                source.features.addCallback(() => {
-                    self.Update()
-                })
-                if (newSourceRegistered) {
-                    self.Update()
-                }
-            }
+    protected addSource(source: FeatureSource) {
+        this._sources.push(source)
+        source.features.addCallbackAndRun(() => {
+            this.addData(this._sources.map((s) => s.features.data))
         })
     }
 
-    private Update() {
+    protected addData(featuress: Feature[][]) {
         let somethingChanged = false
         const all: Map<string, Feature> = new Map()
         // We seed the dictionary with the previously loaded features
@@ -61,11 +43,11 @@ export default class FeatureSourceMerger
             all.set(oldValue.properties.id, oldValue)
         }
 
-        for (const source of this._sources.data) {
-            if (source?.features?.data === undefined) {
+        for (const features of featuress) {
+            if (features === undefined) {
                 continue
             }
-            for (const f of source.features.data) {
+            for (const f of features) {
                 const id = f.properties.id
                 if (!all.has(id)) {
                     // This is a new feature
@@ -77,7 +59,7 @@ export default class FeatureSourceMerger
                 // This value has been seen already, either in a previous run or by a previous datasource
                 // Let's figure out if something changed
                 const oldV = all.get(id)
-                if (oldV === f) {
+                if (oldV == f) {
                     continue
                 }
                 all.set(id, f)
@@ -91,10 +73,10 @@ export default class FeatureSourceMerger
         }
 
         const newList = []
-        all.forEach((value, _) => {
+        all.forEach((value, key) => {
             newList.push(value)
         })
-        this.containedIds.setData(new Set(all.keys()))
         this.features.setData(newList)
+        this._featuresById.setData(all)
     }
 }

Logic/FeatureSource/Sources/FilteringFeatureSource.ts

@@ -1,45 +1,32 @@
 import { Store, UIEventSource } from "../../UIEventSource"
 import FilteredLayer, { FilterState } from "../../../Models/FilteredLayer"
-import { FeatureSourceForLayer, Tiled } from "../FeatureSource"
-import { BBox } from "../../BBox"
-import { ElementStorage } from "../../ElementStorage"
+import FeatureSource from "../FeatureSource"
 import { TagsFilter } from "../../Tags/TagsFilter"
 import { Feature } from "geojson"
+import { OsmTags } from "../../../Models/OsmFeature"
 
-export default class FilteringFeatureSource implements FeatureSourceForLayer, Tiled {
+export default class FilteringFeatureSource implements FeatureSource {
     public features: UIEventSource<Feature[]> = new UIEventSource([])
-    public readonly layer: FilteredLayer
-    public readonly tileIndex: number
-    public readonly bbox: BBox
-    private readonly upstream: FeatureSourceForLayer
-    private readonly state: {
-        locationControl: Store<{ zoom: number }>
-        selectedElement: Store<any>
-        globalFilters?: Store<{ filter: FilterState }[]>
-        allElements: ElementStorage
-    }
-    private readonly _alreadyRegistered = new Set<UIEventSource<any>>()
+    private readonly upstream: FeatureSource
+    private readonly _fetchStore?: (id: String) => Store<OsmTags>
+    private readonly _globalFilters?: Store<{ filter: FilterState }[]>
+    private readonly _alreadyRegistered = new Set<Store<any>>()
     private readonly _is_dirty = new UIEventSource(false)
+    private readonly _layer: FilteredLayer
     private previousFeatureSet: Set<any> = undefined
 
     constructor(
-        state: {
-            locationControl: Store<{ zoom: number }>
-            selectedElement: Store<any>
-            allElements: ElementStorage
-            globalFilters?: Store<{ filter: FilterState }[]>
-        },
-        tileIndex,
-        upstream: FeatureSourceForLayer,
-        metataggingUpdated?: UIEventSource<any>
+        layer: FilteredLayer,
+        upstream: FeatureSource,
+        fetchStore?: (id: String) => Store<OsmTags>,
+        globalFilters?: Store<{ filter: FilterState }[]>,
+        metataggingUpdated?: Store<any>
     ) {
-        this.tileIndex = tileIndex
-        this.bbox = tileIndex === undefined ? undefined : BBox.fromTileIndex(tileIndex)
         this.upstream = upstream
-        this.state = state
+        this._fetchStore = fetchStore
+        this._layer = layer
+        this._globalFilters = globalFilters
 
-        this.layer = upstream.layer
-        const layer = upstream.layer
         const self = this
         upstream.features.addCallback(() => {
             self.update()
@@ -59,7 +46,7 @@ export default class FilteringFeatureSource implements FeatureSourceForLayer, Ti
             self._is_dirty.setData(true)
         })
 
-        state.globalFilters?.addCallback((_) => {
+        globalFilters?.addCallback((_) => {
             self.update()
         })
 
@@ -68,10 +55,10 @@ export default class FilteringFeatureSource implements FeatureSourceForLayer, Ti
 
     private update() {
         const self = this
-        const layer = this.upstream.layer
+        const layer = this._layer
         const features: Feature[] = this.upstream.features.data ?? []
         const includedFeatureIds = new Set<string>()
-        const globalFilters = self.state.globalFilters?.data?.map((f) => f.filter)
+        const globalFilters = self._globalFilters?.data?.map((f) => f.filter)
         const newFeatures = (features ?? []).filter((f) => {
             self.registerCallback(f)
 
@@ -126,7 +113,10 @@ export default class FilteringFeatureSource implements FeatureSourceForLayer, Ti
     }
 
     private registerCallback(feature: any) {
-        const src = this.state?.allElements?.addOrGetElement(feature)
+        if (this._fetchStore === undefined) {
+            return
+        }
+        const src = this._fetchStore(feature)
         if (src == undefined) {
             return
         }
@@ -136,7 +126,7 @@ export default class FilteringFeatureSource implements FeatureSourceForLayer, Ti
         this._alreadyRegistered.add(src)
 
         const self = this
-        // Add a callback as a changed tag migh change the filter
+        // Add a callback as a changed tag might change the filter
         src.addCallbackAndRunD((_) => {
             self._is_dirty.setData(true)
         })

Logic/FeatureSource/Sources/GeoJsonSource.ts

@@ -1,59 +1,53 @@
 /**
  * Fetches a geojson file somewhere and passes it along
  */
-import { UIEventSource } from "../../UIEventSource"
-import FilteredLayer from "../../../Models/FilteredLayer"
+import { Store, UIEventSource } from "../../UIEventSource"
 import { Utils } from "../../../Utils"
-import { FeatureSourceForLayer, Tiled } from "../FeatureSource"
-import { Tiles } from "../../../Models/TileRange"
+import FeatureSource from "../FeatureSource"
 import { BBox } from "../../BBox"
 import { GeoOperations } from "../../GeoOperations"
 import { Feature } from "geojson"
+import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
+import { Tiles } from "../../../Models/TileRange"
 
-export default class GeoJsonSource implements FeatureSourceForLayer, Tiled {
-    public readonly features: UIEventSource<Feature[]>
-    public readonly state = new UIEventSource<undefined | { error: string } | "loaded">(undefined)
-    public readonly name
-    public readonly isOsmCache: boolean
-    public readonly layer: FilteredLayer
-    public readonly tileIndex
-    public readonly bbox
+export default class GeoJsonSource implements FeatureSource {
+    public readonly features: Store<Feature[]>
     private readonly seenids: Set<string>
     private readonly idKey?: string
 
     public constructor(
-        flayer: FilteredLayer,
-        zxy?: [number, number, number] | BBox,
+        layer: LayerConfig,
         options?: {
+            zxy?: number | [number, number, number] | BBox
             featureIdBlacklist?: Set<string>
+            isActive?: Store<boolean>
         }
     ) {
-        if (flayer.layerDef.source.geojsonZoomLevel !== undefined && zxy === undefined) {
+        if (layer.source.geojsonZoomLevel !== undefined && options?.zxy === undefined) {
             throw "Dynamic layers are not supported. Use 'DynamicGeoJsonTileSource instead"
         }
 
-        this.layer = flayer
-        this.idKey = flayer.layerDef.source.idKey
+        this.idKey = layer.source.idKey
         this.seenids = options?.featureIdBlacklist ?? new Set<string>()
-        let url = flayer.layerDef.source.geojsonSource.replace("{layer}", flayer.layerDef.id)
+        let url = layer.source.geojsonSource.replace("{layer}", layer.id)
+        let zxy = options?.zxy
         if (zxy !== undefined) {
             let tile_bbox: BBox
+            if (typeof zxy === "number") {
+                zxy = Tiles.tile_from_index(zxy)
+            }
             if (zxy instanceof BBox) {
                 tile_bbox = zxy
             } else {
                 const [z, x, y] = zxy
                 tile_bbox = BBox.fromTile(z, x, y)
-
-                this.tileIndex = Tiles.tile_index(z, x, y)
-                this.bbox = BBox.fromTile(z, x, y)
                 url = url
                     .replace("{z}", "" + z)
                     .replace("{x}", "" + x)
                     .replace("{y}", "" + y)
             }
-            let bounds: { minLat: number; maxLat: number; minLon: number; maxLon: number } =
-                tile_bbox
-            if (this.layer.layerDef.source.mercatorCrs) {
+            let bounds: Record<"minLat" | "maxLat" | "minLon" | "maxLon", number> = tile_bbox
+            if (layer.source.mercatorCrs) {
                 bounds = tile_bbox.toMercator()
             }
 
@@ -62,103 +56,83 @@ export default class GeoJsonSource implements FeatureSourceForLayer, Tiled {
                 .replace("{y_max}", "" + bounds.maxLat)
                 .replace("{x_min}", "" + bounds.minLon)
                 .replace("{x_max}", "" + bounds.maxLon)
-        } else {
-            this.tileIndex = Tiles.tile_index(0, 0, 0)
-            this.bbox = BBox.global
         }
 
-        this.name = "GeoJsonSource of " + url
-
-        this.isOsmCache = flayer.layerDef.source.isOsmCacheLayer
-        this.features = new UIEventSource<Feature[]>([])
-        this.LoadJSONFrom(url)
+        const eventsource = new UIEventSource<Feature[]>(undefined)
+        if (options?.isActive !== undefined) {
+            options.isActive.addCallbackAndRunD(async (active) => {
+                if (!active) {
+                    return
+                }
+                this.LoadJSONFrom(url, eventsource, layer)
+                    .then((_) => console.log("Loaded geojson " + url))
+                    .catch((err) => console.error("Could not load ", url, "due to", err))
+                return true
+            })
+        } else {
+            this.LoadJSONFrom(url, eventsource, layer)
+                .then((_) => console.log("Loaded geojson " + url))
+                .catch((err) => console.error("Could not load ", url, "due to", err))
+        }
+        this.features = eventsource
     }
 
-    private LoadJSONFrom(url: string) {
-        const eventSource = this.features
+    private async LoadJSONFrom(
+        url: string,
+        eventSource: UIEventSource<Feature[]>,
+        layer: LayerConfig
+    ): Promise<void> {
         const self = this
-        Utils.downloadJsonCached(url, 60 * 60)
-            .then((json) => {
-                self.state.setData("loaded")
-                // TODO: move somewhere else, just for testing
-                // Check for maproulette data
-                if (url.startsWith("https://maproulette.org/api/v2/tasks/box/")) {
-                    console.log("MapRoulette data detected")
-                    const data = json
-                    let maprouletteFeatures: any[] = []
-                    data.forEach((element) => {
-                        maprouletteFeatures.push({
-                            type: "Feature",
-                            geometry: {
-                                type: "Point",
-                                coordinates: [element.point.lng, element.point.lat],
-                            },
-                            properties: {
-                                // Map all properties to the feature
-                                ...element,
-                            },
-                        })
-                    })
-                    json.features = maprouletteFeatures
+        let json = await Utils.downloadJsonCached(url, 60 * 60)
+
+        if (json.features === undefined || json.features === null) {
+            json.features = []
+        }
+
+        if (layer.source.mercatorCrs) {
+            json = GeoOperations.GeoJsonToWGS84(json)
+        }
+
+        const time = new Date()
+        const newFeatures: Feature[] = []
+        let i = 0
+        let skipped = 0
+        for (const feature of json.features) {
+            const props = feature.properties
+            for (const key in props) {
+                if (props[key] === null) {
+                    delete props[key]
                 }
 
-                if (json.features === undefined || json.features === null) {
-                    return
+                if (typeof props[key] !== "string") {
+                    // Make sure all the values are string, it crashes stuff otherwise
+                    props[key] = JSON.stringify(props[key])
                 }
+            }
 
-                if (self.layer.layerDef.source.mercatorCrs) {
-                    json = GeoOperations.GeoJsonToWGS84(json)
-                }
+            if (self.idKey !== undefined) {
+                props.id = props[self.idKey]
+            }
 
-                const time = new Date()
-                const newFeatures: Feature[] = []
-                let i = 0
-                let skipped = 0
-                for (const feature of json.features) {
-                    const props = feature.properties
-                    for (const key in props) {
-                        if (props[key] === null) {
-                            delete props[key]
-                        }
+            if (props.id === undefined) {
+                props.id = url + "/" + i
+                feature.id = url + "/" + i
+                i++
+            }
+            if (self.seenids.has(props.id)) {
+                skipped++
+                continue
+            }
+            self.seenids.add(props.id)
 
-                        if (typeof props[key] !== "string") {
-                            // Make sure all the values are string, it crashes stuff otherwise
-                            props[key] = JSON.stringify(props[key])
-                        }
-                    }
+            let freshness: Date = time
+            if (feature.properties["_last_edit:timestamp"] !== undefined) {
+                freshness = new Date(props["_last_edit:timestamp"])
+            }
 
-                    if (self.idKey !== undefined) {
-                        props.id = props[self.idKey]
-                    }
+            newFeatures.push(feature)
+        }
 
-                    if (props.id === undefined) {
-                        props.id = url + "/" + i
-                        feature.id = url + "/" + i
-                        i++
-                    }
-                    if (self.seenids.has(props.id)) {
-                        skipped++
-                        continue
-                    }
-                    self.seenids.add(props.id)
-
-                    let freshness: Date = time
-                    if (feature.properties["_last_edit:timestamp"] !== undefined) {
-                        freshness = new Date(props["_last_edit:timestamp"])
-                    }
-
-                    newFeatures.push(feature)
-                }
-
-                if (newFeatures.length == 0) {
-                    return
-                }
-
-                eventSource.setData(eventSource.data.concat(newFeatures))
-            })
-            .catch((msg) => {
-                console.debug("Could not load geojson layer", url, "due to", msg)
-                self.state.setData({ error: msg })
-            })
+        eventSource.setData(newFeatures)
     }
 }

Logic/FeatureSource/Sources/SimpleFeatureSource.ts

@@ -4,16 +4,12 @@ import { FeatureSourceForLayer, Tiled } from "../FeatureSource"
 import { BBox } from "../../BBox"
 import { Feature } from "geojson"
 
-export default class SimpleFeatureSource implements FeatureSourceForLayer, Tiled {
+export default class SimpleFeatureSource implements FeatureSourceForLayer {
     public readonly features: UIEventSource<Feature[]>
     public readonly layer: FilteredLayer
-    public readonly bbox: BBox = BBox.global
-    public readonly tileIndex: number
 
-    constructor(layer: FilteredLayer, tileIndex: number, featureSource?: UIEventSource<Feature[]>) {
+    constructor(layer: FilteredLayer, featureSource?: UIEventSource<Feature[]>) {
         this.layer = layer
-        this.tileIndex = tileIndex ?? 0
-        this.bbox = BBox.fromTileIndex(this.tileIndex)
         this.features = featureSource ?? new UIEventSource<Feature[]>([])
     }
 }

Logic/FeatureSource/TileFreshnessCalculator.ts

@@ -1,64 +0,0 @@
-import { Tiles } from "../../Models/TileRange"
-
-export default class TileFreshnessCalculator {
-    /**
-     * All the freshnesses per tile index
-     * @private
-     */
-    private readonly freshnesses = new Map<number, Date>()
-
-    /**
-     * Marks that some data got loaded for this layer
-     * @param tileId
-     * @param freshness
-     */
-    public addTileLoad(tileId: number, freshness: Date) {
-        const existingFreshness = this.freshnessFor(...Tiles.tile_from_index(tileId))
-        if (existingFreshness >= freshness) {
-            return
-        }
-        this.freshnesses.set(tileId, freshness)
-
-        // Do we have freshness for the neighbouring tiles? If so, we can mark the tile above as loaded too!
-        let [z, x, y] = Tiles.tile_from_index(tileId)
-        if (z === 0) {
-            return
-        }
-        x = x - (x % 2) // Make the tiles always even
-        y = y - (y % 2)
-
-        const ul = this.freshnessFor(z, x, y)?.getTime()
-        if (ul === undefined) {
-            return
-        }
-        const ur = this.freshnessFor(z, x + 1, y)?.getTime()
-        if (ur === undefined) {
-            return
-        }
-        const ll = this.freshnessFor(z, x, y + 1)?.getTime()
-        if (ll === undefined) {
-            return
-        }
-        const lr = this.freshnessFor(z, x + 1, y + 1)?.getTime()
-        if (lr === undefined) {
-            return
-        }
-
-        const leastFresh = Math.min(ul, ur, ll, lr)
-        const date = new Date()
-        date.setTime(leastFresh)
-        this.addTileLoad(Tiles.tile_index(z - 1, Math.floor(x / 2), Math.floor(y / 2)), date)
-    }
-
-    public freshnessFor(z: number, x: number, y: number): Date {
-        if (z < 0) {
-            return undefined
-        }
-        const tileId = Tiles.tile_index(z, x, y)
-        if (this.freshnesses.has(tileId)) {
-            return this.freshnesses.get(tileId)
-        }
-        // recurse up
-        return this.freshnessFor(z - 1, Math.floor(x / 2), Math.floor(y / 2))
-    }
-}

Logic/FeatureSource/TiledFeatureSource/DynamicGeoJsonTileSource.ts

@@ -1,23 +1,24 @@
-import FilteredLayer from "../../../Models/FilteredLayer"
-import { FeatureSourceForLayer, Tiled } from "../FeatureSource"
-import { UIEventSource } from "../../UIEventSource"
+import { Store } from "../../UIEventSource"
 import DynamicTileSource from "./DynamicTileSource"
 import { Utils } from "../../../Utils"
 import GeoJsonSource from "../Sources/GeoJsonSource"
 import { BBox } from "../../BBox"
+import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
 
 export default class DynamicGeoJsonTileSource extends DynamicTileSource {
     private static whitelistCache = new Map<string, any>()
 
     constructor(
-        layer: FilteredLayer,
-        registerLayer: (layer: FeatureSourceForLayer & Tiled) => void,
-        state: {
-            locationControl?: UIEventSource<{ zoom?: number }>
-            currentBounds: UIEventSource<BBox>
+        layer: LayerConfig,
+        mapProperties: {
+            zoom: Store<number>
+            bounds: Store<BBox>
+        },
+        options?: {
+            isActive?: Store<boolean>
         }
     ) {
-        const source = layer.layerDef.source
+        const source = layer.source
         if (source.geojsonZoomLevel === undefined) {
             throw "Invalid layer: geojsonZoomLevel expected"
         }
@@ -30,7 +31,7 @@ export default class DynamicGeoJsonTileSource extends DynamicTileSource {
             const whitelistUrl = source.geojsonSource
                 .replace("{z}", "" + source.geojsonZoomLevel)
                 .replace("{x}_{y}.geojson", "overview.json")
-                .replace("{layer}", layer.layerDef.id)
+                .replace("{layer}", layer.id)
 
             if (DynamicGeoJsonTileSource.whitelistCache.has(whitelistUrl)) {
                 whitelist = DynamicGeoJsonTileSource.whitelistCache.get(whitelistUrl)
@@ -56,14 +57,13 @@ export default class DynamicGeoJsonTileSource extends DynamicTileSource {
                         DynamicGeoJsonTileSource.whitelistCache.set(whitelistUrl, whitelist)
                     })
                     .catch((err) => {
-                        console.warn("No whitelist found for ", layer.layerDef.id, err)
+                        console.warn("No whitelist found for ", layer.id, err)
                     })
             }
         }
 
         const blackList = new Set<string>()
         super(
-            layer,
             source.geojsonZoomLevel,
             (zxy) => {
                 if (whitelist !== undefined) {
@@ -78,25 +78,13 @@ export default class DynamicGeoJsonTileSource extends DynamicTileSource {
                     }
                 }
 
-                const src = new GeoJsonSource(layer, zxy, {
+                return new GeoJsonSource(layer, {
+                    zxy,
                     featureIdBlacklist: blackList,
                 })
-
-                registerLayer(src)
-                return src
             },
-            state
+            mapProperties,
+            { isActive: options.isActive }
         )
     }
-
-    public static RegisterWhitelist(url: string, json: any) {
-        const data = new Map<number, Set<number>>()
-        for (const x in json) {
-            if (x === "zoom") {
-                continue
-            }
-            data.set(Number(x), new Set(json[x]))
-        }
-        DynamicGeoJsonTileSource.whitelistCache.set(url, data)
-    }
 }

Logic/FeatureSource/TiledFeatureSource/DynamicTileSource.ts

@@ -1,87 +1,65 @@
-import FilteredLayer from "../../../Models/FilteredLayer"
-import { FeatureSourceForLayer, Tiled } from "../FeatureSource"
-import { UIEventSource } from "../../UIEventSource"
-import TileHierarchy from "./TileHierarchy"
+import { Store, Stores } from "../../UIEventSource"
 import { Tiles } from "../../../Models/TileRange"
 import { BBox } from "../../BBox"
+import FeatureSource from "../FeatureSource"
+import FeatureSourceMerger from "../Sources/FeatureSourceMerger"
 
 /***
  * A tiled source which dynamically loads the required tiles at a fixed zoom level
  */
-export default class DynamicTileSource implements TileHierarchy<FeatureSourceForLayer & Tiled> {
-    public readonly loadedTiles: Map<number, FeatureSourceForLayer & Tiled>
-    private readonly _loadedTiles = new Set<number>()
-
+export default class DynamicTileSource extends FeatureSourceMerger {
     constructor(
-        layer: FilteredLayer,
         zoomlevel: number,
-        constructTile: (zxy: [number, number, number]) => FeatureSourceForLayer & Tiled,
-        state: {
-            currentBounds: UIEventSource<BBox>
-            locationControl?: UIEventSource<{ zoom?: number }>
+        constructSource: (tileIndex) => FeatureSource,
+        mapProperties: {
+            bounds: Store<BBox>
+            zoom: Store<number>
+        },
+        options?: {
+            isActive?: Store<boolean>
         }
     ) {
-        const self = this
-
-        this.loadedTiles = new Map<number, FeatureSourceForLayer & Tiled>()
-        const neededTiles = state.currentBounds
-            .map(
-                (bounds) => {
-                    if (bounds === undefined) {
-                        // We'll retry later
-                        return undefined
-                    }
-
-                    if (!layer.isDisplayed.data && !layer.layerDef.forceLoad) {
-                        // No need to download! - the layer is disabled
-                        return undefined
-                    }
-
-                    if (
-                        state.locationControl?.data?.zoom !== undefined &&
-                        state.locationControl.data.zoom < layer.layerDef.minzoom
-                    ) {
-                        // No need to download! - the layer is disabled
-                        return undefined
-                    }
-
-                    const tileRange = Tiles.TileRangeBetween(
-                        zoomlevel,
-                        bounds.getNorth(),
-                        bounds.getEast(),
-                        bounds.getSouth(),
-                        bounds.getWest()
-                    )
-                    if (tileRange.total > 10000) {
-                        console.error(
-                            "Got a really big tilerange, bounds and location might be out of sync"
+        super()
+        const loadedTiles = new Set<number>()
+        const neededTiles: Store<number[]> = Stores.ListStabilized(
+            mapProperties.bounds
+                .mapD(
+                    (bounds) => {
+                        if (options?.isActive?.data === false) {
+                            // No need to download! - the layer is disabled
+                            return undefined
+                        }
+                        const tileRange = Tiles.TileRangeBetween(
+                            zoomlevel,
+                            bounds.getNorth(),
+                            bounds.getEast(),
+                            bounds.getSouth(),
+                            bounds.getWest()
                         )
-                        return undefined
-                    }
+                        if (tileRange.total > 10000) {
+                            console.error(
+                                "Got a really big tilerange, bounds and location might be out of sync"
+                            )
+                            return undefined
+                        }
 
-                    const needed = Tiles.MapRange(tileRange, (x, y) =>
-                        Tiles.tile_index(zoomlevel, x, y)
-                    ).filter((i) => !self._loadedTiles.has(i))
-                    if (needed.length === 0) {
-                        return undefined
-                    }
-                    return needed
-                },
-                [layer.isDisplayed, state.locationControl]
-            )
-            .stabilized(250)
+                        const needed = Tiles.MapRange(tileRange, (x, y) =>
+                            Tiles.tile_index(zoomlevel, x, y)
+                        ).filter((i) => !loadedTiles.has(i))
+                        if (needed.length === 0) {
+                            return undefined
+                        }
+                        return needed
+                    },
+                    [options?.isActive, mapProperties.zoom]
+                )
+                .stabilized(250)
+        )
 
         neededTiles.addCallbackAndRunD((neededIndexes) => {
-            console.log("Tiled geojson source ", layer.layerDef.id, " needs", neededIndexes)
-            if (neededIndexes === undefined) {
-                return
-            }
             for (const neededIndex of neededIndexes) {
-                self._loadedTiles.add(neededIndex)
-                const src = constructTile(Tiles.tile_from_index(neededIndex))
-                if (src !== undefined) {
-                    self.loadedTiles.set(neededIndex, src)
-                }
+                loadedTiles.add(neededIndex)
+                super.addSource(constructSource(neededIndex))
             }
         })
     }

Logic/FeatureSource/TiledFeatureSource/OsmFeatureSource.ts

@@ -1,93 +1,68 @@
 import { Utils } from "../../../Utils"
 import OsmToGeoJson from "osmtogeojson"
-import StaticFeatureSource from "../Sources/StaticFeatureSource"
-import PerLayerFeatureSourceSplitter from "../PerLayerFeatureSourceSplitter"
-import { Store, UIEventSource } from "../../UIEventSource"
-import FilteredLayer from "../../../Models/FilteredLayer"
-import { FeatureSourceForLayer, Tiled } from "../FeatureSource"
+import { ImmutableStore, Store, UIEventSource } from "../../UIEventSource"
 import { Tiles } from "../../../Models/TileRange"
 import { BBox } from "../../BBox"
-import LayoutConfig from "../../../Models/ThemeConfig/LayoutConfig"
-import { Or } from "../../Tags/Or"
 import { TagsFilter } from "../../Tags/TagsFilter"
 import { OsmObject } from "../../Osm/OsmObject"
-import { FeatureCollection } from "@turf/turf"
+import { Feature } from "geojson"
+import FeatureSourceMerger from "../Sources/FeatureSourceMerger"
 
 /**
  * If a tile is needed (requested via the UIEventSource in the constructor), will download the appropriate tile and pass it via 'handleTile'
  */
-export default class OsmFeatureSource {
-    public readonly isRunning: UIEventSource<boolean> = new UIEventSource<boolean>(false)
-    public readonly downloadedTiles = new Set<number>()
-    public rawDataHandlers: ((osmJson: any, tileId: number) => void)[] = []
+export default class OsmFeatureSource extends FeatureSourceMerger {
+    private readonly _bounds: Store<BBox>
+    private readonly isActive: Store<boolean>
     private readonly _backend: string
-    private readonly filteredLayers: Store<FilteredLayer[]>
-    private readonly handleTile: (fs: FeatureSourceForLayer & Tiled) => void
-    private isActive: Store<boolean>
-    private options: {
-        handleTile: (tile: FeatureSourceForLayer & Tiled) => void
-        isActive: Store<boolean>
-        neededTiles: Store<number[]>
-        markTileVisited?: (tileId: number) => void
-    }
     private readonly allowedTags: TagsFilter
 
+    public readonly isRunning: UIEventSource<boolean> = new UIEventSource<boolean>(false)
+    public rawDataHandlers: ((osmJson: any, tileIndex: number) => void)[] = []
+
+    private readonly _downloadedTiles: Set<number> = new Set<number>()
+    private readonly _downloadedData: Feature[][] = []
     /**
-     *
-     * @param options: allowedFeatures is normally calculated from the layoutToUse
+     * Downloads data directly from the OSM-api within the given bounds.
+     * All features which match the TagsFilter 'allowedFeatures' are kept and converted into geojson
      */
     constructor(options: {
-        handleTile: (tile: FeatureSourceForLayer & Tiled) => void
-        isActive: Store<boolean>
-        neededTiles: Store<number[]>
-        state: {
-            readonly filteredLayers: UIEventSource<FilteredLayer[]>
-            readonly osmConnection: {
-                Backend(): string
-            }
-            readonly layoutToUse?: LayoutConfig
-        }
-        readonly allowedFeatures?: TagsFilter
-        markTileVisited?: (tileId: number) => void
+        bounds: Store<BBox>
+        readonly allowedFeatures: TagsFilter
+        backend?: "https://openstreetmap.org/" | string
+        /**
+         * If given: this featureSwitch will not update if the store contains 'false'
+         */
+        isActive?: Store<boolean>
     }) {
-        this.options = options
-        this._backend = options.state.osmConnection.Backend()
-        this.filteredLayers = options.state.filteredLayers.map((layers) =>
-            layers.filter((layer) => layer.layerDef.source.geojsonSource === undefined)
-        )
-        this.handleTile = options.handleTile
-        this.isActive = options.isActive
-        const self = this
-        options.neededTiles.addCallbackAndRunD((neededTiles) => {
-            self.Update(neededTiles)
-        })
-
-        const neededLayers = (options.state.layoutToUse?.layers ?? [])
-            .filter((layer) => !layer.doNotDownload)
-            .filter(
-                (layer) => layer.source.geojsonSource === undefined || layer.source.isOsmCacheLayer
-            )
-        this.allowedTags =
-            options.allowedFeatures ?? new Or(neededLayers.map((l) => l.source.osmTags))
+        super()
+        this._bounds = options.bounds
+        this.allowedTags = options.allowedFeatures
+        this.isActive = options.isActive ?? new ImmutableStore(true)
+        this._backend = options.backend ?? "https://www.openstreetmap.org"
+        this._bounds.addCallbackAndRunD((bbox) => this.loadData(bbox))
+        console.log("Allowed tags are:", this.allowedTags)
     }
 
-    private async Update(neededTiles: number[]) {
-        if (this.options.isActive?.data === false) {
+    private async loadData(bbox: BBox) {
+        if (this.isActive?.data === false) {
+            console.log("OsmFeatureSource: not triggering: inactive")
             return
         }
 
-        neededTiles = neededTiles.filter((tile) => !this.downloadedTiles.has(tile))
+        const z = 15
+        const neededTiles = Tiles.tileRangeFrom(bbox, z)
 
-        if (neededTiles.length == 0) {
+        if (neededTiles.total == 0) {
             return
         }
 
         this.isRunning.setData(true)
         try {
-            for (const neededTile of neededTiles) {
-                this.downloadedTiles.add(neededTile)
-                await this.LoadTile(...Tiles.tile_from_index(neededTile))
-            }
+            const tileNumbers = Tiles.MapRange(neededTiles, (x, y) => {
+                return Tiles.tile_index(z, x, y)
+            })
+            await Promise.all(tileNumbers.map((i) => this.LoadTile(...Tiles.tile_from_index(i))))
         } catch (e) {
             console.error(e)
         } finally {
@@ -95,6 +70,11 @@ export default class OsmFeatureSource {
         }
     }
 
+    private registerFeatures(features: Feature[]): void {
+        this._downloadedData.push(features)
+        super.addData(this._downloadedData)
+    }
+
     /**
      * The requested tile might only contain part of the relation.
      *
@@ -135,6 +115,11 @@ export default class OsmFeatureSource {
         if (z < 14) {
             throw `Zoom ${z} is too much for OSM to handle! Use a higher zoom level!`
         }
+        const index = Tiles.tile_index(z, x, y)
+        if (this._downloadedTiles.has(index)) {
+            return
+        }
+        this._downloadedTiles.add(index)
 
         const bbox = BBox.fromTile(z, x, y)
         const url = `${this._backend}/api/0.6/map?bbox=${bbox.minLon},${bbox.minLat},${bbox.maxLon},${bbox.maxLat}`
@@ -146,43 +131,28 @@ export default class OsmFeatureSource {
                 this.rawDataHandlers.forEach((handler) =>
                     handler(osmJson, Tiles.tile_index(z, x, y))
                 )
-                const geojson = <FeatureCollection<any, { id: string }>>OsmToGeoJson(
+                let features = <Feature<any, { id: string }>[]>OsmToGeoJson(
                     osmJson,
                     // @ts-ignore
                     {
                         flatProperties: true,
                     }
-                )
+                ).features
 
                 // The geojson contains _all_ features at the given location
                 // We only keep what is needed
 
-                geojson.features = geojson.features.filter((feature) =>
+                features = features.filter((feature) =>
                     this.allowedTags.matchesProperties(feature.properties)
                 )
 
-                for (let i = 0; i < geojson.features.length; i++) {
-                    geojson.features[i] = await this.patchIncompleteRelations(
-                        geojson.features[i],
-                        osmJson
-                    )
+                for (let i = 0; i < features.length; i++) {
+                    features[i] = await this.patchIncompleteRelations(features[i], osmJson)
                 }
-                geojson.features.forEach((f) => {
+                features.forEach((f) => {
                     f.properties["_backend"] = this._backend
                 })
-
-                const index = Tiles.tile_index(z, x, y)
-                new PerLayerFeatureSourceSplitter(
-                    this.filteredLayers,
-                    this.handleTile,
-                    new StaticFeatureSource(geojson.features),
-                    {
-                        tileIndex: index,
-                    }
-                )
-                if (this.options.markTileVisited) {
-                    this.options.markTileVisited(index)
-                }
+                this.registerFeatures(features)
             } catch (e) {
                 console.error(
                     "PANIC: got the tile from the OSM-api, but something crashed handling this tile"
@@ -202,10 +172,12 @@ export default class OsmFeatureSource {
             if (e === "rate limited") {
                 return
             }
-            await this.LoadTile(z + 1, x * 2, y * 2)
-            await this.LoadTile(z + 1, 1 + x * 2, y * 2)
-            await this.LoadTile(z + 1, x * 2, 1 + y * 2)
-            await this.LoadTile(z + 1, 1 + x * 2, 1 + y * 2)
+            await Promise.all([
+                this.LoadTile(z + 1, x * 2, y * 2),
+                this.LoadTile(z + 1, 1 + x * 2, y * 2),
+                this.LoadTile(z + 1, x * 2, 1 + y * 2),
+                this.LoadTile(z + 1, 1 + x * 2, 1 + y * 2),
+            ])
         }
 
         if (error !== undefined) {

Logic/FeatureSource/TiledFeatureSource/TileHierarchy.ts

@@ -1,7 +1,7 @@
 import FeatureSource, { Tiled } from "../FeatureSource"
 import { BBox } from "../../BBox"
 
-export default interface TileHierarchy<T extends FeatureSource & Tiled> {
+export default interface TileHierarchy<T extends FeatureSource> {
     /**
      * A mapping from 'tile_index' to the actual tile featrues
      */