your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { ContentComponentProps } from '../types';
3 import Map from './Map.svelte';
4 import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
5
6 let { item = $bindable(), isEditing }: ContentComponentProps = $props();
7
8 const mapsUrl = $derived(
9 'https://maps.google.com/maps?q=' +
10 encodeURIComponent(item.cardData.lat + ',' + item.cardData.lon)
11 );
12</script>
13
14<Map bind:item />
15
16{#if item.cardData.linkToGoogleMaps && !isEditing}
17 <a
18 target="_blank"
19 rel="noopener noreferrer"
20 href={mapsUrl}
21 use:qrOverlay={{ context: { title: 'Google Maps' } }}
22 >
23 <div class="absolute inset-0 z-100"></div>
24 <span class="sr-only">open map</span>
25 </a>
26{/if}