UX: when clicking on the map, all (way) features within 20px are inspected and the closest one is inspected. Fixes #2261

src/Models/MapProperties.ts

@@ -1,6 +1,7 @@
 import { Store, UIEventSource } from "../Logic/UIEventSource"
 import { BBox } from "../Logic/BBox"
 import { RasterLayerPolygon } from "./RasterLayers"
+import { Feature } from "geojson"
 
 export interface KeyNavigationEvent {
     date: Date
@@ -19,7 +20,10 @@ export interface MapProperties {
     readonly allowRotating: UIEventSource<true | boolean>
     readonly rotation: UIEventSource<number>
     readonly pitch: UIEventSource<number>
-    readonly lastClickLocation: Store<{ lon: number; lat: number }>
+    readonly lastClickLocation: Store<{ lon: number; lat: number ; /**
+         * The nearest feature from a MapComplete layer
+         */
+        nearestFeature?: Feature}>
     readonly allowZooming: UIEventSource<true | boolean>
     readonly useTerrain: Store<boolean>
     readonly showScale: UIEventSource<boolean>

src/Models/ThemeViewState.ts

@@ -178,7 +178,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
         this.map = new UIEventSource<MlMap>(undefined)
         const geolocationState = new GeoLocationState()
         const initial = new InitialMapPositioning(layout, geolocationState)
-        this.mapProperties = new MapLibreAdaptor(this.map, initial)
+        this.mapProperties = new MapLibreAdaptor(this.map, initial, {correctClick: 20})
 
         this.featureSwitchIsTesting = this.featureSwitches.featureSwitchIsTesting
         this.featureSwitchUserbadge = this.featureSwitches.featureSwitchEnableLogin
@@ -554,6 +554,16 @@ export default class ThemeViewState implements SpecialVisualizationState {
         })
     }
 
+    private setSelectedElement(feature: Feature){
+        const current = this.selectedElement.data
+        if(current?.properties?.id !== undefined && current.properties.id === feature.properties.id  ){
+            console.log("Not setting selected, same id", current, feature)
+            return // already set
+        }
+        // this.selectedElement.setData(undefined)
+        this.selectedElement.setData(feature)
+    }
+
     /**
      * Selects the feature that is 'i' closest to the map center
      */
@@ -570,13 +580,11 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 if (!toSelect) {
                     return
                 }
-                this.selectedElement.setData(undefined)
-                this.selectedElement.setData(toSelect)
+                this.setSelectedElement(toSelect)
             })
             return
         }
-        this.selectedElement.setData(undefined)
-        this.selectedElement.setData(toSelect)
+        this.setSelectedElement(toSelect)
     }
 
     private initHotkeys() {
@@ -992,6 +1000,15 @@ export default class ThemeViewState implements SpecialVisualizationState {
             this.userRelatedState.recentlyVisitedSearch.add(r)
         })
 
+        this.mapProperties.lastClickLocation.addCallbackD(lastClick => {
+            if(lastClick.mode !== "left" || !lastClick.nearestFeature){
+                return
+            }
+            const f = lastClick.nearestFeature
+            this.setSelectedElement(f)
+
+        })
+
         this.userRelatedState.showScale.addCallbackAndRun((showScale) => {
             this.mapProperties.showScale.set(showScale)
         })