diff --git a/packages/landing/src/components/debug.tsx b/packages/landing/src/components/debug.tsx index d1302ed56..e0839e0a8 100644 --- a/packages/landing/src/components/debug.tsx +++ b/packages/landing/src/components/debug.tsx @@ -21,6 +21,7 @@ export interface DebugState { imagery?: ConfigImagery | null; config?: string | null; isCog?: boolean; + hasCaptureArea?: boolean; } /** Layer Id for the hillshade layer in the debug map */ @@ -184,6 +185,10 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> { this.setState({ isCog: cog != null }); }); + void this.debugMap.fetchSourceLayer(imageryId, debugTypes['capture-area']).then((c) => { + this.setState({ hasCaptureArea: c != null }); + }); + return ConfigData.getImagery(tileSetId, imageryId).then((imagery) => { this.setState({ imagery, config: Config.map.config }); }); @@ -263,30 +268,6 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> { ); } - renderCogToggle(): ReactNode { - if (this.state.imagery == null) return null; - const cogLocation = WindowUrl.toImageryUrl(this.state.imagery.id, debugTypes.cog.file); - if (!this.state.isCog) return; - return ( - -
- - -
- {this.state.featureCogId == null ? null : ( -
- - {String(this.state.featureCogName).split('/').pop()} -
- )} -
- ); - } - renderTileToggle(): ReactNode { return (
@@ -430,9 +411,34 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> { ); } + renderCogToggle(): ReactNode { + if (this.state.imagery == null) return null; + const cogLocation = WindowUrl.toImageryUrl(this.state.imagery.id, debugTypes.cog.file); + if (!this.state.isCog) return; + return ( + +
+ + +
+ {this.state.featureCogId == null ? null : ( +
+ + {String(this.state.featureCogName).split('/').pop()} +
+ )} +
+ ); + } + renderCaptureAreaToggle(): ReactNode { if (this.state.imagery == null) return null; const location = WindowUrl.toImageryUrl(this.state.imagery.id, debugTypes['capture-area'].file); + if (!this.state.hasCaptureArea) return; return (