Add inspection map

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>
   }
 }