Help Slideover and trackingtrips

components/Map.vue

@@ -1,13 +1,17 @@
 <script setup>
 
 const props = defineProps({
-  markers: {
+  startMarker: {
+    type: Array,
+    required: true
+  },
+  endMarker: {
     type: Array,
     required: true
   }
 })
 
-const {markers} = props
+const {startMarker,endMarker} = props
 
 const zoom =ref(2)
 
@@ -20,7 +24,7 @@ const zoom =ref(2)
   <div class="h-full w-full">
     <LMap
         style="height: 300px;"
-        :center="markers[0]"
+        :center="startMarker"
         :use-global-leaflet="false"
         :zoom="10"
         ref="map"
@@ -32,10 +36,26 @@ const zoom =ref(2)
           name="OpenStreetMap"
       />
       <LMarker
-          v-for="marker in markers"
-          :lat-lng="marker"
-      />
+          :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>