@eeacms/volto-eea-map 0.1.4 → 0.1.7

package/CHANGELOG.md

@@ -4,8 +4,40 @@ 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.7](https://github.com/eea/volto-eea-map/compare/0.1.6...0.1.7)
+
+- fix height coming through in view [`39d4d28`](https://github.com/eea/volto-eea-map/commit/39d4d287a4fe86890f5fad8d9050130b496dfe70)
+- Connected visualization view-edit [`52a8e21`](https://github.com/eea/volto-eea-map/commit/52a8e2187cb2e3a7db660ae4b6b5610c88be5083)
+- map_view is map_editor_widget, add view component for content-type [`dc227f9`](https://github.com/eea/volto-eea-map/commit/dc227f9bbb259b59739a3694dc69f0fcca661137)
+- Add map visualization widget [`affd84c`](https://github.com/eea/volto-eea-map/commit/affd84ca8753214c07f2f0756a13f08f5cf0a048)
+
+#### [0.1.6](https://github.com/eea/volto-eea-map/compare/0.1.5...0.1.6)
+
+> 5 August 2022
+
+- Develop [`#6`](https://github.com/eea/volto-eea-map/pull/6)
+- Lint fix [`f5561d1`](https://github.com/eea/volto-eea-map/commit/f5561d1581201bd635b4e53e8a46decaf684438f)
+- Map improvements [`c75d16c`](https://github.com/eea/volto-eea-map/commit/c75d16c265136d9f676e194540e613bb742fb51b)
+
+#### [0.1.5](https://github.com/eea/volto-eea-map/compare/0.1.4...0.1.5)
+
+> 4 August 2022
+
+- Develop [`#5`](https://github.com/eea/volto-eea-map/pull/5)
+- Center on extent only on map load [`b63f586`](https://github.com/eea/volto-eea-map/commit/b63f586e0df68faa755bb0d25e297530e36ef7c9)
+- Configure proxy for all map subdomains [`0f19030`](https://github.com/eea/volto-eea-map/commit/0f19030569e1f77b1ff7657669e876519712840f)
+- Prevent unnecessary rerenders of ma [`8752384`](https://github.com/eea/volto-eea-map/commit/8752384b3bbd7b564a25b3e4347c47692106f556)
+- Prevent unnecessary rerenders of map [`00a3e64`](https://github.com/eea/volto-eea-map/commit/00a3e64585748a36ef476b2d75540bdd43778486)
+- Clear print schema [`29ed979`](https://github.com/eea/volto-eea-map/commit/29ed9795812d6673f8fb91ac73e53e4e132ed55a)
+- Move zoom & print in general tab [`06c4996`](https://github.com/eea/volto-eea-map/commit/06c499651217715e1793d2a75fb72668dc1de223)
+- Clear [`9aa7bf1`](https://github.com/eea/volto-eea-map/commit/9aa7bf1591b22a2941ce0f269ef133d687affc15)
+- Disable url for screenshot atm [`1ef18fc`](https://github.com/eea/volto-eea-map/commit/1ef18fc8b7516c88c743cffb10b5eb340161d58d)
+
 #### [0.1.4](https://github.com/eea/volto-eea-map/compare/0.1.3...0.1.4)
 
+> 3 August 2022
+
+- Map updates [`#4`](https://github.com/eea/volto-eea-map/pull/4)
 - Configure Privacy protection screenshot data [`49097c0`](https://github.com/eea/volto-eea-map/commit/49097c0b7aa8657e626d5a49dd0eed84f5e71e78)
 - Expandable Legend [`6edda2f`](https://github.com/eea/volto-eea-map/commit/6edda2fafd8a2a61f3f1f10c47a9ca5bb35a0355)
 - Catch for no data [`7cef4e6`](https://github.com/eea/volto-eea-map/commit/7cef4e641650ede23e37ca9116130db1ef0a18db)

package/package.json

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

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

@@ -2,27 +2,18 @@ import React from 'react';
 import { SidebarPortal } from '@plone/volto/components';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import { Schema } from './Schema';
-import Webmap from './components/Webmap';
+import View from './View';
+import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
 import './styles/map.css';
-import ExtraViews from './components/widgets/ExtraViews';
-import {
-  PrivacyProtection,
-  addPrivacyProtectionToSchema,
-} from '@eeacms/volto-embed';
 
 const Edit = (props) => {
   const { block, data, onChangeBlock, selected } = props;
   const schema = React.useMemo(() => Schema(props), [props]);
 
-  const { map_data = {}, height } = data;
   if (__SERVER__) return '';
-
   return (
     <div>
-      <PrivacyProtection data={data} {...props}>
-        <Webmap data={map_data} height={height} />
-        <ExtraViews data={data} />
-      </PrivacyProtection>
+      <View data={data} />
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}

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

@@ -6,14 +6,13 @@ import { PrivacyProtection } from '@eeacms/volto-embed';
 const View = (props) => {
   const { data } = props || {};
 
-  const { map_data = {} } = data;
+  const { map_data = {}, height = '' } = data;
 
   if (__SERVER__) return '';
-
   return (
     <div>
       <PrivacyProtection data={data} {...props}>
-        <Webmap data={map_data} />
+        <Webmap data={map_data} height={height} />
         <ExtraViews data={data} />
       </PrivacyProtection>
     </div>

package/src/components/Blocks/EEAMap/components/Webmap.jsx

@@ -15,15 +15,11 @@ const MODULES = [
 ];
 
 const Webmap = (props) => {
-  const { data = {}, editMode, height } = props;
-  const {
-    base = {},
-    layers = {},
-    id,
-    legend = {},
-    print = {},
-    zoom = {},
-  } = data;
+  const { editMode, height } = props;
+
+  const data = React.useMemo(() => props.data || {}, [props.data]);
+
+  const { base = {}, layers = {}, legend = {}, general = {} } = data;
 
   const { base_layer = '' } = base;
 
@@ -39,6 +35,7 @@ const Webmap = (props) => {
 
   const mapRef = React.useRef();
   const [modules, setModules] = React.useState({});
+
   const modules_loaded = React.useRef(false);
 
   React.useEffect(() => {
@@ -71,6 +68,7 @@ const Webmap = (props) => {
     }
   }, [setModules, options]);
 
+  // eslint-disable-next-line no-unused-vars
   const esri = React.useMemo(() => {
     if (Object.keys(modules).length === 0) return {};
     const {
@@ -122,30 +120,28 @@ const Webmap = (props) => {
     const view = new MapView({
       container: mapRef.current,
       map,
-      center: zoom?.long && zoom?.lat ? [zoom.long, zoom.lat] : [0, 40],
-      zoom: zoom?.zoom_level ? zoom?.zoom_level : 2,
+      center:
+        general?.long && general?.lat ? [general.long, general.lat] : [0, 40],
+      zoom: general?.zoom_level ? general?.zoom_level : 2,
       ui: {
         components: ['attribution'],
       },
     });
 
-    if (layers && layers[0] && zoom && zoom.centerOnExtent) {
-      view.whenLayerView(layers[0]).then(function (layerView) {
-        layerView.watch('updating', function (val) {
-          //  view.goTo(response.extent);
-
-          if (!val && layerView) {
-            layerView.queryExtent().then(function (response) {
-              ///go to the extent of all the graphics in the layer view
-              if (response.extent) view.goTo(response.extent);
-            });
-          }
+    if (layers && layers[0] && general && general.centerOnExtent) {
+      const firstLayer = layers[0];
+      firstLayer
+        .when(() => {
+          return firstLayer.queryExtent();
+        })
+        .then((response) => {
+          view.goTo(response.extent);
         });
-      });
     }
 
-    if (zoom?.show_zoom) {
-      const zoomPosition = zoom && zoom.position ? zoom.position : 'top-right';
+    if (general?.show_zoom) {
+      const zoomPosition =
+        general && general.zoom_position ? general.zoom_position : 'top-right';
       const zoomWidget = new Zoom({
         view: view,
       });
@@ -161,7 +157,7 @@ const Webmap = (props) => {
       const legendWidget = new Expand({
         content: new Legend({
           view: view,
-          style: 'classic', // other styles include 'classic'
+          style: 'classic',
         }),
         view: view,
         expanded: false,
@@ -172,9 +168,11 @@ const Webmap = (props) => {
       view.ui.add(legendWidget, legendPosition);
     }
 
-    if (print?.show_print) {
+    if (general?.show_print) {
       const printPosition =
-        print && print.position ? print.position : 'top-right';
+        general && general.print_position
+          ? general.print_position
+          : 'top-right';
       const printWidget = new Expand({
         content: new Print({
           view: view,
@@ -193,9 +191,8 @@ const Webmap = (props) => {
       });
     }
     return { view, map };
-  }, [modules, base_layer, map_layers]);
+  }, [modules, base_layer, map_layers, general, legend]);
 
-  const currentLayerView = esri.view?.layerViews?.items?.[0];
   return (
     <div>
       <div
@@ -209,4 +206,4 @@ const Webmap = (props) => {
   );
 };
 
-export default Webmap;
+export default React.memo(Webmap);

package/src/components/Blocks/EEAMap/components/widgets/ExtraViews.jsx

@@ -18,7 +18,7 @@ const ExtraViews = ({ data }) => {
   } = data;
 
   return (
-    <>
+    <div className="extra-eea-map-content">
       {map_data.layers?.map_layers[0] && (show_download || show_viewer) && (
         <div
           style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
@@ -56,7 +56,7 @@ const ExtraViews = ({ data }) => {
       )}
       {show_legend && <LegendWidget data={map_data} />}
       {description && serializeNodes(description)}
-    </>
+    </div>
   );
 };
 

package/src/components/Blocks/EEAMap/components/widgets/LayerSelectWidget.jsx

@@ -9,7 +9,9 @@ import aheadSVG from '@plone/volto/icons/ahead.svg';
 import { fetchArcgisData } from '../../utils';
 
 const LayerSelectWidget = (props) => {
-  const { onChange, value = {}, id } = props;
+  const { onChange, id } = props;
+
+  const value = React.useMemo(() => props.value || {}, [props.value]);
 
   const {
     available_layers,

package/src/components/Blocks/EEAMap/components/widgets/LayersPanel.jsx

@@ -3,7 +3,9 @@ import { Button } from 'semantic-ui-react';
 import LayerSelectWidget from './LayerSelectWidget';
 
 const LayersPanel = ({ data, onChange, block }) => {
-  const { map_layers } = data || {};
+  const map_layers = React.useMemo(() => data.map_layers || [], [
+    data.map_layers,
+  ]);
 
   React.useEffect(() => {
     if (!data.map_layers) {

package/src/components/Blocks/EEAMap/components/widgets/LegendWidget.jsx

@@ -50,12 +50,13 @@ const LayerLegend = ({ data, name }) => {
 };
 
 const LegendWidget = (props) => {
-  const { data = {} } = props;
+  const data = React.useMemo(() => props.data, [props.data]);
   const { layers = {} } = data;
   const { map_layers = [] } = layers;
   const [legendLayers, setLegendLayers] = React.useState([]);
 
   const activeLayer = map_layers.length > 0 ? map_layers[0]?.map_layer : '';
+
   const fetchLegend = async (url) => {
     let legendData = await fetchArcgisData(url);
 
@@ -103,4 +104,4 @@ const LegendWidget = (props) => {
   );
 };
 
-export default LegendWidget;
+export default React.memo(LegendWidget);

package/src/components/Blocks/EEAMap/components/widgets/MapEditorWidget.jsx

@@ -7,7 +7,10 @@ import PanelsSchema from './panelsSchema';
 
 const MapEditorWidget = (props) => {
   const [open, setOpen] = React.useState(false);
-  const { onChange = {}, block = {}, value = {}, id } = props;
+  const { onChange = {}, id } = props;
+  const block = React.useMemo(() => props.block, [props.block]);
+  const value = React.useMemo(() => props.value, [props.value]);
+
   const [intValue, setIntValue] = React.useState(value);
 
   const dataForm = { map_data: intValue };
@@ -15,12 +18,12 @@ const MapEditorWidget = (props) => {
     onChange(id, intValue);
 
     //set map data for screenshot
-    if (intValue.layers?.map_layers[0].map_layer?.map_service_url) {
-      onChange(
-        'url',
-        `${intValue.layers?.map_layers[0].map_layer?.map_service_url}?f=jsapi`,
-      );
-    }
+    // if (intValue.layers?.map_layers[0].map_layer?.map_service_url) {
+    //   onChange(
+    //     'url',
+    //     `${intValue.layers?.map_layers[0].map_layer?.map_service_url}?f=jsapi`,
+    //   );
+    // }
     setOpen(false);
   };
 

package/src/components/Blocks/EEAMap/components/widgets/VisualizationEditorWidget.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Modal, Button, Grid } from 'semantic-ui-react';
+import Webmap from '../Webmap';
+import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
+
+import PanelsSchema from './panelsSchema';
+
+const VisualizationEditorWidget = (props) => {
+  const [open, setOpen] = React.useState(false);
+  const { onChange = {}, id } = props;
+  const block = React.useMemo(() => props.block, [props.block]);
+  const value = React.useMemo(() => props.value, [props.value]);
+
+  const [intValue, setIntValue] = React.useState(value);
+
+  const dataForm = { map_data: intValue };
+  const handleApplyChanges = () => {
+    onChange(id, intValue);
+    setOpen(false);
+  };
+
+  const handleClose = () => {
+    setIntValue(value);
+    setOpen(false);
+  };
+
+  const handleChangeField = (id, fieldVal) => {
+    setIntValue(fieldVal);
+  };
+
+  let schema = PanelsSchema({ data: dataForm });
+
+  return (
+    <FormFieldWrapper {...props}>
+      <Button
+        floated="right"
+        size="tiny"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setOpen(true);
+        }}
+      >
+        Open Map Editor
+      </Button>
+      {open && (
+        <Modal
+          id="map-editor-modal"
+          style={{ width: '95% !important' }}
+          open={true}
+        >
+          <Modal.Content scrolling>
+            <Grid>
+              <Grid.Row>
+                <Grid.Column width={4}>
+                  <InlineForm
+                    block={block}
+                    title={schema.title}
+                    schema={schema}
+                    onChangeField={(id, value) => {
+                      handleChangeField(id, value);
+                    }}
+                    formData={dataForm}
+                  />
+                </Grid.Column>
+                <Grid.Column width={8}>
+                  <VisibilitySensor>
+                    <Webmap data={intValue} editMode={true} />
+                  </VisibilitySensor>
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Modal.Content>
+          <Modal.Actions>
+            <Grid>
+              <Grid.Row>
+                <Grid.Column width={8}></Grid.Column>
+                <Grid.Column width={4}>
+                  <Button onClick={() => handleClose()}>Close</Button>
+                  <Button color="green" onClick={() => handleApplyChanges()}>
+                    Apply changes
+                  </Button>
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Modal.Actions>
+        </Modal>
+      )}
+    </FormFieldWrapper>
+  );
+};
+
+export default VisualizationEditorWidget;

package/src/components/Blocks/EEAMap/components/widgets/VisualizationView.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Webmap from '../Webmap';
+
+const VisualizationView = (props) => {
+  const { content = {} } = props;
+
+  const { map_editor_widget = {} } = content;
+
+  return (
+    <div>
+      <Webmap data={map_editor_widget} />
+    </div>
+  );
+};
+
+export default VisualizationView;

package/src/components/Blocks/EEAMap/components/widgets/panelsSchema.js

@@ -56,45 +56,21 @@ const MapLayersSchema = {
   required: [],
 };
 
-const PrintSchema = {
-  title: 'Print',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Print',
-      fields: ['show_print', 'position'],
-    },
-  ],
-  properties: {
-    show_print: {
-      title: 'Show print',
-      type: 'boolean',
-    },
-    position: {
-      title: 'Print position',
-      choices: ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
-        (n) => {
-          return [n, n];
-        },
-      ),
-    },
-  },
-  required: [],
-};
-
-const ZoomSchema = ({ data = {} }) => {
-  const centerOnExtent = data?.map_data?.zoom?.centerOnExtent;
+const GeneralSchema = ({ data = {} }) => {
+  const centerOnExtent = data?.map_data?.general?.centerOnExtent;
 
   return {
-    title: 'Zoom',
+    title: 'General',
     fieldsets: [
       {
         id: 'default',
         title: 'Zoom',
         fields: [
+          'show_print',
+          'print_position',
           'show_zoom',
           'centerOnExtent',
-          'position',
+          'zoom_position',
           ...(!centerOnExtent ? ['zoom_level', 'long', 'lat'] : []),
         ],
       },
@@ -107,9 +83,10 @@ const ZoomSchema = ({ data = {} }) => {
       centerOnExtent: {
         title: 'Center on extent',
         type: 'boolean',
-        description: 'This will override latitude/longitude/zoom level',
+        description:
+          'This will override latitude/longitude/zoom level and will lock zoom/moving the map.',
       },
-      position: {
+      zoom_position: {
         title: 'Zoom position',
         choices: ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
           (n) => {
@@ -129,13 +106,25 @@ const ZoomSchema = ({ data = {} }) => {
         title: 'Latitude',
         type: 'number',
       },
+      show_print: {
+        title: 'Show print',
+        type: 'boolean',
+      },
+      print_position: {
+        title: 'Print position',
+        choices: ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
+          (n) => {
+            return [n, n];
+          },
+        ),
+      },
     },
     required: [],
   };
 };
 
 export default ({ data = {} }) => {
-  const zoomSchema = ZoomSchema({ data });
+  const generalSchema = GeneralSchema({ data });
 
   return {
     title: 'Map Editor',
@@ -151,6 +140,10 @@ export default ({ data = {} }) => {
         title: 'Panels',
         widget: 'object_types_widget',
         schemas: [
+          {
+            id: 'general',
+            schema: generalSchema,
+          },
           {
             id: 'base',
             schema: BaseLayerSchema,
@@ -159,14 +152,6 @@ export default ({ data = {} }) => {
             id: 'layers',
             schema: MapLayersSchema,
           },
-          {
-            id: 'print',
-            schema: PrintSchema,
-          },
-          {
-            id: 'zoom',
-            schema: zoomSchema,
-          },
         ],
       },
     },

package/src/index.js

@@ -3,8 +3,25 @@ import world from '@plone/volto/icons/world.svg';
 import LayerSelectWidget from './components/Blocks/EEAMap/components/widgets/LayerSelectWidget';
 import MapEditorWidget from './components/Blocks/EEAMap/components/widgets/MapEditorWidget';
 import ObjectTypesWidget from './components/Blocks/EEAMap/components/widgets/ObjectTypesWidget';
+import VisualizationEditorWidget from './components/Blocks/EEAMap/components/widgets/VisualizationEditorWidget';
+import VisualizationView from './components/Blocks/EEAMap/components/widgets/VisualizationView';
 
 export default (config) => {
+  config.settings.allowed_cors_destinations = [
+    ...(config.settings.allowed_cors_destinations || []),
+    'land.discomap.eea.europa.eu',
+    'marine.discomap.eea.europa.eu',
+    'climate.discomap.eea.europa.eu',
+    'image.discomap.eea.europa.eu',
+    'ldp.discomap.eea.europa.eu',
+    'bio.discomap.eea.europa.eu',
+    'air.discomap.eea.europa.eu',
+    'maratlas.discomap.eea.europa.eu',
+    'forest.discomap.eea.europa.eu',
+    'water.discomap.eea.europa.eu',
+    'noise.discomap.eea.europa.eu',
+    'copernicus.discomap.eea.europa.eu',
+  ];
   config.blocks.blocksConfig.eea_map_block = {
     id: 'eea_map_block', // The name (id) of the block
     title: 'EEA Map', // The display name of the block
@@ -37,5 +54,10 @@ export default (config) => {
   config.widgets.widget.map_layers_widget = LayerSelectWidget;
   config.widgets.widget.object_types_widget = ObjectTypesWidget;
 
+  //map editor for the visualization(content-type)
+  config.widgets.id.map_editor_widget = VisualizationEditorWidget;
+  //map viewer for the visualization(content-type)
+  config.views.contentTypesViews.map_visualization = VisualizationView;
+
   return config;
 };