diff --git a/src/components/App.jsx b/src/components/App.jsx index d070dfa..f35ea93 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -31,6 +31,7 @@ import LayerWatcher from '../libs/layerwatcher' import tokens from '../config/tokens.json' import isEqual from 'lodash.isequal' import Debug from '../libs/debug' +import queryUtil from '../libs/query-util' import MapboxGl from 'mapbox-gl' import mapboxUtil from 'mapbox-gl/src/util/mapbox' @@ -172,6 +173,9 @@ export default class App extends React.Component { shortcuts: false, export: false, }, + mapOptions: { + showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries") + }, mapFilter: queryObj["color-blindness-emulation"], } @@ -402,6 +406,7 @@ export default class App extends React.Component { mapRenderer() { const mapProps = { mapStyle: style.replaceAccessToken(this.state.mapStyle, {allowFallback: true}), + options: this.state.mapOptions, onDataChange: (e) => { this.layerWatcher.analyzeMap(e.map) this.fetchSources(); @@ -502,13 +507,13 @@ export default class App extends React.Component { /> @@ -519,7 +524,7 @@ export default class App extends React.Component { /> diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index b5ff174..ebc65b7 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -58,6 +58,7 @@ export default class MapboxGlMap extends React.Component { mapStyle: PropTypes.object.isRequired, inspectModeEnabled: PropTypes.bool.isRequired, highlightedLayer: PropTypes.object, + options: PropTypes.object, } static defaultProps = { @@ -92,20 +93,29 @@ export default class MapboxGlMap extends React.Component { } componentDidUpdate(prevProps) { + const map = this.state.map; + if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) { this.state.inspect.toggleInspector() } if(this.props.inspectModeEnabled) { this.state.inspect.render() } + + map.showTileBoundaries = this.props.options.showTileBoundaries; } componentDidMount() { - const map = new MapboxGl.Map({ + const mapOpts = { + ...this.props.options, container: this.container, style: this.props.mapStyle, hash: true, - }) + } + + const map = new MapboxGl.Map(mapOpts); + + map.showTileBoundaries = mapOpts.showTileBoundaries; const zoom = new ZoomControl; map.addControl(zoom, 'top-right'); diff --git a/src/libs/query-util.js b/src/libs/query-util.js new file mode 100644 index 0000000..0361388 --- /dev/null +++ b/src/libs/query-util.js @@ -0,0 +1,17 @@ +function asBool(queryObj, key) { + if(queryObj.hasOwnProperty(key)) { + if(queryObj[key].match(/^false|0$/)) { + return false; + } + else { + return true; + } + } + else { + return false; + } +} + +module.exports = { + asBool +}