@eeacms/volto-marine-policy 2.0.24 → 2.0.25

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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.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.25",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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/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,14 +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({
+function InfoOverlay({
   selectedFeature,
   onFeatureSelect,
   layerId,
   // hideFilters,
+  ol,
 }) {
   const { map } = useMapContext();
   const [tooltip, setTooltipRef] = React.useState();
@@ -63,7 +64,7 @@ export default function InfoOverlay({
       map.un('click', handler);
       map.removeOverlay(overlay);
     };
-  }, [map, tooltip, onFeatureSelect]); //
+  }, [map, tooltip, onFeatureSelect, ol]); //
 
   const [isClient, setIsClient] = React.useState(false);
   React.useEffect(() => setIsClient(true), []);
@@ -82,3 +83,5 @@ export default function InfoOverlay({
     </div>
   ) : null;
 }
+
+export default withOpenLayers(InfoOverlay);

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;
   const colors = {
     'Objective 1: Protect and restore marine and freshwater ecosystems and biodiversity':
       '#007b6c',