Switch to Windy v3 webcam API due to upcoming deprecation of v2 API

src/components/MapWebcam.vue

@@ -6,14 +6,14 @@
           <font-awesome-icon icon="circle" />
           <font-awesome-icon :icon="['fas', 'camera-home']" transform="shrink-7 left-0.5" :style="{ color: 'white' }" />
         </font-awesome-layers>
-        <div v-if="webcam.map.clustersize > 1" class="clustersize">+{{ webcam.map.clustersize - 1 }}</div>
+        <div v-if="webcam.clusterSize > 1" class="clustersize">+{{ webcam.clusterSize - 1 }}</div>
       </div>
       <MglPopup :closeButton="false" @added="popupAdded">
         <div :class="['thumbwrapper', size]">
           <a :href="thumbnailHref" target="_blank"><img class="thumb" :src="thumbnailSrc" /></a>
           <div class="caption">{{ title }}</div>
-          <template v-if="webcam.map.clustersize > 1 && size != 'is-small'">
-            <div class="clustercaption">{{ webcam.map.clustersize - 1 }} more webcam{{ webcam.map.clustersize > 2 ? 's' : '' }}</div>
+          <template v-if="webcam.clusterSize > 1 && size != 'is-small'">
+            <div class="clustercaption">{{ webcam.clusterSize - 1 }} more webcam{{ webcam.clusterSize > 2 ? 's' : '' }}</div>
             <div class="clusterinfo">zoom in to view</div>
           </template>
           <div class="attribution">Webcams provided by <a href="https://www.windy.com/" target="_blank">windy.com</a></div>
@@ -43,10 +43,10 @@ export default {
       return this.webcam.title
     },
     thumbnailSrc () {
-      return this.$store.state.mapOptions.webcamsType === 'current' ? this.webcam.image.current.preview : this.webcam.image.daylight.preview
+      return this.$store.state.mapOptions.webcamsType === 'current' ? this.webcam.images.current.preview : this.webcam.images.daylight.preview
     },
     thumbnailHref () {
-      return this.$mq.mobile ? this.webcam.url.current.mobile : this.webcam.url.current.desktop
+      return 'https://www.windy.com/webcams/' + this.webcam.webcamId
     }
   },
   methods: {

src/components/MapWebcams.vue

@@ -32,12 +32,41 @@ export default {
     },
     loadWebcams () {
       // Convert MapBox zoom level to Google Maps like zoom level
-      let mapZoom = Math.floor(Math.min(this.map.getZoom() + 2, 22))
-      let mapBounds = this.map.getBounds().getNorthEast().lat + ',' + this.map.getBounds().getNorthEast().lng + ',' + this.map.getBounds().getSouthWest().lat + ',' + this.map.getBounds().getSouthWest().lng + ',' + mapZoom
+      let mapZoom = Math.floor(Math.min(this.map.getZoom() + 1, 18))
 
-      axios.get('https://api.windy.com/api/webcams/v2/map/' + mapBounds, { params: { key: this.windyApiKey, show: 'webcams:location,image,url,map' } })
+      // Windy v3 API has a limit on the latitude/longitude span relative to the zoom level.
+      // Ensure that we are within the limit, lower the zoom level if necessary, otherwise
+      // we will get a 400 response.
+      let latSpan = Math.abs(this.map.getBounds().getNorthEast().lat - this.map.getBounds().getSouthWest().lat)
+      let lngSpan = Math.abs(this.map.getBounds().getNorthEast().lng - this.map.getBounds().getSouthWest().lng)
+      while (mapZoom > 4) {
+        let maxAllowedLatSpan = 22.5 / Math.pow(2, mapZoom - 4)
+        let maxAllowedLngSpan = 45 / Math.pow(2, mapZoom - 4)
+        if (latSpan < maxAllowedLatSpan && lngSpan < maxAllowedLngSpan) {
+          break
+        }
+        mapZoom--
+      }
+
+      if (mapZoom <= 4) {
+        // We have reached the limit of what we can request via the API - so don't request anything
+        this.webcams = []
+        return
+      }
+
+      axios.get('https://api.windy.com/webcams/api/v3/map/clusters', {
+        headers: { 'X-WINDY-API-KEY': this.windyApiKey },
+        params: {
+          northLat: this.map.getBounds().getNorthEast().lat,
+          eastLon: this.map.getBounds().getNorthEast().lng,
+          southLat: this.map.getBounds().getSouthWest().lat,
+          westLon: this.map.getBounds().getSouthWest().lng,
+          zoom: mapZoom,
+          include: 'location,images,urls'
+        }
+      })
         .then(response => {
-          this.webcams = response.data.result.webcams.filter(webcam => { return webcam.status === 'active' })
+          this.webcams = response.data.filter(webcam => { return webcam.status === 'active' })
         })
     }
   },