feat: add overpass API integration for ind4

eurodatacube · Oct 10, 2023 · fb6c9f2 · fb6c9f2
1 parent 10437d9
commit fb6c9f2
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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: '{ <a href="https://race.esa.int/terms_and_conditions" target="_blank">Use of this data is subject to Articles 3 and 8 of the Terms and Conditions</a> }',
-  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;'),
+          },
         },
       },
     },