From 0516e587b4fd6374a73808c04e22ebadb227226f Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 3 Jun 2018 17:17:45 +0100 Subject: [PATCH 1/5] Added option to display tile boundries (issue #202) --- src/components/App.jsx | 4 ++++ src/components/map/MapboxGlMap.jsx | 12 ++++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index d070dfa..3289707 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -172,6 +172,9 @@ export default class App extends React.Component { shortcuts: false, export: false, }, + mapOptions: { + showTileBoundaries: !!queryObj.showTileBoundaries + }, mapFilter: queryObj["color-blindness-emulation"], } @@ -402,6 +405,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(); diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index b5ff174..792c017 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 = { @@ -101,11 +102,18 @@ export default class MapboxGlMap extends React.Component { } 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); + + if(mapOpts.showTileBoundaries) { + map.showTileBoundaries = mapOpts.showTileBoundaries; + } const zoom = new ZoomControl; map.addControl(zoom, 'top-right'); From 6cdb56d13fcf3c0867448bb58f5f409e0cc1e40a Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 3 Jun 2018 17:33:08 +0100 Subject: [PATCH 2/5] Improved showTileBoundaries and query string support --- src/components/App.jsx | 3 ++- src/components/map/MapboxGlMap.jsx | 5 ++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index 3289707..4d724f7 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' @@ -173,7 +174,7 @@ export default class App extends React.Component { export: false, }, mapOptions: { - showTileBoundaries: !!queryObj.showTileBoundaries + showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries") }, mapFilter: queryObj["color-blindness-emulation"], } diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 792c017..85faf47 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -99,6 +99,7 @@ export default class MapboxGlMap extends React.Component { if(this.props.inspectModeEnabled) { this.state.inspect.render() } + this.state.map.showTileBoundaries = this.props.options.showTileBoundaries; } componentDidMount() { @@ -111,9 +112,7 @@ export default class MapboxGlMap extends React.Component { const map = new MapboxGl.Map(mapOpts); - if(mapOpts.showTileBoundaries) { - map.showTileBoundaries = mapOpts.showTileBoundaries; - } + map.showTileBoundaries = mapOpts.showTileBoundaries; const zoom = new ZoomControl; map.addControl(zoom, 'top-right'); From ffce8e3ba5cfaef4ac692c0f733b893ed3ff97e0 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 3 Jun 2018 17:37:54 +0100 Subject: [PATCH 3/5] Added missing file. --- src/libs/query-util.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/libs/query-util.js 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 +} From 1fe31ac0ec515a42fe8c6e42e4edcbd5129f41a0 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 3 Jun 2018 17:55:46 +0100 Subject: [PATCH 4/5] Fix for bad lint error. --- src/components/map/MapboxGlMap.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 85faf47..ebc65b7 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -93,13 +93,16 @@ 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() } - this.state.map.showTileBoundaries = this.props.options.showTileBoundaries; + + map.showTileBoundaries = this.props.options.showTileBoundaries; } componentDidMount() { From cd28a53f6ada16c7c7fed9b3437ee1b342c7702e Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 3 Jun 2018 18:28:55 +0100 Subject: [PATCH 5/5] Fixed failing tests, these weren't flaky tests... ooops! --- src/components/App.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index 4d724f7..f35ea93 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -507,13 +507,13 @@ export default class App extends React.Component { /> @@ -524,7 +524,7 @@ export default class App extends React.Component { />