@opengeoweb/webmap-react 12.11.0 → 12.13.0

package/index.esm.js

@@ -3953,10 +3953,40 @@ var MapDimensionSelect = function MapDimensionSelect(_ref2) {
     dimensionName = _ref2.dimensionName,
     handleDimensionValueChanged = _ref2.handleDimensionValueChanged,
     handleSyncChanged = _ref2.handleSyncChanged,
-    layerDimension = _ref2.layerDimension;
+    layerDimension = _ref2.layerDimension,
+    layerName = _ref2.layerName;
   var _useWebmapReactTransl = useWebmapReactTranslation(),
     t = _useWebmapReactTransl.t;
   var wmLayer = webmapUtils.getWMLayerById(layerId);
+  var _React$useState = React.useState(layerName),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    layerTitle = _React$useState2[0],
+    setLayerTitle = _React$useState2[1];
+  React.useEffect(function () {
+    // if the layername changes, the title needs to be updated
+    var updateTitle = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return wmLayer.parseLayer();
+            case 2:
+              setLayerTitle(wmLayer.title || layerName);
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function updateTitle() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    if (wmLayer) {
+      void updateTitle();
+    }
+  }, [layerName, wmLayer]);
   var dimConfig = dimensionConfig(t).find(function (cnf) {
     return cnf.name === dimensionName;
   });
@@ -3967,7 +3997,6 @@ var MapDimensionSelect = function MapDimensionSelect(_ref2) {
   if (!wmsDimension) {
     return null;
   }
-  var layerTitle = wmLayer.title;
   var marks = marksByDimension(t, wmsDimension);
   var isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced === true;
   var tooltipTitle = isLayerDimensionSynced ? t('webmap-react-click-disconnect') : t('webmap-react-click-connect');
@@ -5003,6 +5032,47 @@ var getTimeStepsToCheck = function getTimeStepsToCheck(timespan) {
  */
 var getTimeStepsToCheckMemoized = memoize(getTimeStepsToCheck);
 
+var getDimensionName = function getDimensionName(dimName) {
+  switch (dimName) {
+    case 'time':
+      return 'val';
+    case 'reference_time':
+      return 'ref';
+    default:
+      {
+        var split = dimName.split('_');
+        if (split[0] === 'pressure') {
+          return 'p';
+        }
+        if (split[0] === 'height') {
+          return 'h';
+        }
+        return split[0];
+      }
+  }
+};
+var formatDimensionVal = function formatDimensionVal(dimName, dimVal) {
+  switch (dimName) {
+    case 'time':
+    case 'reference_time':
+      {
+        var date = dateUtils.stringToDate(dimVal, "yyyy-MM-dd'T'HH:mm:ss'Z'", true);
+        if (date) {
+          return dateUtils.dateToString(date, "MM-dd HH:mm'Z'", true);
+        }
+        return dimVal;
+      }
+    default:
+      {
+        return dimVal;
+      }
+  }
+};
+var getDimensionInfo = function getDimensionInfo(wmLayerDimension) {
+  var layerName = getDimensionName(wmLayerDimension.name);
+  var layerVal = formatDimensionVal(wmLayerDimension.name, wmLayerDimension.currentValue);
+  return "".concat(layerName, " ").concat(layerVal);
+};
 var ShowTimeAwareLayerInfo = function ShowTimeAwareLayerInfo(_ref) {
   var _wmLayer$dimensions;
   var wmLayer = _ref.wmLayer,
@@ -5039,9 +5109,9 @@ var ShowTimeAwareLayerInfo = function ShowTimeAwareLayerInfo(_ref) {
       var isSelectedStep = visible && (wmTimeDim === null || wmTimeDim === void 0 ? void 0 : wmTimeDim.currentValue) === closestValue;
       var colorImageIsAvailable = requestedStepHasImage ? '#40AF50' : '#FF0000';
       var colorLayerIsOutsideRange = requestedStepIsOutsideRange ? '#5080FA' : colorImageIsAvailable;
-      var height = requestedStepIsOutsideRange ? '15px' : '26px';
-      var top = requestedStepIsOutsideRange ? '5px' : '0px';
-      var left = "".concat(index * itemWidth, "px");
+      var height = requestedStepIsOutsideRange ? '15px' : '20px';
+      var top = requestedStepIsOutsideRange ? '5px' : '2px';
+      var left = "calc(25% + ".concat(index * itemWidth, "px)");
       var opacity = isSelectedStep ? 1 : 0.8;
       return jsx("span", {
         style: {
@@ -5060,62 +5130,87 @@ var ShowTimeAwareLayerInfo = function ShowTimeAwareLayerInfo(_ref) {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layer, timeStepsToCheck, visible, wmTimeDim === null || wmTimeDim === void 0 ? void 0 : wmTimeDim.currentValue, render]);
-  return jsxs("div", {
-    style: {
-      height: '26px',
-      position: 'relative',
-      left: '50px',
-      right: '10px',
-      marginTop: '12px',
-      marginBottom: '-10px'
-    },
-    children: [jsx("div", {
-      children: jsx("div", {
-        children: items
-      })
-    }), jsxs("div", {
+  var dimsInfo = wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.dimensions.map(function (wmLayerDimension) {
+    return getDimensionInfo(wmLayerDimension);
+  });
+  var tooltipText = jsxs("span", {
+    children: [wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title, ": ", jsx("br", {}), wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.dimensions.map(function (dim, index) {
+      return jsxs("span", {
+        children: [dim.name, ": ", formatDimensionVal(dim.name, dim.currentValue), index < dimsInfo.length - 1 && jsx("br", {})]
+      }, "".concat(dim.name, "-").concat(dim.currentValue));
+    })]
+  });
+  return jsx(CustomTooltip, {
+    title: tooltipText,
+    children: jsxs("div", {
       style: {
-        position: 'absolute',
-        left: '10px',
-        paddingTop: '3px',
-        fontSize: '12px',
-        fontFamily: 'Roboto',
-        opacity: 0.85
+        position: 'relative',
+        width: 'calc(100% - 60px)',
+        left: '50px',
+        right: '10px',
+        marginTop: '12px',
+        marginBottom: '-10px'
       },
-      children: [jsx("span", {
+      "data-testid": "debug-info",
+      children: [jsx("div", {
         style: {
-          width: '300px',
-          position: 'absolute',
-          display: 'inline-block',
-          height: '15px'
+          width: '100%'
         },
-        children: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title
-      }), jsx("span", {
+        children: jsx("div", {
+          children: items
+        })
+      }), jsxs("div", {
         style: {
-          position: 'absolute',
-          left: '320px',
-          display: 'inline-block',
-          width: '600px',
-          opacity: '0.7'
+          left: '10px',
+          paddingTop: '3px',
+          fontSize: '12px',
+          fontFamily: 'Roboto',
+          opacity: 0.85,
+          width: '100%'
         },
-        children: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.dimensions.map(function (wmLayerDimension) {
-          return jsxs("span", {
-            style: {
-              margin: '0 4px',
-              padding: '1px 5px',
-              background: 'blue',
-              color: 'white',
-              fontSize: '11px'
-            },
-            children: [wmLayerDimension.name, " = ", wmLayerDimension.currentValue]
-          }, wmLayerDimension.name);
-        })
+        children: [jsx("span", {
+          style: {
+            display: 'inline-block',
+            verticalAlign: 'top',
+            width: '25%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            fontSize: '12px',
+            paddingRight: '4px',
+            paddingLeft: '4px',
+            color: '#051039',
+            backgroundColor: 'rgba(236, 237, 238, 0.7)',
+            borderRadius: 2
+          },
+          children: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title
+        }), jsx("span", {
+          style: {
+            display: 'inline-block',
+            width: '75%',
+            opacity: '0.7'
+          },
+          children: dimsInfo.map(function (dimension) {
+            return jsx("span", {
+              style: {
+                margin: '0 0 0 0px',
+                padding: '1px 5px',
+                background: 'blue',
+                borderRadius: 2,
+                color: 'white',
+                fontSize: '11px'
+              },
+              children: dimension
+            }, dimension);
+          })
+        })]
       })]
-    })]
-  });
+    })
+  }, wmLayer.id);
 };
 
 var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
+  var _wmLayer$dimensions$f, _wmLayer$dimensions4;
   var layerId = _ref.layerId,
     getCapsURL = _ref.getCapsURL,
     layerOptions = _ref.layerOptions,
@@ -5184,47 +5279,53 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              if (wmLayer && visible !== false) {
-                wmTimeDim = wmLayer === null || wmLayer === void 0 || (_wmLayer$dimensions = wmLayer.dimensions) === null || _wmLayer$dimensions === void 0 ? void 0 : _wmLayer$dimensions.find(function (dimension) {
-                  return dimension.name === 'time';
-                }); // Set time dimension current value based on layerprops dimension value
-                layerPropsTimeDim = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dimension) {
-                  return dimension.name === 'time';
-                });
-                timeValueToInitialize = (layerPropsTimeDim === null || layerPropsTimeDim === void 0 ? void 0 : layerPropsTimeDim.currentValue) || (wmTimeDim === null || wmTimeDim === void 0 ? void 0 : wmTimeDim.getValue());
-                wmTimeDim && timeValueToInitialize && wmTimeDim.setValue(timeValueToInitialize);
-                refTimeDim = wmLayer === null || wmLayer === void 0 || (_wmLayer$dimensions2 = wmLayer.dimensions) === null || _wmLayer$dimensions2 === void 0 ? void 0 : _wmLayer$dimensions2.find(function (dimension) {
+              if (!(wmLayer && visible !== false)) {
+                _context.next = 11;
+                break;
+              }
+              wmTimeDim = wmLayer === null || wmLayer === void 0 || (_wmLayer$dimensions = wmLayer.dimensions) === null || _wmLayer$dimensions === void 0 ? void 0 : _wmLayer$dimensions.find(function (dimension) {
+                return dimension.name === 'time';
+              }); // Set time dimension current value based on layerprops dimension value
+              layerPropsTimeDim = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dimension) {
+                return dimension.name === 'time';
+              });
+              timeValueToInitialize = (layerPropsTimeDim === null || layerPropsTimeDim === void 0 ? void 0 : layerPropsTimeDim.currentValue) || (wmTimeDim === null || wmTimeDim === void 0 ? void 0 : wmTimeDim.getValue());
+              wmTimeDim && timeValueToInitialize && wmTimeDim.setValue(timeValueToInitialize);
+              refTimeDim = wmLayer === null || wmLayer === void 0 || (_wmLayer$dimensions2 = wmLayer.dimensions) === null || _wmLayer$dimensions2 === void 0 ? void 0 : _wmLayer$dimensions2.find(function (dimension) {
+                return dimension.name === 'reference_time';
+              }); // Update reference time dimension value, this will change the time values to prefetch. Depends on model run.
+              if (refTimeDim && wmTimeDim) {
+                layerPropsRefTimeDim = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dimension) {
                   return dimension.name === 'reference_time';
-                }); // Update reference time dimension value, this will change the time values to prefetch. Depends on model run.
-                if (refTimeDim && wmTimeDim) {
-                  layerPropsRefTimeDim = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dimension) {
-                    return dimension.name === 'reference_time';
-                  }); // Set reftime dimension current value based on layerprops dimension value
-                  refTimeDim && (layerPropsRefTimeDim === null || layerPropsRefTimeDim === void 0 ? void 0 : layerPropsRefTimeDim.currentValue) && refTimeDim.setValue(layerPropsRefTimeDim === null || layerPropsRefTimeDim === void 0 ? void 0 : layerPropsRefTimeDim.currentValue);
-                  refTimeToFind = wmTimeDim.getValue();
-                  firstRefTime = refTimeDim === null || refTimeDim === void 0 ? void 0 : refTimeDim.getClosestValue(refTimeToFind, true);
-                  firstRefTime && refTimeDim && wmTimeDim && wmTimeDim.setTimeValuesForReferenceTime(firstRefTime, refTimeDim);
-                }
-                // Make sure style is set in wmLayer as well
-                styleName && wmLayer.setStyle(styleName);
-                onInitializeLayer && onInitializeLayer({
-                  layerId: wmLayer.id,
-                  style: wmLayer.currentStyle,
-                  dimensions: wmLayer.dimensions.map(function (dimension) {
-                    return {
-                      name: dimension.name,
-                      units: dimension.units,
-                      currentValue: dimension.currentValue,
-                      maxValue: dimension.getLastValue(),
-                      minValue: dimension.getFirstValue(),
-                      synced: dimension.synced,
-                      values: dimension.values,
-                      unitSymbol: dimension.unitSymbol
-                    };
-                  })
-                });
+                }); // Set reftime dimension current value based on layerprops dimension value
+                refTimeDim && (layerPropsRefTimeDim === null || layerPropsRefTimeDim === void 0 ? void 0 : layerPropsRefTimeDim.currentValue) && refTimeDim.setValue(layerPropsRefTimeDim === null || layerPropsRefTimeDim === void 0 ? void 0 : layerPropsRefTimeDim.currentValue);
+                refTimeToFind = wmTimeDim.getValue();
+                firstRefTime = refTimeDim === null || refTimeDim === void 0 ? void 0 : refTimeDim.getClosestValue(refTimeToFind, true);
+                firstRefTime && refTimeDim && wmTimeDim && wmTimeDim.setTimeValuesForReferenceTime(firstRefTime, refTimeDim);
               }
-            case 1:
+              // Make sure style is set in wmLayer as well
+              styleName && wmLayer.setStyle(styleName);
+              // Make sure we have the latest dimension values before initializing
+              _context.next = 10;
+              return wmLayer.parseLayer();
+            case 10:
+              onInitializeLayer && onInitializeLayer({
+                layerId: wmLayer.id,
+                style: wmLayer.currentStyle,
+                dimensions: wmLayer.dimensions.map(function (dimension) {
+                  return {
+                    name: dimension.name,
+                    units: dimension.units,
+                    currentValue: dimension.currentValue,
+                    maxValue: dimension.getLastValue(),
+                    minValue: dimension.getFirstValue(),
+                    synced: dimension.synced,
+                    values: dimension.values,
+                    unitSymbol: dimension.unitSymbol
+                  };
+                })
+              });
+            case 11:
             case "end":
               return _context.stop();
           }
@@ -5311,7 +5412,11 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
     // - dimensionsValues,
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layer, wmLayer, timespan === null || timespan === void 0 ? void 0 : timespan.start, timespan === null || timespan === void 0 ? void 0 : timespan.end, timespan === null || timespan === void 0 ? void 0 : timespan.step, layerName, styleName, dimensionsValuesEffectCheck]);
-  return debugMode ? jsx(ShowTimeAwareLayerInfo, {
+  // Only show debug info for data layers with time dimension
+  var hasTimeDim = (_wmLayer$dimensions$f = wmLayer === null || wmLayer === void 0 || (_wmLayer$dimensions4 = wmLayer.dimensions) === null || _wmLayer$dimensions4 === void 0 ? void 0 : _wmLayer$dimensions4.findIndex(function (dimension) {
+    return dimension.name === 'time';
+  })) !== null && _wmLayer$dimensions$f !== void 0 ? _wmLayer$dimensions$f : -1;
+  return debugMode && hasTimeDim !== -1 ? jsx(ShowTimeAwareLayerInfo, {
     wmLayer: wmLayer,
     stepsToCheck: getTimeStepsToCheckMemoized(timespan),
     layer: layer,
@@ -5485,7 +5590,9 @@ var XYZLayer = function XYZLayer(_ref) {
     var layer = new TileLayer({
       source: new XYZ({
         url: urlTemplate,
-        projection: tileProjectionCode
+        projection: tileProjectionCode,
+        minZoom: layerOptions === null || layerOptions === void 0 ? void 0 : layerOptions.minZoom,
+        maxZoom: layerOptions === null || layerOptions === void 0 ? void 0 : layerOptions.maxZoom
       })
     });
     map.addLayer(layer);
@@ -5494,7 +5601,7 @@ var XYZLayer = function XYZLayer(_ref) {
       map.removeLayer(layer);
       setLayer(undefined);
     };
-  }, [map, tileProjectionCode, urlTemplate]);
+  }, [map, tileProjectionCode, urlTemplate, layerOptions === null || layerOptions === void 0 ? void 0 : layerOptions.minZoom, layerOptions === null || layerOptions === void 0 ? void 0 : layerOptions.maxZoom]);
   useEffect(function () {
     if (!layerOptions || !layer) {
       return;
@@ -6550,23 +6657,6 @@ var colorMaps = {
   temperatureLegendColorsCWK: temperatureLegendColorsCWK
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2025 - Finnish Meteorological Institute (FMI)
- * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
- * */
 var makeLegendFromColorMap = function makeLegendFromColorMap(props) {
   var numClasses = props.colors.length;
   var minVal = props.min;
@@ -6614,10 +6704,61 @@ var getLegendClass = function getLegendClass(edrColorLegend, value) {
     return value >= entry.min && value < entry.max;
   });
 };
-var makeFeatureStyleDisc = function makeFeatureStyleDisc(feature, legend) {
+var getOffsetValues = function getOffsetValues(factor) {
+  return [[0, -20], [0, 0], [0, 20], [-30 * factor, -20], [-30 * factor, 0], [-30 * factor, 20], [30 * factor, -20], [30 * factor, 0], [30 * factor, 20], [60 * factor, -20], [60 * factor, 0], [60 * factor, 20], [-60 * factor, -20], [-60 * factor, 0], [-60 * factor, 20]];
+};
+var makeFeatureStyleMultiParam = function makeFeatureStyleMultiParam(feature) {
   var _feature$getPropertie = feature.getProperties(),
-    value = _feature$getPropertie.value;
-  var legendEntry = getLegendClass(legend, value);
+    values = _feature$getPropertie.values;
+  var paramValues = Object.values(values);
+  // Determine offset between columns (long strings need more space)
+  var maxLength = Math.max.apply(Math, _toConsumableArray(paramValues.map(function (el) {
+    return el !== undefined ? el.toString().length : 1;
+  })));
+  var factor = maxLength > 5 ? 1.4 : 1;
+  var offsetValues = getOffsetValues(factor);
+  // Don't allow showing more than 15 params
+  var params = paramValues.slice(0, 15);
+  return params.map(function (paramVal, index) {
+    return new Style({
+      text: new Text({
+        text: paramVal ? paramVal.toString() : '-',
+        offsetX: offsetValues[index][0],
+        offsetY: offsetValues[index][1],
+        scale: 1.0,
+        stroke: new Stroke({
+          color: '#ffffffff',
+          width: 1
+        }),
+        fill: new Fill({
+          color: '#000000'
+        }),
+        font: 'bold 11px Arial',
+        padding: [-5, -5, -5, -5]
+      })
+    });
+  });
+};
+var makeFeatureStyleMultiParamLoading = function makeFeatureStyleMultiParamLoading() {
+  return new Style({
+    text: new Text({
+      scale: 1.2,
+      stroke: new Stroke({
+        color: '#ffffffff',
+        width: 3
+      }),
+      fill: new Fill({
+        color: '#000000'
+      }),
+      text: '...'
+    })
+  });
+};
+var makeFeatureStyleDisc = function makeFeatureStyleDisc(feature, legend) {
+  var _feature$getPropertie2 = feature.getProperties(),
+    values = _feature$getPropertie2.values;
+  var textValue = Object.values(values)[0];
+  var legendEntry = getLegendClass(legend, textValue);
   return new Style({
     image: legendEntry === null || legendEntry === void 0 ? void 0 : legendEntry.image,
     text: new Text({
@@ -6626,13 +6767,14 @@ var makeFeatureStyleDisc = function makeFeatureStyleDisc(feature, legend) {
       fill: new Fill({
         color: '#000000'
       }),
-      text: value
+      text: "".concat(textValue)
     })
   });
 };
 var makeFeatureStyleLoading = function makeFeatureStyleLoading(feature) {
-  var _feature$getPropertie2 = feature.getProperties(),
-    value = _feature$getPropertie2.value;
+  var _feature$getPropertie3 = feature.getProperties(),
+    values = _feature$getPropertie3.values;
+  var textValue = Object.values(values)[0];
   return new Style({
     image: new Circle({
       radius: 14,
@@ -6650,7 +6792,7 @@ var makeFeatureStyleLoading = function makeFeatureStyleLoading(feature) {
       fill: new Fill({
         color: '#303030'
       }),
-      text: value
+      text: textValue
     })
   });
 };
@@ -6667,7 +6809,12 @@ var defaultStyle$1 = function defaultStyle(feature) {
  * @param styleName Strings like temperatureLegendColorsWoW:0,20 will get the legend temperatureLegendColorsWoW with a range from 0,20. This makes it flexible to adjust the colorrange via the stylename.
  * @returns StyleLike
  */
-var styleNameToStyleLikeNotMemoed = function styleNameToStyleLikeNotMemoed(styleName) {
+var styleNameToStyleLikeNotMemoed = function styleNameToStyleLikeNotMemoed(styleName, multiParam) {
+  if (multiParam) {
+    return function (feature) {
+      return makeFeatureStyleMultiParam(feature);
+    };
+  }
   var minMaxPartFromNumericIndex = styleName.indexOf(':');
   var legMinMax = minMaxPartFromNumericIndex > 0 ? styleName.substring(minMaxPartFromNumericIndex + 1).split(',').map(function (stringValue) {
     return parseFloat(stringValue);
@@ -14823,7 +14970,11 @@ var FeatureLayer = function FeatureLayer(_ref) {
     hoverSelect = _ref.hoverSelect,
     clickOnFeature = _ref.clickOnFeature,
     testId = _ref.testId,
-    opacity = _ref.opacity;
+    opacity = _ref.opacity,
+    _ref$declutter = _ref.declutter,
+    declutter = _ref$declutter === void 0 ? false : _ref$declutter,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? true : _ref$visible;
   var _useContext = useContext(MapContext),
     map = _useContext.map;
   var _useState = useState(),
@@ -14832,7 +14983,7 @@ var FeatureLayer = function FeatureLayer(_ref) {
     setSource = _useState2[1];
   var layerRef = useRef();
   useEffect(function () {
-    if (!map) {
+    if (!map || visible === false) {
       return function () {};
     }
     var source = new VectorSource({
@@ -14845,7 +14996,9 @@ var FeatureLayer = function FeatureLayer(_ref) {
       properties: {
         testId: testId
       },
-      opacity: opacity
+      opacity: opacity,
+      declutter: declutter,
+      visible: visible
     });
     layerRef.current = layer;
     layer.set('layerType', 'FeatureLayer');
@@ -14858,7 +15011,7 @@ var FeatureLayer = function FeatureLayer(_ref) {
     };
     // NOTE: style should not be part of this effect, as it changes always, causing the layer to be add/removed continuousely.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [map, zIndex, testId]);
+  }, [map, zIndex, testId, visible]);
   useEffect(function () {
     // Handle style function:
     if (layerRef.current && style) {
@@ -14873,6 +15026,11 @@ var FeatureLayer = function FeatureLayer(_ref) {
       (_layerRef$current2 = layerRef.current) === null || _layerRef$current2 === void 0 || _layerRef$current2.setOpacity(opacity);
     }
   }, [opacity]);
+  // Layer visible useEffect
+  useEffect(function () {
+    var _layerRef$current3;
+    (_layerRef$current3 = layerRef.current) === null || _layerRef$current3 === void 0 || _layerRef$current3.setVisible(!(visible === false));
+  }, [visible]);
   useEffect(function () {
     if (!source) {
       return;
@@ -14883,7 +15041,7 @@ var FeatureLayer = function FeatureLayer(_ref) {
     }
   }, [source, features]);
   useEffect(function () {
-    if (!map || !source || !hoverSelect || !hoverSelect.active) {
+    if (!map || !source || !hoverSelect || !hoverSelect.active || visible === false) {
       return function () {};
     }
     var previousHover = [];
@@ -14919,9 +15077,9 @@ var FeatureLayer = function FeatureLayer(_ref) {
       unByKey(eventKey);
       hoverSelect.onHover && hoverSelect.onHover(undefined);
     };
-  }, [map, source, hoverSelect]);
+  }, [map, source, hoverSelect, visible]);
   useEffect(function () {
-    if (!map || !source || !clickOnFeature) {
+    if (!map || !source || !clickOnFeature || visible === false) {
       return function () {};
     }
     var clickFunction = function clickFunction(evt) {
@@ -14937,7 +15095,7 @@ var FeatureLayer = function FeatureLayer(_ref) {
     return function () {
       unByKey(eventKey);
     };
-  }, [map, source, clickOnFeature]);
+  }, [map, source, clickOnFeature, visible]);
   return null;
 };
 
@@ -14958,7 +15116,11 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
     hoverSelect = _ref.hoverSelect,
     clickOnFeature = _ref.clickOnFeature,
     testId = _ref.testId,
-    opacity = _ref.opacity;
+    opacity = _ref.opacity,
+    _ref$declutter = _ref.declutter,
+    declutter = _ref$declutter === void 0 ? false : _ref$declutter,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? true : _ref$visible;
   var projection = useProjection();
   var featureCollectionRef = useRef();
   var features = useRef([]);
@@ -14984,7 +15146,9 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
     hoverSelect: hoverSelect,
     clickOnFeature: clickOnFeature,
     testId: testId,
-    opacity: opacity
+    opacity: opacity,
+    declutter: declutter,
+    visible: visible
   });
 };
 
@@ -15005,14 +15169,17 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var coverageCollectionToFeatureCollection = function coverageCollectionToFeatureCollection(cov, parameterName) {
+var coverageCollectionToFeatureCollection = function coverageCollectionToFeatureCollection(cov, parameterNames) {
   var _cov$coverages;
   var latLonValues = (cov === null || cov === void 0 || (_cov$coverages = cov.coverages) === null || _cov$coverages === void 0 ? void 0 : _cov$coverages.map(function (coverage) {
-    var _coverage$ranges$para;
+    var paramValues = parameterNames.split(',').reduce(function (obj, parameterName) {
+      var _coverage$ranges$para;
+      return _objectSpread2(_objectSpread2({}, obj), {}, _defineProperty({}, parameterName, (_coverage$ranges$para = coverage.ranges[parameterName]) === null || _coverage$ranges$para === void 0 ? void 0 : _coverage$ranges$para.values[0]));
+    }, {});
     return {
       type: 'Feature',
       properties: {
-        value: (_coverage$ranges$para = coverage.ranges[parameterName]) === null || _coverage$ranges$para === void 0 ? void 0 : _coverage$ranges$para.values[0]
+        values: _objectSpread2({}, paramValues)
       },
       geometry: {
         coordinates: [coverage.domain.axes.x.values[0], coverage.domain.axes.y.values[0]],
@@ -15036,6 +15203,8 @@ var TimeAwareEDRLocationLayer = function TimeAwareEDRLocationLayer(_ref) {
     opacity = _ref.opacity,
     dimensions = _ref.dimensions,
     layerId = _ref.layerId,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? true : _ref$visible,
     onInitializeLayer = _ref.onInitializeLayer;
   // get a wmLayer instance
   var wmLayer = useGetEDRLayerInstance(edrBaseUrl, parameter, layerId, onInitializeLayer);
@@ -15058,11 +15227,14 @@ var TimeAwareEDRLocationLayer = function TimeAwareEDRLocationLayer(_ref) {
     }
     setFeaturePoints(featurePoint);
   }, [parameter, result.data]);
+  var loadingStyle = parameter !== null && parameter !== void 0 && parameter.includes(',') ? makeFeatureStyleMultiParamLoading : makeFeatureStyleLoading;
   return jsx(OpenLayersFeatureLayer, {
     featureCollection: featurePoints,
-    style: result.isFetching ? makeFeatureStyleLoading : style,
+    style: result.isFetching ? loadingStyle : style,
     opacity: opacity,
-    zIndex: zIndex
+    zIndex: zIndex,
+    declutter: true,
+    visible: visible
   });
 };
 
@@ -15112,7 +15284,8 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
         });
       case LayerType.edrLayer:
         {
-          var styleLike = style !== undefined ? styleNameToStyleLike(style) : undefined;
+          var multiParam = name === null || name === void 0 ? void 0 : name.includes(',');
+          var styleLike = style !== undefined ? styleNameToStyleLike(style, multiParam) : undefined;
           return jsx(TimeAwareEDRLocationLayer, {
             layerId: id,
             edrBaseUrl: service,
@@ -15121,7 +15294,8 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
             zIndex: layerOptions.zIndex,
             style: styleLike,
             opacity: layerOptions.opacity,
-            onInitializeLayer: onInitializeLayer
+            onInitializeLayer: onInitializeLayer,
+            visible: !!(enabled !== false)
           });
         }
     }
@@ -15164,7 +15338,10 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
         }
         return jsx(XYZLayer, {
           urlTemplate: urlTemplate,
-          layerOptions: layerOptions,
+          layerOptions: _objectSpread2(_objectSpread2({}, layerOptions), {}, {
+            minZoom: tileSettingForCRS === null || tileSettingForCRS === void 0 ? void 0 : tileSettingForCRS.minLevel,
+            maxZoom: tileSettingForCRS === null || tileSettingForCRS === void 0 ? void 0 : tileSettingForCRS.maxLevel
+          }),
           layerProps: _objectSpread2(_objectSpread2({}, layerProps), {}, {
             enabled: true
           }),
@@ -16162,4 +16339,4 @@ var getLayerUpdateInfo = function getLayerUpdateInfo(wmLayer, mapId) {
   return updateObject;
 };
 
-export { BaseLayerType, ClickOnMapTool, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_FILL, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, ICON_LOCATIONMARKER, ICON_LOCATIONMARKER_MODIFY, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, Proj4js, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, clearImageCacheForAllMaps, colorMaps, createIconStyle, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getFeatureCollection, getFeatureExtent, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeLegendFromColorMap, makeView, marksByDimension, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, rewindGeometry, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRLayerCollection, useEDRLayerCollectionCube, useGeoJSON, useGetEDRLayerInstance, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapReactTranslations };
+export { BaseLayerType, ClickOnMapTool, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_FILL, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, ICON_LOCATIONMARKER, ICON_LOCATIONMARKER_MODIFY, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, Proj4js, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, clearImageCacheForAllMaps, colorMaps, createIconStyle, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getFeatureCollection, getFeatureExtent, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeFeatureStyleMultiParam, makeFeatureStyleMultiParamLoading, makeLegendFromColorMap, makeView, marksByDimension, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, rewindGeometry, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRLayerCollection, useEDRLayerCollectionCube, useGeoJSON, useGetEDRLayerInstance, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapReactTranslations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "12.11.0",
+  "version": "12.13.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {
@@ -8,9 +8,9 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/webmap": "12.11.0",
-    "@opengeoweb/theme": "12.11.0",
-    "@opengeoweb/shared": "12.11.0",
+    "@opengeoweb/webmap": "12.13.0",
+    "@opengeoweb/theme": "12.13.0",
+    "@opengeoweb/shared": "12.13.0",
     "lodash": "^4.17.21",
     "ol": "^10.4.0",
     "proj4": "^2.9.2",

package/src/lib/components/MapDimensionSelect/MapDimensionSelect.d.ts

@@ -6,6 +6,7 @@ export interface MapDimensionSelectProps {
     handleDimensionValueChanged: (layerId: string, dimensionName: string, dimensionValue: string) => void;
     handleSyncChanged: (layerId: string, dimensionName: string, dimensionValue: string, synced: boolean) => void;
     layerDimension: Dimension;
+    layerName: string;
 }
 declare const MapDimensionSelect: React.FC<MapDimensionSelectProps>;
 export default MapDimensionSelect;

package/src/lib/components/OpenLayers/layers/FeatureLayer.d.ts

@@ -9,5 +9,7 @@ export interface FeatureLayerProps {
     clickOnFeature?: ClickOnFeature;
     testId?: string;
     opacity?: number;
+    declutter?: boolean;
+    visible?: boolean;
 }
 export declare const FeatureLayer: React.FC<FeatureLayerProps>;

package/src/lib/components/OpenLayers/layers/OpenLayersFeatureLayer.d.ts

@@ -9,5 +9,7 @@ export interface OpenLayersFeatureLayerProps {
     clickOnFeature?: ClickOnFeature;
     testId?: string;
     opacity?: number;
+    declutter?: boolean;
+    visible?: boolean;
 }
 export declare const OpenLayersFeatureLayer: React.FC<OpenLayersFeatureLayerProps>;

package/src/lib/components/OpenLayers/layers/TimeAwareEDRLocationLayer.d.ts

@@ -9,6 +9,7 @@ interface TimeAwareEDRLocationLayerProps extends OpenLayersFeatureLayerProps {
     dimensions?: Dimension[];
     onInitializeLayer?: (payload: OnInitializeLayerProps) => void;
     opacity?: number;
+    visible?: boolean;
 }
 export declare const TimeAwareEDRLocationLayer: React.FC<TimeAwareEDRLocationLayerProps>;
 export {};

package/src/lib/components/OpenLayers/utils/ShowTimeAwareLayerInfo.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/components/OpenLayers/utils/coverageCollectionToFeatureCollection.d.ts

@@ -1,2 +1,2 @@
 import { CoverageCollection } from '@opengeoweb/shared';
-export declare const coverageCollectionToFeatureCollection: (cov: CoverageCollection | undefined, parameterName: string) => GeoJSON.FeatureCollection;
+export declare const coverageCollectionToFeatureCollection: (cov: CoverageCollection | undefined, parameterNames: string) => GeoJSON.FeatureCollection;

package/src/lib/edr-layer-api/colormaps/edrOlLegendUtils.d.ts

@@ -16,6 +16,8 @@ export declare const makeLegendFromColorMap: (props: {
     max: number;
 }) => EdrOlColorLegend;
 export declare const getLegendClass: (edrColorLegend: EdrOlColorLegend, value: number, clip?: boolean) => EdrMapLegendEntry | undefined;
+export declare const makeFeatureStyleMultiParam: (feature: FeatureLike) => Style[];
+export declare const makeFeatureStyleMultiParamLoading: () => Style;
 export declare const makeFeatureStyleDisc: (feature: FeatureLike, legend: EdrOlColorLegend) => Style;
 export declare const makeFeatureStyleLoading: (feature: FeatureLike) => Style;
-export declare const styleNameToStyleLike: ((styleName: string) => ((feature: FeatureLike) => Style)) & import("lodash").MemoizedFunction;
+export declare const styleNameToStyleLike: ((styleName: string, multiParam?: boolean) => ((feature: FeatureLike) => Style | Style[])) & import("lodash").MemoizedFunction;