Feature: show geocoded images on the map when hovered, show interactive minimap on nearbyImages element

src/UI/Image/AttributedImage.svelte

@@ -7,10 +7,12 @@
   import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import { MagnifyingGlassPlusIcon } from "@babeard/svelte-heroicons/outline"
-  import { CloseButton, Modal } from "flowbite-svelte"
+  import { CloseButton } from "flowbite-svelte"
   import ImageOperations from "./ImageOperations.svelte"
   import Popup from "../Base/Popup.svelte"
   import { onDestroy } from "svelte"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import type { Feature, Point } from "geojson"
 
   export let image: Partial<ProvidedImage>
   let fallbackImage: string = undefined
@@ -20,19 +22,43 @@
 
   let imgEl: HTMLImageElement
   export let imgClass: string = undefined
+  export let state: SpecialVisualizationState = undefined
   export let attributionFormat: "minimal" | "medium" | "large" = "medium"
   export let previewedImage: UIEventSource<ProvidedImage>
   export let canZoom = previewedImage !== undefined
   let loaded = false
-  let showBigPreview =  new UIEventSource(false)
-  onDestroy(showBigPreview.addCallbackAndRun(shown=>{
-    if(!shown){
+  let showBigPreview = new UIEventSource(false)
+  onDestroy(showBigPreview.addCallbackAndRun(shown => {
+    if (!shown) {
       previewedImage.set(false)
     }
   }))
   onDestroy(previewedImage.addCallbackAndRun(previewedImage => {
     showBigPreview.set(previewedImage?.id === image.id)
   }))
+
+  function highlight(entered: boolean = true) {
+    if (!entered) {
+      state?.geocodedImages.set([])
+      return
+    }
+    if (isNaN(image.lon) || isNaN(image.lat)) {
+      return
+    }
+    const f: Feature<Point> = {
+      type: "Feature",
+      properties: {
+        id: image.id,
+        rotation: image.rotation
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [image.lon, image.lat]
+      }
+    }
+    console.log(f)
+    state?.geocodedImages.set([f])
+  }
 </script>
 
 <Popup shown={showBigPreview} bodyPadding="p-0" dismissable={true}>
@@ -48,7 +74,10 @@
   </div>
 </Popup>
 <div class="relative shrink-0">
-  <div class="relative w-fit">
+  <div class="relative w-fit"
+       on:mouseenter={() => highlight()}
+       on:mouseleave={() => highlight(false)}
+  >
     <img
       bind:this={imgEl}
       on:load={() => (loaded = true)}
@@ -68,7 +97,7 @@
     {#if canZoom && loaded}
       <div
         class="bg-black-transparent absolute right-0 top-0 rounded-bl-full"
-           on:click={() => previewedImage.set(image)}>
+        on:click={() => previewedImage.set(image)}>
         <MagnifyingGlassPlusIcon class="h-8 w-8 cursor-zoom-in pl-3 pb-3" color="white" />
       </div>
     {/if}