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
+}