diff --git a/app/src/components/map/CustomWmsVariables.vue b/app/src/components/map/CustomWmsVariables.vue index 80a45566c7..28933406b3 100644 --- a/app/src/components/map/CustomWmsVariables.vue +++ b/app/src/components/map/CustomWmsVariables.vue @@ -58,7 +58,7 @@ export default { watch: { }, methods: { - updateMap(evt) { + updateMap() { // Update selected values Object.keys(this.select).forEach((key) => { if (this.indicatorObject) { @@ -69,11 +69,10 @@ export default { if (this.indicatorObject) { this.indicatorObject.display.wmsVariables = JSON.parse(JSON.stringify(this.wmsVariables)); } - // this.wmsVariables = JSON.parse(JSON.stringify(this.wmsVariables)); const { map } = getMapInstance('centerMap'); const wmsLayer = map.getAllLayers().find((l) => l.get('name') === this.wmsVariables.sourceLayer); - wmsLayer.changed(true); - console.log(wmsLayer); + wmsLayer.changed(); + }, }, }; diff --git a/app/src/components/map/layers.js b/app/src/components/map/layers.js index e0f2676c04..7d86f6f52a 100644 --- a/app/src/components/map/layers.js +++ b/app/src/components/map/layers.js @@ -511,6 +511,11 @@ export function createLayerFromConfig(config, map, _options = {}) { if (config.specialEnvTime) { params.env = `year:${params.time}`; } + if (config.specialEnvScenario4) { + const scenario = config.wmsVariables.variables.scenario.selected; + const height = config.wmsVariables.variables.height.selected; + params.map = `SSP${scenario}_${height}Y${params.time}.map`; + } } source = new TileWMS({ attributions: config.attribution, @@ -536,6 +541,11 @@ export function createLayerFromConfig(config, map, _options = {}) { if (configUpdate.specialEnvTime) { newParams.env = `year:${updatedTime}`; } + if (configUpdate.specialEnvScenario4) { + const scenario = configUpdate.wmsVariables.variables.scenario.selected; + const height = configUpdate.wmsVariables.variables.height.selected; + newParams.map = `SSP${scenario}_${height}Y${updatedTime}.map`; + } source.updateParams(newParams); }); layer = new TileLayer({ diff --git a/app/src/config/ideas.js b/app/src/config/ideas.js index 98c460cf78..348b7284fa 100644 --- a/app/src/config/ideas.js +++ b/app/src/config/ideas.js @@ -1,5 +1,10 @@ import { baseLayers, overlayLayers } from '@/config/layers'; +import GeoJSON from 'ol/format/GeoJSON'; +import { + Fill, Stroke, Style, Circle, +} from 'ol/style'; +const geojsonFormat = new GeoJSON(); export const indicatorsDefinition = Object.freeze({ IND4_1: { indicatorSummary: 'Indicator 4', @@ -12,15 +17,13 @@ export const dataPath = './eodash-data/internal/'; export const dataEndpoints = []; export const defaultLayersDisplay = { - baseUrl: '`https://services.sentinel-hub.com/ogc/wms/${shConfig.shInstanceId}`', protocol: 'WMS', - // dateFormatFunction: shTimeFunction, format: 'image/png', transparent: true, tileSize: 512, opacity: 1, attribution: '{ Use of this data is subject to Articles 3 and 8 of the Terms and Conditions }', - minZoom: 7, + minZoom: 1, visible: true, mapProjection: 'EPSG:3857', projection: 'EPSG:3857', @@ -42,20 +45,53 @@ export const mapDefaults = Object.freeze({ bounds: [-10, 35, 33, 70], }); -export const baseLayersLeftMap = [{ - ...baseLayers.terrainLight, visible: true, -}, baseLayers.eoxosm, baseLayers.cloudless]; -export const baseLayersRightMap = [{ - ...baseLayers.terrainLight, visible: true, -}, baseLayers.eoxosm, baseLayers.cloudless]; +export const baseLayersMap = [ + baseLayers.eoxosm, + baseLayers.cloudless, + { + ...baseLayers.terrainLight, visible: true, + }, +]; -export const overlayLayersLeftMap = [{ - ...overlayLayers.eoxOverlay, visible: true, -}]; -export const overlayLayersRightMap = [{ +export const overlayLayersMap = [{ ...overlayLayers.eoxOverlay, visible: true, }]; +function overpassApiNodes(query) { + return { + drawnAreaLimitExtent: true, + areaFormatFunction: (area) => { + // overpass api expects lat,lon + const extent = geojsonFormat.readGeometry(area).getExtent(); + return { area: [extent[1], extent[0], extent[3], extent[2]] }; + }, + url: `https://overpass-api.de/api/interpreter?data=${query}`, + requestMethod: 'GET', + callbackFunction: (responseJson) => { + const ftrs = []; + const data = responseJson.elements; + if (Array.isArray(data)) { + data.forEach((ftr) => { + const singleGeometry = { + type: 'Point', + coordinates: [ftr.lon, ftr.lat], + }; + ftrs.push({ + type: 'Feature', + properties: ftr.tags, + geometry: singleGeometry, + }); + }); + } + const ftrColl = { + type: 'FeatureCollection', + features: ftrs, + }; + return ftrColl; + }, + }; +} + export const globalIndicators = [ { properties: { @@ -77,7 +113,7 @@ export const globalIndicators = [ yAxis: 'flooding', display: { wmsVariables: { - sourceLayer: 'IND4_1', + sourceLayer: 'Indicator 4: Flood risk', variables: { scenario: { description: 'Scenario', @@ -141,15 +177,39 @@ export const globalIndicators = [ }, }, }, - specialEnvTime: true, + specialEnvScenario4: true, baseUrl: 'https://wcs-eo4sdcr.adamplatform.eu/cgi-bin/mapserv/', layers: 'INUNDATION', - minZoom: 1, crossOrigin: null, - // legendUrl: 'legends/esa/AWS_NO2-VISUALISATION.png', - dateFormatFunction: (date) => `SSP119_05Y${date}.map`, + dateFormatFunction: (date) => date, labelFormatFunction: (date) => date, - name: 'IND4_1', + name: 'Indicator 4: Flood risk', + customAreaFeatures: true, + features: { + name: 'OpenStreet Map hospitals, schools', + styleFunction: (feature) => { + const amenity = feature.get('amenity'); + const radius = 4; + const fill = new Fill({ + color: 'rgba(255, 255, 255, 0)', + }); + const stroke = new Stroke({ + width: 3, + color: amenity === 'hospital' ? '#003247' : '#7d0240', + }); + const style = new Style({ + image: new Circle({ + fill, + stroke, + radius, + }), + }); + return style; + }, + allowedParameters: ['name', 'amenity'], + ...overpassApiNodes( + '[out:json][timeout:30];(node["amenity"="school"]({area});node["amenity"="hospital"]({area}););out body;>;out skel qt;'), + }, }, }, },