Fix zooming behavior

2 files changed, 30 insertions, 16 deletions

diff --git a/geshem.js b/geshem.js
index 5d48290..16bf832 100644
--- a/geshem.js
+++ b/geshem.js
@@ -72,12 +72,20 @@ class GLMap extends React.Component {
 
     this.map.on('zoom', (e) => {
       if (this.map.getZoom() > 7) {
-        this.map.getLayer('radar-140-0').setLayoutProperty('visibility', 'visible')
-        this.map.getLayer('radar-280-0').setLayoutProperty('visibility', 'none')
+        this.map.setPaintProperty('radar-140-' + this.state.slider, 'raster-opacity', 0.85)
+        this.map.setPaintProperty('radar-280-' + this.state.slider, 'raster-opacity', 0)
+        this.setState({
+          'res': '140',
+          'slider': this.state.slider
+        })
       }
       else {
-        this.map.getLayer('radar-140-0').setLayoutProperty('visibility', 'none')
-        this.map.getLayer('radar-280-0').setLayoutProperty('visibility', 'visible')
+        this.map.setPaintProperty('radar-140-' + this.state.slider, 'raster-opacity', 0)
+        this.map.setPaintProperty('radar-280-' + this.state.slider, 'raster-opacity', 0.85)
+        this.setState({
+          'res': '280',
+          'slider': this.state.slider
+        })
       }
     })
 
@@ -97,16 +105,15 @@ class GLMap extends React.Component {
   }
 
   componentWillReceiveProps () {
-    this.map.setPaintProperty('radar-280-' + this.state.slider, 'raster-opacity', 0)
+    this.map.setPaintProperty('radar-' + this.state.res + '-' + this.state.slider, 'raster-opacity', 0)
     this.setState({
-      'res': '280',
+      'res': this.state.res,
       'slider': this.props.slider
     })
   }
 
   componentDidUpdate () {
-    this.map.setPaintProperty('radar-280-' + this.state.slider, 'raster-opacity', 0.85)
-    console.log(this.map.getLayer('radar-280-' + this.props.slider))
+    this.map.setPaintProperty('radar-' + this.state.res + '-' + this.state.slider, 'raster-opacity', 0.85)
   }
 
   componentWillUnmount () {
diff --git a/static/js/bundle.js b/static/js/bundle.js
index b7ea716..7cf4f57 100644
--- a/static/js/bundle.js
+++ b/static/js/bundle.js
@@ -134,11 +134,19 @@
 
 	      this.map.on('zoom', function (e) {
 	        if (_this2.map.getZoom() > 7) {
-	          _this2.map.getLayer('radar-140-0').setLayoutProperty('visibility', 'visible');
-	          _this2.map.getLayer('radar-280-0').setLayoutProperty('visibility', 'none');
+	          _this2.map.setPaintProperty('radar-140-' + _this2.state.slider, 'raster-opacity', 0.85);
+	          _this2.map.setPaintProperty('radar-280-' + _this2.state.slider, 'raster-opacity', 0);
+	          _this2.setState({
+	            'res': '140',
+	            'slider': _this2.state.slider
+	          });
 	        } else {
-	          _this2.map.getLayer('radar-140-0').setLayoutProperty('visibility', 'none');
-	          _this2.map.getLayer('radar-280-0').setLayoutProperty('visibility', 'visible');
+	          _this2.map.setPaintProperty('radar-140-' + _this2.state.slider, 'raster-opacity', 0);
+	          _this2.map.setPaintProperty('radar-280-' + _this2.state.slider, 'raster-opacity', 0.85);
+	          _this2.setState({
+	            'res': '280',
+	            'slider': _this2.state.slider
+	          });
 	        }
 	      });
 
@@ -201,17 +209,16 @@
 	  }, {
 	    key: 'componentWillReceiveProps',
 	    value: function componentWillReceiveProps() {
-	      this.map.setPaintProperty('radar-280-' + this.state.slider, 'raster-opacity', 0);
+	      this.map.setPaintProperty('radar-' + this.state.res + '-' + this.state.slider, 'raster-opacity', 0);
 	      this.setState({
-	        'res': '280',
+	        'res': this.state.res,
 	        'slider': this.props.slider
 	      });
 	    }
 	  }, {
 	    key: 'componentDidUpdate',
 	    value: function componentDidUpdate() {
-	      this.map.setPaintProperty('radar-280-' + this.state.slider, 'raster-opacity', 0.85);
-	      console.log(this.map.getLayer('radar-280-' + this.props.slider));
+	      this.map.setPaintProperty('radar-' + this.state.res + '-' + this.state.slider, 'raster-opacity', 0.85);
 	    }
 	  }, {
 	    key: 'componentWillUnmount',