Better inspection hover

src/components/inputs/InputBlock.jsx

@@ -7,6 +7,7 @@ class InputBlock extends React.Component {
   static propTypes = {
     label: React.PropTypes.string.isRequired,
     children: React.PropTypes.element.isRequired,
+    style: React.PropTypes.object,
   }
 
   onChange(e) {
@@ -19,6 +20,7 @@ class InputBlock extends React.Component {
       display: 'block',
       marginTop: margins[2],
       marginBottom: margins[2],
+      ...this.props.style,
     }}>
       <label style={input.label}>{this.props.label}</label>
       {this.props.children}

src/components/map/FeatureLayerTable.jsx

@@ -1,18 +1,48 @@
 import React from 'react'
+import InputBlock from '../inputs/InputBlock'
+import StringInput from '../inputs/StringInput'
+
+import colors from '../../config/colors'
+import { margins, fontSizes } from '../../config/scales'
+
+function renderProperties(feature) {
+  return Object.keys(feature.properties).map(propertyName => {
+    const property = feature.properties[propertyName]
+    return <InputBlock label={propertyName} style={{marginTop: 0, marginBottom: 0}}>
+      <StringInput value={property} style={{backgroundColor: 'transparent'}}/>
+    </InputBlock>
+  })
+}
+
+const Panel = (props) => {
+  return <div style={{
+    backgroundColor: colors.gray,
+    padding: margins[0],
+    fontSize: fontSizes[5],
+    lineHeight: 1.2,
+  }}>{props.children}</div>
+}
+
+function renderFeature(feature) {
+  return <div>
+    <Panel>Source</Panel>
+      <InputBlock label={feature.layer['source-layer']} style={{marginTop: 0, marginBottom: 0}}>
+      </InputBlock>
+    <Panel>Layers</Panel>
+      <InputBlock label={feature.layer.id} style={{marginTop: 0, marginBottom: 0}}>
+      </InputBlock>
+    <Panel>Properties</Panel>
+    {renderProperties(feature)}
+  </div>
+}
 
 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>;;
+    const features = this.props.features
+    return <div>
+      {features.map(renderFeature)}
+    </div>
   }
 }
 

src/components/map/FeaturePropertyTable.jsx

@@ -1,42 +0,0 @@
-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

@@ -4,7 +4,7 @@ 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 FeatureLayerTable from './FeatureLayerTable'
 import { generateColoredLayers } from '../../libs/stylegen'
 import 'mapbox-gl/dist/mapbox-gl.css'
 
@@ -25,9 +25,9 @@ function convertInspectStyle(mapStyle, sources) {
   return newStyle
 }
 
-function renderFeaturePropertyTable(feature) {
+function renderPopup(features) {
   var mountNode = document.createElement('div');
-  ReactDOM.render(<FeaturePropertyTable feature={feature} />, mountNode);
+  ReactDOM.render(<FeatureLayerTable features={features} />, mountNode)
   return mountNode.innerHTML;
 }
 
@@ -64,8 +64,8 @@ export default class InspectionMap extends React.Component {
       hash: true,
     })
 
-		const nav = new MapboxGl.NavigationControl();
-		map.addControl(nav, 'top-right');
+    const nav = new MapboxGl.NavigationControl();
+    map.addControl(nav, 'top-right');
 
     map.on("style.load", () => {
       this.setState({ map });
@@ -82,29 +82,20 @@ export default class InspectionMap extends React.Component {
   }
 
   displayPopup(e) {
-		const features = this.state.map.queryRenderedFeatures(e.point, {
-			layers: this.layers
-		});
+    const features = this.state.map.queryRenderedFeatures(e.point, {
+      layers: this.layers
+    });
 
-		if (!features.length) {
-			return
-		}
-		const feature = features[0]
+    if (!features.length) {
+      return
+    }
 
-/*
-		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)
+    // Populate the popup and set its coordinates
+    // based on the feature found.
+    const popup = new MapboxGl.Popup()
+      .setLngLat(e.lngLat)
+      .setHTML(renderPopup(features))
+      .addTo(this.state.map)
   }
 
   render() {

src/components/map/MapboxGlMap.jsx

@@ -2,13 +2,14 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import MapboxGl from 'mapbox-gl'
 import FeatureLayerTable from './FeatureLayerTable'
+import Popup from './Popup'
 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) {
+function renderPopup(features) {
   var mountNode = document.createElement('div');
-  ReactDOM.render(<FeatureLayerTable feature={feature} />, mountNode);
+  ReactDOM.render(<FeatureLayerTable features={features} />, mountNode)
   return mountNode.innerHTML;
 }
 
@@ -27,7 +28,12 @@ export default class MapboxGlMap extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = { map: null }
+    this.state = {
+      map: null,
+      isPopupOpen: false,
+      popupX: 0,
+      popupY: 0,
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -69,27 +75,24 @@ export default class MapboxGlMap extends React.Component {
 			layers: this.layers
 		});
 
-		if (!features.length) {
-			return
-		}
-		const feature = features[0]
-    console.log('Click on feature', feature)
+    console.log('Click on features', features)
 		const popup = new MapboxGl.Popup()
 			.setLngLat(e.lngLat)
-			.setHTML(renderTable(feature))
+			.setHTML(renderPopup(features))
 			.addTo(this.state.map)
   }
 
   render() {
     return <div
-    ref={x => this.container = x}
-    style={{
-      position: "fixed",
-      top: 0,
-      bottom: 0,
-      height: "100%",
-      width: "100%",
-      ...this.props.style,
-    }}></div>
+      ref={x => this.container = x}
+      style={{
+        position: "fixed",
+        top: 0,
+        bottom: 0,
+        height: "100%",
+        width: "100%",
+        ...this.props.style,
+      }}>
+    </div>
   }
 }

src/index.css

@@ -15,3 +15,31 @@
   color: rgb(142, 142, 142) !important;
   box-shadow: none !important;
 }
+
+.mapboxgl-popup-tip {
+  border-top-color: rgb(28, 31, 36) !important;
+}
+
+.mapboxgl-popup-content {
+  background-color: rgb(28, 31, 36) !important;
+  border-radius: 0px !important;
+  box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 5px 0px;
+  padding: 0px !important;
+}
+
+.mapboxgl-popup-close-button {
+  color: white !important;
+}
+
+.mapboxgl-ctrl-group {
+  background: rgb(28, 31, 36) !important;
+}
+
+.mapboxgl-ctrl-group > button {
+  background-color: rgb(28, 31, 36) !important;
+  border-color: rgb(28, 31, 36) !important;
+
+  &:hover {
+    background-color: rgb(86, 83, 83);
+  }
+}