@eeacms/volto-eea-map 0.1.26 → 0.1.27

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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,7 +19,7 @@ const MODULES = [
   'esri/widgets/ScaleBar',
 ];
 
-//TODO: set group layers sublayers, for direct group import. Maybe also
+//TODO: set group layers sublayers, for direct group import.
 // const setGroupLayers = async (ids, data, modules) => {
 //   const { map_service_url, sublayerDatalayer, fullLayer, query = '' } =
 //     data || {};
@@ -97,6 +99,8 @@ const Webmap = (props) => {
           FeatureLayer,
           MapImageLayer,
           GroupLayer,
+          WebTileLayer,
+          Basemap,
           Legend,
           Expand,
           Print,
@@ -109,6 +113,8 @@ const Webmap = (props) => {
           FeatureLayer,
           MapImageLayer,
           GroupLayer,
+          WebTileLayer,
+          Basemap,
           Legend,
           Expand,
           Print,
@@ -128,6 +134,8 @@ const Webmap = (props) => {
       FeatureLayer,
       MapImageLayer,
       GroupLayer,
+      WebTileLayer,
+      Basemap,
       Legend,
       Expand,
       Print,
@@ -168,24 +176,39 @@ const Webmap = (props) => {
                     maxScale: layer?.maxScale,
                   });
                   break;
-                  //// case 'Group Layer':
-                  //   mapLayer = new GroupLayer({ title: layer.title });
-                  //   // mapLayer.addMany(
-                  //   //   setGroupLayers(
-                  //   //     layer.sublayersIds,
-                  //   //     { map_service_url, layer, fullLayer, query },
-                  //   //     modules,
-                  //   //   ),
-                  //   // );
-                  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({

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: {