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);
-                    if (oldV.freshness < f.freshness) {
+                    continue;
-                        all[id] = f;
+                }
-                    }
+
+                // 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) {
+                    // Jup, this feature is fresher
+                    all.set(id, f);
+                    somethingChanged = true;
                 }
             }
         }
-        const newList = [];
+        
-        for (const id in all) {
+        if(!somethingChanged){
-            newList.push(all[id]);
+            // We don't bother triggering an update
+            return;
         }
+        
+        const newList = [];
+        all.forEach((value, key) => {
+            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,6 +67,36 @@ export abstract class OsmObject {
         })
     }
 
+    private static ParseObjects(elements: any[]) : OsmObject[]{
+        const objects: OsmObject[] = [];
+        const allNodes: Map<number, OsmNode> = new Map<number, OsmNode>()
+        for (const element of elements) {
+            const type = element.type;
+            const idN = element.id;
+            let osmObject: OsmObject = null
+            switch (type) {
+                case("node"):
+                    const node = new OsmNode(idN);
+                    allNodes.set(idN, node);
+                    osmObject = node
+                    node.SaveExtraData(element);
+                    break;
+                case("way"):
+                    osmObject = new OsmWay(idN);
+                    const nodes = element.nodes.map(i => allNodes.get(i));
+                    osmObject.SaveExtraData(element, nodes)
+                    break;
+                case("relation"):
+                    osmObject = new OsmRelation(idN);
+                    osmObject.SaveExtraData(element, [])
+                    break;
+            }
+            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) {
@@ -77,32 +107,7 @@ export abstract class OsmObject {
         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 objects = OsmObject.ParseObjects(elements)
-            const allNodes: Map<number, OsmNode> = new Map<number, OsmNode>()
-            for (const element of elements) {
-                const type = element.type;
-                const idN = element.id;
-                let osmObject: OsmObject = null
-                switch (type) {
-                    case("node"):
-                        const node = new OsmNode(idN);
-                        allNodes.set(idN, node);
-                        osmObject = node
-                        node.SaveExtraData(element);
-                        break;
-                    case("way"):
-                        osmObject = new OsmWay(idN);
-                        const nodes = element.nodes.map(i => allNodes.get(i));
-                        osmObject.SaveExtraData(element, nodes)
-                        break;
-                    case("relation"):
-                        osmObject = new OsmRelation(idN);
-                        osmObject.SaveExtraData(element, [])
-                        break;
-                }
-                osmObject.LoadData(element)
-                objects.push(osmObject)
-            }
             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

@@ -162,9 +162,8 @@ export default class ShowDataLayer {
         leafletLayer.on("popupopen", () => {
             State.state.selectedElement.setData(feature)
         });
-
+        
         this._popups.set(feature, leafletLayer);
-
     }
 
     private CreateGeojsonLayer(): L.Layer {