refactor(map): further refactoring to use geo sdk

apps/datahub/src/app/app.module.ts

@@ -43,6 +43,8 @@ import {
 import { UiSearchModule } from '@geonetwork-ui/ui/search'
 import {
   getGlobalConfig,
+  getMapContextLayerFromConfig,
+  getOptionalMapConfig,
   getOptionalSearchConfig,
   getThemeConfig,
   TRANSLATE_WITH_OVERRIDES_CONFIG,
@@ -95,6 +97,11 @@ import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
 import { RecordUserFeedbacksComponent } from './record/record-user-feedbacks/record-user-feedbacks.component'
 import { LetDirective } from '@ngrx/component'
 import { OrganizationPageComponent } from './organization/organization-page/organization-page.component'
+import {
+  BASEMAP_LAYERS,
+  DO_NOT_USE_DEFAULT_BASEMAP,
+  MAP_VIEW_CONSTRAINTS,
+} from '@geonetwork-ui/ui/map'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 
@@ -229,6 +236,22 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
       provide: ORGANIZATION_URL_TOKEN,
       useValue: `${ROUTER_ROUTE_SEARCH}?${ROUTE_PARAMS.PUBLISHER}=\${name}`,
     },
+    {
+      provide: DO_NOT_USE_DEFAULT_BASEMAP,
+      useFactory: () => getOptionalMapConfig()?.DO_NOT_USE_DEFAULT_BASEMAP,
+    },
+    {
+      provide: BASEMAP_LAYERS,
+      useFactory: () =>
+        getOptionalMapConfig()?.MAP_LAYERS.map(getMapContextLayerFromConfig),
+    },
+    {
+      provide: MAP_VIEW_CONSTRAINTS,
+      useFactory: () => ({
+        maxExtent: getOptionalMapConfig()?.MAX_EXTENT,
+        maxZoom: getOptionalMapConfig()?.MAX_ZOOM,
+      }),
+    },
   ],
   bootstrap: [AppComponent],
 })

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

@@ -4,6 +4,7 @@ import { BrowserModule } from '@angular/platform-browser'
 import { AppComponent } from './app.component'
 import {
   FeatureMapModule,
+  MapStateContainerComponent,
   LayersPanelComponent,
 } from '@geonetwork-ui/feature/map'
 import { ThemeService } from '@geonetwork-ui/util/shared'
@@ -39,6 +40,7 @@ export const metaReducers: MetaReducer<any>[] = !environment.production
     EffectsModule.forRoot(),
     FeatureCatalogModule,
     LayersPanelComponent,
+    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() : [],

apps/search/src/app/main-search/main-search.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core'
-import { FeatureInfoService } from '@geonetwork-ui/feature/map'
 import { SearchFacade } from '@geonetwork-ui/feature/search'
 import { UiApiService } from '@geonetwork-ui/data-access/gn4'
 import { firstValueFrom, map } from 'rxjs'
@@ -12,7 +11,6 @@ import { firstValueFrom, map } from 'rxjs'
 export class MainSearchComponent implements OnInit {
   constructor(
     private uiService: UiApiService,
-    private featureInfo: FeatureInfoService,
     private searchFacade: SearchFacade
   ) {}
 

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

@@ -1,14 +1,17 @@
 <div class="flex flex-row h-full overflow-auto">
   <gn-ui-table
+    #table
     class="w-1/2 overflow-auto"
     [data]="tableData"
     [activeId]="selectionId"
     (selected)="onTableSelect($event)"
   ></gn-ui-table>
-  <gn-ui-map-context
+  <gn-ui-map-container
+    #mapContainer
     class="w-1/2 h-full"
     [context]="mapContext"
-  ></gn-ui-map-context>
+    (featuresClick)="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.spec.ts

@@ -1,55 +1,40 @@
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
+  Component,
+  Input,
   NO_ERRORS_SCHEMA,
+  Output,
 } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import {
   defaultMapOptions,
   FEATURE_MAP_OPTIONS,
-  FeatureInfoService,
-  MapContextLayerTypeEnum,
-  MapManagerService,
 } from '@geonetwork-ui/feature/map'
 import { pointFeatureCollectionFixture } from '@geonetwork-ui/common/fixtures'
-import Map from 'ol/Map'
-import Feature from 'ol/Feature'
-import GeoJSON from 'ol/format/GeoJSON'
-import TileLayer from 'ol/layer/Tile'
-import VectorLayer from 'ol/layer/Vector'
-import VectorSource from 'ol/source/Vector'
-import XYZ from 'ol/source/XYZ'
-import { Subject } from 'rxjs'
-
 import { GeoTableViewComponent } from './geo-table-view.component'
-import { Geometry } from 'ol/geom'
-
-const vectorLayer = new VectorLayer({
-  source: new VectorSource({
-    features: new GeoJSON().readFeatures(pointFeatureCollectionFixture(), {
-      featureProjection: 'EPSG:3857',
-      dataProjection: 'EPSG:4326',
-    }),
-  }) as VectorSource<Feature<Geometry>>,
-})
+import { MapContext } from '@geospatial-sdk/core'
+import { Subject } from 'rxjs'
+import type { FeatureCollection } from 'geojson'
 
-const mapMock = new Map({
-  layers: [
-    new TileLayer({
-      source: new XYZ({
-        url: 'http://test',
-      }),
-    }),
-    vectorLayer,
-  ],
+@Component({
+  selector: 'gn-ui-map-container',
+  template: '<div></div>',
 })
-const featureInfoServiceMock = {
-  handleFeatureInfo: jest.fn(),
-  features$: new Subject(),
+export class MockMapContainerComponent {
+  @Input() context: MapContext
+  @Output() featuresClick = new Subject()
+  openlayersMap = Promise.resolve({})
 }
 
-const mapManagerMock = {
-  map: mapMock,
+@Component({
+  selector: 'gn-ui-table',
+  template: '<div></div>',
+})
+export class MockTableComponent {
+  @Input() data: FeatureCollection
+  @Input() activeId: string
+  scrollToItem = jest.fn()
 }
 
 describe('GeoTableViewComponent', () => {
@@ -58,17 +43,13 @@ describe('GeoTableViewComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [GeoTableViewComponent],
+      declarations: [
+        GeoTableViewComponent,
+        MockMapContainerComponent,
+        MockTableComponent,
+      ],
       schemas: [NO_ERRORS_SCHEMA],
       providers: [
-        {
-          provide: FeatureInfoService,
-          useValue: featureInfoServiceMock,
-        },
-        {
-          provide: MapManagerService,
-          useValue: mapManagerMock,
-        },
         {
           provide: FEATURE_MAP_OPTIONS,
           useValue: defaultMapOptions,
@@ -84,6 +65,7 @@ describe('GeoTableViewComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(GeoTableViewComponent)
     component = fixture.componentInstance
+    component.data = pointFeatureCollectionFixture()
     fixture.detectChanges()
   })
 
@@ -105,22 +87,21 @@ describe('GeoTableViewComponent', () => {
       expect(component.mapContext).toEqual({
         layers: [
           {
-            type: MapContextLayerTypeEnum.XYZ,
+            type: 'xyz',
             url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
           },
           {
-            type: MapContextLayerTypeEnum.GEOJSON,
+            type: 'geojson',
             data: component.data,
           },
         ],
+        view: {
+          center: [0, 0],
+          zoom: 2,
+        },
       })
     })
-    it('feature info', () => {
-      expect(featureInfoServiceMock.handleFeatureInfo).toHaveBeenCalled()
-    })
     it('map objects', () => {
-      expect(component['view']).toBe(mapMock.getView())
-      expect(component['vectorLayer']).toBe(vectorLayer)
       expect(component['features'].length).toBe(
         pointFeatureCollectionFixture().features.length
       )
@@ -134,42 +115,41 @@ describe('GeoTableViewComponent', () => {
         id: 1,
         name: 'feature 1',
       }
-      jest.spyOn(component['view'], 'fit')
       component.onTableSelect(tableEntry)
     })
     it('set the selection', () => {
       expect(component.selectionId).toBe(1)
-      expect(component.selection).toBe(
-        component['vectorSource']
-          .getFeatures()
-          .find((feature) => feature.getId() === 1)
+      expect(component.selection).toEqual(
+        pointFeatureCollectionFixture().features.find((f) => f.id === 1)
       )
     })
     it('zoom on feature', () => {
-      expect(component['view'].fit).toHaveBeenCalled()
+      expect(component.mapContext.view).toEqual({
+        geometry: {
+          coordinates: [2.335333, 51.070817],
+          type: 'Point',
+        },
+      })
     })
   })
 
   describe('#onMapFeatureSelect', () => {
     let features
     beforeEach(() => {
       features = [
-        component['vectorSource']
-          .getFeatures()
-          .find((feature) => feature.getId() === 2),
+        pointFeatureCollectionFixture().features.find((f) => f.id === 2),
       ]
       const changeDetectorRef =
         fixture.debugElement.injector.get(ChangeDetectorRef)
       jest.spyOn(changeDetectorRef.constructor.prototype, 'detectChanges')
-      jest.spyOn(component['vectorLayer'], 'changed')
-      featureInfoServiceMock.features$.next(features)
+      component.onMapFeatureSelect(features)
     })
     it('set the selection', () => {
       expect(component.selectionId).toBe(2)
       expect(component.selection).toBe(features[0])
     })
     it('layer is refreshed', () => {
-      expect(component['vectorLayer'].changed).toHaveBeenCalled()
+      // expect(component['vectorLayer'].changed).toHaveBeenCalled()
       expect(component['changeRef'].detectChanges).toHaveBeenCalled()
     })
   })

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),