From 06363e808ff16fae528d620e16a0972f9f8b5053 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Mon, 30 Sep 2024 12:44:44 +0200
Subject: [PATCH] Feat: add panoramax link to 'browse nearby images'

---
 public/css/index-tailwind-output.css | 20 ++++----
 src/UI/Image/NearbyImages.svelte     | 71 ++++++++++++++--------------
 2 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 790502ded..560839295 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -1462,10 +1462,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   margin-right: 4rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1482,6 +1478,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   margin-bottom: 4rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1698,14 +1698,14 @@ input[type="range"].range-lg::-moz-range-thumb {
   height: 6rem;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
 .h-full {
   height: 100%;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .h-fit {
   height: -webkit-fit-content;
   height: -moz-fit-content;
@@ -2536,6 +2536,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   row-gap: 2rem;
 }
 
+.gap-x-8 {
+  column-gap: 2rem;
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
diff --git a/src/UI/Image/NearbyImages.svelte b/src/UI/Image/NearbyImages.svelte
index ca9f3ceb8..59e5a5041 100644
--- a/src/UI/Image/NearbyImages.svelte
+++ b/src/UI/Image/NearbyImages.svelte
@@ -23,6 +23,7 @@
   import type { LayerConfigJson } from "../../Models/ThemeConfig/Json/LayerConfigJson"
   import { onDestroy } from "svelte"
   import { BBox } from "../../Logic/BBox"
+  import PanoramaxLink from "../BigComponents/PanoramaxLink.svelte"
 
 
   export let tags: UIEventSource<OsmTags>
@@ -37,7 +38,7 @@
   let imagesProvider = state.nearbyImageSearcher
 
   let loadedImages = AllImageProviders.LoadImagesFor(tags).mapD(
-    (loaded) => new Set(loaded.map((img) => img.url))
+    (loaded) => new Set(loaded.map((img) => img.url)),
   )
   let imageState = imagesProvider.getImagesAround(lon, lat)
   let result: Store<P4CPicture[]> = imageState.images.mapD(
@@ -46,22 +47,22 @@
         .filter(
           (p: P4CPicture) =>
             !loadedImages.data.has(p.pictureUrl) && // We don't show any image which is already linked
-            !p.details.isSpherical
+            !p.details.isSpherical,
         )
         .slice(0, 25),
-    [loadedImages]
+    [loadedImages],
   )
 
   let asFeatures = result.map(p4cs => p4cs.map(p4c => (<Feature<Point>>{
     type: "Feature",
     geometry: {
       type: "Point",
-      coordinates: [p4c.coordinates.lng, p4c.coordinates.lat]
+      coordinates: [p4c.coordinates.lng, p4c.coordinates.lat],
     },
     properties: {
       id: p4c.pictureUrl,
-      rotation: p4c.direction
-    }
+      rotation: p4c.direction,
+    },
   })))
 
   let selected = new UIEventSource<P4CPicture>(undefined)
@@ -70,28 +71,28 @@
       type: "Feature",
       geometry: {
         type: "Point",
-        coordinates: [s.coordinates.lng, s.coordinates.lat]
+        coordinates: [s.coordinates.lng, s.coordinates.lat],
       },
       properties: {
         id: s.pictureUrl,
         selected: "yes",
-        rotation: s.direction
-      }
+        rotation: s.direction,
+      },
     }]
   })
 
   let someLoading = imageState.state.mapD((stateRecord) =>
-    Object.values(stateRecord).some((v) => v === "loading")
+    Object.values(stateRecord).some((v) => v === "loading"),
   )
   let errors = imageState.state.mapD((stateRecord) =>
-    Object.keys(stateRecord).filter((k) => stateRecord[k] === "error")
+    Object.keys(stateRecord).filter((k) => stateRecord[k] === "error"),
   )
   let highlighted = new UIEventSource<string>(undefined)
 
   onDestroy(highlighted.addCallbackD(hl => {
       const p4c = result.data?.find(i => i.pictureUrl === hl)
       selected.set(p4c)
-    }
+    },
   ))
 
   let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
@@ -111,28 +112,27 @@
     zoomToFeatures: true,
     onClick: (feature) => {
       highlighted.set(feature.properties.id)
-    }
+    },
   })
 
 
   ShowDataLayer.showMultipleLayers(
     map,
     new StaticFeatureSource([feature]),
-    state.layout.layers
+    state.layout.layers,
   )
 
   onDestroy(
-  asFeatures.addCallbackAndRunD(features => {
-    if(features.length == 0){
-      return
-    }
-    let bbox = BBox.get(features[0])
-    for (const f of features) {
-      bbox = bbox.unionWith(BBox.get(f))
-    }
-    mapProperties.maxbounds.set(bbox.pad(4))
-  })
-
+    asFeatures.addCallbackAndRunD(features => {
+      if (features.length == 0) {
+        return
+      }
+      let bbox = BBox.get(features[0])
+      for (const f of features) {
+        bbox = bbox.unionWith(BBox.get(f))
+      }
+      mapProperties.maxbounds.set(bbox.pad(4))
+    }),
   )
 
   new ShowDataLayer(map, {
@@ -140,12 +140,10 @@
     layer: geocodedImageLayer,
     onClick: (feature) => {
       highlighted.set(feature.properties.id)
-    }
+    },
   })
 
 
-
-
 </script>
 
 <div class="flex flex-col">
@@ -169,13 +167,16 @@
       {/each}
     </div>
   {/if}
-  <span class="self-end pt-2">
-
-  <MapillaryLink
-    large={false}
-    mapProperties={{ zoom: new ImmutableStore(16), location: new ImmutableStore({ lon, lat }) }}
-  />
-  </span>
+  <div class="w-full flex flex-wrap justify-end gap-x-8 pt-2">
+    <PanoramaxLink
+      large={false}
+      mapProperties={{ zoom: new ImmutableStore(16), location: new ImmutableStore({ lon, lat }) }}
+    />
+    <MapillaryLink
+      large={false}
+      mapProperties={{ zoom: new ImmutableStore(16), location: new ImmutableStore({ lon, lat }) }}
+    />
+  </div>
 
 
   <div class="my-2 flex justify-between">