Add lam point hover and click handlers

src/PointMap.js

@@ -21,7 +21,9 @@ class PointMap extends Component {
 
   constructor(props) {
     super(props);
-    this.state = { viewport };
+    const mouseover = null;
+    const clicked = null;
+    this.state = { viewport, mouseover, clicked };
   }
 
   update_tooltip(visible, x, y, content) {
@@ -38,6 +40,36 @@ class PointMap extends Component {
     });
   }
 
+  handleOnHover(e) {
+    this.setState(prevState => {
+      let mouseover = null;
+      if (e.picked) {
+        mouseover = e.object.get_id();
+      }
+      return { ...prevState, mouseover };
+    });
+  }
+
+  handleOnClickObject(e) {
+    this.setState(prevState => {
+      let clicked = null;
+      if (e.picked) {
+        clicked = e.object.get_id();
+      }
+      return { ...prevState, clicked };
+    });
+    return false;
+  }
+
+  handleOnClickMap(e) {
+    if (e === null) {
+      this.setState(prevState => {
+        const clicked = null;
+        return { ...prevState, clicked };
+      });
+    }
+  }
+
   render() {
     const point_coords = this.props.points.toArray();
     const layers = [
@@ -59,6 +91,16 @@ class PointMap extends Component {
         filled: true,
         extruded: true,
         getElevation: d => d.get_avg_traffic_vol() * 20,
+        getLineColor: d => {
+          if (this.state.mouseover === d.get_id()) {
+            return [255, 0, 0];
+          }
+          return d.get_color();
+        },
+        wireframe: true,
+        pickable: true,
+        onClick: e => this.handleOnClickObject(e),
+        onHover: e => this.handleOnHover(e),
       })
     ];
 
@@ -70,6 +112,7 @@ class PointMap extends Component {
           layers={layers}
           controller={MapController}
           onViewportChange={v => this.setState({viewport: v})}
+          onLayerClick={e => this.handleOnClickMap(e)}
         >
           <StaticMap
             {...this.props.mapSize}