geonetwork-ui 2.2.0-dev.4983265e → 2.2.0-dev.4db0b597

package/libs/util/shared/src/lib/links/link-utils.d.ts

@@ -30,47 +30,59 @@ export declare const FORMATS: {
         readonly color: "#328556";
         readonly mimeTypes: readonly ["x-gis/x-shapefile"];
     };
+    readonly gml: {
+        readonly extensions: readonly ["gml"];
+        readonly priority: 5;
+        readonly color: "#c92bce";
+        readonly mimeTypes: readonly ["application/gml+xml", "text/xml; subtype=gml"];
+    };
     readonly kml: {
         readonly extensions: readonly ["kml", "kmz"];
-        readonly priority: 5;
+        readonly priority: 6;
         readonly color: "#348009";
         readonly mimeTypes: readonly ["application/vnd.google-earth.kml+xml", "application/vnd.google-earth.kmz"];
     };
     readonly gpkg: {
         readonly extensions: readonly ["gpkg", "geopackage"];
-        readonly priority: 6;
+        readonly priority: 7;
         readonly color: "#ea79ba";
         readonly mimeTypes: readonly ["application/geopackage+sqlite3"];
     };
     readonly zip: {
         readonly extensions: readonly ["zip", "tar.gz"];
-        readonly priority: 7;
+        readonly priority: 8;
         readonly color: "#f2bb3a";
         readonly mimeTypes: readonly ["application/zip", "application/x-zip"];
     };
     readonly pdf: {
         readonly extensions: readonly ["pdf"];
-        readonly priority: 8;
+        readonly priority: 9;
         readonly color: "#db544a";
         readonly mimeTypes: readonly ["application/pdf"];
     };
     readonly jpg: {
         readonly extensions: readonly ["jpg", "jpeg", "jfif", "pjpeg", "pjp"];
-        readonly priority: 8;
+        readonly priority: 9;
         readonly color: "#673ab7";
         readonly mimeTypes: readonly ["image/jpg"];
     };
     readonly svg: {
         readonly extensions: readonly ["svg"];
-        readonly priority: 9;
+        readonly priority: 10;
         readonly color: "#d98294";
         readonly mimeTypes: readonly ["image/svg+xml"];
     };
+    readonly dxf: {
+        readonly extensions: readonly ["dxf"];
+        readonly priority: 11;
+        readonly color: "#de630b";
+        readonly mimeTypes: readonly ["application/x-dxf", "image/x-dxf"];
+    };
 };
 export type FileFormat = keyof typeof FORMATS;
 export declare function getFormatPriority(linkFormat: FileFormat): number;
 export declare function getLinkPriority(link: DatasetDistribution): number;
-export declare function extensionToFormat(extension: string): FileFormat;
+export declare function getFileFormatFromServiceOutput(serviceOutput: string): FileFormat | null;
 export declare function getFileFormat(link: DatasetDistribution): FileFormat;
 export declare function isFormatInQueryParam(link: DatasetDistribution, alias: string): boolean;
 export declare function mimeTypeToFormat(mimeType: string): FileFormat;

package/libs/util/shared/src/lib/links/link-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-utils.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/util/shared/src/lib/links/link-utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2DAA2D,CAAA;AAI/F,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+EV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA;AAE7C,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAUhE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM,CAEjE;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,UAAU,CAO/D;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,mBAAmB,GAAG,UAAU,CAcnE;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,mBAAmB,EACzB,KAAK,EAAE,MAAM,GACZ,OAAO,CAQT;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAO7D;AAED,wBAAgB,eAAe,CAC7B,IAAI,EAAE,mBAAmB,EACzB,MAAM,EAAE,UAAU,GACjB,OAAO,CAMT;AAED,wBAAgB,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAQ5D;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM,CA0B9D;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAEtE"}
+{"version":3,"file":"link-utils.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/util/shared/src/lib/links/link-utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2DAA2D,CAAA;AAI/F,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA;AAE7C,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAUhE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM,CAEjE;AAED,wBAAgB,8BAA8B,CAC5C,aAAa,EAAE,MAAM,GACpB,UAAU,GAAG,IAAI,CAgBnB;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,mBAAmB,GAAG,UAAU,CAcnE;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,mBAAmB,EACzB,KAAK,EAAE,MAAM,GACZ,OAAO,CAQT;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAO7D;AAED,wBAAgB,eAAe,CAC7B,IAAI,EAAE,mBAAmB,EACzB,MAAM,EAAE,UAAU,GACjB,OAAO,CAMT;AAED,wBAAgB,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAQ5D;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM,CA0B9D;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAEtE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geonetwork-ui",
-  "version": "2.2.0-dev.4983265e",
+  "version": "2.2.0-dev.4db0b597",
   "engines": {
     "node": ">=14.17.0"
   },
@@ -48,12 +48,14 @@
   "dependencies": {
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
     "@camptocamp/ogc-client": "^0.4.0",
+    "@geospatial-sdk/geocoding": "^0.0.5-alpha.2",
     "@ltd/j-toml": "~1.35.2",
     "@messageformat/core": "^3.0.1",
     "@nx/angular": "16.6.0",
     "@rgrove/parse-xml": "~4.0.1",
     "alasql": "^3.1.0",
     "axios": "^1.6.0",
+    "basiclightbox": "^5.0.4",
     "chart.js": "^4.2.0",
     "chroma-js": "^2.1.2",
     "date-fns": "^2.29.3",
@@ -62,6 +64,7 @@
     "embla-carousel": "^8.0.0-rc14",
     "express": "^4.17.1",
     "geojson-validation": "^1.0.2",
+    "marked": "^11.1.1",
     "moment": "^2.29.4",
     "ng-table-virtual-scroll": "^1.4.1",
     "ngx-chips": "3.0.0",

package/src/libs/api/metadata-converter/src/lib/gn4/atomic-operations.ts

@@ -41,6 +41,9 @@ export const toDate = (field) => new Date(field)
 export const getFirstValue = (field) =>
   Array.isArray(field) ? field[0] : field
 
+export const getArrayItem = (field, index) =>
+  Array.isArray(field) && field[index] !== undefined ? field[index] : null
+
 export const getAsArray = (field) =>
   Array.isArray(field) ? field : field !== null ? [field] : []
 

package/src/libs/api/metadata-converter/src/lib/gn4/gn4.field.mapper.ts

@@ -1,4 +1,5 @@
 import {
+  getArrayItem,
   getAsArray,
   getAsUrl,
   getFirstValue,
@@ -22,6 +23,7 @@ import {
   DatasetDistributionType,
   DatasetDownloadDistribution,
   DatasetServiceDistribution,
+  DatasetSpatialExtent,
   OnlineLinkResource,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { matchProtocol } from '../common/distribution.mapper'
@@ -258,6 +260,47 @@ export class Gn4FieldMapper {
         kind,
       }
     },
+    geom: (output, source) => {
+      const geoms = getAsArray(selectField(source, 'geom'))
+      const shapes = getAsArray(selectField(source, 'shape'))
+      const extentDescriptions = getAsArray(
+        selectField(source, 'extentDescriptionObject')
+      )
+      const spatialExtents = getAsArray(selectField(source, 'spatialExtents'))
+      return {
+        ...output,
+        spatialExtents: [
+          ...spatialExtents,
+          ...geoms.map((geom, index) => {
+            const description = selectTranslatedValue(
+              getArrayItem(extentDescriptions, index),
+              this.lang3
+            )
+            const geometry = shapes[index] ?? geom
+            return {
+              ...(description !== null ? { description } : null),
+              geometry,
+            } as DatasetSpatialExtent
+          }),
+        ],
+      }
+    },
+    resourceTemporalDateRange: (output, source) => {
+      const ranges = getAsArray(
+        selectField(source, 'resourceTemporalDateRange')
+      )
+      return {
+        ...output,
+        temporalExtents: ranges.map((range) => {
+          const start = selectField(range, 'gte')
+          const end = selectField(range, 'lte')
+          return {
+            ...(start !== null ? { start: toDate(start) } : null),
+            ...(end !== null ? { end: toDate(end) } : null),
+          }
+        }),
+      }
+    },
   }
 
   private genericField = (output) => output

package/src/libs/api/metadata-converter/src/lib/gn4/gn4.metadata.mapper.ts

@@ -34,6 +34,7 @@ export class Gn4MetadataMapper extends MetadataBaseMapper<Gn4Record> {
       useLimitations: [],
       spatialExtents: [],
       temporalExtents: [],
+      overviews: [],
     }
     const record: CatalogRecord = Object.keys(_source).reduce(
       (prev, fieldName) =>

package/src/libs/api/repository/src/lib/gn4/index.ts

@@ -6,3 +6,5 @@ export * from './auth'
 export * from './favorites/favorites.service'
 export * from './selection/selection.service'
 export * from './gn4.provider'
+export * from './platform/gn4-platform.service'
+export * from './platform/gn4-platform.mapper'

package/src/libs/api/repository/src/lib/gn4/selection/selection.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
 import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { SelectionsApiService } from '../../../../../../../libs/data-access/gn4/src'
-import { BehaviorSubject, Observable, Subscription, map, tap } from 'rxjs'
+import { BehaviorSubject, firstValueFrom } from 'rxjs'
 
 const BUCKET_ID = 'gnui'
 
@@ -12,7 +12,6 @@ export class SelectionService {
   selectedRecordsIdentifiers$: BehaviorSubject<string[]> = new BehaviorSubject(
     []
   )
-  subscription: Subscription
 
   constructor(private selectionsApi: SelectionsApiService) {
     this.selectionsApi.get(BUCKET_ID).subscribe((selectedIds) => {
@@ -33,48 +32,25 @@ export class SelectionService {
     this.selectedRecordsIdentifiers$.next(filtered)
   }
 
-  selectRecords(records: CatalogRecord[]): Observable<void> {
-    const newIds = []
-    records.map((record) => {
-      newIds.push(record.uniqueIdentifier)
+  selectRecords(records: CatalogRecord[]) {
+    const newIds = records.map((record) => record.uniqueIdentifier)
+    this.selectionsApi.add(BUCKET_ID, newIds).subscribe(() => {
+      this.addIdsToSelected(newIds)
     })
-    const apiResponse = this.selectionsApi.add(BUCKET_ID, newIds)
-    return apiResponse.pipe(
-      tap(() => {
-        this.addIdsToSelected(newIds)
-      }),
-      map(() => undefined)
-    )
   }
 
-  deselectRecords(records: CatalogRecord[]): Observable<void> {
-    const idsToBeRemoved = []
-    records.map((record) => {
-      idsToBeRemoved.push(record.uniqueIdentifier)
+  deselectRecords(records: CatalogRecord[]) {
+    const idsToBeRemoved = records.map((record) => record.uniqueIdentifier)
+    this.selectionsApi.clear(BUCKET_ID, idsToBeRemoved).subscribe(() => {
+      this.removeIdsFromSelected(idsToBeRemoved)
     })
-    const apiResponse = this.selectionsApi.clear(BUCKET_ID, idsToBeRemoved)
-    return apiResponse.pipe(
-      tap(() => {
-        this.removeIdsFromSelected(idsToBeRemoved)
-      }),
-      map(() => undefined)
-    )
   }
 
-  clearSelection(): Observable<void> {
-    const currentSelectedResponse = this.selectionsApi.get(BUCKET_ID)
-    let currentSelection
-    this.subscription = currentSelectedResponse.subscribe((value) => {
-      currentSelection = [...value]
+  async clearSelection() {
+    const response = await firstValueFrom(this.selectionsApi.get(BUCKET_ID))
+    const currentSelection = Array.from(response)
+    this.selectionsApi.clear(BUCKET_ID, currentSelection).subscribe(() => {
+      this.removeIdsFromSelected(currentSelection)
     })
-    this.selectionsApi.clear(BUCKET_ID, currentSelection)
-    const apiResponse = this.selectionsApi.clear(BUCKET_ID, currentSelection)
-
-    return apiResponse.pipe(
-      tap(() => {
-        this.removeIdsFromSelected(currentSelection)
-      }),
-      map(() => undefined)
-    )
   }
 }

package/src/libs/common/domain/src/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './organizations.service.interface'
+export * from './platform.service.interface'

package/src/libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -1,6 +1,7 @@
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { Individual } from './contact.model'
-import { Organization } from './organization.model'
+import type { Individual } from './contact.model'
+import type { Organization } from './organization.model'
+import type { Geometry } from 'geojson'
 
 type Uuid = string
 
@@ -122,6 +123,7 @@ export interface DatasetDownloadDistribution {
   // textEncoding?: string
   name?: string
   description?: string
+  accessServiceProtocol?: ServiceProtocol
 }
 
 export interface OnlineLinkResource {
@@ -145,13 +147,16 @@ export interface GraphicOverview {
 }
 
 export interface DatasetSpatialExtent {
-  geometry: unknown // GeoJSON
+  geometry: Geometry
   description?: string
 }
 
+/**
+ * At least a start or an end date should be provided
+ */
 export interface DatasetTemporalExtent {
-  start: Date
-  end: Date
+  start?: Date
+  end?: Date
   description?: string
 }
 
@@ -163,8 +168,8 @@ export interface DatasetRecord extends BaseRecord {
   datasetUpdated?: Date
   lineage: string // Explanation of the origin of this record (e.g: how, why)"
   distributions: Array<DatasetDistribution>
-  spatialExtents: Array<DatasetSpatialExtent> // not handled yet
-  temporalExtents: Array<DatasetTemporalExtent> // not handled yet
+  spatialExtents: Array<DatasetSpatialExtent>
+  temporalExtents: Array<DatasetTemporalExtent>
   spatialRepresentation?: SpatialRepresentationType
 }
 

package/src/libs/common/domain/src/lib/model/search/aggregation.model.ts

@@ -1,4 +1,4 @@
-import { FieldName } from './search.model'
+import { FieldName } from './field.model'
 import { FieldFilters } from './filter.model'
 
 export interface TermsAggregationParams {

package/src/libs/common/domain/src/lib/model/search/field.model.ts

@@ -0,0 +1 @@
+export type FieldName = string

package/src/libs/common/domain/src/lib/model/search/filter.model.ts

@@ -1,4 +1,4 @@
-import { FieldName } from './search.model'
+import { FieldName } from './field.model'
 
 export type FieldFilterByValues = Record<string, boolean>
 export type FieldFilterByExpression = string | number

package/src/libs/common/domain/src/lib/model/search/index.ts

@@ -2,3 +2,4 @@ export * from './aggregation.model'
 export * from './filter.model'
 export * from './search.model'
 export * from './sort-by.model'
+export * from './field.model'

package/src/libs/common/domain/src/lib/model/search/search.model.ts

@@ -1,10 +1,10 @@
 import { FieldFilters } from './filter.model'
 import { CatalogRecord } from '../record'
 import { Geometry } from 'geojson'
+import { FieldName } from './field.model'
 
-type FieldSort = ['desc' | 'asc', FieldName]
+export type FieldSort = ['desc' | 'asc', FieldName]
 export type SortByField = FieldSort | FieldSort[] // several sort criteria can be used!
-export type FieldName = string
 
 export interface SearchParams {
   filters?: FieldFilters

package/src/libs/common/domain/src/lib/model/user/index.ts

@@ -0,0 +1 @@
+export * from './user.model'

package/src/libs/feature/catalog/src/lib/my-org/my-org.service.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core'
 import { OrganizationsServiceInterface } from '../../../../../../libs/common/domain/src/lib/organizations.service.interface'
-import { BehaviorSubject, combineLatest, map, Observable } from 'rxjs'
+import { combineLatest, map, Observable } from 'rxjs'
 import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user/user.model'
 import { PlatformServiceInterface } from '../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { shareReplay } from 'rxjs/operators'
 
 @Injectable({
   providedIn: 'root',
@@ -16,20 +17,6 @@ export class MyOrgService {
     userList: UserModel[]
   }>
 
-  private myOrgDataSubject = new BehaviorSubject<{
-    orgName: string
-    logoUrl: string
-    recordCount: number
-    userCount: number
-    userList: UserModel[]
-  }>({
-    orgName: '',
-    logoUrl: '',
-    recordCount: 0,
-    userCount: 0,
-    userList: [],
-  })
-
   constructor(
     private platformService: PlatformServiceInterface,
     private orgService: OrganizationsServiceInterface
@@ -55,7 +42,8 @@ export class MyOrgService {
           userList,
           userCount,
         }
-      })
+      }),
+      shareReplay(1)
     )
   }
 }

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -9,8 +9,8 @@ import {
   SupportedTypes,
 } from '../../../../../../libs/util/data-fetcher/src'
 import {
-  extensionToFormat,
   getFileFormat,
+  getFileFormatFromServiceOutput,
   getMimeTypeForFormat,
   ProxyService,
 } from '../../../../../../libs/util/shared/src'
@@ -45,7 +45,7 @@ interface WfsDownloadUrls {
 export class DataService {
   constructor(private proxy: ProxyService) {}
 
-  private getDownloadUrlsFromWfs(
+  getDownloadUrlsFromWfs(
     wfsUrl: string,
     featureTypeName: string
   ): Observable<WfsDownloadUrls> {
@@ -120,7 +120,7 @@ export class DataService {
     )
   }
 
-  private getDownloadUrlFromEsriRest(apiUrl: string, format: string): string {
+  getDownloadUrlFromEsriRest(apiUrl: string, format: string): string {
     return this.proxy.getProxiedUrl(
       `${apiUrl}/query?f=${format}&where=1=1&outFields=*`
     )
@@ -138,8 +138,11 @@ export class DataService {
       map((urls) =>
         Object.keys(urls).map((format) => ({
           ...wfsLink,
+          type: 'download',
           url: new URL(urls[format]),
-          mimeType: getMimeTypeForFormat(extensionToFormat(format)) || format,
+          mimeType: getMimeTypeForFormat(
+            getFileFormatFromServiceOutput(format)
+          ),
         }))
       )
     )
@@ -153,7 +156,7 @@ export class DataService {
       url: new URL(
         this.getDownloadUrlFromEsriRest(esriRestLink.url.toString(), format)
       ),
-      mimeType: getMimeTypeForFormat(extensionToFormat(format)) || format,
+      mimeType: getMimeTypeForFormat(getFileFormatFromServiceOutput(format)),
     }))
   }
 

package/src/libs/feature/editor/src/lib/record-form/record-form.component.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { EditorService, FormField } from '../services/editor.service'
+import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -8,7 +9,7 @@ import { EditorService, FormField } from '../services/editor.service'
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, UiInputsModule],
 })
 export class RecordFormComponent {
   constructor(public editorService: EditorService) {}

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

@@ -17,3 +17,4 @@ 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'

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

@@ -0,0 +1,21 @@
+<div class="flex flex-col gap-2 my-2">
+  <div class="flex items-center gap-4">
+    <div class="flex-grow rounded-md border-2 border-gray-200">
+      <gn-ui-drag-and-drop-file-input
+        (fileChange)="handleFileChange($event)"
+        [accept]="acceptedMimeType.join(',')"
+        [placeholder]="'map.addFromFile.placeholder' | translate"
+        class="placeholder-grey"
+      ></gn-ui-drag-and-drop-file-input>
+    </div>
+  </div>
+  <p class="text-sm text-gray-600" translate>map.help.addFromFile</p>
+</div>
+
+<div *ngIf="errorMessage" class="text-red-500 mt-2">
+  {{ errorMessage }}
+</div>
+
+<div *ngIf="successMessage" class="text-green-500 mt-2">
+  {{ successMessage }}
+</div>

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

@@ -0,0 +1,107 @@
+import { ChangeDetectorRef, Component } from '@angular/core'
+import { MapContextLayerModel } from '../map-context/map-context.model'
+import { MapFacade } from '../+state/map.facade'
+
+const INVALID_FILE_FORMAT_ERROR_MESSAGE = 'Invalid file format'
+
+@Component({
+  selector: 'gn-ui-add-layer-from-file',
+  templateUrl: './add-layer-from-file.component.html',
+  styleUrls: ['./add-layer-from-file.component.css'],
+})
+export class AddLayerFromFileComponent {
+  errorMessage: string | null = null
+  successMessage: string | null = null
+  loading = false
+  readonly acceptedMimeType = ['.geojson']
+  readonly maxFileSize = 5000000
+
+  constructor(
+    private mapFacade: MapFacade,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  async handleFileChange(file: File) {
+    if (!file) {
+      this.displayMessage(INVALID_FILE_FORMAT_ERROR_MESSAGE, 'error')
+      return
+    }
+    if (file.size > this.maxFileSize) {
+      this.displayMessage('File size exceeds the limit of 5MB', 'error')
+      return
+    }
+    await this.addLayer(file)
+  }
+
+  private async addLayer(file: File) {
+    this.errorMessage = null
+    this.loading = true
+    try {
+      if (!this.isFileFormatValid(file)) {
+        this.displayMessage(INVALID_FILE_FORMAT_ERROR_MESSAGE, 'error')
+        return
+      }
+
+      const fileExtension = this.getFileExtension(file)
+      switch (fileExtension) {
+        case 'geojson':
+          await this.addGeoJsonLayer(file)
+          break
+        default:
+          this.displayMessage(INVALID_FILE_FORMAT_ERROR_MESSAGE, 'error')
+          break
+      }
+    } catch (error) {
+      const err = error as Error
+      this.displayMessage('Error loading file: ' + err.message, 'error')
+    } finally {
+      this.loading = false
+    }
+  }
+
+  private addGeoJsonLayer(file: File) {
+    return new Promise<void>((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()
+        }
+        reader.onerror = reject
+        reader.readAsText(file)
+      } catch (error) {
+        reject(error)
+      }
+    })
+  }
+
+  private isFileFormatValid(file: File): boolean {
+    const fileExtension = this.getFileExtension(file)
+    return this.acceptedMimeType.includes(`.${fileExtension}`)
+  }
+
+  private getFileExtension(file: File): string | undefined {
+    return file.name.split('.').pop()
+  }
+
+  private displayMessage(message: string, type: 'success' | 'error') {
+    if (type === 'success') {
+      this.successMessage = message
+    } else if (type === 'error') {
+      this.errorMessage = message
+    }
+
+    setTimeout(() => {
+      this.successMessage = null
+      this.errorMessage = null
+      this.changeDetectorRef.detectChanges()
+    }, 5000)
+  }
+}

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

@@ -0,0 +1,37 @@
+<div class="flex items-center mb-5">
+  <gn-ui-text-input
+    [(value)]="wfsUrl"
+    (valueChange)="urlChange.next($event)"
+    [hint]="'map.wfs.urlInput.hint' | translate"
+    class="w-96"
+  >
+  </gn-ui-text-input>
+</div>
+
+<div *ngIf="errorMessage" class="text-red-500 mt-2">
+  {{ errorMessage }}
+</div>
+
+<div *ngIf="loading">
+  <p class="loading-message" translate>map.loading.service</p>
+</div>
+
+<div *ngIf="!loading && layers.length > 0">
+  <h2 class="font-bold" translate>map.layers.available</h2>
+  <ng-container *ngFor="let layer of layers">
+    <div class="flex items-center justify-between my-2 layer-item-tree">
+      <p class="max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap">
+        {{ layer.title }}
+      </p>
+      <gn-ui-button
+        *ngIf="layer.name"
+        class="layer-add-btn"
+        type="primary"
+        (buttonClick)="addLayer(layer)"
+        extraClass="text-sm !px-2 !py-1"
+        translate
+        ><span translate> map.layer.add </span></gn-ui-button
+      >
+    </div>
+  </ng-container>
+</div>