@eeacms/volto-marine-policy 2.0.35 → 2.0.36

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.36](https://github.com/eea/volto-marine-policy/compare/2.0.35...2.0.36) - 10 November 2025
+
+#### :rocket: New Features
+
+- feat: new variation for Demo sites explorer [laszlocseh - [`58799b2`](https://github.com/eea/volto-marine-policy/commit/58799b23a8c0ff0f34ff2aeee8991113baaaa3d9)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`db0e43a`](https://github.com/eea/volto-marine-policy/commit/db0e43a4def21dddc41640173ff963ad97b6d32a)]
+
+#### :hammer_and_wrench: Others
+
+- fix demo sites map [laszlocseh - [`b4e676a`](https://github.com/eea/volto-marine-policy/commit/b4e676a445bcee52dc74b36662c36e149c74c841)]
 ### [2.0.35](https://github.com/eea/volto-marine-policy/compare/2.0.34...2.0.35) - 3 November 2025
 
 #### :rocket: New Features

package/package.json

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

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

@@ -19,8 +19,7 @@ export default function DemoSitesExplorerView(props) {
     : '/marine/@@demo-sites-map.arcgis.json';
   let cases = useCases(addAppURL(cases_url));
   const [selectedCase, onSelectedCase] = React.useState(null);
-  const { enableMarineMO } = props.data;
-  // console.log('enableMarineMO', enableMarineMO);
+  const { mapVariation } = props.data;
   const { properties } = props;
   // if the map is rendered on the indicator page we hide the Target and
   // the Indicator filters, and hide the chart on the right side
@@ -39,7 +38,10 @@ export default function DemoSitesExplorerView(props) {
   const [filters, setFilters] = React.useState([]);
   const [map, setMap] = React.useState();
   const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
-  const columnsLength = hideFilters || enableMarineMO ? 12 : 8;
+  const columnsLength =
+    hideFilters || ['blueParks', 'blueParksObj1'].includes(mapVariation)
+      ? 12
+      : 8;
 
   React.useEffect(() => {
     const _filters = getFilters(activeItems, indicatorOnly);
@@ -60,11 +62,11 @@ export default function DemoSitesExplorerView(props) {
       cases,
       activeFilters,
       indicatorOnly,
-      enableMarineMO,
+      mapVariation,
     );
 
     setActiveItems(activeItems);
-  }, [activeFilters, cases, indicatorOnly, enableMarineMO]);
+  }, [activeFilters, cases, indicatorOnly, mapVariation]);
 
   if (__SERVER__) return '';
 
@@ -86,7 +88,7 @@ export default function DemoSitesExplorerView(props) {
           hideFilters={hideFilters}
           setActiveFilters={setActiveFilters}
           highlightedIndex={highlightedIndex}
-          enableMarineMO={enableMarineMO}
+          mapVariation={mapVariation}
         />
       </Grid.Row>
       <Grid.Row>
@@ -108,10 +110,13 @@ export default function DemoSitesExplorerView(props) {
                 setMap={setMap}
                 highlightedIndex={highlightedIndex}
                 setHighlightedIndex={setHighlightedIndex}
-                enableMarineMO={enableMarineMO}
+                mapVariation={mapVariation}
               />
             </Grid.Column>
-            {!(hideFilters || enableMarineMO) ? (
+            {!(
+              hideFilters ||
+              ['blueParks', 'blueParksObj1'].includes(mapVariation)
+            ) ? (
               <Grid.Column
                 mobile={4}
                 tablet={4}
@@ -142,7 +147,7 @@ export default function DemoSitesExplorerView(props) {
                       <div className="circle">
                         {/* <div className="dot-demosite"></div> */}
                         <img
-                          src="/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-point.png/@@images/image/small"
+                          src="/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-point-light.png/@@images/image/small"
                           alt=""
                         />
                       </div>
@@ -152,7 +157,7 @@ export default function DemoSitesExplorerView(props) {
                       <div className="circle">
                         {/* <div className="dot-region"></div> */}
                         <img
-                          src="/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-region.png/@@images/image/small"
+                          src="/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-region-light.png/@@images/image/small"
                           alt=""
                         />
                       </div>

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

@@ -165,7 +165,7 @@ export function DemoSitesFilters(props) {
     hideFilters,
     setActiveFilters,
     highlightedIndex,
-    enableMarineMO,
+    mapVariation,
   } = props;
 
   React.useEffect(() => {
@@ -180,7 +180,7 @@ export function DemoSitesFilters(props) {
     });
   }, []);
 
-  return !enableMarineMO ? (
+  return !['blueParks', 'blueParksObj1'].includes(mapVariation) ? (
     <>
       {!hideFilters ? (
         <DemoSitesFilter

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

@@ -42,7 +42,7 @@ function DemoSitesMap(props) {
     setMap,
     highlightedIndex,
     setHighlightedIndex,
-    enableMarineMO,
+    mapVariation,
     ol,
   } = props;
   const features = getFeatures({ cases: items, ol });
@@ -135,8 +135,8 @@ function DemoSitesMap(props) {
   }, [map, selectedCase, resetMapButtonClass, setResetMapButtonClass, ol]);
 
   const clusterStyle = React.useMemo(
-    () => selectedClusterStyle({ selectedCase, ol, enableMarineMO }),
-    [selectedCase, ol, enableMarineMO],
+    () => selectedClusterStyle({ selectedCase, ol, mapVariation }),
+    [selectedCase, ol, mapVariation],
   );
 
   const MapWithSelection = React.useMemo(() => Map, []);
@@ -196,7 +196,9 @@ function DemoSitesMap(props) {
             // selectedCase={selectedCase}
           />
           <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
-          {enableMarineMO && <Layer.Tile source={arcgisSource} zIndex={0} />}
+          {['blueParks', 'blueParksObj1'].includes(mapVariation) && (
+            <Layer.Tile source={arcgisSource} zIndex={0} />
+          )}
           <Layer.Vector
             style={clusterStyle}
             source={clusterSource}
@@ -209,7 +211,7 @@ function DemoSitesMap(props) {
   ) : null;
 }
 
-const selectedClusterStyle = ({ selectedFeature, ol, enableMarineMO }) => {
+const selectedClusterStyle = ({ selectedFeature, ol, mapVariation }) => {
   function _clusterStyle(feature, selectedFeature) {
     const size = feature.get('features').length;
     let clusterStyle = styleCache[size];
@@ -235,52 +237,64 @@ const selectedClusterStyle = ({ selectedFeature, ol, enableMarineMO }) => {
       });
       styleCache[size] = clusterStyle;
     }
-    // set size === 1 to enable clusterization
-    if (size) {
-      if (enableMarineMO) {
+    // use condition size === 1 to enable clusterization
+    if (true) {
+      let iconType = '-light';
+      let iconSize = 'icon';
+
+      if ('blueParks' === mapVariation) {
         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',
           }),
         });
-      } else {
-        // let color = feature.values_.features[0].values_['color'];
-        // type_is_region
-        // let color = '#0179cf';
-        // let width = feature.values_.features[0].values_['width'];
-        // let radius = feature.values_.features[0].values_['radius'];
-
-        // 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,
-        //     }),
-        //   }),
-        // });
-        let iconUrl =
-          feature.values_.features[0].values_['type_is_region'] ===
-          'Associated region'
-            ? '/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-region.png/@@images/image/icon'
-            : '/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-point.png/@@images/image/icon';
+      } else if ('blueParksObj1' === mapVariation) {
+        iconType = '-light';
+        iconSize = 'tiny';
 
-        return new ol.style.Style({
-          image: new ol.style.Icon({
-            anchor: [0.5, 1],
-            scale: 0.8,
-            src: iconUrl,
-          }),
-        });
+        if (
+          ['BioProtect', 'BLUE CONNECT', 'BLUE4ALL', 'EFFECTIVE'].includes(
+            feature.values_.features[0].values_['project'],
+          )
+        ) {
+          iconType = '';
+          iconSize = 'tiny';
+        }
       }
+      // let color = feature.values_.features[0].values_['color'];
+      // type_is_region
+      // let color = '#0179cf';
+      // let width = feature.values_.features[0].values_['width'];
+      // let radius = feature.values_.features[0].values_['radius'];
+
+      // 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,
+      //     }),
+      //   }),
+      // });
+
+      let iconUrl =
+        feature.values_.features[0].values_['type_is_region'] ===
+        'Associated region'
+          ? `/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-region${iconType}.png/@@images/image/${iconSize}`
+          : `/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-point${iconType}.png/@@images/image/${iconSize}`;
+
+      return new ol.style.Style({
+        image: new ol.style.Icon({
+          anchor: [0.5, 1],
+          scale: 0.8,
+          src: iconUrl,
+        }),
+      });
     } else {
       return clusterStyle;
     }

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

@@ -4,20 +4,28 @@ const DemoSitesExplorerSchema = {
     {
       id: 'default',
       title: 'Default',
-      fields: ['enableMarineMO'],
+      fields: ['mapVariation'],
     },
   ],
 
   properties: {
-    enableMarineMO: {
-      title: 'Enable Marine Protected Areas layer',
+    mapVariation: {
+      title: 'Choose the type of map',
       description:
         'If enabled, the Marine Protected Areas layer will be displayed on the map, without the filters and the chart on the right side',
-      type: 'boolean',
-      default: false,
+      // type: 'boolean',
+      choices: [
+        ['standard', 'Standard map with filters and chart'],
+        ['blueParks', 'Marine protected areas map with Blue Parks projects'],
+        [
+          'blueParksObj1',
+          'Marine protected areas map with Objective 1 and Blue Parks projects',
+        ],
+      ],
+      default: 'standard',
     },
   },
-  required: ['enableMarineMO'],
+  required: ['mapVariation'],
 };
 
 export default DemoSitesExplorerSchema;

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

@@ -144,12 +144,7 @@ export function getFeatures({ cases, ol }) {
   });
 }
 
-export function filterCases(
-  cases,
-  activeFilters,
-  indicatorOnly,
-  enableMarineMO,
-) {
+export function filterCases(cases, activeFilters, indicatorOnly, mapVariation) {
   const data = cases.filter((_case) => {
     let flag_objective = false;
     let flag_target = false;
@@ -163,21 +158,20 @@ export function filterCases(
         return item['title'].toString();
       });
       if (indicators?.includes(indicatorOnly)) flag_indicatorOnly = true;
-    } else if (enableMarineMO) {
-      let indicators = _case.properties.indicators?.map((item) => {
-        return item['title'].toString();
-      });
-      if (
-        indicators?.includes('Marine protected areas') ||
-        indicators?.includes('Marine strictly protected areas')
-      )
-        flag_indicatorOnly = true;
     } else {
       flag_indicatorOnly = true;
     }
 
     // debugger;
-    if (!activeFilters.objective_filter.length) {
+    if ('blueParksObj1' === mapVariation) {
+      let objective = _case.properties.objective;
+      if (
+        objective.includes(
+          'Objective 1: Protect and restore marine and freshwater ecosystems and biodiversity',
+        )
+      )
+        flag_objective = true;
+    } else if (!activeFilters.objective_filter.length) {
       flag_objective = true;
     } else {
       let objective = _case.properties.objective;
@@ -209,7 +203,16 @@ export function filterCases(
       });
     }
 
-    if (!activeFilters.project_filter.length) {
+    // BioProtect, BLUE CONNECT, BLUE4ALL, EFFECTIVE
+    if (['blueParks'].includes(mapVariation)) {
+      let project = _case.properties.project;
+      if (
+        ['BioProtect', 'BLUE CONNECT', 'BLUE4ALL', 'EFFECTIVE'].includes(
+          project,
+        )
+      )
+        flag_project = true;
+    } else if (!activeFilters.project_filter.length) {
       flag_project = true;
     } else {
       let project = _case.properties.project;