From 20e0c03b39b9a396c9aa3884bcb77bbe574876ec Mon Sep 17 00:00:00 2001
From: Le_Futuriste <mail@matthieubessat.fr>
Date: Fri, 25 Aug 2023 15:19:49 +0200
Subject: [PATCH] feat(web): add link to external map in leaflet popup (#3847)

* feat(web): add link to external map in leaflet popup

Sometimes it's useful to open a geo location to an external map
application to not have to copy the coordinates manually.
Here I put a link to OpenStreetMap because it's what I personally use.
But I known some people would want to use something different. We could
instead link to geohacks (eg. https://geohack.toolforge.org/geohack.php?params=048.861085_N_0002.313158_E_globe:Earth)
or make it a configurable param.

* chore: cleanup

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
---
 .../components/asset-viewer/detail-panel.svelte    | 14 ++++++++++++--
 .../shared-components/leaflet/marker.svelte        | 12 ++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 8d066b4920..c37b28b9a4 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -35,10 +35,13 @@
     const lng = asset.exifInfo?.longitude;
 
     if (lat && lng) {
-      return [lat, lng] as LatLngTuple;
+      return [Number(lat.toFixed(7)), Number(lng.toFixed(7))] as LatLngTuple;
     }
   })();
 
+  $: lat = latlng ? latlng[0] : undefined;
+  $: lng = latlng ? latlng[1] : undefined;
+
   $: people = asset.people || [];
 
   const dispatch = createEventDispatcher();
@@ -259,7 +262,14 @@
             attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
           }}
         />
-        <Marker {latlng} popupContent="{latlng[0].toFixed(7)},{latlng[1].toFixed(7)}" />
+        <Marker {latlng}>
+          <p>
+            {lat}, {lng}
+          </p>
+          <a href="https://www.openstreetmap.org/?mlat={lat}&mlon={lng}&zoom=15#map=15/{lat}/{lng}">
+            Open in OpenStreetMap
+          </a>
+        </Marker>
       </Map>
     {/await}
   </div>
diff --git a/web/src/lib/components/shared-components/leaflet/marker.svelte b/web/src/lib/components/shared-components/leaflet/marker.svelte
index dac3967037..8731e66d04 100644
--- a/web/src/lib/components/shared-components/leaflet/marker.svelte
+++ b/web/src/lib/components/shared-components/leaflet/marker.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
-  import { Marker, Icon, type LatLngExpression, type Content } from 'leaflet';
+  import { Marker, Icon, type LatLngExpression } from 'leaflet';
   import { getMapContext } from './map.svelte';
   import iconUrl from 'leaflet/dist/images/marker-icon.png';
   import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
   import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
 
   export let latlng: LatLngExpression;
-  export let popupContent: Content | undefined = undefined;
+  let popupHTML: string;
   let marker: Marker;
 
   const defaultIcon = new Icon({
@@ -37,10 +37,14 @@
   $: if (marker) {
     marker.setLatLng(latlng);
 
-    if (popupContent) {
-      marker.bindPopup(popupContent);
+    if (popupHTML) {
+      marker.bindPopup(popupHTML);
     } else {
       marker.unbindPopup();
     }
   }
 </script>
+
+<span contenteditable="true" bind:innerHTML={popupHTML} class="hide">
+  <slot />
+</span>