@eeacms/volto-eea-map 0.1.25 → 0.1.27

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).
 
+### [0.1.27](https://github.com/eea/volto-eea-map/compare/0.1.26...0.1.27) - 6 October 2022
+
+#### :hammer_and_wrench: Others
+
+- privacy policy inherit height of map [andreiggr - [`dee7281`](https://github.com/eea/volto-eea-map/commit/dee7281caf834d017af8b99da1455c956bc663fe)]
+- set default legend, sources, privacy on [andreiggr - [`fb66ff8`](https://github.com/eea/volto-eea-map/commit/fb66ff8863d13b569955d7a774a9f1ab14729a29)]
+- clear console [andreiggr - [`e1d2841`](https://github.com/eea/volto-eea-map/commit/e1d28419dea2586c98b4df1c9e6dc1d6a4b987b6)]
+- use a custom basemap [andreiggr - [`b11fc62`](https://github.com/eea/volto-eea-map/commit/b11fc62a54730c0fb2229448c438f39f51db494d)]
+### [0.1.26](https://github.com/eea/volto-eea-map/compare/0.1.25...0.1.26) - 4 October 2022
+
+#### :hammer_and_wrench: Others
+
+- add integration to cypress [andreiggr - [`b92ab76`](https://github.com/eea/volto-eea-map/commit/b92ab764603088013894a0be6f84824fb6586464)]
+- fix plugins cypress [andreiggr - [`61e3194`](https://github.com/eea/volto-eea-map/commit/61e319434b1e877dbb4fd29d5ca3d2028d9b5e0b)]
+- use volto vers from env [andreiggr - [`52db93f`](https://github.com/eea/volto-eea-map/commit/52db93f8561e6b90e5d7569b3005e3ebb5274b26)]
+- replace all alpha with specific alpha version [andreiggr - [`f0f1802`](https://github.com/eea/volto-eea-map/commit/f0f18026298e1cc061d62d82e320bf2066496c77)]
+- update jenkins dependencies [andreiggr - [`d2bc043`](https://github.com/eea/volto-eea-map/commit/d2bc043f4039192d0b18bccb0c26ae8cae3d1089)]
+- use specific volto alpha version [andreiggr - [`209988d`](https://github.com/eea/volto-eea-map/commit/209988df8e23fb5bc4631b8326740ea9d2969195)]
+- Raster layer different centering mechanism [andreiggr - [`74c5fa5`](https://github.com/eea/volto-eea-map/commit/74c5fa57522197e621c9c4ba05f6b9cbed2b0e8f)]
+- show raster layer [andreiggr - [`3193689`](https://github.com/eea/volto-eea-map/commit/3193689982db041ac343389e456db7a79447361d)]
+- changes for hide layer in legend [andreiggr - [`5176df9`](https://github.com/eea/volto-eea-map/commit/5176df9971efb308f1e02f510021bf42d9a7c05c)]
+- clean code [andreiggr - [`be3b1b8`](https://github.com/eea/volto-eea-map/commit/be3b1b86db7e5b243d3650cda17332bbbc70c71b)]
+- hide layer in legend [andreiggr - [`675f1ba`](https://github.com/eea/volto-eea-map/commit/675f1ba4aec7037b2a7c28b73a075c0a93616546)]
 ### [0.1.25](https://github.com/eea/volto-eea-map/compare/0.1.24...0.1.25) - 27 September 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "cypress": "10.3.1"
+    "cypress": "10.3.1",
+    "md5": "^2.3.0"
   },
   "scripts": {
     "release": "release-it",

package/src/components/Blocks/EmbedEEAMap/Edit.jsx

@@ -17,6 +17,29 @@ const Edit = (props) => {
   const { block, data, onChangeBlock, selected, id } = props;
   const schema = React.useMemo(() => Schema(props), [props]);
 
+  React.useEffect(() => {
+    if (!Object.hasOwn(data, 'show_legend')) {
+      onChangeBlock(block, {
+        ...data,
+        show_legend: true,
+      });
+    }
+    if (!Object.hasOwn(data, 'show_sources')) {
+      onChangeBlock(block, {
+        ...data,
+        show_sources: true,
+      });
+    }
+    if (!Object.hasOwn(data, 'dataprotection')) {
+      onChangeBlock(block, {
+        ...data,
+        dataprotection: { enabled: true },
+      });
+    }
+
+    //    eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
   React.useEffect(() => {
     props.getContent(data.vis_url, null, id);
     //    eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/Blocks/EmbedEEAMap/Schema.js

@@ -90,6 +90,8 @@ export const Schema = (props) => {
       },
       height: {
         title: 'Height',
+        description:
+          'Map block height in px. Default is 500px. Change only if necessary',
         type: 'number',
       },
       description: {

package/src/components/Blocks/EmbedEEAMap/View.jsx

@@ -75,7 +75,7 @@ const View = (props) => {
 
   return (
     <div>
-      <PrivacyProtection data={data} {...props}>
+      <PrivacyProtection data={data} height={height} {...props}>
         {mapData && (
           <div>
             <Webmap data={mapData} height={height} />

package/src/components/ExtraViews.jsx

@@ -52,6 +52,7 @@ const ExtraViews = ({ data }) => {
     show_sources,
     data_provenance = {},
   } = data;
+
   return (
     <div className="extra-eea-map-content">
       {show_legend && map_data && (

package/src/components/Webmap.jsx

@@ -10,6 +10,8 @@ const MODULES = [
   'esri/layers/FeatureLayer',
   'esri/layers/MapImageLayer',
   'esri/layers/GroupLayer',
+  'esri/layers/WebTileLayer',
+  'esri/Basemap',
   'esri/widgets/Legend',
   'esri/widgets/Expand',
   'esri/widgets/Print',
@@ -17,6 +19,50 @@ const MODULES = [
   'esri/widgets/ScaleBar',
 ];
 
+//TODO: set group layers sublayers, for direct group import.
+// const setGroupLayers = async (ids, data, modules) => {
+//   const { map_service_url, sublayerDatalayer, fullLayer, query = '' } =
+//     data || {};
+//   const { FeatureLayer, MapImageLayer, GroupLayer } = modules;
+
+//   const glLayers = await Promise.all(
+//     ids.map(async (id) => {
+//       const sublayerUrl = `${map_service_url}/${id}`;
+//       let sublayerData = await fetchArcGISData(sublayerUrl);
+//       let sublayer;
+//       switch (sublayerData.type) {
+//         case 'Raster Layer':
+//           sublayer = new MapImageLayer({
+//             url: map_service_url,
+//             minScale: sublayerData?.minScale,
+//             maxScale: sublayerData?.maxScale,
+//             sublayers: [
+//               {
+//                 id: sublayerData.id,
+//                 visible: true,
+//                 definitionExpression: query ? formatQuery(query, 'sql') : '',
+//               },
+//             ],
+//           });
+//           break;
+//         case 'Feature Layer':
+//           sublayer = new FeatureLayer({
+//             layerId: sublayerData.id,
+//             url: `${map_service_url}/${sublayerData.id}`,
+//             definitionExpression: query ? formatQuery(query, 'sql') : '',
+//             minScale: sublayerData?.minScale,
+//             maxScale: sublayerData?.maxScale,
+//           });
+//           break;
+//         default:
+//           break;
+//       }
+//       return sublayer;
+//     }),
+//   );
+//   return glLayers;
+// };
+
 const Webmap = (props) => {
   const { editMode, height, id } = props;
 
@@ -53,6 +99,8 @@ const Webmap = (props) => {
           FeatureLayer,
           MapImageLayer,
           GroupLayer,
+          WebTileLayer,
+          Basemap,
           Legend,
           Expand,
           Print,
@@ -65,6 +113,8 @@ const Webmap = (props) => {
           FeatureLayer,
           MapImageLayer,
           GroupLayer,
+          WebTileLayer,
+          Basemap,
           Legend,
           Expand,
           Print,
@@ -84,6 +134,8 @@ const Webmap = (props) => {
       FeatureLayer,
       MapImageLayer,
       GroupLayer,
+      WebTileLayer,
+      Basemap,
       Legend,
       Expand,
       Print,
@@ -101,8 +153,16 @@ const Webmap = (props) => {
                 case 'Raster Layer':
                   mapLayer = new MapImageLayer({
                     url: map_service_url,
-                    minScale: layer?.minScale,
-                    maxScale: layer?.maxScale,
+                    sublayers: [
+                      {
+                        id: layer.id,
+                        minScale: layer?.minScale,
+                        maxScale: layer?.maxScale,
+                        definitionExpression: query
+                          ? formatQuery(query, 'sql')
+                          : '',
+                      },
+                    ],
                   });
                   break;
                 case 'Feature Layer':
@@ -116,17 +176,39 @@ const Webmap = (props) => {
                     maxScale: layer?.maxScale,
                   });
                   break;
-                case 'Group Layer':
-                  mapLayer = new GroupLayer({ url });
-                  break;
                 default:
                   break;
               }
               return mapLayer;
             })
         : [];
+
+    const mapBaseLayer = new WebTileLayer({
+      urlTemplate:
+        'https://gisco-services.ec.europa.eu/maps/tiles/OSMPositronComposite/EPSG3857/{level}/{col}/{row}.png',
+    });
+
+    // Create a Basemap with the WebTileLayer.
+    const positronCompositeBasemap = new Basemap({
+      baseLayers: [mapBaseLayer],
+      title: 'Positron Composite',
+      id: 'positron-composite',
+      thumbnailUrl:
+        'https://gisco-services.ec.europa.eu/maps/tiles/OSMPositronComposite/EPSG3857/0/0/0.png',
+    });
+
+    const setBasemap = (basemap) => {
+      if (basemap === 'positron-composite') {
+        return positronCompositeBasemap;
+      }
+      if (!basemap) {
+        return 'hybrid';
+      }
+      return basemap;
+    };
+
     const map = new Map({
-      basemap: base_layer || 'hybrid',
+      basemap: setBasemap(base_layer),
       layers,
     });
     const view = new MapView({
@@ -152,13 +234,20 @@ const Webmap = (props) => {
 
     if (layers && layers[0] && general && general.centerOnExtent) {
       const firstLayer = layers[0];
-      firstLayer
-        .when(() => {
-          return firstLayer.queryExtent();
-        })
-        .then((response) => {
-          view.goTo(response.extent);
+      if (firstLayer.type === 'feature') {
+        firstLayer
+          .when(() => {
+            return firstLayer.queryExtent();
+          })
+          .then((response) => {
+            view.goTo(response.extent);
+          });
+      }
+      if (firstLayer.type === 'map-image') {
+        firstLayer.when(() => {
+          view.goTo(firstLayer.fullExtent);
         });
+      }
     }
 
     const zoomPosition =

package/src/components/visualization/VisualizationEditorWidget.jsx

@@ -39,6 +39,7 @@ const VisualizationEditorWidget = (props) => {
           print_position: 'top-right',
           zoom_position: 'top-right',
           centerOnExtent: true,
+          scalebar: 'metric',
         },
       });
     }

package/src/components/visualization/panelsSchema.js

@@ -1,5 +1,7 @@
 import { base_layers } from '../../constants';
 
+const customBaselayers = [['positron-composite', 'positron-composite']];
+
 const BaseLayerSchema = {
   title: 'Base Layer',
   fieldsets: [
@@ -12,7 +14,7 @@ const BaseLayerSchema = {
   properties: {
     base_layer: {
       title: 'Base Layer',
-      choices: base_layers,
+      choices: [...customBaselayers, ...base_layers],
     },
   },
   required: [],
@@ -102,10 +104,12 @@ const GeneralSchema = ({ data = {} }) => {
       long: {
         title: 'Longitude',
         type: 'number',
+        description: `Will set the map center long coordinate. See: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#center`,
       },
       lat: {
         title: 'Latitude',
         type: 'number',
+        description: `Will set the map center lat coordinate. See: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#center`,
       },
 
       print_position: {

package/src/components/widgets/LayerSelectWidget.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon } from '@plone/volto/components';
-import { Input, Select, Button, Grid } from 'semantic-ui-react';
+import { Input, Select, Button, Grid, Checkbox } from 'semantic-ui-react';
 import { QueryBuilder } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
@@ -31,6 +31,7 @@ const LayerSelectWidget = (props) => {
     fields = [],
     query = '',
     description = '',
+    hide = false,
   } = value;
 
   const [mapData, setMapData] = React.useState(map_data);
@@ -53,11 +54,18 @@ const LayerSelectWidget = (props) => {
       setMapData(mapData);
       setServiceUrlError('');
       if (mapData.layers && mapData.layers.length > 0) {
-        setAvailableLayers(
-          mapData.layers.map((layer, i) => {
-            return { key: layer.id, value: layer, text: layer.name };
-          }),
-        );
+        const mappedLayers = mapData.layers
+          .filter(
+            (layer) => layer && layer.type && layer.type !== 'Group Layer',
+          )
+          .map((layer, i) => {
+            return {
+              key: layer.id,
+              value: layer,
+              text: `${layer.name} (${layer.type})`,
+            };
+          });
+        setAvailableLayers(mappedLayers);
       }
       onChange(id, {
         ...value,
@@ -66,6 +74,7 @@ const LayerSelectWidget = (props) => {
         available_layers: availableLayers,
         map_data: mapData,
         description,
+        hide,
       });
     } catch (e) {
       setCheckColor('youtube');
@@ -183,6 +192,14 @@ const LayerSelectWidget = (props) => {
     setSelectedLayer(layer);
     setMapData(map_data);
   };
+
+  const handleHideInLegend = (v) => {
+    onChange(id, {
+      ...value,
+      hide: v,
+    });
+  };
+
   return (
     <div
       style={{
@@ -266,7 +283,7 @@ const LayerSelectWidget = (props) => {
             </Grid.Row>
           </div>
         )}
-        {availableLayers && availableLayers.length > 0 && (
+        {availableLayers && availableLayers.length > 0 && selectedLayer && (
           <div className="spaced-row">
             <Grid.Row stretched>
               <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
@@ -285,6 +302,14 @@ const LayerSelectWidget = (props) => {
                 />
               </div>
             </Grid.Row>
+            <Grid.Row stretched>
+              <h5>Hide in legend:</h5>{' '}
+              <Checkbox
+                label="Layer will be hidden in legend"
+                checked={hide}
+                onChange={(e, { checked }) => handleHideInLegend(checked)}
+              />
+            </Grid.Row>
           </div>
         )}
         {availableLayers && fields && fields.length > 0 && (

package/src/components/widgets/LegendWidget.jsx

@@ -107,8 +107,12 @@ const LegendWidget = (props) => {
       ? layers?.map_layers.slice(0, 3)
       : layers?.map_layers;
 
+  const visible_layers = map_layers
+    ? map_layers.filter((l) => !l?.map_layer?.hide)
+    : '';
+
   const legendColumns =
-    map_layers && setLegendColumns(map_layers.length, device);
+    visible_layers && setLegendColumns(visible_layers.length, device);
   return (
     <>
       <div className="legend-container">
@@ -123,16 +127,16 @@ const LegendWidget = (props) => {
           </h3>
         </button>
         <Grid columns={legendColumns}>
-          {(!map_layers || map_layers.length === 0) && (
+          {(!visible_layers || visible_layers.length === 0) && (
             <p>
               No layer found for legend. Please add a map layer from editor.
             </p>
           )}
           {expand && (
             <Grid.Row divided>
-              {map_layers &&
-                map_layers.length > 0 &&
-                map_layers.map((l, i) => (
+              {visible_layers &&
+                visible_layers.length > 0 &&
+                visible_layers.map((l, i) => (
                   <LayerLegend
                     key={i}
                     data={l.map_layer}