@eeacms/volto-eea-map 0.1.13 → 0.1.14

package/CHANGELOG.md

@@ -4,8 +4,26 @@ 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.14](https://github.com/eea/volto-eea-map/compare/0.1.13...0.1.14)
+
+- new sources styles, icons from remixicon [`c9cca2a`](https://github.com/eea/volto-eea-map/commit/c9cca2a5e41322cfdeca1865b47a1892514c1cfc)
+- reorganize & clean [`a902b89`](https://github.com/eea/volto-eea-map/commit/a902b8945389b19b388e85e00066b2c46a9e1a2e)
+- Layer widget improvements [`99abe57`](https://github.com/eea/volto-eea-map/commit/99abe5722590719ac7e640de44a69ee19fcecfdf)
+- Change data queries cards [`8d3c742`](https://github.com/eea/volto-eea-map/commit/8d3c74239f62782737108c25e84683239e6ab12f)
+- Set default settings [`2c26f57`](https://github.com/eea/volto-eea-map/commit/2c26f571618d289158c7d32fd9814edcd29a7c60)
+- Add description to layer [`cccfd59`](https://github.com/eea/volto-eea-map/commit/cccfd598060c4228215a5add1da3e159312966b2)
+- only embed viz for now [`6bb7daf`](https://github.com/eea/volto-eea-map/commit/6bb7daf458a47bd185870ec3627a542f8ba715bc)
+- Visualization improvements [`2a77f8b`](https://github.com/eea/volto-eea-map/commit/2a77f8bba1f6fd840d41043ee41b1b3bd23807f3)
+- Cleanup [`6d6ceb9`](https://github.com/eea/volto-eea-map/commit/6d6ceb99768ff477a727cf217e48099e6f2d1a59)
+- Add all query parameters with all values [`2f8c617`](https://github.com/eea/volto-eea-map/commit/2f8c61711154953ec25e20614b4ad96ed2bf592b)
+- Data query widget visual improvements [`7eb3144`](https://github.com/eea/volto-eea-map/commit/7eb3144ad58a839ccc96f22d58a441b245893ea7)
+- Data query widget more responsive to changes [`bb86329`](https://github.com/eea/volto-eea-map/commit/bb863299d51627a28f02e2cda133fc0e3bf9ebe9)
+
 #### [0.1.13](https://github.com/eea/volto-eea-map/compare/0.1.12...0.1.13)
 
+> 22 August 2022
+
+- Enable Embed EEA map access to data_query [`#13`](https://github.com/eea/volto-eea-map/pull/13)
 - update embed map with data_query [`719c007`](https://github.com/eea/volto-eea-map/commit/719c00776dff7ba63bbd57761a2c86ec5345a911)
 
 #### [0.1.12](https://github.com/eea/volto-eea-map/compare/0.1.11...0.1.12)

package/package.json

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

package/src/actionTypes.js

@@ -0,0 +1 @@
+export const GET_MAP_VISUALIZATION = 'GET_MAP_VISUALIZATION';

package/src/actions.js

@@ -1,4 +1,4 @@
-import { GET_MAP_VISUALIZATION } from './constants';
+import { GET_MAP_VISUALIZATION } from './actionTypes';
 
 export function getVisualization(path) {
   return {

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

@@ -11,7 +11,7 @@ import View from './View';
 import { getContent } from '@plone/volto/actions';
 
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
-import './styles/map.css';
+import '../../../styles/map.css';
 
 const Edit = (props) => {
   const { block, data, onChangeBlock, selected, id } = props;

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

@@ -39,16 +39,14 @@ export const Schema = (props) => {
         title: 'Show legend',
         type: 'boolean',
       },
-      show_download: {
-        title: 'Show download',
-        type: 'boolean',
-      },
+
       show_viewer: {
         title: 'Show web viewer',
         type: 'boolean',
       },
       data_query_params: {
-        title: 'Data query parameters',
+        title: 'Query parameters',
+        description: 'ddafdfas',
         widget: 'data_query_widget',
       },
     },

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

@@ -3,8 +3,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 
-import Webmap from './components/Webmap';
-import ExtraViews from './components/widgets/ExtraViews';
+import Webmap from '../../Webmap';
+import ExtraViews from '../../ExtraViews';
+
 import { PrivacyProtection } from '@eeacms/volto-embed';
 import { getContent } from '@plone/volto/actions';
 

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

@@ -10,7 +10,7 @@ import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import View from './View';
 import { Schema } from './Schema';
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
-import './styles/map.css';
+import '../../../styles/map.css';
 
 const Edit = (props) => {
   const { block, data, onChangeBlock, selected, id } = props;
@@ -20,12 +20,9 @@ const Edit = (props) => {
     props.getContent(data.vis_url, null, id);
     //    eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.vis_url]);
-
   React.useEffect(() => {
-    if (
-      !data.data_query_params ||
-      props.data_query !== data.data_query_params
-    ) {
+    const diffParams = props.data_query !== data.data_query_params;
+    if (diffParams || !data.data_query_params) {
       onChangeBlock(block, {
         ...data,
         data_query_params: props.data_query,
@@ -36,7 +33,7 @@ const Edit = (props) => {
 
   return (
     <div>
-      <View data={data} id={id} />
+      <View data={data} id={id} isEdit={true} />
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}

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

@@ -10,10 +10,10 @@ export const Schema = (props) => {
           'description',
           'height',
           'show_legend',
-          'show_download',
           'show_viewer',
           'show_sources',
-          'data_query_params',
+          'enable_queries',
+          ...(props.data.enable_queries ? ['data_query_params'] : []),
         ],
       },
     ],
@@ -32,22 +32,28 @@ export const Schema = (props) => {
       },
       show_sources: {
         title: 'Show sources',
+        description: 'Will show sources set in this page Data provenance',
         type: 'boolean',
       },
       show_legend: {
         title: 'Show legend',
         type: 'boolean',
       },
-      show_download: {
-        title: 'Show download',
+      show_viewer: {
+        title: 'Show API link',
+        description: 'Open the map on ArcGIS js service',
         type: 'boolean',
       },
-      show_viewer: {
-        title: 'Show web viewer',
+      enable_queries: {
+        title: 'Enable queries',
+        description:
+          'Will import Criteria from content-type and try to query map layer fields.',
         type: 'boolean',
       },
       data_query_params: {
-        title: 'Data query parameters',
+        title: 'Query parameters',
+        description:
+          'When using page level parameters to filter the map, please map those to the corresponding field name from the ArcGIS service',
         widget: 'data_query_widget',
       },
     },

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

@@ -4,85 +4,99 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 
 import { PrivacyProtection } from '@eeacms/volto-embed';
-import Webmap from '../EEAMap/components/Webmap';
-import ExtraViews from '../EEAMap/components/widgets/ExtraViews';
+
 import { getContent } from '@plone/volto/actions';
+import { getVisualization } from '../../../actions';
+import Webmap from '../../Webmap';
+import ExtraViews from '../../ExtraViews';
 
 const View = (props) => {
-  const { data, viz_content = {}, id } = props || {};
-  const { height = '', vis_url = '' } = data;
+  const { data, viz_content = {}, id, isEdit, map_visualization } = props || {};
+  const { height = '', vis_url = '', enable_queries } = data;
 
-  const { map_visualization_data = '', data_provenance = {} } =
-    viz_content || {};
+  const { data_provenance = {} } = viz_content || {};
 
-  const [mapData, setMapData] = React.useState(map_visualization_data);
+  const [mapData, setMapData] = React.useState(map_visualization);
 
   React.useEffect(() => {
-    if (vis_url && !map_visualization_data) {
+    if (vis_url) {
       props.getContent(vis_url, null, id);
+      props.getVisualization(vis_url);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vis_url]);
+  }, [vis_url, enable_queries]);
 
   React.useEffect(() => {
+    const query_params = isEdit
+      ? props.data.data_query_params
+      : props.data_query;
+    var altMapData = { ...map_visualization };
+
     if (
-      props.data_query &&
-      props.data_query.length > 0 &&
-      map_visualization_data
+      enable_queries &&
+      query_params &&
+      query_params.length > 0 &&
+      altMapData.layers &&
+      altMapData.layers.map_layers &&
+      altMapData.layers.map_layers.length > 0
     ) {
-      let altMapData = { ...map_visualization_data };
+      let rules = [];
+      altMapData.layers.map_layers.forEach((l, j) => {
+        query_params.forEach((param, i) => {
+          const matchingFields =
+            l.map_layer && l.map_layer.fields && l.map_layer.fields.length > 0
+              ? l.map_layer.fields.filter(
+                  (field, k) =>
+                    field.name === param.alias || field.name === param.i,
+                )
+              : [];
 
-      props.data_query.forEach((param, i) => {
-        if (
-          map_visualization_data.layers &&
-          map_visualization_data.layers.map_layers &&
-          map_visualization_data.layers.map_layers.length > 0
-        ) {
-          map_visualization_data.layers.map_layers.forEach((l, j) => {
-            if (
-              l.map_layer &&
-              l.map_layer.fields &&
-              l.map_layer.fields.length > 0 &&
-              l.map_layer.fields.filter(
-                (field, k) =>
-                  field.name === param.alias || field.name === param.i,
-              ).length > 0
-            ) {
-              let autoQuery = {
-                combinator: 'or',
-                rules: props.data_query.map((q, i) => {
+          matchingFields.forEach((m, i) => {
+            const newRules = param.v
+              ? param.v.map((paramVal, i) => {
                   return {
-                    field: param.alias ? param.alias : param.i,
+                    field: m.name,
                     operator: '=',
-                    value: param.v[0],
+                    value: paramVal,
                   };
-                }),
-              };
-              altMapData.layers.map_layers[j].map_layer.query = autoQuery;
-            }
+                })
+              : [];
+            rules = rules.concat(newRules);
           });
-        }
+        });
+        let autoQuery = {
+          combinator: 'or',
+          rules,
+        };
+        altMapData.layers.map_layers[j].map_layer.query = autoQuery;
       });
-      setMapData(altMapData);
     }
-  }, [props.data_query, map_visualization_data]);
+    setMapData(altMapData);
+  }, [
+    map_visualization,
+    props.data,
+    props.data_query,
+    viz_content,
+    isEdit,
+    enable_queries,
+  ]);
 
   return (
     <div>
       <PrivacyProtection data={data} {...props}>
-        {map_visualization_data && (
+        {mapData && (
           <div>
             <Webmap data={mapData} height={height} />
             <ExtraViews
               data={{
                 ...data,
                 data_provenance,
-                map_data: map_visualization_data,
+                map_data: map_visualization,
               }}
             />
           </div>
         )}
-        {!map_visualization_data && (
+        {!mapData && (
           <p>No map view to show. Set visualization in block configuration.</p>
         )}
       </PrivacyProtection>
@@ -94,10 +108,14 @@ export default compose(
   connect(
     (state, props) => ({
       data_query: state.content.data.data_query,
+      state,
+      map_visualization:
+        state.map_visualizations?.data[props.data.vis_url]?.data,
       viz_content: state.content.subrequests?.[props.id]?.data,
     }),
     {
       getContent,
+      getVisualization,
     },
   ),
 )(View);

package/src/components/ExtraViews.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+
+import LegendWidget from './widgets/LegendWidget';
+import { serializeNodes } from 'volto-slate/editor/render';
+
+import codeSVG from '../static/code-line.svg';
+
+const ExtraViews = ({ data }) => {
+  const {
+    map_data = {},
+    description,
+    show_legend,
+    show_viewer,
+    show_sources,
+    data_provenance = {},
+  } = data;
+  return (
+    <div className="extra-eea-map-content">
+      {map_data && map_data.layers?.map_layers[0] && show_viewer && (
+        <div
+          style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
+        >
+          {show_viewer && (
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href={
+                `https://www.arcgis.com/home/webmap/viewer.html?url=` +
+                `${map_data.layers.map_layers[0].map_layer.map_service_url}&source=sd`
+              }
+            >
+              <Button size="tiny">
+                <Button.Content>
+                  <img
+                    className="extra-view-external-button"
+                    src={codeSVG}
+                    alt=""
+                    title="Show API link"
+                  />
+                </Button.Content>
+              </Button>
+            </a>
+          )}
+        </div>
+      )}
+      {show_legend && map_data && <LegendWidget data={map_data} />}
+      {show_sources && (
+        <>
+          {data_provenance &&
+          data_provenance.data &&
+          data_provenance.data.length > 0 ? (
+            <div>
+              <h3>Sources:</h3>
+              <ul>
+                {data_provenance.data.map((param, i) => (
+                  <li key={i}>
+                    <div className="map_source_param_container">
+                      <UniversalLink
+                        className="map_source_title"
+                        href={param.link}
+                      >
+                        {param.title}
+                      </UniversalLink>
+                      ,
+                      <span className="map_source_description">
+                        {param.organisation}
+                      </span>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : (
+            <p>Data provenance is not set for visualization used or page</p>
+          )}
+        </>
+      )}
+      {description && serializeNodes(description)}
+    </div>
+  );
+};
+
+export default ExtraViews;

package/src/components/{Blocks/EEAMap/components/Webmap.jsx → Webmap.jsx}

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React from 'react';
-import { withDeviceSize } from '@eeacms/volto-eea-map/hocs';
+import { withDeviceSize } from '../hocs';
 import { loadModules } from 'esri-loader';
 import { formatQuery } from 'react-querybuilder';
 
@@ -20,8 +20,8 @@ const Webmap = (props) => {
   const { editMode, height, id } = props;
 
   const data = React.useMemo(() => props.data || {}, [props.data]);
-  const device = React.useMemo(() => props.device || {}, [props.device]);
 
+  const device = React.useMemo(() => props.device || {}, [props.device]);
   const { base = {}, layers = {}, legend = {}, general = {} } = data;
 
   const { base_layer = '' } = base;
@@ -32,6 +32,7 @@ const Webmap = (props) => {
     layers.map_layers
       .filter(({ map_layer }) => map_layer)
       .map((l, i) => l.map_layer);
+
   const options = {
     css: true,
   };
@@ -86,34 +87,35 @@ const Webmap = (props) => {
       Zoom,
     } = modules;
     let layers =
-      map_layers &&
-      map_layers.length > 0 &&
-      map_layers
-        .filter(({ map_service_url, layer }) => map_service_url && layer)
-        .map(({ map_service_url, layer, query = '' }) => {
-          const url = `${map_service_url}/${layer}`;
-          let mapLayer;
-          switch (layer.type) {
-            case 'Raster Layer':
-              mapLayer = new MapImageLayer({
-                url: map_service_url,
-              });
-              break;
-            case 'Feature Layer':
-              mapLayer = new FeatureLayer({
-                url,
-                definitionExpression: query ? formatQuery(query, 'sql') : '',
-              });
-              break;
-            case 'Group Layer':
-              mapLayer = new GroupLayer({ url });
-              break;
-            default:
-              break;
-          }
-          return mapLayer;
-        });
-
+      map_layers && map_layers.length > 0
+        ? map_layers
+            .filter(({ map_service_url, layer }) => map_service_url && layer)
+            .map(({ map_service_url, layer, query = '' }) => {
+              const url = `${map_service_url}/${layer}`;
+              let mapLayer;
+              switch (layer.type) {
+                case 'Raster Layer':
+                  mapLayer = new MapImageLayer({
+                    url: map_service_url,
+                  });
+                  break;
+                case 'Feature Layer':
+                  mapLayer = new FeatureLayer({
+                    url,
+                    definitionExpression: query
+                      ? formatQuery(query, 'sql')
+                      : '',
+                  });
+                  break;
+                case 'Group Layer':
+                  mapLayer = new GroupLayer({ url });
+                  break;
+                default:
+                  break;
+              }
+              return mapLayer;
+            })
+        : [];
     const map = new Map({
       basemap: base_layer || 'hybrid',
       layers,
@@ -193,7 +195,7 @@ const Webmap = (props) => {
       });
     }
     return { view, map };
-  }, [modules, base_layer, map_layers, general, legend]);
+  }, [modules, data, data.layers, map_layers]);
 
   return (
     <div>

package/src/components/index.js

@@ -1,7 +1,7 @@
-import EEAMapView from './Blocks/EEAMap/View';
-import EEAMapEdit from './Blocks/EEAMap/Edit';
+export EEAMapView from './Blocks/EEAMap/View';
+export EEAMapEdit from './Blocks/EEAMap/Edit';
+export Webmap from './Webmap';
+export ExtraViews from './ExtraViews';
 
-import EmbedMapView from './Blocks/EmbedEEAMap/View';
-import EmbedMapEdit from './Blocks/EmbedEEAMap/Edit';
-
-export { EEAMapEdit, EEAMapView, EmbedMapView, EmbedMapEdit };
+export EmbedMapView from './Blocks/EmbedEEAMap/View';
+export EmbedMapEdit from './Blocks/EmbedEEAMap/Edit';

package/src/components/visualization/VisualizationEditorWidget.jsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { Modal, Button, Grid } from 'semantic-ui-react';
+
+import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+
+import PanelsSchema from './panelsSchema';
+import Webmap from '../Webmap';
+
+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 = (val) => {
+    setIntValue(val);
+  };
+
+  let schema = PanelsSchema({ data: dataForm });
+
+  React.useEffect(() => {
+    if (!intValue.general) {
+      setIntValue({
+        ...intValue,
+        general: {
+          print_position: 'top-right',
+          zoom_position: 'top-right',
+          centerOnExtent: true,
+        },
+      });
+    }
+    if (!intValue.base) {
+      setIntValue({
+        ...intValue,
+        base: {
+          base_layer: 'gray-vector',
+        },
+      });
+    }
+  }, [intValue]);
+
+  return (
+    <FormFieldWrapper {...props}>
+      <div className="wrapper">
+        <Button
+          floated="right"
+          size="tiny"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpen(true);
+          }}
+        >
+          Open Map Editor
+        </Button>
+      </div>
+
+      {open && (
+        <Modal
+          id="map-editor-modal"
+          style={{ width: '95% !important' }}
+          open={true}
+        >
+          <Modal.Content scrolling>
+            <Grid stackable reversed="mobile vertically tablet vertically">
+              <Grid.Column
+                mobile={12}
+                tablet={12}
+                computer={5}
+                className="map-editor-column"
+              >
+                <InlineForm
+                  block={block}
+                  schema={schema}
+                  onChangeField={(id, value) => {
+                    handleChangeField(value);
+                  }}
+                  formData={dataForm}
+                />
+              </Grid.Column>
+              <Grid.Column mobile={12} tablet={12} computer={7}>
+                <div className="webmap-container">
+                  <Webmap data={intValue} editMode={true} />
+                </div>
+              </Grid.Column>
+            </Grid>
+          </Modal.Content>
+          <Modal.Actions>
+            <Grid>
+              <Grid.Row>
+                <div className="map-edit-actions-container">
+                  <Button onClick={handleClose}>Close</Button>
+                  <Button color="green" onClick={handleApplyChanges}>
+                    Apply changes
+                  </Button>
+                </div>
+              </Grid.Row>
+            </Grid>
+          </Modal.Actions>
+        </Modal>
+      )}
+      <Webmap data={value} editMode={true} />
+    </FormFieldWrapper>
+  );
+};
+
+export default VisualizationEditorWidget;

package/src/components/{Blocks/EEAMap/components/widgets → visualization}/panelsSchema.js

@@ -79,7 +79,6 @@ const GeneralSchema = ({ data = {} }) => {
         type: 'boolean',
         description:
           'This will override latitude/longitude/zoom level and will lock zoom/moving the map.',
-        default: true,
       },
       zoom_position: {
         title: 'Zoom position',