forked from Cutlery/immich
20e0c03b39
* 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>
51 lines
1.1 KiB
Svelte
51 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { onDestroy, onMount } from 'svelte';
|
|
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;
|
|
let popupHTML: string;
|
|
let marker: Marker;
|
|
|
|
const defaultIcon = new Icon({
|
|
iconUrl,
|
|
iconRetinaUrl,
|
|
shadowUrl,
|
|
|
|
// Default values from Leaflet
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
tooltipAnchor: [16, -28],
|
|
shadowSize: [41, 41],
|
|
});
|
|
const map = getMapContext();
|
|
|
|
onMount(() => {
|
|
marker = new Marker(latlng, {
|
|
icon: defaultIcon,
|
|
}).addTo(map);
|
|
});
|
|
|
|
onDestroy(() => {
|
|
if (marker) marker.remove();
|
|
});
|
|
|
|
$: if (marker) {
|
|
marker.setLatLng(latlng);
|
|
|
|
if (popupHTML) {
|
|
marker.bindPopup(popupHTML);
|
|
} else {
|
|
marker.unbindPopup();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<span contenteditable="true" bind:innerHTML={popupHTML} class="hide">
|
|
<slot />
|
|
</span>
|