Remove logging and force OL3 to redraw

src/components/App.jsx

@@ -25,7 +25,7 @@ export default class App extends React.Component {
         console.log('Falling back to local storage for storing styles')
         this.styleStore = new StyleStore()
       }
-      this.styleStore.latestStyle(mapStyle => this.onStyleOpen(mapStyle))
+      this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle))
     })
 
     this.settingsStore = new SettingsStore()
@@ -45,23 +45,15 @@ export default class App extends React.Component {
     const mapStyle = this.state.mapStyle
     const blob = new Blob([JSON.stringify(mapStyle, null, 4)], {type: "application/json;charset=utf-8"});
     saveAs(blob, mapStyle.id + ".json");
-    this.onStyleSave()
   }
 
-  onStyleOpen(newStyle) {
-    console.log('upload', newStyle)
-    const savedStyle = this.styleStore.save(newStyle)
-    this.setState({ mapStyle: savedStyle })
-  }
-
-  onStyleSave() {
-    const snapshotStyle = this.state.mapStyle.modified = new Date().toJSON()
-    this.setState({ mapStyle: snapshotStyle })
-    console.log('Save')
+  saveStyle(snapshotStyle) {
+    snapshotStyle.modified = new Date().toJSON()
     this.styleStore.save(snapshotStyle)
   }
 
   onStyleChanged(newStyle) {
+    this.saveStyle(newStyle)
     this.setState({ mapStyle: newStyle })
   }
 
@@ -75,7 +67,7 @@ export default class App extends React.Component {
       ...this.state.mapStyle,
       layers: changedLayers
     }
-    this.setState({ mapStyle: changedStyle })
+    this.onStyleChanged(changedStyle)
   }
 
   onLayerIdChange(oldId, newId) {
@@ -91,7 +83,6 @@ export default class App extends React.Component {
   }
 
   onLayerChanged(layer) {
-    console.log('layer changed', layer)
     const changedLayers = this.state.mapStyle.layers.slice(0)
     const idx = style.indexOfLayer(changedLayers, layer.id)
     changedLayers[idx] = layer
@@ -131,8 +122,7 @@ export default class App extends React.Component {
     const toolbar = <Toolbar
       mapStyle={this.state.mapStyle}
       onStyleChanged={this.onStyleChanged.bind(this)}
-      onStyleSave={this.onStyleSave.bind(this)}
-      onStyleOpen={this.onStyleOpen.bind(this)}
+      onStyleOpen={this.onStyleChanged.bind(this)}
       onStyleDownload={this.onStyleDownload.bind(this)}
     />
 

src/components/Toolbar.jsx

@@ -79,8 +79,6 @@ export default class Toolbar extends React.Component {
     onStyleOpen: React.PropTypes.func.isRequired,
     // Current style is requested for download
     onStyleDownload: React.PropTypes.func.isRequired,
-    // Style is explicitely saved to local cache
-    onStyleSave: React.PropTypes.func,
   }
 
   constructor(props) {

src/components/fields/ColorField.jsx

@@ -38,7 +38,7 @@ class ColorField extends React.Component {
         left: pos.left + 165,
       }
     } else {
-      console.log('No elem!!')
+      console.warn('Color field has no element to adjust position')
       return {
         top: 160,
         left: 500,

src/components/fields/PropertyGroup.jsx

@@ -35,7 +35,6 @@ export default class PropertyGroup extends React.Component {
   }
 
   render() {
-    console.log(this.props.layer.id, this.props.groupFields)
     const fields = this.props.groupFields.map(fieldName => {
       const fieldSpec = getFieldSpec(this.props.layer.type, fieldName)
 

src/components/map/OpenLayers3Map.jsx

@@ -13,7 +13,14 @@ class OpenLayers3Map extends Map {
       const olms = require('ol-mapbox-style')
       const jsonStyle = nextProps.mapStyle
       const styleFunc = olms.getStyleFunction(jsonStyle, 'openmaptiles', this.resolutions)
-      this.layer.setStyle(styleFunc)
+      console.log('New style babee')
+
+      const layer = this.layer
+      layer.setStyle(styleFunc)
+      //NOTE: We need to mark the source as changed in order
+      //to trigger a rerender
+      layer.getSource().changed()
+
       this.state.map.render()
     })
   }
@@ -43,9 +50,8 @@ class OpenLayers3Map extends Map {
       const styleFunc = olms.getStyleFunction(jsonStyle, 'openmaptiles', this.resolutions)
       this.layer.setStyle(styleFunc)
 
-      console.log(jsonStyle.center, jsonStyle.zoom)
       const map = new ol.Map({
-      target: this.container,
+        target: this.container,
         layers: [this.layer],
         view: new ol.View({
           center: jsonStyle.center,

src/components/modals/SourcesModal.jsx

@@ -195,7 +195,11 @@ class SourcesModal extends React.Component {
   render() {
     const activeSources = Object.keys(this.props.mapStyle.sources).map(sourceId => {
       const source = this.props.mapStyle.sources[sourceId]
-      return <SourceEditorLayout sourceId={sourceId} source={source} />
+      return <SourceEditorLayout
+        key={sourceId}
+        sourceId={sourceId}
+        source={source}
+      />
     })
 
     const tilesetOptions = publicSources.filter(source => !(source.id in this.props.mapStyle.sources)).map(source => {

src/libs/layerwatcher.js

@@ -45,7 +45,6 @@ export default class LayerWatcher {
         this._vectorLayers[vectorLayerId] = knownProperties
       })
     })
-    console.log(this.vectorLayers)
   }
 
   /** Access all known sources and their vector tile ids */