64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<script setup>
|
|
|
|
const props = defineProps({
|
|
startMarker: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
endMarker: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const {startMarker,endMarker} = props
|
|
|
|
const zoom =ref(2)
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full w-full">
|
|
<LMap
|
|
style="height: 300px;"
|
|
:center="startMarker"
|
|
:use-global-leaflet="false"
|
|
:zoom="10"
|
|
ref="map"
|
|
>
|
|
<LTileLayer
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
attribution="&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors"
|
|
layer-type="base"
|
|
name="OpenStreetMap"
|
|
/>
|
|
<LMarker
|
|
:lat-lng="startMarker"
|
|
>
|
|
<LIcon
|
|
icon-url="https://api.iconify.design/heroicons:map-pin-solid.svg"
|
|
/>
|
|
</LMarker>
|
|
<LMarker
|
|
:lat-lng="endMarker"
|
|
>
|
|
<LIcon
|
|
icon-url="https://api.iconify.design/heroicons:flag-solid.svg"
|
|
/>
|
|
</LMarker>
|
|
</LMap>
|
|
<div class="w-2/3 mx-auto mt-3 flex flex-row justify-between">
|
|
|
|
<p><UIcon name="i-heroicons-map-pin-solid" class="mr-3"/>Start</p>
|
|
|
|
<p><UIcon name="i-heroicons-flag-solid" class="mr-3"/>Ziel</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |