Zakladni vytvareni letu na zaklade planu

src/components/flightPlans/FlightPlanMap.vue

@@ -32,7 +32,7 @@ const emits = defineEmits(["markers-changed", "change-insert-position"]);
 
 const {center} = useGeocode();
 
-const {markerObject, googleMapsMarkerObject, editableNameTypes} = useFlightPlanObjects();
+const {markerObject, googleMapsMarkerObject, googleMapsCustomMarkerObject, editableNameTypes} = useFlightPlanObjects();
 const {getMarkersFrom} = useFlightPlanUtils();
 const {getDuration} = useFlightPlanCalculations();
 
@@ -54,8 +54,8 @@ const trackAids = computed(() => props.flightPlan.track.map(p => ({
     bearing: p.bearing,
     distance: p.distance,
     position: {
-      lat: (p.from.gpsLatitude + p.to.gpsLatitude) / 2,
-      lng: (p.from.gpsLongitude + p.to.gpsLongitude) / 2
+      lat: (p.from.gpsLatitude + p.to?.gpsLatitude) / 2,
+      lng: (p.from.gpsLongitude + p.to?.gpsLongitude) / 2
     }
   }
 )));
@@ -92,6 +92,7 @@ const handleMarkerMove = async (idx, event) => {
 </script>
 
 <template>
+
   <MapWrapper
     ref="mapWrap"
     style="width: 100%; height: 65vh; min-height: 500px"
@@ -130,13 +131,41 @@ const handleMarkerMove = async (idx, event) => {
       </template>
     </template>
 
+    <template v-if="markers.length > 1">
+      <CustomMarker :options="googleMapsCustomMarkerObject(markers[0], 'CENTER')" class="significant-airport">
+        <q-icon name="flight_takeoff"/>
+      </CustomMarker>
+
+      <CustomMarker :options="googleMapsCustomMarkerObject(markers[markers.length - 1], 'CENTER')" class="significant-airport">
+        <q-icon name="flight_land"/>
+      </CustomMarker>
+
+    </template>
+
     <template #layersControlsEnd>
       <q-checkbox v-model="displayTrackAids" label="Zobrazovat navigaci po trase?"/>
     </template>
   </MapWrapper>
 </template>
 
-<style>
+<style lang="scss">
+.significant-airport {
+  position: relative;
+  z-index: 99999;
+  text-align: center;
+  margin-top: -40px;
+
+  .q-icon {
+    color: white;
+    background: #39b6e6;
+    border: solid 1px black;
+    width: 30px;
+    height: 30px;
+    font-size: 20px;
+    border-radius: 50%;
+  }
+}
+
 .track-info {
   background: rgba(128, 128, 128, 0.5);
   color: white;