From ab05979b81b52d029024144bf44cd94e27e4bae8 Mon Sep 17 00:00:00 2001
From: pietervdvn <pietervdvn@posteo.net>
Date: Wed, 13 Oct 2021 17:18:14 +0200
Subject: [PATCH] Fix popup which doesn't show up in the case of duplicate
 elements on the map

---
 UI/ShowDataLayer/ShowDataLayer.ts | 10 +++++++---
 UI/SpecialVisualizations.ts       | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/UI/ShowDataLayer/ShowDataLayer.ts b/UI/ShowDataLayer/ShowDataLayer.ts
index a0244a33f..5e8681bbf 100644
--- a/UI/ShowDataLayer/ShowDataLayer.ts
+++ b/UI/ShowDataLayer/ShowDataLayer.ts
@@ -6,6 +6,7 @@ import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
 import FeatureInfoBox from "../Popup/FeatureInfoBox";
 import State from "../../State";
 import {ShowDataLayerOptions} from "./ShowDataLayerOptions";
+import {FixedUiElement} from "../Base/FixedUiElement";
 
 export default class ShowDataLayer {
 
@@ -28,9 +29,13 @@ export default class ShowDataLayer {
      */
     private readonly leafletLayersPerId = new Map<string, { feature: any, leafletlayer: any }>()
 
+    private readonly showDataLayerid : number;
+    private static dataLayerIds = 0
 
     constructor(options: ShowDataLayerOptions & { layerToShow: LayerConfig }) {
         this._leafletMap = options.leafletMap;
+        this.showDataLayerid = ShowDataLayer.dataLayerIds;
+        ShowDataLayer.dataLayerIds++
         this._enablePopups = options.enablePopups ?? true;
         if (options.features === undefined) {
             throw "Invalid ShowDataLayer invocation"
@@ -221,9 +226,8 @@ export default class ShowDataLayer {
 
         let infobox: FeatureInfoBox = undefined;
 
-        const id = `popup-${feature.properties.id}-${feature.geometry.type}-${this._cleanCount}`
-        popup.setContent(`<div style='height: 65vh' id='${id}'>Popup for ${feature.properties.id} ${feature.geometry.type}</div>`)
-
+        const id = `popup-${feature.properties.id}-${feature.geometry.type}-${this.showDataLayerid}-${this._cleanCount}`
+        popup.setContent(`<div style='height: 65vh' id='${id}'>Popup for ${feature.properties.id} ${feature.geometry.type} ${id} is loading</div>`)
         leafletLayer.on("popupopen", () => {
             if (infobox === undefined) {
                 const tags = State.state.allElements.getEventSourceById(feature.properties.id);
diff --git a/UI/SpecialVisualizations.ts b/UI/SpecialVisualizations.ts
index 3af7df316..24c87b821 100644
--- a/UI/SpecialVisualizations.ts
+++ b/UI/SpecialVisualizations.ts
@@ -502,7 +502,18 @@ There are also some technicalities in your theme to keep in mind:
                     const text = args[2]
                     const autoapply = args[3]?.toLowerCase() === "true"
                     const overwrite = args[4]?.toLowerCase() === "true"
-                    const featureIds : UIEventSource<string[]> = tagsSource.map(tags => JSON.parse(tags[featureIdsKey]))
+                    const featureIds : UIEventSource<string[]> = tagsSource.map(tags => {
+                          const ids =  tags[featureIdsKey]
+                        try{
+                            if(ids === undefined){
+                                return []
+                            }
+                            return JSON.parse(ids);
+                        }catch(e){
+                            console.warn("Could not parse ", ids, "as JSON to extract IDS which should be shown on the map.")
+                            return []
+                        }
+                    })
                     return new MultiApply(
                         {
                             featureIds,