From 8f561d8a275fde546a0ea28870e555e6a4cbe114 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Sat, 24 Dec 2016 15:24:22 +0100
Subject: [PATCH] Show layer table

---
 src/components/map/FeatureLayerTable.jsx | 20 ++++++++++++++++++
 src/components/map/MapboxGlMap.jsx       | 26 ++++++++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 src/components/map/FeatureLayerTable.jsx

diff --git a/src/components/map/FeatureLayerTable.jsx b/src/components/map/FeatureLayerTable.jsx
new file mode 100644
index 0000000..ecc21a5
--- /dev/null
+++ b/src/components/map/FeatureLayerTable.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+class FeatureLayerTable extends React.Component {
+  render() {
+    const feature = this.props.feature
+    const rows = <tr>
+      <td className="debug-prop-key">{feature.layer.id}</td>
+    </tr>
+    return <table
+      style={{
+        color: 'black',
+      }}
+      className="debug-props">
+      <tbody>{rows}</tbody>
+    </table>;;
+  }
+}
+
+
+export default FeatureLayerTable
diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx
index fb344fd..42698ef 100644
--- a/src/components/map/MapboxGlMap.jsx
+++ b/src/components/map/MapboxGlMap.jsx
@@ -1,9 +1,17 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import MapboxGl from 'mapbox-gl'
+import FeatureLayerTable from './FeatureLayerTable'
 import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
 import style from '../../libs/style.js'
 import 'mapbox-gl/dist/mapbox-gl.css'
 
+function renderTable(feature) {
+  var mountNode = document.createElement('div');
+  ReactDOM.render(<FeatureLayerTable feature={feature} />, mountNode);
+  return mountNode.innerHTML;
+}
+
 export default class MapboxGlMap extends React.Component {
   static propTypes = {
     onDataChange: React.PropTypes.func,
@@ -52,6 +60,24 @@ export default class MapboxGlMap extends React.Component {
         map: this.state.map
       })
     })
+
+    map.on('click', this.displayPopup.bind(this));
+  }
+
+  displayPopup(e) {
+		const features = this.state.map.queryRenderedFeatures(e.point, {
+			layers: this.layers
+		});
+
+		if (!features.length) {
+			return
+		}
+		const feature = features[0]
+    console.log('Click on feature', feature)
+		const popup = new MapboxGl.Popup()
+			.setLngLat(e.lngLat)
+			.setHTML(renderTable(feature))
+			.addTo(this.state.map)
   }
 
   render() {