@opengeoweb/webmap-react 12.12.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');
@@ -5250,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();
           }
@@ -5555,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);
@@ -5564,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;
@@ -6620,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;
@@ -6684,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({
@@ -6696,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,
@@ -6720,7 +6792,7 @@ var makeFeatureStyleLoading = function makeFeatureStyleLoading(feature) {
       fill: new Fill({
         color: '#303030'
       }),
-      text: value
+      text: textValue
     })
   });
 };
@@ -6737,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);
@@ -14893,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(),
@@ -14902,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({
@@ -14915,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');
@@ -14928,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) {
@@ -14943,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;
@@ -14953,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 = [];
@@ -14989,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) {
@@ -15007,7 +15095,7 @@ var FeatureLayer = function FeatureLayer(_ref) {
     return function () {
       unByKey(eventKey);
     };
-  }, [map, source, clickOnFeature]);
+  }, [map, source, clickOnFeature, visible]);
   return null;
 };
 
@@ -15028,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([]);
@@ -15054,7 +15146,9 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
     hoverSelect: hoverSelect,
     clickOnFeature: clickOnFeature,
     testId: testId,
-    opacity: opacity
+    opacity: opacity,
+    declutter: declutter,
+    visible: visible
   });
 };
 
@@ -15075,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]],
@@ -15106,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);
@@ -15128,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
   });
 };
 
@@ -15182,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,
@@ -15191,7 +15294,8 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
             zIndex: layerOptions.zIndex,
             style: styleLike,
             opacity: layerOptions.opacity,
-            onInitializeLayer: onInitializeLayer
+            onInitializeLayer: onInitializeLayer,
+            visible: !!(enabled !== false)
           });
         }
     }
@@ -15234,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
           }),
@@ -16232,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.12.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.12.0",
-    "@opengeoweb/theme": "12.12.0",
-    "@opengeoweb/shared": "12.12.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/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;