Merge pull request #1991 from asfadmin/tyler/displacement-overview

feat: disp overviews in layer selector
asfadmin · Oct 21, 2024 · d75ab71 · d75ab71
2 parents d5c886e + f547bd2
commit d75ab71
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 13 deletions.
diff --git a/src/app/components/map/map-controls/layer-selector/layer-selector.component.html b/src/app/components/map/map-controls/layer-selector/layer-selector.component.html
@@ -62,6 +62,29 @@
       </button>
     </mat-menu>
   </button>
+  <button mat-menu-item class="control-mat-checkbox-toggle" [matMenuTriggerFor]="timeseriesCoherence"
+  (click)="clearDisplacementLayer()"
+  >
+    <mat-checkbox class="checkbox" [disabled]="true" [checked]="displacementOverview">
+    </mat-checkbox>
+    Displacement Overview
+    <mat-menu #timeseriesCoherence="matMenu">
+      <button class="control-mat-checkbox-toggle" mat-menu-item (click)="onSetDisplacementLayer('ASC')">
+        <mat-radio-button
+        [disabled]="true"
+        [checked]="displacementOverview === 'ASC'"
+        ></mat-radio-button>
+        ASC
+      </button>
+      <button class="control-mat-checkbox-toggle" mat-menu-item (click)="onSetDisplacementLayer('DESC')">
+        <mat-radio-button
+        [disabled]="true"
+        [checked]="displacementOverview === 'DESC'"
+        ></mat-radio-button>
+        DESC
+      </button>
+    </mat-menu>
+  </button>
 
   <button mat-menu-item
     class="control-mat-checkbox-toggle"

diff --git a/src/app/components/map/map-controls/layer-selector/layer-selector.component.ts b/src/app/components/map/map-controls/layer-selector/layer-selector.component.ts
@@ -35,6 +35,7 @@ export class LayerSelectorComponent implements OnInit, OnDestroy {
   public breakpoint: models.Breakpoints;
   public breakpoints = models.Breakpoints;
   private coherenceLayerOpacity: number;
+  public displacementOverview;
 
 
   private subs = new SubSink();
@@ -105,6 +106,14 @@ export class LayerSelectorComponent implements OnInit, OnDestroy {
       this.onSetCoherenceLayer(months);
     }
   }
+  public onSetDisplacementLayer(type: string) {
+    this.displacementOverview = type;
+    this.mapService.setDisplacementOverview(type);
+  }
+  public clearDisplacementLayer() {
+    this.displacementOverview = null;
+    this.mapService.clearDisplacementOverview();
+  }
 
   public onSetCoherenceLayer(months: string): void {
     this.mapService.setCoherenceLayer(months);

diff --git a/...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss b/...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss
@@ -298,10 +298,10 @@ label {
   vertical-align: super;
 }
 
-::ng-deep .mdc-radio__inner-circle {
+:host ::ng-deep .mdc-radio__inner-circle {
   border-color: #236192 !important; /*change radio button color when selected*/
 }
 
-::ng-deep .mdc-radio__outer-circle {
+:host ::ng-deep .mdc-radio__outer-circle {
   border-color: #ffcc33 !important; /*change radio button color when selected*/
 }
diff --git a/src/app/services/map/map.service.ts b/src/app/services/map/map.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 
 import { BehaviorSubject, Subject } from 'rxjs';
-import { map, sampleTime, tap } from 'rxjs/operators';
+import { first, map, sampleTime, tap } from 'rxjs/operators';
 
 import { Collection, Feature, Map, View } from 'ol';
 import { Layer, Vector as VectorLayer } from 'ol/layer';
@@ -72,6 +72,8 @@ export class MapService {
 
   private localBrowseImageURL: string;
 
+  private displacementOverview: TileLayer;
+
   private selectClick = new Select({
     condition: click,
     style: polygonStyle.hidden,
@@ -481,16 +483,7 @@ export class MapService {
       collapsed: true,
       className: 'ol-overviewmap ol-custom-overviewmap',
     });
-    let test_url: string = 'https://d1riv60tezqha9.cloudfront.net/asjohnston/tiles/{z}/{x}/{-y}.png';
-    const test_source = new XYZ({
-      'url': test_url,
-      wrapX: models.mapOptions.wrapX,
-      tileSize: [256,256]
-    });
 
-    const test_layer = new TileLayer({ 'source': test_source,
-      extent: [-13914936.349159, 2753366.075619,-7235730.950894, 6274861.394007]
-     });
 
     const newMap = new Map({
       layers: [
@@ -500,7 +493,6 @@ export class MapService {
         this.selectedLayer,
         this.mapView?.gridlines,
         this.pinnedProducts,
-        test_layer
       ],
       target: 'map',
       view: this.mapView.view,
@@ -743,6 +735,37 @@ export class MapService {
     this.hasCoherenceLayer$.next(months);
   }
 
+  public setDisplacementOverview(type: string) {
+
+    let base_url = `https://opera-disp-tms-dev.s3.amazonaws.com/${type.toLowerCase()}/mask`;
+
+    this.http.get(`${base_url}/extent.json`).pipe(
+      first()
+    ).subscribe((response: any) => {
+      if (this.displacementOverview) {
+        this.map.removeLayer(this.displacementOverview);
+        this.displacementOverview = null;
+      }
+
+      const overview_source = new XYZ({
+        'url': `${base_url}/{z}/{x}/{y}.png`,
+        wrapX: models.mapOptions.wrapX,
+        tileSize: [256,256]
+      });
+
+      this.displacementOverview = new TileLayer({ 'source': overview_source,
+        'extent': response['extent']
+       });
+
+       this.map.addLayer(this.displacementOverview);
+    })
+
+  }
+  public clearDisplacementOverview() {
+    this.map.removeLayer(this.displacementOverview);
+    this.displacementOverview = null;
+  }
+
   public setDisplacementLayer(points: Point[]) {
     if (!!this.displacmentLayer) {
       this.map.removeLayer(this.displacmentLayer);