helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): bundle and 'sveltify' leaflet (#1998)

Browse source 
* feat(web): bundle and 'sveltify' leaflet

* lazy load leaflet components

* add correct icon sizes
This commit is contained in:
Michel Heusschen 2023-03-19 20:06:45 +01:00 • committed by GitHub
parent 7ce64ecf05
commit b29c43d86a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 143 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

46
web/src/lib/components/shared-components/leaflet/marker.svelte Normal file
View file

@ -0,0 +1,46 @@
<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>