kopia lustrzana https://github.com/manuelkasper/sotlas-frontend
Switch to Windy v3 webcam API due to upcoming deprecation of v2 API
rodzic
0c6d6f52c7
commit
0434400726
|
@ -6,14 +6,14 @@
|
||||||
<font-awesome-icon icon="circle" />
|
<font-awesome-icon icon="circle" />
|
||||||
<font-awesome-icon :icon="['fas', 'camera-home']" transform="shrink-7 left-0.5" :style="{ color: 'white' }" />
|
<font-awesome-icon :icon="['fas', 'camera-home']" transform="shrink-7 left-0.5" :style="{ color: 'white' }" />
|
||||||
</font-awesome-layers>
|
</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>
|
</div>
|
||||||
<MglPopup :closeButton="false" @added="popupAdded">
|
<MglPopup :closeButton="false" @added="popupAdded">
|
||||||
<div :class="['thumbwrapper', size]">
|
<div :class="['thumbwrapper', size]">
|
||||||
<a :href="thumbnailHref" target="_blank"><img class="thumb" :src="thumbnailSrc" /></a>
|
<a :href="thumbnailHref" target="_blank"><img class="thumb" :src="thumbnailSrc" /></a>
|
||||||
<div class="caption">{{ title }}</div>
|
<div class="caption">{{ title }}</div>
|
||||||
<template v-if="webcam.map.clustersize > 1 && size != 'is-small'">
|
<template v-if="webcam.clusterSize > 1 && size != 'is-small'">
|
||||||
<div class="clustercaption">{{ webcam.map.clustersize - 1 }} more webcam{{ webcam.map.clustersize > 2 ? 's' : '' }}</div>
|
<div class="clustercaption">{{ webcam.clusterSize - 1 }} more webcam{{ webcam.clusterSize > 2 ? 's' : '' }}</div>
|
||||||
<div class="clusterinfo">zoom in to view</div>
|
<div class="clusterinfo">zoom in to view</div>
|
||||||
</template>
|
</template>
|
||||||
<div class="attribution">Webcams provided by <a href="https://www.windy.com/" target="_blank">windy.com</a></div>
|
<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
|
return this.webcam.title
|
||||||
},
|
},
|
||||||
thumbnailSrc () {
|
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 () {
|
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: {
|
methods: {
|
||||||
|
|
|
@ -32,12 +32,41 @@ export default {
|
||||||
},
|
},
|
||||||
loadWebcams () {
|
loadWebcams () {
|
||||||
// Convert MapBox zoom level to Google Maps like zoom level
|
// Convert MapBox zoom level to Google Maps like zoom level
|
||||||
let mapZoom = Math.floor(Math.min(this.map.getZoom() + 2, 22))
|
let mapZoom = Math.floor(Math.min(this.map.getZoom() + 1, 18))
|
||||||
let mapBounds = this.map.getBounds().getNorthEast().lat + ',' + this.map.getBounds().getNorthEast().lng + ',' + this.map.getBounds().getSouthWest().lat + ',' + this.map.getBounds().getSouthWest().lng + ',' + mapZoom
|
|
||||||
|
|
||||||
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 => {
|
.then(response => {
|
||||||
this.webcams = response.data.result.webcams.filter(webcam => { return webcam.status === 'active' })
|
this.webcams = response.data.filter(webcam => { return webcam.status === 'active' })
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Ładowanie…
Reference in New Issue