diff options
| -rw-r--r-- | geshem.js | 23 | ||||
| -rw-r--r-- | static/js/bundle.js | 23 |
2 files changed, 30 insertions, 16 deletions
@@ -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', |