Add inspection map

src/components/App.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { saveAs } from 'file-saver'
 import Mousetrap from 'mousetrap'
 
+import InspectionMap from './map/InspectionMap'
 import MapboxGlMap from './map/MapboxGlMap'
 import OpenLayers3Map from './map/OpenLayers3Map'
 import LayerList from './layers/LayerList'
@@ -121,8 +122,8 @@ export default class App extends React.Component {
     const mapProps = {
       mapStyle: this.state.mapStyle,
       accessToken: this.state.accessToken,
-      onMapLoaded: (map) => {
-        this.layerWatcher.map = map
+      onDataChange: (e) => {
+        this.layerWatcher.analyzeMap(e.map)
       }
     }
 
@@ -132,6 +133,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.layerWatcher.sources} />
     } else {
       return  <MapboxGlMap {...mapProps} />
     }

src/components/map/InspectionMap.jsx

@@ -0,0 +1,79 @@
+import React from 'react'
+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 { generateColoredLayers } from '../../libs/stylegen'
+
+function convertInspectStyle(mapStyle, sources) {
+  const newStyle = {
+    ...mapStyle,
+    layers: [
+      {
+        "id": "background",
+        "type": "background",
+        "paint": {
+          "background-color": colors.black,
+        }
+      },
+      ...generateColoredLayers(sources),
+    ]
+  }
+  return newStyle
+}
+
+export default class InspectionMap extends React.Component {
+  static propTypes = {
+    onDataChange: React.PropTypes.func,
+    sources: React.PropTypes.object,
+    originalStyle: React.PropTypes.object,
+  }
+
+  static defaultProps = {
+    onMapLoaded: () => {},
+    onTileLoaded: () => {},
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = { map: null }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if(!this.state.map) return
+
+    this.state.map.setStyle(convertInspectStyle(nextProps.mapStyle, this.props.sources), { diff: true})
+  }
+
+  componentDidMount() {
+    MapboxGl.accessToken = this.props.accessToken
+
+    const map = new MapboxGl.Map({
+      container: this.container,
+      style: convertInspectStyle(this.props.mapStyle, this.props.sources),
+    })
+
+    map.on("style.load", () => {
+      this.setState({ map });
+    })
+
+    map.on("data", e => {
+      if(e.dataType !== 'tile') return
+      this.props.onDataChange({
+        map: this.state.map
+      })
+    })
+  }
+
+  render() {
+    return <div
+    ref={x => this.container = x}
+    style={{
+      position: "fixed",
+      top: 0,
+      bottom: 0,
+      height: "100%",
+      width: "100%",
+    }}></div>
+  }
+}

src/components/map/Map.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-
-export default class Map extends React.Component {
-  static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
-    accessToken: React.PropTypes.string,
-  }
-
-  render() {
-    return <div
-    ref={x => this.container = x}
-    style={{
-      position: "fixed",
-      top: 0,
-      bottom: 0,
-      height: "100%",
-      width: "100%",
-    }}></div>
-  }
-}

src/components/map/MapboxGlMap.jsx

@@ -2,22 +2,25 @@ import React from 'react'
 import MapboxGl from 'mapbox-gl'
 import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
 
-import Map from './Map.jsx'
 import style from '../../libs/style.js'
 
-export default class MapboxGlMap extends Map {
+export default class MapboxGlMap extends React.Component {
   static propTypes = {
-    onMapLoaded: React.PropTypes.func,
+    onDataChange: React.PropTypes.func,
+    mapStyle: React.PropTypes.object.isRequired,
+    accessToken: React.PropTypes.string,
   }
 
   static defaultProps = {
-    onMapLoaded: () => {}
+    onMapLoaded: () => {},
+    onDataChange: () => {},
   }
 
   constructor(props) {
     super(props)
     this.state = { map: null }
   }
+
   componentWillReceiveProps(nextProps) {
     if(!this.state.map) return
 
@@ -32,11 +35,29 @@ export default class MapboxGlMap extends Map {
     const map = new MapboxGl.Map({
       container: this.container,
       style: this.props.mapStyle,
-    });
+    })
 
-    map.on("style.load", (...args) => {
-      this.props.onMapLoaded(map)
+    map.on("style.load", () => {
       this.setState({ map });
-    });
+    })
+
+    map.on("data", e => {
+      if(e.dataType !== 'tile') return
+      this.props.onDataChange({
+        map: this.state.map
+      })
+    })
+  }
+
+  render() {
+    return <div
+    ref={x => this.container = x}
+    style={{
+      position: "fixed",
+      top: 0,
+      bottom: 0,
+      height: "100%",
+      width: "100%",
+    }}></div>
   }
 }

src/components/map/OpenLayers3Map.jsx

@@ -1,10 +1,16 @@
 import React from 'react'
-import Map from './Map'
 import style from '../../libs/style.js'
 
-class OpenLayers3Map extends Map {
-  constructor(props) {
-    super(props)
+class OpenLayers3Map extends React.Component {
+  static propTypes = {
+    onDataChange: React.PropTypes.func,
+    mapStyle: React.PropTypes.object.isRequired,
+    accessToken: React.PropTypes.string,
+  }
+
+  static defaultProps = {
+    onMapLoaded: () => {},
+    onDataChange: () => {},
   }
 
   componentWillReceiveProps(nextProps) {
@@ -63,6 +69,18 @@ class OpenLayers3Map extends Map {
       this.setState({ map });
     })
   }
+
+  render() {
+    return <div
+    ref={x => this.container = x}
+    style={{
+      position: "fixed",
+      top: 0,
+      bottom: 0,
+      height: "100%",
+      width: "100%",
+    }}></div>
+  }
 }
 
 export default OpenLayers3Map

src/components/modals/SettingsModal.jsx

@@ -72,7 +72,8 @@ class SettingsModal extends React.Component {
         <SelectInput {...inputProps}
           options={[
             ['mbgljs', 'MapboxGL JS'],
-            ['ol3', 'Open Layers 3']
+            ['ol3', 'Open Layers 3'],
+            ['inspection', 'Inspection Mode'],
           ]}
           value={(this.props.mapStyle.metadata || {})['maputnik:renderer'] || 'mbgljs'}
           onChange={this.onRendererChange.bind(this)}