geonetwork-ui 2.3.0-dev.287bf00c → 2.3.0-dev.2b3239d3

package/libs/ui/layout/src/lib/block-list/block-list.component.d.ts

@@ -0,0 +1,25 @@
+import { AfterViewInit, ChangeDetectorRef, ElementRef, QueryList } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class BlockListComponent implements AfterViewInit {
+    private changeDetector;
+    pageSize: number;
+    containerClass: string;
+    paginationContainerClass: string;
+    blocks: QueryList<ElementRef<HTMLElement>>;
+    blockContainer: ElementRef<HTMLElement>;
+    protected minHeight: number;
+    protected currentPage: number;
+    protected get pages(): number[];
+    get isFirstPage(): boolean;
+    get isLastPage(): boolean;
+    get pagesCount(): number;
+    constructor(changeDetector: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    protected refreshBlocksVisibility: () => void;
+    goToPage(index: number): void;
+    previousPage(): void;
+    nextPage(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BlockListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BlockListComponent, "gn-ui-block-list", never, { "pageSize": { "alias": "pageSize"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "paginationContainerClass": { "alias": "paginationContainerClass"; "required": false; }; }, {}, ["blocks"], ["*"], true, never>;
+}
+//# sourceMappingURL=block-list.component.d.ts.map

package/libs/ui/layout/src/lib/block-list/block-list.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-list.component.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/ui/layout/src/lib/block-list/block-list.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAEb,iBAAiB,EAGjB,UAAU,EAEV,SAAS,EAEV,MAAM,eAAe,CAAA;;AAGtB,qBAQa,kBAAmB,YAAW,aAAa;IA0B1C,OAAO,CAAC,cAAc;IAzBzB,QAAQ,SAAI;IACZ,cAAc,SAAK;IACnB,wBAAwB,SAA6B;IACd,MAAM,EAAE,SAAS,CAC/D,UAAU,CAAC,WAAW,CAAC,CACxB,CAAA;IAC4B,cAAc,EAAE,UAAU,CAAC,WAAW,CAAC,CAAA;IAEpE,SAAS,CAAC,SAAS,SAAI;IAEvB,SAAS,CAAC,WAAW,SAAI;IACzB,SAAS,KAAK,KAAK,aAElB;IAED,IAAI,WAAW,YAEd;IACD,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,WAEb;gBAEmB,cAAc,EAAE,iBAAiB;IAErD,eAAe;IASf,SAAS,CAAC,uBAAuB,aAQhC;IAEM,QAAQ,CAAC,KAAK,EAAE,MAAM;IAMtB,YAAY;IAKZ,QAAQ;yCA1DJ,kBAAkB;2CAAlB,kBAAkB;CA8D9B"}

package/libs/ui/layout/src/lib/carousel/carousel.component.d.ts

@@ -1,18 +1,25 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
 import { EmblaCarouselType } from 'embla-carousel';
 import * as i0 from "@angular/core";
 export declare class CarouselComponent implements AfterViewInit {
     private changeDetector;
+    carouselOverflowContainer: ElementRef;
     containerClass: string;
     stepsContainerClass: string;
-    carouselOverflowContainer: ElementRef;
-    steps: number[];
-    selectedStep: number;
-    emblaApi: EmblaCarouselType;
+    currentStepChange: EventEmitter<number>;
+    protected steps: number[];
+    protected emblaApi: EmblaCarouselType;
+    protected currentStep: number;
+    protected refreshSteps: () => void;
+    get isFirstStep(): boolean;
+    get isLastStep(): boolean;
+    get stepsCount(): number;
     constructor(changeDetector: ChangeDetectorRef);
     ngAfterViewInit(): void;
     scrollToStep(stepIndex: number): void;
+    slideToPrevious(): void;
+    slideToNext(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CarouselComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CarouselComponent, "gn-ui-carousel", never, { "containerClass": { "alias": "containerClass"; "required": false; }; "stepsContainerClass": { "alias": "stepsContainerClass"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CarouselComponent, "gn-ui-carousel", never, { "containerClass": { "alias": "containerClass"; "required": false; }; "stepsContainerClass": { "alias": "stepsContainerClass"; "required": false; }; }, { "currentStepChange": "currentStepChange"; }, never, ["*"], true, never>;
 }
 //# sourceMappingURL=carousel.component.d.ts.map

package/libs/ui/layout/src/lib/carousel/carousel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.component.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/ui/layout/src/lib/carousel/carousel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAEb,iBAAiB,EAEjB,UAAU,EAGX,MAAM,eAAe,CAAA;AACtB,OAAsB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;;AAEjE,qBAMa,iBAAkB,YAAW,aAAa;IASzC,OAAO,CAAC,cAAc;IARzB,cAAc,SAAK;IACnB,mBAAmB,SAAK;IAEjC,yBAAyB,EAAE,UAAU,CAAA;IACrC,KAAK,EAAE,MAAM,EAAE,CAAK;IACpB,YAAY,SAAK;IACjB,QAAQ,EAAE,iBAAiB,CAAA;gBAEP,cAAc,EAAE,iBAAiB;IAErD,eAAe;IAkBf,YAAY,CAAC,SAAS,EAAE,MAAM;yCA7BnB,iBAAiB;2CAAjB,iBAAiB;CAgC7B"}
+{"version":3,"file":"carousel.component.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/ui/layout/src/lib/carousel/carousel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAEb,iBAAiB,EAEjB,UAAU,EACV,YAAY,EAIb,MAAM,eAAe,CAAA;AACtB,OAAsB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;;AAGjE,qBAQa,iBAAkB,YAAW,aAAa;IA4BzC,OAAO,CAAC,cAAc;IA3BM,yBAAyB,EAAE,UAAU,CAAA;IAEpE,cAAc,SAAK;IACnB,mBAAmB,SAA6B;IAC/C,iBAAiB,uBAA6B;IAExD,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,CAAK;IAC9B,SAAS,CAAC,QAAQ,EAAE,iBAAiB,CAAA;IACrC,SAAS,CAAC,WAAW,SAAI;IAEzB,SAAS,CAAC,YAAY,aAKrB;IAED,IAAI,WAAW,YAEd;IACD,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,WAEb;gBAEmB,cAAc,EAAE,iBAAiB;IAErD,eAAe;IAcR,YAAY,CAAC,SAAS,EAAE,MAAM;IAI9B,eAAe;IAKf,WAAW;yCArDP,iBAAiB;2CAAjB,iBAAiB;CAyD7B"}

package/libs/ui/layout/src/lib/ui-layout.module.d.ts

@@ -3,13 +3,12 @@ import * as i1 from "./expandable-panel/expandable-panel.component";
 import * as i2 from "./sticky-header/sticky-header.component";
 import * as i3 from "./anchor-link/anchor-link.directive";
 import * as i4 from "./expandable-panel-button/expandable-panel-button.component";
-import * as i5 from "./carousel/carousel.component";
-import * as i6 from "@angular/common";
-import * as i7 from "@angular/material/icon";
-import * as i8 from "@ngx-translate/core";
+import * as i5 from "@angular/common";
+import * as i6 from "@angular/material/icon";
+import * as i7 from "@ngx-translate/core";
 export declare class UiLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UiLayoutModule, [typeof i1.ExpandablePanelComponent, typeof i2.StickyHeaderComponent, typeof i3.AnchorLinkDirective, typeof i4.ExpandablePanelButtonComponent, typeof i5.CarouselComponent], [typeof i6.CommonModule, typeof i7.MatIconModule, typeof i8.TranslateModule], [typeof i1.ExpandablePanelComponent, typeof i2.StickyHeaderComponent, typeof i3.AnchorLinkDirective, typeof i4.ExpandablePanelButtonComponent, typeof i5.CarouselComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UiLayoutModule, [typeof i1.ExpandablePanelComponent, typeof i2.StickyHeaderComponent, typeof i3.AnchorLinkDirective, typeof i4.ExpandablePanelButtonComponent], [typeof i5.CommonModule, typeof i6.MatIconModule, typeof i7.TranslateModule], [typeof i1.ExpandablePanelComponent, typeof i2.StickyHeaderComponent, typeof i3.AnchorLinkDirective, typeof i4.ExpandablePanelButtonComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<UiLayoutModule>;
 }
 //# sourceMappingURL=ui-layout.module.d.ts.map

package/libs/ui/layout/src/lib/ui-layout.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-layout.module.d.ts","sourceRoot":"","sources":["../../../../../src/libs/ui/layout/src/lib/ui-layout.module.ts"],"names":[],"mappings":";;;;;;;;;AAUA,qBAiBa,cAAc;yCAAd,cAAc;0CAAd,cAAc;0CAAd,cAAc;CAAG"}
+{"version":3,"file":"ui-layout.module.d.ts","sourceRoot":"","sources":["../../../../../src/libs/ui/layout/src/lib/ui-layout.module.ts"],"names":[],"mappings":";;;;;;;;AAUA,qBAea,cAAc;yCAAd,cAAc;0CAAd,cAAc;0CAAd,cAAc;CAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geonetwork-ui",
-  "version": "2.3.0-dev.287bf00c",
+  "version": "2.3.0-dev.2b3239d3",
   "engines": {
     "node": ">=14.17.0"
   },
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
-    "@camptocamp/ogc-client": "^1.1.0-RC.3",
+    "@camptocamp/ogc-client": "1.1.1-dev.ddbb5b0",
     "@geospatial-sdk/geocoding": "^0.0.5-alpha.2",
     "@ltd/j-toml": "~1.35.2",
     "@messageformat/core": "^3.0.1",

package/src/libs/api/metadata-converter/src/lib/iso19139/read-parts.ts

@@ -434,7 +434,7 @@ export function getUpdateFrequencyFromCustomPeriod(
   } else if (days <= 7) {
     return {
       per: 'week',
-      updatedTimes: Math.round(7 / days),
+      updatedTimes: Math.round(7 / days - 0.0001), // this is to make sure that 'every 2 days' = '3 times per week'
     }
   } else if (days) {
     return {

package/src/libs/api/metadata-converter/src/lib/iso19139/write-parts.ts

@@ -24,10 +24,8 @@ import {
   findChildOrCreate,
   findChildrenElement,
   findNestedChildOrCreate,
-  findNestedElement,
   findNestedElements,
   readAttribute,
-  readText,
   removeAllChildren,
   removeChildren,
   removeChildrenByName,
@@ -36,7 +34,6 @@ import {
 } from '../xml-utils'
 import {
   ChainableFunction,
-  combine,
   fallback,
   filterArray,
   getAtIndex,
@@ -220,7 +217,7 @@ export function getISODuration(updateFrequency: UpdateFrequencyCustom): string {
       else duration.hours = Math.round(24 / updateFrequency.updatedTimes)
       break
     case 'week':
-      duration.days = Math.round(7 / updateFrequency.updatedTimes)
+      duration.days = Math.round(7 / updateFrequency.updatedTimes - 0.0001) // this is to make sure that '2 times per week' = 'every 3 days'
       break
     case 'month':
       if (updateFrequency.updatedTimes <= 1) duration.months = 1

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

@@ -110,6 +110,14 @@ export const LINK_FIXTURES: Record<string, DatasetDistribution> = deepFreeze({
     url: new URL('https://my.ogc.server/wfs'),
     accessServiceProtocol: 'wfs',
   },
+  geodataWfsDownload: {
+    name: 'mylayer',
+    type: 'download',
+    url: new URL(
+      'https://my.ogc.server/wfs?GetFeature&FeatureType=surval_parametre_ligne&format=csv'
+    ),
+    accessServiceProtocol: 'wfs',
+  },
   geodataWms2: {
     name: 'myotherlayer',
     type: 'service',

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

@@ -32,6 +32,7 @@ marker('wfs.unreachable.http')
 marker('wfs.unreachable.unknown')
 marker('wfs.featuretype.notfound')
 marker('wfs.geojsongml.notsupported')
+marker('ogc.unreachable.unknown')
 marker('dataset.error.network')
 marker('dataset.error.http')
 marker('dataset.error.parse')
@@ -159,7 +160,6 @@ export class DataService {
     const collectionInfo = await this.getDownloadUrlsFromOgcApi(
       ogcApiLink.url.href
     )
-
     return Object.keys(collectionInfo.bulkDownloadLinks).map((downloadLink) => {
       return {
         ...ogcApiLink,
@@ -179,24 +179,7 @@ export class DataService {
         return endpoint.getCollectionInfo(collections[0])
       })
       .catch((error) => {
-        if (error instanceof Error) {
-          throw new Error(`wfs.unreachable.unknown`)
-        } else {
-          if (error.type === 'network') {
-            throw new Error(`wfs.unreachable.cors`)
-          }
-          if (error.type === 'http') {
-            throw new Error(`wfs.unreachable.http`)
-          }
-          if (error.type === 'parse') {
-            throw new Error(`wfs.unreachable.parse`)
-          }
-          if (error.type === 'unsupportedType') {
-            throw new Error(`wfs.unreachable.unsupportedType`)
-          } else {
-            throw new Error(`wfs.unreachable.unknown`)
-          }
-        }
+        throw new Error(`ogc.unreachable.unknown`)
       })
   }
 

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.html

@@ -0,0 +1,14 @@
+<gn-ui-check-toggle
+  [label]="'editor.record.form.updateFrequency.planned' | translate"
+  [value]="planned"
+  (toggled)="onPlannedToggled()"
+></gn-ui-check-toggle>
+<gn-ui-dropdown-selector
+  title="updateFrequency"
+  [showTitle]="false"
+  [choices]="choices"
+  [selected]="selectedFrequency"
+  (selectValue)="onSelectFrequencyValue($event)"
+  [disabled]="!planned"
+>
+</gn-ui-dropdown-selector>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.ts

@@ -0,0 +1,143 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core'
+import { FormControl } from '@angular/forms'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  CheckToggleComponent,
+  DropdownSelectorComponent,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-form-field-update-frequency',
+  templateUrl: './form-field-update-frequency.component.html',
+  styleUrls: ['./form-field-update-frequency.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CheckToggleComponent, DropdownSelectorComponent, TranslateModule],
+})
+export class FormFieldUpdateFrequencyComponent implements OnInit {
+  @Input() control: FormControl
+
+  get planned() {
+    return this.control.value !== 'notPlanned'
+  }
+
+  constructor(private translateService: TranslateService) {}
+
+  ngOnInit() {
+    const updatedTimes = this.control.value?.updatedTimes
+    const per = this.control.value?.per
+    if (updatedTimes && updatedTimes !== 1 && updatedTimes !== 2) {
+      this.choices = [
+        {
+          value: `${per}.${updatedTimes}`,
+          label: this.translateService.instant(
+            `domain.record.updateFrequency.${per}`,
+            {
+              count: updatedTimes,
+            }
+          ),
+        },
+        ...this.choices,
+      ]
+    }
+  }
+
+  onPlannedToggled() {
+    if (this.planned) {
+      this.control.setValue('notPlanned')
+    } else {
+      this.control.setValue({ updatedTimes: 1, per: 'day' })
+    }
+  }
+
+  get selectedFrequency() {
+    const { updatedTimes, per } = this.control.value
+    return `${per}.${updatedTimes}`
+  }
+
+  onSelectFrequencyValue(value: unknown) {
+    const split = (value as string).split('.')
+    this.control.setValue({ updatedTimes: Number(split[1]), per: split[0] })
+  }
+
+  choices = [
+    {
+      value: 'day.1',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.day',
+        {
+          count: 1,
+        }
+      ),
+    },
+    {
+      value: 'day.2',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.day',
+        {
+          count: 2,
+        }
+      ),
+    },
+    {
+      value: 'week.1',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.week',
+        {
+          count: 1,
+        }
+      ),
+    },
+    {
+      value: 'week.2',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.week',
+        {
+          count: 2,
+        }
+      ),
+    },
+    {
+      value: 'month.1',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.month',
+        {
+          count: 1,
+        }
+      ),
+    },
+    {
+      value: 'month.2',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.month',
+        {
+          count: 2,
+        }
+      ),
+    },
+    {
+      value: 'year.1',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.year',
+        {
+          count: 1,
+        }
+      ),
+    },
+    {
+      value: 'year.2',
+      label: this.translateService.instant(
+        'domain.record.updateFrequency.year',
+        {
+          count: 2,
+        }
+      ),
+    },
+  ]
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html

@@ -56,6 +56,11 @@
       [control]="formControl"
     ></gn-ui-form-field-resource-updated>
   </ng-container>
+  <ng-container *ngIf="isUpdateFrequency">
+    <gn-ui-form-field-update-frequency
+      [control]="formControl"
+    ></gn-ui-form-field-update-frequency>
+  </ng-container>
   <ng-container *ngIf="isSimpleField">
     <gn-ui-form-field-simple
       [type]="simpleType"

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

@@ -24,6 +24,7 @@ import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.
 import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
 import { FormFieldTemporalExtentComponent } from './form-field-temporal-extent/form-field-temporal-extent.component'
 import { FormFieldConfig } from './form-field.model'
+import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency/form-field-update-frequency.component'
 
 @Component({
   selector: 'gn-ui-form-field',
@@ -40,6 +41,7 @@ import { FormFieldConfig } from './form-field.model'
     FormFieldWrapperComponent,
     FormFieldLicenseComponent,
     FormFieldResourceUpdatedComponent,
+    FormFieldUpdateFrequencyComponent,
     FormFieldSimpleComponent,
     FormFieldRichComponent,
     FormFieldObjectComponent,
@@ -130,6 +132,9 @@ export class FormFieldComponent {
   get isResourceUpdated() {
     return this.model === 'resourceUpdated'
   }
+  get isUpdateFrequency() {
+    return this.model === 'updateFrequency'
+  }
 
   get withoutWrapper() {
     return this.model === 'title' || this.model === 'abstract'

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -47,4 +47,11 @@ export const DEFAULT_FIELDS: EditorFieldsConfig = [
       type: 'date',
     },
   },
+  {
+    model: 'updateFrequency',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.updateFrequency'),
+      type: 'text',
+    },
+  },
 ]

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.css

@@ -0,0 +1,7 @@
+.dropdown-content {
+  display: none;
+}
+
+.relative:hover .dropdown-content {
+  display: block;
+}

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

@@ -4,8 +4,7 @@
     (valueChange)="urlChange.next($event)"
     [hint]="'map.ogc.urlInput.hint' | translate"
     class="w-96"
-  >
-  </gn-ui-text-input>
+  ></gn-ui-text-input>
 </div>
 
 <div *ngIf="errorMessage" class="text-red-500 mt-2">
@@ -16,21 +15,36 @@
   <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 }}
-      </p>
-      <gn-ui-button
-        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
+<ng-container *ngFor="let layer of layers">
+  <div
+    *ngIf="shouldDisplayLayer(layer)"
+    class="flex items-center justify-between my-2 layer-item-tree"
+  >
+    <div class="flex flex-col items-start w-full">
+      <p
+        class="max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap"
+        [title]="layer.name"
       >
+        {{ layer.name }}
+      </p>
+      <div class="flex justify-between items-center w-full">
+        <gn-ui-dropdown-selector
+          [title]="'Add Layer As' | translate"
+          [choices]="getLayerChoices(layer)"
+          (selectValue)="onLayerTypeSelect(layer.name, $event)"
+          [selected]="selectedLayerTypes[layer.name]"
+          extraBtnClass="w-6 h-5 !text-sm !px-2 !py-1"
+        ></gn-ui-dropdown-selector>
+        <gn-ui-button
+          class="layer-add-btn"
+          type="primary"
+          (buttonClick)="addLayer(layer.name, selectedLayerTypes[layer.name])"
+          extraClass="text-sm !px-2 !py-1"
+          translate
+        >
+          <span translate>map.layer.add</span>
+        </gn-ui-button>
+      </div>
     </div>
-  </ng-container>
-</div>
+  </div>
+</ng-container>

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

@@ -14,7 +14,7 @@ import {
   MapContextLayerTypeEnum,
 } from '../map-context/map-context.model'
 import { TranslateModule } from '@ngx-translate/core'
-import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import { DropdownChoice, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
 import { MapLayer } from '../+state/map.models'
 
@@ -30,18 +30,16 @@ export class AddLayerFromOgcApiComponent implements OnInit {
   @Output() layerAdded = new EventEmitter<MapLayer>()
 
   urlChange = new Subject<string>()
-  layerUrl = ''
   loading = false
-  layers: string[] = []
-  ogcEndpoint: OgcApiEndpoint = null
+  layers: any[] = []
   errorMessage: string | null = null
+  selectedLayerTypes: { [key: string]: DropdownChoice['value'] } = {}
 
   constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
   ngOnInit() {
     this.urlChange.pipe(debounceTime(700)).subscribe(() => {
       this.loadLayers()
-      this.changeDetectorRef.detectChanges() // manually trigger change detection
     })
   }
 
@@ -49,14 +47,13 @@ export class AddLayerFromOgcApiComponent implements OnInit {
     this.errorMessage = null
     try {
       this.loading = true
-      if (this.ogcUrl.trim() === '') {
+      if (!this.ogcUrl.trim()) {
         this.layers = []
         return
       }
-      this.ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
-
-      // Currently only supports feature collections
-      this.layers = await this.ogcEndpoint.featureCollections
+      const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
+      this.layers = await ogcEndpoint.allCollections
+      this.setDefaultLayerTypes()
     } catch (error) {
       const err = error as Error
       this.layers = []
@@ -67,14 +64,72 @@ export class AddLayerFromOgcApiComponent implements OnInit {
     }
   }
 
-  async addLayer(layer: string) {
-    this.layerUrl = await this.ogcEndpoint.getCollectionItemsUrl(layer)
+  setDefaultLayerTypes() {
+    this.layers.forEach((layer) => {
+      const choices = this.getLayerChoices(layer)
+      if (choices.length > 0) {
+        this.selectedLayerTypes[layer.name] = choices[0].value
+      }
+    })
+  }
 
-    const layerToAdd: MapContextLayerModel = {
-      name: layer,
-      url: this.layerUrl,
-      type: MapContextLayerTypeEnum.OGCAPI,
+  getLayerChoices(layer: any) {
+    const choices = []
+    if (layer.hasRecords) {
+      choices.push({ label: 'Records', value: 'record' })
+    }
+    if (layer.hasFeatures) {
+      choices.push({ label: 'Features', value: 'features' })
+    }
+    if (layer.hasVectorTiles) {
+      choices.push({ label: 'Vector Tiles', value: 'vectorTiles' })
+    }
+    if (layer.hasMapTiles) {
+      choices.push({ label: 'Map Tiles', value: 'mapTiles' })
+    }
+    return choices
+  }
+
+  shouldDisplayLayer(layer: any) {
+    return (
+      layer.hasRecords ||
+      layer.hasFeatures ||
+      layer.hasVectorTiles ||
+      layer.hasMapTiles
+    )
+  }
+
+  onLayerTypeSelect(layerName: string, selectedType: any) {
+    this.selectedLayerTypes[layerName] = selectedType
+      ? selectedType
+      : this.getLayerChoices(layerName)[0]?.value
+  }
+
+  async addLayer(layer: string, layerType: any) {
+    try {
+      const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
+      let layerUrl: string
+
+      if (layerType === 'vectorTiles') {
+        layerUrl = await ogcEndpoint.getVectorTilesetUrl(layer)
+      } else if (layerType === 'mapTiles') {
+        layerUrl = await ogcEndpoint.getMapTilesetUrl(layer)
+      } else {
+        layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer, {
+          outputFormat: 'json',
+        })
+      }
+
+      const layerToAdd: MapContextLayerModel = {
+        name: layer,
+        url: layerUrl,
+        type: MapContextLayerTypeEnum.OGCAPI,
+        layerType: layerType,
+      }
+      this.layerAdded.emit({ ...layerToAdd, title: layer })
+    } catch (error) {
+      const err = error as Error
+      console.error('Error adding layer:', err.message)
     }
-    this.layerAdded.emit({ ...layerToAdd, title: layer })
   }
 }

package/src/libs/feature/map/src/lib/map-context/map-context.model.ts

@@ -38,6 +38,7 @@ export interface MapContextLayerOgcapiModel {
   type: 'ogcapi'
   url: string
   name: string
+  layerType: 'feature' | 'vectorTiles' | 'mapTiles' | 'record'
 }
 
 interface LayerXyzModel {