schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2025-01-30 23:55:32 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixes because I was incorrectly assuming mgljs only

Browse source
This commit is contained in:
orangemug 2019-05-19 10:09:44 +01:00
parent 2776ac3ce0
commit 87daf6fb76
2 changed files with 33 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/App.jsx
View file

@ -213,7 +213,7 @@ export default class App extends React.Component {
survey: localStorage.hasOwnProperty('survey') ? false : true, survey: localStorage.hasOwnProperty('survey') ? false : true,
debug: false, debug: false,
}, },
mapOptions: { mapboxGlDebugOptions: {
showTileBoundaries: false, showTileBoundaries: false,
showCollisionBoxes: false, showCollisionBoxes: false,
showOverdrawInspector: 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() { mapRenderer() {
const mapProps = { const mapProps = {
mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}), mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}),
options: this.state.mapOptions, options: this.state.mapboxGlDebugOptions,
onDataChange: (e) => { onDataChange: (e) => {
this.layerWatcher.analyzeMap(e.map) this.layerWatcher.analyzeMap(e.map)
this.fetchSources(); this.fetchSources();
}, },
} }
const metadata = this.state.mapStyle.metadata || {} const renderer = this._getRenderer();
const renderer = metadata['maputnik:renderer'] || 'mbgljs'
let mapElement; let mapElement;
@ -532,10 +536,10 @@ export default class App extends React.Component {
this.setModal(modalName, !this.state.isOpen[modalName]); this.setModal(modalName, !this.state.isOpen[modalName]);
} }
onChangeDebug = (key, value) => { onChangeMaboxGlDebug = (key, value) => {
this.setState({ this.setState({
mapOptions: { mapboxGlDebugOptions: {
...this.state.mapOptions, ...this.state.mapboxGlDebugOptions,
[key]: value, [key]: value,
} }
}); });
@ -593,8 +597,9 @@ export default class App extends React.Component {
const modals = <div> const modals = <div>
<DebugModal <DebugModal
debugOptions={this.state.mapOptions} renderer={this._getRenderer()}
onChangeDebug={this.onChangeDebug} mapboxGlDebugOptions={this.state.mapboxGlDebugOptions}
onChangeMaboxGlDebug={this.onChangeMaboxGlDebug}
isOpen={this.state.isOpen.debug} isOpen={this.state.isOpen.debug}
onOpenToggle={this.toggleModal.bind(this, 'debug')} onOpenToggle={this.toggleModal.bind(this, 'debug')}
/> />

30
src/components/modals/DebugModal.js
View file

@ -7,9 +7,10 @@ import Modal from './Modal'
class DebugModal extends React.Component { class DebugModal extends React.Component {
static propTypes = { static propTypes = {
isOpen: PropTypes.bool.isRequired, isOpen: PropTypes.bool.isRequired,
onChangeDebug: PropTypes.func.isRequired, renderer: PropTypes.string.isRequired,
onChangeMaboxGlDebug: PropTypes.func.isRequired,
onOpenToggle: PropTypes.func.isRequired, onOpenToggle: PropTypes.func.isRequired,
debugOptions: PropTypes.object, mapboxGlDebugOptions: PropTypes.object,
} }
render() { render() {
@ -20,15 +21,22 @@ class DebugModal extends React.Component {
title={'Debug'} title={'Debug'}
> >
<div className="maputnik-modal-section maputnik-modal-shortcuts"> <div className="maputnik-modal-section maputnik-modal-shortcuts">
<ul> {this.props.renderer === 'mbgljs' &&
{Object.entries(this.props.debugOptions).map(([key, val]) => { <ul>
return <li key={key}> {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => {
<label> return <li key={key}>
<input type="checkbox" value={val} onClick={(e) => this.props.onChangeDebug(key, e.target.checked)} /> {key} <label>
</label> <input type="checkbox" checked={val} onClick={(e) => this.props.onChangeMaboxGlDebug(key, e.target.checked)} /> {key}
</li> </label>
})} </li>
</ul> })}
</ul>
}
{this.props.renderer === 'ol' &&
<div>
No debug options available for the OpenLayers renderer
</div>
}
</div> </div>
</Modal> </Modal>
} }