selected_element layer which highlights the selected element

UI/Base/MinimapImplementation.ts

@@ -5,7 +5,7 @@ import Loc from "../../Models/Loc"
 import BaseLayer from "../../Models/BaseLayer"
 import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers"
 import * as L from "leaflet"
-import { Map } from "leaflet"
+import {LeafletMouseEvent, Map} from "leaflet"
 import Minimap, { MinimapObj, MinimapOptions } from "./Minimap"
 import { BBox } from "../../Logic/BBox"
 import "leaflet-polylineoffset"
@@ -316,8 +316,10 @@ export default class MinimapImplementation extends BaseUIElement implements Mini
 
         if (this._options.lastClickLocation) {
             const lastClickLocation = this._options.lastClickLocation
-            map.on("click", function (e) {
-                // @ts-ignore
+            map.on("click", function (e: LeafletMouseEvent) {
+                if(e.originalEvent["dismissed"] ){
+                    return
+                }
                 lastClickLocation?.setData({ lat: e.latlng.lat, lon: e.latlng.lng })
             })
 

UI/Base/ScrollableFullScreen.ts

@@ -71,18 +71,22 @@ export default class ScrollableFullScreen {
                 self.Activate()
             } else {
                 // Some cleanup...
+                ScrollableFullScreen.collapse()
 
-                const fs = document.getElementById("fullscreen")
-                if (fs !== null) {
-                    ScrollableFullScreen.empty.AttachTo("fullscreen")
-                    fs.classList.add("hidden")
-                }
-
-                ScrollableFullScreen._currentlyOpen?.isShown?.setData(false)
             }
         })
     }
 
+    public static collapse(){
+        const fs = document.getElementById("fullscreen")
+        if (fs !== null) {
+            ScrollableFullScreen.empty.AttachTo("fullscreen")
+            fs.classList.add("hidden")
+        }
+
+        ScrollableFullScreen._currentlyOpen?.isShown?.setData(false)
+    }
+
     Destroy() {
         this._fullscreencomponent.Destroy()
     }
@@ -99,6 +103,7 @@ export default class ScrollableFullScreen {
         fs.classList.remove("hidden")
     }
 
+
     private BuildComponent(title: BaseUIElement, content: BaseUIElement): BaseUIElement {
         const returnToTheMap = new Combine([
             Svg.back_svg().SetClass("block md:hidden w-12 h-12 p-2 svg-foreground"),

UI/DefaultGUI.ts

@@ -123,6 +123,9 @@ export default class DefaultGUI {
                 addNewPoint,
                 hasPresets ? new AddNewMarker(state.filteredLayers) : noteMarker
             )
+            state.LastClickLocation.addCallbackAndRunD(_ => {
+                ScrollableFullScreen.collapse()
+            })
         }
 
         if (noteLayer !== undefined) {
@@ -153,6 +156,16 @@ export default class DefaultGUI {
             state,
         })
 
+        const selectedElement: FilteredLayer = state.filteredLayers.data.filter(
+            (l) => l.layerDef.id === "selected_element"
+        )[0]
+        new ShowDataLayer({
+            leafletMap: state.leafletMap,
+            layerToShow: selectedElement.layerDef,
+            features: state.selectedElementsLayer,
+            state
+        })
+
         state.leafletMap.addCallbackAndRunD((_) => {
             // Lets assume that all showDataLayers are initialized at this point
             state.selectedElement.ping()

UI/Popup/TagRenderingQuestion.ts

@@ -684,7 +684,6 @@ export default class TagRenderingQuestion extends Combine {
         const tagsData = tags.data
         const feature = state?.allElements?.ContainingFeatures?.get(tagsData.id)
         const center = feature != undefined ? GeoOperations.centerpointCoordinates(feature) : [0, 0]
-        console.log("Creating a tr-question with applicableUnit", applicableUnit)
         const input: InputElement<string> = ValidatedTextField.ForType(
             configuration.freeform.type
         )?.ConstructInputElement({

UI/ShowDataLayer/ShowDataLayerImplementation.ts

@@ -286,7 +286,6 @@ export default class ShowDataLayerImplementation {
         // Leaflet cannot handle geojson points natively
         // We have to convert them to the appropriate icon
         // Click handling is done in the next step
-
         const layer: LayerConfig = this._layerToShow
         if (layer === undefined) {
             return
@@ -337,7 +336,6 @@ export default class ShowDataLayerImplementation {
         const self = this
 
         function activate (event: LeafletMouseEvent) {
-            console.log("Activating!")
             if (infobox === undefined) {
                 const tags =
                     self.allElements?.getEventSourceById(key) ??
@@ -350,6 +348,14 @@ export default class ShowDataLayerImplementation {
                 })
             }
             infobox.Activate()
+            self._selectedElement.setData( self.allElements.ContainingFeatures.get(feature.id) ?? feature )
+            event?.originalEvent?.preventDefault()
+            event?.originalEvent?.stopPropagation()
+            event?.originalEvent?.stopImmediatePropagation()
+            if(event?.originalEvent){
+                // This is a total workaround, as 'preventDefault' and everything above seems to be not working
+                event.originalEvent["dismissed"] = true
+            }
         }
 
         leafletLayer.addEventListener('click', activate)