your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { Item } from '$lib/types';
3 import { MapLibre, Projection, Marker } from 'svelte-maplibre-gl';
4
5 let { item = $bindable() }: { item: Item } = $props();
6
7 let center = $state({ lng: parseFloat(item.cardData.lon), lat: parseFloat(item.cardData.lat) });
8</script>
9
10<div class="absolute inset-0 isolate h-full w-full">
11 <MapLibre
12 class="h-full w-full"
13 style="https://tiles.openfreemap.org/styles/liberty"
14 zoom={item.cardData.zoom}
15 {center}
16 attributionControl={{ compact: true }}
17 dragPan={false}
18 dragRotate={false}
19 keyboard={false}
20 touchZoomRotate={true}
21 scrollZoom={true}
22 boxZoom={false}
23 pitchWithRotate={false}
24 touchPitch={false}
25 >
26 <Projection type={'globe'} />
27
28 <Marker bind:lnglat={center}>
29 {#snippet content()}
30 <div class="from-accent-400 size-10 rounded-full bg-radial via-transparent p-3">
31 <div class="bg-accent-500 size-4 rounded-full ring-2 ring-white"></div>
32 </div>
33 {/snippet}
34 </Marker>
35 </MapLibre>
36</div>