@eeacms/volto-cca-policy 0.1.88 → 0.1.89

package/CHANGELOG.md

@@ -4,6 +4,48 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.89](https://github.com/eea/volto-cca-policy/compare/0.1.88...0.1.89) - 4 March 2024
+
+#### :bug: Bug Fixes
+
+- fix: warning messages [kreafox - [`95644f3`](https://github.com/eea/volto-cca-policy/commit/95644f36fe848f52bea700b5a5d0bc3844b7be12)]
+- fix(tests): more cleanup [kreafox - [`93d75db`](https://github.com/eea/volto-cca-policy/commit/93d75dbd30a12e7107dfa3894e69cae7328cfaea)]
+- fix(test): duplicated code issue [kreafox - [`41d511a`](https://github.com/eea/volto-cca-policy/commit/41d511a36905385092c8eb810566732cf4dd31b8)]
+- fix(test): cleanup [kreafox - [`cba73a4`](https://github.com/eea/volto-cca-policy/commit/cba73a483cb2fca461fdb90f7a80258818534ddb)]
+- fix(views): don't show image on db items [kreafox - [`c533e74`](https://github.com/eea/volto-cca-policy/commit/c533e74d705b79e1d36f84d4bf268040a8f21174)]
+- fix: add volto-datablocks to addons [kreafox - [`a4c39fe`](https://github.com/eea/volto-cca-policy/commit/a4c39fe782e4cd717eee19128befb5fc19ecba05)]
+
+#### :nail_care: Enhancements
+
+- change(views): update db items view layout [kreafox - [`278937f`](https://github.com/eea/volto-cca-policy/commit/278937f28626addb4c4a86ba58fddd237ace296d)]
+
+#### :house: Internal changes
+
+- style: gallery improvements [kreafox - [`e85af09`](https://github.com/eea/volto-cca-policy/commit/e85af09b2aa52abfc07086b0720df469820d3d55)]
+- style: Automated code fix [eea-jenkins - [`ee38bed`](https://github.com/eea/volto-cca-policy/commit/ee38bedc3da9f40ae66ec62d162d4967008cf909)]
+- style(subsite): CSS fixes [kreafox - [`f6ebc71`](https://github.com/eea/volto-cca-policy/commit/f6ebc711d76cdaf34643ca6ccc80a04046dda892)]
+
+#### :hammer_and_wrench: Others
+
+- add d3-array to dependencies [kreafox - [`3d234f3`](https://github.com/eea/volto-cca-policy/commit/3d234f304beefe3118a284ae251fade8e1173e34)]
+- Remove unneded import [Tiberiu Ichim - [`8f12b73`](https://github.com/eea/volto-cca-policy/commit/8f12b7358b91015071c0e01578625c8305160eca)]
+- Remove dependency on d3 [Tiberiu Ichim - [`084d437`](https://github.com/eea/volto-cca-policy/commit/084d437e096a8ef0c16083a153d6110f9c16946b)]
+- Remove unneded code [Tiberiu Ichim - [`fbc31b2`](https://github.com/eea/volto-cca-policy/commit/fbc31b2451d3aba0e911be91e90d22ab66be19d3)]
+- Refs #266329 - IndicatorView: render map_graphs - fix null case. [GhitaB - [`5323df0`](https://github.com/eea/volto-cca-policy/commit/5323df0914a3427fe69d5fbf739e2ce20ab881b1)]
+- Refs #266329 - IndicatorView: render map_graphs as iframe (flourish). [GhitaB - [`eda69ea`](https://github.com/eea/volto-cca-policy/commit/eda69eaadbd0c6d7f6815ddb4076c0b166f764ad)]
+- Add volto-datablocks as dependency [Tiberiu Ichim - [`7353625`](https://github.com/eea/volto-cca-policy/commit/7353625729f1c42cde75084d3d58e817cf239537)]
+- country map ol duplicated lines [Tripon Eugen - [`ec68c9c`](https://github.com/eea/volto-cca-policy/commit/ec68c9cbf5bff501312dcbbb2ddaebc4a9efccbb)]
+- country map ol duplicated lines [Tripon Eugen - [`60bee59`](https://github.com/eea/volto-cca-policy/commit/60bee5915254e0453535847d32b54087440bfd60)]
+- country map ol eslint [Tripon Eugen - [`00fb638`](https://github.com/eea/volto-cca-policy/commit/00fb63898eae057aa0898ea2291270335fccca0d)]
+- country map ol duplicated lines [Tripon Eugen - [`de83ae3`](https://github.com/eea/volto-cca-policy/commit/de83ae3f777b5560514c81920c693bb2ede6d0fb)]
+- country map ol duplicated lines [Tripon Eugen - [`1b6f1fd`](https://github.com/eea/volto-cca-policy/commit/1b6f1fd2d6f2b270b94ed8965ac924f75294d722)]
+- country map ol duplicated lines [Tripon Eugen - [`ce47840`](https://github.com/eea/volto-cca-policy/commit/ce47840a8359fa222ef5b5d2cd59edf1faa78af0)]
+- country map ol popup hide [Tripon Eugen - [`39e4800`](https://github.com/eea/volto-cca-policy/commit/39e4800df2adc2cc0753be1dd66bce093c1a2c77)]
+- country map ol withVisibility, popup hide [Tripon Eugen - [`565d55e`](https://github.com/eea/volto-cca-policy/commit/565d55eb11936a86366f7bfd2939239ade86ce70)]
+- country map profile filter title [Tripon Eugen - [`2a4b1cf`](https://github.com/eea/volto-cca-policy/commit/2a4b1cfda934b398e4407f52e5f0de2664c181ec)]
+- country map heat index eslint [Tripon Eugen - [`1fd7829`](https://github.com/eea/volto-cca-policy/commit/1fd782943ee8564bddc13bea9df47af425045bde)]
+- country map heat index eslint [Tripon Eugen - [`b229b69`](https://github.com/eea/volto-cca-policy/commit/b229b690413c4573110bab1063ac3171945b22ca)]
+- country map heat index ol [Tripon Eugen - [`30a3ec1`](https://github.com/eea/volto-cca-policy/commit/30a3ec15e2ca4eee9ba4170eada8e2660d1a9ea6)]
 ### [0.1.88](https://github.com/eea/volto-cca-policy/compare/0.1.87...0.1.88) - 1 March 2024
 
 #### :bug: Bug Fixes
@@ -521,13 +563,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #260715 rast-block wip [Tripon Eugen - [`f19d54e`](https://github.com/eea/volto-cca-policy/commit/f19d54e0b9a6a86bf344eb85b6a1cda7f3de91bf)]
 - Refs #260715 rast-block wip [Tripon Eugen - [`2828537`](https://github.com/eea/volto-cca-policy/commit/2828537b6c084cd1a82162d552fb4ef025b71f9f)]
 - Refs #260715 rast-block updates [Tripon Eugen - [`1e803e5`](https://github.com/eea/volto-cca-policy/commit/1e803e5bd3d3fb7558f261c76c68866be7beb8b5)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`0a15e1b`](https://github.com/eea/volto-cca-policy/commit/0a15e1b2ad081233685e80d5b3c60a8663f6b896)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`9554e44`](https://github.com/eea/volto-cca-policy/commit/9554e44c92a621a52b2adb5a4830fb084ee5734b)]
 ### [0.1.49](https://github.com/eea/volto-cca-policy/compare/0.1.48...0.1.49) - 15 November 2023
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`7b820a6`](https://github.com/eea/volto-cca-policy/commit/7b820a6369c2ddd5203b1a4abe352cb4bb43db7a)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`f0a8061`](https://github.com/eea/volto-cca-policy/commit/f0a8061c275c236deb00087c23fac9860a073106)]
 
 #### :hammer_and_wrench: Others
@@ -544,9 +583,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #259267 - jenkins test [Tripon Eugen - [`cacd31e`](https://github.com/eea/volto-cca-policy/commit/cacd31e7b1afe0983674ed5c7632d2e1d7fa752e)]
 - Refs #259267 - jenkins [Tripon Eugen - [`5b3affe`](https://github.com/eea/volto-cca-policy/commit/5b3affee8401239de10097884c1b7f2349d15ec0)]
 - Refs #259267 - add When, lead image and title to files [Tripon Eugen - [`2cedb23`](https://github.com/eea/volto-cca-policy/commit/2cedb237f898af9057e13fba94b615ef71077204)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`4d607a5`](https://github.com/eea/volto-cca-policy/commit/4d607a576e9d0a5c34e48c41b409e7df616ee3d6)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`b7f74d5`](https://github.com/eea/volto-cca-policy/commit/b7f74d53513a6edbfbca5cb6d19687929bb1e5db)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`db65617`](https://github.com/eea/volto-cca-policy/commit/db656173391f65157098d95d388c25f6429753d8)]
 - Refs #259267 - cca event blocks attachments and check not mandatoty fields [Tripon Eugen - [`3138e5a`](https://github.com/eea/volto-cca-policy/commit/3138e5afb5bfbdbed14e27ed457b16867b7fa414)]
 - Refs #256681 - Fix error in CCA Event view menu. ([React Intl] An id must be provided to format a message.) [GhitaB - [`517eeb8`](https://github.com/eea/volto-cca-policy/commit/517eeb817264a47bbfd6b9b7d22aaf22d44ed224)]
 - Refs #161485 - Fix ECDE name conflict. [GhitaB - [`8bfd99f`](https://github.com/eea/volto-cca-policy/commit/8bfd99ff68bb82a04d1c0ed625fa514fcf46289e)]
@@ -763,7 +799,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`ad1ced0`](https://github.com/eea/volto-cca-policy/commit/ad1ced0971ba116c13a3b5fcc039172cc915c919)]
 
 #### :hammer_and_wrench: Others
 
@@ -1244,7 +1279,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Refs #158294 - Update supported languages list. [GhitaB - [`0a4f91f`](https://github.com/eea/volto-cca-policy/commit/0a4f91f39b7edc367bd4c127d6a8f273c7788361)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`8f1f9ce`](https://github.com/eea/volto-cca-policy/commit/8f1f9ce6c22805670cc0800d3c779b6d619d0f31)]
 ### [0.1.1](https://github.com/eea/volto-cca-policy/compare/0.1.0...0.1.1) - 13 December 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.88",
+  "version": "0.1.89",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -23,6 +23,7 @@
     "@eeacms/volto-widget-dataprovenance",
     "@eeacms/volto-accordion-block",
     "@eeacms/volto-slate-label",
+    "@eeacms/volto-datablocks",
     "@eeacms/volto-eea-design-system",
     "@eeacms/volto-eea-website-theme",
     "@eeacms/volto-globalsearch"
@@ -30,6 +31,7 @@
   "dependencies": {
     "@eeacms/volto-accordion-block": "*",
     "@eeacms/volto-block-style": "*",
+    "@eeacms/volto-datablocks": "*",
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-eea-website-theme": "*",
     "@eeacms/volto-globalsearch": "*",
@@ -39,9 +41,8 @@
     "@eeacms/volto-widget-dataprovenance": "*",
     "@eeacms/volto-widget-geolocation": "*",
     "@eeacms/volto-widget-temporal-coverage": "*",
-    "d3": "4",
-    "d3-geo": "3",
     "query-string": "7.1.0",
+    "d3-array": "^2.12.1",
     "react-visibility-sensor": "5.1.1"
   },
   "devDependencies": {

package/src/components/manage/Blocks/CountryMapHeatIndex/Filter.jsx

@@ -1,29 +1,38 @@
+import React from 'react';
+import { Radio } from 'semantic-ui-react';
+
+function hidePopup() {
+  const collections = document.getElementsByClassName('map-tooltip');
+  for (let i = 0; i < collections.length; i++) {
+    collections[i].style.visibility = 'hidden';
+  }
+}
+
 export default function Filter(props) {
   const { thematicMapMode, setThematicMapMode } = props;
   return (
     <>
-      <h2>Choose thematic map:</h2>
+      <p className="title">Choose thematic map:</p>
       <div id="sections-selector">
-        <input
-          type="radio"
+        <Radio
+          label="Heat health action plans (HHAP)"
           name="country-map-section"
           value="hhap"
-          checked="checked"
-          onChange={(e) => {
-            setThematicMapMode(e.target.value);
+          checked={thematicMapMode === 'hhap'}
+          onChange={(_e, { value }) => {
+            setThematicMapMode(value);
+            hidePopup();
           }}
         />
-        Heat health action plans (HHAP)
-        <br />
-        <input
-          type="radio"
+        <Radio
+          label="Heat health warning systems (HHWS)"
           name="country-map-section"
           value="hhws"
-          onChange={(e) => {
-            setThematicMapMode(e.target.value);
+          checked={thematicMapMode === 'hhws'}
+          onChange={(_e, { value }) => {
+            setThematicMapMode(value);
           }}
         />
-        Heat health warning systems (HHWS)
       </div>
 
       {thematicMapMode === 'hhap' && (
@@ -41,7 +50,7 @@ export default function Filter(props) {
             <p className="legend-text">No HHAP</p>
           </div>
           <div className="legend-el">
-            <span className="country-national-hhap legend-box"></span>
+            <span className="country-none legend-box"></span>
             <p className="legend-text">No information</p>
           </div>
         </div>

package/src/components/manage/Blocks/CountryMapHeatIndex/Interactions.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+
+import {
+  euCountryNames,
+  setTooltipVisibility,
+  getClosestFeatureToCoordinate,
+} from '@eeacms/volto-cca-policy/helpers/country_map/countryMap';
+import { useMapContext } from '@eeacms/volto-openlayers-map/api';
+
+export const Interactions = ({
+  tooltipRef,
+  // onFeatureClick,
+  countries_metadata,
+  // baseUrl,
+  highlight,
+  setStateHighlight,
+  euCountryFeatures,
+  thematicMapMode,
+}) => {
+  const map = useMapContext().map;
+
+  React.useEffect(() => {
+    if (!map) return;
+
+    map.on('pointermove', function (evt) {
+      if (evt.dragging) {
+        return;
+      }
+
+      const feature = getClosestFeatureToCoordinate(
+        evt.coordinate,
+        euCountryFeatures.current,
+      );
+
+      highlight.current = feature && feature.get('na');
+      setStateHighlight(highlight.current);
+
+      // const domEvt = evt.originalEvent;
+      // const pixel = map.getEventPixel(evt.originalEvent);
+      // const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
+      //   return feature;
+      // });
+      // console.log('current feature', feature.get('na'));
+      // console.log('FEATURE:', feature?.get('na') || 'NA');
+      // console.log('HIGHLIGHT:', highlight?.get('na') || 'NA');
+      // if (feature && euCountryNames.includes(feature.get('na'))) {
+      //   console.log('FEATURE IS EUROPE COUNTRY');
+      // }
+      // if (feature !== highlight) {
+      //   if (highlight) {
+      //     try {
+      //       map.getTargetElement().style.cursor = '';
+      //       // overlaySource.removeFeature(highlight);
+      //     } catch {}
+      //   }
+      //   if (feature && euCountryNames.includes(feature.get('na'))) {
+      //     // overlaySource.addFeature(feature);
+      //     map.getTargetElement().style.cursor = 'pointer';
+      //     const node = tooltipRef.current;
+      //     setTooltipVisibility(node, feature.get('na'), domEvt, true);
+      //     highlight.current = feature.get('na');
+      //   }
+      // } else {
+      //   // setTooltipVisibility(tooltipRef.current, null, domEvt, false);
+      // }
+    });
+
+    map.on('click', function (evt) {
+      if (evt.dragging) {
+        return;
+      }
+      const domEvt = evt.originalEvent;
+      // const pixel = map.getEventPixel(evt.originalEvent);
+
+      const feature = getClosestFeatureToCoordinate(
+        evt.coordinate,
+        euCountryFeatures.current,
+      );
+      let countryName = feature.get('na');
+      if (
+        Object.hasOwn(countries_metadata, countryName) &&
+        thematicMapMode === 'hhws' &&
+        euCountryNames.includes(countryName) &&
+        countries_metadata[countryName].hhws === 'HWWS exists'
+      ) {
+        let metadata = countries_metadata[countryName];
+        if (metadata === undefined) {
+          return;
+        }
+        let tooltipContent = '<strong>Heat index of HHWS:</strong> ';
+        map.getTargetElement().style.cursor = 'pointer';
+        const node = tooltipRef.current;
+        let tooltipContentDiv =
+          `<div id="country-name">
+              <h3>` +
+          countryName +
+          `</h3>
+          </div><div class="tooltip-content"><span>` +
+          tooltipContent +
+          countries_metadata[countryName].heat_index_description +
+          `</span><br/><br/><span><a href="` +
+          countries_metadata[countryName].website +
+          `">HHWS website</a></span></div>`;
+        setTooltipVisibility(
+          node,
+          '<div class="country-tooltip">' + tooltipContentDiv + '</div>',
+          domEvt,
+          true,
+        );
+      } else {
+        const collections = document.getElementsByClassName('map-tooltip');
+        for (let i = 0; i < collections.length; i++) {
+          collections[i].style.visibility = 'hidden';
+        }
+      }
+
+      // if (feature) {
+      //   onFeatureClick(feature);
+      // }
+    });
+  });
+  // }, [map, tooltipRef, onFeatureClick]);
+  return null;
+};

package/src/components/manage/Blocks/CountryMapHeatIndex/View.js

@@ -1,153 +1,179 @@
-import React, { useRef, useEffect } from 'react';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { Grid } from 'semantic-ui-react';
+import React from 'react';
 import { compose } from 'redux';
 import { clientOnly } from '@eeacms/volto-cca-policy/helpers';
-import withResponsiveContainer from './../withResponsiveContainer.js';
-import { addAppURL } from '@plone/volto/helpers';
-import { getFocusCountryNames, renderCountriesBox } from './map-utils.js';
-import { getFocusCountriesFeature } from '@eeacms/volto-cca-policy/helpers/country_map/countryMap.js';
+
+import { Map, Layer, Layers, Controls } from '@eeacms/volto-openlayers-map/api';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import {
+  euCountryNames as euCountryNamesRaw,
+  tooltipStyle,
+  getImageUrl,
+  adjustEuCountryNames,
+} from '@eeacms/volto-cca-policy/helpers/country_map/countryMap';
+import { withGeoJsonData } from '@eeacms/volto-cca-policy/helpers/country_map/hocs';
+
+import withResponsiveContainer from '../withResponsiveContainer';
+import withVisibilitySensor from '../withVisibilitySensor';
+import { makeStyles } from './mapstyle';
+import { Interactions } from './Interactions';
 
 import Filter from './Filter';
+import { Grid } from 'semantic-ui-react';
+import { useCountriesMetadata } from './hooks';
+import { addAppURL } from '@plone/volto/helpers';
 
-import flags from './flags.js';
 import './styles.less';
 
-import { useCountriesMetadata } from './hooks';
+// const url =
+//   'https://raw.githubusercontent.com/eurostat/Nuts2json/master/pub/v2/2021/4326/20M/cntrg.json';
 
-const countries_metadata_url = '/en/@@countries-heat-index-json';
-
-const withCountriesData = (WrappedComponent) => {
-  function WithCountriesDataWrapped(props) {
-    let [cpath, setCpath] = React.useState();
-
-    useEffect(() => {
-      if (!cpath) {
-        import('./euro-countries-simplified.js').then((mod) => {
-          const _cpath = mod.default;
-          _cpath.features = _cpath.features.map(function (c) {
-            //console.log(c);
-            var name = c.properties.SHRT_ENGL;
-            if (!name) {
-              // console.log('No flag for', c.properties);
-              return c;
-            } else if (name === 'Czechia') {
-              name = 'Czech Republic';
-            }
-            var cname = name.replace(' ', '_');
-            flags.forEach(function (f) {
-              if (f.indexOf(cname) > -1) {
-                c.url = f;
-                //console.log(c.url);
-              }
-            });
-            return c;
-          });
-
-          setCpath(_cpath);
-        });
-      }
-    }, [cpath]);
+const View = (props) => {
+  const { geofeatures, projection } = props;
 
-    return cpath ? <WrappedComponent {...props} cpath={cpath} /> : null;
-  }
-  return WithCountriesDataWrapped;
-};
+  const highlight = React.useRef();
+  const [stateHighlight, setStateHighlight] = React.useState();
 
-const CountryMapObservatoryView = (props) => {
-  const svgRef = useRef(null);
-  const { d3, d3Geo, size, cpath } = props;
-  const { height, width } = size;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const styles = React.useMemo(() => makeStyles(highlight), [stateHighlight]);
+  const tooltipRef = React.useRef();
+  const [tileWMSSources, setTileWMSSources] = React.useState();
+  const [euCountriesSource, setEuCountriessource] = React.useState();
   const [thematicMapMode, setThematicMapMode] = React.useState('hhap');
-
+  const countries_metadata_url = '/en/@@countries-heat-index-json?langflag=1';
   const countries_metadata = useCountriesMetadata(
     addAppURL(countries_metadata_url),
   );
+  const euCountryNames = adjustEuCountryNames(euCountryNamesRaw);
+
+  const euCountryFeatures = React.useRef();
+
+  React.useEffect(() => {
+    const features = new ol.format.GeoJSON().readFeatures(geofeatures);
+    const filtered = features.filter((f) =>
+      euCountryNames.includes(f.get('na')),
+    );
+    //Update name for Bosnia and Herzegovina
+    for (let i in features) {
+      if (features[i].get('na').includes('Bosnia and Herzegovina')) {
+        features[i].set('na', 'Bosnia-Herzegovina');
+        break;
+      }
+    }
 
-  useEffect(() => {
-    // D3 Code
-
-    // Dimensions
-    //const parentDiv = document.getElementById('page-document');
-    let dimensions = {
-      //width: parentDiv.offsetWidth,
-      width,
-      height,
-      margins: 50,
-    };
-
-    dimensions.containerWidth = dimensions.width - dimensions.margins * 2;
-    dimensions.containerHeight = dimensions.height - dimensions.margins * 2;
-
-    //const d3 = loadable.lib(() => import('d3'));
-    // SELECTIONS
-    const svg = d3
-      .select(svgRef.current)
-      .attr('id', 'country_map')
-      //.classed("line-chart", true)
-      .attr('width', dimensions.width)
-      .attr('height', dimensions.height);
-    //console.log('SVG x-y', svg.getBBox());
-    /*
-    const container = svg
-      .append('g')
-      .classed('container', true)
-      .attr(
-        'transform',
-        `translate(${dimensions.margins}, ${dimensions.margins})`,
-      );
-      */
-
-    //console.log('cpath', cpath);
-    //console.log(fpath);
-    //console.log('Flags',flags);
-    //console.log('filtered', getFocusCountriesFeature(cpath));
-
-    window.countrySettings = cpath.features;
-
-    var opts = {
-      world: cpath.features,
-      countries_metadata: countries_metadata,
-      thematic_map_mode: thematicMapMode,
-      svg: svg,
-      coordinates: {
-        x: 0,
-        y: 0,
-        width: dimensions.containerWidth,
-        height: dimensions.containerHeight,
-      },
-      focusCountries: {
-        names: getFocusCountryNames(),
-        feature: getFocusCountriesFeature(cpath),
-      },
-      zoom: 0.95,
-    };
-    renderCountriesBox(opts, d3, d3Geo);
-    // Draw Circle
-    //container.append("circle").attr("r", 25).style("color","blue");
-  }, [
-    props.Data,
-    d3,
-    width,
-    height,
-    cpath,
-    d3Geo,
-    thematicMapMode,
-    countries_metadata,
-  ]); // redraw chart if data changes
+    euCountryFeatures.current = filtered;
+
+    filtered.forEach((feature) => {
+      let countryName = feature.get('na');
+      if (countryName === 'Türkiye') {
+        countryName = 'Turkey';
+      }
+      if (Object.hasOwn(countries_metadata, countryName)) {
+        let metadata = countries_metadata[countryName];
+        if (metadata !== undefined) {
+          if (thematicMapMode === 'hhap') {
+            switch (metadata.hhap) {
+              case 'National HHAP':
+                feature.set('fillColor', 'blue1');
+                break;
+              case 'Subnational or local HHAP':
+                feature.set('fillColor', 'blue2');
+                break;
+              case 'No HHAP':
+                feature.set('fillColor', 'gray1');
+                break;
+              case 'No information':
+                feature.set('fillColor', 'gray2');
+                break;
+              default:
+            }
+          } else {
+            switch (metadata.hhws) {
+              case 'HWWS exists':
+                feature.set('fillColor', 'blue1');
+                break;
+              case 'No information':
+                feature.set('fillColor', 'gray2');
+                break;
+              default:
+            }
+          }
+        }
+      }
+    });
+
+    setTileWMSSources([
+      new ol.source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          // LAYERS: 'OSMBlossomComposite', OSMCartoComposite, OSMPositronComposite
+          LAYERS: 'OSMBrightBackground',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
+
+    filtered.forEach((feature) => {
+      const img = new Image();
+      img.onload = function () {
+        feature.set('flag', img);
+      };
+      img.src = getImageUrl(feature);
+    });
+
+    const euSource = new ol.source.Vector({ features: filtered });
+    setEuCountriessource(euSource);
+  }, [geofeatures, countries_metadata, thematicMapMode, euCountryNames]);
 
   return (
     <div>
       <Grid columns="12">
         <Grid.Column mobile={9} tablet={9} computer={10} className="col-left">
-          <svg ref={svgRef} />
+          {tileWMSSources ? (
+            <Map
+              view={{
+                center: ol.proj.fromLonLat([10, 50], projection),
+                projection,
+                showFullExtent: true,
+                zoom: 4,
+              }}
+              pixelRatio={1}
+            >
+              <div
+                ref={tooltipRef}
+                style={tooltipStyle}
+                className="map-tooltip"
+              ></div>
+              <Controls attribution={false} />
+              <Layers>
+                {props.mode !== 'edit' && (
+                  <Interactions
+                    tooltipRef={tooltipRef}
+                    // onFeatureClick={onFeatureClick}
+                    countries_metadata={countries_metadata}
+                    thematicMapMode={thematicMapMode}
+                    euCountryFeatures={euCountryFeatures}
+                    highlight={highlight}
+                    setStateHighlight={setStateHighlight}
+                  />
+                )}
+                <Layer.Vector
+                  source={euCountriesSource}
+                  zIndex={7}
+                  style={styles.eucountriesStyle}
+                />
+                <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+              </Layers>
+            </Map>
+          ) : null}
         </Grid.Column>
         <Grid.Column
           mobile={3}
           tablet={3}
           computer={2}
           className="col-left"
-          id="cse-filter"
+          id="country-map-filter"
         >
           <Filter
             thematicMapMode={thematicMapMode}
@@ -160,13 +186,8 @@ const CountryMapObservatoryView = (props) => {
 };
 
 export default compose(
+  withGeoJsonData,
   clientOnly,
-  injectLazyLibs(['d3', 'd3Geo']),
   withResponsiveContainer('countryMapHeatIndex'),
-  withCountriesData,
-)(CountryMapObservatoryView);
-
-// import loadable from '@loadable/component';
-//import * as d3 from 'd3';
-// import cpath from './euro-countries-simplified';
-//
+  withVisibilitySensor(),
+)(View);