Try solve no map changes problem

package.json

@@ -17,6 +17,8 @@
   "homepage": "https://github.com/lukasmartinelli/mapolo#readme",
   "dependencies": {
     "file-saver": "^1.3.2",
+    "immutable": "^3.8.1",
+    "lodash": "^4.15.0",
     "mapbox-gl": "^0.23.0",
     "mapbox-gl-style-spec": "^8.8.0",
     "node-sass": "^3.9.2",

src/layers.jsx

@@ -6,6 +6,7 @@ import {MdVisibility, MdArrowDropDown, MdArrowDropUp, MdAddToPhotos, MdDelete, M
 import Collapse from 'react-collapse'
 import theme from './theme.js'
 import scrollbars from './scrollbars.scss'
+import _ from 'lodash'
 
 export class FillLayer extends React.Component {
 	static propTypes = {
@@ -104,13 +105,13 @@ export class LayerPanel extends React.Component {
 	}
 
 	onPaintChanged(property, newValue) {
-		const layer = this.props.layer
+		const layer = _.cloneDeep(this.props.layer)
 		layer.paint[property] = newValue;
 		this.props.onLayerChanged(layer)
 	}
 
 	onLayoutChanged(property, newValue) {
-		const layer = this.props.layer
+		const layer = _.cloneDeep(this.props.layer)
 		layer.layout[property] = newValue;
 		this.props.onLayerChanged(layer)
 	}
@@ -192,7 +193,7 @@ export class LayerPanel extends React.Component {
 
 export class LayerEditor extends React.Component {
 	static propTypes = {
-    layers: React.PropTypes.array.isRequired,
+		layers: React.PropTypes.array.isRequired,
     onLayersChanged: React.PropTypes.func.isRequired
   }
 
@@ -201,28 +202,30 @@ export class LayerEditor extends React.Component {
 	}
 
 	onLayerDestroyed(deletedLayer) {
+		//TODO: That's just horrible...
 		let deleteIdx = -1
+
 		for (let i = 0; i < this.props.layers.length; i++) {
-				if(this.props.layers[i].id == deletedLayer.id) {
+			if(this.props.layers[i].id == deletedLayer.id) {
-					deleteIdx = i
+				deleteIdx = i
-				}
+			}
 		}
 
-		const remainingLayers = this.props.layers
+		const remainingLayers = this.props.layers.slice(0)
-		const removedLayers = remainingLayers.splice(deleteIdx, 1)
+		remainingLayers.splice(deleteIdx, 0)
 		this.props.onLayersChanged(remainingLayers)
 	}
 
 	onLayerChanged(changedLayer) {
-		let changedIdx = -1
+		//TODO: That's just horrible...
+		let changeIdx = -1
 		for (let i = 0; i < this.props.layers.length; i++) {
-				if(this.props.layers[i].id == changedLayer.id) {
+			if(this.props.layers[i].id == changedLayer.id) {
-					changedIdx = i
+				changeIdx = i
-				}
+			}
 		}
-
+		const changedLayers = _.cloneDeep(this.props.layers)
-		const changedLayers = this.props.layers
+		changedLayers[changeIdx] = changedLayer
-		changedLayers[changedIdx] = changedLayer
 		this.props.onLayersChanged(changedLayers)
 	}
 

src/map.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import ReactMapboxGl, { ZoomControl } from "react-mapbox-gl"
+import MapboxGl from 'mapbox-gl';
-
+import diffStyles from 'mapbox-gl-style-spec/lib/diff'
 import theme from './theme.js'
 
 export class Map extends React.Component {
@@ -8,11 +8,33 @@ export class Map extends React.Component {
     mapStyle: React.PropTypes.object.isRequired
   }
 
+	componentWillReceiveProps(nextProps) {
+		const map = this.state.map
+		if(map) {
+			const changes = diffStyles(this.props.mapStyle, nextProps.mapStyle)
+			changes.forEach(change => {
+				map[change.command].apply(map, change.args);
+			});
+		}
+	}
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextProps.mapStyle !== this.props.mapStyle
+  }
+
+	componentDidMount() {
+		MapboxGl.accessToken = "pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w";
+		const map = new MapboxGl.Map({
+			container: this.container,
+			style: this.props.mapStyle,
+		});
+
+    map.on("style.load", (...args) => {
+      this.setState({ map });
+    });
+	}
+
 	render() {
-		return <ReactMapboxGl
+		return <div ref={x => this.container = x}></div>
-				style={this.props.mapStyle}
-				accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w">
-				<ZoomControl/>
-		</ReactMapboxGl>
 	}
 }

src/stylestore.js

@@ -94,6 +94,7 @@ export class StyleStore {
 			mapStyle.created = new Date()
 		}
 		mapStyle.layers = colorizeLayers(mapStyle.layers)
+
 		this.backup(mapStyle)
 		this.currentStyle = mapStyle
 	}

webpack.config.js

@@ -60,6 +60,8 @@ module.exports = {
 	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']
 	},