feat(landing): toggle to show map tile boundaries (#2758)

Author: blacha

packages/landing/src/components/debug.tsx

@@ -91,6 +91,12 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> {
     this.renderWMTS();
   }
 
+  /** Show the source bounding box ont he map */
+  toggleTileBoundary: ChangeEventHandler = (e) => {
+    const target = e.target as HTMLInputElement;
+    Config.map.setDebug('debug.tile', target.checked);
+  };
+
   /** Show the source bounding box ont he map */
   toggleCogs: ChangeEventHandler = (e) => {
     const target = e.target as HTMLInputElement;
@@ -153,6 +159,7 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> {
         {this.renderPurple()}
         {this.renderCogToggle()}
         {this.renderSourceToggle()}
+        {this.renderTileToggle()}
       </div>
     );
   }
@@ -216,6 +223,15 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> {
     );
   }
 
+  renderTileToggle(): ReactNode {
+    return (
+      <div className="debug__info">
+        <label className="debug__label">Tile Boundaries</label>
+        <input type="checkbox" onChange={this.toggleTileBoundary} checked={Config.map.debug['debug.tile']} />
+      </div>
+    );
+  }
+
   downloadSource = async (): Promise<void> => {
     const im = this.state.imagery;
     if (im == null) return;
@@ -338,6 +354,8 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> {
   setVectorShown(isShown: boolean, type: 'source' | 'cog'): void {
     const map = this.props.map;
 
+    map.showTileBoundaries = Config.map.debug['debug.tile'];
+
     const layerId = Config.map.layerId;
     const sourceId = `${layerId}_${type}`;
     const layerFillId = `${sourceId}_fill`;

packages/landing/src/config.debug.ts

@@ -6,6 +6,8 @@ export interface DebugState {
   'debug.source': boolean;
   /** Should the cog outlines be shown */
   'debug.cog': boolean;
+  /** Should the map tile boundaries be shown */
+  'debug.tile': boolean;
   /** Should things be hidden to make a better screenshot */
   'debug.screenshot': boolean;
   /** What opacity is the aerial layer, 0 is off */
@@ -22,6 +24,7 @@ export const DebugDefaults: DebugState = {
   debug: false,
   'debug.background': false,
   'debug.source': false,
+  'debug.tile': false,
   'debug.cog': false,
   'debug.screenshot': false,
   'debug.layer.linz-aerial': 0,
@@ -56,6 +59,7 @@ export class ConfigDebug {
     }
     isChanged = setKey(opt, 'debug', true);
     isChanged = setKey(opt, 'debug.background', url.get('debug.background')) || isChanged;
+    isChanged = setKey(opt, 'debug.tile', url.get('debug.tile') != null) || isChanged;
     isChanged = setKey(opt, 'debug.source', url.get('debug.source') != null) || isChanged;
     isChanged = setKey(opt, 'debug.cog', url.get('debug.cog') != null) || isChanged;
     isChanged = setKey(opt, 'debug.screenshot', url.get('debug.screenshot') != null) || isChanged;