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:
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

View 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>