From 82924665ef63a1aced7d825f2e140f37996c6af3 Mon Sep 17 00:00:00 2001 From: Anna Iosif Date: Wed, 5 Mar 2025 10:31:44 +0100 Subject: [PATCH 1/2] First wms-layer added --- .../src/app/core/helpers/map.ts | 47 +++++++++++++++++++ .../src/app/map/map.component.ts | 29 ++++++++++-- 2 files changed, 73 insertions(+), 3 deletions(-) diff --git a/apps/web-mzima-client/src/app/core/helpers/map.ts b/apps/web-mzima-client/src/app/core/helpers/map.ts index ad8d72659a..e71a62ad89 100644 --- a/apps/web-mzima-client/src/app/core/helpers/map.ts +++ b/apps/web-mzima-client/src/app/core/helpers/map.ts @@ -101,3 +101,50 @@ export const getMapLayers = () => { }, }; }; + +interface WaterLayerParams { + LAYERS: string; + FORMAT: string; + TRANSPARENT: boolean; + TIME: string; + CRS: string; + exceptions: string; + styles: string; +} + +interface WaterLayer { + attribution: string; + url: string; + params: WaterLayerParams; +} + +export const getWaterLayer = (): WaterLayer[] => { + return [ + { + attribution: 'Water Observations from space 2023', + url: 'https://ows.digitalearth.africa/wms?version=1.3.0', + params: { + LAYERS: 'wofs_ls_summary_annual', + FORMAT: 'image/png', + TRANSPARENT: true, + TIME: '2023-01-01', + CRS: 'EPSG:3857', + exceptions: 'XML', + styles: 'wofs_summary_annual_frequency', + }, + }, + { + attribution: 'Water Observations from space 2013', + url: 'https://ows.digitalearth.africa/wms?version=1.3.0', + params: { + LAYERS: 'wofs_ls_summary_annual', + FORMAT: 'image/png', + TRANSPARENT: true, + TIME: '2013-01-01', + CRS: 'EPSG:3857', + exceptions: 'XML', + styles: 'wofs_summary_annual_frequency', + }, + }, + ]; +}; diff --git a/apps/web-mzima-client/src/app/map/map.component.ts b/apps/web-mzima-client/src/app/map/map.component.ts index bd8cf208e7..c9f3fb005a 100644 --- a/apps/web-mzima-client/src/app/map/map.component.ts +++ b/apps/web-mzima-client/src/app/map/map.component.ts @@ -12,6 +12,7 @@ import Style from 'ol/style/Style'; import Icon from 'ol/style/Icon'; import Overlay from 'ol/Overlay'; import { mapHelper, searchFormHelper } from '@helpers'; +import TileWMS from 'ol/source/TileWMS'; import XYZ from 'ol/source/XYZ'; import LayerSwitcher from 'ol-layerswitcher'; import { BaseLayerOptions, GroupLayerOptions } from 'ol-layerswitcher'; @@ -44,6 +45,8 @@ export class MapComponent extends MainViewComponent implements OnInit { surveyLayer!: VectorLayer; post: any; isPostLoading: boolean; + waterBodies: TileLayer[]; + waterLayers: LayerGroup; constructor( protected override router: Router, @@ -73,6 +76,7 @@ export class MapComponent extends MainViewComponent implements OnInit { ngOnInit(): void { this.mapConfig = this.sessionService.getMapConfigurations(); this.initBaseLayers(); + this.initWMSLayers(); this.initMap(); this.loadData(); } @@ -100,6 +104,26 @@ export class MapComponent extends MainViewComponent implements OnInit { } as GroupLayerOptions); } + initWMSLayers() { + const wmsWater = mapHelper.getWaterLayer(); + this.waterBodies = wmsWater.map((wms: any) => { + const newLayer = new TileLayer({ + source: new TileWMS({ + url: wms.url, + params: wms.params, + }), + }); + newLayer.setProperties({ title: wms.attribution }); + return newLayer; + }); + + this.waterLayers = new LayerGroup({ + title: 'Water bodies', + layers: this.waterBodies, + combine: false, + } as GroupLayerOptions); + } + initMap() { const center = [this.mapConfig.default_view?.lon || 0, this.mapConfig.default_view?.lat || 0]; const view = new View({ @@ -109,15 +133,14 @@ export class MapComponent extends MainViewComponent implements OnInit { this.map = new Map({ view: view, - layers: [this.baseMaps], + layers: [this.baseMaps, this.waterLayers], target: 'ol-map', }); const layerSwitcher = new LayerSwitcher({ reverse: true, groupSelectStyle: 'children', - startActive: true, - activationMode: 'click', + startActive: false, label: '', collapseLabel: '', }); From 6d4da9e7ae6c3e2ff8ce45189e3c4e71c615e997 Mon Sep 17 00:00:00 2001 From: Anna Iosif Date: Mon, 10 Mar 2025 09:55:46 +0100 Subject: [PATCH 2/2] Adding rainfall data --- .../src/app/core/helpers/map.ts | 162 ++++++++++++++++++ .../src/app/map/map.component.ts | 21 ++- 2 files changed, 182 insertions(+), 1 deletion(-) diff --git a/apps/web-mzima-client/src/app/core/helpers/map.ts b/apps/web-mzima-client/src/app/core/helpers/map.ts index e71a62ad89..0f677f4b14 100644 --- a/apps/web-mzima-client/src/app/core/helpers/map.ts +++ b/apps/web-mzima-client/src/app/core/helpers/map.ts @@ -148,3 +148,165 @@ export const getWaterLayer = (): WaterLayer[] => { }, ]; }; + +interface RainfallLayer { + attribution: string; + url: string; + params: { + LAYERS: string; + FORMAT: string; + TRANSPARENT: boolean; + TIME: string; + CRS: string; + exceptions: string; + styles: string; + }; +} + +export const getRainfallLayer = (): RainfallLayer[] => { + return [ + { + attribution: 'Rainfall january 1981', + url: 'https://ows.digitalearth.africa/wms?version=1.3.0?', + params: { + LAYERS: 'rainfall_chirps_monthly', + FORMAT: 'image/png', + TRANSPARENT: true, + TIME: '1981-01-01', + CRS: 'EPSG:3857', + exceptions: 'XML', + styles: 'rainfall_monthly', + }, + }, + { + attribution: 'Rainfall january 1986', + url: 'https://ows.digitalearth.africa/wms?version=1.3.0?', + params: { + LAYERS: 'rainfall_chirps_monthly', + FORMAT: 'image/png', + TRANSPARENT: true, + TIME: '1986-01-01', + CRS: 'EPSG:3857', + exceptions: 'XML', + styles: 'rainfall_monthly', + }, + }, + { + attribution: 'Rainfall january 1991', + url: 'https://ows.digitalearth.africa/wms?version=1.3.0?', + params: { + LAYERS: 'rainfall_chirps_monthly', + FORMAT: 'image/png', + TRANSPARENT: true, + TIME: '1991-01-01', + CRS: 'EPSG:3857', + exceptions: 'XML', + styles: 'rainfall_monthly', + }, + }, + { + attribution: 'Rainfall january 1996', + url: 'https://ows.digitalearth.africa/wms?version=1.3.0?', + params: { + LAYERS: 'rainfall_chirps_monthly', + FORMAT: 'image/png', + TRANSPARENT: true, + TIME: '1996-01-01', + CRS: 'EPSG:3857', + exceptions: 'XML', + styles: 'rainfall_monthly', + }, + }, + { + attribution: 'Rainfall january 2001', + url: 'https://ows.digitalearth.africa/wms?version=1.3.0?', + params: { + LAYERS: 'rainfall_chirps_monthly', + FORMAT: 'image/png', + TRANSPARENT: true, + TIME: '2001-01-01', + CRS: 'EPSG:3857', + exceptions: 'XML', + styles: 'rainfall_monthly', + }, + }, + { + attribution: 'Rainfall january 2006', + url: 'https://ows.digitalearth.africa/wms?version=1.3.0?', + params: { + LAYERS: 'rainfall_chirps_monthly', + FORMAT: 'image/png', + TRANSPARENT: true, + TIME: '2006-01-01', + CRS: 'EPSG:3857', + exceptions: 'XML', + styles: 'rainfall_monthly', + }, + }, + { + attribution: 'Rainfall january 2011', + url: 'https://ows.digitalearth.africa/wms?version=1.3.0?', + params: { + LAYERS: 'rainfall_chirps_monthly', + FORMAT: 'image/png', + TRANSPARENT: true, + TIME: '2011-01-01', + CRS: 'EPSG:3857', + exceptions: 'XML', + styles: 'rainfall_monthly', + }, + }, + { + attribution: 'Rainfall january 2016', + url: 'https://ows.digitalearth.africa/wms?version=1.3.0?', + params: { + LAYERS: 'rainfall_chirps_monthly', + FORMAT: 'image/png', + TRANSPARENT: true, + TIME: '2016-12-01', + CRS: 'EPSG:3857', + exceptions: 'XML', + styles: 'rainfall_monthly', + }, + }, + { + attribution: 'Rainfall january 2021 ', + url: 'https://ows.digitalearth.africa/wms?version=1.3.0?', + params: { + LAYERS: 'rainfall_chirps_monthly', + FORMAT: 'image/png', + TRANSPARENT: true, + TIME: '2021-12-01', + CRS: 'EPSG:3857', + exceptions: 'XML', + styles: 'rainfall_monthly', + }, + }, + { + attribution: 'Rainfall january 2024 ', + url: 'https://ows.digitalearth.africa/wms?version=1.3.0?', + params: { + LAYERS: 'rainfall_chirps_monthly', + FORMAT: 'image/png', + TRANSPARENT: true, + TIME: '2024-01-01', + CRS: 'EPSG:3857', + exceptions: 'XML', + styles: 'rainfall_monthly', + }, + }, + { + attribution: 'Rainfall january 2025 ', + url: 'https://ows.digitalearth.africa/wms?version=1.3.0?', + params: { + LAYERS: 'rainfall_chirps_monthly', + FORMAT: 'image/png', + TRANSPARENT: true, + TIME: '2025-01-01', + CRS: 'EPSG:3857', + exceptions: 'XML', + styles: 'rainfall_monthly', + }, + }, + ]; +}; diff --git a/apps/web-mzima-client/src/app/map/map.component.ts b/apps/web-mzima-client/src/app/map/map.component.ts index c9f3fb005a..9d3f0464f1 100644 --- a/apps/web-mzima-client/src/app/map/map.component.ts +++ b/apps/web-mzima-client/src/app/map/map.component.ts @@ -47,6 +47,8 @@ export class MapComponent extends MainViewComponent implements OnInit { isPostLoading: boolean; waterBodies: TileLayer[]; waterLayers: LayerGroup; + rainfallLayer: LayerGroup; + rainfall: TileLayer[]; constructor( protected override router: Router, @@ -122,6 +124,23 @@ export class MapComponent extends MainViewComponent implements OnInit { layers: this.waterBodies, combine: false, } as GroupLayerOptions); + + const wmsRainfall = mapHelper.getRainfallLayer(); + this.rainfall = wmsRainfall.map((wms: any) => { + const newLayer = new TileLayer({ + source: new TileWMS({ + url: wms.url, + params: wms.params, + }), + }); + newLayer.setProperties({ title: wms.attribution }); + return newLayer; + }); + this.rainfallLayer = new LayerGroup({ + title: 'Rainfall', + layers: this.rainfall, + combine: false, + } as GroupLayerOptions); } initMap() { @@ -133,7 +152,7 @@ export class MapComponent extends MainViewComponent implements OnInit { this.map = new Map({ view: view, - layers: [this.baseMaps, this.waterLayers], + layers: [this.baseMaps, this.waterLayers, this.rainfallLayer], target: 'ol-map', });