self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-26 10:50:29 +02:00
Code Issues Releases Activity

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

Browse Source 
* 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>
This commit is contained in:
Le_Futuriste 2023-08-25 15:19:49 +02:00 committed by GitHub
parent 6d1567cf44
commit 20e0c03b39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/lib/components/asset-viewer/detail-panel.svelte
View File

@ -35,10 +35,13 @@
const lng = asset.exifInfo?.longitude; const lng = asset.exifInfo?.longitude;
if (lat && lng) { 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 || []; $: people = asset.people || [];
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -259,7 +262,14 @@
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', 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> </Map>
{/await} {/await}
</div> </div>

12
web/src/lib/components/shared-components/leaflet/marker.svelte
View File

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { onDestroy, onMount } from 'svelte'; 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 { getMapContext } from './map.svelte';
import iconUrl from 'leaflet/dist/images/marker-icon.png'; import iconUrl from 'leaflet/dist/images/marker-icon.png';
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png'; import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
import shadowUrl from 'leaflet/dist/images/marker-shadow.png'; import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
export let latlng: LatLngExpression; export let latlng: LatLngExpression;
export let popupContent: Content | undefined = undefined; let popupHTML: string;
let marker: Marker; let marker: Marker;
const defaultIcon = new Icon({ const defaultIcon = new Icon({
@ -37,10 +37,14 @@
$: if (marker) { $: if (marker) {
marker.setLatLng(latlng); marker.setLatLng(latlng);
if (popupContent) { if (popupHTML) {
marker.bindPopup(popupContent); marker.bindPopup(popupHTML);
} else { } else {
marker.unbindPopup(); marker.unbindPopup();
} }
} }
</script> </script>
<span contenteditable="true" bind:innerHTML={popupHTML} class="hide">
<slot />
</span>