Fix raster source loading

1 files changed, 43 insertions, 20 deletions

diff --git a/Geshem.vue b/Geshem.vue
index afba8ce..de22c7b 100644
--- a/Geshem.vue
+++ b/Geshem.vue
@@ -11,6 +11,7 @@
 </template>
 
 <script>
+  import axios from 'axios';
   import vueSlider from 'vue-slider-component';
   import mapboxgl from 'mapbox-gl';
   export default {
@@ -20,7 +21,7 @@
     },
     data: function () {
       return {
-        imgs: window.imgs,
+        imgs: null,
         res: 280,
         slider: 7,
         rasterCoords: {
@@ -37,6 +38,7 @@
             [31.93095218, 29.42911589]
           ]
         },
+        mapLoaded: false,
         map: new mapboxgl.Map({
           container: 'map',
           style: 'mapbox://styles/mapbox/dark-v9',
@@ -51,10 +53,12 @@
     },
     computed: {
       date: function () {
+        if (!this.imgs) { return '' };
         var d = this.imgs[this.res][7-this.slider].substr(0, 8);
         return `${d.substr(6, 2)}-${d.substr(4, 2)}-${d.substr(0, 4)}`;
       },
       time: function () {
+        if (!this.imgs) { return '' };
         var t = this.imgs[this.res][7-this.slider].substr(9, 6);
         return `${t.substr(0, 2)}:${t.substr(2, 2)}`;
       },
@@ -62,9 +66,41 @@
         return 7 - this.slider;
       }
     },
-    created: function () {
+    mounted: function () {
       var vm = this;
-      this.map.on('style.load', function () {
+      axios.get('/imgs').then((res) => {
+        vm.imgs = res.data;
+        if (vm.mapLoaded) {
+          vm.loadSources();
+        }
+      })
+    },
+    created: function () {
+      this.initMap();
+    },
+    methods: {
+      initMap: function() {
+        var vm = this;
+        this.map.on('style.load', function () {
+          vm.mapLoaded = true;
+          if (vm.imgs) {
+            vm.loadSources();
+          }
+        });
+        this.map.on('zoom', function () {
+          var zoomIn = vm.map.getZoom() > 7;
+          var from = zoomIn ? '280' : '140';
+          var to = zoomIn ? '140' : '280';
+          if (to != vm.res) {
+            vm.removeRadarLayer(from, vm.curImg);
+            vm.addRadarLayer(to, vm.curImg);
+            vm.res = to;
+          }
+        });
+      },
+      loadSources: function () {
+        // sources are loaded either in mounted() or in after style load in initMap() depending on which happened last
+        var vm = this;
         var i = 0;
         while (i < vm.imgs['140'].length) {
           vm.addRadarSource('140', i, vm.imgs['140'][i++])
@@ -74,24 +110,11 @@
           vm.addRadarSource('280', i, vm.imgs['280'][i++])
         }
         vm.addRadarLayer('280', 0)
-      });
-      this.map.on('zoom', function () {
-        var zoomIn = vm.map.getZoom() > 7;
-        var from = zoomIn ? '280' : '140';
-        var to = zoomIn ? '140' : '280';
-        if (to != vm.res) {
-          console.log(`Zoom event from ${from} to ${to}`);
-          vm.removeRadarLayer(from, vm.curImg);
-          vm.addRadarLayer(to, vm.curImg);
-          vm.res = to;
-        }
-      });
-    },
-    methods: {
+      },
       addRadarSource: function(res, i, url) {
         this.map.addSource(`radar-${res}-${i}`, {
           type: 'image',
-          url: '/static/img/' + url,
+          url: 'http://imgs.geshem.space/' + url,
           coordinates: this.rasterCoords[res]
         })
       },
@@ -111,8 +134,8 @@
     },
     watch: {
       slider: function (to, from) {
-        this.removeRadarLayer(this.res, 7-from);
-        this.addRadarLayer(this.res, 7-to);
+        this.removeRadarLayer(this.res, from);
+        this.addRadarLayer(this.res, to);
       }
     }
   }