mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web): bundle and 'sveltify' leaflet (#1998)
* feat(web): bundle and 'sveltify' leaflet * lazy load leaflet components * add correct icon sizes
This commit is contained in:
parent
7ce64ecf05
commit
b29c43d86a
6 changed files with 143 additions and 53 deletions
42
web/src/lib/components/shared-components/leaflet/map.svelte
Normal file
42
web/src/lib/components/shared-components/leaflet/map.svelte
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<script lang="ts" context="module">
|
||||
import { createContext } from '$lib/utils/context';
|
||||
|
||||
const { get: getContext, set: setMapContext } = createContext<() => Map>();
|
||||
|
||||
export const getMapContext = () => {
|
||||
const getMap = getContext();
|
||||
return getMap();
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import { Map, type LatLngExpression } from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
|
||||
export let latlng: LatLngExpression;
|
||||
export let zoom: number;
|
||||
let container: HTMLDivElement;
|
||||
let map: Map;
|
||||
|
||||
setMapContext(() => map);
|
||||
|
||||
onMount(() => {
|
||||
if (browser) {
|
||||
map = new Map(container);
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (map) map.remove();
|
||||
});
|
||||
|
||||
$: if (map) map.setView(latlng, zoom);
|
||||
</script>
|
||||
|
||||
<div bind:this={container} class="w-full h-full">
|
||||
{#if map}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue