<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="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>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>