feat(map-legend): add dynamic legend generation based on map context

libs/feature/record/src/lib/map-view/map-view.component.html

@@ -31,8 +31,46 @@
       >
         <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
       </button>
+      <gn-ui-button
+        type="primary"
+        (buttonClick)="resetSelection()"
+        extraClass="rounded absolute right-[0.5em] p-2 text-xs"
+      >
+        <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
+      </gn-ui-button>
       <gn-ui-feature-detail [feature]="selection"></gn-ui-feature-detail>
     </div>
+
+    <div
+      class="top-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"
+      [ngClass]="{ 'right-[1em]': !selection, 'right-[16em]': selection }"
+      [hidden]="!showLegend || !legendExists"
+    >
+      <div class="flex justify-between items-center mb-2">
+        <div class="text-primary font-bold">Legend</div>
+        <gn-ui-button
+          type="primary"
+          (buttonClick)="toggleLegend()"
+          extraClass="rounded p-2 text-xs"
+        >
+          <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
+        </gn-ui-button>
+      </div>
+      <gn-ui-map-legend
+        [context]="mapContext$ | async"
+        (legendStatusChange)="onLegendStatusChange($event)"
+      ></gn-ui-map-legend>
+    </div>
+
+    <gn-ui-button
+      *ngIf="!showLegend && legendExists && !selection"
+      type="primary"
+      (buttonClick)="toggleLegend()"
+      extraClass="absolute top-[1em] right-[1em] rounded p-2 text-sm"
+    >
+      Legend
+    </gn-ui-button>
+
     <gn-ui-loading-mask
       *ngIf="loading"
       class="absolute inset-0"

libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -42,13 +42,14 @@ import { Feature } from 'geojson'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
 import { matClose } from '@ng-icons/material-icons/baseline'
 import { CommonModule } from '@angular/common'
-import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs'
+import { ButtonComponent, DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs'
 import { TranslateModule } from '@ngx-translate/core'
 import { ExternalViewerButtonComponent } from '../external-viewer-button/external-viewer-button.component'
 import {
   LoadingMaskComponent,
   PopupAlertComponent,
 } from '@geonetwork-ui/ui/widgets'
+import { MapLegendComponent } from '../../../../../ui/map/src/lib/components/map-legend/map-legend.component'
 
 @Component({
   selector: 'gn-ui-map-view',
@@ -66,13 +67,28 @@ import {
     LoadingMaskComponent,
     NgIconComponent,
     ExternalViewerButtonComponent,
+    MapLegendComponent,
+    ButtonComponent,
   ],
   viewProviders: [provideIcons({ matClose })],
 })
 export class MapViewComponent implements AfterViewInit {
   @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   selection: Feature
+  showLegend = true
+  legendExists = false
+
+  toggleLegend() {
+    this.showLegend = !this.showLegend
+  }
+
+  onLegendStatusChange(status: boolean) {
+    this.legendExists = status
+    if (!status) {
+      this.showLegend = false
+    }
+  }
 
   compatibleMapLinks$ = combineLatest([
     this.mdViewFacade.mapApiLinks$,

libs/ui/map/src/lib/components/map-legend/map-legend.component.css

@@ -0,0 +1,3 @@
+.geosdk--legend-container {
+  overflow: auto;
+}

libs/ui/map/src/lib/components/map-legend/map-legend.component.html

@@ -0,0 +1 @@
+<div *ngIf="legendHTML" [innerHTML]="legendHTML.outerHTML"></div>

libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { MapLegendComponent } from './map-legend.component'
+
+describe('MapLegendComponent', () => {
+  let component: MapLegendComponent
+  let fixture: ComponentFixture<MapLegendComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MapLegendComponent],
+    })
+    fixture = TestBed.createComponent(MapLegendComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

libs/ui/map/src/lib/components/map-legend/map-legend.component.ts

@@ -0,0 +1,36 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core'
+import { MapContext } from '@geospatial-sdk/core'
+import { createLegendFromLayer } from '@geospatial-sdk/legend'
+import { NgIf } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-map-legend',
+  templateUrl: './map-legend.component.html',
+  standalone: true,
+  styleUrls: ['./map-legend.component.css'],
+  encapsulation: ViewEncapsulation.None,
+  imports: [NgIf],
+})
+export class MapLegendComponent implements OnChanges {
+  @Input() context: MapContext | null
+  @Output() legendStatusChange = new EventEmitter<boolean>()
+  legendHTML: HTMLElement | false
+
+  async ngOnChanges(changes: SimpleChanges) {
+    if ('context' in changes && !changes['context'].isFirstChange()) {
+      const mapContectLayer = changes['context'].currentValue.layers[0]
+      console.log(mapContectLayer)
+      this.legendHTML = await createLegendFromLayer(mapContectLayer)
+      console.log(this.legendHTML)
+      this.legendStatusChange.emit(!!this.legendHTML)
+    }
+  }
+}

package.json

@@ -61,6 +61,7 @@
     "@camptocamp/ogc-client": "1.1.1-dev.3e2d3cc",
     "@geospatial-sdk/core": "0.0.5-dev.29",
     "@geospatial-sdk/geocoding": "0.0.5-dev.29",
+    "@geospatial-sdk/legend": "^0.0.5-dev.31",
     "@geospatial-sdk/openlayers": "0.0.5-dev.29",
     "@ltd/j-toml": "~1.35.2",
     "@messageformat/core": "^3.0.1",