From 7d6aa9f1de5e0597a1942c0f4b7b97769b727f26 Mon Sep 17 00:00:00 2001
From: Yuval Adam <yuval@y3xz.com>
Date: Sat, 9 Jan 2016 20:37:08 +0200
Subject: Fix performance issues

---
 geshem.js | 39 ++++++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 13 deletions(-)

(limited to 'geshem.js')

diff --git a/geshem.js b/geshem.js
index 9136c52..4e52fd3 100644
--- a/geshem.js
+++ b/geshem.js
@@ -59,14 +59,18 @@ class GLMap extends React.Component {
       "source": 'radar-' + res + '-' + i,
       "type": "raster",
       "paint": {
-          "raster-opacity": 0
-      },
+          "raster-opacity": 0.85
+      }
       // "layout": {
       //     "visibility": "none"
       // }
     })
   }
 
+  _removeRadarLayer (res, i) {
+    this.map.removeLayer('radar-' + res + '-' + i)
+  }
+
   componentDidMount () {
     mapboxgl.accessToken = this.props.token
 
@@ -74,16 +78,20 @@ class GLMap extends React.Component {
 
     this.map.on('zoom', (e) => {
       if (this.map.getZoom() > 7) {
-        this.map.setPaintProperty('radar-140-' + this.state.slider, 'raster-opacity', 0.85)
-        this.map.setPaintProperty('radar-280-' + this.state.slider, 'raster-opacity', 0)
+        // this.map.setPaintProperty('radar-140-' + this.state.slider, 'raster-opacity', 0.85)
+        // this.map.setPaintProperty('radar-280-' + this.state.slider, 'raster-opacity', 0)
+        this._removeRadarLayer('280', this.state.slider)
+        this._addRadarLayer('140', this.state.slider)
         this.setState({
           'res': '140',
           'slider': this.state.slider
         })
       }
       else {
-        this.map.setPaintProperty('radar-140-' + this.state.slider, 'raster-opacity', 0)
-        this.map.setPaintProperty('radar-280-' + this.state.slider, 'raster-opacity', 0.85)
+        // this.map.setPaintProperty('radar-140-' + this.state.slider, 'raster-opacity', 0)
+        // this.map.setPaintProperty('radar-280-' + this.state.slider, 'raster-opacity', 0.85)
+        this._removeRadarLayer('140', this.state.slider)
+        this._addRadarLayer('280', this.state.slider)
         this.setState({
           'res': '280',
           'slider': this.state.slider
@@ -94,22 +102,27 @@ class GLMap extends React.Component {
     this.map.on('style.load', () => {
       var i = 0;
       for (let v of window.imgs['140']) {
-        this._addRadarSource('140', i, v)
-        this._addRadarLayer('140', i++)
+        this._addRadarSource('140', i++, v)
+        // this._addRadarLayer('140', i++)
       }
 
       i = 0;
       for (let v of window.imgs['280']) {
-        this._addRadarSource('280', i, v)
-        this._addRadarLayer('280', i++)
+        this._addRadarSource('280', i++, v)
+        // this._addRadarLayer('280', i++)
       }
-      this.map.setPaintProperty('radar-280-0', 'raster-opacity', 0.85)
+      // this.map.setPaintProperty('radar-280-0', 'raster-opacity', 0.85)
+      this._addRadarLayer('280', '0')
     })
   }
 
   componentWillReceiveProps (props) {
-    this.map.setPaintProperty('radar-' + this.state.res + '-' + this.state.slider, 'raster-opacity', 0)
-    this.map.setPaintProperty('radar-' + this.state.res + '-' + props.slider, 'raster-opacity', 0.85)
+    // this.map.setPaintProperty('radar-' + this.state.res + '-' + this.state.slider, 'raster-opacity', 0)
+    // this.map.setPaintProperty('radar-' + this.state.res + '-' + props.slider, 'raster-opacity', 0.85)
+
+    this._removeRadarLayer(this.state.res, this.state.slider)
+    this._addRadarLayer(this.state.res, props.slider)
+
     this.setState({
       'res': this.state.res,
       'slider': props.slider
-- 
cgit v1.3.1