feat(datahub): Added an option in config to specify if WMS shoul be t…

…iled or not. False by default.

conf/default.toml

@@ -122,6 +122,9 @@ background_color = "#fdfbff"
 # Optional; Will limit the possibility to zoom in past a certain zoom level
 # max_zoom = 10
 
+# Optional; Will not tile WMS. False by default.
+# do_not_tile_wms = false
+
 # Optional; will limit the possibility to pan or zoom out outside of an extent
 # Expressed in the map view projection (EPSG:3857)
 # max_extent = [-418263.418776, 5251529.591305, 961272.067714, 6706890.609855]

docs/guide/configure.md

@@ -206,6 +206,10 @@ The map section lets you customize how maps appear and behave across GeoNetwork-
 
   Will limit the possibility to zoom in past a certain zoom level.
 
+- `do_not_tile_wms` (optional)
+
+  Will not use tiling when requesting WMS services. Defaults to `false` (WMS are tiled). Not using tiles for WMS might incur performance loss since the client will not benefit from an eventual tile cache anymore. On the other hand, visual quality might improve in case a map tile server does not handle neighbouring tiles correctly, e.g. symbols or text being cropped at tile boundaries.
+
 - `max_extent` (optional)
 
   Will limit the possibility to pan or zoom outside of an extent. Expressed as an array of _minX_, _minY_, _maxX_ and _maxY_ numerical components in the map view projection (EPSG:3857 by default), e.g.:

libs/feature/map/src/lib/map-context/map-context.service.spec.ts

@@ -1,6 +1,6 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { TestBed } from '@angular/core/testing'
-import { MAP_CONFIG_FIXTURE } from '@geonetwork-ui/util/app-config'
+import { MAP_CONFIG_FIXTURE, MapConfig } from '@geonetwork-ui/util/app-config'
 import { FeatureCollection } from 'geojson'
 import { Geometry } from 'ol/geom'
 import TileLayer from 'ol/layer/Tile'
@@ -33,6 +33,8 @@ import {
   MapContextService,
 } from './map-context.service'
 import Feature from 'ol/Feature'
+import ImageWMS from 'ol/source/ImageWMS'
+import ImageLayer from 'ol/layer/Image'
 
 const mapStyleServiceMock = {
   createDefaultStyle: jest.fn(() => new Style()),
@@ -130,35 +132,60 @@ describe('MapContextService', () => {
     })
 
     describe('WMS', () => {
-      beforeEach(() => {
-        ;(layerModel = MAP_CTX_LAYER_WMS_FIXTURE),
-          (layer = service.createLayer(layerModel))
-      })
-      it('create a tile layer', () => {
-        expect(layer).toBeTruthy()
-        expect(layer).toBeInstanceOf(TileLayer)
-      })
-      it('create a TileWMS source', () => {
-        const source = layer.getSource()
-        expect(source).toBeInstanceOf(TileWMS)
-      })
-      it('set correct WMS params', () => {
-        const source = layer.getSource()
-        const params = source.getParams()
-        expect(params.LAYERS).toBe(layerModel.name)
-      })
-      it('set correct url without existing REQUEST and SERVICE params', () => {
-        const source = layer.getSource()
-        const urls = source.getUrls()
-        expect(urls.length).toBe(1)
-        expect(urls[0]).toBe(
-          'https://www.geograndest.fr/geoserver/region-grand-est/ows?REQUEST=GetCapabilities&SERVICE=WMS'
-        )
+      describe('when mapConfig.DO_NOT_TILE_WMS === false', () => {
+        beforeEach(() => {
+          const mapConfig: MapConfig = {
+            ...MAP_CONFIG_FIXTURE,
+            DO_NOT_TILE_WMS: false,
+          }
+          ;(layerModel = MAP_CTX_LAYER_WMS_FIXTURE),
+            (layer = service.createLayer(layerModel, mapConfig))
+        })
+        it('create a tile layer', () => {
+          expect(layer).toBeTruthy()
+          expect(layer).toBeInstanceOf(TileLayer)
+        })
+        it('create a TileWMS source', () => {
+          const source = layer.getSource()
+          expect(source).toBeInstanceOf(TileWMS)
+        })
+        it('set correct WMS params', () => {
+          const source = layer.getSource()
+          const params = source.getParams()
+          expect(params.LAYERS).toBe(layerModel.name)
+        })
+        it('set correct url without existing REQUEST and SERVICE params', () => {
+          const source = layer.getSource()
+          const urls = source.getUrls()
+          expect(urls.length).toBe(1)
+          expect(urls[0]).toBe(
+            'https://www.geograndest.fr/geoserver/region-grand-est/ows?REQUEST=GetCapabilities&SERVICE=WMS'
+          )
+        })
       })
-      it('set WMS gutter of 20px', () => {
-        const source = layer.getSource()
-        const gutter = source.gutter_
-        expect(gutter).toBe(20)
+
+      describe('when mapConfig.DO_NOT_TILE_WMS === true', () => {
+        beforeEach(() => {
+          const mapConfig: MapConfig = {
+            ...MAP_CONFIG_FIXTURE,
+            DO_NOT_TILE_WMS: true,
+          }
+          ;(layerModel = MAP_CTX_LAYER_WMS_FIXTURE),
+            (layer = service.createLayer(layerModel, mapConfig))
+        })
+        it('create an image layer', () => {
+          expect(layer).toBeTruthy()
+          expect(layer).toBeInstanceOf(ImageLayer)
+        })
+        it('create an ImageWMS source', () => {
+          const source = layer.getSource()
+          expect(source).toBeInstanceOf(ImageWMS)
+        })
+        it('set correct WMS params', () => {
+          const source = layer.getSource()
+          const params = source.getParams()
+          expect(params.LAYERS).toBe(layerModel.name)
+        })
       })
     })
 

libs/feature/map/src/lib/map-context/map-context.service.ts

@@ -29,6 +29,8 @@ 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'
+import ImageLayer from 'ol/layer/Image'
+import ImageWMS from 'ol/source/ImageWMS'
 
 export const DEFAULT_BASELAYER_CONTEXT: MapContextLayerXyzModel = {
   type: MapContextLayerTypeEnum.XYZ,
@@ -73,11 +75,13 @@ export class MapContextService {
     }
     map.setView(this.createView(mapContext.view, map))
     map.getLayers().clear()
-    mapContext.layers.forEach((layer) => map.addLayer(this.createLayer(layer)))
+    mapContext.layers.forEach((layer) =>
+      map.addLayer(this.createLayer(layer, mapConfig))
+    )
     return map
   }
 
-  createLayer(layerModel: MapContextLayerModel): Layer {
+  createLayer(layerModel: MapContextLayerModel, mapConfig?: MapConfig): Layer {
     const { type } = layerModel
     const style = this.styleService.styles.default
     switch (type) {
@@ -112,13 +116,22 @@ export class MapContextService {
           }),
         })
       case MapContextLayerTypeEnum.WMS:
-        return new TileLayer({
-          source: new TileWMS({
-            url: layerModel.url,
-            params: { LAYERS: layerModel.name },
-            gutter: 20,
-          }),
-        })
+        if (mapConfig?.DO_NOT_TILE_WMS) {
+          return new ImageLayer({
+            source: new ImageWMS({
+              url: layerModel.url,
+              params: { LAYERS: layerModel.name },
+            }),
+          })
+        } else {
+          return new TileLayer({
+            source: new TileWMS({
+              url: layerModel.url,
+              params: { LAYERS: layerModel.name, TILED: true },
+            }),
+          })
+        }
+
       case MapContextLayerTypeEnum.WMTS: {
         // TODO: isolate this in utils service
         const olLayer = new TileLayer({})

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

@@ -15,18 +15,16 @@ import {
   MapUtilsService,
 } from '@geonetwork-ui/feature/map'
 import { getOptionalMapConfig, MapConfig } from '@geonetwork-ui/util/app-config'
-import { getLinkLabel, ProxyService } from '@geonetwork-ui/util/shared'
+import { getLinkLabel } from '@geonetwork-ui/util/shared'
 import Feature from 'ol/Feature'
 import { Geometry } from 'ol/geom'
 import { StyleLike } from 'ol/style/Style'
 import {
   BehaviorSubject,
   combineLatest,
   from,
-  lastValueFrom,
   Observable,
   of,
-  startWith,
   Subscription,
   throwError,
   withLatestFrom,
@@ -117,7 +115,9 @@ export class MapViewComponent implements OnInit, OnDestroy {
               },
             } as MapContextModel)
         ),
-        tap(() => this.resetSelection())
+        tap((res) => {
+          this.resetSelection()
+        })
       )
     ),
     withLatestFrom(this.mdViewFacade.metadata$),

libs/util/app-config/src/lib/app-config.ts

@@ -144,6 +144,7 @@ export function loadAppConfig() {
         [],
         [
           'max_zoom',
+          'do_not_tile_wms',
           'max_extent',
           'baselayer',
           'do_not_use_default_basemap',
@@ -158,6 +159,7 @@ export function loadAppConfig() {
           ? null
           : ({
               MAX_ZOOM: parsedMapSection.max_zoom,
+              DO_NOT_TILE_WMS: parsedMapSection.do_not_tile_wms,
               MAX_EXTENT: parsedMapSection.max_extent,
               EXTERNAL_VIEWER_URL_TEMPLATE:
                 parsedMapSection.external_viewer_url_template,

libs/util/app-config/src/lib/fixtures.ts

@@ -81,6 +81,7 @@ export const MAP_CONFIG_FIXTURE: MapConfig = {
   MAX_ZOOM: 10,
   MAX_EXTENT: [-418263.418776, 5251529.591305, 961272.067714, 6706890.609855],
   DO_NOT_USE_DEFAULT_BASEMAP: false,
+  DO_NOT_TILE_WMS: false,
   EXTERNAL_VIEWER_URL_TEMPLATE:
     'https://example.com/myviewer/#/?actions=[{"type":"CATALOG:ADD_LAYERS_FROM_CATALOGS","layers":["${layer_name}"],"sources":[{"url":"${service_url}","type":"${service_type}"}]}]',
   EXTERNAL_VIEWER_OPEN_NEW_TAB: true,

libs/util/app-config/src/lib/model.ts

@@ -20,6 +20,7 @@ export interface LayerConfig {
 
 export interface MapConfig {
   MAX_ZOOM?: number
+  DO_NOT_TILE_WMS: boolean
   MAX_EXTENT?: [number, number, number, number] // Expressed as [minx, miny, maxx, maxy]
   EXTERNAL_VIEWER_URL_TEMPLATE?: string
   EXTERNAL_VIEWER_OPEN_NEW_TAB?: boolean