Vkladani mista na konkretni pozici

src/components/map/MapWrapper.vue

@@ -17,14 +17,19 @@ const props = defineProps({
     type: Array,
     required: false,
     default: () => []
+  },
+  showLayerControls: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 });
 
 const emits = defineEmits(["map-click"]);
 
-
 const key = process.env.GOOGLE_MAPS_API_KEY;
 
+const zoomLevel = ref(null);
 const mapRef = ref(null);
 watch(
   () => mapRef.value?.ready,
@@ -38,6 +43,12 @@ watch(
       }
       mapRef.value.map.fitBounds(bounds);
     }
+    zoomLevel.value = mapRef.value.map.getZoom();
+
+    mapRef.value.map.addListener("zoom_changed", () => {
+      console.log("zoom changed");
+      zoomLevel.value = mapRef.value.map.getZoom();
+    })
   }
 );
 
@@ -45,14 +56,14 @@ watch(
 const displayAirspaceLayers = ref({
   CTR: true,
   TMA: true,
-  RMZ: true,
+  RMZ: false,
   ATZ: true,
-  DANGER: true,
+  DANGER: false,
   PROHIBIT: true,
   RESTRICT: true,
-  TRA: true,
   TRAGA: true,
-  AIRPORTS: true
+  AIRPORTS: true,
+  FIELDSTRIP: false,
 });
 
 const airspaces = computed(() => {
@@ -66,7 +77,8 @@ const airspaces = computed(() => {
     Q: "#FFA500",
     PGZ: "#008000",
     GSEC: "#008000",
-    ATZ: "#4e7cfc"
+    ATZ: "#4e7cfc",
+    FIR: '#ffffff'
   }
 
   return props.airspacesData
@@ -79,6 +91,7 @@ const airspaces = computed(() => {
       if (airspace.type === 'Q') return displayAirspaceLayers.value.DANGER;
       if (airspace.type === 'P') return displayAirspaceLayers.value.PROHIBIT;
       if (airspace.type === 'R') return displayAirspaceLayers.value.RESTRICT;
+      if (airspace.type === 'ATZ') return displayAirspaceLayers.value.ATZ;
       return true;
     })
     .map(airspace => {
@@ -103,9 +116,9 @@ const airspaces = computed(() => {
 });
 
 const airportsOnMap = computed(() => {
-  if (!displayAirspaceLayers.value.AIRPORTS) return [];
+  if (!displayAirspaceLayers.value.AIRPORTS && !displayAirspaceLayers.value.FIELDSTRIP) return [];
 
-  return props.airports.filter(a => a.gpsLatitude && a.gpsLongitude);
+  return props.airports.filter(a => a.gpsLatitude && a.gpsLongitude).filter(a => a.icaoCode.length === 6 ? displayAirspaceLayers.value.FIELDSTRIP : displayAirspaceLayers.value.AIRPORTS);
 });
 
 const {isPointInPolygon, vectorDistanceToKm} = useVectorUtilities();
@@ -137,8 +150,6 @@ const handleAirportClick = (airport) => {
   const position = {lat: airport.gpsLatitude, lng: airport.gpsLongitude};
   emits("map-click", {clickCoordinates: position, airport})
 }
-
-
 </script>
 
 <template>
@@ -147,27 +158,13 @@ const handleAirportClick = (airport) => {
     v-bind="$attrs"
     :street-view-control="false"
     @click="handleMapClick"
-    map-type-id="terrain"
+    map-type-id="roadmap"
     :max-zoom="13"
     ref="mapRef"
   >
-    <CustomControl position="BOTTOM_CENTER" class="text-center">
-      <q-card class="q-my-lg q-px-lg">
-        <q-checkbox v-model="displayAirspaceLayers.CTR" label="M/CTR"/>
-        <q-checkbox v-model="displayAirspaceLayers.TMA" label="TMA"/>
-        <q-checkbox v-model="displayAirspaceLayers.RMZ" label="RMZ"/>
-        <q-checkbox v-model="displayAirspaceLayers.ATZ" label="ATZ"/>
-        <q-checkbox v-model="displayAirspaceLayers.DANGER" label="Nebezpečné prostory"/>
-        <q-checkbox v-model="displayAirspaceLayers.PROHIBIT" label="Zakázané prostory"/>
-        <q-checkbox v-model="displayAirspaceLayers.RESTRICT" label="Omezené prostory (TRA)"/>
-        <q-checkbox v-model="displayAirspaceLayers.TRAGA" label="TRAGA"/>
-        <q-checkbox v-model="displayAirspaceLayers.AIRPORTS" label="Letiště"/>
-      </q-card>
-    </CustomControl>
-
-    <template v-for="airspace in airspaces" :key="airspace">
+    <template v-for="airspace in airspaces" :key="airspace.name">
       <Polygon :options="airspace" @click=handleMapClick v-if="airspace.path"/>
-      <Circle :options="airspace" @click=handleMapClick  v-if="airspace.center && airspace.radius"/>
+      <Circle :options="airspace" @click=handleMapClick v-if="airspace.center && airspace.radius"/>
     </template>
 
     <template v-for="airport in airportsOnMap" :key="airport.icaoCode">
@@ -175,15 +172,26 @@ const handleAirportClick = (airport) => {
         :options="{position: {lat: airport.gpsLatitude, lng: airport.gpsLongitude}, anchorPoint: 'CENTER'}"
         @click.stop="handleAirportClick(airport)"
       >
-        <div class="text-center">
-          <q-icon name="local_airport" style="font-size: 24px" class="text-primary"/>
-          <br>
-          {{ airport.icaoCode }}
-        </div>
+          <q-chip size="xs">{{ airport.icaoCode }}</q-chip>
       </CustomMarker>
     </template>
 
     <slot/>
 
+    <CustomControl position="BOTTOM_CENTER" class="text-center" v-if="showLayerControls">
+      <q-card class="q-my-md q-mx-auto q-px-lg" style="max-width: 98%;">
+        <q-checkbox v-model="displayAirspaceLayers.CTR" label="M/CTR"/>
+        <q-checkbox v-model="displayAirspaceLayers.TMA" label="TMA"/>
+        <q-checkbox v-model="displayAirspaceLayers.RMZ" label="RMZ"/>
+        <q-checkbox v-model="displayAirspaceLayers.ATZ" label="ATZ"/>
+        <q-checkbox v-model="displayAirspaceLayers.DANGER" label="Nebezpečné prostory"/>
+        <q-checkbox v-model="displayAirspaceLayers.PROHIBIT" label="Zakázané prostory"/>
+        <q-checkbox v-model="displayAirspaceLayers.RESTRICT" label="TRA"/>
+        <q-checkbox v-model="displayAirspaceLayers.TRAGA" label="TRAGA"/>
+        <q-checkbox v-model="displayAirspaceLayers.AIRPORTS" label="Letiště"/>
+        <q-checkbox v-model="displayAirspaceLayers.FIELDSTRIP" label="SLZ plochy"/>
+      </q-card>
+    </CustomControl>
+
   </GoogleMap>
 </template>