diff --git a/src/PointMap.js b/src/PointMap.js index bf8ea4a9d2662eae2b21d1f0bc3ef648e65321e0..7a90cb24bebca9d8ea59efc3d39c2d3ec972cf4c 100644 --- a/src/PointMap.js +++ b/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}