feat: add priority to map

asfadmin · Oct 22, 2024 · f126588 · f126588
1 parent 9722d8f
commit f126588
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 1 deletion.
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
@@ -86,6 +86,15 @@
     </mat-menu>
   </button>
 
+  <button mat-menu-item
+    class="control-mat-checkbox-toggle"
+    (click)="togglePriority()">
+    <mat-checkbox class="checkbox"
+      [disabled]="true"
+      [checked]="priorityEnabled">
+    </mat-checkbox>
+    Displacement Priority
+  </button>
   <button mat-menu-item
     class="control-mat-checkbox-toggle"
     (click)="onToggleGridlines()">

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
@@ -36,6 +36,7 @@ export class LayerSelectorComponent implements OnInit, OnDestroy {
   public breakpoints = models.Breakpoints;
   private coherenceLayerOpacity: number;
   public displacementOverview;
+  public priorityEnabled = false;
 
 
   private subs = new SubSink();
@@ -131,6 +132,16 @@ export class LayerSelectorComponent implements OnInit, OnDestroy {
 
     this.clearCoherenceLayer();
   }
+  public togglePriority(): void {
+    if(!this.priorityEnabled) {
+      this.mapService.enablePriority();
+      this.priorityEnabled = true;
+    }
+    else {
+      this.priorityEnabled = false;
+      this.mapService.disablePriority();
+    }
+  }
 
   public onToggleOverviewMap(isOpen: boolean): void {
     this.store$.dispatch(new mapStore.ToggleOverviewMap(!isOpen));

diff --git a/src/app/services/map/map.service.ts b/src/app/services/map/map.service.ts
@@ -45,6 +45,7 @@ import SimpleGeometry from 'ol/geom/SimpleGeometry';
 import { SetGeocode } from '@store/filters';
 import { Extent } from 'ol/extent';
 import { MultiPolygon } from 'ol/geom';
+import GeoJSON from 'ol/format/GeoJSON.js';
 
 @Injectable({
   providedIn: 'root'
@@ -73,6 +74,7 @@ export class MapService {
   private localBrowseImageURL: string;
 
   private displacementOverview: TileLayer;
+  private priorityOverview: VectorLayer<VectorSource>;
 
   private selectClick = new Select({
     condition: click,
@@ -816,7 +818,49 @@ export class MapService {
     this.layerService.coherenceLayer = null;
     this.hasCoherenceLayer$.next(null);
   }
-
+  public enablePriority(): void {
+    const source = new VectorSource({
+      url: '/assets/priority_rollout.json',
+      format: new GeoJSON({})
+    },
+    )
+    const colorTable = [
+      'rgba(092, 174, 099, 0.9)',
+      'rgba(195, 164, 207, 0.9)',
+      'rgba(152, 110, 172, 0.8)',
+      'rgba(116, 040, 129, 0.4)',
+    ]
+    this.priorityOverview = new VectorLayer({
+      source: source,
+      style: function(feature, _resolution) {
+        const test = feature.getProperties();
+        const priority= +test['priority'];
+        let color = '#FF0000';
+        if(priority === 0) {
+          color = colorTable[0];
+        } else if(priority <= 5) {
+          color = colorTable[1];
+        } else if(priority <= 20) {
+          color = colorTable[2];
+        } else {
+          color = colorTable[3]
+        }
+        return new Style({
+          fill: new Fill({
+            color: color
+          }),
+          stroke: new Stroke({
+            color: 'black',
+          })
+        });
+      }
+    })
+    this.map.addLayer(this.priorityOverview)
+  }
+  public disablePriority(): void {
+    this.map.removeLayer(this.priorityOverview);
+    this.priorityOverview = null;
+  }
   public createBrowseRasterCanvas(scenes: models.CMRProduct[]) {
     const scenesWithBrowse = scenes.filter(scene => scene.browses?.length > 0).slice(0, 10);