@eeacms/volto-eea-map 0.1.6 → 0.1.9

package/CHANGELOG.md

@@ -4,8 +4,47 @@ 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.9](https://github.com/eea/volto-eea-map/compare/0.1.8...0.1.9)
+
+- pinpoint query builder [`6184b0e`](https://github.com/eea/volto-eea-map/commit/6184b0e1dcee48e7d34bf56bc1c878438d07f987)
+- build query widget [`7a9d74a`](https://github.com/eea/volto-eea-map/commit/7a9d74a6fdac32a8b424c5ca97edd42df436cbe2)
+
+#### [0.1.8](https://github.com/eea/volto-eea-map/compare/0.1.7...0.1.8)
+
+> 11 August 2022
+
+- Integration & new block for Map Visualization content-type [`#8`](https://github.com/eea/volto-eea-map/pull/8)
+- remove title on map edit widget [`1d00707`](https://github.com/eea/volto-eea-map/commit/1d0070716a743ea7f26c5f877b723492319fcecd)
+- update query by stored value [`c0f6ddd`](https://github.com/eea/volto-eea-map/commit/c0f6dddadaaf28de5b9914214acf735a166fae88)
+- stylelint [`511845a`](https://github.com/eea/volto-eea-map/commit/511845a319137dfe4e1c0c9846ee5ccb7656b32b)
+- visual candy [`2b24975`](https://github.com/eea/volto-eea-map/commit/2b249758f30133d8080793e892d0771e9b63dea5)
+- responsive hoc only keep device size [`444f8b3`](https://github.com/eea/volto-eea-map/commit/444f8b3df2dd58a1f1e5bd6c6a90c1e9919696a1)
+- responsive improvements on edit widget [`1dcdda0`](https://github.com/eea/volto-eea-map/commit/1dcdda077f5aaa8ddd256d2bec2f1018a15e066d)
+- map is sticky [`64f3874`](https://github.com/eea/volto-eea-map/commit/64f3874648f0ede23502998e9165e86538e44728)
+- simplified layer edit [`b64348c`](https://github.com/eea/volto-eea-map/commit/b64348c962647cdfc48d3328c5effb3b02b6217c)
+- no consoles [`1387128`](https://github.com/eea/volto-eea-map/commit/1387128037abb314798326fa3c47b52a13d0415f)
+- show if zoom/print position [`c4d7107`](https://github.com/eea/volto-eea-map/commit/c4d7107e874616c2246ec883d07eb59fad76b21e)
+- lint fix [`cc497bd`](https://github.com/eea/volto-eea-map/commit/cc497bd8fe61d8867b74a8a16bc4868ccf088d55)
+- fixes on webmap [`1c4506b`](https://github.com/eea/volto-eea-map/commit/1c4506b227d3a0ad0f919e3ff826700304b0620a)
+- new embed eea map block to work with visualizations [`be4f2b0`](https://github.com/eea/volto-eea-map/commit/be4f2b00f92ea9dedc359e8c2620a9a31f4b5b6b)
+- remove vis_url logic, will be moved in a new block [`13ebe94`](https://github.com/eea/volto-eea-map/commit/13ebe94c6c339fc827c019aab0a698aa431c5b78)
+- Updates for map visualization [`895d463`](https://github.com/eea/volto-eea-map/commit/895d46313e9b65c6a5f420284fb9459296ed83f4)
+
+#### [0.1.7](https://github.com/eea/volto-eea-map/compare/0.1.6...0.1.7)
+
+> 9 August 2022
+
+- Develop [`#7`](https://github.com/eea/volto-eea-map/pull/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)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.6",
+  "version": "0.1.9",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -24,6 +24,7 @@
     "@eeacms/volto-embed": "^2.0.1",
     "@plone/scripts": "*",
     "esri-loader": "3.5.0",
+    "react-querybuilder": "4.2.3",
     "volto-slate": "*"
   },
   "devDependencies": {

package/src/actions.js

@@ -0,0 +1,12 @@
+import { GET_MAP_VISUALIZATION } from './constants';
+
+export function getVisualization(path) {
+  return {
+    type: GET_MAP_VISUALIZATION,
+    path,
+    request: {
+      op: 'get',
+      path: `${path}/@map-visualization`,
+    },
+  };
+}

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

@@ -7,13 +7,12 @@ import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
 import './styles/map.css';
 
 const Edit = (props) => {
-  const { block, data, onChangeBlock, selected } = props;
+  const { block, data, onChangeBlock, selected, id } = props;
   const schema = React.useMemo(() => Schema(props), [props]);
 
-  if (__SERVER__) return '';
   return (
     <div>
-      <View data={data} />
+      <View data={data} id={id} />
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}

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

@@ -1,4 +1,4 @@
-export const Schema = () => {
+export const Schema = (props) => {
   return {
     title: 'EEA Map Block',
     fieldsets: [
@@ -6,10 +6,10 @@ export const Schema = () => {
         id: 'default',
         title: 'Default',
         fields: [
+          'map_data',
+          //...(use_visualization ? ['vis_url'] : ['map_data']),
           'description',
           'height',
-          'map_data',
-          'show_sources',
           'show_legend',
           'show_download',
           'show_viewer',
@@ -17,6 +17,16 @@ export const Schema = () => {
       },
     ],
     properties: {
+      // use_visualization: {
+      //   title: 'Use visualization',
+      //   description:
+      //     'This setting will enable importing the map data from a visualization. If is enabled, editing the map manually will not be possible',
+      //   type: 'boolean',
+      // },
+      // vis_url: {
+      //   widget: 'object_by_path',
+      //   title: 'Visualization',
+      // },
       height: {
         title: 'Height',
         type: 'number',
@@ -30,10 +40,6 @@ export const Schema = () => {
         description: 'Open the map customization interface',
         widget: 'map_edit_widget',
       },
-      show_sources: {
-        title: 'Show sources',
-        type: 'boolean',
-      },
       show_legend: {
         title: 'Show legend',
         type: 'boolean',

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

@@ -1,19 +1,17 @@
 import React from 'react';
+
 import Webmap from './components/Webmap';
 import ExtraViews from './components/widgets/ExtraViews';
 import { PrivacyProtection } from '@eeacms/volto-embed';
 
 const View = (props) => {
-  const { data } = props || {};
-
-  const { map_data = {} } = data;
-
-  if (__SERVER__) return '';
+  const { data, id } = props || {};
+  const { map_data = {}, height = '' } = data;
 
   return (
     <div>
       <PrivacyProtection data={data} {...props}>
-        <Webmap data={map_data} />
+        <Webmap data={map_data} height={height} id={id} />
         <ExtraViews data={data} />
       </PrivacyProtection>
     </div>

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

@@ -1,6 +1,8 @@
 /* eslint-disable */
 import React from 'react';
+import { withDeviceSize } from '@eeacms/volto-eea-map/hocs';
 import { loadModules } from 'esri-loader';
+import { formatQuery } from 'react-querybuilder';
 
 const MODULES = [
   'esri/Map',
@@ -15,9 +17,10 @@ const MODULES = [
 ];
 
 const Webmap = (props) => {
-  const { editMode, height } = props;
+  const { editMode, height, id } = props;
 
   const data = React.useMemo(() => props.data || {}, [props.data]);
+  const device = React.useMemo(() => props.device || {}, [props.device]);
 
   const { base = {}, layers = {}, legend = {}, general = {} } = data;
 
@@ -89,7 +92,6 @@ const Webmap = (props) => {
         .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':
@@ -100,7 +102,7 @@ const Webmap = (props) => {
             case 'Feature Layer':
               mapLayer = new FeatureLayer({
                 url,
-                definitionExpression: query,
+                definitionExpression: query ? formatQuery(query, 'sql') : '',
               });
               break;
             case 'Group Layer':
@@ -139,9 +141,10 @@ const Webmap = (props) => {
         });
     }
 
-    if (general?.show_zoom) {
-      const zoomPosition =
-        general && general.zoom_position ? general.zoom_position : 'top-right';
+    const zoomPosition =
+      general && general.zoom_position ? general.zoom_position : '';
+
+    if (zoomPosition) {
       const zoomWidget = new Zoom({
         view: view,
       });
@@ -168,11 +171,10 @@ const Webmap = (props) => {
       view.ui.add(legendWidget, legendPosition);
     }
 
-    if (general?.show_print) {
-      const printPosition =
-        general && general.print_position
-          ? general.print_position
-          : 'top-right';
+    const printPosition =
+      general && general.print_position ? general.print_position : '';
+
+    if (printPosition) {
       const printWidget = new Expand({
         content: new Print({
           view: view,
@@ -197,7 +199,12 @@ const Webmap = (props) => {
     <div>
       <div
         style={{
-          height: height && !editMode ? `${height}px` : '500px',
+          height:
+            height && !editMode
+              ? `${height}px`
+              : device === 'tablet' || device === 'mobile'
+              ? '300px'
+              : '500px',
         }}
         ref={mapRef}
         className="esri-map"
@@ -206,4 +213,4 @@ const Webmap = (props) => {
   );
 };
 
-export default React.memo(Webmap);
+export default withDeviceSize(React.memo(Webmap));

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

@@ -1,10 +1,17 @@
 import React from 'react';
 import { Icon } from '@plone/volto/components';
 import { Input, Select, Button, Grid } from 'semantic-ui-react';
+import { QueryBuilder } from 'react-querybuilder';
+import 'react-querybuilder/dist/query-builder.css';
+// import {
+//   bootstrapControlClassnames,
+//   bootstrapControlElements,
+// } from 'react-querybuilder/bootstrap';
 
 import checkSVG from '@plone/volto/icons/check.svg';
 import closeSVG from '@plone/volto/icons/clear.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
+import resetSVG from '@plone/volto/icons/reset.svg';
 
 import { fetchArcgisData } from '../../utils';
 
@@ -30,7 +37,9 @@ const LayerSelectWidget = (props) => {
   const [availableLayers, setAvailableLayers] = React.useState(
     available_layers,
   );
-  const [layerQuery, setLayerQuery] = React.useState(query);
+  //const [layerQuery, setLayerQuery] = React.useState(query);
+
+  const [builtQuery, setBuiltQuery] = React.useState(query);
 
   const handleServiceUrlCheck = async () => {
     // fetch url, save it, populate layers options
@@ -78,14 +87,34 @@ const LayerSelectWidget = (props) => {
       map_data: mapData,
       query: '',
     });
-    setLayerQuery('');
+    setBuiltQuery('');
   };
 
   const handleQueryLayer = () => {
-    onChange(id, {
-      ...value,
-      query: layerQuery,
-    });
+    if (builtQuery) {
+      onChange(id, {
+        ...value,
+        query: builtQuery,
+      });
+    }
+  };
+
+  const handleChangeServiceUrl = (value) => {
+    setServiceUrlError('');
+    setCheckColor('');
+    setServiceUrl(value);
+    setAvailableLayers('');
+    setBuiltQuery('');
+    setSelectedLayer('');
+  };
+
+  const handleReset = () => {
+    setServiceUrlError('');
+    setServiceUrl(map_service_url);
+    setCheckColor('');
+    setAvailableLayers(available_layers);
+    setBuiltQuery('');
+    setSelectedLayer(layer);
   };
 
   return (
@@ -95,74 +124,122 @@ const LayerSelectWidget = (props) => {
       }}
     >
       <Grid>
-        <h4>Service URL</h4>
+        <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
+          Service URL
+        </h5>
         <Grid.Row>
           <Input
             type="text"
-            onChange={(e, { value }) => setServiceUrl(value)}
-            style={{ width: '70%' }}
+            onChange={(e, { value }) => handleChangeServiceUrl(value)}
+            style={{ width: '100%' }}
+            error={serviceUrlError}
             value={serviceUrl}
-            action
-            actionPosition="right"
-          >
-            <input />
+            // action
+            // actionPosition="right"
+          ></Input>
+
+          <span style={{ fontSize: '12px', color: 'darkred' }}>
+            {serviceUrlError.error}
+          </span>
+        </Grid.Row>
+        {serviceUrl && (
+          <Grid.Row>
+            {serviceUrl !== map_service_url && (
+              <Button
+                size="small"
+                compact
+                className="layer-reset-button"
+                onClick={handleReset}
+              >
+                <Icon name={resetSVG} title="Reset" size="20px" />
+              </Button>
+            )}
             <Button
-              type="submit"
-              size="tiny"
-              compact
+              size="small"
               color={checkColor}
+              compact
+              className="layer-check-button"
               onClick={handleServiceUrlCheck}
             >
               <Icon
                 name={serviceUrlError ? closeSVG : checkSVG}
-                title="Check Url"
-                size="17px"
+                title="Submit"
+                size="20px"
               />
             </Button>
-          </Input>
-        </Grid.Row>
-        <h4>Layer</h4>
-        <Grid.Row>
-          <Select
-            onChange={(e, { value }) => handleSelectLayer(value)}
-            options={availableLayers}
-            style={{ width: '100%' }}
-            placeholder="Select layer"
-            value={selectedLayer}
-          />
-        </Grid.Row>
-        <h4>Query Layer</h4>
-        <Grid.Row stretched>
-          <Input
-            type="text"
-            onChange={(e, { value }) => setLayerQuery(value)}
-            style={{ width: '70%' }}
-            value={layerQuery}
-            action
-            actionPosition="right"
-          >
-            <input />
-            <Button
-              type="submit"
-              size="tiny"
-              compact
-              color={'green'}
-              onClick={handleQueryLayer}
-            >
-              <Icon name={aheadSVG} title="Check Url" size="17px" />
-            </Button>
-          </Input>
-        </Grid.Row>
-        <Grid.Row>
-          <p style={{ fontSize: '12px', fontWeight: 'bold' }}>
-            Available Fields:
-          </p>
-        </Grid.Row>
-        {fields &&
-          fields.length > 0 &&
-          fields.map((field, id) => (
-            <p style={{ fontSize: '12px' }}>{field.alias}</p>
-          ))}
+          </Grid.Row>
+        )}
+        {availableLayers && availableLayers.length > 0 && (
+          <>
+            <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>Layer</h5>
+            <Grid.Row>
+              <Select
+                onChange={(e, { value }) => handleSelectLayer(value)}
+                options={availableLayers}
+                style={{ width: '100%' }}
+                placeholder="Select layer"
+                value={selectedLayer}
+              />
+            </Grid.Row>
+          </>
+        )}
+        {availableLayers && fields && fields.length > 0 && (
+          <>
+            <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
+              Query Layer
+            </h5>
+            <Grid.Row stretched>
+              {/* <Input
+                type="text"
+                style={{ width: '100%' }}
+                onChange={(e, { value }) => setLayerQuery(value)}
+                value={layerQuery}
+              ></Input> */}
+            </Grid.Row>
+            <Grid.Row>
+              <QueryBuilder
+                fields={fields.map((fi, i) => {
+                  return { name: fi.name, label: fi.name };
+                })}
+                query={builtQuery}
+                onQueryChange={(q) => setBuiltQuery(q)}
+                enableDragAndDrop={false}
+                //controlElements={bootstrapControlElements}
+                //controlClassnames={bootstrapControlClassnames}
+              />
+            </Grid.Row>
+            {builtQuery && (
+              <Grid.Row>
+                <Button
+                  type="submit"
+                  size="tiny"
+                  compact
+                  className="layer-submit-button "
+                  color={'green'}
+                  onClick={handleQueryLayer}
+                >
+                  <Icon name={aheadSVG} title="Check Url" size="20px" />
+                </Button>
+              </Grid.Row>
+            )}
+            <Grid.Row>
+              <p
+                style={{
+                  fontSize: '13px',
+                  fontWeight: 'bold',
+                  color: 'darkgray',
+                }}
+              >
+                Available Fields:
+              </p>
+            </Grid.Row>
+            {fields.map((field, id) => (
+              <p style={{ fontSize: '12px', padding: '0 5px' }}>
+                <strong>{field.alias}</strong> ({field.type})
+              </p>
+            ))}
+          </>
+        )}
       </Grid>
     </div>
   );

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

@@ -42,7 +42,7 @@ const MapEditorWidget = (props) => {
     <FormFieldWrapper {...props}>
       <Modal
         id="map-editor-modal"
-        style={{ width: '95% !important' }}
+        className="map-editor-modal"
         onClose={handleClose}
         onOpen={() => setOpen(true)}
         open={open}
@@ -53,35 +53,38 @@ const MapEditorWidget = (props) => {
         }
       >
         <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}>
+          <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(id, value);
+                }}
+                formData={dataForm}
+              />
+            </Grid.Column>
+            <Grid.Column mobile={12} tablet={12} computer={7}>
+              <div className="webmap-container">
                 <Webmap data={intValue} editMode={true} />
-              </Grid.Column>
-            </Grid.Row>
+              </div>
+            </Grid.Column>
           </Grid>
         </Modal.Content>
         <Modal.Actions>
           <Grid>
             <Grid.Row>
-              <Grid.Column width={8}></Grid.Column>
-              <Grid.Column width={4}>
+              <div className="map-edit-actions-container">
                 <Button onClick={handleClose}>Close</Button>
                 <Button color="green" onClick={handleApplyChanges}>
                   Apply changes
                 </Button>
-              </Grid.Column>
+              </div>
             </Grid.Row>
           </Grid>
         </Modal.Actions>

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Menu, Tab } from 'semantic-ui-react';
 import { ObjectWidget } from '@plone/volto/components';
+import { withDeviceSize } from '@eeacms/volto-eea-map/hocs';
 
 export const ObjectTypesWidget = (props) => {
-  const { schemas, value = {}, onChange, errors = {}, id } = props;
+  const { schemas, value = {}, onChange, errors = {}, id, device } = props;
   const objectId = id;
 
   const defaultActiveTab = 0;
@@ -11,6 +12,7 @@ export const ObjectTypesWidget = (props) => {
   const [activeTab, setActiveTab] = React.useState(
     defaultActiveTab > -1 ? defaultActiveTab : 0,
   );
+
   const createTab = ({ schema, id, icon }, index) => {
     return {
       menuItem: () => (
@@ -42,7 +44,13 @@ export const ObjectTypesWidget = (props) => {
 
   return (
     <Tab
-      menu={{ fluid: true, vertical: true, tabular: true }}
+      menu={{
+        vertical:
+          device === 'computer' || device === 'tablet' || device === 'mobile'
+            ? false
+            : true,
+        tabular: true,
+      }}
       panes={schemas.map(createTab)}
       activeIndex={activeTab}
       grid={{ paneWidth: 9, tabWidth: 3 }}
@@ -50,4 +58,4 @@ export const ObjectTypesWidget = (props) => {
   );
 };
 
-export default ObjectTypesWidget;
+export default withDeviceSize(ObjectTypesWidget);

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_visualization_data = {} } = content;
+
+  return (
+    <div>
+      <Webmap data={map_visualization_data} />
+    </div>
+  );
+};
+
+export default VisualizationView;

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

@@ -66,25 +66,20 @@ const GeneralSchema = ({ data = {} }) => {
         id: 'default',
         title: 'Zoom',
         fields: [
-          'show_print',
           'print_position',
-          'show_zoom',
-          'centerOnExtent',
           'zoom_position',
+          'centerOnExtent',
           ...(!centerOnExtent ? ['zoom_level', 'long', 'lat'] : []),
         ],
       },
     ],
     properties: {
-      show_zoom: {
-        title: 'Show zoom',
-        type: 'boolean',
-      },
       centerOnExtent: {
         title: 'Center on extent',
         type: 'boolean',
         description:
           'This will override latitude/longitude/zoom level and will lock zoom/moving the map.',
+        default: true,
       },
       zoom_position: {
         title: 'Zoom position',
@@ -106,10 +101,7 @@ const GeneralSchema = ({ 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(

package/src/components/Blocks/EEAMap/styles/map.css

@@ -20,3 +20,97 @@
   display: flex;
   padding: 1rem 0;
 }
+
+.map-editor-modal {
+  width: '95% !important';
+}
+
+.webmap-container {
+  position: sticky;
+  top: 10px;
+}
+
+.map-edit-actions-container {
+  padding: 5px 0;
+  margin-right: 10px;
+  margin-left: auto;
+}
+
+.layer-reset-button {
+  margin-top: 5px !important;
+  animation: fadeDown 0.2s ease-in;
+}
+
+.layer-check-button {
+  margin-top: 5px !important;
+  margin-left: auto !important;
+  animation: fadeDown 0.2s ease-in;
+}
+
+.layer-submit-button {
+  margin-top: 5px !important;
+  margin-left: auto !important;
+  animation: fadeDown 0.2s ease-in;
+}
+
+.ruleGroup {
+  border: 1px solid lightgray !important;
+  margin: 10px 0;
+  background-color: transparent !important;
+}
+
+.ruleGroup-addRule {
+  padding: 7px 10px !important;
+  background-color: darkgray !important;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.ruleGroup-addGroup {
+  padding: 7px 10px !important;
+  background-color: darkgray !important;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.ruleGroup-combinators {
+  padding: 0.3em 0 !important;
+}
+
+.rule-operators {
+  padding: 0.3em 0 !important;
+}
+
+.rule-value {
+  padding: 0.3em 0 !important;
+}
+
+.rule-fields {
+  padding: 0.3em 0 !important;
+}
+
+.rule-remove {
+  padding: 1px 6px !important;
+  border: 2px solid #d02144 !important;
+  border-radius: 50px;
+  color: #d02144;
+  cursor: pointer;
+}
+
+@keyframes fadeDown {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -20%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import { Schema } from './Schema';
+import View from './View';
+import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
+import './styles/map.css';
+
+const Edit = (props) => {
+  const { block, data, onChangeBlock, selected } = props;
+  const schema = React.useMemo(() => Schema(props), [props]);
+
+  return (
+    <div>
+      <View data={data} />
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          block={block}
+          title={schema.title}
+          schema={addPrivacyProtectionToSchema(schema)}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </div>
+  );
+};
+
+export default Edit;

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

@@ -0,0 +1,46 @@
+export const Schema = (props) => {
+  return {
+    title: 'Embed EEA Map Block',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'vis_url',
+          'description',
+          'height',
+          'show_legend',
+          'show_download',
+          'show_viewer',
+        ],
+      },
+    ],
+    properties: {
+      vis_url: {
+        widget: 'object_by_path',
+        title: 'Visualization',
+      },
+      height: {
+        title: 'Height',
+        type: 'number',
+      },
+      description: {
+        title: 'Description',
+        widget: 'slate',
+      },
+      show_legend: {
+        title: 'Show legend',
+        type: 'boolean',
+      },
+      show_download: {
+        title: 'Show download',
+        type: 'boolean',
+      },
+      show_viewer: {
+        title: 'Show web viewer',
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+};

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

@@ -0,0 +1,48 @@
+import React from 'react';
+
+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 { getVisualization } from '@eeacms/volto-eea-map/actions';
+
+const View = (props) => {
+  const { data, map_visualization } = props || {};
+  const { height = '', vis_url = '' } = data;
+
+  React.useEffect(() => {
+    if (vis_url) {
+      props.getVisualization(vis_url);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vis_url]);
+
+  return (
+    <div>
+      <PrivacyProtection data={data} {...props}>
+        {map_visualization && (
+          <div>
+            <Webmap data={map_visualization.data} height={height} />
+            <ExtraViews data={{ ...data, map_data: map_visualization.data }} />
+          </div>
+        )}
+        {!map_visualization && (
+          <p>No map view to show. Set visualization in block configuration.</p>
+        )}
+      </PrivacyProtection>
+    </div>
+  );
+};
+
+export default compose(
+  connect(
+    (state, props) => ({
+      map_visualization: state.map_visualizations.data[props.data.vis_url],
+    }),
+    {
+      getVisualization,
+    },
+  ),
+)(View);

package/src/components/Blocks/EmbedEEAMap/styles/map.css

@@ -0,0 +1,22 @@
+.map-edit-container {
+  display: flex;
+}
+
+.map-modal-trigger-button {
+  margin-bottom: 10px !important;
+}
+
+#map-editor-modal {
+  top: auto;
+  left: auto !important;
+  width: 95% !important;
+}
+
+#map-widget-toggle {
+  color: blue !important;
+}
+
+.map-text-view {
+  display: flex;
+  padding: 1rem 0;
+}

package/src/components/index.js

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

package/src/constants.js

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

package/src/hocs/index.js

@@ -0,0 +1,3 @@
+import withDeviceSize from './withDeviceSize';
+
+export { withDeviceSize };

package/src/hocs/withDeviceSize.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+export default function withDeviceSize(WrappedComponent) {
+  return (props) => {
+    const [device, setDevice] = React.useState(null);
+
+    const updateScreenSize = () => {
+      if (__CLIENT__) {
+        const screenWidth =
+          window.innerWidth ||
+          document.documentElement.clientWidth ||
+          document.body.clientWidth ||
+          0;
+
+        setDevice(getDeviceConfig(screenWidth));
+      }
+    };
+
+    const getDeviceConfig = (width) => {
+      // semantic ui breakpoints
+      if (width < 320) {
+        return 'mobile';
+      } else if (width >= 320 && width < 768) {
+        return 'tablet';
+      } else if (width >= 768 && width < 992) {
+        return 'computer';
+      } else if (width >= 992 && width < 1280) {
+        return 'large';
+      } else if (width >= 1280) {
+        return 'widescreen';
+      }
+    };
+
+    React.useEffect(() => {
+      updateScreenSize();
+      window.addEventListener('resize', updateScreenSize);
+      return () => {
+        window.removeEventListener('resize', updateScreenSize);
+      };
+      /* eslint-disable-next-line */
+    }, []);
+
+    return <WrappedComponent {...props} device={device} />;
+  };
+}

package/src/index.js

@@ -1,8 +1,18 @@
-import { EEAMapEdit, EEAMapView } from '@eeacms/volto-eea-map/components';
+import {
+  EEAMapEdit,
+  EEAMapView,
+  EmbedMapView,
+  EmbedMapEdit,
+} from '@eeacms/volto-eea-map/components';
 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';
+
+import { data_visualizations } from './middlewares';
+import * as addonReducers from './reducers';
 
 export default (config) => {
   config.settings.allowed_cors_destinations = [
@@ -48,9 +58,52 @@ export default (config) => {
     ],
   };
 
+  config.blocks.blocksConfig.embed_eea_map_block = {
+    id: 'embed_eea_map_block', // The name (id) of the block
+    title: 'Embed EEA Map', // The display name of the block
+    icon: world, // The icon used in the block chooser
+    group: 'common', // The group (blocks can be grouped, displayed in the chooser)
+    view: EmbedMapView, // The view mode component
+    edit: EmbedMapEdit, // The edit mode component
+    sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
+    security: {
+      addPermission: [], // Future proof (not implemented yet) add user permission role(s)
+      view: [], // Future proof (not implemented yet) view user role(s)
+    },
+    variations: [
+      {
+        id: 'default',
+        title: 'EEA Map (default)',
+        isDefault: true,
+        view: EEAMapView,
+      },
+      {
+        id: 'extra',
+        title: 'Extra variation (expand if needed)',
+        isDefault: true,
+        view: EEAMapView,
+      },
+    ],
+  };
+
   config.widgets.widget.map_edit_widget = MapEditorWidget;
   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_visualization_data = VisualizationEditorWidget;
+  //map viewer for the visualization(content-type)
+  config.views.contentTypesViews.map_visualization = VisualizationView;
+
+  config.settings.storeExtenders = [
+    ...(config.settings.storeExtenders || []),
+    data_visualizations,
+  ];
+
+  config.addonReducers = {
+    ...config.addonReducers,
+    ...addonReducers,
+  };
+
   return config;
 };

package/src/middlewares/index.js

@@ -0,0 +1,14 @@
+import { GET_MAP_VISUALIZATION } from '@eeacms/volto-eea-map/constants';
+
+export const data_visualizations = (middlewares) => [
+  (store) => (next) => (action) => {
+    if (action.type === GET_MAP_VISUALIZATION) {
+      store.dispatch({
+        type: `${GET_MAP_VISUALIZATION}_PENDING`,
+        path: action.path,
+      });
+    }
+    return next(action);
+  },
+  ...middlewares,
+];

package/src/middlewares/map_visualizations.js

@@ -0,0 +1 @@
+export * from './map_visualizations';

package/src/reducers/index.js

@@ -0,0 +1,3 @@
+import map_visualizations from './map_visualizations';
+
+export { map_visualizations };

package/src/reducers/map_visualizations.js

@@ -0,0 +1,48 @@
+import { GET_MAP_VISUALIZATION } from '@eeacms/volto-eea-map/constants';
+
+const initialState = {
+  data: {},
+  error: null,
+  loaded: false,
+  loading: false,
+};
+
+export default function data_providers(state = initialState, action = {}) {
+  const path = action.path
+    ? action.path.replace(`/@map-visualization`, '')
+    : undefined;
+
+  switch (action.type) {
+    case `${GET_MAP_VISUALIZATION}_PENDING`:
+      return {
+        ...state,
+        error: null,
+        loaded: false,
+        loading: true,
+      };
+
+    case `${GET_MAP_VISUALIZATION}_SUCCESS`:
+      return {
+        ...state,
+        error: null,
+        data: {
+          ...state.data,
+          [path]: action.result.map_visualization,
+        },
+        loaded: true,
+        loading: false,
+      };
+
+    case `${GET_MAP_VISUALIZATION}_FAIL`:
+      return {
+        ...state,
+        error: action.error,
+        data: { ...state.data },
+        loaded: false,
+        loading: false,
+      };
+
+    default:
+      return state;
+  }
+}