@eeacms/volto-cca-policy 0.1.16 → 0.1.17

package/.project.eslintrc.js

@@ -26,6 +26,11 @@ const addonAliases = Object.keys(reg.packages).map((o) => [
   reg.packages[o].modulePath,
 ]);
 
+const voltoSearchlibPath = path.dirname(
+  reg.packages['@eeacms/volto-searchlib'].modulePath,
+);
+const searchlibPath = path.resolve(`${voltoSearchlibPath}/searchlib`);
+
 module.exports = {
   extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
   settings: {
@@ -34,6 +39,7 @@ module.exports = {
         map: [
           ['@plone/volto', '@plone/volto/src'],
           ...addonAliases,
+          ['@eeacms/search', searchlibPath],
           ['@package', `${__dirname}/src`],
           ['~', `${__dirname}/src`],
         ],

package/CHANGELOG.md

@@ -4,6 +4,82 @@ 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.17](https://github.com/eea/volto-cca-policy/compare/0.1.16...0.1.17) - 28 April 2023
+
+#### :hammer_and_wrench: Others
+
+- Change logoTargetUrl to avoid redirect [laszlocseh - [`c4471b7`](https://github.com/eea/volto-cca-policy/commit/c4471b774952295b32892db147f3b969e5987fb4)]
+- Add eslint extenders [Tiberiu Ichim - [`1d5bdf0`](https://github.com/eea/volto-cca-policy/commit/1d5bdf09c1e15b5a4af62fe0d2c6ac9244b9a2e1)]
+- Code cleanup [Tiberiu Ichim - [`fab4585`](https://github.com/eea/volto-cca-policy/commit/fab4585335c1478b2e9dde916d893139b2dbbadc)]
+- Add facets [Tiberiu Ichim - [`f4c6f81`](https://github.com/eea/volto-cca-policy/commit/f4c6f8135666594ad8a2598e09688688a5f0589a)]
+- Loads [Tiberiu Ichim - [`e2eb38c`](https://github.com/eea/volto-cca-policy/commit/e2eb38ca93f0a71a95fd9c6fab4de9dffef40af5)]
+- WIP [Tiberiu Ichim - [`7bd6907`](https://github.com/eea/volto-cca-policy/commit/7bd6907c3cd9f96899f054024f5017e82d9e98ac)]
+- WIP [Tiberiu Ichim - [`bd91e7e`](https://github.com/eea/volto-cca-policy/commit/bd91e7e68cf371019513084373ade188fa66614f)]
+- WIP Filter ace content block [kreafox - [`4963075`](https://github.com/eea/volto-cca-policy/commit/4963075abbe5b24892e5d052ee8f4b102950f329)]
+- Add dependency on globalsearch [Tiberiu Ichim - [`eb517b3`](https://github.com/eea/volto-cca-policy/commit/eb517b38656a2ea18f89c2efb1cc4b6aa1dec882)]
+- Fix vocabulary [kreafox - [`c8f614a`](https://github.com/eea/volto-cca-policy/commit/c8f614a4532b4a6d78a533d3ad0fd20d4887c8f3)]
+- Update schema [kreafox - [`dd337ef`](https://github.com/eea/volto-cca-policy/commit/dd337eff91b50d1992c88a7dea755e64dbb65745)]
+- Update sort options [kreafox - [`b3a9804`](https://github.com/eea/volto-cca-policy/commit/b3a98044c660a96b9c32c26d4a6304f9ad1774e1)]
+- Style lint [Tiberiu Ichim - [`8363105`](https://github.com/eea/volto-cca-policy/commit/8363105289184afb076e75587a27969077abb539)]
+- Animate fit [Tiberiu Ichim - [`b7f073f`](https://github.com/eea/volto-cca-policy/commit/b7f073f330a39ef662c25688d067206999141a7d)]
+- Add combine results [kreafox - [`eeafeda`](https://github.com/eea/volto-cca-policy/commit/eeafedabeb8f4af1cba68595008faf5648928a67)]
+- Fix padding of extent [Tiberiu Ichim - [`796d05a`](https://github.com/eea/volto-cca-policy/commit/796d05aa473fc7b1b0afd8bc29396e26e99d8392)]
+- Fixes to map [Tiberiu Ichim - [`f1ce4c4`](https://github.com/eea/volto-cca-policy/commit/f1ce4c4bf9ce8b6bb87cb7ae94bd0c82a616f8a0)]
+- List items in relevant acecontent block [kreafox - [`d6fade5`](https://github.com/eea/volto-cca-policy/commit/d6fade5bcc90da105b8e0b306a317790f4d75599)]
+- Fixes to map [Tiberiu Ichim - [`4e31cfe`](https://github.com/eea/volto-cca-policy/commit/4e31cfe6eec5a23b0deeb3226838abf116048878)]
+- Fixes to map [Tiberiu Ichim - [`b8fb736`](https://github.com/eea/volto-cca-policy/commit/b8fb7360ddc6480cdabe789050f17135e447fda7)]
+- cem css [Tripon Eugen - [`3c5f36d`](https://github.com/eea/volto-cca-policy/commit/3c5f36dd6f885c5fe98ad75875619c9df2c55cc2)]
+- Refs #251121 - wip [Tripon Eugen - [`512301d`](https://github.com/eea/volto-cca-policy/commit/512301d9ce9f478fa80c0c726ea47e5bb3b81f1d)]
+- CaseStudyExplorer View [Tripon Eugen - [`6556e5d`](https://github.com/eea/volto-cca-policy/commit/6556e5df21515e37665c1d5240623d87299d1a42)]
+- Relevant acecontent: add option of adding source [kreafox - [`6d2da45`](https://github.com/eea/volto-cca-policy/commit/6d2da45d8e9e07308720555cfe5dafcc3caaa353)]
+- WIP relevant acecontent [kreafox - [`aade13c`](https://github.com/eea/volto-cca-policy/commit/aade13cc0ff1c865b598f9e77fe81f0eb5d28207)]
+- Simplify [kreafox - [`2f66df8`](https://github.com/eea/volto-cca-policy/commit/2f66df8cf6e9b69e8ca53c3184006a595b6c4eb9)]
+- Add share info button [kreafox - [`014891e`](https://github.com/eea/volto-cca-policy/commit/014891ec2ca3ef1b555e43febdeda05b79b941dd)]
+- Add view for SearchAceContent [kreafox - [`2702109`](https://github.com/eea/volto-cca-policy/commit/27021098e9ec344903460482be29b05c9880b560)]
+- WIP SearchAceContent block [kreafox - [`f54fac0`](https://github.com/eea/volto-cca-policy/commit/f54fac05d910a86c23f7e72e6de5982408192d00)]
+- Add new block [Tiberiu Ichim - [`6193c7e`](https://github.com/eea/volto-cca-policy/commit/6193c7ea6721389ae9f182f5654f6ab0e5c6c5cb)]
+- Refs #161509 - GeolocationWidget: improve form. [GhitaB - [`0e8ea37`](https://github.com/eea/volto-cca-policy/commit/0e8ea3756d8b60b4f48292407c57fc2179d89f5f)]
+- Refs #161509 - GeolocationWidget: improve form. [GhitaB - [`dd72546`](https://github.com/eea/volto-cca-policy/commit/dd72546622c71c09bc1c151cc57b45fcb5bdb651)]
+- Refs #161509 - GeolocationWidget: improve form. [GhitaB - [`e74ef5f`](https://github.com/eea/volto-cca-policy/commit/e74ef5f1f0a31f0f466661045139b09e6e503899)]
+- Refs #161509 - GeolocationWidget: get rid of states. [GhitaB - [`667d35f`](https://github.com/eea/volto-cca-policy/commit/667d35f85cfe5812bb1994a92e760492e6144246)]
+- Refs #161509 - GeolocationWidget: search address, update coordinates, recenter map. [GhitaB - [`b2eddfa`](https://github.com/eea/volto-cca-policy/commit/b2eddfa075416650ac9c45f6322ebb1691f95c04)]
+- Refs #161509 - GeolocationWidget: recenter map on coordinates change. [GhitaB - [`63ed0b8`](https://github.com/eea/volto-cca-policy/commit/63ed0b8c23995109fc283c4ae71ae8247cb77d10)]
+- Refs #161509 - GeolocationWidget: load map using longitude, latitude. Set zoom. [GhitaB - [`710198a`](https://github.com/eea/volto-cca-policy/commit/710198a6871685abdcb583e25827f8aa56ca4d2c)]
+- Refs #161509 - Add GeolocationWidget (WIP). [GhitaB - [`5aadc67`](https://github.com/eea/volto-cca-policy/commit/5aadc678b02b9ee6b913b661082309ab5c334500)]
+- Refs #161509 - Add GeolocationWidget (WIP). [GhitaB - [`fb3fafb`](https://github.com/eea/volto-cca-policy/commit/fb3fafb69c78e0587aeeb194335f8a540bbd0cd2)]
+- Refs #161509 - GeocharsWidget: add description for subnational regions. [GhitaB - [`639619e`](https://github.com/eea/volto-cca-policy/commit/639619eeb94db1f4ac8ee93cc67aea417cc209f3)]
+- Refs #161509 - GeocharsWidget: hide textarea (containing JSON value). [GhitaB - [`dd9f834`](https://github.com/eea/volto-cca-policy/commit/dd9f83494b97192c1cf4872aeff2263f8f3923ad)]
+- Refs #161509 - GeocharsWidget: keep selected regions visible until unselected, when countries section is changed. [GhitaB - [`e183218`](https://github.com/eea/volto-cca-policy/commit/e1832187efce45be532f96b5aa2eec5d80640036)]
+- Refs #161509 - GeocharsWidget: show subregions only for checked countries. [GhitaB - [`4c74b88`](https://github.com/eea/volto-cca-policy/commit/4c74b8875a7488eea2ddc524f66294caf2f0414e)]
+- Refs #161509 - GeocharsWidget: clear other fields when selecting Global, but keep a copy of values in case option is changed again before saving. [GhitaB - [`c7d1469`](https://github.com/eea/volto-cca-policy/commit/c7d1469462dd4dda591313037b9a35c9e6baaddd)]
+- Refs #161509 - GeocharsWidget: simplify code - use component for element. [GhitaB - [`495a400`](https://github.com/eea/volto-cca-policy/commit/495a40000e6c4d6f0d9e745cb125c739b3b7bc67)]
+- Refs #161509 - GeocharsWidget: simplify code - use component for macro regions. [GhitaB - [`9921a07`](https://github.com/eea/volto-cca-policy/commit/9921a07910a875766c2c69b7b6e08c4a44c55e48)]
+- Refs #161509 - GeocharsWidget: simplify code - use component for bioregions. [GhitaB - [`4bff217`](https://github.com/eea/volto-cca-policy/commit/4bff217454ef4bd5e714b0e425c9957b02c7d29f)]
+- Refs #161509 - GeocharsWidget: simplify code - use component for countries. [GhitaB - [`f4ab32b`](https://github.com/eea/volto-cca-policy/commit/f4ab32b03b22e44d6b39846bc5e3538204b25222)]
+- Refs #161509 - GeocharsWidget: simplify code - use component for subnational regions. [GhitaB - [`fa8ae29`](https://github.com/eea/volto-cca-policy/commit/fa8ae291569322a7310c0571b1cd84735b07288a)]
+- Refs #161509 - GeocharsWidget: simplify code - use component for city. [GhitaB - [`63a7db2`](https://github.com/eea/volto-cca-policy/commit/63a7db278e7ad3daf89dc2ad30980a2c58e44d94)]
+- Refs #161509 - GeocharsWidget: simplify code - shorter var name. [GhitaB - [`8f71c44`](https://github.com/eea/volto-cca-policy/commit/8f71c44244c207b85fd620031ada70d053f51b30)]
+- Refs #161509 - GeocharsWidget: simplify code - move consts. [GhitaB - [`83c82a0`](https://github.com/eea/volto-cca-policy/commit/83c82a0db139d4b6c578a203a5a7dda5abc3cbb2)]
+- Refs #161509 - GeocharsWidget: select city. [GhitaB - [`6854102`](https://github.com/eea/volto-cca-policy/commit/685410285e09b5fd4313695fe8144497a429b397)]
+- Refs #161509 - GeocharsWidget: select subnational regions - fix bug. [GhitaB - [`5557254`](https://github.com/eea/volto-cca-policy/commit/55572547bfae8e492a149a601beaaa2a8e93e509)]
+- Refs #161509 - GeocharsWidget: select subnational regions. [GhitaB - [`d831604`](https://github.com/eea/volto-cca-policy/commit/d8316041945a27d1c1bd0aff656bfd7b2d3d5f18)]
+- Refs #161509 - GeocharsWidget: select bio regions. [GhitaB - [`37ffd7b`](https://github.com/eea/volto-cca-policy/commit/37ffd7b0fde421e9349e26a649010fdce8ccd343)]
+- Refs #161509 - GeocharsWidget: select macro transnational regions. [GhitaB - [`fcd0507`](https://github.com/eea/volto-cca-policy/commit/fcd050722864f3e9878eee4cc97140dc470f8b53)]
+- Refs #161509 - GeocharsWidget: show only EU countries. [GhitaB - [`5e835dd`](https://github.com/eea/volto-cca-policy/commit/5e835ddf0626fda0d381d998f86083d9d83ce508)]
+- Refs #161509 - GeocharsWidget: fix bug in countries selection, update textarea on changes. [GhitaB - [`4a125df`](https://github.com/eea/volto-cca-policy/commit/4a125dfe326ef8c876f7dc06f4286e438b73a632)]
+- Refs #161509 - GeocharsWidget: add styles. [GhitaB - [`c958cbf`](https://github.com/eea/volto-cca-policy/commit/c958cbfbd3ca0160cf5ea7aaaaac32b37e06c77b)]
+- Refs #161509 - GeocharsWidget: add styles. [GhitaB - [`51a447d`](https://github.com/eea/volto-cca-policy/commit/51a447d68266b2ff97b58e126ef33b706f36a509)]
+- Refs #161509 - GeocharsWidget: update countries on change. [GhitaB - [`6487bdc`](https://github.com/eea/volto-cca-policy/commit/6487bdc3ff73af2395f4820d3d586f2ddeeec76c)]
+- Refs #161509 - GeocharsWidget: update Global/Europe value on change. [GhitaB - [`1f16c14`](https://github.com/eea/volto-cca-policy/commit/1f16c142f9e1eab00e173bf3268f23eda2d49b5d)]
+- Refs #161509 - GeocharsWidget: hide/show fields for each Global/Europe case. [GhitaB - [`503129e`](https://github.com/eea/volto-cca-policy/commit/503129e5aaec02305e3765b23587bc3471a00ec1)]
+- Refs #161509 - GeocharsWidget: hide/show fields for each Global/Europe case. [GhitaB - [`50f7ac9`](https://github.com/eea/volto-cca-policy/commit/50f7ac9b651e40b610a64e4242acdc1c58d52964)]
+- Refs #161509 - GeocharsWidget: add spacing. [GhitaB - [`2c9a1db`](https://github.com/eea/volto-cca-policy/commit/2c9a1dbef2a56815fd90134b2ce11bb6ef00f612)]
+- Refs #161509 - GeocharsWidget: city. [GhitaB - [`a37c9f6`](https://github.com/eea/volto-cca-policy/commit/a37c9f6b90858385ec6863684f68cc09890843b3)]
+- Refs #161509 - GeocharsWidget: subnational regions. [GhitaB - [`e05e004`](https://github.com/eea/volto-cca-policy/commit/e05e00499853fa0692652264074a0c09fc46a0d1)]
+- Refs #161509 - GeocharsWidget: biogeographical regions. [GhitaB - [`4cc4695`](https://github.com/eea/volto-cca-policy/commit/4cc4695d71a93998c991112544113f7d9a1a3971)]
+- Refs #161509 - GeocharsWidget: macro transnational regions. [GhitaB - [`afe36eb`](https://github.com/eea/volto-cca-policy/commit/afe36ebd8b65aed650ad23a2d1bb6a71b5589f02)]
+- Refs #161509 - GeocharsWidget: countries. [GhitaB - [`5662531`](https://github.com/eea/volto-cca-policy/commit/56625317f6cc02840d73b06050e87befed2fe10c)]
+- Refs #161509 - Add GeocharsWidget to be used for geochars field (WIP). [GhitaB - [`85bcb7b`](https://github.com/eea/volto-cca-policy/commit/85bcb7b0f676e8e447e84954ec9018415d30145c)]
 ### [0.1.16](https://github.com/eea/volto-cca-policy/compare/0.1.15...0.1.16) - 29 March 2023
 
 #### :hammer_and_wrench: Others

package/eslint.extend.js

@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = {
+  modify(defaultConfig) {
+    const aliasMap = defaultConfig.settings['import/resolver'].alias.map;
+    const addonPath = aliasMap.find(
+      ([name]) => name === '@eeacms/volto-searchlib',
+    )[1];
+
+    const searchlibPath = path.resolve(`${addonPath}/../searchlib`);
+    aliasMap.push(['@eeacms/search', searchlibPath]);
+
+    return defaultConfig;
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -18,10 +18,12 @@
   },
   "addons": [
     "@eeacms/volto-openlayers-map",
-    "@eeacms/volto-eea-design-system"
+    "@eeacms/volto-eea-design-system",
+    "@eeacms/volto-globalsearch"
   ],
   "dependencies": {
     "@eeacms/volto-eea-design-system": "*",
+    "@eeacms/volto-globalsearch": "*",
     "@eeacms/volto-openlayers-map": "*"
   },
   "devDependencies": {

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyExplorerView.js

@@ -1,109 +1,89 @@
 import React from 'react';
-import superagent from 'superagent';
-import { addAppURL } from '@plone/volto/helpers';
 import { Grid } from 'semantic-ui-react'; // Dropdown,
-import { getVocabulary } from '@plone/volto/actions'; // , searchContent
-//import ECDEIndicator from './ECDEIndicator';
-import { useDispatch } from 'react-redux'; // , useSelector
-
-// const cases_url =
-//   'http://localhost:3000/en/mkh/case-studies-map-arcgis.json/@@download/file';
-const cases_url = '@@case-studies-map.arcgis.json';
-const IPCC = 'eea.climateadapt.aceitems_ipcc_category';
+import { addAppURL } from '@plone/volto/helpers';
 
-function useCases(url) {
-  const [cases, setCases] = React.useState([]);
+import CaseStudyMap from './CaseStudyMap';
+import CaseStudyFilters from './CaseStudyFilters';
 
-  React.useEffect(() => {
-    superagent
-      .get(cases_url)
-      .set('accept', 'json')
-      .then((resp) => {
-        const res = JSON.parse(resp.text);
-        setCases(res.features);
-      });
-  }, []);
+import { filterCases, getFilters } from './utils';
+import { useCases } from './hooks';
 
-  return cases;
-}
+import './styles.less';
 
-// function useFilters() {
-//   const [filters, setFilters] = React.useState([]);
-// }
+const cases_url = '@@case-studies-map.arcgis.json';
 
 export default function CaseStudyExplorerView(props) {
-  // console.log(regions);
   const cases = useCases(addAppURL(cases_url));
 
-  //const filters = useFilters();
+  const [activeFilters, setActiveFilters] = React.useState({
+    sectors: [],
+    impacts: [],
+  });
+
+  const [activeItems, setActiveItems] = React.useState(cases);
   const [filters, setFilters] = React.useState([]);
-  const dispatch = useDispatch();
-  // const ipcc_categories = useSelector(
-  //   (state) => state.vocabularies?.[IPCC]?.items,
-  // );
 
   React.useEffect(() => {
-    const action = getVocabulary({
-      vocabNameOrURL: IPCC,
-    });
-    dispatch(action);
-  }, [dispatch]);
+    const _filters = getFilters(cases);
+    setFilters(_filters);
+  }, [cases, activeFilters.impacts, activeFilters.sectors, activeItems.length]);
 
   React.useEffect(() => {
-    let _filters = { sectors: {}, impacts: {} };
+    const activeItems = filterCases(cases, activeFilters);
+    setActiveItems(activeItems);
+  }, [activeFilters, cases]);
 
-    // console.log('acis', typeof cases, cases[0], cases);
-    // console.log(Object.keys(cases));
-    for (var key of Object.keys(cases)) {
-      // console.log(key, cases[key]);
-      var _case = cases[key];
-      let sectorKeys = _case.properties.sectors.split(',');
-      let sectorNames = _case.properties.sectors_str.split(',');
-      for (var i = 0; i < sectorNames.length; i++) {
-        if (!_filters.sectors.hasOwnProperty(sectorKeys[i + 1])) {
-          _filters.sectors[sectorKeys[i + 1]] = sectorNames[i];
-        }
-      }
-      let impactKeys = _case.properties.impacts.split(',');
-      let impactNames = _case.properties.impacts_str.split(',');
-      for (i = 0; i < impactNames.length; i++) {
-        if (!_filters.impacts.hasOwnProperty(impactKeys[i + 1])) {
-          _filters.impacts[impactKeys[i + 1]] = impactNames[i];
-        }
-      }
-    }
-    setFilters(_filters);
-  }, [cases]);
-
-  // const [activeFilters, setActiveFilters] = React.useState({});
-  //
-  // console.log({ ipcc_categories, filters });
+  if (__SERVER__) return '';
 
   return (
     <div>
       <Grid columns="12">
-        <Grid.Column mobile={12} tablet={12} computer={10} className="col-left">
-          MAP HERE
+        <Grid.Column mobile={9} tablet={9} computer={10} className="col-left">
+          {cases.length ? (
+            <CaseStudyMap items={cases} activeItems={activeItems} />
+          ) : null}
         </Grid.Column>
-        <Grid.Column mobile={12} tablet={12} computer={2} className="col-left">
-          {Object.entries(filters?.sectors || {}).map(
-            ([value, label], index) => (
-              <div key={index}>
-                <input
-                  value={value}
-                  type="checkbox"
-                  onChange={(e) => {
-                    // const value =
-                    // console.log(e.target.checked);
-                    // setActiveFilters({...activeFilters, sector: [...activeFilters
-                  }}
-                />
-                <span>{label}</span>
-              </div>
-            ),
-          )}
+        <Grid.Column
+          mobile={3}
+          tablet={3}
+          computer={2}
+          className="col-left"
+          id="cse-filter"
+        >
+          <CaseStudyFilters
+            filters={filters}
+            activeFilters={activeFilters}
+            setActiveFilters={setActiveFilters}
+          />
         </Grid.Column>
       </Grid>
     </div>
   );
 }
+
+// import { useDispatch } from 'react-redux'; // , useSelector
+// import { getVocabulary } from '@plone/volto/actions'; // , searchContent
+// const IPCC = 'eea.climateadapt.aceitems_ipcc_category';
+// const dispatch = useDispatch();
+// React.useEffect(() => {
+//   const action = getVocabulary({
+//     vocabNameOrURL: IPCC,
+//   });
+//   dispatch(action);
+// }, [dispatch]);
+// setMapKey(
+//   activeItems.length +
+//     '-' +
+//     activeFilters.sectors +
+//     '-' +
+//     activeFilters.impacts,
+// );
+//console.log('activeFilters filter cases', data);
+// setMapKey(
+//   activeItems.length +
+//     '-' +
+//     activeFilters.sectors +
+//     '-' +
+//     activeFilters.impacts,
+// );
+// const [mapKey, setMapKey] = React.useState('-');

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyFilters.jsx

@@ -0,0 +1,53 @@
+export default function CaseStudyFilters(props) {
+  const { filters, activeFilters, setActiveFilters } = props;
+  return (
+    <>
+      <h4>Adaptation sectors</h4>
+      {Object.entries(filters?.sectors || {}).map(([value, label], index) => (
+        <p key={index}>
+          <span>{label}</span>
+          <input
+            value={value}
+            type="checkbox"
+            onChange={(e) => {
+              // const value =
+              const temp = JSON.parse(JSON.stringify(activeFilters));
+              if (e.target.checked) {
+                temp.sectors.push(e.target.value);
+              } else {
+                temp.sectors = temp.sectors.filter((value) => {
+                  if (value !== e.target.value) return value;
+                  return null;
+                });
+              }
+              setActiveFilters(temp);
+            }}
+          />
+        </p>
+      ))}
+      <h4>Climate impacts</h4>
+      {Object.entries(filters?.impacts || {}).map(([value, label], index) => (
+        <p key={index}>
+          <span>{label}</span>
+          <input
+            value={value}
+            type="checkbox"
+            onChange={(e) => {
+              // const value =
+              const temp = JSON.parse(JSON.stringify(activeFilters));
+              if (e.target.checked) {
+                temp.impacts.push(e.target.value);
+              } else {
+                temp.impacts = temp.impacts.filter((value) => {
+                  if (value !== e.target.value) return value;
+                  return null;
+                });
+              }
+              setActiveFilters(temp);
+            }}
+          />
+        </p>
+      ))}
+    </>
+  );
+}

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyMap.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+
+import { Map, Layer, Layers } from '@eeacms/volto-openlayers-map/api';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+
+import InfoOverlay from './InfoOverlay';
+import FeatureInteraction from './FeatureInteraction';
+
+import { getFeatures } from './utils';
+
+const styleCache = {};
+
+export default function CaseStudyMap(props) {
+  const { items, activeItems } = props;
+  const [selectedCase, onSelectedCase] = React.useState();
+
+  const features = getFeatures(items); //console.log('Features list', features);
+
+  const [tileWMSSources, setTileWMSSources] = React.useState([]);
+  const [pointsSource] = React.useState(
+    new ol.source.Vector({
+      features,
+    }),
+  );
+
+  const [clusterSource] = React.useState(
+    new ol.source.Cluster({
+      distance: 50,
+      source: pointsSource,
+    }),
+  );
+
+  React.useEffect(() => {
+    if (activeItems) {
+      pointsSource.clear();
+      pointsSource.addFeatures(getFeatures(activeItems));
+    }
+  }, [activeItems, pointsSource]);
+
+  React.useEffect(() => {
+    setTileWMSSources([
+      new ol.source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMBlossomComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
+  }, []);
+
+  return features.length > 0 ? (
+    <Map
+      view={{
+        center: ol.proj.fromLonLat([20, 50]),
+        showFullExtent: true,
+        zoom: 4,
+      }}
+      pixelRatio={1}
+      controls={ol.control.defaults({ attribution: false })}
+    >
+      <Layers>
+        <InfoOverlay
+          selectedFeature={selectedCase}
+          onFeatureSelect={onSelectedCase}
+          layerId={tileWMSSources?.[0]}
+        />
+        <FeatureInteraction onFeatureSelect={onSelectedCase} />
+        <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+        <Layer.Vector style={clusterStyle} source={clusterSource} zIndex={1} />
+      </Layers>
+    </Map>
+  ) : null;
+}
+
+function clusterStyle(feature) {
+  const size = feature.get('features').length;
+  //const size = feature.get('casePoints').length;
+  let style = styleCache[size];
+
+  if (!style) {
+    style = new ol.style.Style({
+      image: new ol.style.Circle({
+        radius: 10 + Math.min(Math.floor(size / 3), 10),
+        stroke: new ol.style.Stroke({
+          color: '#fff',
+        }),
+        fill: new ol.style.Fill({
+          color: '#3399CC',
+        }),
+      }),
+      text: new ol.style.Text({
+        text: size.toString(),
+        fill: new ol.style.Fill({
+          color: '#fff',
+        }),
+      }),
+    });
+    styleCache[size] = style;
+  }
+
+  return size === 1
+    ? new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 5,
+          stroke: new ol.style.Stroke({
+            color: '#fff',
+          }),
+          fill: new ol.style.Fill({
+            color: '#000000',
+          }),
+        }),
+      })
+    : style;
+}

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureDisplay.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+export default function FeatureDisplay({ feature }) {
+  return feature ? (
+    <div id="csepopup">
+      <strong>{feature.title}</strong>
+      <span className="img">
+        <center>
+          <img src={feature.image} alt={feature.title} />
+        </center>
+      </span>
+      <p>
+        <p style={{ marginBottom: '10px' }}>
+          <span className="blue">Adaptation sectors: </span>
+          <span>{feature.adaptations}</span>
+        </p>
+        <p style={{ marginBottom: '10px' }}>
+          <span className="blue">Climate impacts: </span>
+          <span>{feature.impacts}</span>
+        </p>
+        <span className="blue">Adaptation options: </span>
+        <span
+          dangerouslySetInnerHTML={{
+            __html: feature.adaptation_options_links.replace('<>', '; '),
+          }}
+        ></span>
+      </p>
+    </div>
+  ) : null;
+}

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureInteraction.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import { useMapContext } from '@eeacms/volto-openlayers-map/api';
+
+const useStyles = () => {
+  const selected = React.useMemo(
+    () =>
+      new ol.style.Style({
+        fill: new ol.style.Fill({
+          color: '#cccccc',
+        }),
+        stroke: new ol.style.Stroke({
+          color: 'rgba(255, 0, 0, 0.7)',
+          width: 2,
+        }),
+      }),
+    [],
+  );
+
+  const selectStyle = React.useCallback(
+    (feature) => {
+      const color = feature.get('COLOR') || '#eeeeee';
+      selected.getFill().setColor(color);
+      return selected;
+    },
+    [selected],
+  );
+
+  return { selected, selectStyle };
+};
+
+function getExtentOfFeatures(features) {
+  const points = features.map((f) => f.getGeometry().flatCoordinates);
+  const point = new ol.geom.MultiPoint(points);
+  return point.getExtent();
+}
+
+export default function FeatureInteraction({ onFeatureSelect }) {
+  const { map } = useMapContext();
+  const { selectStyle } = useStyles();
+
+  React.useEffect(() => {
+    if (!map) return;
+
+    const select = new ol.interaction.Select({
+      condition: ol.condition.click,
+      style: selectStyle,
+    });
+
+    select.on('select', function (e) {
+      const features = e.target.getFeatures().getArray();
+
+      features.forEach((feature) => {
+        const subfeatures = feature.values_.features;
+        if (subfeatures.length === 1) {
+          const selectedFeature = subfeatures[0].values_;
+          onFeatureSelect(selectedFeature);
+        } else {
+          const extent = getExtentOfFeatures(subfeatures);
+          const paddedExtent = ol.extent.buffer(extent, 50000);
+          map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
+        }
+      });
+
+      return null;
+    });
+
+    map.addInteraction(select);
+
+    map.on('pointermove', (e) => {
+      const pixel = map.getEventPixel(e.originalEvent);
+      const hit = map.hasFeatureAtPixel(pixel);
+      map.getViewport().style.cursor = hit ? 'pointer' : '';
+    });
+
+    return () => map.removeInteraction(select);
+  }, [map, selectStyle, onFeatureSelect]);
+
+  return null;
+}