From 42fd5dcfa762106c59721c9ab4076658835417b5 Mon Sep 17 00:00:00 2001 From: Lukas Martinelli Date: Thu, 22 Dec 2016 21:06:32 +0100 Subject: [PATCH] Remove logging and force OL3 to redraw --- src/components/App.jsx | 22 ++++++---------------- src/components/Toolbar.jsx | 2 -- src/components/fields/ColorField.jsx | 2 +- src/components/fields/PropertyGroup.jsx | 1 - src/components/map/OpenLayers3Map.jsx | 12 +++++++++--- src/components/modals/SourcesModal.jsx | 6 +++++- src/libs/layerwatcher.js | 1 - 7 files changed, 21 insertions(+), 25 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index e3a527de..2e82a002 100644 --- a/src/components/App.jsx +++ b/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 = diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index ad186572..996d9660 100644 --- a/src/components/Toolbar.jsx +++ b/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) { diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx index b32b15a0..c14573bc 100644 --- a/src/components/fields/ColorField.jsx +++ b/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, diff --git a/src/components/fields/PropertyGroup.jsx b/src/components/fields/PropertyGroup.jsx index fb460de3..7ba9adf6 100644 --- a/src/components/fields/PropertyGroup.jsx +++ b/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) diff --git a/src/components/map/OpenLayers3Map.jsx b/src/components/map/OpenLayers3Map.jsx index ab596d43..bba2e3bf 100644 --- a/src/components/map/OpenLayers3Map.jsx +++ b/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, diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx index 6e19de5e..cad74ea9 100644 --- a/src/components/modals/SourcesModal.jsx +++ b/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 + return }) const tilesetOptions = publicSources.filter(source => !(source.id in this.props.mapStyle.sources)).map(source => { diff --git a/src/libs/layerwatcher.js b/src/libs/layerwatcher.js index b6988299..c81be523 100644 --- a/src/libs/layerwatcher.js +++ b/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 */