37 lines
1.0 KiB
Svelte
37 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import * as L from 'leaflet';
|
|
import 'leaflet/dist/leaflet.css';
|
|
import { onMount, type Snippet } from "svelte";
|
|
import type { SvelteHTMLElements } from "svelte/elements";
|
|
|
|
type Props = {
|
|
x: number,
|
|
y: number,
|
|
children?: Snippet,
|
|
} & SvelteHTMLElements['div']
|
|
|
|
let { x, y, children, ...rest }: Props = $props();
|
|
|
|
let mapDiv: HTMLDivElement;
|
|
let popupDiv: HTMLDivElement;
|
|
let map: L.Map;
|
|
|
|
onMount(() => {
|
|
map = L.map(mapDiv).setView([x, y], 13);
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(map);
|
|
const marker = L.marker([x, y]).addTo(map);
|
|
if (children !== undefined)
|
|
marker.bindPopup(popupDiv, { closeOnClick: false }).openPopup();
|
|
});
|
|
</script>
|
|
|
|
<div bind:this={mapDiv} {...rest}>
|
|
</div>
|
|
<div class="hidden">
|
|
<div bind:this={popupDiv} class="h-full w-full">
|
|
{@render children?.()}
|
|
</div>
|
|
</div> |