geonetwork-ui 2.6.0-dev.01d2b5fc0 → 2.6.0-dev.4fa0a0afc

package/src/libs/common/fixtures/src/lib/records.fixtures.ts

@@ -187,8 +187,24 @@ As such, **it is not very interesting at all.**`,
           ],
           code: '',
           aliases: '',
-          typeName: "Catalogue d'attributs",
-          definition: '',
+          typeName: "Catalogue d'attributs N°1",
+          definition: 'Définition du catalogue d attributs N°1',
+          isAbstract: 'false',
+        },
+        {
+          attributeTable: [
+            {
+              code: 'UniqueObject',
+              name: 'unique object ',
+              link: '',
+              definition: 'this is the only object of this catalog',
+              type: 'String (50)',
+            },
+          ],
+          code: '',
+          aliases: '',
+          typeName: "Catalogue d'attributs N°2",
+          definition: 'Définition du catalogue d attributs N°2',
           isAbstract: 'false',
         },
       ],

package/src/libs/feature/dataviz/src/lib/chart-view/chart-view.component.html

@@ -40,6 +40,7 @@
     class="relative h-full mt-2 bg-white border border-gray-300 rounded-lg overflow-hidden"
   >
     <gn-ui-chart
+      *ngIf="!error"
       [data]="chartData$ | async"
       [type]="chartType$.value"
       [labelProperty]="labelProperty"

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

@@ -30,6 +30,7 @@ import {
 
 marker('wfs.unreachable.cors')
 marker('wfs.unreachable.http')
+marker('dataset.error.forbidden')
 marker('wfs.unreachable.unknown')
 marker('wfs.featuretype.notfound')
 marker('wfs.geojsongml.notsupported')

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

@@ -11,13 +11,15 @@
       class="absolute inset-0"
       [message]="'table.loading.data' | translate"
     ></gn-ui-loading-mask>
-    <gn-ui-popup-alert
-      *ngIf="error"
-      type="warning"
-      icon="matErrorOutlineOutline"
-      class="absolute m-2 inset-0"
-    >
-      <span translate>{{ error }}</span>
-    </gn-ui-popup-alert>
+    <ng-content *ngIf="error">
+      <div class="border border-gray-300 rounded-lg bg-white h-full"></div>
+      <gn-ui-popup-alert
+        type="warning"
+        icon="matErrorOutlineOutline"
+        class="absolute m-2 inset-0"
+      >
+        <span translate>{{ error }}</span>
+      </gn-ui-popup-alert>
+    </ng-content>
   </div>
 </div>

package/src/libs/feature/map/src/lib/utils/map-utils.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core'
 import { extend, Extent } from 'ol/extent'
 import GeoJSON from 'ol/format/GeoJSON'
-import { transformExtent } from 'ol/proj'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 const GEOJSON = new GeoJSON()
@@ -15,7 +14,7 @@ export class MapUtilsService {
       return null
     }
     // extend all the spatial extents into an including bbox
-    const totalExtent = record.spatialExtents.reduce(
+    return record.spatialExtents.reduce(
       (prev, curr) => {
         if ('bbox' in curr) return extend(prev, curr.bbox)
         else if ('geometry' in curr) {
@@ -26,6 +25,5 @@ export class MapUtilsService {
       },
       [Infinity, Infinity, -Infinity, -Infinity]
     )
-    return transformExtent(totalExtent, 'EPSG:4326', 'EPSG:3857')
   }
 }

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

@@ -31,6 +31,7 @@
         #mapContainer
         [context]="mapContext$ | async"
         (featuresClick)="onMapFeatureSelect($event)"
+        (sourceLoadError)="onSourceLoadError($event)"
       ></gn-ui-map-container>
       <div
         class="top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"

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>