wip

apps/map-viewer/src/app/app.component.html

@@ -1,5 +1,5 @@
 <div class="h-full w-full relative">
-  <gn-ui-map-container></gn-ui-map-container>
+  <gn-ui-map-state-container></gn-ui-map-state-container>
   <gn-ui-layers-panel
     class="absolute"
     style="top: 20px; left: 20px; bottom: 20px"

apps/map-viewer/src/app/app.component.ts

@@ -1,23 +1,20 @@
 import { Component } from '@angular/core'
-import {
-  MapContextLayerTypeEnum,
-  MapContextModel,
-} from '@geonetwork-ui/feature/map'
+import { MapContext } from '@geospatial-sdk/core'
 
 @Component({
   selector: 'map-viewer-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-  context: MapContextModel = {
+  context: MapContext = {
     view: {
       center: [4, 42],
       zoom: 6,
     },
     layers: [
       {
-        type: MapContextLayerTypeEnum.XYZ,
+        type: 'xyz',
         url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
       },
     ],

apps/map-viewer/src/app/app.module.ts

@@ -2,7 +2,10 @@ import { importProvidersFrom, NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 
 import { AppComponent } from './app.component'
-import { FeatureMapModule } from '@geonetwork-ui/feature/map'
+import {
+  FeatureMapModule,
+  MapStateContainerComponent,
+} from '@geonetwork-ui/feature/map'
 import { ThemeService } from '@geonetwork-ui/util/shared'
 import { TranslateModule } from '@ngx-translate/core'
 import {
@@ -14,9 +17,8 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools'
 import { EffectsModule } from '@ngrx/effects'
 import { storeFreeze } from 'ngrx-store-freeze'
 import { environment } from '../environments/environment'
-import { provideRepositoryUrl } from '@geonetwork-ui/api/repository'
+import { provideGn4, provideRepositoryUrl } from '@geonetwork-ui/api/repository'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { provideGn4 } from '@geonetwork-ui/api/repository'
 import { FeatureAuthModule } from '@geonetwork-ui/feature/auth'
 import { FeatureCatalogModule } from '@geonetwork-ui/feature/catalog'
 
@@ -36,6 +38,7 @@ export const metaReducers: MetaReducer<any>[] = !environment.production
     StoreDevtoolsModule.instrument(),
     EffectsModule.forRoot(),
     FeatureCatalogModule,
+    MapStateContainerComponent,
   ],
   providers: [
     importProvidersFrom(FeatureAuthModule),

apps/search/src/app/app.module.ts

@@ -5,7 +5,6 @@ import { FeatureCatalogModule } from '@geonetwork-ui/feature/catalog'
 import { FeatureDatavizModule } from '@geonetwork-ui/feature/dataviz'
 import { FeatureMapModule } from '@geonetwork-ui/feature/map'
 import { UiLayoutModule } from '@geonetwork-ui/ui/layout'
-import { UiMapModule } from '@geonetwork-ui/ui/map'
 import {
   TRANSLATE_DEFAULT_CONFIG,
   UtilI18nModule,
@@ -39,7 +38,6 @@ export const metaReducers: MetaReducer<any>[] = !environment.production
     FeatureCatalogModule,
     UiLayoutModule,
     FeatureMapModule,
-    UiMapModule,
     FeatureDatavizModule,
     StoreModule.forRoot({}, { metaReducers }),
     !environment.production ? StoreDevtoolsModule.instrument() : [],

libs/common/fixtures/src/index.ts

@@ -13,3 +13,5 @@ export * from './lib/user.fixtures'
 export * from './lib/user-feedbacks.fixtures'
 
 export * from './lib/editor'
+
+export * from './lib/map'

libs/common/fixtures/src/lib/map/index.ts

@@ -0,0 +1 @@
+export * from './map-context.fixtures'

libs/feature/map/src/lib/map-context/map-context.fixtures.ts → libs/common/fixtures/src/lib/map/map-context.fixtures.ts

@@ -1,50 +1,50 @@
 import { FEATURE_COLLECTION_POLYGON_FIXTURE_4326 } from '@geonetwork-ui/common/fixtures'
 import { Extent } from 'ol/extent'
 import {
-  MapContextLayerGeojsonModel,
-  MapContextLayerModel,
-  MapContextLayerTypeEnum,
-  MapContextModel,
-  MapContextViewModel,
-} from '../map-context/map-context.model'
+  MapContext,
+  MapContextLayer,
+  MapContextLayerGeojson,
+  MapContextView,
+} from '@geospatial-sdk/core'
+import { deepFreeze } from '../utils'
 
-export const MAP_CTX_LAYER_XYZ_FIXTURE: MapContextLayerModel = {
-  type: MapContextLayerTypeEnum.XYZ,
+export const MAP_CTX_LAYER_XYZ_FIXTURE: MapContextLayer = {
+  type: 'xyz',
   url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+  attributions: '<a href="https://www.openstreetmap.org/copyright">',
 }
-export const MAP_CTX_LAYER_WMS_FIXTURE: MapContextLayerModel = {
-  type: MapContextLayerTypeEnum.WMS,
+export const MAP_CTX_LAYER_WMS_FIXTURE: MapContextLayer = {
+  type: 'wms',
   url: 'https://www.geograndest.fr/geoserver/region-grand-est/ows?REQUEST=GetCapabilities&SERVICE=WMS',
   name: 'commune_actuelle_3857',
 }
-export const MAP_CTX_LAYER_WFS_FIXTURE: MapContextLayerModel = {
-  type: MapContextLayerTypeEnum.WFS,
+export const MAP_CTX_LAYER_WFS_FIXTURE: MapContextLayer = {
+  type: 'wfs',
   url: 'https://www.geograndest.fr/geoserver/region-grand-est/ows?REQUEST=GetCapabilities&SERVICE=WFS&VERSION=1.1.0',
-  name: 'ms:commune_actuelle_3857',
+  featureType: 'ms:commune_actuelle_3857',
 }
-export const MAP_CTX_LAYER_GEOJSON_FIXTURE: MapContextLayerGeojsonModel = {
-  type: MapContextLayerTypeEnum.GEOJSON,
+export const MAP_CTX_LAYER_GEOJSON_FIXTURE: MapContextLayerGeojson = {
+  type: 'geojson',
   data: FEATURE_COLLECTION_POLYGON_FIXTURE_4326,
 }
-export const MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE: MapContextLayerGeojsonModel =
-  {
-    type: MapContextLayerTypeEnum.GEOJSON,
-    url: 'https://my.host.com/data/regions.json',
-  }
+export const MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE: MapContextLayerGeojson = {
+  type: 'geojson',
+  url: 'https://my.host.com/data/regions.json',
+}
 
-export const MAP_CTX_VIEW_FIXTURE: MapContextViewModel = {
+export const MAP_CTX_VIEW_FIXTURE: MapContextView = {
   center: [7.75, 48.6],
   zoom: 9,
 }
 
-export const MAP_CTX_FIXTURE: MapContextModel = {
+export const MAP_CTX_FIXTURE: MapContext = deepFreeze({
   layers: [
     MAP_CTX_LAYER_XYZ_FIXTURE,
     MAP_CTX_LAYER_WMS_FIXTURE,
     MAP_CTX_LAYER_GEOJSON_FIXTURE,
   ],
   view: MAP_CTX_VIEW_FIXTURE,
-}
+})
 
 export const MAP_CTX_EXTENT_FIXTURE: Extent = [
   171083.69713494915, 6246047.945419401, 476970.39956295764, 6631079.362882684,

libs/feature/dataviz/src/lib/feature-dataviz.module.ts

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { FeatureMapModule } from '@geonetwork-ui/feature/map'
-import { UiMapModule } from '@geonetwork-ui/ui/map'
+import {
+  FeatureDetailComponent,
+  MapContainerComponent,
+} from '@geonetwork-ui/ui/map'
 import { GeoTableViewComponent } from './geo-table-view/geo-table-view.component'
 import { FigureContainerComponent } from './figure/figure-container/figure-container.component'
 import {
@@ -19,14 +22,15 @@ import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
   imports: [
     CommonModule,
     FeatureMapModule,
-    UiMapModule,
     UiDatavizModule,
     TableComponent,
     UiWidgetsModule,
     TranslateModule,
     ChartComponent,
     UiInputsModule,
     PopupAlertComponent,
+    FeatureDetailComponent,
+    MapContainerComponent,
   ],
   declarations: [
     GeoTableViewComponent,

libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.html

@@ -5,10 +5,11 @@
     [activeId]="selectionId"
     (selected)="onTableSelect($event)"
   ></gn-ui-table>
-  <gn-ui-map-context
+  <gn-ui-map-container
     class="w-1/2 h-full"
     [context]="mapContext"
-  ></gn-ui-map-context>
+    (featuresClicked)="onMapFeatureSelect($event)"
+  ></gn-ui-map-container>
   <gn-ui-feature-detail
     style="width: 300px"
     class="p-3 shrink-0 overflow-auto"

libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.stories.ts

@@ -2,7 +2,6 @@ import { HttpClientModule } from '@angular/common/http'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { FeatureMapModule } from '@geonetwork-ui/feature/map'
 import { UiLayoutModule } from '@geonetwork-ui/ui/layout'
-import { UiMapModule } from '@geonetwork-ui/ui/map'
 import { TRANSLATE_DEFAULT_CONFIG } from '@geonetwork-ui/util/i18n'
 import { TranslateModule } from '@ngx-translate/core'
 import {
@@ -13,14 +12,15 @@ import {
 } from '@storybook/angular'
 import { GeoTableViewComponent } from './geo-table-view.component'
 import { importProvidersFrom } from '@angular/core'
+import { FeatureDetailComponent } from '@geonetwork-ui/ui/map'
 
 export default {
   title: 'Map/GeoTable',
   component: GeoTableViewComponent,
   decorators: [
     moduleMetadata({
       imports: [
-        UiMapModule,
+        FeatureDetailComponent,
         UiLayoutModule,
         FeatureMapModule,
         TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG),

libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts

@@ -11,10 +11,6 @@ import {
 } from '@angular/core'
 import {
   FEATURE_MAP_OPTIONS,
-  FeatureInfoService,
-  MapContextLayerTypeEnum,
-  MapContextModel,
-  MapManagerService,
   MapOptionsModel,
 } from '@geonetwork-ui/feature/map'
 import {
@@ -23,14 +19,15 @@ import {
   TableItemModel,
 } from '@geonetwork-ui/ui/dataviz'
 import type { FeatureCollection } from 'geojson'
-import Map from 'ol/Map'
 import View from 'ol/View'
 import Feature from 'ol/Feature'
 import { Geometry } from 'ol/geom'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import Style from 'ol/style/Style'
 import { Subscription } from 'rxjs'
+import { MapContext } from '@geospatial-sdk/core'
+import { MapContainerComponent } from '@geonetwork-ui/ui/map'
 
 @Component({
   selector: 'gn-ui-geo-table-view',
@@ -41,43 +38,34 @@ import { Subscription } from 'rxjs'
 export class GeoTableViewComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() data: FeatureCollection = { type: 'FeatureCollection', features: [] }
   @ViewChild(TableComponent) uiTable: TableComponent
+  @ViewChild(MapContainerComponent) mapContainer: MapContainerComponent
 
-  private map: Map
   private view: View
   private vectorLayer: VectorLayer<VectorSource<Feature<Geometry>>>
   private vectorSource: VectorSource<Feature<Geometry>>
   private features: Feature<Geometry>[]
 
   tableData: TableItemModel[]
-  mapContext: MapContextModel
+  mapContext: MapContext
   selectionId: TableItemId
   selection: Feature<Geometry>
   private subscription = new Subscription()
 
   constructor(
-    private manager: MapManagerService,
-    private featureInfo: FeatureInfoService,
     private changeRef: ChangeDetectorRef,
     @Inject(FEATURE_MAP_OPTIONS) private mapOptions: MapOptionsModel
   ) {}
 
   ngOnInit(): void {
     this.tableData = this.geojsonToTableData(this.data)
     this.mapContext = this.initMapContext()
-    this.featureInfo.handleFeatureInfo()
-    this.subscription.add(
-      this.featureInfo.features$.subscribe((features) => {
-        this.onMapFeatureSelect(features)
-      })
-    )
   }
 
   ngAfterViewInit(): void {
-    const map = (this.map = this.manager.map)
-    this.view = map.getView()
-    this.vectorLayer = this.manager.map.getLayers().item(1) as VectorLayer<
-      VectorSource<Feature<Geometry>>
-    >
+    this.view = this.mapContainer.openlayersMap.getView()
+    this.vectorLayer = this.mapContainer.openlayersMap
+      .getLayers()
+      .item(1) as VectorLayer<VectorSource<Feature<Geometry>>>
     this.vectorLayer.setStyle(this.styleFn.bind(this))
     this.vectorSource = this.vectorLayer.getSource()
     this.features = this.vectorSource.getFeatures()
@@ -110,18 +98,19 @@ export class GeoTableViewComponent implements OnInit, AfterViewInit, OnDestroy {
     }))
   }
 
-  private initMapContext(): MapContextModel {
+  private initMapContext(): MapContext {
     return {
       layers: [
         {
-          type: MapContextLayerTypeEnum.XYZ,
+          type: 'xyz',
           url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
         },
         {
-          type: MapContextLayerTypeEnum.GEOJSON,
+          type: 'geojson',
           data: this.data,
         },
       ],
+      view: {},
     }
   }
 

libs/feature/map/src/index.ts

@@ -1,20 +1,14 @@
 export * from './lib/+state/map.facade'
-export * from './lib/+state/map.models'
 export * from './lib/+state/map.selectors'
 export * from './lib/+state/map.reducer'
 export * from './lib/+state/map.actions'
 export * from './lib/feature-map.module'
-export * from './lib/manager/map-manager.service'
-export * from './lib/manager/map-instance.directive'
-export * from './lib/feature-info/feature-info.service'
-export * from './lib/map-context/map-context.model'
 export * from './lib/map-context/map-context.service'
-export * from './lib/map-context/component/map-context.component'
+export * from './lib/map-state-container/map-state-container.component'
 export * from './lib/constant'
 export * from './lib/utils'
 export * from './lib/style'
 export * from './lib/layers-panel/layers-panel.component'
 export * from './lib/add-layer-from-catalog/add-layer-from-catalog.component'
 export * from './lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component'
-export * from './lib/map-container/map-container.component'
 export * from './lib/geocoding/geocoding.component'