Added Frontend

frontend/components/Map.vue

@@ -0,0 +1,64 @@
+<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>