Merge pull request #315 from orangemug/feature/option-to-display-tile-boundaries

Added option to display tile boundaries

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 {
       />
       <SettingsModal
         mapStyle={this.state.mapStyle}
-        onStyleChanged={this.onStyleChanged}
+        onStyleChanged={this.onStyleChanged.bind(this)}
         isOpen={this.state.isOpen.settings}
         onOpenToggle={this.toggleModal.bind(this, 'settings')}
       />
       <ExportModal
         mapStyle={this.state.mapStyle}
-        onStyleChanged={this.onStyleChanged}
+        onStyleChanged={this.onStyleChanged.bind(this)}
         isOpen={this.state.isOpen.export}
         onOpenToggle={this.toggleModal.bind(this, 'export')}
       />
@@ -519,7 +524,7 @@ export default class App extends React.Component {
       />
       <SourcesModal
         mapStyle={this.state.mapStyle}
-        onStyleChanged={this.onStyleChanged}
+        onStyleChanged={this.onStyleChanged.bind(this)}
         isOpen={this.state.isOpen.sources}
         onOpenToggle={this.toggleModal.bind(this, 'sources')}
       />

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');

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