Added option to display tile boundries (issue #202)

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

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