Stabilize popup

Logic/FeatureSource/FeatureSourceMerger.ts

@@ -21,27 +21,48 @@ export default class FeatureSourceMerger implements FeatureSource {
     }
 
     private Update() {
-        let all = {}; // Mapping 'id' -> {feature, freshness}
+
+        let somethingChanged = false;
+        const all: Map<string, { feature: any, freshness: Date }> = new Map<string, { feature: any; freshness: Date }>();
+        // We seed the dictionary with the previously loaded features
+        const oldValues = this.features.data ?? [];
+        for (const oldValue of oldValues) {
+            all.set(oldValue.feature.id, oldValue)
+        }
+
         for (const source of this._sources) {
             if (source?.features?.data === undefined) {
                 continue;
             }
             for (const f of source.features.data) {
                 const id = f.feature.properties.id;
-                const oldV = all[id];
+                if (!all.has(id)) {
-                if (oldV === undefined) {
+                    // This is a new feature
-                    all[id] = f;
+                    somethingChanged = true;
-                } else {
+                    all.set(id, f);
+                    continue;
+                }
+
+                // 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.freshness < f.freshness) {
-                        all[id] = f;
+                    // Jup, this feature is fresher
+                    all.set(id, f);
+                    somethingChanged = true;
                 }
             }
         }
+        
+        if(!somethingChanged){
+            // We don't bother triggering an update
+            return;
         }
+        
         const newList = [];
-        for (const id in all) {
+        all.forEach((value, key) => {
-            newList.push(all[id]);
+            newList.push(value)
-        }
+        })
         this.features.setData(newList);
     }
 

Logic/FeatureSource/FilteringFeatureSource.ts

@@ -34,7 +34,7 @@ export default class FilteringFeatureSource implements FeatureSource {
             const newFeatures = features.filter(f => {
                 const layerId = f.feature._matching_layer_id;
                 
-                if(selectedElement.data === f.feature){
+                if(selectedElement.data !== undefined && selectedElement.data?.id === f.feature.id){
                     // This is the selected object - it gets a free pass even if zoom is not sufficient
                     return true;
                 }

Logic/FeatureSource/OsmApiFeatureSource.ts

@@ -22,10 +22,8 @@ export default class OsmApiFeatureSource implements FeatureSource {
 
 
     public load(id: string) {
-        console.log("Updating from OSM API: ", id)
         OsmObject.DownloadObject(id, (element, meta) => {
             const geojson = element.asGeoJson();
-            console.warn(geojson)
             geojson.id = geojson.properties.id;
             this.features.setData([{feature: geojson, freshness: meta["_last_edit:timestamp"]}])
         })

Logic/Osm/OsmObject.ts

@@ -67,16 +67,7 @@ export abstract class OsmObject {
         })
     }
 
-    //Loads an area from the OSM-api.
+    private static ParseObjects(elements: any[]) : OsmObject[]{
-    // bounds should be: [[maxlat, minlon], [minlat, maxlon]] (same as Utils.tile_bounds)
-    public static LoadArea(bounds: [[number, number], [number, number]], callback: (objects: OsmObject[]) => void) {
-        const minlon = bounds[0][1]
-        const maxlon = bounds[1][1]
-        const minlat = bounds[1][0]
-        const maxlat = bounds[0][0];
-        const url = `https://www.openstreetmap.org/api/0.6/map.json?bbox=${minlon},${minlat},${maxlon},${maxlat}`
-        $.getJSON(url, data => {
-            const elements: any[] = data.elements;
         const objects: OsmObject[] = [];
         const allNodes: Map<number, OsmNode> = new Map<number, OsmNode>()
         for (const element of elements) {
@@ -103,6 +94,20 @@ export abstract class OsmObject {
             osmObject.LoadData(element)
             objects.push(osmObject)
         }
+        return objects;
+    }
+    
+    //Loads an area from the OSM-api.
+    // bounds should be: [[maxlat, minlon], [minlat, maxlon]] (same as Utils.tile_bounds)
+    public static LoadArea(bounds: [[number, number], [number, number]], callback: (objects: OsmObject[]) => void) {
+        const minlon = bounds[0][1]
+        const maxlon = bounds[1][1]
+        const minlat = bounds[1][0]
+        const maxlat = bounds[0][0];
+        const url = `https://www.openstreetmap.org/api/0.6/map.json?bbox=${minlon},${minlat},${maxlon},${maxlat}`
+        $.getJSON(url, data => {
+            const elements: any[] = data.elements;
+            const objects = OsmObject.ParseObjects(elements)
             callback(objects);
 
         })
@@ -157,10 +162,16 @@ export abstract class OsmObject {
         const full = this.type !== "way" ? "" : "/full";
         const url = "https://www.openstreetmap.org/api/0.6/" + this.type + "/" + this.id + full;
         $.getJSON(url, function (data) {
-                const element = data.elements[data.elements.length - 1];
+            
+                const element = data.elements.pop();
+
+                let nodes = []
+                if(data.elements.length > 2){
+                    nodes = OsmObject.ParseObjects(data.elements)
+                }
                 
                 self.LoadData(element)
-                self.SaveExtraData(element, data.elements);
+                self.SaveExtraData(element, nodes);
 
                 continuation(self, {
                     "_last_edit:contributor": element.user,

Models/Constants.ts

@@ -2,7 +2,7 @@ import { Utils } from "../Utils";
 
 export default class Constants {
     
-    public static vNumber = "0.7.1";
+    public static vNumber = "0.7.1b";
 
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

UI/ShowDataLayer.ts

@@ -164,7 +164,6 @@ export default class ShowDataLayer {
         });
         
         this._popups.set(feature, leafletLayer);
-
     }
 
     private CreateGeojsonLayer(): L.Layer {