Add hexagon selecion layer

forestofrain · May 24, 2016 · 2062f63 · 2062f63
1 parent 6e72472
commit 2062f63
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 35 deletions.
diff --git a/example/main.js b/example/main.js
@@ -32,7 +32,9 @@ import {Provider, connect} from 'react-redux';
 import autobind from 'autobind-decorator';
 
 import MapboxGLMap from 'react-map-gl';
-import {PerspectiveCamera, Mat4} from 'luma.gl';
+import {Mat4} from 'luma.gl';
+import OverlayControl from './overlay-control';
+
 import request from 'd3-request';
 import {
   DeckGLOverlay,
@@ -182,6 +184,11 @@ function pointsToArcs(points) {
 class ExampleApp extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      selectedHexagons: [],
+      hoveredItem: null,
+      clickedItem: null
+    };
   }
 
   componentWillMount() {
@@ -222,7 +229,6 @@ class ExampleApp extends React.Component {
 
   @autobind
   _updateArcStrokeWidth() {
-    console.log('update arc stroke width');
     this.setState({arcStrokeWidth: 1});
   }
 
@@ -256,32 +262,45 @@ class ExampleApp extends React.Component {
 
   @autobind
   _handleChoroplethHovered(info) {
-    // console.log('choropleth hovered:', info);
+    this.setState({hoveredItem: info});
   }
 
   @autobind
   _handleChoroplethClicked(info) {
-    // console.log('choropleth clicked:', info);
+    this.setState({clickedItem: info});
   }
 
   @autobind
   _handleHexagonHovered(info) {
-    // console.log('Hexagon hovered:', info);
+
+    const {hexData} = this.props;
+    let selectedHexagons = [];
+    if (info.index >= 0) {
+      selectedHexagons = [{
+        ...hexData[info.index],
+        color: [0, 0, 255]
+      }];
+    }
+
+    this.setState({
+      hoveredItem: info,
+      selectedHexagons
+    });
   }
 
   @autobind
   _handleHexagonClicked(info) {
-    // console.log('Hexagon clicked:', info);
+    this.setState({clickedItem: info});
   }
 
   @autobind
   _handleScatterplotHovered(info) {
-    // console.log('Scatterplot hovered:', info);
+    this.setState({hoveredItem: info});
   }
 
   @autobind
   _handleScatterplotClicked(info) {
-    // console.log('Scatterplot clicked:', info);
+    this.setState({clickedItem: info});
   }
 
   _renderGridLayer() {
@@ -336,6 +355,25 @@ class ExampleApp extends React.Component {
     });
   }
 
+  _renderHexagonSelectionLayer() {
+    const {mapViewState} = this.props;
+    const {selectedHexagons} = this.state;
+
+    return new HexagonLayer({
+      id: 'hexagonSelectionLayer',
+      width: window.innerWidth,
+      height: window.innerHeight,
+      latitude: mapViewState.latitude,
+      longitude: mapViewState.longitude,
+      zoom: mapViewState.zoom,
+      data: selectedHexagons,
+      isPickable: true,
+      opacity: 0.1,
+      onHover: this._handleHexagonHovered,
+      onClick: this._handleHexagonClicked
+    });
+  }
+
   _renderScatterplotLayer() {
     const {mapViewState, points} = this.props;
 
@@ -389,6 +427,7 @@ class ExampleApp extends React.Component {
           this._renderGridLayer(),
           this._renderChoroplethLayer(),
           this._renderHexagonLayer(),
+          this._renderHexagonSelectionLayer(),
           this._renderScatterplotLayer(),
           this._renderArcLayer()
         ]}
@@ -405,7 +444,7 @@ class ExampleApp extends React.Component {
         mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
         width={width}
         height={height}
-        perspectiveEnabled={true}
+        perspectiveEnabled
         { ...mapViewState }
         onChangeViewport={this._handleViewportChanged}>
         { this._renderOverlay() }
@@ -414,9 +453,16 @@ class ExampleApp extends React.Component {
   }
 
   render() {
+    const {hoveredItem, clickedItem} = this.state;
+
     return (
       <div>
         { this._renderMap() }
+
+        <OverlayControl
+          hoveredItem={ hoveredItem }
+          clickedItem={ clickedItem }/>
+
       </div>
     );
   }

diff --git a/example/overlay-control.js b/example/overlay-control.js
@@ -0,0 +1,56 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-inline-comments */
+import React from 'react';
+
+function OverlayControl({
+  layers, activeLayer, onChange, hoveredItem, clickedItem
+}) {
+
+  const hoverCoords = hoveredItem && hoveredItem.geoCoords;
+
+  return (
+    <div id="overlay-control">
+      <div style={ {
+        background: 'white',
+        padding: '1em',
+        marginBottom: '1em',
+        width: 200
+      } }>
+        <div>
+          Hover { hoveredItem && hoveredItem.hexagonId || 'null' }
+          { hoveredItem && hoveredItem.index !== -1 && ' *' }
+          { hoverCoords &&
+            ` ${hoverCoords.lat.toFixed(5)} ${hoverCoords.lon.toFixed(5)}` }
+        </div>
+        <div>
+          Click { clickedItem && clickedItem.hexagonId || 'null' }
+          { clickedItem && clickedItem.index !== -1 && ' *' }
+        </div>
+      </div>
+      <div style={ {
+        background: 'white',
+        padding: '1em 1em 0 1em',
+        width: 200
+      } }>
+      {  /* layers.map(layerId => (
+        <div key={ layerId }>
+          <input
+            type="radio"
+            id={ layerId }
+            name="layerStatus"
+            className="radio-input"
+            value={ layerId }
+            defaultChecked={ layerId === activeLayer }
+            onChange={ e => onChange(layerId) }
+          />
+          <label className="radio" htmlFor={ layerId }>
+            { layerId }
+          </label>
+        </div>
+      )) */ }
+      </div>
+    </div>
+  );
+}
+
+export default OverlayControl;
diff --git a/package.json b/package.json
@@ -95,8 +95,8 @@
     "prepublish": "npm run build",
     "test": "npm run lint && npm run test-node",
     "test-node": "babel-node --only=luma.gl,deck.gl/src,deck.gl/test test/node.js | faucet",
-    "test-browser": "budo test/browser.js:build/test-bundle.js --dir test -t babelify --live --open --port 3001 --watch-glob '**/*.{html,css,scss,js}' -- -t babelify -t glslify",
+    "test-browser": "budo test/browser.js:build/test-bundle.js --dir test --live --open --port 3001 --watch-glob '**/*.{html,css,scss,js,glsl}' -- -t babelify",
     "test-electron": "browserify test/electron.js | testron | faucet",
-    "start": "budo example/main.js:example/bundle.js --live --open --port 3000 --watch-glob '**/*.{html,css,js}' -- -t babelify -t glslify -t envify"
+    "start": "budo example/main.js:example/bundle.js --live --open --port 3000 --watch-glob '**/*.{html,css,js,glsl}' -- -t babelify -t envify"
   }
 }
diff --git a/shaderlib/mercator-project.glsl b/shaderlib/mercator-project.glsl
diff --git a/src/layers/hexagon-layer/hexagon-layer-vertex.glsl b/src/layers/hexagon-layer/hexagon-layer-vertex.glsl
@@ -51,6 +51,6 @@ void main(void) {
   vec3 p = centroidPositions.xyz + verticesPositions.xyz;
   gl_Position = projectionMatrix * vec4(p, 1.0);
 
-  float alpha = pickingColors == selected ? 0.5 : opacity;
+  float alpha = mix(opacity, 1.0, renderPickingBuffer);
   vColor = vec4(mix(colors / 255., pickingColors / 255., renderPickingBuffer), alpha);
 }
diff --git a/src/webgl-renderer.js b/src/webgl-renderer.js
@@ -136,7 +136,7 @@ export default class WebGLRenderer extends React.Component {
     const {gl} = this.state;
     const {camera, scene} = this.props;
 
-    const pickedModels = scene.pickModels(gl, {camera, x, y});
+    const pickedModels = scene.pickModels(gl, {camera, x: x * 2, y: y * 2});
 
     return pickedModels;
   }

diff --git a/index.html → test/index.html b/index.html → test/index.html