Coloring of airports

src/renderer/components/FlightgearMap.vue

@@ -17,7 +17,8 @@
         :key="index"
         :lat-lng="[item.geometry.coordinates[1], item.geometry.coordinates[0]]"
         :radius="((item.properties.flights+5)*20)"
-        :color="item.properties.color"
+        :color='item.color'
+        @add="addEvent($event, item)"
         @click="onClick(item)"
       ></l-circle>
     </l-layer-group>
@@ -54,7 +55,7 @@
           let airportsToLoad = this.$store.state.Airports.airports
             .filter(feature => this.visible(feature))
             .map(feature => feature.properties.icao)
-          if (airportsToLoad.length > 0 && airportsToLoad[0] !== this.editingAirport) {
+          if (airportsToLoad.length > 0 && airportsToLoad[0] !== this.editingAirport && this.zoom > 12) {
             this.$refs.editLayer.load(airportsToLoad[0])
             this.$refs.pavementLayer.load(airportsToLoad[0])
             this.editingAirport = airportsToLoad[0]
@@ -62,6 +63,9 @@
           // console.log(this.groundnet)
         }
       })
+      this.$refs.airportLayer.on('add', function (event) {
+        console.log('Add vertex ', event)
+      })
     },
     data () {
       return {
@@ -82,6 +86,17 @@
                   bounds.getSouthWest().lng < Number(coordinates[0])
         return ret && ret2
       },
+      color (item) {
+        console.log(item)
+      },
+      addEvent (event, item) {
+        console.log(event, item)
+        if (item.properties.groundnet === 0) {
+          event.target.setStyle({color: 'red', fillcolor: 'red'})
+        } else if ((item.properties.flights / item.properties.parking) > 10) {
+          event.target.setStyle({color: 'yellow', fillcolor: 'yellow'})
+        }
+      },
       onClick (item) {
         console.log(item)
         this.$store.commit('SET_EDIT_AIRPORT', item)