geonetwork-ui 2.6.0-dev.3a78a5eaa → 2.6.0-dev.4fa0a0afc

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -34,6 +34,7 @@ import {
   createViewFromLayer,
   MapContext,
   MapContextLayer,
+  SourceLoadErrorEvent,
 } from '@geospatial-sdk/core'
 import {
   FeatureDetailComponent,
@@ -49,13 +50,14 @@ import {
   ButtonComponent,
   DropdownSelectorComponent,
 } from '../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { ExternalViewerButtonComponent } from '../external-viewer-button/external-viewer-button.component'
 import {
   LoadingMaskComponent,
   PopupAlertComponent,
 } from '../../../../../../libs/ui/widgets/src'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { FetchError } from '../../../../../../libs/util/data-fetcher/src'
 
 marker('map.dropdown.placeholder')
 marker('wfs.feature.limit')
@@ -100,9 +102,6 @@ export class MapViewComponent implements AfterViewInit {
 
   onLegendStatusChange(status: boolean) {
     this.legendExists = status
-    if (!status) {
-      this.showLegend = false
-    }
   }
 
   compatibleMapLinks$ = combineLatest([
@@ -149,8 +148,7 @@ export class MapViewComponent implements AfterViewInit {
       return this.getLayerFromLink(link).pipe(
         map((layer) => [layer]),
         catchError((e) => {
-          this.error = e.message
-          console.warn(e.stack || e.message)
+          this.handleError(e)
           return of([])
         }),
         finalize(() => (this.loading = false))
@@ -192,7 +190,8 @@ export class MapViewComponent implements AfterViewInit {
     private mdViewFacade: MdViewFacade,
     private mapUtils: MapUtilsService,
     private dataService: DataService,
-    private changeRef: ChangeDetectorRef
+    private changeRef: ChangeDetectorRef,
+    private translateService: TranslateService
   ) {}
 
   async ngAfterViewInit() {
@@ -210,6 +209,16 @@ export class MapViewComponent implements AfterViewInit {
     this.changeRef.detectChanges()
   }
 
+  onSourceLoadError(error: SourceLoadErrorEvent) {
+    if (error.httpStatus === 403 || error.httpStatus === 401) {
+      this.error = this.translateService.instant(`dataset.error.forbidden`)
+    } else {
+      this.error = this.translateService.instant(`dataset.error.http`, {
+        info: error.httpStatus,
+      })
+    }
+  }
+
   resetSelection(): void {
     if (this.selection) {
       // FIXME: restore styling of selected feature
@@ -255,4 +264,24 @@ export class MapViewComponent implements AfterViewInit {
   selectLinkToDisplay(link: number) {
     this.selectedLinkIndex$.next(link)
   }
+
+  handleError(error: FetchError | Error | string) {
+    if (error instanceof FetchError) {
+      this.error = this.translateService.instant(
+        `dataset.error.${error.type}`,
+        {
+          info: error.info,
+        }
+      )
+      console.warn(error.message)
+    } else if (error instanceof Error) {
+      this.error = this.translateService.instant(error.message)
+      console.warn(error.stack || error)
+    } else {
+      this.error = this.translateService.instant(error)
+      console.warn(error)
+    }
+    this.loading = false
+    this.changeRef.detectChanges()
+  }
 }

package/src/libs/ui/elements/src/lib/api-card/api-card.component.html

@@ -1,13 +1,66 @@
 <div
-  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden cursor-default"
+  class="group flex justify-between rounded filter overflow-hidden"
+  [ngClass]="cardClass"
 >
-  <div
-    class="font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]"
-  >
-    {{ link.name || link.description }}
+  <ng-container *ngIf="size !== 'S'">
+    <div>
+      <ng-container *ngTemplateOutlet="content"></ng-container>
+    </div>
+    <div class="flex items-center">
+      <ng-container *ngTemplateOutlet="buttons"></ng-container>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="size === 'S'">
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </ng-container>
+</div>
+
+<ng-template #buttons>
+  <div class="flex flex-row gap-2">
+    <gn-ui-copy-text-button
+      [text]="link.url"
+      [tooltipText]="'tooltip.url.copy' | translate"
+      [displayText]="false"
+      class="border border-gray-300 rounded-lg pt-1 px-2 h-[34px]"
+    ></gn-ui-copy-text-button>
+    <button
+      *ngIf="displayApiFormButton"
+      type="button"
+      class="gn-ui-card-icon"
+      [ngClass]="{
+        'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
+          displayText,
+      }"
+      [matTooltip]="
+        !currentlyActive
+          ? ('record.metadata.api.form.openForm' | translate)
+          : ('record.metadata.api.form.closeForm' | translate)
+      "
+      matTooltipPosition="above"
+      (click)="openRecordApiFormPanel()"
+    >
+      <ng-icon
+        class="pointer-events-none align-middle card-icon"
+        name="iconoirSettings"
+        [ngClass]="{
+          'text-secondary opacity-100': currentlyActive,
+        }"
+      ></ng-icon>
+    </button>
   </div>
-  <div class="">
-    <div class="flex flex-row justify-between">
+</ng-template>
+
+<ng-template #content>
+  <div>
+    <div class="gn-ui-card-title">
+      {{ link.description || link.name }}
+    </div>
+    <div class="gn-ui-card-detail">
+      {{ link.name }}
+    </div>
+  </div>
+  <div class="flex flex-row justify-between">
+    <div class="flex flex-row gap-2.5 items-center pt-1">
       <span
         *ngIf="link.accessServiceProtocol !== 'GPFDL'"
         class="bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
@@ -26,36 +79,9 @@
       >
         record.metadata.api.gpfdl</span
       >
-      <div class="flex flex-row gap-2 items-center">
-        <gn-ui-copy-text-button
-          [text]="link.url"
-          [tooltipText]="'tooltip.url.copy' | translate"
-          [displayText]="false"
-        ></gn-ui-copy-text-button>
-        <button
-          *ngIf="displayApiFormButton"
-          type="button"
-          [ngClass]="{
-            'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
-              displayText,
-          }"
-          [matTooltip]="
-            !currentlyActive
-              ? ('record.metadata.api.form.openForm' | translate)
-              : ('record.metadata.api.form.closeForm' | translate)
-          "
-          matTooltipPosition="above"
-          (click)="openRecordApiFormPanel()"
-        >
-          <ng-icon
-            class="pointer-events-none align-middle card-icon"
-            name="matMoreHoriz"
-            [ngClass]="{
-              'text-secondary opacity-100': currentlyActive,
-            }"
-          ></ng-icon>
-        </button>
-      </div>
+    </div>
+    <div *ngIf="size === 'S'">
+      <ng-container *ngTemplateOutlet="buttons"></ng-container>
     </div>
   </div>
-</div>
+</ng-template>

package/src/libs/ui/elements/src/lib/api-card/api-card.component.ts

@@ -14,7 +14,9 @@ import { CopyTextButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { NgIcon, provideIcons } from '@ng-icons/core'
-import { matMoreHoriz } from '@ng-icons/material-icons/baseline'
+import { iconoirSettings } from '@ng-icons/iconoir'
+
+type CardSize = 'L' | 'M' | 'S' | 'XS'
 
 @Component({
   selector: 'gn-ui-api-card',
@@ -31,18 +33,40 @@ import { matMoreHoriz } from '@ng-icons/material-icons/baseline'
   ],
   viewProviders: [
     provideIcons({
-      matMoreHoriz,
+      iconoirSettings,
     }),
   ],
 })
 export class ApiCardComponent implements OnInit, OnChanges {
+  private _size: 'L' | 'M' | 'S' | 'XS'
   @Input() link: DatasetServiceDistribution
   @Input() currentLink: DatasetServiceDistribution
+  private readonly sizeClassMap: Record<CardSize, string> = {
+    L: 'gn-ui-card-l py-2 px-5 flex-row',
+    M: 'gn-ui-card-m py-2 px-5 flex-row',
+    S: 'gn-ui-card-s p-4 flex-col',
+    XS: 'gn-ui-card-xs py-2 px-5 flex-row',
+  }
+
+  @Input() set size(value: CardSize) {
+    this._size = value
+    this.cardClass = this.sizeClassMap[value]
+  }
+  get size(): 'L' | 'M' | 'S' | 'XS' {
+    return this._size
+  }
+  cardClass = ''
   displayApiFormButton: boolean
   currentlyActive = false
   @Output() openRecordApiForm: EventEmitter<DatasetServiceDistribution> =
     new EventEmitter<DatasetServiceDistribution>()
 
+  get generatedText() {
+    return this.link.accessServiceProtocol === 'wfs'
+      ? 'datahub.search.filter.generatedByWfs'
+      : 'datahub.search.filter.generatedByAPI'
+  }
+
   ngOnInit() {
     this.displayApiFormButton =
       this.link.accessServiceProtocol === 'ogcFeatures' ||

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

@@ -1,36 +1,36 @@
 <a
   href="{{ link.url }}"
   target="_blank"
-  class="group flex justify-between card-shadow px-6 py-5 cursor-pointer"
+  class="group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden"
   rel="noopener"
+  [ngClass]="cardClass"
 >
-  <div class="grow-1 w-full overflow-hidden">
-    <div
-      class="text-21 text-black truncate font-title w-11/12"
-      [title]="link.description || link.name"
-    >
+  <div class="flex flex-col justify-between">
+    <div class="gn-ui-card-title" [title]="link.description || link.name">
       {{ link.description || link.name }}
     </div>
-    <div class="pt-1">
+    <div class="gn-ui-card-detail">
+      {{ link.name }}
+    </div>
+    <div class="flex flex-row gap-2 items-center pt-1">
       <span
         class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100"
         [style.background-color]="color"
         data-cy="download-format"
         >{{ format || ('downloads.format.unknown' | translate) }}</span
       >
-      <span
-        class="pl-2 inline-flex items-center text-gray-800 text-sm"
-        *ngIf="isFromApi"
-        translate=""
+      <span class="text-gray-800 text-xs" *ngIf="isFromApi" translate=""
         >datahub.search.filter.generatedByAPI</span
       >
     </div>
   </div>
-  <div class="shrink-1 w-14 flex flex-col justify-center items-center">
-    <ng-icon
-      class="!w-8 !h-8 card-icon text-3xl"
-      name="matCloudDownloadOutline"
-    >
-    </ng-icon>
+  <div class="flex" [ngClass]="size === 'S' ? 'items-end' : 'items-center'">
+    <div class="gn-ui-card-icon">
+      <ng-icon
+        class="inline-block card-icon align-middle"
+        name="iconoirDownload"
+      >
+      </ng-icon>
+    </div>
   </div>
 </a>

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

@@ -9,7 +9,9 @@ import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/
 import { TranslateModule } from '@ngx-translate/core'
 import { CommonModule } from '@angular/common'
 import { NgIcon, provideIcons } from '@ng-icons/core'
-import { matCloudDownloadOutline } from '@ng-icons/material-icons/outline'
+import { iconoirDownload } from '@ng-icons/iconoir'
+
+type CardSize = 'L' | 'M' | 'S' | 'XS'
 
 @Component({
   selector: 'gn-ui-download-item',
@@ -20,15 +22,31 @@ import { matCloudDownloadOutline } from '@ng-icons/material-icons/outline'
   standalone: true,
   viewProviders: [
     provideIcons({
-      matCloudDownloadOutline,
+      iconoirDownload,
     }),
   ],
 })
 export class DownloadItemComponent {
+  private _size: 'L' | 'M' | 'S' | 'XS'
   @Input() link: DatasetOnlineResource
   @Input() color: string
   @Input() format: string
   @Input() isFromApi: boolean
+  private readonly sizeClassMap: Record<CardSize, string> = {
+    L: 'gn-ui-card-l py-2 px-5',
+    M: 'gn-ui-card-m py-2 px-5',
+    S: 'gn-ui-card-s p-4',
+    XS: 'gn-ui-card-xs py-2 px-5',
+  }
+
+  @Input() set size(value: CardSize) {
+    this._size = value
+    this.cardClass = this.sizeClassMap[value]
+  }
+  get size(): 'L' | 'M' | 'S' | 'XS' {
+    return this._size
+  }
+  cardClass = ''
   @Output() exportUrl = new EventEmitter<string>()
 
   openUrl() {

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.html

@@ -28,6 +28,7 @@
 </div>
 <div class="mb-2 sm:mb-3" *ngFor="let link of filteredLinks">
   <gn-ui-download-item
+    size="L"
     [link]="link"
     [color]="getLinkColor(link)"
     [format]="getLinkFormat(link)"

package/src/libs/ui/elements/src/lib/link-card/link-card.component.html

@@ -1,39 +1,37 @@
 <a
   [href]="link.url"
   target="_blank"
-  class="flex flex-col justify-between group grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden"
-  [ngClass]="{ 'h-40': !compact }"
+  class="group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden"
+  [ngClass]="cardClass"
   [title]="title"
 >
-  <ng-container *ngIf="!compact; else compactTpl">
-    <div class="max-h-24 overflow-hidden text-ellipsis">
-      <p
-        class="font-title font-medium text-21 text-black break-words mb-1 line-clamp-2"
-      >
-        {{ link.name }}
-      </p>
-      <p class="font-medium text-sm break-words">
-        {{ link.description }}
-      </p>
-      <p
-        *ngIf="!link.name && !link.description"
-        class="font-medium text-sm break-words truncate"
-      >
-        {{ link.url }}
-      </p>
+  <div class="flex flex-col justify-between">
+    <div class="gn-ui-card-title">
+      {{ link.description || link.name }}
     </div>
-    <div>
-      <ng-icon class="card-icon" name="matOpenInNew"></ng-icon>
+    <div class="gn-ui-card-detail">
+      {{ link.name }}
     </div>
-  </ng-container>
-  <ng-template #compactTpl>
-    <div class="flex items-center justify-between gap-4">
-      <p
-        class="overflow-hidden font-title font-medium text-21 text-black text-ellipsis whitespace-nowrap"
+    <p *ngIf="!link.name && !link.description" class="gn-ui-card-title">
+      {{ link.url }}
+    </p>
+    <div class="pt-1">
+      <span
+        class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100"
+        [style.background-color]="getLinkColor(link)"
+        data-cy="download-format"
+        >{{
+          getLinkFormat(link) || ('downloads.format.unknown' | translate)
+        }}</span
       >
-        {{ link.name || link.description }}
-      </p>
-      <ng-icon class="card-icon flex-shrink-0" name="matOpenInNew"></ng-icon>
     </div>
-  </ng-template>
+  </div>
+  <div class="flex" [ngClass]="size === 'S' ? 'items-end' : 'items-center'">
+    <div class="gn-ui-card-icon">
+      <ng-icon
+        class="inline-block card-icon align-middle"
+        name="matOpenInNew"
+      ></ng-icon>
+    </div>
+  </div>
 </a>

package/src/libs/ui/elements/src/lib/link-card/link-card.component.ts

@@ -1,5 +1,9 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetDownloadDistribution,
+  DatasetOnlineResource,
+  DatasetServiceDistribution,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 import { CommonModule } from '@angular/common'
 import {
   NgIconComponent,
@@ -7,14 +11,17 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { matOpenInNew } from '@ng-icons/material-icons/baseline'
+import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
+import { TranslateModule } from '@ngx-translate/core'
 
+type CardSize = 'L' | 'M' | 'S' | 'XS'
 @Component({
   selector: 'gn-ui-link-card',
   templateUrl: './link-card.component.html',
   styleUrls: ['./link-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, NgIconComponent],
+  imports: [CommonModule, NgIconComponent, TranslateModule],
   providers: [
     provideIcons({
       matOpenInNew,
@@ -23,8 +30,23 @@ import { matOpenInNew } from '@ng-icons/material-icons/baseline'
   ],
 })
 export class LinkCardComponent {
+  private _size: 'L' | 'M' | 'S' | 'XS'
   @Input() link: DatasetOnlineResource
-  @Input() compact = false
+  private readonly sizeClassMap: Record<CardSize, string> = {
+    L: 'gn-ui-card-l py-2 px-5',
+    M: 'gn-ui-card-m py-2 px-5',
+    S: 'gn-ui-card-s p-4',
+    XS: 'gn-ui-card-xs py-2 px-5',
+  }
+
+  @Input() set size(value: CardSize) {
+    this._size = value
+    this.cardClass = this.sizeClassMap[value]
+  }
+  get size(): 'L' | 'M' | 'S' | 'XS' {
+    return this._size
+  }
+  cardClass = ''
 
   get title() {
     if (this.link.name && this.link.description) {
@@ -32,4 +54,12 @@ export class LinkCardComponent {
     }
     return this.link.name || this.link.description || ''
   }
+
+  getLinkFormat(link: any) {
+    return getFileFormat(link)
+  }
+
+  getLinkColor(link: any) {
+    return getBadgeColor(getFileFormat(link))
+  }
 }

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts

@@ -162,7 +162,7 @@ export class RecordApiFormComponent {
       limit: limit !== '-1' ? Number(limit) : -1,
       offset: offset !== '' ? Number(offset) : undefined,
       outputCrs:
-        format === ('application/json' || 'geojson') ? 'EPSG:4326' : undefined,
+        format.toLowerCase().indexOf('json') > -1 ? 'EPSG:4326' : undefined,
     }
 
     if (this.endpoint instanceof WfsEndpoint) {
@@ -170,6 +170,7 @@ export class RecordApiFormComponent {
       options.maxFeatures = limit !== '-1' ? Number(limit) : undefined
       return this.endpoint.getFeatureUrl(this.apiFeatureType, options)
     } else {
+      delete options.outputCrs
       return await this.endpoint.getCollectionItemsUrl(
         this.apiFeatureType,
         options

package/src/libs/ui/layout/src/lib/carousel/carousel.component.css

@@ -1,7 +1,3 @@
-:host .carousel-container ::ng-deep > * {
-  flex-shrink: 0;
-}
-
 :host {
   position: relative;
   display: block;

package/src/libs/ui/map/src/lib/components/map-container/map-container.component.ts

@@ -28,6 +28,8 @@ import {
   MapContextLayer,
   MapContextLayerXyz,
   MapContextView,
+  SourceLoadErrorEvent,
+  SourceLoadErrorType,
 } from '@geospatial-sdk/core'
 import {
   applyContextDiffToMap,
@@ -119,6 +121,18 @@ export class MapContainerComponent implements AfterViewInit, OnChanges {
     }
     return this._mapClick
   }
+  _sourceLoadError: EventEmitter<SourceLoadErrorEvent>
+  @Output() get sourceLoadError() {
+    if (!this._sourceLoadError) {
+      this.openlayersMap.then((olMap) => {
+        listen(olMap, SourceLoadErrorType, (error: SourceLoadErrorEvent) =>
+          this._sourceLoadError.emit(error)
+        )
+      })
+      this._sourceLoadError = new EventEmitter<SourceLoadErrorEvent>()
+    }
+    return this._sourceLoadError
+  }
 
   @ViewChild('map') container: ElementRef
   displayMessage$: Observable<boolean>

package/src/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts

@@ -33,6 +33,9 @@ export class MapLegendComponent implements OnChanges {
         if (this.legendHTML) {
           this.legendStatusChange.emit(true)
         }
+      } else {
+        this.legendHTML = false
+        this.legendStatusChange.emit(false)
       }
     }
   }

package/src/libs/util/data-fetcher/src/lib/data-fetcher.ts

@@ -53,7 +53,9 @@ export async function openDataset(
     reader.load()
     return reader
   } catch (e: any) {
-    throw FetchError.parsingFailed(e.message)
+    //WfsReader may already raise a FetchError
+    if (e instanceof FetchError) throw e
+    else throw FetchError.parsingFailed(e.message)
   }
 }
 

package/src/libs/util/data-fetcher/src/lib/model.ts

@@ -7,7 +7,14 @@ export class FetchError {
   stack = null
 
   constructor(
-    public type: 'http' | 'network' | 'parse' | 'unsupportedType' | 'unknown',
+    public type:
+      | 'http'
+      | 'forbidden'
+      | 'network'
+      | 'parse'
+      | 'unsupportedType'
+      | 'unknown',
+
     public info: string,
     public httpStatus = 0
   ) {
@@ -20,6 +27,9 @@ ${body}`
       : `${code}`
     return new FetchError('http', info, code)
   }
+  static forbidden(code: number) {
+    return new FetchError('forbidden', '', code)
+  }
   static corsOrNetwork(message: string) {
     return new FetchError('network', message, 0)
   }

package/src/libs/util/data-fetcher/src/lib/readers/wfs.ts

@@ -1,5 +1,5 @@
-import { WfsEndpoint, WfsVersion } from '@camptocamp/ogc-client'
-import { DataItem, DatasetInfo, PropertyInfo } from '../model'
+import { EndpointError, WfsEndpoint, WfsVersion } from '@camptocamp/ogc-client'
+import { DataItem, DatasetInfo, FetchError, PropertyInfo } from '../model'
 import { fetchDataAsText } from '../utils'
 import { GmlReader, parseGml } from './gml'
 import { GeojsonReader, parseGeojson } from './geojson'
@@ -7,6 +7,32 @@ import { BaseCacheReader } from './base-cache'
 import { getJsonDataItemsProxy, jsonToGeojsonFeature } from '../utils'
 import { generateSqlQuery } from '../sql-utils'
 
+export async function getWfsEndpoint(wfsUrl: string): Promise<WfsEndpoint> {
+  try {
+    return await new WfsEndpoint(wfsUrl).isReady()
+  } catch (e) {
+    if (
+      e instanceof Error &&
+      'isCrossOriginRelated' in e &&
+      'httpStatus' in e
+    ) {
+      const error = e as EndpointError
+      if (error.isCrossOriginRelated === true) {
+        throw new Error(`wfs.unreachable.cors`)
+      }
+      if (error.httpStatus === 401 || error.httpStatus === 403) {
+        throw FetchError.forbidden(error.httpStatus)
+      } else if (error.httpStatus === 400 || error.httpStatus > 403) {
+        throw FetchError.http(error.httpStatus)
+      } else {
+        throw FetchError.unknownType()
+      }
+    } else {
+      throw FetchError.unknownType()
+    }
+  }
+}
+
 export class WfsReader extends BaseCacheReader {
   endpoint: WfsEndpoint
   featureTypeName: string
@@ -53,7 +79,7 @@ export class WfsReader extends BaseCacheReader {
   }
 
   static async createReader(wfsUrlEndpoint: string, featureTypeName?: string) {
-    const wfsEndpoint = await new WfsEndpoint(wfsUrlEndpoint).isReady()
+    const wfsEndpoint = await getWfsEndpoint(wfsUrlEndpoint)
     const featureTypes = wfsEndpoint.getFeatureTypes()
     const featureType = wfsEndpoint.getFeatureTypeSummary(
       featureTypes.length === 1 && !featureTypeName