Directly wrap Mapbox GL

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">
-					<LayerEditor />
-        </Drawer>
+				<WorkspaceDrawer />
 				<div className={styles.layoutMap}>
 					<Map />
 				</div>

src/map.jsx

@@ -1,19 +1,21 @@
 import React from 'react';
-import ReactMapboxGl from 'react-mapbox-gl';
-import {ZoomControl} from 'react-mapbox-gl';
+import MapboxGl from '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
-			style="mapbox://styles/morgenkaffee/ciqo4gtwo0037c0m7tpcosu63"
-			accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w"
-		 >
-			<ZoomControl />
-		</ReactMapboxGl>;
+		return <div ref={x => this.container = x} style={{zIndex: 15}}></div>
 	}
 }
 

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);
+	}
+}