27 lines
777 B
Vue
27 lines
777 B
Vue
<script setup lang="ts">
|
|
import type { DefaultMarker } from '@/models/Markers';
|
|
import { LMarker, LPopup, LIcon } from '@vue-leaflet/vue-leaflet'
|
|
import type { Marker, PointTuple } from 'leaflet';
|
|
import { computed, ref } from 'vue';
|
|
|
|
defineProps<{
|
|
marker: DefaultMarker
|
|
}>()
|
|
|
|
const iconSize = ref<PointTuple>([38, 38])
|
|
const iconAnchor = computed<PointTuple>(() => [iconSize.value[0] / 2, iconSize.value[1]])
|
|
const popupOffset = [0, iconSize.value[0] * -0.66]
|
|
</script>
|
|
|
|
<template>
|
|
<LMarker :lat-lng="marker.coords">
|
|
<LPopup :options="{ offset: popupOffset, maxWidth: 380, minWidth: 180 }">
|
|
<div class="spacing">
|
|
<h2 class="font-bold text-[1.2em] leading-5">
|
|
{{ marker.title }}
|
|
</h2>
|
|
</div>
|
|
</LPopup>
|
|
</LMarker>
|
|
</template>
|