Show feature table on hover

src/components/App.jsx

@@ -124,7 +124,12 @@ export default class App extends React.Component {
       accessToken: this.state.accessToken,
       onDataChange: (e) => {
         this.layerWatcher.analyzeMap(e.map)
-      }
+      },
+			//TODO: This would actually belong to the layout component
+      style:{
+				top: 40,
+				//left: 500,
+			}
     }
 
     const metadata = this.state.mapStyle.metadata || {}

src/components/map/FeaturePropertyTable.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+
+function items(object) {
+    let arr = [];
+    for (var key in object) {
+        arr.push({ key, value: object[key] });
+    }
+    return arr;
+}
+
+
+function displayValue(value) {
+    if (typeof value === "undefined" || value === null) return value;
+    if (value instanceof Date) return value.toLocaleString();
+    if (typeof value === "object" ||
+        typeof value === "number" ||
+        typeof value === "string") return value.toString();
+    return value;
+}
+
+class FeaturePropertyTable extends React.Component {
+    render() {
+    const rows = items(this.props.feature.properties)
+      .map(i => {
+        return <tr key={i.key} className="debug-prop">
+        <td className="debug-prop-key">{i.key}</td>
+        <td className="debug-prop-value">{displayValue(i.value)}</td>
+        </tr>;
+      });
+    return <table
+      style={{
+        color: 'black',
+      }}
+      className="debug-props">
+      <tbody>{rows}</tbody>
+    </table>;;
+  }
+}
+
+
+export default FeaturePropertyTable

src/components/map/InspectionMap.jsx

@@ -1,9 +1,12 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import MapboxGl from 'mapbox-gl'
 import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
 import colors from '../../config/colors'
 import style from '../../libs/style'
+import FeaturePropertyTable from './FeaturePropertyTable'
 import { generateColoredLayers } from '../../libs/stylegen'
+import 'mapbox-gl/dist/mapbox-gl.css'
 
 function convertInspectStyle(mapStyle, sources) {
   const newStyle = {
@@ -22,11 +25,18 @@ function convertInspectStyle(mapStyle, sources) {
   return newStyle
 }
 
+function renderFeaturePropertyTable(feature) {
+  var mountNode = document.createElement('div');
+  ReactDOM.render(<FeaturePropertyTable feature={feature} />, mountNode);
+  return mountNode.innerHTML;
+}
+
 export default class InspectionMap extends React.Component {
   static propTypes = {
     onDataChange: React.PropTypes.func,
     sources: React.PropTypes.object,
     originalStyle: React.PropTypes.object,
+    style: React.PropTypes.object,
   }
 
   static defaultProps = {
@@ -53,6 +63,9 @@ export default class InspectionMap extends React.Component {
       style: convertInspectStyle(this.props.mapStyle, this.props.sources),
     })
 
+		const nav = new MapboxGl.NavigationControl();
+		map.addControl(nav, 'top-right');
+
     map.on("style.load", () => {
       this.setState({ map });
     })
@@ -63,6 +76,34 @@ export default class InspectionMap 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]
+
+/*
+		const clickEvent = e.originalEvent
+		const x = clickEvent.pageX
+		const y = clickEvent.pageY
+
+		console.log(e)
+		console.log('Show feature', feature)
+*/
+		// Populate the popup and set its coordinates
+		// based on the feature found.
+		const popup = new MapboxGl.Popup()
+			.setLngLat(e.lngLat)
+			.setHTML(renderFeaturePropertyTable(feature))
+			.addTo(this.state.map)
   }
 
   render() {
@@ -74,6 +115,7 @@ export default class InspectionMap extends React.Component {
       bottom: 0,
       height: "100%",
       width: "100%",
+      ...this.props.style,
     }}></div>
   }
 }

src/components/map/MapboxGlMap.jsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import MapboxGl from 'mapbox-gl'
 import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
-
 import style from '../../libs/style.js'
+import 'mapbox-gl/dist/mapbox-gl.css'
 
 export default class MapboxGlMap extends React.Component {
   static propTypes = {
     onDataChange: React.PropTypes.func,
     mapStyle: React.PropTypes.object.isRequired,
     accessToken: React.PropTypes.string,
+    style: React.PropTypes.object,
   }
 
   static defaultProps = {
@@ -37,6 +38,9 @@ export default class MapboxGlMap extends React.Component {
       style: this.props.mapStyle,
     })
 
+		const nav = new MapboxGl.NavigationControl();
+		map.addControl(nav, 'top-right');
+
     map.on("style.load", () => {
       this.setState({ map });
     })
@@ -58,6 +62,7 @@ export default class MapboxGlMap extends React.Component {
       bottom: 0,
       height: "100%",
       width: "100%",
+      ...this.props.style,
     }}></div>
   }
 }