From 999a51de4c79d0a1b56bf16bbbf97f516209114d Mon Sep 17 00:00:00 2001
From: Janne Alatalo <janne.alatalo@jamk.fi>
Date: Wed, 26 Sep 2018 15:26:04 +0300
Subject: [PATCH] Add lam point hover and click handlers
---
src/PointMap.js | 45 ++++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 44 insertions(+), 1 deletion(-)
diff --git a/src/PointMap.js b/src/PointMap.js
index bf8ea4a..7a90cb2 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}
--
GitLab