Add simple station status card when station is clicked

src/PointMap.js

 import React, { Component } from 'react';
 import DeckGL, { PolygonLayer, MapController } from 'deck.gl';
 import { StaticMap } from 'react-map-gl';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 
 import Tooltip from './Tooltip.js';
 
@@ -70,6 +76,72 @@ class PointMap extends Component {
     }
   }
 
+  getCard(clicked) {
+
+    const station = this.props.points.get(clicked);
+    if (!station) {
+      return null;
+    }
+
+    const name = station.get_name();
+    const avg_speed_dir1 = station.get_avg_speed_dir1();
+    const avg_speed_dir2 = station.get_avg_speed_dir2();
+    const norm_flow_dir1 = station.get_free_flow_speed_dir1();
+    const norm_flow_dir2 = station.get_free_flow_speed_dir2();
+    const traffic_vol_dir1 = station.get_traffic_vol_dir1();
+    const traffic_vol_dir2 = station.get_traffic_vol_dir2();
+
+    const styles = {
+      card: {
+        position: "absolute",
+        marginTop: 10,
+        marginLeft: 10,
+        maxWidth: 345,
+        zIndex: 10,
+        left: 0,
+        top: 0,
+      }
+    }
+
+    const close_card = (prevState) => {
+      clicked = null;
+      return { ...prevState, clicked };
+    };
+
+    return (
+      <Card style={styles.card}>
+        <CardContent>
+          <Typography gutterBottom variant="headline" component="h3">
+            {name}
+          </Typography>
+          <Typography component="p">
+            {`Average speed direction 1: ${avg_speed_dir1} km/h`}
+          </Typography>
+          <Typography component="p">
+            {`Average speed direction 2: ${avg_speed_dir2} km/h`}
+          </Typography>
+          <Typography component="p">
+            {`Normal traffic flow direction 1: ${norm_flow_dir1} km/h`}
+          </Typography>
+          <Typography component="p">
+            {`Normal traffic flow direction 2: ${norm_flow_dir2} km/h`}
+          </Typography>
+          <Typography component="p">
+            {`Traffic volume direction 1: ${traffic_vol_dir1}/5min`}
+          </Typography>
+          <Typography component="p">
+            {`Traffic volume direction 2: ${traffic_vol_dir2}/5min`}
+          </Typography>
+        </CardContent>
+        <CardActions>
+          <Button size="small" color="primary" onClick={() => this.setState(close_card)}>
+            Close
+          </Button>
+        </CardActions>
+      </Card>
+    );
+  }
+
   render() {
     const point_coords = this.props.points.toArray();
     const layers = [
@@ -120,7 +192,10 @@ class PointMap extends Component {
             viewState={this.state.viewport}
           />
         </DeckGL>
-       {this.state.tooltipVisible && <Tooltip {...this.state.tooltip} />}
+        {this.state.tooltipVisible && <Tooltip {...this.state.tooltip} />}
+        { this.state.clicked &&
+            this.getCard(this.state.clicked)
+        }
       </div>
     );
   }