geonetwork-ui 2.4.0-dev.e4dc8777 → 2.4.0-dev.e5f8e61e

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts

@@ -5,49 +5,50 @@ import {
   LinkClassifierService,
   LinkUsage,
 } from '../../../../../../../libs/util/shared/src'
-import { Observable, of, throwError } from 'rxjs'
-import { map } from 'rxjs/operators'
-import { MapUtilsService } from '../../utils'
+import { firstValueFrom, Observable, of, throwError } from 'rxjs'
 import { MapFacade } from '../../+state/map.facade'
 import {
-  MapContextLayerModel,
-  MapContextLayerTypeEnum,
-} from '../../map-context/map-context.model'
-import {
-  DatasetDistribution,
+  DatasetOnlineResource,
   DatasetRecord,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { MapContextLayer } from '@geospatial-sdk/core'
+import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-add-layer-record-preview',
   templateUrl: './add-layer-record-preview.component.html',
   styleUrls: ['./add-layer-record-preview.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ThumbnailComponent, ButtonComponent, CommonModule],
 })
 export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
-  get mapLinks(): DatasetDistribution[] {
-    return (this.record as DatasetRecord).distributions.filter((link) =>
+  get mapLinks(): DatasetOnlineResource[] {
+    return (this.record as DatasetRecord).onlineResources.filter((link) =>
       this.linkClassifier.hasUsage(link, LinkUsage.MAP_API)
-    ) as DatasetDistribution[]
+    ) as DatasetOnlineResource[]
   }
 
   constructor(
     protected elementRef: ElementRef,
     private linkClassifier: LinkClassifierService,
-    private mapFacade: MapFacade,
-    private mapUtils: MapUtilsService
+    private mapFacade: MapFacade
   ) {
     super(elementRef)
   }
 
-  async handleLinkClick(link: DatasetDistribution) {
-    const layer = await this.getLayerFromLink(link).toPromise()
-    this.mapFacade.addLayer({ ...layer, title: this.record.title })
+  async handleLinkClick(link: DatasetOnlineResource) {
+    const layer = await firstValueFrom(this.getLayerFromLink(link))
+    const context = await firstValueFrom(this.mapFacade.context$)
+    this.mapFacade.applyContext({
+      ...context,
+      layers: [...context.layers, { ...layer, label: this.record.title }],
+    })
   }
 
-  getLayerFromLink(
-    link: DatasetDistribution
-  ): Observable<MapContextLayerModel> {
+  getLayerFromLink(link: DatasetOnlineResource): Observable<MapContextLayer> {
     if (link.type !== 'service')
       return throwError(
         () => 'map layer could not be built for this distribution'
@@ -55,20 +56,20 @@ export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
     if (link.accessServiceProtocol === 'wms') {
       return of({
         url: link.url.toString(),
-        type: MapContextLayerTypeEnum.WMS,
+        type: 'wms',
         name: link.name,
       })
     } else if (link.accessServiceProtocol === 'wmts') {
       return of({
         url: link.url.toString(),
-        type: MapContextLayerTypeEnum.WMTS,
+        type: 'wmts',
         name: link.name,
       })
     }
     return throwError(() => 'protocol not supported')
   }
 
-  getLinkLabel(link: DatasetDistribution) {
+  getLinkLabel(link: DatasetOnlineResource) {
     return getLinkLabel(link)
   }
 }

package/src/libs/feature/map/src/lib/add-layer-from-file/add-layer-from-file.component.ts

@@ -1,6 +1,10 @@
 import { ChangeDetectorRef, Component } from '@angular/core'
-import { MapContextLayerModel } from '../map-context/map-context.model'
 import { MapFacade } from '../+state/map.facade'
+import { MapContextLayerGeojson } from '@geospatial-sdk/core'
+import { firstValueFrom } from 'rxjs'
+import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
 
 const INVALID_FILE_FORMAT_ERROR_MESSAGE = 'Invalid file format'
 
@@ -8,6 +12,8 @@ const INVALID_FILE_FORMAT_ERROR_MESSAGE = 'Invalid file format'
   selector: 'gn-ui-add-layer-from-file',
   templateUrl: './add-layer-from-file.component.html',
   styleUrls: ['./add-layer-from-file.component.css'],
+  standalone: true,
+  imports: [UiInputsModule, TranslateModule, CommonModule],
 })
 export class AddLayerFromFileComponent {
   errorMessage: string | null = null
@@ -60,25 +66,30 @@ export class AddLayerFromFileComponent {
   }
 
   private addGeoJsonLayer(file: File) {
-    return new Promise<void>((resolve, reject) => {
+    return new Promise((resolve, reject) => {
       try {
         const reader = new FileReader()
         reader.onload = () => {
-          const result = reader.result as string
-          const title = file.name.split('.').slice(0, -1).join('.')
-          const layerToAdd: MapContextLayerModel = {
-            type: 'geojson',
-            data: result,
-          }
-          this.mapFacade.addLayer({ ...layerToAdd, title: title })
-          this.displayMessage('File successfully added to map', 'success')
-          resolve()
+          resolve(reader.result as string)
         }
         reader.onerror = reject
         reader.readAsText(file)
       } catch (error) {
         reject(error)
       }
+    }).then(async (result: string) => {
+      const context = await firstValueFrom(this.mapFacade.context$)
+      const title = file.name.split('.').slice(0, -1).join('.')
+      const layerToAdd: MapContextLayerGeojson = {
+        type: 'geojson',
+        data: result,
+        label: title,
+      }
+      this.mapFacade.applyContext({
+        ...context,
+        layers: [...context.layers, layerToAdd],
+      })
+      this.displayMessage('File successfully added to map', 'success')
     })
   }
 

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html

@@ -2,7 +2,7 @@
   <gn-ui-text-input
     [(value)]="ogcUrl"
     (valueChange)="urlChange.next($event)"
-    [hint]="'map.ogc.urlInput.hint' | translate"
+    [placeholder]="'map.ogc.urlInput.hint' | translate"
     class="w-96"
   ></gn-ui-text-input>
 </div>

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts

@@ -1,33 +1,32 @@
 import {
+  ChangeDetectorRef,
   Component,
-  OnInit,
-  Output,
   EventEmitter,
-  ChangeDetectionStrategy,
   Input,
-  ChangeDetectorRef,
+  OnInit,
+  Output,
 } from '@angular/core'
 import { OgcApiEndpoint } from '@camptocamp/ogc-client'
-import { Subject, debounceTime } from 'rxjs'
-import {
-  MapContextLayerModel,
-  MapContextLayerTypeEnum,
-} from '../map-context/map-context.model'
+import { debounceTime, Subject } from 'rxjs'
 import { TranslateModule } from '@ngx-translate/core'
-import { DropdownChoice, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import {
+  DropdownChoice,
+  TextInputComponent,
+  UiInputsModule,
+} from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
-import { MapLayer } from '../+state/map.models'
+import { MapContextLayer, MapContextLayerOgcApi } from '@geospatial-sdk/core'
 
 @Component({
   selector: 'gn-ui-add-layer-from-ogc-api',
   templateUrl: './add-layer-from-ogc-api.component.html',
   styleUrls: ['./add-layer-from-ogc-api.component.css'],
   standalone: true,
-  imports: [CommonModule, TranslateModule, UiInputsModule],
+  imports: [CommonModule, TranslateModule, UiInputsModule, TextInputComponent],
 })
 export class AddLayerFromOgcApiComponent implements OnInit {
   @Input() ogcUrl: string
-  @Output() layerAdded = new EventEmitter<MapLayer>()
+  @Output() layerAdded = new EventEmitter<MapContextLayer>()
 
   urlChange = new Subject<string>()
   loading = false
@@ -109,24 +108,27 @@ export class AddLayerFromOgcApiComponent implements OnInit {
     try {
       const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
       let layerUrl: string
+      let useTiles: MapContextLayerOgcApi['useTiles']
 
       if (layerType === 'vectorTiles') {
         layerUrl = await ogcEndpoint.getVectorTilesetUrl(layer)
+        useTiles = 'vector'
       } else if (layerType === 'mapTiles') {
         layerUrl = await ogcEndpoint.getMapTilesetUrl(layer)
+        useTiles = 'map'
       } else {
         layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer, {
           outputFormat: 'json',
         })
       }
 
-      const layerToAdd: MapContextLayerModel = {
-        name: layer,
+      this.layerAdded.emit({
         url: layerUrl,
-        type: MapContextLayerTypeEnum.OGCAPI,
-        layerType: layerType,
-      }
-      this.layerAdded.emit({ ...layerToAdd, title: layer })
+        type: 'ogcapi',
+        collection: layer,
+        ...(useTiles && { useTiles }),
+        label: layer,
+      })
     } catch (error) {
       const err = error as Error
       console.error('Error adding layer:', err.message)

package/src/libs/feature/map/src/lib/add-layer-from-wfs/add-layer-from-wfs.component.html

@@ -2,7 +2,7 @@
   <gn-ui-text-input
     [(value)]="wfsUrl"
     (valueChange)="urlChange.next($event)"
-    [hint]="'map.wfs.urlInput.hint' | translate"
+    [placeholder]="'map.wfs.urlInput.hint' | translate"
     class="w-96"
   >
   </gn-ui-text-input>

package/src/libs/feature/map/src/lib/add-layer-from-wfs/add-layer-from-wfs.component.ts

@@ -1,17 +1,19 @@
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core'
 import { WfsEndpoint, WfsFeatureTypeBrief } from '@camptocamp/ogc-client'
-import { Subject } from 'rxjs'
-import {
-  MapContextLayerModel,
-  MapContextLayerTypeEnum,
-} from '../map-context/map-context.model'
+import { firstValueFrom, Subject } from 'rxjs'
 import { MapFacade } from '../+state/map.facade'
 import { debounceTime } from 'rxjs/operators'
+import { MapContextLayer } from '@geospatial-sdk/core'
+import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-add-layer-from-wfs',
   templateUrl: './add-layer-from-wfs.component.html',
   styleUrls: ['./add-layer-from-wfs.component.css'],
+  standalone: true,
+  imports: [TextInputComponent, ButtonComponent, TranslateModule, CommonModule],
 })
 export class AddLayerFromWfsComponent implements OnInit {
   wfsUrl = ''
@@ -53,12 +55,17 @@ export class AddLayerFromWfsComponent implements OnInit {
     }
   }
 
-  addLayer(layer: WfsFeatureTypeBrief) {
-    const layerToAdd: MapContextLayerModel = {
-      name: layer.name,
+  async addLayer(layer: WfsFeatureTypeBrief) {
+    const context = await firstValueFrom(this.mapFacade.context$)
+    const layerToAdd: MapContextLayer = {
+      featureType: layer.name,
       url: this.wfsUrl.toString(),
-      type: MapContextLayerTypeEnum.WFS,
+      type: 'wfs',
+      label: layer.title,
     }
-    this.mapFacade.addLayer({ ...layerToAdd, title: layer.title })
+    this.mapFacade.applyContext({
+      ...context,
+      layers: [...context.layers, layerToAdd],
+    })
   }
 }

package/src/libs/feature/map/src/lib/add-layer-from-wms/add-layer-from-wms.component.html

@@ -2,7 +2,7 @@
   <gn-ui-text-input
     [(value)]="wmsUrl"
     (valueChange)="urlChange.next($event)"
-    [hint]="'map.wms.urlInput.hint' | translate"
+    [placeholder]="'map.wms.urlInput.hint' | translate"
     class="w-96"
   >
   </gn-ui-text-input>

package/src/libs/feature/map/src/lib/add-layer-from-wms/add-layer-from-wms.component.ts

@@ -1,17 +1,19 @@
-import { Component, ChangeDetectorRef, OnInit } from '@angular/core'
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core'
 import { WmsEndpoint, WmsLayerSummary } from '@camptocamp/ogc-client'
 import { MapFacade } from '../+state/map.facade'
-import {
-  MapContextLayerModel,
-  MapContextLayerTypeEnum,
-} from '../map-context/map-context.model'
-import { Subject } from 'rxjs'
+import { firstValueFrom, Subject } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
+import { MapContextLayer } from '@geospatial-sdk/core'
+import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-add-layer-from-wms',
   templateUrl: './add-layer-from-wms.component.html',
   styleUrls: ['./add-layer-from-wms.component.css'],
+  standalone: true,
+  imports: [TextInputComponent, CommonModule, TranslateModule, ButtonComponent],
 })
 export class AddLayerFromWmsComponent implements OnInit {
   wmsUrl = ''
@@ -52,12 +54,17 @@ export class AddLayerFromWmsComponent implements OnInit {
     }
   }
 
-  addLayer(layer: WmsLayerSummary) {
-    const layerToAdd: MapContextLayerModel = {
+  async addLayer(layer: WmsLayerSummary) {
+    const context = await firstValueFrom(this.mapFacade.context$)
+    const layerToAdd: MapContextLayer = {
       name: layer.name,
       url: this.wmsUrl.toString(),
-      type: MapContextLayerTypeEnum.WMS,
+      type: 'wms',
+      label: layer.title,
     }
-    this.mapFacade.addLayer({ ...layerToAdd, title: layer.title })
+    this.mapFacade.applyContext({
+      ...context,
+      layers: [...context.layers, layerToAdd],
+    })
   }
 }

package/src/libs/feature/map/src/lib/constant/index.ts

@@ -1,2 +1 @@
-export * from './map-options'
 export * from './projections'

package/src/libs/feature/map/src/lib/feature-map.module.ts

@@ -1,72 +1,33 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { UiMapModule } from '../../../../../libs/ui/map/src'
-import { defaultMapOptions, FEATURE_MAP_OPTIONS } from './constant'
-import { MapInstanceDirective } from './manager/map-instance.directive'
-import { MapContextComponent } from './map-context/component/map-context.component'
-import { LayersPanelComponent } from './layers-panel/layers-panel.component'
 import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { MatIconModule } from '@angular/material/icon'
 import { MatTabsModule } from '@angular/material/tabs'
 import { TranslateModule } from '@ngx-translate/core'
-import { AddLayerFromCatalogComponent } from './add-layer-from-catalog/add-layer-from-catalog.component'
 import { FeatureSearchModule } from '../../../../../libs/feature/search/src'
 import { StoreModule } from '@ngrx/store'
-import { EffectsModule } from '@ngrx/effects'
 import * as fromMap from './+state/map.reducer'
-import { MapEffects } from './+state/map.effects'
 import { MapFacade } from './+state/map.facade'
-import { MapContainerComponent } from './map-container/map-container.component'
-import { AddLayerRecordPreviewComponent } from './add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
-import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
-import { AddLayerFromWmsComponent } from './add-layer-from-wms/add-layer-from-wms.component'
-import { AddLayerFromFileComponent } from './add-layer-from-file/add-layer-from-file.component'
-import { AddLayerFromWfsComponent } from './add-layer-from-wfs/add-layer-from-wfs.component'
-import { GeocodingComponent } from './geocoding/geocoding.component'
+import { TextInputComponent, UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { GEOCODING_PROVIDER, GeocodingProvider } from './geocoding.service'
 import { AddLayerFromOgcApiComponent } from './add-layer-from-ogc-api/add-layer-from-ogc-api.component'
 
 @NgModule({
-  declarations: [
-    MapContextComponent,
-    MapInstanceDirective,
-    LayersPanelComponent,
-    AddLayerFromCatalogComponent,
-    MapContainerComponent,
-    AddLayerRecordPreviewComponent,
-    AddLayerFromWmsComponent,
-    AddLayerFromFileComponent,
-    AddLayerFromWfsComponent,
-    GeocodingComponent,
-  ],
-  exports: [
-    MapContextComponent,
-    MapInstanceDirective,
-    LayersPanelComponent,
-    AddLayerFromCatalogComponent,
-    MapContainerComponent,
-    GeocodingComponent,
-  ],
   imports: [
     CommonModule,
-    UiMapModule,
     UiLayoutModule,
     MatIconModule,
     MatTabsModule,
     TranslateModule,
     FeatureSearchModule,
     StoreModule.forFeature(fromMap.MAP_FEATURE_KEY, fromMap.mapReducer),
-    EffectsModule.forFeature([MapEffects]),
     UiElementsModule,
     UiInputsModule,
     AddLayerFromOgcApiComponent,
+    TextInputComponent,
   ],
   providers: [
-    {
-      provide: FEATURE_MAP_OPTIONS,
-      useValue: defaultMapOptions,
-    },
     MapFacade,
     {
       provide: GEOCODING_PROVIDER,

package/src/libs/feature/map/src/lib/geocoding/geocoding.component.ts

@@ -1,15 +1,24 @@
 import { Component, OnDestroy } from '@angular/core'
-import { catchError, from, Subject, takeUntil } from 'rxjs'
+import { catchError, firstValueFrom, from, Subject, takeUntil } from 'rxjs'
 import { debounceTime, switchMap } from 'rxjs/operators'
-import { MapManagerService } from '../manager/map-manager.service'
-import { fromLonLat } from 'ol/proj'
-import { Polygon } from 'ol/geom'
 import { GeocodingService } from '../geocoding.service'
+import { MapFacade } from '../+state/map.facade'
+import { CommonModule } from '@angular/common'
+import { SearchInputComponent, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { MapContextView } from '@geospatial-sdk/core'
 
 @Component({
   selector: 'gn-ui-geocoding',
   templateUrl: './geocoding.component.html',
   styleUrls: ['./geocoding.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    UiInputsModule,
+    TranslateModule,
+    SearchInputComponent,
+  ],
 })
 export class GeocodingComponent implements OnDestroy {
   searchText = ''
@@ -19,7 +28,7 @@ export class GeocodingComponent implements OnDestroy {
   errorMessage: string | null = null
 
   constructor(
-    private mapManager: MapManagerService,
+    private mapFacade: MapFacade,
     private geocodingService: GeocodingService
   ) {
     this.searchTextChanged
@@ -62,32 +71,41 @@ export class GeocodingComponent implements OnDestroy {
     this.errorMessage = null
   }
 
-  zoomToLocation(result: any) {
-    const map = this.mapManager.map
-    const view = map.getView()
+  async zoomToLocation(result: any) {
     const geometry = result.geom
 
     if (geometry.type === 'Point') {
-      this.zoomToPoint(geometry.coordinates, view)
+      await this.zoomToPoint(geometry.coordinates)
     } else if (geometry.type === 'Polygon') {
-      this.zoomToPolygon(geometry.coordinates, view)
+      await this.zoomToPolygon(geometry.coordinates)
     } else {
       console.error(`Unsupported geometry type: ${geometry.type}`)
     }
   }
 
-  zoomToPoint(pointCoords: [number, number], view: any) {
-    const transformedCoords = fromLonLat(pointCoords)
-    view.setCenter(transformedCoords)
-    view.setZoom(12)
+  async zoomToPoint(pointCoords: [number, number]) {
+    const context = await firstValueFrom(this.mapFacade.context$)
+    const view: MapContextView = {
+      center: pointCoords,
+      zoom: 10,
+    }
+    this.mapFacade.applyContext({
+      ...context,
+      view,
+    })
   }
 
-  zoomToPolygon(polygonCoords: [[number, number][]], view: any) {
-    const transformedCoords = polygonCoords[0].map((coord) => fromLonLat(coord))
-    const polygon = new Polygon([transformedCoords])
-    view.fit(polygon, {
-      duration: 100,
-      maxZoom: 12,
+  async zoomToPolygon(polygonCoords: [[number, number][]]) {
+    const context = await firstValueFrom(this.mapFacade.context$)
+    const view: MapContextView = {
+      geometry: {
+        type: 'Polygon',
+        coordinates: polygonCoords,
+      },
+    }
+    this.mapFacade.applyContext({
+      ...context,
+      view,
     })
   }
 

package/src/libs/feature/map/src/lib/layers-panel/layers-panel.component.html

@@ -13,11 +13,11 @@
       <mat-icon class="material-symbols-outlined -ml-2 mr-2 shrink-0"
         >chevron_right</mat-icon
       >
-      <span class="mr-2 grow">{{ layer.title }}</span>
+      <span class="mr-2 grow">{{ layer.label }}</span>
       <a
         href
         class="underline text-sm text-red-700 hover:text-red-900"
-        (click)="deleteLayer(index)"
+        (click)="deleteLayer(index); $event.preventDefault()"
       >
         delete
       </a>

package/src/libs/feature/map/src/lib/layers-panel/layers-panel.component.ts

@@ -1,22 +1,55 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { MapFacade } from '../+state/map.facade'
+import { firstValueFrom, map } from 'rxjs'
+import { MapContextLayer } from '@geospatial-sdk/core'
+import { MatIconModule } from '@angular/material/icon'
+import { UiLayoutModule } from '../../../../../../libs/ui/layout/src'
+import { MatTabsModule } from '@angular/material/tabs'
+import { AddLayerFromOgcApiComponent } from '../add-layer-from-ogc-api/add-layer-from-ogc-api.component'
+import { AddLayerFromWfsComponent } from '../add-layer-from-wfs/add-layer-from-wfs.component'
+import { AddLayerFromWmsComponent } from '../add-layer-from-wms/add-layer-from-wms.component'
+import { AddLayerFromCatalogComponent } from '../add-layer-from-catalog/add-layer-from-catalog.component'
+import { AddLayerFromFileComponent } from '../add-layer-from-file/add-layer-from-file.component'
+import { TranslateModule } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-layers-panel',
   templateUrl: './layers-panel.component.html',
   styleUrls: ['./layers-panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatIconModule,
+    UiLayoutModule,
+    MatTabsModule,
+    AddLayerFromOgcApiComponent,
+    AddLayerFromWfsComponent,
+    AddLayerFromWmsComponent,
+    AddLayerFromCatalogComponent,
+    AddLayerFromFileComponent,
+    TranslateModule,
+    CommonModule,
+  ],
 })
 export class LayersPanelComponent {
-  layers$ = this.mapFacade.layers$
+  layers$ = this.mapFacade.context$.pipe(map((context) => context.layers))
   ogcUrl = ''
   constructor(private mapFacade: MapFacade) {}
 
-  deleteLayer(index: number) {
-    this.mapFacade.removeLayer(index)
+  async deleteLayer(index: number) {
+    const context = await firstValueFrom(this.mapFacade.context$)
+    this.mapFacade.applyContext({
+      ...context,
+      layers: context.layers.filter((_, i) => i !== index),
+    })
   }
 
-  addLayer(layer) {
-    this.mapFacade.addLayer(layer)
+  async addLayer(layer: MapContextLayer) {
+    const context = await firstValueFrom(this.mapFacade.context$)
+    this.mapFacade.applyContext({
+      ...context,
+      layers: [...context.layers, layer],
+    })
   }
 }

package/src/libs/feature/map/src/lib/map-state-container/map-state-container.component.html

@@ -0,0 +1,4 @@
+<gn-ui-map-container
+  [context]="context$ | async"
+  (featuresClick)="handleFeaturesClicked($event)"
+></gn-ui-map-container>

package/src/libs/feature/map/src/lib/map-state-container/map-state-container.component.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { Observable } from 'rxjs'
+import { MapFacade } from '../+state/map.facade'
+import { MapContext } from '@geospatial-sdk/core'
+import { MapContainerComponent } from '../../../../../../libs/ui/map/src'
+import { CommonModule } from '@angular/common'
+import { Feature } from 'geojson'
+
+@Component({
+  selector: 'gn-ui-map-state-container',
+  templateUrl: './map-state-container.component.html',
+  styleUrls: ['./map-state-container.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MapContainerComponent, CommonModule],
+})
+export class MapStateContainerComponent {
+  context$: Observable<MapContext> = this.mapFacade.context$
+
+  constructor(private mapFacade: MapFacade) {}
+
+  handleFeaturesClicked(features: Feature[]) {
+    if (!features.length) {
+      this.mapFacade.clearFeatureSelection()
+      return
+    }
+    this.mapFacade.selectFeatures(features)
+  }
+}