From f745a835e841bdb48f36705fe08b7b4209ff37d3 Mon Sep 17 00:00:00 2001 From: Yuval Adam Date: Fri, 8 Jan 2016 19:07:42 +0200 Subject: Fix zooming behavior --- geshem.js | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) (limited to 'geshem.js') 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 () { -- cgit v1.3.1