Feature(360): actually show spheres when it is already linked

src/UI/Image/ImageCarousel.svelte

@@ -1,15 +1,30 @@
 <script lang="ts">
   import { Store, UIEventSource } from "../../Logic/UIEventSource.js"
   import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
-  import type { SpecialVisualizationState } from "../SpecialVisualization"
   import DeletableImage from "./DeletableImage.svelte"
   import LoadingPlaceholder from "../Base/LoadingPlaceholder.svelte"
+  import type { Feature, Point } from "geojson"
+  import ThemeViewState from "../../Models/ThemeViewState"
+  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+  import { GeoOperations } from "../../Logic/GeoOperations"
 
   export let images: Store<ProvidedImage[]>
-  export let state: SpecialVisualizationState
+  export let state: ThemeViewState
   export let tags: UIEventSource<Record<string, string>>
-
+  export let feature: Feature
   export let estimated: Store<number>
+  export let layer: LayerConfig
+  let zoomToFeature: Feature<Point> = {
+    type: "Feature",
+    geometry: {
+      type: "Point",
+      coordinates: GeoOperations.centerpointCoordinates(feature)
+    },
+    properties: {
+      name: layer?.title?.GetRenderValue(feature.properties)?.Subs(feature.properties)?.txt ?? feature?.properties?.name,
+      focus: true
+    }
+  }
 </script>
 
 {#if $estimated > 0 && $images.length < 1}
@@ -18,7 +33,7 @@
   <div class="w-full overflow-x-auto" style="scroll-snap-type: x proximity">
     <div class="flex space-x-2">
       {#each $images as image (image.url)}
-        <DeletableImage {image} {state} {tags} />
+        <DeletableImage {image} {state} {tags} nearbyFeatures={[zoomToFeature]} />
       {/each}
     </div>
   </div>