From 87daf6fb76861634389399dadb34e0abeef05a24 Mon Sep 17 00:00:00 2001 From: orangemug <info@orangemug.co.uk> Date: Sun, 19 May 2019 10:09:44 +0100 Subject: [PATCH] Fixes because I was incorrectly assuming mgljs only --- src/components/App.jsx | 23 +++++++++++++--------- src/components/modals/DebugModal.js | 30 ++++++++++++++++++----------- 2 files changed, 33 insertions(+), 20 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index 8be737f..7741969 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -213,7 +213,7 @@ export default class App extends React.Component { survey: localStorage.hasOwnProperty('survey') ? false : true, debug: false, }, - mapOptions: { + mapboxGlDebugOptions: { showTileBoundaries: false, showCollisionBoxes: false, showOverdrawInspector: false, @@ -469,18 +469,22 @@ export default class App extends React.Component { } } + _getRenderer () { + const metadata = this.state.mapStyle.metadata || {}; + return metadata['maputnik:renderer'] || 'mbgljs'; + } + mapRenderer() { const mapProps = { mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}), - options: this.state.mapOptions, + options: this.state.mapboxGlDebugOptions, onDataChange: (e) => { this.layerWatcher.analyzeMap(e.map) this.fetchSources(); }, } - const metadata = this.state.mapStyle.metadata || {} - const renderer = metadata['maputnik:renderer'] || 'mbgljs' + const renderer = this._getRenderer(); let mapElement; @@ -532,10 +536,10 @@ export default class App extends React.Component { this.setModal(modalName, !this.state.isOpen[modalName]); } - onChangeDebug = (key, value) => { + onChangeMaboxGlDebug = (key, value) => { this.setState({ - mapOptions: { - ...this.state.mapOptions, + mapboxGlDebugOptions: { + ...this.state.mapboxGlDebugOptions, [key]: value, } }); @@ -593,8 +597,9 @@ export default class App extends React.Component { const modals = <div> <DebugModal - debugOptions={this.state.mapOptions} - onChangeDebug={this.onChangeDebug} + renderer={this._getRenderer()} + mapboxGlDebugOptions={this.state.mapboxGlDebugOptions} + onChangeMaboxGlDebug={this.onChangeMaboxGlDebug} isOpen={this.state.isOpen.debug} onOpenToggle={this.toggleModal.bind(this, 'debug')} /> diff --git a/src/components/modals/DebugModal.js b/src/components/modals/DebugModal.js index 9973033..bddb48f 100644 --- a/src/components/modals/DebugModal.js +++ b/src/components/modals/DebugModal.js @@ -7,9 +7,10 @@ import Modal from './Modal' class DebugModal extends React.Component { static propTypes = { isOpen: PropTypes.bool.isRequired, - onChangeDebug: PropTypes.func.isRequired, + renderer: PropTypes.string.isRequired, + onChangeMaboxGlDebug: PropTypes.func.isRequired, onOpenToggle: PropTypes.func.isRequired, - debugOptions: PropTypes.object, + mapboxGlDebugOptions: PropTypes.object, } render() { @@ -20,15 +21,22 @@ class DebugModal extends React.Component { title={'Debug'} > <div className="maputnik-modal-section maputnik-modal-shortcuts"> - <ul> - {Object.entries(this.props.debugOptions).map(([key, val]) => { - return <li key={key}> - <label> - <input type="checkbox" value={val} onClick={(e) => this.props.onChangeDebug(key, e.target.checked)} /> {key} - </label> - </li> - })} - </ul> + {this.props.renderer === 'mbgljs' && + <ul> + {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => { + return <li key={key}> + <label> + <input type="checkbox" checked={val} onClick={(e) => this.props.onChangeMaboxGlDebug(key, e.target.checked)} /> {key} + </label> + </li> + })} + </ul> + } + {this.props.renderer === 'ol' && + <div> + No debug options available for the OpenLayers renderer + </div> + } </div> </Modal> }