geonetwork-ui 2.1.0-initial

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

@@ -0,0 +1,51 @@
+import { FEATURE_COLLECTION_POLYGON_FIXTURE_4326 } from '../../../../../../libs/common/fixtures/src'
+import { Extent } from 'ol/extent'
+import {
+  MapContextLayerGeojsonModel,
+  MapContextLayerModel,
+  MapContextLayerTypeEnum,
+  MapContextModel,
+  MapContextViewModel,
+} from '../map-context/map-context.model'
+
+export const MAP_CTX_LAYER_XYZ_FIXTURE: MapContextLayerModel = {
+  type: MapContextLayerTypeEnum.XYZ,
+  url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+}
+export const MAP_CTX_LAYER_WMS_FIXTURE: MapContextLayerModel = {
+  type: MapContextLayerTypeEnum.WMS,
+  url: 'https://www.geograndest.fr/geoserver/region-grand-est/ows?REQUEST=GetCapabilities&SERVICE=WMS',
+  name: 'commune_actuelle_3857',
+}
+export const MAP_CTX_LAYER_WFS_FIXTURE: MapContextLayerModel = {
+  type: MapContextLayerTypeEnum.WFS,
+  url: 'https://www.geograndest.fr/geoserver/region-grand-est/ows?REQUEST=GetCapabilities&SERVICE=WFS&VERSION=1.1.0',
+  name: 'ms:commune_actuelle_3857',
+}
+export const MAP_CTX_LAYER_GEOJSON_FIXTURE: MapContextLayerGeojsonModel = {
+  type: MapContextLayerTypeEnum.GEOJSON,
+  data: FEATURE_COLLECTION_POLYGON_FIXTURE_4326,
+}
+export const MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE: MapContextLayerGeojsonModel =
+  {
+    type: MapContextLayerTypeEnum.GEOJSON,
+    url: 'https://my.host.com/data/regions.json',
+  }
+
+export const MAP_CTX_VIEW_FIXTURE: MapContextViewModel = {
+  center: [7.75, 48.6],
+  zoom: 9,
+}
+
+export const MAP_CTX_FIXTURE: MapContextModel = {
+  layers: [
+    MAP_CTX_LAYER_XYZ_FIXTURE,
+    MAP_CTX_LAYER_WMS_FIXTURE,
+    MAP_CTX_LAYER_GEOJSON_FIXTURE,
+  ],
+  view: MAP_CTX_VIEW_FIXTURE,
+}
+
+export const MAP_CTX_EXTENT_FIXTURE: Extent = [
+  171083.69713494915, 6246047.945419401, 476970.39956295764, 6631079.362882684,
+]

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

@@ -0,0 +1,80 @@
+import type { FeatureCollection } from 'geojson'
+import { Coordinate } from 'ol/coordinate'
+import type { Extent } from 'ol/extent'
+import { Options } from 'ol/source/WMTS'
+
+export enum MapContextLayerTypeEnum {
+  XYZ = 'xyz',
+  WMS = 'wms',
+  WMTS = 'wmts',
+  WFS = 'wfs',
+  GEOJSON = 'geojson',
+}
+
+export interface MapContextModel {
+  layers: MapContextLayerModel[]
+  view?: MapContextViewModel
+}
+
+export interface MapContextLayerWmsModel {
+  type: 'wms'
+  url: string
+  name: string
+}
+
+export interface MapContextLayerWmtsModel {
+  type: 'wmts'
+  options: Options
+}
+
+interface MapContextLayerWfsModel {
+  type: 'wfs'
+  url: string
+  name: string
+}
+
+interface LayerXyzModel {
+  type: 'xyz'
+  name?: string
+}
+interface LayerXyzModelWithUrl extends LayerXyzModel {
+  url: string
+  urls?: never
+}
+interface LayerXyzModelWithUrls extends LayerXyzModel {
+  urls: string[]
+  url?: never
+}
+export type MapContextLayerXyzModel =
+  | LayerXyzModelWithUrl
+  | LayerXyzModelWithUrls
+
+interface LayerGeojson {
+  type: 'geojson'
+}
+interface LayerGeojsonWithUrl extends LayerGeojson {
+  url: string
+  data?: never
+}
+interface LayerGeojsonWithData extends LayerGeojson {
+  data: FeatureCollection | string
+  url?: never
+}
+export type MapContextLayerGeojsonModel =
+  | LayerGeojsonWithUrl
+  | LayerGeojsonWithData
+
+export type MapContextLayerModel =
+  | MapContextLayerWmsModel
+  | MapContextLayerWmtsModel
+  | MapContextLayerWfsModel
+  | MapContextLayerXyzModel
+  | MapContextLayerGeojsonModel
+
+export interface MapContextViewModel {
+  center?: Coordinate // expressed in long/lat (EPSG:4326)
+  zoom?: number
+  extent?: Extent // expressed in long/lat (EPSG:4326)
+  maxZoom?: number
+  maxExtent?: Extent // expressed in long/lat (EPSG:4326)
+}

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

@@ -0,0 +1,232 @@
+import { Injectable } from '@angular/core'
+import { MapStyleService } from '../style/map-style.service'
+import {
+  MapContextLayerModel,
+  MapContextLayerTypeEnum,
+  MapContextLayerXyzModel,
+  MapContextModel,
+  MapContextViewModel,
+} from './map-context.model'
+import Map from 'ol/Map'
+import View from 'ol/View'
+import Layer from 'ol/layer/Base'
+import VectorLayer from 'ol/layer/Vector'
+import TileWMS from 'ol/source/TileWMS'
+import TileLayer from 'ol/layer/Tile'
+import XYZ from 'ol/source/XYZ'
+import VectorSource from 'ol/source/Vector'
+import GeoJSON from 'ol/format/GeoJSON'
+import { MapUtilsService } from '../utils/map-utils.service'
+import { bbox as bboxStrategy } from 'ol/loadingstrategy'
+import { LayerConfig, MapConfig } from '../../../../../../libs/util/app-config/src'
+import { FeatureCollection } from 'geojson'
+import { fromLonLat } from 'ol/proj'
+import WMTS from 'ol/source/WMTS'
+import { removeSearchParams } from '../../../../../../libs/util/shared/src'
+
+export const DEFAULT_BASELAYER_CONTEXT: MapContextLayerXyzModel = {
+  type: MapContextLayerTypeEnum.XYZ,
+  urls: [
+    `https://a.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
+    `https://b.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
+    `https://c.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
+  ],
+}
+
+export const DEFAULT_VIEW: MapContextViewModel = {
+  center: [0, 15],
+  zoom: 2,
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MapContextService {
+  constructor(
+    private mapUtils: MapUtilsService,
+    private styleService: MapStyleService
+  ) {}
+
+  resetMapFromContext(
+    map: Map,
+    mapContext: MapContextModel,
+    mapConfig?: MapConfig
+  ): Map {
+    if (mapConfig) {
+      mapContext = this.mergeMapConfigWithContext(mapContext, mapConfig)
+    }
+    if (
+      !mapContext.view?.extent &&
+      (!mapContext.view?.center || !mapContext.view?.zoom)
+    ) {
+      mapContext.view = this.getFallbackView(mapConfig)
+    }
+    map.setView(this.createView(mapContext.view, map))
+    map.getLayers().clear()
+    mapContext.layers.forEach((layer) => map.addLayer(this.createLayer(layer)))
+    return map
+  }
+
+  createLayer(layerModel: MapContextLayerModel): Layer {
+    const { type } = layerModel
+    const style = this.styleService.styles.default
+    switch (type) {
+      case MapContextLayerTypeEnum.XYZ:
+        return new TileLayer({
+          source: new XYZ({
+            url: 'url' in layerModel ? layerModel.url : undefined,
+            urls: 'urls' in layerModel ? layerModel.urls : undefined,
+          }),
+        })
+      case MapContextLayerTypeEnum.WMS:
+        return new TileLayer({
+          source: new TileWMS({
+            url: removeSearchParams(layerModel.url, ['request', 'service']),
+            params: { LAYERS: layerModel.name },
+            gutter: 20,
+          }),
+        })
+      case MapContextLayerTypeEnum.WMTS:
+        return new TileLayer({
+          source: new WMTS(layerModel.options),
+        })
+      case MapContextLayerTypeEnum.WFS:
+        return new VectorLayer({
+          source: new VectorSource({
+            format: new GeoJSON(),
+            url: function (extent) {
+              const urlObj = new URL(
+                removeSearchParams(layerModel.url, [
+                  'service',
+                  'version',
+                  'request',
+                ])
+              )
+              urlObj.searchParams.set('service', 'WFS')
+              urlObj.searchParams.set('version', '1.1.0')
+              urlObj.searchParams.set('request', 'GetFeature')
+              urlObj.searchParams.set('outputFormat', 'application/json')
+              urlObj.searchParams.set('typename', layerModel.name)
+              urlObj.searchParams.set('srsname', 'EPSG:3857')
+              urlObj.searchParams.set('bbox', `${extent.join(',')},EPSG:3857`)
+              return urlObj.toString()
+            },
+            strategy: bboxStrategy,
+          }),
+          style,
+        })
+      case MapContextLayerTypeEnum.GEOJSON: {
+        if ('url' in layerModel) {
+          return new VectorLayer({
+            source: new VectorSource({
+              format: new GeoJSON(),
+              url: layerModel.url,
+            }),
+            style,
+          })
+        } else {
+          let geojson = layerModel.data
+          if (typeof geojson === 'string') {
+            try {
+              geojson = JSON.parse(geojson)
+            } catch (e) {
+              console.warn('A layer could not be created', layerModel, e)
+              geojson = { type: 'FeatureCollection', features: [] }
+            }
+          }
+          const features = this.mapUtils.readFeatureCollection(
+            geojson as FeatureCollection
+          )
+          return new VectorLayer({
+            source: new VectorSource({
+              features,
+            }),
+            style,
+          })
+        }
+      }
+      default:
+        throw new Error(`Unrecognized layer type: ${layerModel.type}`)
+    }
+  }
+
+  createView(viewModel: MapContextViewModel, map?: Map): View {
+    const { center: centerInViewProj, zoom, maxZoom, maxExtent } = viewModel
+    const center = centerInViewProj
+      ? fromLonLat(centerInViewProj, 'EPSG:3857')
+      : [0, 0]
+    const view = new View({
+      center,
+      zoom,
+      maxZoom,
+      extent: maxExtent,
+      multiWorld: false,
+      constrainResolution: true,
+    })
+    if (viewModel.extent && map) {
+      view.fit(viewModel.extent, {
+        size: map.getSize(),
+      })
+    }
+    return view
+  }
+
+  mergeMapConfigWithContext(
+    mapContext: MapContextModel,
+    mapConfig: MapConfig
+  ): MapContextModel {
+    return {
+      ...mapContext,
+      view: {
+        ...mapContext.view,
+        ...(mapConfig.MAX_ZOOM && {
+          maxZoom: mapConfig.MAX_ZOOM,
+        }),
+        ...(mapConfig.MAX_EXTENT && {
+          maxExtent: mapConfig.MAX_EXTENT,
+        }),
+      },
+      layers: [
+        ...(mapConfig.DO_NOT_USE_DEFAULT_BASEMAP
+          ? []
+          : [DEFAULT_BASELAYER_CONTEXT]),
+        ...mapConfig.MAP_LAYERS.map(this.getContextLayerFromConfig),
+        ...mapContext.layers,
+      ],
+    }
+  }
+
+  getFallbackView(mapConfig: MapConfig): MapContextViewModel {
+    return mapConfig?.MAX_EXTENT
+      ? { extent: mapConfig.MAX_EXTENT }
+      : DEFAULT_VIEW
+  }
+
+  getContextLayerFromConfig(config: LayerConfig): MapContextLayerModel {
+    switch (config.TYPE) {
+      case 'wms':
+        return {
+          type: 'wms',
+          url: config.URL,
+          name: config.NAME,
+        }
+      case 'wfs':
+        return {
+          type: 'wfs',
+          url: config.URL,
+          name: config.NAME,
+        }
+      case 'xyz':
+        return {
+          type: config.TYPE,
+          url: config.URL,
+          name: config.NAME,
+        }
+      case 'geojson':
+        return {
+          type: config.TYPE,
+          ...(config.DATA ? { data: config.DATA } : { url: config.URL }),
+        }
+    }
+  }
+}

package/src/libs/feature/map/src/lib/style/index.ts

@@ -0,0 +1,2 @@
+export * from './map-style.service'
+export * from './map-style.fixtures'

package/src/libs/feature/map/src/lib/style/map-style.fixtures.ts

@@ -0,0 +1,45 @@
+import { Circle, Fill, Stroke, Style } from 'ol/style'
+
+const colorPrimary = 'blue'
+const colorSecondary = 'red'
+const colorStroke = 'white'
+
+export const DEFAULT_STYLE_FIXTURE = new Style({
+  image: new Circle({
+    fill: new Fill({
+      color: colorPrimary,
+    }),
+    stroke: new Stroke({
+      color: colorStroke,
+      width: 2,
+    }),
+    radius: 5,
+  }),
+  fill: new Fill({
+    color: 'rgba(0,0,255,0.25)',
+  }),
+  stroke: new Stroke({
+    color: colorStroke,
+    width: 2,
+  }),
+})
+
+export const DEFAULT_STYLE_HL_FIXTURE = new Style({
+  image: new Circle({
+    fill: new Fill({
+      color: colorSecondary,
+    }),
+    stroke: new Stroke({
+      color: colorStroke,
+      width: 3,
+    }),
+    radius: 6,
+  }),
+  fill: new Fill({
+    color: 'rgba(255,0,0,0.25)',
+  }),
+  stroke: new Stroke({
+    color: colorSecondary,
+    width: 3,
+  }),
+})

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

@@ -0,0 +1,108 @@
+import { Injectable } from '@angular/core'
+import { getThemeConfig, isConfigLoaded } from '../../../../../../libs/util/app-config/src'
+import chroma from 'chroma-js'
+import { Fill, Stroke, Style } from 'ol/style'
+import { StyleLike } from 'ol/style/Style'
+import CircleStyle from 'ol/style/Circle'
+import Feature from 'ol/Feature'
+
+export interface CreateStyleOptions {
+  color: string
+  isFocused?: boolean
+}
+
+export type StyleByGeometryType = {
+  line: Style | Style[]
+  polygon: Style | Style[]
+  point: Style | Style[]
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MapStyleService {
+  styles = {
+    default: this.createStyleFunction(
+      this.createGeometryStyles({
+        color: isConfigLoaded() ? getThemeConfig().PRIMARY_COLOR : 'blue',
+      })
+    ),
+    defaultHL: this.createStyleFunction(
+      this.createGeometryStyles({
+        color: isConfigLoaded() ? getThemeConfig().SECONDARY_COLOR : 'red',
+        isFocused: true,
+      })
+    ),
+  }
+
+  createGeometryStyles(options: CreateStyleOptions): StyleByGeometryType {
+    const { color, isFocused } = options
+    const zIndex = isFocused ? 10 : undefined
+    return {
+      polygon: new Style({
+        fill: new Fill({
+          color: this.computeTransparentFillColor(color),
+        }),
+        stroke: new Stroke({
+          color: 'white',
+          width: 2,
+        }),
+        zIndex,
+      }),
+      point: new Style({
+        image: new CircleStyle({
+          fill: new Fill({
+            color,
+          }),
+          stroke: new Stroke({
+            color: 'white',
+            width: isFocused ? 3 : 2,
+          }),
+          radius: isFocused ? 8 : 7,
+        }),
+        zIndex,
+      }),
+      line: [
+        new Style({
+          stroke: new Stroke({
+            color: 'white',
+            width: isFocused ? 8 : 6,
+          }),
+          zIndex,
+        }),
+        new Style({
+          stroke: new Stroke({
+            color,
+            width: isFocused ? 3 : 2,
+          }),
+          zIndex,
+        }),
+      ],
+    }
+  }
+
+  createStyleFunction(styleByGeometryType: StyleByGeometryType): StyleLike {
+    return (feature: Feature): Style | Style[] => {
+      const geometryType = feature?.getGeometry()?.getType()
+      switch (geometryType) {
+        case 'LinearRing':
+        case 'LineString':
+        case 'MultiLineString':
+          return styleByGeometryType.line
+        case 'Point':
+        case 'MultiPoint':
+          return styleByGeometryType.point
+        case 'Circle':
+        case 'Polygon':
+        case 'MultiPolygon':
+          return styleByGeometryType.polygon
+        default:
+          return styleByGeometryType.point
+      }
+    }
+  }
+
+  private computeTransparentFillColor(color: string, alpha = 0.25): string {
+    return chroma(color).alpha(alpha).css()
+  }
+}

package/src/libs/feature/map/src/lib/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './map-utils.service'
+export * from './map-utils-wms.service'
+export * from './projections'

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

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core'
+import { WmsEndpoint, WmsLayerFull } from '@camptocamp/ogc-client'
+import { MapContextLayerWmsModel } from '../map-context/map-context.model'
+import { ProxyService } from '../../../../../../libs/util/shared/src'
+import { from, Observable } from 'rxjs'
+import { map } from 'rxjs/operators'
+import { LONLAT_CRS_CODES } from './projections'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MapUtilsWMSService {
+  constructor(private proxy: ProxyService) {}
+
+  getCapabilities(layer: MapContextLayerWmsModel): Observable<WmsEndpoint> {
+    return from(new WmsEndpoint(this.proxy.getProxiedUrl(layer.url)).isReady())
+  }
+
+  getLayerFull(layer: MapContextLayerWmsModel): Observable<WmsLayerFull> {
+    return this.getCapabilities(layer).pipe(
+      map((endpoint) => endpoint.getLayerByName(layer.name))
+    )
+  }
+
+  getLayerLonLatBBox(layer: MapContextLayerWmsModel) {
+    return this.getLayerFull(layer).pipe(
+      map((wmsLayerFull) => this.getLonLatBBox(wmsLayerFull))
+    )
+  }
+
+  getLonLatBBox(wmsLayerFull: WmsLayerFull) {
+    const { boundingBoxes } = wmsLayerFull
+    const lonLatCRS = Object.keys(boundingBoxes)?.find((crs) =>
+      LONLAT_CRS_CODES.includes(crs)
+    )
+    if (lonLatCRS) {
+      return boundingBoxes[lonLatCRS]
+    }
+  }
+}