From c5cfc95a74c3aa73ea452e88e3fe73c80f822a91 Mon Sep 17 00:00:00 2001 From: ronitjadhav Date: Mon, 6 May 2024 09:41:21 +0200 Subject: [PATCH 1/3] Added support for OGC API Tiles --- .../add-layer-from-ogc-api.component.css | 7 + .../add-layer-from-ogc-api.component.html | 44 +++--- .../add-layer-from-ogc-api.component.ts | 128 +++++++++++------- 3 files changed, 110 insertions(+), 69 deletions(-) diff --git a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.css b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.css index e69de29bb2..ac88d0d289 100644 --- a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.css +++ b/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; +} diff --git a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html index 47d5fed454..79deb7dfc3 100644 --- a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html +++ b/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" - > - + >
@@ -16,21 +15,30 @@

map.loading.service

-
-

map.layers.available

- -
-

- {{ layer }} + +

+
+

+ {{ layer.name }}

- map.layer.add +
+ + + map.layer.add + +
- -
+
+ diff --git a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts index 6010111cd3..681ff2d19a 100644 --- a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts +++ b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts @@ -1,22 +1,11 @@ -import { - Component, - OnInit, - Output, - EventEmitter, - ChangeDetectionStrategy, - Input, - ChangeDetectorRef, -} from '@angular/core' -import { OgcApiEndpoint } from '@camptocamp/ogc-client' -import { Subject, debounceTime } from 'rxjs' -import { - MapContextLayerModel, - MapContextLayerTypeEnum, -} from '../map-context/map-context.model' -import { TranslateModule } from '@ngx-translate/core' -import { UiInputsModule } from '@geonetwork-ui/ui/inputs' -import { CommonModule } from '@angular/common' -import { MapLayer } from '../+state/map.models' +import { Component, OnInit, Output, EventEmitter, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core'; +import { OgcApiEndpoint } from '@camptocamp/ogc-client'; +import { Subject, debounceTime } from 'rxjs'; +import { MapContextLayerModel, MapContextLayerTypeEnum } from '../map-context/map-context.model'; +import { TranslateModule } from '@ngx-translate/core'; +import { DropdownChoice, UiInputsModule } from '@geonetwork-ui/ui/inputs'; +import { CommonModule } from '@angular/common'; +import { MapLayer } from '../+state/map.models'; @Component({ selector: 'gn-ui-add-layer-from-ogc-api', @@ -26,55 +15,92 @@ import { MapLayer } from '../+state/map.models' imports: [CommonModule, TranslateModule, UiInputsModule], }) export class AddLayerFromOgcApiComponent implements OnInit { - @Input() ogcUrl: string - @Output() layerAdded = new EventEmitter() + @Input() ogcUrl: string; + @Output() layerAdded = new EventEmitter(); - urlChange = new Subject() - layerUrl = '' - loading = false - layers: string[] = [] - ogcEndpoint: OgcApiEndpoint = null - errorMessage: string | null = null + urlChange = new Subject(); + loading = false; + 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 - }) + this.loadLayers(); + }); } async loadLayers() { - this.errorMessage = null + this.errorMessage = null; try { - this.loading = true - if (this.ogcUrl.trim() === '') { - this.layers = [] - return + this.loading = true; + 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 = [] - this.errorMessage = 'Error loading layers: ' + err.message + const err = error as Error; + this.layers = []; + this.errorMessage = 'Error loading layers: ' + err.message; } finally { - this.loading = false - this.changeDetectorRef.markForCheck() + this.loading = false; + this.changeDetectorRef.markForCheck(); } } - 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 { + console.log(layerType) + const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl); + const layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer); + const layerToAdd: MapContextLayerModel = { + name: layer, + url: layerUrl, + type: MapContextLayerTypeEnum.OGCAPI, + }; + 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 }) } } From 479a656b845cf54c64fdeff51e1a12a3e421eaf7 Mon Sep 17 00:00:00 2001 From: ronitjadhav Date: Mon, 6 May 2024 13:18:24 +0200 Subject: [PATCH 2/3] Updated the map-context to accept OGCAPI layer type --- .../add-layer-from-ogc-api.component.html | 10 +- .../add-layer-from-ogc-api.component.ts | 123 +++++++++++------- .../src/lib/map-context/map-context.model.ts | 1 + .../lib/map-context/map-context.service.ts | 34 +++-- package-lock.json | 8 +- package.json | 2 +- 6 files changed, 117 insertions(+), 61 deletions(-) diff --git a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html index 79deb7dfc3..416bb8288e 100644 --- a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html +++ b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html @@ -16,9 +16,15 @@
-
+
-

+

{{ layer.name }}

diff --git a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts index 681ff2d19a..bcf46431d6 100644 --- a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts +++ b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts @@ -1,11 +1,22 @@ -import { Component, OnInit, Output, EventEmitter, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core'; -import { OgcApiEndpoint } from '@camptocamp/ogc-client'; -import { Subject, debounceTime } from 'rxjs'; -import { MapContextLayerModel, MapContextLayerTypeEnum } from '../map-context/map-context.model'; -import { TranslateModule } from '@ngx-translate/core'; -import { DropdownChoice, UiInputsModule } from '@geonetwork-ui/ui/inputs'; -import { CommonModule } from '@angular/common'; -import { MapLayer } from '../+state/map.models'; +import { + Component, + OnInit, + Output, + EventEmitter, + ChangeDetectionStrategy, + Input, + ChangeDetectorRef, +} from '@angular/core' +import { OgcApiEndpoint } from '@camptocamp/ogc-client' +import { Subject, debounceTime } from 'rxjs' +import { + MapContextLayerModel, + MapContextLayerTypeEnum, +} from '../map-context/map-context.model' +import { TranslateModule } from '@ngx-translate/core' +import { DropdownChoice, UiInputsModule } from '@geonetwork-ui/ui/inputs' +import { CommonModule } from '@angular/common' +import { MapLayer } from '../+state/map.models' @Component({ selector: 'gn-ui-add-layer-from-ogc-api', @@ -15,92 +26,112 @@ import { MapLayer } from '../+state/map.models'; imports: [CommonModule, TranslateModule, UiInputsModule], }) export class AddLayerFromOgcApiComponent implements OnInit { - @Input() ogcUrl: string; - @Output() layerAdded = new EventEmitter(); + @Input() ogcUrl: string + @Output() layerAdded = new EventEmitter() - urlChange = new Subject(); - loading = false; - layers: any[] = []; - errorMessage: string | null = null; - selectedLayerTypes: { [key: string]: DropdownChoice['value'] } = {}; + urlChange = new Subject() + loading = false + 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.loadLayers() + }) } async loadLayers() { - this.errorMessage = null; + this.errorMessage = null try { - this.loading = true; + this.loading = true if (!this.ogcUrl.trim()) { - this.layers = []; - return; + this.layers = [] + return } - const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl); - this.layers = await ogcEndpoint.allCollections; - this.setDefaultLayerTypes(); + const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl) + this.layers = await ogcEndpoint.allCollections + this.setDefaultLayerTypes() } catch (error) { - const err = error as Error; - this.layers = []; - this.errorMessage = 'Error loading layers: ' + err.message; + const err = error as Error + this.layers = [] + this.errorMessage = 'Error loading layers: ' + err.message } finally { - this.loading = false; - this.changeDetectorRef.markForCheck(); + this.loading = false + this.changeDetectorRef.markForCheck() } } setDefaultLayerTypes() { this.layers.forEach((layer) => { - const choices = this.getLayerChoices(layer); + const choices = this.getLayerChoices(layer) if (choices.length > 0) { - this.selectedLayerTypes[layer.name] = choices[0].value; + this.selectedLayerTypes[layer.name] = choices[0].value } - }); + }) } getLayerChoices(layer: any) { - const choices = []; + const choices = [] if (layer.hasRecords) { - choices.push({ label: 'Records', value: 'record' }); + choices.push({ label: 'Records', value: 'record' }) } if (layer.hasFeatures) { - choices.push({ label: 'Features', value: 'features' }); + choices.push({ label: 'Features', value: 'features' }) } if (layer.hasVectorTiles) { - choices.push({ label: 'Vector Tiles', value: 'vectorTiles' }); + choices.push({ label: 'Vector Tiles', value: 'vectorTiles' }) } if (layer.hasMapTiles) { - choices.push({ label: 'Map Tiles', value: 'mapTiles' }); + choices.push({ label: 'Map Tiles', value: 'mapTiles' }) } - return choices; + return choices } shouldDisplayLayer(layer: any) { - return layer.hasRecords || layer.hasFeatures || layer.hasVectorTiles || layer.hasMapTiles; + return ( + layer.hasRecords || + layer.hasFeatures || + layer.hasVectorTiles || + layer.hasMapTiles + ) } onLayerTypeSelect(layerName: string, selectedType: any) { - this.selectedLayerTypes[layerName] = selectedType ? selectedType : this.getLayerChoices(layerName)[0]?.value; + this.selectedLayerTypes[layerName] = selectedType + ? selectedType + : this.getLayerChoices(layerName)[0]?.value } async addLayer(layer: string, layerType: any) { try { console.log(layerType) - const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl); - const layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer); + const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl) + let layerUrl + + 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 layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer, {outputFormat: 'json'}) const layerToAdd: MapContextLayerModel = { name: layer, url: layerUrl, type: MapContextLayerTypeEnum.OGCAPI, - }; - this.layerAdded.emit({ ...layerToAdd, title: layer }); + layerType: layerType, + } + this.layerAdded.emit({ ...layerToAdd, title: layer }) } catch (error) { - const err = error as Error; - console.error('Error adding layer:', err.message); + const err = error as Error + console.error('Error adding layer:', err.message) } } } diff --git a/libs/feature/map/src/lib/map-context/map-context.model.ts b/libs/feature/map/src/lib/map-context/map-context.model.ts index 12f07631ee..63d7ed833d 100644 --- a/libs/feature/map/src/lib/map-context/map-context.model.ts +++ b/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 { diff --git a/libs/feature/map/src/lib/map-context/map-context.service.ts b/libs/feature/map/src/lib/map-context/map-context.service.ts index 5e723badbe..8b63e20b48 100644 --- a/libs/feature/map/src/lib/map-context/map-context.service.ts +++ b/libs/feature/map/src/lib/map-context/map-context.service.ts @@ -25,6 +25,10 @@ import WMTS from 'ol/source/WMTS' import { Geometry } from 'ol/geom' import Feature from 'ol/Feature' import { WfsEndpoint, WmtsEndpoint } from '@camptocamp/ogc-client' +import OGCVectorTile from 'ol/source/OGCVectorTile.js' +import { MVT } from 'ol/format' +import VectorTileLayer from 'ol/layer/VectorTile' +import OGCMapTile from 'ol/source/OGCMapTile.js' export const DEFAULT_BASELAYER_CONTEXT: MapContextLayerXyzModel = { type: MapContextLayerTypeEnum.XYZ, @@ -78,14 +82,28 @@ export class MapContextService { const style = this.styleService.styles.default switch (type) { case MapContextLayerTypeEnum.OGCAPI: - return new VectorLayer({ - source: new VectorSource({ - format: new GeoJSON(), - url: layerModel.url, - }), - style, - }) - + if (layerModel.layerType === 'vectorTiles') { + return new VectorTileLayer({ + source: new OGCVectorTile({ + url: layerModel.url, + format: new MVT(), + }), + }) + } else if (layerModel.layerType === 'mapTiles') { + return new TileLayer({ + source: new OGCMapTile({ + url: layerModel.url, + }), + }) + } else { + return new VectorLayer({ + source: new VectorSource({ + format: new GeoJSON(), + url: layerModel.url, + }), + style, + }) + } case MapContextLayerTypeEnum.XYZ: return new TileLayer({ source: new XYZ({ diff --git a/package-lock.json b/package-lock.json index 27b0b00c67..39816ce869 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@angular/router": "16.1.7", "@bartholomej/ngx-translate-extract": "^8.0.2", "@biesbjerg/ngx-translate-extract-marker": "^1.0.0", - "@camptocamp/ogc-client": "^1.1.0-RC.3", + "@camptocamp/ogc-client": "^1.1.1-dev.a0aadb6", "@geospatial-sdk/geocoding": "^0.0.5-alpha.2", "@ltd/j-toml": "~1.35.2", "@messageformat/core": "^3.0.1", @@ -3652,9 +3652,9 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, "node_modules/@camptocamp/ogc-client": { - "version": "1.1.0-RC.3", - "resolved": "https://registry.npmjs.org/@camptocamp/ogc-client/-/ogc-client-1.1.0-RC.3.tgz", - "integrity": "sha512-XZJwp0vxTQGtJD3t4GdTHJDLTidlPmv0sBvXskEt0A0cmrdaGUgBqr8KPeDfhjZfq99WFcXv/Gb3+hQXA0+LmQ==", + "version": "1.1.1-dev.a0aadb6", + "resolved": "https://registry.npmjs.org/@camptocamp/ogc-client/-/ogc-client-1.1.1-dev.a0aadb6.tgz", + "integrity": "sha512-wQsCe7GHYoUEr71vO8ov74GoNrHbCS+cfvimJ055OTHcEOIjrFC3Hs88P0WmgXmdUuGoFZLpJ6EF1eeYisGL+Q==", "dependencies": { "@rgrove/parse-xml": "^4.1.0" }, diff --git a/package.json b/package.json index dabc795ef1..e01ac3607e 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "@angular/router": "16.1.7", "@bartholomej/ngx-translate-extract": "^8.0.2", "@biesbjerg/ngx-translate-extract-marker": "^1.0.0", - "@camptocamp/ogc-client": "^1.1.0-RC.3", + "@camptocamp/ogc-client": "^1.1.1-dev.a0aadb6", "@geospatial-sdk/geocoding": "^0.0.5-alpha.2", "@ltd/j-toml": "~1.35.2", "@messageformat/core": "^3.0.1", From 5382b5e57d44886f1c73ed2eb025767debee0581 Mon Sep 17 00:00:00 2001 From: ronitjadhav Date: Mon, 6 May 2024 17:01:06 +0200 Subject: [PATCH 3/3] Updated Unit test --- .../add-layer-from-ogc-api.component.spec.ts | 97 ++++++++++++++++++- .../add-layer-from-ogc-api.component.ts | 4 +- 2 files changed, 94 insertions(+), 7 deletions(-) diff --git a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.spec.ts b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.spec.ts index ab58f79785..8979e6e2b7 100644 --- a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.spec.ts +++ b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.spec.ts @@ -1,6 +1,5 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { AddLayerFromOgcApiComponent } from './add-layer-from-ogc-api.component' -import { MapFacade } from '../+state/map.facade' import { TranslateModule } from '@ngx-translate/core' import { NO_ERRORS_SCHEMA } from '@angular/core' import { MapContextLayerTypeEnum } from '../map-context/map-context.model' @@ -9,6 +8,9 @@ jest.mock('@camptocamp/ogc-client', () => ({ OgcApiEndpoint: class { constructor(private url) {} isReady() { + if (this.url === 'http://example.com/ogc') { + return Promise.resolve(this) + } if (this.url.indexOf('error') > -1) { return Promise.reject(new Error('Something went wrong')) } @@ -19,17 +21,57 @@ jest.mock('@camptocamp/ogc-client', () => ({ } return Promise.resolve(this) } - get featureCollections() { + get allCollections() { + if (this.url === 'http://example.com/ogc') { + return Promise.resolve([ + { + name: 'NaturalEarth:physical:ne_10m_lakes_pluvial', + hasVectorTiles: true, + hasMapTiles: true, + }, + { + name: 'NaturalEarth:physical:ne_10m_land_ocean_seams', + hasVectorTiles: true, + hasMapTiles: true, + }, + ]) + } if (this.url.includes('error')) { return Promise.reject(new Error('Simulated loading error')) } - return Promise.resolve(['layer1', 'layer2', 'layer3']) + return Promise.resolve([ + { + name: 'NaturalEarth:physical:ne_10m_lakes_pluvial', + hasVectorTiles: true, + hasMapTiles: true, + }, + { + name: 'NaturalEarth:physical:ne_10m_land_ocean_seams', + hasVectorTiles: true, + hasMapTiles: true, + }, + ]) } getCollectionItemsUrl(collectionId) { + if (this.url === 'http://example.com/ogc') { + return Promise.resolve( + `http://example.com/collections/${collectionId}/items` + ) + } return Promise.resolve( `http://example.com/collections/${collectionId}/items` ) } + getVectorTilesetUrl(collectionId) { + return Promise.resolve( + `http://example.com/collections/${collectionId}/tiles/vector` + ) + } + getMapTilesetUrl(collectionId) { + return Promise.resolve( + `http://example.com/collections/${collectionId}/tiles/map` + ) + } }, })) @@ -68,7 +110,18 @@ describe('AddLayerFromOgcApiComponent', () => { await component.loadLayers() expect(component.errorMessage).toBeFalsy() expect(component.loading).toBe(false) - expect(component.layers).toEqual(['layer1', 'layer2', 'layer3']) + expect(component.layers).toEqual([ + { + name: 'NaturalEarth:physical:ne_10m_lakes_pluvial', + hasVectorTiles: true, + hasMapTiles: true, + }, + { + name: 'NaturalEarth:physical:ne_10m_land_ocean_seams', + hasVectorTiles: true, + hasMapTiles: true, + }, + ]) }) it('should handle errors while loading layers', async () => { @@ -79,4 +132,40 @@ describe('AddLayerFromOgcApiComponent', () => { expect(component.layers.length).toBe(0) }) }) + + describe('Add Collection', () => { + it('should add feature type collection to map', async () => { + const layerAddedSpy = jest.spyOn(component.layerAdded, 'emit') + await component.addLayer('layer1', 'features') + expect(layerAddedSpy).toHaveBeenCalledWith({ + name: 'layer1', + url: 'http://example.com/collections/layer1/items', + type: MapContextLayerTypeEnum.OGCAPI, + layerType: 'features', + title: 'layer1', + }) + }) + it('should add vector tile collection to map', async () => { + const layerAddedSpy = jest.spyOn(component.layerAdded, 'emit') + await component.addLayer('layer1', 'vectorTiles') + expect(layerAddedSpy).toHaveBeenCalledWith({ + name: 'layer1', + url: 'http://example.com/collections/layer1/tiles/vector', + type: MapContextLayerTypeEnum.OGCAPI, + layerType: 'vectorTiles', + title: 'layer1', + }) + }) + it('should add map tile collection to map', async () => { + const layerAddedSpy = jest.spyOn(component.layerAdded, 'emit') + await component.addLayer('layer1', 'mapTiles') + expect(layerAddedSpy).toHaveBeenCalledWith({ + name: 'layer1', + url: 'http://example.com/collections/layer1/tiles/map', + type: MapContextLayerTypeEnum.OGCAPI, + layerType: 'mapTiles', + title: 'layer1', + }) + }) + }) }) diff --git a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts index bcf46431d6..2ea471ce28 100644 --- a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts +++ b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts @@ -107,9 +107,8 @@ export class AddLayerFromOgcApiComponent implements OnInit { async addLayer(layer: string, layerType: any) { try { - console.log(layerType) const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl) - let layerUrl + let layerUrl: string if (layerType === 'vectorTiles') { layerUrl = await ogcEndpoint.getVectorTilesetUrl(layer) @@ -121,7 +120,6 @@ export class AddLayerFromOgcApiComponent implements OnInit { }) } - // const layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer, {outputFormat: 'json'}) const layerToAdd: MapContextLayerModel = { name: layer, url: layerUrl,