Component refactoring, slider works

4 files changed, 91 insertions, 78 deletions

diff --git a/Geshem.vue b/Geshem.vue
index 44a233d..897f88f 100644
--- a/Geshem.vue
+++ b/Geshem.vue
@@ -1,22 +1,92 @@
 <template>
   <div id="geshem">
-    <h1>Hello World</h1>
+    <div id="date">14-10-2017</div>
+    <div id="time">21:58</div>
     <vue-slider ref="slider" v-model="slider" :min=1 :max=7></vue-slider>
   </div>
 </template>
 
 <script>
   import vueSlider from 'vue-slider-component';
+  import mapboxgl from 'mapbox-gl';
   export default {
     name: 'geshem',
+    components: {
+      'vue-slider': vueSlider
+    },
     data: function () {
       return {
-        slider: 7
+        imgs: window.imgs,
+        res: 280,
+        slider: 7,
+        rasterCoords: {
+          140: [
+            [33.35317413, 33.27232471],
+            [36.32243686, 33.27232471],
+            [36.32243686, 30.72293428],
+            [33.35317413, 30.72293428]
+          ],
+          280: [
+            [31.93095218, 34.5156862],
+            [37.86644267, 34.5156862],
+            [37.86644267, 29.42911589],
+            [31.93095218, 29.42911589]
+          ]
+        },
+        map: new mapboxgl.Map({
+          container: 'map',
+          style: 'mapbox://styles/mapbox/dark-v9',
+          container: 'map',
+          maxZoom: 10,
+          minZoom: 5,
+          zoom: 6.3,
+          center: [35, 31.9],
+          hash: false
+        })
       }
     },
-    components: {
-      'vue-slider': vueSlider
+    created: function () {
+      var vm = this;
+      this.map.on('style.load', function () {
+        var i = 0;
+        while (i < vm.imgs['140'].length) {
+          vm.addRadarSource('140', i, vm.imgs['140'][i++])
+        }
+        var i = 0;
+        while (i < vm.imgs['280'].length) {
+          vm.addRadarSource('280', i, vm.imgs['280'][i++])
+        }
+        vm.addRadarLayer('280', 0)
+      })
     },
+    methods: {
+      addRadarSource: function(res, i, url) {
+        this.map.addSource('radar-' + res + '-' + i, {
+          type: 'image',
+          url: '/static/img/' + url,
+          coordinates: this.rasterCoords[res]
+        })
+      },
+      addRadarLayer: function(res, i) {
+        this.map.addLayer({
+          id: 'radar-' + res + '-' + i,
+          source: 'radar-' + res + '-' + i,
+          type: 'raster',
+          paint: {
+            'raster-opacity': 0.85
+          }
+        })
+      },
+      removeRadarLayer: function(res, i) {
+        this.map.removeLayer('radar-' + res + '-' + i)
+      }
+    },
+    watch: {
+      slider: function (to, from) {
+        this.removeRadarLayer(this.res, 7-from);
+        this.addRadarLayer(this.res, 7-to);
+      }
+    }
   }
 </script>
 
@@ -24,4 +94,12 @@
   #geshem {
     position: absolute;
   }
+  #date {
+    color: white;
+    font-size: 1.2em;
+  }
+  #time {
+    color: white;
+    font-size: 1.6em;
+  }
 </style>
diff --git a/geshem.js b/geshem.js
index 5766887..50ff992 100644
--- a/geshem.js
+++ b/geshem.js
@@ -2,72 +2,9 @@ import mapboxgl from 'mapbox-gl';
 import Vue from 'vue';
 import Geshem from './Geshem.vue';
 
-var app = new Vue({
-  el: '#app',
-  render: h => h(Geshem),
-  data: {
-    imgs: window.imgs,
-    res: 280,
-    rasterCoords: {
-      140: [
-        [33.35317413, 33.27232471],
-        [36.32243686, 33.27232471],
-        [36.32243686, 30.72293428],
-        [33.35317413, 30.72293428]
-      ],
-      280: [
-        [31.93095218, 34.5156862],
-        [37.86644267, 34.5156862],
-        [37.86644267, 29.42911589],
-        [31.93095218, 29.42911589]
-      ]
-    }
-  }
-});
-
 mapboxgl.accessToken = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw';
-var map = new mapboxgl.Map({
-  container: 'map',
-  style: 'mapbox://styles/mapbox/dark-v9',
-  container: 'map',
-  maxZoom: 10,
-  minZoom: 5,
-  zoom: 6.3,
-  center: [35, 31.9],
-  hash: false
-});
-
-function addRadarSource(res, i, url) {
-  map.addSource('radar-' + res + '-' + i, {
-    type: 'image',
-    url: '/static/img/' + url,
-    coordinates: app.rasterCoords[res]
-  })
-}
 
-function addRadarLayer(res, i) {
-  map.addLayer({
-    id: 'radar-' + res + '-' + i,
-    source: 'radar-' + res + '-' + i,
-    type: 'raster',
-    paint: {
-      'raster-opacity': 0.85
-    }
-  })
-}
-
-function removeRadarLayer(res, i) {
-  map.removeLayer('radar-' + res + '-' + i)
-}
-
-map.on('style.load', function () {
-  var i = 0;
-  while (i < app.imgs['140'].length) {
-    addRadarSource('140', i, app.imgs['140'][i++])
-  }
-  var i = 0;
-  while (i < app.imgs['280'].length) {
-    addRadarSource('280', i, app.imgs['280'][i++])
-  }
-  addRadarLayer('280', 0)
-})
+var vm = new Vue({
+  el: '#app',
+  render: h => h(Geshem)
+});
diff --git a/static/js/build.js b/static/js/build.js
index 029533a..70302f0 100644
--- a/static/js/build.js
+++ b/static/js/build.js
@@ -80,7 +80,7 @@ eval("// shim for using process in browser\nvar process = module.exports = {};\n
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("Object.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mapbox_gl__ = __webpack_require__(3);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mapbox_gl___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_mapbox_gl__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_vue__ = __webpack_require__(4);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Geshem_vue__ = __webpack_require__(8);\nvar _ref;\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\nvar app = new __WEBPACK_IMPORTED_MODULE_1_vue__[\"a\" /* default */]({\n  el: '#app',\n  render: function render(h) {\n    return h(__WEBPACK_IMPORTED_MODULE_2__Geshem_vue__[\"a\" /* default */]);\n  },\n  data: {\n    imgs: window.imgs,\n    res: 280,\n    rasterCoords: {\n      140: [[33.35317413, 33.27232471], [36.32243686, 33.27232471], [36.32243686, 30.72293428], [33.35317413, 30.72293428]],\n      280: [[31.93095218, 34.5156862], [37.86644267, 34.5156862], [37.86644267, 29.42911589], [31.93095218, 29.42911589]]\n    }\n  }\n});\n\n__WEBPACK_IMPORTED_MODULE_0_mapbox_gl___default.a.accessToken = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw';\nvar map = new __WEBPACK_IMPORTED_MODULE_0_mapbox_gl___default.a.Map((_ref = {\n  container: 'map',\n  style: 'mapbox://styles/mapbox/dark-v9'\n}, _defineProperty(_ref, 'container', 'map'), _defineProperty(_ref, 'maxZoom', 10), _defineProperty(_ref, 'minZoom', 5), _defineProperty(_ref, 'zoom', 6.3), _defineProperty(_ref, 'center', [35, 31.9]), _defineProperty(_ref, 'hash', false), _ref));\n\nfunction addRadarSource(res, i, url) {\n  map.addSource('radar-' + res + '-' + i, {\n    type: 'image',\n    url: '/static/img/' + url,\n    coordinates: app.rasterCoords[res]\n  });\n}\n\nfunction addRadarLayer(res, i) {\n  map.addLayer({\n    id: 'radar-' + res + '-' + i,\n    source: 'radar-' + res + '-' + i,\n    type: 'raster',\n    paint: {\n      'raster-opacity': 0.85\n    }\n  });\n}\n\nfunction removeRadarLayer(res, i) {\n  map.removeLayer('radar-' + res + '-' + i);\n}\n\nmap.on('style.load', function () {\n  var i = 0;\n  while (i < app.imgs['140'].length) {\n    addRadarSource('140', i, app.imgs['140'][i++]);\n  }\n  var i = 0;\n  while (i < app.imgs['280'].length) {\n    addRadarSource('280', i, app.imgs['280'][i++]);\n  }\n  addRadarLayer('280', 0);\n});\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9nZXNoZW0uanM/MWNhZSJdLCJuYW1lcyI6WyJhcHAiLCJlbCIsInJlbmRlciIsImgiLCJkYXRhIiwiaW1ncyIsIndpbmRvdyIsInJlcyIsInJhc3RlckNvb3JkcyIsIm1hcGJveGdsIiwiYWNjZXNzVG9rZW4iLCJtYXAiLCJNYXAiLCJjb250YWluZXIiLCJzdHlsZSIsImFkZFJhZGFyU291cmNlIiwiaSIsInVybCIsImFkZFNvdXJjZSIsInR5cGUiLCJjb29yZGluYXRlcyIsImFkZFJhZGFyTGF5ZXIiLCJhZGRMYXllciIsImlkIiwic291cmNlIiwicGFpbnQiLCJyZW1vdmVSYWRhckxheWVyIiwicmVtb3ZlTGF5ZXIiLCJvbiIsImxlbmd0aCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUE7QUFDQTtBQUNBOztBQUVBLElBQUlBLE1BQU0sSUFBSSxvREFBSixDQUFRO0FBQ2hCQyxNQUFJLE1BRFk7QUFFaEJDLFVBQVE7QUFBQSxXQUFLQyxFQUFFLDREQUFGLENBQUw7QUFBQSxHQUZRO0FBR2hCQyxRQUFNO0FBQ0pDLFVBQU1DLE9BQU9ELElBRFQ7QUFFSkUsU0FBSyxHQUZEO0FBR0pDLGtCQUFjO0FBQ1osV0FBSyxDQUNILENBQUMsV0FBRCxFQUFjLFdBQWQsQ0FERyxFQUVILENBQUMsV0FBRCxFQUFjLFdBQWQsQ0FGRyxFQUdILENBQUMsV0FBRCxFQUFjLFdBQWQsQ0FIRyxFQUlILENBQUMsV0FBRCxFQUFjLFdBQWQsQ0FKRyxDQURPO0FBT1osV0FBSyxDQUNILENBQUMsV0FBRCxFQUFjLFVBQWQsQ0FERyxFQUVILENBQUMsV0FBRCxFQUFjLFVBQWQsQ0FGRyxFQUdILENBQUMsV0FBRCxFQUFjLFdBQWQsQ0FIRyxFQUlILENBQUMsV0FBRCxFQUFjLFdBQWQsQ0FKRztBQVBPO0FBSFY7QUFIVSxDQUFSLENBQVY7O0FBdUJBLGlEQUFBQyxDQUFTQyxXQUFULEdBQXVCLDBGQUF2QjtBQUNBLElBQUlDLE1BQU0sSUFBSSxpREFBQUYsQ0FBU0csR0FBYjtBQUNSQyxhQUFXLEtBREg7QUFFUkMsU0FBTztBQUZDLHNDQUdHLEtBSEgsb0NBSUMsRUFKRCxvQ0FLQyxDQUxELGlDQU1GLEdBTkUsbUNBT0EsQ0FBQyxFQUFELEVBQUssSUFBTCxDQVBBLGlDQVFGLEtBUkUsU0FBVjs7QUFXQSxTQUFTQyxjQUFULENBQXdCUixHQUF4QixFQUE2QlMsQ0FBN0IsRUFBZ0NDLEdBQWhDLEVBQXFDO0FBQ25DTixNQUFJTyxTQUFKLENBQWMsV0FBV1gsR0FBWCxHQUFpQixHQUFqQixHQUF1QlMsQ0FBckMsRUFBd0M7QUFDdENHLFVBQU0sT0FEZ0M7QUFFdENGLFNBQUssaUJBQWlCQSxHQUZnQjtBQUd0Q0csaUJBQWFwQixJQUFJUSxZQUFKLENBQWlCRCxHQUFqQjtBQUh5QixHQUF4QztBQUtEOztBQUVELFNBQVNjLGFBQVQsQ0FBdUJkLEdBQXZCLEVBQTRCUyxDQUE1QixFQUErQjtBQUM3QkwsTUFBSVcsUUFBSixDQUFhO0FBQ1hDLFFBQUksV0FBV2hCLEdBQVgsR0FBaUIsR0FBakIsR0FBdUJTLENBRGhCO0FBRVhRLFlBQVEsV0FBV2pCLEdBQVgsR0FBaUIsR0FBakIsR0FBdUJTLENBRnBCO0FBR1hHLFVBQU0sUUFISztBQUlYTSxXQUFPO0FBQ0wsd0JBQWtCO0FBRGI7QUFKSSxHQUFiO0FBUUQ7O0FBRUQsU0FBU0MsZ0JBQVQsQ0FBMEJuQixHQUExQixFQUErQlMsQ0FBL0IsRUFBa0M7QUFDaENMLE1BQUlnQixXQUFKLENBQWdCLFdBQVdwQixHQUFYLEdBQWlCLEdBQWpCLEdBQXVCUyxDQUF2QztBQUNEOztBQUVETCxJQUFJaUIsRUFBSixDQUFPLFlBQVAsRUFBcUIsWUFBWTtBQUMvQixNQUFJWixJQUFJLENBQVI7QUFDQSxTQUFPQSxJQUFJaEIsSUFBSUssSUFBSixDQUFTLEtBQVQsRUFBZ0J3QixNQUEzQixFQUFtQztBQUNqQ2QsbUJBQWUsS0FBZixFQUFzQkMsQ0FBdEIsRUFBeUJoQixJQUFJSyxJQUFKLENBQVMsS0FBVCxFQUFnQlcsR0FBaEIsQ0FBekI7QUFDRDtBQUNELE1BQUlBLElBQUksQ0FBUjtBQUNBLFNBQU9BLElBQUloQixJQUFJSyxJQUFKLENBQVMsS0FBVCxFQUFnQndCLE1BQTNCLEVBQW1DO0FBQ2pDZCxtQkFBZSxLQUFmLEVBQXNCQyxDQUF0QixFQUF5QmhCLElBQUlLLElBQUosQ0FBUyxLQUFULEVBQWdCVyxHQUFoQixDQUF6QjtBQUNEO0FBQ0RLLGdCQUFjLEtBQWQsRUFBcUIsQ0FBckI7QUFDRCxDQVZEIiwiZmlsZSI6IjIuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgbWFwYm94Z2wgZnJvbSAnbWFwYm94LWdsJztcbmltcG9ydCBWdWUgZnJvbSAndnVlJztcbmltcG9ydCBHZXNoZW0gZnJvbSAnLi9HZXNoZW0udnVlJztcblxudmFyIGFwcCA9IG5ldyBWdWUoe1xuICBlbDogJyNhcHAnLFxuICByZW5kZXI6IGggPT4gaChHZXNoZW0pLFxuICBkYXRhOiB7XG4gICAgaW1nczogd2luZG93LmltZ3MsXG4gICAgcmVzOiAyODAsXG4gICAgcmFzdGVyQ29vcmRzOiB7XG4gICAgICAxNDA6IFtcbiAgICAgICAgWzMzLjM1MzE3NDEzLCAzMy4yNzIzMjQ3MV0sXG4gICAgICAgIFszNi4zMjI0MzY4NiwgMzMuMjcyMzI0NzFdLFxuICAgICAgICBbMzYuMzIyNDM2ODYsIDMwLjcyMjkzNDI4XSxcbiAgICAgICAgWzMzLjM1MzE3NDEzLCAzMC43MjI5MzQyOF1cbiAgICAgIF0sXG4gICAgICAyODA6IFtcbiAgICAgICAgWzMxLjkzMDk1MjE4LCAzNC41MTU2ODYyXSxcbiAgICAgICAgWzM3Ljg2NjQ0MjY3LCAzNC41MTU2ODYyXSxcbiAgICAgICAgWzM3Ljg2NjQ0MjY3LCAyOS40MjkxMTU4OV0sXG4gICAgICAgIFszMS45MzA5NTIxOCwgMjkuNDI5MTE1ODldXG4gICAgICBdXG4gICAgfVxuICB9XG59KTtcblxubWFwYm94Z2wuYWNjZXNzVG9rZW4gPSAncGsuZXlKMUlqb2llWFYyWVdSdElpd2lZU0k2SW1OcGNuTXhiekJ1YVRBd1pXZG9hMjVvY3pselpta3diSGNpZlEuVUh0TG5nYkttOU84OTQ1cEptMjNOdyc7XG52YXIgbWFwID0gbmV3IG1hcGJveGdsLk1hcCh7XG4gIGNvbnRhaW5lcjogJ21hcCcsXG4gIHN0eWxlOiAnbWFwYm94Oi8vc3R5bGVzL21hcGJveC9kYXJrLXY5JyxcbiAgY29udGFpbmVyOiAnbWFwJyxcbiAgbWF4Wm9vbTogMTAsXG4gIG1pblpvb206IDUsXG4gIHpvb206IDYuMyxcbiAgY2VudGVyOiBbMzUsIDMxLjldLFxuICBoYXNoOiBmYWxzZVxufSk7XG5cbmZ1bmN0aW9uIGFkZFJhZGFyU291cmNlKHJlcywgaSwgdXJsKSB7XG4gIG1hcC5hZGRTb3VyY2UoJ3JhZGFyLScgKyByZXMgKyAnLScgKyBpLCB7XG4gICAgdHlwZTogJ2ltYWdlJyxcbiAgICB1cmw6ICcvc3RhdGljL2ltZy8nICsgdXJsLFxuICAgIGNvb3JkaW5hdGVzOiBhcHAucmFzdGVyQ29vcmRzW3Jlc11cbiAgfSlcbn1cblxuZnVuY3Rpb24gYWRkUmFkYXJMYXllcihyZXMsIGkpIHtcbiAgbWFwLmFkZExheWVyKHtcbiAgICBpZDogJ3JhZGFyLScgKyByZXMgKyAnLScgKyBpLFxuICAgIHNvdXJjZTogJ3JhZGFyLScgKyByZXMgKyAnLScgKyBpLFxuICAgIHR5cGU6ICdyYXN0ZXInLFxuICAgIHBhaW50OiB7XG4gICAgICAncmFzdGVyLW9wYWNpdHknOiAwLjg1XG4gICAgfVxuICB9KVxufVxuXG5mdW5jdGlvbiByZW1vdmVSYWRhckxheWVyKHJlcywgaSkge1xuICBtYXAucmVtb3ZlTGF5ZXIoJ3JhZGFyLScgKyByZXMgKyAnLScgKyBpKVxufVxuXG5tYXAub24oJ3N0eWxlLmxvYWQnLCBmdW5jdGlvbiAoKSB7XG4gIHZhciBpID0gMDtcbiAgd2hpbGUgKGkgPCBhcHAuaW1nc1snMTQwJ10ubGVuZ3RoKSB7XG4gICAgYWRkUmFkYXJTb3VyY2UoJzE0MCcsIGksIGFwcC5pbWdzWycxNDAnXVtpKytdKVxuICB9XG4gIHZhciBpID0gMDtcbiAgd2hpbGUgKGkgPCBhcHAuaW1nc1snMjgwJ10ubGVuZ3RoKSB7XG4gICAgYWRkUmFkYXJTb3VyY2UoJzI4MCcsIGksIGFwcC5pbWdzWycyODAnXVtpKytdKVxuICB9XG4gIGFkZFJhZGFyTGF5ZXIoJzI4MCcsIDApXG59KVxuXG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIC4vZ2VzaGVtLmpzIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///2\n");
+eval("Object.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mapbox_gl__ = __webpack_require__(3);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mapbox_gl___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_mapbox_gl__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_vue__ = __webpack_require__(4);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Geshem_vue__ = __webpack_require__(8);\n\n\n\n\n__WEBPACK_IMPORTED_MODULE_0_mapbox_gl___default.a.accessToken = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw';\n\nvar vm = new __WEBPACK_IMPORTED_MODULE_1_vue__[\"a\" /* default */]({\n  el: '#app',\n  render: function render(h) {\n    return h(__WEBPACK_IMPORTED_MODULE_2__Geshem_vue__[\"a\" /* default */]);\n  }\n});\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9nZXNoZW0uanM/MWNhZSJdLCJuYW1lcyI6WyJtYXBib3hnbCIsImFjY2Vzc1Rva2VuIiwidm0iLCJlbCIsInJlbmRlciIsImgiXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUE7QUFDQTtBQUNBOztBQUVBLGlEQUFBQSxDQUFTQyxXQUFULEdBQXVCLDBGQUF2Qjs7QUFFQSxJQUFJQyxLQUFLLElBQUksb0RBQUosQ0FBUTtBQUNmQyxNQUFJLE1BRFc7QUFFZkMsVUFBUTtBQUFBLFdBQUtDLEVBQUUsNERBQUYsQ0FBTDtBQUFBO0FBRk8sQ0FBUixDQUFUIiwiZmlsZSI6IjIuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgbWFwYm94Z2wgZnJvbSAnbWFwYm94LWdsJztcbmltcG9ydCBWdWUgZnJvbSAndnVlJztcbmltcG9ydCBHZXNoZW0gZnJvbSAnLi9HZXNoZW0udnVlJztcblxubWFwYm94Z2wuYWNjZXNzVG9rZW4gPSAncGsuZXlKMUlqb2llWFYyWVdSdElpd2lZU0k2SW1OcGNuTXhiekJ1YVRBd1pXZG9hMjVvY3pselpta3diSGNpZlEuVUh0TG5nYkttOU84OTQ1cEptMjNOdyc7XG5cbnZhciB2bSA9IG5ldyBWdWUoe1xuICBlbDogJyNhcHAnLFxuICByZW5kZXI6IGggPT4gaChHZXNoZW0pXG59KTtcblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyAuL2dlc2hlbS5qcyJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///2\n");
 
 /***/ }),
 /* 3 */
@@ -130,7 +130,7 @@ eval("// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// lo
 /* 10 */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("exports = module.exports = __webpack_require__(11)(undefined);\n// imports\n\n\n// module\nexports.push([module.i, \"\\n#geshem {\\n  position: absolute;\\n}\\n\", \"\"]);\n\n// exports\n\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9HZXNoZW0udnVlPzU2NTAiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTs7O0FBR0E7QUFDQSxvQ0FBcUMsdUJBQXVCLEdBQUc7O0FBRS9EIiwiZmlsZSI6IjEwLmpzIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0cyA9IG1vZHVsZS5leHBvcnRzID0gcmVxdWlyZShcIi4vbm9kZV9tb2R1bGVzL2Nzcy1sb2FkZXIvbGliL2Nzcy1iYXNlLmpzXCIpKHVuZGVmaW5lZCk7XG4vLyBpbXBvcnRzXG5cblxuLy8gbW9kdWxlXG5leHBvcnRzLnB1c2goW21vZHVsZS5pZCwgXCJcXG4jZ2VzaGVtIHtcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG59XFxuXCIsIFwiXCJdKTtcblxuLy8gZXhwb3J0c1xuXG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gLi9ub2RlX21vZHVsZXMvY3NzLWxvYWRlciEuL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9zdHlsZS1jb21waWxlcj97XCJ2dWVcIjp0cnVlLFwiaWRcIjpcImRhdGEtdi03ZDIyMGFkZVwiLFwic2NvcGVkXCI6ZmFsc2UsXCJoYXNJbmxpbmVDb25maWdcIjpmYWxzZX0hLi9ub2RlX21vZHVsZXMvc2Fzcy1sb2FkZXIvbGliL2xvYWRlci5qcyEuL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9zZWxlY3Rvci5qcz90eXBlPXN0eWxlcyZpbmRleD0wJmJ1c3RDYWNoZSEuL0dlc2hlbS52dWVcbi8vIG1vZHVsZSBpZCA9IDEwXG4vLyBtb2R1bGUgY2h1bmtzID0gMCJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///10\n");
+eval("exports = module.exports = __webpack_require__(11)(undefined);\n// imports\n\n\n// module\nexports.push([module.i, \"\\n#geshem {\\n  position: absolute;\\n}\\n#date {\\n  color: white;\\n  font-size: 1.2em;\\n}\\n#time {\\n  color: white;\\n  font-size: 1.6em;\\n}\\n\", \"\"]);\n\n// exports\n\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9HZXNoZW0udnVlPzU2NTAiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTs7O0FBR0E7QUFDQSxvQ0FBcUMsdUJBQXVCLEdBQUcsU0FBUyxpQkFBaUIscUJBQXFCLEdBQUcsU0FBUyxpQkFBaUIscUJBQXFCLEdBQUc7O0FBRW5LIiwiZmlsZSI6IjEwLmpzIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0cyA9IG1vZHVsZS5leHBvcnRzID0gcmVxdWlyZShcIi4vbm9kZV9tb2R1bGVzL2Nzcy1sb2FkZXIvbGliL2Nzcy1iYXNlLmpzXCIpKHVuZGVmaW5lZCk7XG4vLyBpbXBvcnRzXG5cblxuLy8gbW9kdWxlXG5leHBvcnRzLnB1c2goW21vZHVsZS5pZCwgXCJcXG4jZ2VzaGVtIHtcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG59XFxuI2RhdGUge1xcbiAgY29sb3I6IHdoaXRlO1xcbiAgZm9udC1zaXplOiAxLjJlbTtcXG59XFxuI3RpbWUge1xcbiAgY29sb3I6IHdoaXRlO1xcbiAgZm9udC1zaXplOiAxLjZlbTtcXG59XFxuXCIsIFwiXCJdKTtcblxuLy8gZXhwb3J0c1xuXG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gLi9ub2RlX21vZHVsZXMvY3NzLWxvYWRlciEuL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9zdHlsZS1jb21waWxlcj97XCJ2dWVcIjp0cnVlLFwiaWRcIjpcImRhdGEtdi03ZDIyMGFkZVwiLFwic2NvcGVkXCI6ZmFsc2UsXCJoYXNJbmxpbmVDb25maWdcIjpmYWxzZX0hLi9ub2RlX21vZHVsZXMvc2Fzcy1sb2FkZXIvbGliL2xvYWRlci5qcyEuL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9zZWxlY3Rvci5qcz90eXBlPXN0eWxlcyZpbmRleD0wJmJ1c3RDYWNoZSEuL0dlc2hlbS52dWVcbi8vIG1vZHVsZSBpZCA9IDEwXG4vLyBtb2R1bGUgY2h1bmtzID0gMCJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///10\n");
 
 /***/ }),
 /* 11 */
@@ -161,14 +161,14 @@ eval("/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 featu
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue_slider_component__ = __webpack_require__(7);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue_slider_component___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_vue_slider_component__);\n//\n//\n//\n//\n//\n//\n//\n\n\n/* harmony default export */ __webpack_exports__[\"a\"] = ({\n  name: 'geshem',\n  data: function data() {\n    return {\n      slider: 7\n    };\n  },\n  components: {\n    'vue-slider': __WEBPACK_IMPORTED_MODULE_0_vue_slider_component___default.a\n  }\n});\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vR2VzaGVtLnZ1ZT9jNzg3Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7QUFRQTtBQUNBO1FBRUE7d0JBQ0E7O2NBR0E7QUFGQTtBQUdBOztrQkFHQTtBQUZBO0FBUEEiLCJmaWxlIjoiMTUuanMiLCJzb3VyY2VzQ29udGVudCI6WyI8dGVtcGxhdGU+XG4gIDxkaXYgaWQ9XCJnZXNoZW1cIj5cbiAgICA8aDE+SGVsbG8gV29ybGQ8L2gxPlxuICAgIDx2dWUtc2xpZGVyIHJlZj1cInNsaWRlclwiIHYtbW9kZWw9XCJzbGlkZXJcIiA6bWluPTEgOm1heD03PjwvdnVlLXNsaWRlcj5cbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuICBpbXBvcnQgdnVlU2xpZGVyIGZyb20gJ3Z1ZS1zbGlkZXItY29tcG9uZW50JztcbiAgZXhwb3J0IGRlZmF1bHQge1xuICAgIG5hbWU6ICdnZXNoZW0nLFxuICAgIGRhdGE6IGZ1bmN0aW9uICgpIHtcbiAgICAgIHJldHVybiB7XG4gICAgICAgIHNsaWRlcjogN1xuICAgICAgfVxuICAgIH0sXG4gICAgY29tcG9uZW50czoge1xuICAgICAgJ3Z1ZS1zbGlkZXInOiB2dWVTbGlkZXJcbiAgICB9LFxuICB9XG48L3NjcmlwdD5cblxuPHN0eWxlIGxhbmc9XCJzY3NzXCI+XG4gICNnZXNoZW0ge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgfVxuPC9zdHlsZT5cblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyBHZXNoZW0udnVlP2IzNDYwYjc2Il0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///15\n");
+eval("/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue_slider_component__ = __webpack_require__(7);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue_slider_component___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_vue_slider_component__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_mapbox_gl__ = __webpack_require__(3);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_mapbox_gl___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_mapbox_gl__);\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n/* harmony default export */ __webpack_exports__[\"a\"] = ({\n  name: 'geshem',\n  components: {\n    'vue-slider': __WEBPACK_IMPORTED_MODULE_0_vue_slider_component___default.a\n  },\n  data: function data() {\n    var _ref;\n\n    return {\n      imgs: window.imgs,\n      res: 280,\n      slider: 7,\n      rasterCoords: {\n        140: [[33.35317413, 33.27232471], [36.32243686, 33.27232471], [36.32243686, 30.72293428], [33.35317413, 30.72293428]],\n        280: [[31.93095218, 34.5156862], [37.86644267, 34.5156862], [37.86644267, 29.42911589], [31.93095218, 29.42911589]]\n      },\n      map: new __WEBPACK_IMPORTED_MODULE_1_mapbox_gl___default.a.Map((_ref = {\n        container: 'map',\n        style: 'mapbox://styles/mapbox/dark-v9'\n      }, _defineProperty(_ref, 'container', 'map'), _defineProperty(_ref, 'maxZoom', 10), _defineProperty(_ref, 'minZoom', 5), _defineProperty(_ref, 'zoom', 6.3), _defineProperty(_ref, 'center', [35, 31.9]), _defineProperty(_ref, 'hash', false), _ref))\n    };\n  },\n  created: function created() {\n    var vm = this;\n    this.map.on('style.load', function () {\n      var i = 0;\n      while (i < vm.imgs['140'].length) {\n        vm.addRadarSource('140', i, vm.imgs['140'][i++]);\n      }\n      var i = 0;\n      while (i < vm.imgs['280'].length) {\n        vm.addRadarSource('280', i, vm.imgs['280'][i++]);\n      }\n      vm.addRadarLayer('280', 0);\n    });\n  },\n  methods: {\n    addRadarSource: function addRadarSource(res, i, url) {\n      this.map.addSource('radar-' + res + '-' + i, {\n        type: 'image',\n        url: '/static/img/' + url,\n        coordinates: this.rasterCoords[res]\n      });\n    },\n    addRadarLayer: function addRadarLayer(res, i) {\n      this.map.addLayer({\n        id: 'radar-' + res + '-' + i,\n        source: 'radar-' + res + '-' + i,\n        type: 'raster',\n        paint: {\n          'raster-opacity': 0.85\n        }\n      });\n    },\n    removeRadarLayer: function removeRadarLayer(res, i) {\n      this.map.removeLayer('radar-' + res + '-' + i);\n    }\n  },\n  watch: {\n    slider: function slider(to, from) {\n      this.removeRadarLayer(this.res, 7 - from);\n      this.addRadarLayer(this.res, 7 - to);\n    }\n  }\n});\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vR2VzaGVtLnZ1ZT9hMzZlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7OztBQVNBO0FBQ0E7QUFDQTtRQUVBOztrQkFHQTtBQUZBOztBQUdBOzs7bUJBRUE7V0FDQTtjQUNBOzthQUVBLGVBQ0EsNEJBQ0EsNEJBQ0EsNEJBRUE7YUFDQSxlQUNBLDJCQUNBLDJCQUNBLDRCQUdBO0FBYkE7aUVBY0E7bUJBQ0E7ZUFDQTs0Q0FDQSx5Q0FDQSxzQ0FDQSxrQ0FDQSwyQ0FDQSxzQ0FHQTtBQTVCQTtBQTZCQTs4QkFDQTthQUNBOzBDQUNBO2NBQ0E7d0NBQ0E7bURBQ0E7QUFDQTtjQUNBO3dDQUNBO21EQUNBO0FBQ0E7OEJBQ0E7QUFDQTtBQUNBOzt5REFFQTs7Y0FFQTs4QkFDQTt1Q0FFQTtBQUpBO0FBS0E7a0RBQ0E7O21DQUVBO3VDQUNBO2NBQ0E7OzRCQUlBO0FBSEE7QUFKQTtBQVFBO3dEQUNBO2tEQUNBO0FBRUE7QUFyQkE7O3NDQXVCQTswQ0FDQTt1Q0FDQTtBQUVBO0FBTEE7QUF4RUEiLCJmaWxlIjoiMTUuanMiLCJzb3VyY2VzQ29udGVudCI6WyI8dGVtcGxhdGU+XG4gIDxkaXYgaWQ9XCJnZXNoZW1cIj5cbiAgICA8ZGl2IGlkPVwiZGF0ZVwiPjE0LTEwLTIwMTc8L2Rpdj5cbiAgICA8ZGl2IGlkPVwidGltZVwiPjIxOjU4PC9kaXY+XG4gICAgPHZ1ZS1zbGlkZXIgcmVmPVwic2xpZGVyXCIgdi1tb2RlbD1cInNsaWRlclwiIDptaW49MSA6bWF4PTc+PC92dWUtc2xpZGVyPlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQ+XG4gIGltcG9ydCB2dWVTbGlkZXIgZnJvbSAndnVlLXNsaWRlci1jb21wb25lbnQnO1xuICBpbXBvcnQgbWFwYm94Z2wgZnJvbSAnbWFwYm94LWdsJztcbiAgZXhwb3J0IGRlZmF1bHQge1xuICAgIG5hbWU6ICdnZXNoZW0nLFxuICAgIGNvbXBvbmVudHM6IHtcbiAgICAgICd2dWUtc2xpZGVyJzogdnVlU2xpZGVyXG4gICAgfSxcbiAgICBkYXRhOiBmdW5jdGlvbiAoKSB7XG4gICAgICByZXR1cm4ge1xuICAgICAgICBpbWdzOiB3aW5kb3cuaW1ncyxcbiAgICAgICAgcmVzOiAyODAsXG4gICAgICAgIHNsaWRlcjogNyxcbiAgICAgICAgcmFzdGVyQ29vcmRzOiB7XG4gICAgICAgICAgMTQwOiBbXG4gICAgICAgICAgICBbMzMuMzUzMTc0MTMsIDMzLjI3MjMyNDcxXSxcbiAgICAgICAgICAgIFszNi4zMjI0MzY4NiwgMzMuMjcyMzI0NzFdLFxuICAgICAgICAgICAgWzM2LjMyMjQzNjg2LCAzMC43MjI5MzQyOF0sXG4gICAgICAgICAgICBbMzMuMzUzMTc0MTMsIDMwLjcyMjkzNDI4XVxuICAgICAgICAgIF0sXG4gICAgICAgICAgMjgwOiBbXG4gICAgICAgICAgICBbMzEuOTMwOTUyMTgsIDM0LjUxNTY4NjJdLFxuICAgICAgICAgICAgWzM3Ljg2NjQ0MjY3LCAzNC41MTU2ODYyXSxcbiAgICAgICAgICAgIFszNy44NjY0NDI2NywgMjkuNDI5MTE1ODldLFxuICAgICAgICAgICAgWzMxLjkzMDk1MjE4LCAyOS40MjkxMTU4OV1cbiAgICAgICAgICBdXG4gICAgICAgIH0sXG4gICAgICAgIG1hcDogbmV3IG1hcGJveGdsLk1hcCh7XG4gICAgICAgICAgY29udGFpbmVyOiAnbWFwJyxcbiAgICAgICAgICBzdHlsZTogJ21hcGJveDovL3N0eWxlcy9tYXBib3gvZGFyay12OScsXG4gICAgICAgICAgY29udGFpbmVyOiAnbWFwJyxcbiAgICAgICAgICBtYXhab29tOiAxMCxcbiAgICAgICAgICBtaW5ab29tOiA1LFxuICAgICAgICAgIHpvb206IDYuMyxcbiAgICAgICAgICBjZW50ZXI6IFszNSwgMzEuOV0sXG4gICAgICAgICAgaGFzaDogZmFsc2VcbiAgICAgICAgfSlcbiAgICAgIH1cbiAgICB9LFxuICAgIGNyZWF0ZWQ6IGZ1bmN0aW9uICgpIHtcbiAgICAgIHZhciB2bSA9IHRoaXM7XG4gICAgICB0aGlzLm1hcC5vbignc3R5bGUubG9hZCcsIGZ1bmN0aW9uICgpIHtcbiAgICAgICAgdmFyIGkgPSAwO1xuICAgICAgICB3aGlsZSAoaSA8IHZtLmltZ3NbJzE0MCddLmxlbmd0aCkge1xuICAgICAgICAgIHZtLmFkZFJhZGFyU291cmNlKCcxNDAnLCBpLCB2bS5pbWdzWycxNDAnXVtpKytdKVxuICAgICAgICB9XG4gICAgICAgIHZhciBpID0gMDtcbiAgICAgICAgd2hpbGUgKGkgPCB2bS5pbWdzWycyODAnXS5sZW5ndGgpIHtcbiAgICAgICAgICB2bS5hZGRSYWRhclNvdXJjZSgnMjgwJywgaSwgdm0uaW1nc1snMjgwJ11baSsrXSlcbiAgICAgICAgfVxuICAgICAgICB2bS5hZGRSYWRhckxheWVyKCcyODAnLCAwKVxuICAgICAgfSlcbiAgICB9LFxuICAgIG1ldGhvZHM6IHtcbiAgICAgIGFkZFJhZGFyU291cmNlOiBmdW5jdGlvbihyZXMsIGksIHVybCkge1xuICAgICAgICB0aGlzLm1hcC5hZGRTb3VyY2UoJ3JhZGFyLScgKyByZXMgKyAnLScgKyBpLCB7XG4gICAgICAgICAgdHlwZTogJ2ltYWdlJyxcbiAgICAgICAgICB1cmw6ICcvc3RhdGljL2ltZy8nICsgdXJsLFxuICAgICAgICAgIGNvb3JkaW5hdGVzOiB0aGlzLnJhc3RlckNvb3Jkc1tyZXNdXG4gICAgICAgIH0pXG4gICAgICB9LFxuICAgICAgYWRkUmFkYXJMYXllcjogZnVuY3Rpb24ocmVzLCBpKSB7XG4gICAgICAgIHRoaXMubWFwLmFkZExheWVyKHtcbiAgICAgICAgICBpZDogJ3JhZGFyLScgKyByZXMgKyAnLScgKyBpLFxuICAgICAgICAgIHNvdXJjZTogJ3JhZGFyLScgKyByZXMgKyAnLScgKyBpLFxuICAgICAgICAgIHR5cGU6ICdyYXN0ZXInLFxuICAgICAgICAgIHBhaW50OiB7XG4gICAgICAgICAgICAncmFzdGVyLW9wYWNpdHknOiAwLjg1XG4gICAgICAgICAgfVxuICAgICAgICB9KVxuICAgICAgfSxcbiAgICAgIHJlbW92ZVJhZGFyTGF5ZXI6IGZ1bmN0aW9uKHJlcywgaSkge1xuICAgICAgICB0aGlzLm1hcC5yZW1vdmVMYXllcigncmFkYXItJyArIHJlcyArICctJyArIGkpXG4gICAgICB9XG4gICAgfSxcbiAgICB3YXRjaDoge1xuICAgICAgc2xpZGVyOiBmdW5jdGlvbiAodG8sIGZyb20pIHtcbiAgICAgICAgdGhpcy5yZW1vdmVSYWRhckxheWVyKHRoaXMucmVzLCA3LWZyb20pO1xuICAgICAgICB0aGlzLmFkZFJhZGFyTGF5ZXIodGhpcy5yZXMsIDctdG8pO1xuICAgICAgfVxuICAgIH1cbiAgfVxuPC9zY3JpcHQ+XG5cbjxzdHlsZSBsYW5nPVwic2Nzc1wiPlxuICAjZ2VzaGVtIHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIH1cbiAgI2RhdGUge1xuICAgIGNvbG9yOiB3aGl0ZTtcbiAgICBmb250LXNpemU6IDEuMmVtO1xuICB9XG4gICN0aW1lIHtcbiAgICBjb2xvcjogd2hpdGU7XG4gICAgZm9udC1zaXplOiAxLjZlbTtcbiAgfVxuPC9zdHlsZT5cblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyBHZXNoZW0udnVlPzQ5Y2MzMWUxIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///15\n");
 
 /***/ }),
 /* 16 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    { attrs: { id: \"geshem\" } },\n    [\n      _c(\"h1\", [_vm._v(\"Hello World\")]),\n      _vm._v(\" \"),\n      _c(\"vue-slider\", {\n        ref: \"slider\",\n        attrs: { min: 1, max: 7 },\n        model: {\n          value: _vm.slider,\n          callback: function($$v) {\n            _vm.slider = $$v\n          },\n          expression: \"slider\"\n        }\n      })\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\n/* harmony default export */ __webpack_exports__[\"a\"] = (esExports);\nif (false) {\n  module.hot.accept()\n  if (module.hot.data) {\n    require(\"vue-hot-reload-api\")      .rerender(\"data-v-7d220ade\", esExports)\n  }\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9HZXNoZW0udnVlP2EyMDkiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsS0FBSyxTQUFTLGVBQWUsRUFBRTtBQUMvQjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsZ0JBQWdCLGlCQUFpQjtBQUNqQztBQUNBO0FBQ0E7QUFDQTtBQUNBLFdBQVc7QUFDWDtBQUNBO0FBQ0EsT0FBTztBQUNQO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLGlCQUFpQjtBQUNqQjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSIsImZpbGUiOiIxNi5qcyIsInNvdXJjZXNDb250ZW50IjpbInZhciByZW5kZXIgPSBmdW5jdGlvbigpIHtcbiAgdmFyIF92bSA9IHRoaXNcbiAgdmFyIF9oID0gX3ZtLiRjcmVhdGVFbGVtZW50XG4gIHZhciBfYyA9IF92bS5fc2VsZi5fYyB8fCBfaFxuICByZXR1cm4gX2MoXG4gICAgXCJkaXZcIixcbiAgICB7IGF0dHJzOiB7IGlkOiBcImdlc2hlbVwiIH0gfSxcbiAgICBbXG4gICAgICBfYyhcImgxXCIsIFtfdm0uX3YoXCJIZWxsbyBXb3JsZFwiKV0pLFxuICAgICAgX3ZtLl92KFwiIFwiKSxcbiAgICAgIF9jKFwidnVlLXNsaWRlclwiLCB7XG4gICAgICAgIHJlZjogXCJzbGlkZXJcIixcbiAgICAgICAgYXR0cnM6IHsgbWluOiAxLCBtYXg6IDcgfSxcbiAgICAgICAgbW9kZWw6IHtcbiAgICAgICAgICB2YWx1ZTogX3ZtLnNsaWRlcixcbiAgICAgICAgICBjYWxsYmFjazogZnVuY3Rpb24oJCR2KSB7XG4gICAgICAgICAgICBfdm0uc2xpZGVyID0gJCR2XG4gICAgICAgICAgfSxcbiAgICAgICAgICBleHByZXNzaW9uOiBcInNsaWRlclwiXG4gICAgICAgIH1cbiAgICAgIH0pXG4gICAgXSxcbiAgICAxXG4gIClcbn1cbnZhciBzdGF0aWNSZW5kZXJGbnMgPSBbXVxucmVuZGVyLl93aXRoU3RyaXBwZWQgPSB0cnVlXG52YXIgZXNFeHBvcnRzID0geyByZW5kZXI6IHJlbmRlciwgc3RhdGljUmVuZGVyRm5zOiBzdGF0aWNSZW5kZXJGbnMgfVxuZXhwb3J0IGRlZmF1bHQgZXNFeHBvcnRzXG5pZiAobW9kdWxlLmhvdCkge1xuICBtb2R1bGUuaG90LmFjY2VwdCgpXG4gIGlmIChtb2R1bGUuaG90LmRhdGEpIHtcbiAgICByZXF1aXJlKFwidnVlLWhvdC1yZWxvYWQtYXBpXCIpICAgICAgLnJlcmVuZGVyKFwiZGF0YS12LTdkMjIwYWRlXCIsIGVzRXhwb3J0cylcbiAgfVxufVxuXG5cbi8vLy8vLy8vLy8vLy8vLy8vL1xuLy8gV0VCUEFDSyBGT09URVJcbi8vIC4vbm9kZV9tb2R1bGVzL3Z1ZS1sb2FkZXIvbGliL3RlbXBsYXRlLWNvbXBpbGVyP3tcImlkXCI6XCJkYXRhLXYtN2QyMjBhZGVcIixcImhhc1Njb3BlZFwiOmZhbHNlLFwiYnVibGVcIjp7XCJ0cmFuc2Zvcm1zXCI6e319fSEuL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9zZWxlY3Rvci5qcz90eXBlPXRlbXBsYXRlJmluZGV4PTAmYnVzdENhY2hlIS4vR2VzaGVtLnZ1ZVxuLy8gbW9kdWxlIGlkID0gMTZcbi8vIG1vZHVsZSBjaHVua3MgPSAwIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///16\n");
+eval("var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    { attrs: { id: \"geshem\" } },\n    [\n      _c(\"div\", { attrs: { id: \"date\" } }, [_vm._v(\"14-10-2017\")]),\n      _vm._v(\" \"),\n      _c(\"div\", { attrs: { id: \"time\" } }, [_vm._v(\"21:58\")]),\n      _vm._v(\" \"),\n      _c(\"vue-slider\", {\n        ref: \"slider\",\n        attrs: { min: 1, max: 7 },\n        model: {\n          value: _vm.slider,\n          callback: function($$v) {\n            _vm.slider = $$v\n          },\n          expression: \"slider\"\n        }\n      })\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\n/* harmony default export */ __webpack_exports__[\"a\"] = (esExports);\nif (false) {\n  module.hot.accept()\n  if (module.hot.data) {\n    require(\"vue-hot-reload-api\")      .rerender(\"data-v-7d220ade\", esExports)\n  }\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9HZXNoZW0udnVlP2EyMDkiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsS0FBSyxTQUFTLGVBQWUsRUFBRTtBQUMvQjtBQUNBLGlCQUFpQixTQUFTLGFBQWEsRUFBRTtBQUN6QztBQUNBLGlCQUFpQixTQUFTLGFBQWEsRUFBRTtBQUN6QztBQUNBO0FBQ0E7QUFDQSxnQkFBZ0IsaUJBQWlCO0FBQ2pDO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsV0FBVztBQUNYO0FBQ0E7QUFDQSxPQUFPO0FBQ1A7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsaUJBQWlCO0FBQ2pCO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwiZmlsZSI6IjE2LmpzIiwic291cmNlc0NvbnRlbnQiOlsidmFyIHJlbmRlciA9IGZ1bmN0aW9uKCkge1xuICB2YXIgX3ZtID0gdGhpc1xuICB2YXIgX2ggPSBfdm0uJGNyZWF0ZUVsZW1lbnRcbiAgdmFyIF9jID0gX3ZtLl9zZWxmLl9jIHx8IF9oXG4gIHJldHVybiBfYyhcbiAgICBcImRpdlwiLFxuICAgIHsgYXR0cnM6IHsgaWQ6IFwiZ2VzaGVtXCIgfSB9LFxuICAgIFtcbiAgICAgIF9jKFwiZGl2XCIsIHsgYXR0cnM6IHsgaWQ6IFwiZGF0ZVwiIH0gfSwgW192bS5fdihcIjE0LTEwLTIwMTdcIildKSxcbiAgICAgIF92bS5fdihcIiBcIiksXG4gICAgICBfYyhcImRpdlwiLCB7IGF0dHJzOiB7IGlkOiBcInRpbWVcIiB9IH0sIFtfdm0uX3YoXCIyMTo1OFwiKV0pLFxuICAgICAgX3ZtLl92KFwiIFwiKSxcbiAgICAgIF9jKFwidnVlLXNsaWRlclwiLCB7XG4gICAgICAgIHJlZjogXCJzbGlkZXJcIixcbiAgICAgICAgYXR0cnM6IHsgbWluOiAxLCBtYXg6IDcgfSxcbiAgICAgICAgbW9kZWw6IHtcbiAgICAgICAgICB2YWx1ZTogX3ZtLnNsaWRlcixcbiAgICAgICAgICBjYWxsYmFjazogZnVuY3Rpb24oJCR2KSB7XG4gICAgICAgICAgICBfdm0uc2xpZGVyID0gJCR2XG4gICAgICAgICAgfSxcbiAgICAgICAgICBleHByZXNzaW9uOiBcInNsaWRlclwiXG4gICAgICAgIH1cbiAgICAgIH0pXG4gICAgXSxcbiAgICAxXG4gIClcbn1cbnZhciBzdGF0aWNSZW5kZXJGbnMgPSBbXVxucmVuZGVyLl93aXRoU3RyaXBwZWQgPSB0cnVlXG52YXIgZXNFeHBvcnRzID0geyByZW5kZXI6IHJlbmRlciwgc3RhdGljUmVuZGVyRm5zOiBzdGF0aWNSZW5kZXJGbnMgfVxuZXhwb3J0IGRlZmF1bHQgZXNFeHBvcnRzXG5pZiAobW9kdWxlLmhvdCkge1xuICBtb2R1bGUuaG90LmFjY2VwdCgpXG4gIGlmIChtb2R1bGUuaG90LmRhdGEpIHtcbiAgICByZXF1aXJlKFwidnVlLWhvdC1yZWxvYWQtYXBpXCIpICAgICAgLnJlcmVuZGVyKFwiZGF0YS12LTdkMjIwYWRlXCIsIGVzRXhwb3J0cylcbiAgfVxufVxuXG5cbi8vLy8vLy8vLy8vLy8vLy8vL1xuLy8gV0VCUEFDSyBGT09URVJcbi8vIC4vbm9kZV9tb2R1bGVzL3Z1ZS1sb2FkZXIvbGliL3RlbXBsYXRlLWNvbXBpbGVyP3tcImlkXCI6XCJkYXRhLXYtN2QyMjBhZGVcIixcImhhc1Njb3BlZFwiOmZhbHNlLFwiYnVibGVcIjp7XCJ0cmFuc2Zvcm1zXCI6e319fSEuL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9zZWxlY3Rvci5qcz90eXBlPXRlbXBsYXRlJmluZGV4PTAmYnVzdENhY2hlIS4vR2VzaGVtLnZ1ZVxuLy8gbW9kdWxlIGlkID0gMTZcbi8vIG1vZHVsZSBjaHVua3MgPSAwIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///16\n");
 
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index d2ca23e..f07eb53 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -18,9 +18,7 @@
 <body style="margin: 0;">
   <script>window.imgs = {{ imgs|safe }};</script>
   <div id="map" style="position:absolute; top:0; bottom:0; width:100%;"></div>
-  <div id="app" style="position:absolute;">
-    <root></root>
-  </div>
+  <div id="app" style="position:absolute;"></div>
   <script src="{{ url_for('static', filename='js/build.js') }}"></script>
 </body>
 </html>