diff --git a/src/components/MapWebcam.vue b/src/components/MapWebcam.vue
index 4d977fd..e116910 100644
--- a/src/components/MapWebcam.vue
+++ b/src/components/MapWebcam.vue
@@ -6,14 +6,14 @@
-
+{{ webcam.map.clustersize - 1 }}
+ +{{ webcam.clusterSize - 1 }}
{{ title }}
-
- {{ webcam.map.clustersize - 1 }} more webcam{{ webcam.map.clustersize > 2 ? 's' : '' }}
+
+ {{ webcam.clusterSize - 1 }} more webcam{{ webcam.clusterSize > 2 ? 's' : '' }}
zoom in to view
@@ -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: {
diff --git a/src/components/MapWebcams.vue b/src/components/MapWebcams.vue
index 1c12bff..26b2c02 100644
--- a/src/components/MapWebcams.vue
+++ b/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' })
})
}
},