work around another obnoxious deck.gl bug

visgl/deck.gl#257
dcposch · Feb 13, 2017 · 6152ac1 · 6152ac1
1 parent 0e9c8e9
commit 6152ac1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 17 deletions.
diff --git a/src/map.js b/src/map.js
@@ -18,21 +18,18 @@ module.exports = class Map extends React.Component {
   constructor (props) {
     super()
     this.props = props
-    this.state = {
-      viewport: {
-        latitude: 37.78,
-        longitude: -122.44,
-        zoom: 12,
-        bearing: 0,
-        pitch: 0
-      }
-    }
   }
 
   render () {
-    const {viewport} = this.state
+    const {layers, onChangeViewport} = this.props
 
-    const {layers} = this.props
+    const viewport = this.props.viewport || {
+      latitude: 37.78,
+      longitude: -122.44,
+      zoom: 12,
+      bearing: 0,
+      pitch: 0
+    }
 
     // Default to full-screen
     const width = this.props.width || window.innerWidth
@@ -48,7 +45,7 @@ module.exports = class Map extends React.Component {
       <MapGL
         {...viewport}
         mapStyle={mapStyle}
-        onChangeViewport={v => this.setState({viewport: v})}
+        onChangeViewport={(v) => onChangeViewport(v)}
         preventStyleDiffing={false}
         mapboxApiAccessToken={config.MAPBOX_TOKEN}
         perspectiveEnabled

diff --git a/src/zoning-map.js b/src/zoning-map.js
@@ -155,19 +155,26 @@ module.exports = class ZoningMap extends React.Component {
     this.state = {
       data: null,
       select: -1,
-      hover: -1
+      hover: -1,
+      viewport: null
     }
   }
 
   render () {
-    const {data} = this.state
+    const {data, viewport} = this.state
     const layers = []
     if (data) {
       data.features.forEach((x, i) => { x.properties.index = i })
       layers.push(this.renderZoningLayer())
     }
 
-    return <Map layers={layers} />
+    return (
+      <Map
+        layers={layers}
+        viewport={viewport}
+        onChangeViewport={(v) => this.setState({viewport: v})}
+      />
+    )
   }
 
   renderZoningLayer () {
@@ -179,12 +186,12 @@ module.exports = class ZoningMap extends React.Component {
 
       getColor: (f) => {
         const props = f.properties
-        return this.getZoneColor(props)
+        return this.getZoneColor(props, props.index === hover, props.index === select)
       },
 
       onHover: (info) => {
         if (info.index > 0 && info.index === select) return // already selected
-        if (info.index === hover) return // already hovered
+        if (info.index === hover) return // already hovered)
         this.setState({hover: info.index})
       },