feat(Carto_mvp):

- Ajout d'une carte sur la modale
- La carte est interactive et ne gêne pas l'ouverture et la fermeture de la modale
#57

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

@@ -43,7 +43,6 @@ import {
   UiLayoutModule,
 } from '@geonetwork-ui/ui/layout'
 import { UiSearchModule } from '@geonetwork-ui/ui/search'
-import { IgnApiDlComponent } from '@geonetwork-ui/feature/record'
 
 import {
   getGlobalConfig,

libs/ui/elements/src/lib/download-item/download-item.component.html

@@ -62,7 +62,11 @@
         </button>
       </div>
       <div class="grow">
-        <div id="maptest" class="h-full w-full"></div>
+        <gn-ui-map-container
+          #mapContainer
+          [context]="mapContext$ | async"
+          (featuresClick)="onMapFeatureSelect($event)"
+        ></gn-ui-map-container>
       </div>
     </div>
   </div>

libs/ui/elements/src/lib/download-item/download-item.component.ts

@@ -7,10 +7,8 @@ import {
   Output,
 } from '@angular/core'
 import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record'
-import Map from 'ol/Map'
-import View from 'ol/View'
-import TileLayer from 'ol/layer/Tile'
-import OSM from 'ol/source/OSM'
+import { MapContext } from '@geospatial-sdk/core'
+import { Observable } from 'rxjs'
 
 @Component({
   selector: 'gn-ui-download-item',
@@ -19,28 +17,23 @@ import OSM from 'ol/source/OSM'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DownloadItemComponent implements OnInit {
+  onMapFeatureSelect($event: Event) {
+    throw new Error('Method not implemented.')
+  }
   @Input() link: DatasetOnlineResource
   @Input() color: string
   @Input() format: string
   @Input() isFromWfs: boolean
   @Output() exportUrl = new EventEmitter<string>()
-  map: Map
   isModalGPF: boolean
+  mapContext$: Observable<MapContext>
 
   openUrl() {
     this.exportUrl.emit(this.link.url.toString())
   }
 
   ngOnInit(): void {
     this.isModalGPF = false
-    this.map = new Map({
-      layers: [new TileLayer({ source: new OSM() })],
-      view: new View({
-        center: [0, 0],
-        zoom: 1,
-      }),
-      target: 'maptest',
-    })
   }
 
   openModalLayer() {

libs/ui/elements/src/lib/ui-elements.module.ts

@@ -35,6 +35,7 @@ import { MarkdownParserComponent } from './markdown-parser/markdown-parser.compo
 import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-overlay-preview.component'
 import { UserFeedbackItemComponent } from './user-feedback-item/user-feedback-item.component'
 import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
+import { MapContainerComponent } from '@geonetwork-ui/ui/map'
 
 @NgModule({
   imports: [
@@ -56,6 +57,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     BadgeComponent,
     MaxLinesComponent,
     TextInputComponent,
+    MapContainerComponent,
   ],
   declarations: [
     MetadataInfoComponent,