Merge pull request #33 from MarshMapper/custom-layer-list

Display the list of protected areas in the current view using

src/app/components/arc-map/arc-map.component.html

@@ -17,7 +17,29 @@
     </arcgis-map>
     @if (showInfoPanel) {
     <div class="info-panel">
-        Feature informaton panel
+        <mat-tab-group preserveContent>
+            <mat-tab class="tab-content" label="Places">
+                <ng-template matTabContent>
+                    <div [ngClass]="getFeatureContainerClass()" id="featureTableContainer">
+                        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+
+                            <!-- ID Column (Hidden) -->
+                            <ng-container matColumnDef="id">
+                              <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+                            </ng-container>
+
+                            <!-- Name Column -->
+                            <ng-container matColumnDef="name">
+                              <td class="table-cell" mat-cell *matCellDef="let element"> {{element.name}} </td>
+                            </ng-container>
+
+                            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                          </table>
+                    </div>
+                </ng-template>      
+            </mat-tab>
+            <mat-tab class="tab-content" label="Layers">  </mat-tab>
+        </mat-tab-group>    
     </div>
     }
 </div>

src/app/components/arc-map/arc-map.component.scss

@@ -13,11 +13,29 @@
     display: grid;
 }
 .map-container-vertical {
-    grid-template-rows: 1fr auto;
+    grid-template-rows: 60% 40%;
 }
 .map-container-horizontal {
-    grid-template-columns: 1fr auto;
+    grid-template-columns: 1fr 30%;
 }
 .map-container-map-only {
     grid-template-columns: 1fr;
+}
+.info-panel {
+    height: 100%;
+    overflow: auto;
+}
+.tab-content {
+    height: 600px;
+}
+.feature-table-container-horizontal {
+    height: calc(100vh - 140px);
+}
+.feature-table-container-vertical {
+    height: calc(40vh - 80px);
+}
+.mat-mdc-row {
+    height: 24px;
+    font-size: 14px;
+    line-height: 18px;
 }

src/app/components/arc-map/arc-map.component.ts

@@ -4,6 +4,10 @@ import { defineCustomElements as defineCalciteElements } from "@esri/calcite-com
 import { CommonModule } from '@angular/common';
 import { ComponentLibraryModule } from '@arcgis/map-components-angular';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableModule, MatTableDataSource } from '@angular/material/table';
 import { map, shareReplay } from 'rxjs/operators';
 import { CalciteComponentsModule } from '@esri/calcite-components-angular';
 import { ProtectedAreasService } from '../../services/protected-areas.service';
@@ -14,26 +18,31 @@ import ImageryTileLayer from '@arcgis/core/layers/ImageryTileLayer';
 import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
 import View from "@arcgis/core/views/View";
 import LayerView from "@arcgis/core/views/layers/LayerView";
-import { whenOnce } from '@arcgis/core/core/reactiveUtils';
+import { when, whenOnce } from '@arcgis/core/core/reactiveUtils';
 import { NjHistoricalMapsService, NjHistoricalMapType } from '../../services/nj-historical-maps.service';
 import Layer from '@arcgis/core/layers/Layer';
 
 @Component({
   selector: 'app-arc-map',
   standalone: true,
-  imports: [ CommonModule, ComponentLibraryModule, CalciteComponentsModule ],
+  imports: [CommonModule, ComponentLibraryModule, CalciteComponentsModule, MatTabsModule, MatTableModule, 
+    MatPaginatorModule, MatSortModule],
   templateUrl: './arc-map.component.html',
   styleUrl: './arc-map.component.scss'
 })
 export class ArcMapComponent implements OnInit {
   public isLoading: boolean = true;
-  public showInfoPanel: boolean = false;
+  public showInfoPanel: boolean = true;
   public isSmallPortrait: boolean = false;
   private breakpointObserver = inject(BreakpointObserver);
+  // private unprotectedAreasLayer: ImageryTileLayer | undefined; 
+  // private protectedAreasLayer: FeatureLayer | undefined; 
+  displayedColumns: string[] = ['name']; // Only 'name' column is displayed
+  dataSource = new MatTableDataSource();
 
-  isSmallPortrait$ = this.breakpointObserver.observe([ 
-    Breakpoints.TabletPortrait, 
-    Breakpoints.HandsetPortrait ])
+  isSmallPortrait$ = this.breakpointObserver.observe([
+    Breakpoints.TabletPortrait,
+    Breakpoints.HandsetPortrait])
     .pipe(
       map(result => result.matches),
       shareReplay()
@@ -56,6 +65,7 @@ export class ArcMapComponent implements OnInit {
     map.add(protectedAreasLayer);
     this.protectedAreasService.initializePopup(view);
 
+
     // add the NJ Historical Maps, but they won't be visible by default
     const mapTypes = Object.values(NjHistoricalMapType);
     mapTypes.forEach((mapType) => {
@@ -64,26 +74,40 @@ export class ArcMapComponent implements OnInit {
         map.add(historicalLayer);
       }
     });
-
-    this.waitForLayersToLoad(view, unprotectedAreasLayer, protectedAreasLayer);
+    this.waitForLayersToLoad(view, map, unprotectedAreasLayer, protectedAreasLayer);
   }
-  waitForLayersToLoad(view: View, unprotectedAreasLayer: ImageryTileLayer, protectedAreasLayer: FeatureLayer): void {
+  waitForLayersToLoad(view: View, map: Map, unprotectedAreasLayer: ImageryTileLayer, protectedAreasLayer: FeatureLayer): void {
     let unprotectedAreasView: LayerView;
     let protectedAreasView: LayerView;
 
     Promise.all([
       view.whenLayerView(unprotectedAreasLayer),
       view.whenLayerView(protectedAreasLayer)
     ]).then(([unprotectedView, protectedView]) => {
-        unprotectedAreasView = unprotectedView;
-        protectedAreasView = protectedView;
-        return Promise.all(
-          [
-            whenOnce(() => !unprotectedAreasView.updating),
-            whenOnce(() => !protectedAreasView.updating)
-          ]
-        );
-    }).then(() => {
+      unprotectedAreasView = unprotectedView;
+      protectedAreasView = protectedView;
+      when(
+        () => !protectedView.updating,
+        (val) => {
+          // get all the features in view from the layerView
+          protectedView.queryFeatures().then((results) => {
+            let features: any[] = [];
+            // add to array with just the name for display and the id for selection / tracking
+            results.features.forEach((feature) => {
+              features.push({ id: feature.attributes.id, name: feature.attributes.name });
+            });
+            features.sort((a, b) => a.name.localeCompare(b.name));
+            this.dataSource.data = features;
+          })
+        });
+      return Promise.all(
+        [
+          whenOnce(() => !unprotectedAreasView.updating),
+          whenOnce(() => !protectedAreasView.updating)
+        ]
+      );
+    })
+    .then(() => {
       this.progressService.setWorkInProgress(false);
     });
   }
@@ -93,7 +117,9 @@ export class ArcMapComponent implements OnInit {
     }
     return 'map-container-map-only';
   }
-
+  getFeatureContainerClass(): string {
+    return this.isSmallPortrait ? 'feature-table-container-vertical' : 'feature-table-container-horizontal';
+  }
   ngOnInit(): void {
     defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.29/assets" });
     defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.5.1/assets" });