@eeacms/volto-eea-map 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -4,8 +4,18 @@ 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.2](https://github.com/eea/volto-eea-map/compare/0.1.1...0.1.2)
+
+- Legend only selected layer [`3474d79`](https://github.com/eea/volto-eea-map/commit/3474d7989321f656397c292bddc289f8f6329a8e)
+- Query layer by existing fields [`52363f5`](https://github.com/eea/volto-eea-map/commit/52363f57a9ab4e49c7418e883bdf0c5bb30c1734)
+- Cleanup [`d4e07b2`](https://github.com/eea/volto-eea-map/commit/d4e07b2fb89a5a27f5e4411047cb43e1c8add769)
+- Description is slate [`86c983e`](https://github.com/eea/volto-eea-map/commit/86c983e7a4841ed07826c9015b70dbe931e9081a)
+
 #### [0.1.1](https://github.com/eea/volto-eea-map/compare/0.1.0...0.1.1)
 
+> 26 July 2022
+
+- Repo structure update [`#1`](https://github.com/eea/volto-eea-map/pull/1)
 - Lint [`d31819d`](https://github.com/eea/volto-eea-map/commit/d31819d98338fbc013dfd4506466e7c20b04aad5)
 - Remove object pick widget [`40c7bcd`](https://github.com/eea/volto-eea-map/commit/40c7bcd2305bbab1c21919a0ae82af3eb628b09d)
 - Add group layer [`74fd1af`](https://github.com/eea/volto-eea-map/commit/74fd1af2bce6347ce4a80758947e05b7c4a6d516)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -16,9 +16,15 @@
     "type": "git",
     "url": "git@github.com:eea/volto-eea-map.git"
   },
+  "addons": [
+    "@eeacms/volto-embed",
+    "volto-slate"
+  ],
   "dependencies": {
     "esri-loader": "3.5.0",
-    "@plone/scripts": "*"
+    "@plone/scripts": "*",
+    "@eeacms/volto-embed": "^2.0.1",
+    "volto-slate": "*"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

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

@@ -5,6 +5,10 @@ import { Schema } from './Schema';
 import Webmap from './components/Webmap';
 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;
@@ -12,15 +16,18 @@ const Edit = (props) => {
 
   const { map_data = {}, height } = data;
   if (__SERVER__) return '';
+
   return (
-    <>
-      <Webmap data={map_data} height={height} />
-      <ExtraViews data={data} />
+    <div>
+      <PrivacyProtection data={data} {...props}>
+        <Webmap data={map_data} height={height} />
+        <ExtraViews data={data} />
+      </PrivacyProtection>
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}
           title={schema.title}
-          schema={schema}
+          schema={addPrivacyProtectionToSchema(schema)}
           onChangeField={(id, value) => {
             onChangeBlock(block, {
               ...data,
@@ -30,7 +37,7 @@ const Edit = (props) => {
           formData={data}
         />
       </SidebarPortal>
-    </>
+    </div>
   );
 };
 

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

@@ -5,7 +5,7 @@ export const Schema = () => {
       {
         id: 'default',
         title: 'Default',
-        fields: ['show_description', 'description', 'height', 'map_data'],
+        fields: ['description', 'height', 'map_data'],
       },
     ],
     properties: {
@@ -13,13 +13,9 @@ export const Schema = () => {
         title: 'Height',
         type: 'number',
       },
-      show_description: {
-        title: 'Show description',
-        type: 'boolean',
-      },
       description: {
         title: 'Description',
-        type: 'text',
+        widget: 'slate',
       },
       map_data: {
         title: 'Edit map',

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

@@ -1,6 +1,7 @@
 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 || {};
@@ -10,10 +11,12 @@ const View = (props) => {
   if (__SERVER__) return '';
 
   return (
-    <>
-      <Webmap data={map_data} />
-      <ExtraViews data={data} />
-    </>
+    <div>
+      <PrivacyProtection data={data} {...props}>
+        <Webmap data={map_data} />
+        <ExtraViews data={data} />
+      </PrivacyProtection>
+    </div>
   );
 };
 

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

@@ -36,6 +36,7 @@ const Webmap = (props) => {
   const options = {
     css: true,
   };
+
   const mapRef = React.useRef();
   const [modules, setModules] = React.useState({});
   const modules_loaded = React.useRef(false);
@@ -88,12 +89,10 @@ const Webmap = (props) => {
       map_layers.length > 0 &&
       map_layers
         .filter(({ map_service_url, layer }) => map_service_url && layer)
-        .map(({ map_service_url, layer }) => {
+        .map(({ map_service_url, layer, query = '' }) => {
           const url = `${map_service_url}/${layer}`;
 
           let mapLayer;
-
-          //TODO: add more layers and error catch for unrecognized layer
           switch (layer.type) {
             case 'Raster Layer':
               mapLayer = new MapImageLayer({
@@ -101,7 +100,10 @@ const Webmap = (props) => {
               });
               break;
             case 'Feature Layer':
-              mapLayer = new FeatureLayer({ url });
+              mapLayer = new FeatureLayer({
+                url,
+                definitionExpression: query,
+              });
               break;
             case 'Group Layer':
               mapLayer = new GroupLayer({ url });
@@ -112,10 +114,18 @@ const Webmap = (props) => {
           return mapLayer;
         });
 
+    // //this next layer will be used to filter country and intersect with existing layer
+    // const allCountriesLayer = new FeatureLayer({
+    //   url:
+    //     'https://trial.discomap.eea.europa.eu/arcgis/rest/services/CLMS/WorldCountries/MapServer/1',
+    //   definitionExpression: `(CNTR_ID = 'BG')`,
+    // });
+
     const map = new Map({
       basemap: base_layer || 'hybrid',
       layers,
     });
+
     const view = new MapView({
       container: mapRef.current,
       map,

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

@@ -2,19 +2,19 @@ import React from 'react';
 import { Button } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
 
-import TextView from '../TextView';
 import LegendWidget from './LegendWidget';
+import { serializeNodes } from 'volto-slate/editor/render';
 
 import worldSVG from '@plone/volto/icons/world.svg';
 import downloadSVG from '@plone/volto/icons/download.svg';
 
 const ExtraViews = ({ data }) => {
-  const { map_data = {}, description, show_description } = data;
+  const { map_data = {}, description } = data;
   const { general = {} } = map_data;
   return (
     <>
       {general.show_legend && <LegendWidget data={map_data} />}
-      {show_description && description && <TextView text={description} />}
+      {description && serializeNodes(description)}
       {(general.show_download || general.show_viewer) && (
         <div
           style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}

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

@@ -10,7 +10,14 @@ import { fetchArcgisData } from '../../utils';
 const LayerSelectWidget = (props) => {
   const { onChange, value = {}, id } = props;
 
-  const { available_layers, map_data, map_service_url, layer } = value;
+  const {
+    available_layers,
+    map_data,
+    map_service_url,
+    layer,
+    fields = [],
+    query = '',
+  } = value;
 
   const [mapData, setMapData] = React.useState(map_data);
   const [checkColor, setCheckColor] = React.useState('');
@@ -20,6 +27,7 @@ const LayerSelectWidget = (props) => {
   const [availableLayers, setAvailableLayers] = React.useState(
     available_layers,
   );
+  const [layerQuery, setLayerQuery] = React.useState(query);
 
   const handleServiceUrlCheck = async () => {
     // fetch url, save it, populate layers options
@@ -36,6 +44,7 @@ const LayerSelectWidget = (props) => {
         );
       }
       onChange(id, {
+        ...value,
         layer: selectedLayer,
         map_service_url: serviceUrl,
         available_layers: availableLayers,
@@ -47,13 +56,32 @@ const LayerSelectWidget = (props) => {
     }
   };
 
-  const handleSelectLayer = (layer) => {
+  const handleLayerFetch = async (service_url, id) => {
+    try {
+      let fullLayer = await fetchArcgisData(`${service_url}/${id}`);
+      return fullLayer;
+    } catch (e) {}
+  };
+
+  const handleSelectLayer = async (layer) => {
+    const fullLayer = await handleLayerFetch(serviceUrl, layer.id);
     setSelectedLayer(layer);
     onChange(id, {
+      ...value,
       layer,
+      fields: fullLayer.fields,
       map_service_url: serviceUrl,
       available_layers: availableLayers,
       map_data: mapData,
+      query: '',
+    });
+    setLayerQuery('');
+  };
+
+  const handleQueryLayer = () => {
+    onChange(id, {
+      ...value,
+      query: layerQuery,
     });
   };
 
@@ -104,7 +132,36 @@ const LayerSelectWidget = (props) => {
             value={selectedLayer}
           />
         </Grid.Row>
-        <Grid.Row stretched></Grid.Row>
+        <h4>Query Layer</h4>
+        <Grid.Row stretched>
+          <Input
+            type="text"
+            onChange={(e, { value }) => setLayerQuery(value)}
+            style={{ width: '100%' }}
+            value={layerQuery}
+          />
+          <Button
+            style={{
+              margin: '10px 0',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+            color={checkColor}
+            onClick={handleQueryLayer}
+          >
+            <p style={{ fontSize: '14px', margin: '0', marginRight: '5px' }}>
+              Query Layer
+            </p>
+          </Button>
+        </Grid.Row>
+        <p style={{ fontSize: '12px', fontWeight: 'bold' }}>
+          Available Fields:
+        </p>
+        {fields &&
+          fields.length > 0 &&
+          fields.map((field, id) => (
+            <p style={{ fontSize: '12px' }}>{field.alias}</p>
+          ))}
       </Grid>
     </div>
   );

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

@@ -27,13 +27,18 @@ const LegendWidget = (props) => {
   const activeLayer = map_layers.length > 0 ? map_layers[0]?.map_layer : '';
   const fetchLegend = async (url) => {
     let legendData = await fetchArcgisData(url);
-    const { layers = [] } = legendData;
 
-    setLegendLayers(layers);
+    //TODO: configure this for multiple layers
+    const { layers = [] } = legendData;
+    const selectedLayerLedend = layers.filter(
+      (l, i) => l.layerId === activeLayer.layer.id,
+    );
+    setLegendLayers(selectedLayerLedend);
   };
 
   React.useEffect(() => {
-    fetchLegend(activeLayer.map_service_url + '/legend');
+    fetchLegend(`${activeLayer.map_service_url}/legend`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, activeLayer.map_service_url]);
 
   return (
@@ -47,7 +52,9 @@ const LegendWidget = (props) => {
                 legendLayers.map((layer, index) => {
                   return (
                     <div style={{ display: 'flex', flexDirection: 'column' }}>
-                      <h5>{layer?.layerName}</h5>
+                      <h5 style={{ marginTop: '10px', marginBottom: '5px' }}>
+                        {layer?.layerName}
+                      </h5>
                       <LayerLegend data={layer.legend} />
                     </div>
                   );

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

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const TextView = ({ text }) => {
-  return <p className="map-text-view">{text}</p>;
-};
-
-export default TextView;