@eeacms/volto-eea-map 0.1.27 → 0.1.29

package/CHANGELOG.md

@@ -4,14 +4,23 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [0.1.27](https://github.com/eea/volto-eea-map/compare/0.1.26...0.1.27) - 6 October 2022
+### [0.1.29](https://github.com/eea/volto-eea-map/compare/0.1.28...0.1.29) - 19 October 2022
+
+#### :hammer_and_wrench: Others
+
+- Enable opacity control [andreiggr - [`bb88b89`](https://github.com/eea/volto-eea-map/commit/bb88b89857169fd5b8174dcbeaeeba448a7c7d0c)]
+### [0.1.28](https://github.com/eea/volto-eea-map/compare/0.1.27...0.1.28) - 7 October 2022
+
+#### :hammer_and_wrench: Others
+
+- Clear [andreiggr - [`cef77e6`](https://github.com/eea/volto-eea-map/commit/cef77e6bf85f919c4968d5001f342c7d6c0e63f5)]
+### [0.1.27](https://github.com/eea/volto-eea-map/compare/0.1.26...0.1.27) - 7 October 2022
 
 #### :hammer_and_wrench: Others
 
 - privacy policy inherit height of map [andreiggr - [`dee7281`](https://github.com/eea/volto-eea-map/commit/dee7281caf834d017af8b99da1455c956bc663fe)]
 - set default legend, sources, privacy on [andreiggr - [`fb66ff8`](https://github.com/eea/volto-eea-map/commit/fb66ff8863d13b569955d7a774a9f1ab14729a29)]
 - clear console [andreiggr - [`e1d2841`](https://github.com/eea/volto-eea-map/commit/e1d28419dea2586c98b4df1c9e6dc1d6a4b987b6)]
-- use a custom basemap [andreiggr - [`b11fc62`](https://github.com/eea/volto-eea-map/commit/b11fc62a54730c0fb2229448c438f39f51db494d)]
 ### [0.1.26](https://github.com/eea/volto-eea-map/compare/0.1.25...0.1.26) - 4 October 2022
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/Webmap.jsx

@@ -146,41 +146,48 @@ const Webmap = (props) => {
       map_layers && map_layers.length > 0
         ? map_layers
             .filter(({ map_service_url, layer }) => map_service_url && layer)
-            .map(({ map_service_url, layer, fullLayer, query = '' }, index) => {
-              const url = `${map_service_url}/${layer?.id}`;
-              let mapLayer;
-              switch (layer.type) {
-                case 'Raster Layer':
-                  mapLayer = new MapImageLayer({
-                    url: map_service_url,
-                    sublayers: [
-                      {
-                        id: layer.id,
-                        minScale: layer?.minScale,
-                        maxScale: layer?.maxScale,
-                        definitionExpression: query
-                          ? formatQuery(query, 'sql')
-                          : '',
-                      },
-                    ],
-                  });
-                  break;
-                case 'Feature Layer':
-                  mapLayer = new FeatureLayer({
-                    layerId: layer.id,
-                    url,
-                    definitionExpression: query
-                      ? formatQuery(query, 'sql')
-                      : '',
-                    minScale: layer?.minScale,
-                    maxScale: layer?.maxScale,
-                  });
-                  break;
-                default:
-                  break;
-              }
-              return mapLayer;
-            })
+            .map(
+              (
+                { map_service_url, layer, fullLayer, query = '', opacity = 1 },
+                index,
+              ) => {
+                const url = `${map_service_url}/${layer?.id}`;
+                let mapLayer;
+                switch (layer.type) {
+                  case 'Raster Layer':
+                    mapLayer = new MapImageLayer({
+                      url: map_service_url,
+                      sublayers: [
+                        {
+                          id: layer.id,
+                          minScale: layer?.minScale,
+                          maxScale: layer?.maxScale,
+                          opacity: opacity ? parseFloat(opacity) : 1,
+                          definitionExpression: query
+                            ? formatQuery(query, 'sql')
+                            : '',
+                        },
+                      ],
+                    });
+                    break;
+                  case 'Feature Layer':
+                    mapLayer = new FeatureLayer({
+                      layerId: layer.id,
+                      url,
+                      definitionExpression: query
+                        ? formatQuery(query, 'sql')
+                        : '',
+                      minScale: layer?.minScale,
+                      maxScale: layer?.maxScale,
+                      opacity: opacity ? parseFloat(opacity) : 1,
+                    });
+                    break;
+                  default:
+                    break;
+                }
+                return mapLayer;
+              },
+            )
         : [];
 
     const mapBaseLayer = new WebTileLayer({
@@ -207,8 +214,25 @@ const Webmap = (props) => {
       return basemap;
     };
 
+    const setCustomBasemap = (urlTemplate) => {
+      const mapBaseLayer = new WebTileLayer({
+        urlTemplate,
+      });
+
+      // Create a Basemap with the WebTileLayer.
+      const customBase = new Basemap({
+        baseLayers: [mapBaseLayer],
+        title: 'Custom Base Layer',
+        id: 'custom-base',
+      });
+      return customBase;
+    };
+
     const map = new Map({
-      basemap: setBasemap(base_layer),
+      basemap:
+        data?.base?.use_custom_base && data?.base?.custom_base_layer
+          ? setCustomBasemap(data?.base?.custom_base_layer)
+          : setBasemap(base_layer),
       layers,
     });
     const view = new MapView({

package/src/components/visualization/panelsSchema.js

@@ -2,22 +2,39 @@ import { base_layers } from '../../constants';
 
 const customBaselayers = [['positron-composite', 'positron-composite']];
 
-const BaseLayerSchema = {
-  title: 'Base Layer',
-  fieldsets: [
-    {
-      id: 'base',
-      title: 'Base Layer',
-      fields: ['base_layer'],
-    },
-  ],
-  properties: {
-    base_layer: {
-      title: 'Base Layer',
-      choices: [...customBaselayers, ...base_layers],
+const BaseLayerSchema = ({ data = {} }) => {
+  const useCustomBase = data?.map_data?.base?.use_custom_base;
+  return {
+    title: 'Base Layer',
+    fieldsets: [
+      {
+        id: 'base',
+        title: 'Base Layer',
+        fields: [
+          'use_custom_base',
+          ...(useCustomBase ? ['custom_base_layer'] : ['base_layer']),
+        ],
+      },
+    ],
+    properties: {
+      use_custom_base: {
+        title: 'Use custom Base Layer',
+        description:
+          'Switch between default base layers and defining your custom service base layer',
+        type: 'boolean',
+      },
+      base_layer: {
+        title: 'Base Layer',
+        choices: [...customBaselayers, ...base_layers],
+      },
+      custom_base_layer: {
+        title: 'Base Layer',
+        description:
+          'Add an URL Template to import your own base layer from an external service',
+      },
     },
-  },
-  required: [],
+    required: [],
+  };
 };
 
 const LayerSchema = {
@@ -127,6 +144,7 @@ const GeneralSchema = ({ data = {} }) => {
 
 export default ({ data = {} }) => {
   const generalSchema = GeneralSchema({ data });
+  const baseLayerSchema = BaseLayerSchema({ data });
 
   return {
     title: 'Map Editor',
@@ -148,7 +166,7 @@ export default ({ data = {} }) => {
           },
           {
             id: 'base',
-            schema: BaseLayerSchema,
+            schema: baseLayerSchema,
           },
           {
             id: 'layers',

package/src/components/widgets/LayerSelectWidget.jsx

@@ -172,6 +172,13 @@ const LayerSelectWidget = (props) => {
     }
   };
 
+  const handleOpacityChange = (val) => {
+    onChange(id, {
+      ...value,
+      opacity: val,
+    });
+  };
+
   const handleChangeServiceUrl = (value) => {
     setServiceUrlError('');
     setCheckColor('');
@@ -285,6 +292,27 @@ const LayerSelectWidget = (props) => {
         )}
         {availableLayers && availableLayers.length > 0 && selectedLayer && (
           <div className="spaced-row">
+            <Grid.Row stretched>
+              <h5>Opacity:</h5>
+              <input
+                className="map-number-input"
+                type="number"
+                min={0}
+                max={1}
+                step={0.1}
+                value={value?.opacity ? value?.opacity : 1}
+                onChange={(e) => handleOpacityChange(e.target.value)}
+              />
+              <input
+                className="map-range-input"
+                type="range"
+                min={0}
+                max={1}
+                step={0.1}
+                value={value?.opacity ? value?.opacity : 1}
+                onChange={(e) => handleOpacityChange(e.target.value)}
+              />
+            </Grid.Row>
             <Grid.Row stretched>
               <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
                 Description

package/src/styles/map.css

@@ -185,6 +185,16 @@
   cursor: pointer;
 }
 
+.map-number-input {
+  padding: 5px !important;
+}
+
+.map-range-input {
+  width: 100%;
+  margin: 7px 0;
+  color: green;
+}
+
 @keyframes fadeDown {
   from {
     opacity: 0;