Search: load the popup of the OSM-object when clicked on the map, also when zoomed out

src/Logic/FeatureSource/Sources/FeatureSourceMerger.ts

@@ -2,14 +2,14 @@ import { Store, UIEventSource } from "../../UIEventSource"
 import { FeatureSource, IndexedFeatureSource, UpdatableFeatureSource } from "../FeatureSource"
 import { Feature } from "geojson"
 import { Utils } from "../../../Utils"
+import { OsmFeature } from "../../../Models/OsmFeature"
 
 /**
  * The featureSourceMerger receives complete geometries from various sources.
  * If multiple sources contain the same object (as determined by 'id'), only one copy of them is retained
  */
 export default class FeatureSourceMerger<Src extends FeatureSource = FeatureSource>
-    implements IndexedFeatureSource
-{
+    implements IndexedFeatureSource {
     public features: UIEventSource<Feature[]> = new UIEventSource([])
     public readonly featuresById: Store<Map<string, Feature>>
     protected readonly _featuresById: UIEventSource<Map<string, Feature>>
@@ -50,6 +50,24 @@ export default class FeatureSourceMerger<Src extends FeatureSource = FeatureSour
         this.addData(sources.map((s) => s.features.data))
     }
 
+    /**
+     * Add the given feature if it isn't in the dictionary yet.
+     * Returns 'true' if this was a previously unseen item.
+     * If the item was already present, nothing will happen
+     */
+    public addItem(f: OsmFeature): boolean {
+        const id = f.properties.id
+
+        const all = this._featuresById.data
+        if (!all.has(id)) {
+            all.set(id, f)
+            this._featuresById.ping()
+            this.features.data.push(f)
+            this.features.ping()
+            return true
+        }
+    }
+
     protected addData(sources: Feature[][]) {
         sources = Utils.NoNull(sources)
         let somethingChanged = false
@@ -103,11 +121,11 @@ export class UpdatableFeatureSourceMerger<
     Src extends UpdatableFeatureSource = UpdatableFeatureSource
 >
     extends FeatureSourceMerger<Src>
-    implements IndexedFeatureSource, UpdatableFeatureSource
-{
+    implements IndexedFeatureSource, UpdatableFeatureSource {
     constructor(...sources: Src[]) {
         super(...sources)
     }
+
     async updateAsync() {
         await Promise.all(this._sources.map((src) => src.updateAsync()))
     }

src/Logic/State/SearchState.ts

@@ -135,12 +135,21 @@ export default class SearchState {
         }
     }
 
-    clickedOnMap(feature: Feature) {
+    async clickedOnMap(feature: Feature) {
         const osmid = feature.properties.osm_id
         const localElement = this.state.indexedFeatures.featuresById.data.get(osmid)
         if (localElement) {
             this.state.selectedElement.set(localElement)
             return
         }
+        // This feature might not be loaded because we zoomed out
+        const object = await this.state.osmObjectDownloader.DownloadObjectAsync(osmid)
+        if(object === "deleted"){
+            return
+        }
+        const f = object.asGeoJson()
+        this.state.indexedFeatures.addItem(f)
+        this.state.featureProperties.trackFeature(f)
+        this.state.selectedElement.set(f)
     }
 }