@eeacms/volto-marine-policy 2.0.32 → 2.0.33

package/CHANGELOG.md

@@ -4,6 +4,11 @@ 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.33](https://github.com/eea/volto-marine-policy/compare/2.0.32...2.0.33) - 22 October 2025
+
+#### :hammer_and_wrench: Others
+
+- update demo sites map marine protected areas [laszlocseh - [`20ff428`](https://github.com/eea/volto-marine-policy/commit/20ff4280bc26593126566718993d16a0c36574cc)]
 ### [2.0.32](https://github.com/eea/volto-marine-policy/compare/2.0.31...2.0.32) - 21 October 2025
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "2.0.32",
+  "version": "2.0.33",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -136,8 +136,8 @@ function DemoSitesMap(props) {
   }, [map, selectedCase, resetMapButtonClass, setResetMapButtonClass, ol]);
 
   const clusterStyle = React.useMemo(
-    () => selectedClusterStyle({ selectedCase, ol }),
-    [selectedCase, ol],
+    () => selectedClusterStyle({ selectedCase, ol, enableMarineMO }),
+    [selectedCase, ol, enableMarineMO],
   );
 
   const MapWithSelection = React.useMemo(() => Map, []);
@@ -209,7 +209,7 @@ function DemoSitesMap(props) {
   ) : null;
 }
 
-const selectedClusterStyle = ({ selectedFeature, ol }) => {
+const selectedClusterStyle = ({ selectedFeature, ol, enableMarineMO }) => {
   function _clusterStyle(feature, selectedFeature) {
     const size = feature.get('features').length;
     let clusterStyle = styleCache[size];
@@ -237,25 +237,38 @@ const selectedClusterStyle = ({ selectedFeature, ol }) => {
     }
     // set size === 1 to enable clusterization
     if (size) {
-      // let color = feature.values_.features[0].values_['color'];
-      let color = '#0179cf';
-      let width = feature.values_.features[0].values_['width'];
-      let radius = feature.values_.features[0].values_['radius'];
-      // console.log(color)
-      // let color = '#0083E0'; // #0083E0 #50B0A4
-
-      return new ol.style.Style({
-        image: new ol.style.Circle({
-          radius: radius,
-          fill: new ol.style.Fill({
-            color: '#fff',
+      if (enableMarineMO) {
+        return new ol.style.Style({
+          image: new ol.style.Icon({
+            anchor: [0.5, 1],
+            // size: [52, 52],
+            // offset: [52, 0],
+            // opacity: 1,
+            scale: 0.8,
+            src: '/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-point.png/@@images/image/tiny',
           }),
-          stroke: new ol.style.Stroke({
-            color: color,
-            width: width,
+        });
+      } else {
+        // let color = feature.values_.features[0].values_['color'];
+        let color = '#0179cf';
+        let width = feature.values_.features[0].values_['width'];
+        let radius = feature.values_.features[0].values_['radius'];
+        // console.log(color)
+        // let color = '#0083E0'; // #0083E0 #50B0A4
+
+        return new ol.style.Style({
+          image: new ol.style.Circle({
+            radius: radius,
+            fill: new ol.style.Fill({
+              color: '#fff',
+            }),
+            stroke: new ol.style.Stroke({
+              color: color,
+              width: width,
+            }),
           }),
-        }),
-      });
+        });
+      }
     } else {
       return clusterStyle;
     }