forked from Cutlery/immich
b29c43d86a
* feat(web): bundle and 'sveltify' leaflet * lazy load leaflet components * add correct icon sizes
47 lines
1.0 KiB
Svelte
47 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { onDestroy, onMount } from 'svelte';
|
|
import { Marker, Icon, type LatLngExpression, type Content } 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 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 (popupContent) {
|
|
marker.bindPopup(popupContent);
|
|
} else {
|
|
marker.unbindPopup();
|
|
}
|
|
}
|
|
</script>
|