Directly wrap Mapbox GL

package.json

@@ -16,14 +16,13 @@
   "license": "MIT",
   "homepage": "https://github.com/lukasmartinelli/mapolo#readme",
   "dependencies": {
+    "mapbox-gl": "^0.23.0",
     "node-sass": "^3.9.2",
     "react": "15.3.0",
     "react-dom": "15.3.0",
     "react-file-reader-input": "^1.1.0",
     "react-geomicons": "^2.0.5",
     "react-icons": "^2.2.1",
-    "react-map-gl": "^1.4.2",
-    "react-mapbox-gl": "^0.10.0",
     "react-tap-event-plugin": "^1.0.0",
     "rebass": "^0.3.1",
     "sass-loader": "^4.0.1"

src/app.jsx

@@ -7,6 +7,23 @@ import { Drawer, Container, Block, Fixed } from 'rebass'
 import { LayerEditor } from './layers.jsx'
 import theme from './theme.jsx'
 
+export class WorkspaceDrawer extends React.Component {
+	render() {
+		return <Container style={{
+			zIndex: 100,
+			position: "fixed",
+			height: "100%",
+			left: "60",
+			width: 300,
+			top: "0",
+			bottom: "0",
+			backgroundColor: theme.colors.gray}
+		} >
+			<LayerEditor />
+		</Container>;
+	}
+}
+
 export default class App extends React.Component {
   static childContextTypes = {
     rebass: React.PropTypes.object,
@@ -26,9 +43,7 @@ export default class App extends React.Component {
     return (
 		<div>
 			  <Toolbar />
-			  <Drawer style={{backgroundColor: theme.colors.gray, marginLeft: 60}} open={true} position="left">
+				<WorkspaceDrawer />
-					<LayerEditor />
-        </Drawer>
 				<div className={styles.layoutMap}>
 					<Map />
 				</div>

src/map.jsx

@@ -1,19 +1,21 @@
 import React from 'react';
-import ReactMapboxGl from 'react-mapbox-gl';
+import MapboxGl from 'mapbox-gl';
-import {ZoomControl} from 'react-mapbox-gl';
 
 export class Map extends React.Component {
 	constructor(props) {
-		super(props);
+			super(props);
+	}
+
+	componentDidMount() {
+		MapboxGl.accessToken = "pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w";
+		const map = new MapboxGl.Map({
+			container: this.container,
+			style: "mapbox://styles/morgenkaffee/cirqasdb8003dh1ntbo6dkvs6"
+		});
 	}
 
 	render() {
-		return <ReactMapboxGl
+		return <div ref={x => this.container = x} style={{zIndex: 15}}></div>
-			style="mapbox://styles/morgenkaffee/ciqo4gtwo0037c0m7tpcosu63"
-			accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w"
-		 >
-			<ZoomControl />
-		</ReactMapboxGl>;
 	}
 }
 

src/style.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export class StyleCommand {
+	do(map) {
+		throw new TypeError("Do not implemented");
+	}
+	undo(map) {
+		throw new TypeError("Undo not implemented");
+	}
+}
+
+export class StyleEditor {
+	constructor(map, style) {
+		this.map = map;
+		this.style = style;
+		this.history = [];
+	}
+
+	layers() {
+		return this.style.layers;
+	}
+
+	execute(command) {
+		this.history.push(command);
+		command.do(this.map);
+	}
+}

webpack.config.js

@@ -58,6 +58,11 @@ module.exports = {
 		filename: 'bundle.js'
 	},
 	resolve: {
+		alias: {
+			'webworkify': 'webworkify-webpack',
+			// TODO: otherwise I get a max call stack error in browser?
+			'mapbox-gl': path.resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
+		},
 		extensions: ['', '.js', '.jsx']
 	},
 	module: {