feat(landing): Disable capture area checkbox if capture-area.geojson …

…not exists. (#3312) ### Motivation We need to disable the checkbox if capture-area.geojson not exist or can't be loaded as source. ### Modifications Use same way to disable it as cog checkbox. ### Verification
linz · Jul 9, 2024 · 5a1d633 · 5a1d633
1 parent 07b8aeb
commit 5a1d633
Showing 1 changed file with 30 additions and 24 deletions.
diff --git 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 (
-      <Fragment>
-        <div className="debug__info">
-          <label className="debug__label">
-            <a href={cogLocation} title="Source geojson">
-              Cogs
-            </a>
-          </label>
-          <input type="checkbox" onChange={this.toggleCogs} checked={Config.map.debug['debug.cog']} />
-        </div>
-        {this.state.featureCogId == null ? null : (
-          <div className="debug__info" title={String(this.state.featureCogName)}>
-            <label className="debug__label">CogId</label>
-            {String(this.state.featureCogName).split('/').pop()}
-          </div>
-        )}
-      </Fragment>
-    );
-  }
-
   renderTileToggle(): ReactNode {
     return (
       <div className="debug__info">
@@ -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 (
+      <Fragment>
+        <div className="debug__info">
+          <label className="debug__label">
+            <a href={cogLocation} title="Source geojson">
+              Cogs
+            </a>
+          </label>
+          <input type="checkbox" onChange={this.toggleCogs} checked={Config.map.debug['debug.cog']} />
+        </div>
+        {this.state.featureCogId == null ? null : (
+          <div className="debug__info" title={String(this.state.featureCogName)}>
+            <label className="debug__label">CogId</label>
+            {String(this.state.featureCogName).split('/').pop()}
+          </div>
+        )}
+      </Fragment>
+    );
+  }
+
   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 (
       <Fragment>
         <div className="debug__info">