From 0516e587b4fd6374a73808c04e22ebadb227226f Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 3 Jun 2018 17:17:45 +0100
Subject: [PATCH] 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 d070dfa1..32897072 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 b5ff174d..792c017a 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');