@eeacms/volto-marine-policy 2.0.24 → 2.0.26

package/CHANGELOG.md

@@ -4,6 +4,29 @@ 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).
 
+### [2.0.26](https://github.com/eea/volto-marine-policy/compare/2.0.25...2.0.26) - 29 August 2025
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-searchlib@2.1.10 [EEA Jenkins - [`17445e9`](https://github.com/eea/volto-marine-policy/commit/17445e91fa8ff3c66ebabdbc6f3e474f643f6d03)]
+
+#### :hammer_and_wrench: Others
+
+- Demo Sites Explorer show indicators link in popup [laszlocseh - [`5214931`](https://github.com/eea/volto-marine-policy/commit/52149317e361ce8bd9b4e0adc9c17ec61b35ecc1)]
+- Fix map popup [narcis2005 - [`dd99fd7`](https://github.com/eea/volto-marine-policy/commit/dd99fd7b3ff6327730690b6a5da262905e626593)]
+- lint ignore line [Claudia Ifrim - [`5de8369`](https://github.com/eea/volto-marine-policy/commit/5de8369f3470ef3bb592fc851a44c90489771f84)]
+- ol fix [Claudia Ifrim - [`8eacd1f`](https://github.com/eea/volto-marine-policy/commit/8eacd1f3121e593d645eaaa0e1b22fc84fe73ced)]
+### [2.0.25](https://github.com/eea/volto-marine-policy/compare/2.0.24...2.0.25) - 27 August 2025
+
+#### :hammer_and_wrench: Others
+
+- pin volto-openlayers-map to 1.0.0 [Nilesh - [`49c4af6`](https://github.com/eea/volto-marine-policy/commit/49c4af6c0edd7473d753a193f8c98c1789818e0f)]
+- fix volto-openlayers-map module resolving [nileshgulia1 - [`c27cfa7`](https://github.com/eea/volto-marine-policy/commit/c27cfa7a067b7c42fdc85a3b847001cd8e3db088)]
+- eslint [nileshgulia1 - [`2c5300e`](https://github.com/eea/volto-marine-policy/commit/2c5300eba990cc4a3d4c3e87d69faa00d93e756c)]
+- eslint . [nileshgulia1 - [`87664a3`](https://github.com/eea/volto-marine-policy/commit/87664a3f5252c4f41ca1a1b069fc3073627e2dcc)]
+- fix imports [nileshgulia1 - [`9baee98`](https://github.com/eea/volto-marine-policy/commit/9baee9884012a41db83c178f3e3e1058ff6ae4ee)]
+- update [nileshgulia1 - [`0d4694c`](https://github.com/eea/volto-marine-policy/commit/0d4694cc75d8c37e1d49fe4808b21e5de9dae9d3)]
+- update open layers map config in simple data block refs#288034 [nileshgulia1 - [`cc14bb7`](https://github.com/eea/volto-marine-policy/commit/cc14bb7e178d111dc0e560d97c83b1f503b607bf)]
 ### [2.0.24](https://github.com/eea/volto-marine-policy/compare/2.0.23...2.0.24) - 27 August 2025
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "2.0.24",
+  "version": "2.0.26",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -40,7 +40,7 @@
     "@eeacms/volto-globalsearch": "2.1.2",
     "@eeacms/volto-metadata-block": "*",
     "@eeacms/volto-openlayers-map": "1.0.1",
-    "@eeacms/volto-searchlib": "2.1.8",
+    "@eeacms/volto-searchlib": "2.1.10",
     "@eeacms/volto-tabs-block": "*",
     "@eeacms/volto-workflow-progress": "*",
     "@plone-collective/volto-authomatic": "2.0.1",

package/src/components/Blocks/DemoSitesExplorer/DemoSitesFilters.jsx

@@ -326,7 +326,7 @@ export function ActiveFilters(props) {
               {activeFilters.objective_filter.map((filterCode) => {
                 const filterLabel = filters.objective_filter[filterCode];
                 return (
-                  <div className="ui basic label filter-value">
+                  <div key={filterCode} className="ui basic label filter-value">
                     <span>{filterLabel}</span>
                     <i
                       tabIndex="0"
@@ -352,7 +352,7 @@ export function ActiveFilters(props) {
               {activeFilters.target_filter.map((filterCode) => {
                 const filterLabel = filters.target_filter[filterCode];
                 return (
-                  <div className="ui basic label filter-value">
+                  <div key={filterCode} className="ui basic label filter-value">
                     <span>{filterLabel}</span>
                     <i
                       tabIndex="0"
@@ -377,7 +377,7 @@ export function ActiveFilters(props) {
               {activeFilters.indicator_filter.map((filterCode) => {
                 const filterLabel = filters.indicator_filter[filterCode];
                 return (
-                  <div className="ui basic label filter-value">
+                  <div key={filterCode} className="ui basic label filter-value">
                     <span>{filterLabel}</span>
                     <i
                       tabIndex="0"
@@ -402,7 +402,7 @@ export function ActiveFilters(props) {
               {activeFilters.project_filter.map((filterCode) => {
                 const filterLabel = filters.project_filter[filterCode];
                 return (
-                  <div className="ui basic label filter-value">
+                  <div key={filterCode} className="ui basic label filter-value">
                     <span>{filterLabel}</span>
                     <i
                       tabIndex="0"
@@ -427,7 +427,7 @@ export function ActiveFilters(props) {
               {activeFilters.country_filter.map((filterCode) => {
                 const filterLabel = filters.country_filter[filterCode];
                 return (
-                  <div className="ui basic label filter-value">
+                  <div key={filterCode} className="ui basic label filter-value">
                     <span>{filterLabel}</span>
                     <i
                       tabIndex="0"

package/src/components/Blocks/DemoSitesExplorer/DemoSitesListing.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { centerAndResetMapZoom, isValidURL } from './utils';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 
 const showPageNr = (pageNr, currentPage, numberOfPages) => {
   // show first 5 pages
@@ -24,8 +25,8 @@ const showPageNr = (pageNr, currentPage, numberOfPages) => {
   return false;
 };
 
-export default function DemoSitesList(props) {
-  const { selectedCase, onSelectedCase, pointsSource, map } = props;
+function DemoSitesList(props) {
+  const { selectedCase, onSelectedCase, pointsSource, map, ol } = props;
   // const reSearch = new RegExp(`\\b(${searchInput})\\b`, 'gi');
   const [currentPage, setCurrentPage] = React.useState(1);
 
@@ -155,7 +156,7 @@ export default function DemoSitesList(props) {
                         // scrollToElement('search-input');
                         // reset map zoom
                         onSelectedCase(null);
-                        centerAndResetMapZoom(map);
+                        centerAndResetMapZoom({ map, ol });
                         map.getInteractions().array_[9].getFeatures().clear();
                       }}
                     >
@@ -376,3 +377,5 @@ export default function DemoSitesList(props) {
     </>
   );
 }
+
+export default withOpenLayers(DemoSitesList);

package/src/components/Blocks/DemoSitesExplorer/DemoSitesMap.jsx

@@ -2,12 +2,17 @@ import React from 'react';
 
 import cx from 'classnames';
 
-import { Map, Layer, Layers, Controls } from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import {
+  Map,
+  Layer,
+  Layers,
+  Controls,
+  useMapContext,
+} from '@eeacms/volto-openlayers-map/api';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 
 import InfoOverlay from './InfoOverlay';
 import FeatureInteraction from './FeatureInteraction';
-import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 
 import {
   centerAndResetMapZoom,
@@ -25,7 +30,7 @@ const MapContextGateway = ({ setMap }) => {
   return null;
 };
 
-export default function DemoSitesMap(props) {
+function DemoSitesMap(props) {
   const {
     items,
     activeItems,
@@ -37,8 +42,9 @@ export default function DemoSitesMap(props) {
     setMap,
     highlightedIndex,
     setHighlightedIndex,
+    ol,
   } = props;
-  const features = getFeatures(items);
+  const features = getFeatures({ cases: items, ol });
   const [resetMapButtonClass, setResetMapButtonClass] =
     React.useState('inactive');
 
@@ -72,11 +78,11 @@ export default function DemoSitesMap(props) {
 
     if (activeItems) {
       pointsSource.clear();
-      pointsSource.addFeatures(getFeatures(activeItems));
+      pointsSource.addFeatures(getFeatures({ cases: activeItems, ol }));
       // hideFilters && zoomMapToFeatures(map, getFeatures(activeItems));
       // zoomMapToFeatures(map, getFeatures(activeItems));
     }
-  }, [map, activeItems, pointsSource, hideFilters]);
+  }, [map, activeItems, pointsSource, hideFilters, ol]);
 
   React.useEffect(() => {
     if (!map) return null;
@@ -119,11 +125,11 @@ export default function DemoSitesMap(props) {
     return () => {
       map.un('moveend', moveendListener);
     };
-  }, [map, selectedCase, resetMapButtonClass, setResetMapButtonClass]);
+  }, [map, selectedCase, resetMapButtonClass, setResetMapButtonClass, ol]);
 
   const clusterStyle = React.useMemo(
-    () => selectedClusterStyle(selectedCase),
-    [selectedCase],
+    () => selectedClusterStyle({ selectedCase, ol }),
+    [selectedCase, ol],
   );
 
   const MapWithSelection = React.useMemo(() => Map, []);
@@ -159,9 +165,9 @@ export default function DemoSitesMap(props) {
               setHighlightedIndex(5);
               if (hideFilters) {
                 // zoomMapToFeatures(map, getFeatures(activeItems));
-                centerAndResetMapZoom(map);
+                centerAndResetMapZoom({ map, ol });
               } else {
-                centerAndResetMapZoom(map);
+                centerAndResetMapZoom({ map, ol });
                 // zoomMapToFeatures(map, getFeatures(activeItems));
               }
               map.getInteractions().array_[9].getFeatures().clear();
@@ -194,7 +200,7 @@ export default function DemoSitesMap(props) {
   ) : null;
 }
 
-const selectedClusterStyle = (selectedFeature) => {
+const selectedClusterStyle = ({ selectedFeature, ol }) => {
   function _clusterStyle(feature, selectedFeature) {
     const size = feature.get('features').length;
     let clusterStyle = styleCache[size];
@@ -247,3 +253,5 @@ const selectedClusterStyle = (selectedFeature) => {
   }
   return _clusterStyle;
 };
+
+export default withOpenLayers(DemoSitesMap);

package/src/components/Blocks/DemoSitesExplorer/FeatureDisplay.jsx

@@ -102,13 +102,13 @@ export default function FeatureDisplay({ feature }) {
             {feature.indicators.map((item, index) => {
               return (
                 <li key={index}>
-                  <span
-                  // target="_blank"
-                  // rel="noopener noreferrer"
-                  // href={item['path']}
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={item['path']}
                   >
                     {item['title']}
-                  </span>
+                  </a>
                 </li>
               );
             })}

package/src/components/Blocks/DemoSitesExplorer/FeatureInteraction.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 // import { zoomMapToFeatures } from './utils';
 
-export const useStyles = () => {
+export const useStyles = ({ ol }) => {
   const selected = React.useMemo(
     () =>
       new ol.style.Style({
@@ -18,7 +18,7 @@ export const useStyles = () => {
           }),
         }),
       }),
-    [],
+    [ol],
   );
 
   const selectStyle = React.useCallback(
@@ -35,10 +35,10 @@ export const useStyles = () => {
   return { selected, selectStyle };
 };
 
-export default function FeatureInteraction({ onFeatureSelect }) {
+function FeatureInteraction({ onFeatureSelect, ol }) {
   // console.log('featureinteraction', selectedCase);
   const { map } = useMapContext();
-  const { selectStyle } = useStyles();
+  const { selectStyle } = useStyles({ ol });
 
   const select = new ol.interaction.Select({
     condition: ol.condition.click,
@@ -88,3 +88,5 @@ export default function FeatureInteraction({ onFeatureSelect }) {
 
   return null;
 }
+
+export default withOpenLayers(FeatureInteraction);

package/src/components/Blocks/DemoSitesExplorer/InfoOverlay.jsx

@@ -1,20 +1,15 @@
 import React from 'react';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import FeatureDisplay from './FeatureDisplay';
 import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
 
-export default function InfoOverlay({
-  selectedFeature,
-  onFeatureSelect,
-  layerId,
-  // hideFilters,
-}) {
+function InfoOverlay({ selectedFeature, onFeatureSelect, layerId, ol }) {
   const { map } = useMapContext();
-  const [tooltip, setTooltipRef] = React.useState();
-  const [showTooltip, setShowTooltip] = React.useState();
-
+  const [tooltip, setTooltipRef] = React.useState(null);
+  const overlayRef = React.useRef();
   const prevLayerId = usePrevious(layerId);
+  const [showTooltip, setShowTooltip] = React.useState(false);
 
   React.useEffect(() => {
     if (prevLayerId && layerId !== prevLayerId) {
@@ -23,10 +18,10 @@ export default function InfoOverlay({
   }, [layerId, prevLayerId]);
 
   React.useEffect(() => {
-    if (!(map && tooltip)) return;
+    if (!(map && tooltip && ol.Overlay)) return;
 
-    const overlay = new ol.Overlay({
-      element: document.getElementById('popup-overlay'),
+    overlayRef.current = new ol.Overlay({
+      element: tooltip,
       positioning: 'bottom-left',
       offset: [0, 0],
       stopEvent: false,
@@ -35,7 +30,7 @@ export default function InfoOverlay({
       //     duration: 250,
       // },
     });
-    map.addOverlay(overlay);
+    map.addOverlay(overlayRef.current);
 
     function handler(evt) {
       const { pixel, target } = evt;
@@ -44,15 +39,13 @@ export default function InfoOverlay({
 
       if (features.length) {
         const coordinate = evt.coordinate;
-        overlay.setPosition(coordinate);
+        overlayRef.current.setPosition(coordinate);
         setShowTooltip(true);
       } else {
-        // const coordinate = evt.coordinate
-        // overlay.setPosition(coordinate);
         // handle a click in an overlay popup
         if (evt.originalEvent.target.tagName === 'A') return;
+        overlayRef.current.setPosition(undefined);
         setShowTooltip(false);
-        // popupOverlay.style.display = 'none';
         onFeatureSelect(null);
       }
     }
@@ -61,9 +54,11 @@ export default function InfoOverlay({
 
     return () => {
       map.un('click', handler);
-      map.removeOverlay(overlay);
+      if (overlayRef.current) {
+        map.removeOverlay(overlayRef.current);
+      }
     };
-  }, [map, tooltip, onFeatureSelect]); //
+  }, [map, tooltip, onFeatureSelect, ol.Overlay]);
 
   const [isClient, setIsClient] = React.useState(false);
   React.useEffect(() => setIsClient(true), []);
@@ -82,3 +77,5 @@ export default function InfoOverlay({
     </div>
   ) : null;
 }
+
+export default withOpenLayers(InfoOverlay);

package/src/components/Blocks/DemoSitesExplorer/ObjectivesChart.jsx

@@ -259,6 +259,7 @@ const ObjectivesChart = ({
         <ul>
           {Object.entries(objectives).map(([item, count], index) => (
             <li
+              key={item?.id || index}
               className={cx(
                 index === highlightedIndex ? 'active' : '',
                 customColors[index].replace('#', 'C'),

package/src/components/Blocks/DemoSitesExplorer/utils.js

@@ -1,5 +1,3 @@
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
-
 export const objectivesCustomOrder = [
   'Objective 1: Protect and restore marine and freshwater ecosystems and biodiversity',
   'Objective 2: Prevent and eliminate pollution of our oceans, seas and waters',
@@ -41,7 +39,7 @@ export function isValidURL(string) {
   }
 }
 
-export function centerAndResetMapZoom(map) {
+export function centerAndResetMapZoom({ map, ol }) {
   map.getView().animate({
     zoom: 3.4,
     duration: 1000,
@@ -56,14 +54,14 @@ export function scrollToElement(elementId) {
   });
 }
 
-export function getExtentOfFeatures(features) {
+export function getExtentOfFeatures({ features, ol }) {
   const points = features.map((f) => f.getGeometry().flatCoordinates);
   const point = new ol.geom.MultiPoint(points);
   return point.getExtent();
 }
 
-export function zoomMapToFeatures(map, features, threshold = 500) {
-  const extent = getExtentOfFeatures(features);
+export function zoomMapToFeatures({ map, features, ol, threshold = 500 }) {
+  const extent = getExtentOfFeatures({ map, features, ol });
 
   // let extentBuffer = (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
   // extentBuffer = extentBuffer < threshold ? threshold : extentBuffer;
@@ -89,8 +87,8 @@ export function zoomMapToFeatures(map, features, threshold = 500) {
   }
 }
 
-export function getFeatures(cases) {
-  const Feature = ol.ol.Feature;
+export function getFeatures({ cases, ol }) {
+  const Feature = ol.Feature; // eslint-disable-line no-unused-vars
   const colors = {
     'Objective 1: Protect and restore marine and freshwater ecosystems and biodiversity':
       '#007b6c',
@@ -115,7 +113,7 @@ export function getFeatures(cases) {
     const {
       geometry: { coordinates },
     } = c;
-    const point = new Feature(
+    const point = new ol.ol.Feature(
       new ol.geom.Point(ol.proj.fromLonLat(coordinates)),
     );
     point.setId(index);