Use Mapbox GL Inspect

src/components/App.jsx

@@ -52,6 +52,7 @@ export default class App extends React.Component {
       selectedLayerIndex: 0,
       sources: {},
       vectorLayers: {},
+      inspectModeEnabled: false,
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -149,6 +150,12 @@ export default class App extends React.Component {
     this.onLayersChange(changedLayers)
   }
 
+  changeInspectMode() {
+    this.setState({
+      inspectModeEnabled: !this.state.inspectModeEnabled
+    })
+  }
+
   mapRenderer() {
     const metadata = this.state.mapStyle.metadata || {}
     const mapProps = {
@@ -169,12 +176,8 @@ export default class App extends React.Component {
     // Check if OL3 code has been loaded?
     if(renderer === 'ol3') {
       return <OpenLayers3Map {...mapProps} />
-    } else if(renderer === 'inspection') {
-      return  <InspectionMap {...mapProps}
-        sources={this.state.sources}
-        highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]} />
     } else {
-      return  <MapboxGlMap {...mapProps} />
+      return  <MapboxGlMap {...mapProps} inspectModeEnabled={this.state.inspectModeEnabled} />
     }
   }
 
@@ -194,6 +197,7 @@ export default class App extends React.Component {
       onStyleChanged={this.onStyleChanged.bind(this)}
       onStyleOpen={this.onStyleChanged.bind(this)}
       onStyleDownload={this.onStyleDownload.bind(this)}
+      onInspectModeToggle={this.changeInspectMode.bind(this)}
     />
 
     const layerList = <LayerList

src/components/Toolbar.jsx

@@ -84,6 +84,7 @@ export default class Toolbar extends React.Component {
     onStyleDownload: React.PropTypes.func.isRequired,
     // A dict of source id's and the available source layers
     sources: React.PropTypes.object.isRequired,
+    onInspectModeToggle: React.PropTypes.func.isRequired
   }
 
   constructor(props) {
@@ -105,23 +106,6 @@ export default class Toolbar extends React.Component {
     </ToolbarAction>
   }
 
-  toggleInspectionMode() {
-    const metadata = this.props.mapStyle.metadata || {}
-    const currentRenderer = metadata['maputnik:renderer'] || 'mbgljs'
-
-    const changedRenderer = currentRenderer === 'inspection' ? 'mbgljs' : 'inspection'
-
-    const changedStyle = {
-      ...this.props.mapStyle,
-      metadata: {
-        ...this.props.mapStyle.metadata,
-        'maputnik:renderer': changedRenderer
-      }
-    }
-
-    this.props.onStyleChanged(changedStyle)
-  }
-
   toggleModal(modalName) {
     this.setState({
       isOpen: {
@@ -194,7 +178,7 @@ export default class Toolbar extends React.Component {
         <SettingsIcon />
         <IconText>Style Settings</IconText>
       </ToolbarAction>
-      <ToolbarAction onClick={this.toggleInspectionMode.bind(this)}>
+      <ToolbarAction onClick={this.props.onInspectModeToggle}>
         <InspectionIcon />
         <IconText>Inspect</IconText>
       </ToolbarAction>

src/components/map/FeaturePropertyPopup.jsx

@@ -24,7 +24,6 @@ const Panel = (props) => {
 }
 
 function renderFeature(feature) {
-  console.log(feature)
   return <div>
     <Panel>{feature.layer['source-layer']}</Panel>
     {renderProperties(feature)}

src/components/map/MapboxGlMap.jsx

@@ -1,24 +1,33 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js'
+import MapboxInspect from 'mapbox-gl-inspect'
 import FeatureLayerTable from './FeatureLayerTable'
+import FeaturePropertyPopup from './FeaturePropertyPopup'
 import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
 import style from '../../libs/style.js'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
 
-function renderPopup(features) {
+function renderLayerPopup(features) {
   var mountNode = document.createElement('div');
   ReactDOM.render(<FeatureLayerTable features={features} />, mountNode)
   return mountNode.innerHTML;
 }
 
+function renderPropertyPopup(features) {
+  var mountNode = document.createElement('div');
+  ReactDOM.render(<FeaturePropertyPopup features={features} />, mountNode)
+  return mountNode.innerHTML;
+}
+
 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,
+    inspectModeEnabled: React.PropTypes.bool.isRequired,
   }
 
   static defaultProps = {
@@ -42,9 +51,15 @@ export default class MapboxGlMap extends React.Component {
 
     if(!this.state.map) return
 
-    //Mapbox GL now does diffing natively so we don't need to calculate
-    //the necessary operations ourselves!
-    this.state.map.setStyle(nextProps.mapStyle, { diff: true})
+    if(!this.props.inspectModeEnabled) {
+      //Mapbox GL now does diffing natively so we don't need to calculate
+      //the necessary operations ourselves!
+      this.state.map.setStyle(nextProps.mapStyle, { diff: true})
+    }
+
+    if(this.props.inspectModeEnabled !== nextProps.inspectModeEnabled) {
+      this.inspect.toggleInspector()
+    }
   }
 
   componentDidMount() {
@@ -57,6 +72,22 @@ export default class MapboxGlMap extends React.Component {
 		const nav = new MapboxGl.NavigationControl();
 		map.addControl(nav, 'top-right');
 
+    this.inspect = new MapboxInspect({
+      popup: new MapboxGl.Popup({
+        closeButton: false,
+        closeOnClick: false
+      }),
+      showInspectButton: false,
+      renderPopup: features => {
+        if(this.props.inspectModeEnabled) {
+          return renderPropertyPopup(features)
+        } else {
+          return renderLayerPopup(features)
+        }
+      }
+    })
+		map.addControl(this.inspect)
+
     map.on("style.load", () => {
       this.setState({ map });
     })
@@ -67,24 +98,6 @@ export default class MapboxGlMap extends React.Component {
         map: this.state.map
       })
     })
-
-    map.on('click', this.displayPopup.bind(this));
-    map.on('mousemove', function(e) {
-      var features = map.queryRenderedFeatures(e.point, { layers: this.layers })
-      map.getCanvas().style.cursor = (features.length) ? 'pointer' : ''
-    })
-  }
-
-  displayPopup(e) {
-		const features = this.state.map.queryRenderedFeatures(e.point, {
-			layers: this.layers
-		});
-
-    if(features.length < 1) return
-		const popup = new MapboxGl.Popup()
-			.setLngLat(e.lngLat)
-			.setHTML(renderPopup(features))
-			.addTo(this.state.map)
   }
 
   render() {
@@ -93,7 +106,7 @@ export default class MapboxGlMap extends React.Component {
       style={{
         position: "fixed",
         top: 0,
-        left: 550,
+        right: 0,
         bottom: 0,
         height: "100%",
         width: "75%",

src/components/modals/SettingsModal.jsx

@@ -83,7 +83,6 @@ class SettingsModal extends React.Component {
           options={[
             ['mbgljs', 'MapboxGL JS'],
             ['ol3', 'Open Layers 3'],
-            ['inspection', 'Inspection Mode'],
           ]}
           value={metadata['maputnik:renderer'] || 'mbgljs'}
           onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}