@opengeoweb/core 9.0.0 → 9.2.0

package/index.esm.js

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import React__default, { useState, forwardRef, useContext, useEffect, useLayoutEffect, useRef } from 'react';
+import React__default, { useState, useCallback, forwardRef, useContext, useRef, useEffect, useLayoutEffect } from 'react';
 import { Grid, Box as Box$2, MenuItem, Typography, useTheme as useTheme$2, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, Paper, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, styled as styled$1, Slider, Checkbox, Card, IconButton, Select, CardContent, RadioGroup, FormControlLabel, Radio, ToggleButtonGroup, ToggleButton, Divider, Tooltip, ButtonGroup } from '@mui/material';
 import { CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, CustomTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, AlertBanner, CustomAccordion, calculateStartSize, ToolContainerDraggable, dateUtils, withEggs } from '@opengeoweb/shared';
 import { LayerSelectButtonConnect, LayerInfoButton, LayerInfoButtonConnect, getUserAddedServices, layerSelectConfig } from '@opengeoweb/layer-select';
-import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, Equalizer, DimensionsElevation, Link, LinkOff, List as List$1, ExitDomain, Info, Search, Close, ChevronDown, ChevronUp, StepForward, StepBackward, Pause, Play, Options, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, Equalizer, DimensionsElevation, Link, LinkOff, List as List$1, ExitDomain, Info, Search, MyLocation, Close, ChevronDown, ChevronUp, StepForward, StepBackward, Pause, Play, Options, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { useDispatch, useSelector, connect, Provider } from 'react-redux';
 import { ReactSortable } from 'react-sortablejs';
 import { layerTypes, layerUtils, layerActions, layerSelectors, serviceSelectors, serviceActions, mapSelectors, mapActions, mapEnums, mapConstants, filterLayers, uiSelectors, uiTypes, useSetupDialog, uiActions, drawtoolSelectors, genericActions, syncConstants, defaultLayers, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelectors, syncGroupsSelector, coreModuleConfig, routerUtils, routerModuleConfig, appModuleConfig, appActions } from '@opengeoweb/store';
 import { WMGetServiceFromStore, getCapabilities, webmapUtils, LayerType, handleMomentISOString, WMLayer } from '@opengeoweb/webmap';
 import { jsx } from 'react/jsx-runtime';
 import _, { isEqual, range } from 'lodash';
-import { MapControlButton, ZoomControls, MapView, MapViewLayer, LegendDialog, SearchDialog, emptyGeoJSON, MapControls, publicLayers } from '@opengeoweb/webmap-react';
+import { MapControlButton, ZoomControls, MapView, MapViewLayer, LegendDialog, registerDrawFunction, emptyGeoJSON, MapControls, publicLayers } from '@opengeoweb/webmap-react';
 import { TIME_SLIDER_LEGEND_HEIGHT, TimeSliderConnect, TimeSliderClockConnect, speedFactors } from '@opengeoweb/timeslider';
 import axios from 'axios';
 import { useDebounce } from '@opengeoweb/api';
@@ -3851,6 +3851,139 @@ _extends$3(Remove, {
 Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
 
+var DimensionSelectValue = function DimensionSelectValue(_ref) {
+  var isEnabled = _ref.isEnabled,
+    tooltip = _ref.tooltip,
+    selectedDimension = _ref.selectedDimension,
+    icon = _ref.icon,
+    onLayerChangeDimension = _ref.onLayerChangeDimension,
+    valueMappings = _ref.valueMappings,
+    hideLatestDuplicate = _ref.hideLatestDuplicate,
+    setUseLatestReferenceTime = _ref.setUseLatestReferenceTime,
+    useLatestReferenceTime = _ref.useLatestReferenceTime;
+  var _a;
+  var dimensionValuesRaw = (_a = selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.values) === null || _a === void 0 ? void 0 : _a.split(',').slice(0, 100).reverse();
+  if (!(selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.name) || !(dimensionValuesRaw === null || dimensionValuesRaw === void 0 ? void 0 : dimensionValuesRaw.length)) {
+    return null;
+  }
+  var isReferenceTimeDimensionAndUseLatestIsAvailable = selectedDimension.name === 'reference_time' && useLatestReferenceTime !== undefined;
+  var latestValue = hideLatestDuplicate && isReferenceTimeDimensionAndUseLatestIsAvailable ? dimensionValuesRaw.shift() : dimensionValuesRaw[0];
+  var setDimensionValue = function setDimensionValue(dimensionValue) {
+    if (isReferenceTimeDimensionAndUseLatestIsAvailable) {
+      if (dimensionValue === 'Latest') {
+        setUseLatestReferenceTime === null || setUseLatestReferenceTime === void 0 ? void 0 : setUseLatestReferenceTime(true);
+        onLayerChangeDimension(selectedDimension.name, dimensionValuesRaw[0], layerTypes.LayerActionOrigin.layerManager);
+        return;
+      }
+      setUseLatestReferenceTime === null || setUseLatestReferenceTime === void 0 ? void 0 : setUseLatestReferenceTime(false);
+    }
+    onLayerChangeDimension(selectedDimension.name, dimensionValue, layerTypes.LayerActionOrigin.layerManager);
+  };
+  var dimensionValues = isReferenceTimeDimensionAndUseLatestIsAvailable ? ['Latest'].concat(_toConsumableArray(dimensionValuesRaw)) : dimensionValuesRaw.slice(0, 100).reverse();
+  var isLatest = isReferenceTimeDimensionAndUseLatestIsAvailable && useLatestReferenceTime && selectedDimension.maxValue === selectedDimension.currentValue;
+  return /*#__PURE__*/React__default.createElement(TooltipSelect, {
+    disableUnderline: true,
+    tooltip: tooltip,
+    isEnabled: isEnabled,
+    value: isLatest ? 'Latest' : selectedDimension.currentValue,
+    list: dimensionValues.map(function (dimensionValue) {
+      return {
+        value: dimensionValue
+      };
+    }),
+    currentIndex: isLatest ? 0 : dimensionValues.findIndex(function (dimensionValue) {
+      return dimensionValue === selectedDimension.currentValue;
+    }),
+    onChange: function onChange(event) {
+      event.stopPropagation();
+      setDimensionValue(event.target.value);
+    },
+    onChangeMouseWheel: function onChangeMouseWheel(event) {
+      setDimensionValue(event.value);
+    },
+    style: {
+      maxWidth: '50%'
+    },
+    IconComponent: icon
+  }, /*#__PURE__*/React__default.createElement(MenuItem, {
+    disabled: true
+  }, "Dimension value (", dimensionValues.length, " options)"), dimensionValues.map(function (dimensionValue) {
+    var _a;
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
+      key: dimensionValue,
+      value: dimensionValue
+    }, ((_a = valueMappings === null || valueMappings === void 0 ? void 0 : valueMappings[selectedDimension.name]) === null || _a === void 0 ? void 0 : _a.call(valueMappings, dimensionValue, isReferenceTimeDimensionAndUseLatestIsAvailable ? latestValue : undefined)) || /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        whiteSpace: 'nowrap'
+      }
+    }, dimensionValue, dimensionValue !== 'Latest' && /*#__PURE__*/React__default.createElement("i", null, " ", selectedDimension.units)));
+  }));
+};
+
+/* *
+ * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var DimensionSelectName = function DimensionSelectName(_ref) {
+  var selectedDimensionName = _ref.selectedDimensionName,
+    setSelectedDimensionName = _ref.setSelectedDimensionName,
+    icon = _ref.icon,
+    nameMappings = _ref.nameMappings,
+    tooltip = _ref.tooltip,
+    isEnabled = _ref.isEnabled,
+    dimensionNames = _ref.dimensionNames;
+  return /*#__PURE__*/React__default.createElement(TooltipSelect, {
+    disableUnderline: true,
+    tooltip: tooltip,
+    isEnabled: isEnabled,
+    value: selectedDimensionName,
+    list: dimensionNames.map(function (name) {
+      return {
+        value: name
+      };
+    }),
+    currentIndex: dimensionNames.findIndex(function (name) {
+      return name === selectedDimensionName;
+    }),
+    onChange: function onChange(event) {
+      event.stopPropagation();
+      setSelectedDimensionName(event.target.value);
+    },
+    onChangeMouseWheel: function onChangeMouseWheel(event) {
+      setSelectedDimensionName(event.value);
+    },
+    style: {
+      maxWidth: '50%'
+    },
+    IconComponent: icon
+  }, /*#__PURE__*/React__default.createElement(MenuItem, {
+    disabled: true
+  }, "Dimension"), dimensionNames.map(function (name) {
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
+      key: name,
+      value: name
+    }, (nameMappings === null || nameMappings === void 0 ? void 0 : nameMappings[name]) || name);
+  }));
+};
+
+var defaultDimensionNameTooltip = function defaultDimensionNameTooltip(selectedDimension) {
+  return "Dimensions: ".concat(selectedDimension.name);
+};
+var defaultDimensionValueTooltip = function defaultDimensionValueTooltip(selectedDimension) {
+  return "Dimensions: ".concat(selectedDimension.name, " ").concat(selectedDimension.currentValue, " ").concat(selectedDimension.units);
+};
 var DimensionSelect = function DimensionSelect(_ref) {
   var onLayerChangeDimension = _ref.onLayerChangeDimension,
     _ref$layerDimensions = _ref.layerDimensions,
@@ -3860,13 +3993,12 @@ var DimensionSelect = function DimensionSelect(_ref) {
     icon = _ref.icon,
     nameMappings = _ref.nameMappings,
     valueMappings = _ref.valueMappings,
-    _ref$tooltipPrefix = _ref.tooltipPrefix,
-    tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Dimensions: ' : _ref$tooltipPrefix,
+    tooltipGenerator = _ref.tooltipGenerator,
     setUseLatestReferenceTime = _ref.setUseLatestReferenceTime,
     useLatestReferenceTime = _ref.useLatestReferenceTime,
     SingleValueComponent = _ref.SingleValueComponent,
-    latestLabel = _ref.latestLabel;
-  var _a, _b;
+    hideLatestDuplicate = _ref.hideLatestDuplicate;
+  var _a, _b, _c, _d, _e, _f;
   var _useState = useState((_a = layerDimensions === null || layerDimensions === void 0 ? void 0 : layerDimensions[0]) === null || _a === void 0 ? void 0 : _a.name),
     _useState2 = _slicedToArray(_useState, 2),
     selectedDimensionName = _useState2[0],
@@ -3889,6 +4021,10 @@ var DimensionSelect = function DimensionSelect(_ref) {
   }
   var collapseDimensionDropdown = SingleValueComponent && layerDimensions.length === 1;
   var collapseValueDropdown = SingleValueComponent && ((_b = selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.values) === null || _b === void 0 ? void 0 : _b.length) === 1;
+  var defaultNameTooltip = (_c = defaultDimensionNameTooltip(selectedDimension)) !== null && _c !== void 0 ? _c : '';
+  var defaultValueTooltip = (_d = defaultDimensionValueTooltip(selectedDimension)) !== null && _d !== void 0 ? _d : '';
+  var nameTooltip = (_e = tooltipGenerator === null || tooltipGenerator === void 0 ? void 0 : tooltipGenerator(selectedDimension)) !== null && _e !== void 0 ? _e : defaultNameTooltip;
+  var valueTooltip = (_f = tooltipGenerator === null || tooltipGenerator === void 0 ? void 0 : tooltipGenerator(selectedDimension, true)) !== null && _f !== void 0 ? _f : defaultValueTooltip;
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     direction: "row",
@@ -3901,11 +4037,11 @@ var DimensionSelect = function DimensionSelect(_ref) {
     nameMappings: nameMappings,
     valueMappings: valueMappings,
     position: "dimension"
-  })) : /*#__PURE__*/React.createElement(SelectDimension, {
+  })) : /*#__PURE__*/React.createElement(DimensionSelectName, {
     selectedDimensionName: selectedDimensionName,
     setSelectedDimensionName: setSelectedDimensionName,
     dimensionNames: dimensionNames,
-    tooltipPrefix: tooltipPrefix,
+    tooltip: nameTooltip,
     isEnabled: isEnabled,
     icon: icon,
     nameMappings: nameMappings
@@ -3913,127 +4049,18 @@ var DimensionSelect = function DimensionSelect(_ref) {
     nameMappings: nameMappings,
     valueMappings: valueMappings,
     position: "value"
-  })) : /*#__PURE__*/React.createElement(SelectDimensionValue, {
+  })) : /*#__PURE__*/React.createElement(DimensionSelectValue, {
     selectedDimension: selectedDimension,
     onLayerChangeDimension: onLayerChangeDimension,
-    tooltipPrefix: tooltipPrefix,
+    tooltip: valueTooltip,
     isEnabled: isEnabled,
+    hideLatestDuplicate: hideLatestDuplicate,
     icon: icon,
     valueMappings: valueMappings,
     setUseLatestReferenceTime: setUseLatestReferenceTime,
-    useLatestReferenceTime: useLatestReferenceTime,
-    latestLabel: latestLabel
+    useLatestReferenceTime: useLatestReferenceTime
   })));
 };
-var SelectDimension = function SelectDimension(_ref2) {
-  var selectedDimensionName = _ref2.selectedDimensionName,
-    setSelectedDimensionName = _ref2.setSelectedDimensionName,
-    icon = _ref2.icon,
-    nameMappings = _ref2.nameMappings,
-    tooltipPrefix = _ref2.tooltipPrefix,
-    isEnabled = _ref2.isEnabled,
-    dimensionNames = _ref2.dimensionNames;
-  return /*#__PURE__*/React.createElement(TooltipSelect, {
-    disableUnderline: true,
-    tooltip: "".concat(tooltipPrefix).concat(selectedDimensionName),
-    isEnabled: isEnabled,
-    value: selectedDimensionName,
-    list: dimensionNames.map(function (name) {
-      return {
-        value: name
-      };
-    }),
-    currentIndex: dimensionNames.findIndex(function (name) {
-      return name === selectedDimensionName;
-    }),
-    onChange: function onChange(event) {
-      event.stopPropagation();
-      setSelectedDimensionName(event.target.value);
-    },
-    onChangeMouseWheel: function onChangeMouseWheel(event) {
-      setSelectedDimensionName(event.value);
-    },
-    style: {
-      maxWidth: '50%'
-    },
-    IconComponent: icon
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    disabled: true
-  }, "Dimension"), dimensionNames.map(function (name) {
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      key: name,
-      value: name
-    }, (nameMappings === null || nameMappings === void 0 ? void 0 : nameMappings[name]) || name);
-  }));
-};
-var SelectDimensionValue = function SelectDimensionValue(_ref3) {
-  var isEnabled = _ref3.isEnabled,
-    tooltipPrefix = _ref3.tooltipPrefix,
-    selectedDimension = _ref3.selectedDimension,
-    icon = _ref3.icon,
-    onLayerChangeDimension = _ref3.onLayerChangeDimension,
-    valueMappings = _ref3.valueMappings,
-    setUseLatestReferenceTime = _ref3.setUseLatestReferenceTime,
-    useLatestReferenceTime = _ref3.useLatestReferenceTime,
-    _ref3$latestLabel = _ref3.latestLabel,
-    latestLabel = _ref3$latestLabel === void 0 ? 'Latest' : _ref3$latestLabel;
-  var _a;
-  var dimensionValuesRaw = (_a = selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.values) === null || _a === void 0 ? void 0 : _a.split(',').slice(0, 100).reverse();
-  if (!(selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.name) || !(dimensionValuesRaw === null || dimensionValuesRaw === void 0 ? void 0 : dimensionValuesRaw.length)) {
-    return null;
-  }
-  var isReferenceTimeDimensionAndUseLatestIsAvailable = selectedDimension.name === 'reference_time' && useLatestReferenceTime !== undefined;
-  var setDimensionValue = function setDimensionValue(dimensionValue) {
-    if (isReferenceTimeDimensionAndUseLatestIsAvailable) {
-      if (dimensionValue === latestLabel) {
-        setUseLatestReferenceTime === null || setUseLatestReferenceTime === void 0 ? void 0 : setUseLatestReferenceTime(true);
-        onLayerChangeDimension(selectedDimension.name, dimensionValuesRaw[0], layerTypes.LayerActionOrigin.layerManager);
-        return;
-      }
-      setUseLatestReferenceTime === null || setUseLatestReferenceTime === void 0 ? void 0 : setUseLatestReferenceTime(false);
-    }
-    onLayerChangeDimension(selectedDimension.name, dimensionValue, layerTypes.LayerActionOrigin.layerManager);
-  };
-  var dimensionValues = isReferenceTimeDimensionAndUseLatestIsAvailable ? [latestLabel].concat(_toConsumableArray(dimensionValuesRaw)) : dimensionValuesRaw.slice(0, 100).reverse();
-  var isLatest = isReferenceTimeDimensionAndUseLatestIsAvailable && useLatestReferenceTime && selectedDimension.maxValue === selectedDimension.currentValue;
-  return /*#__PURE__*/React.createElement(TooltipSelect, {
-    disableUnderline: true,
-    tooltip: "".concat(tooltipPrefix).concat(selectedDimension.name, " ").concat(selectedDimension.currentValue, " ").concat(selectedDimension.units),
-    isEnabled: isEnabled,
-    value: isLatest ? latestLabel : selectedDimension.currentValue,
-    list: dimensionValues.map(function (dimensionValue) {
-      return {
-        value: dimensionValue
-      };
-    }),
-    currentIndex: isLatest ? 0 : dimensionValues.findIndex(function (dimensionValue) {
-      return dimensionValue === selectedDimension.currentValue;
-    }),
-    onChange: function onChange(event) {
-      event.stopPropagation();
-      setDimensionValue(event.target.value);
-    },
-    onChangeMouseWheel: function onChangeMouseWheel(event) {
-      setDimensionValue(event.value);
-    },
-    style: {
-      maxWidth: '50%'
-    },
-    IconComponent: icon
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    disabled: true
-  }, "Dimension value (", dimensionValues.length, " options)"), dimensionValues.map(function (dimensionValue) {
-    var _a;
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      key: dimensionValue,
-      value: dimensionValue
-    }, ((_a = valueMappings === null || valueMappings === void 0 ? void 0 : valueMappings[selectedDimension.name]) === null || _a === void 0 ? void 0 : _a.call(valueMappings, dimensionValue)) || /*#__PURE__*/React.createElement("span", {
-      style: {
-        whiteSpace: 'nowrap'
-      }
-    }, dimensionValue, dimensionValue !== latestLabel && /*#__PURE__*/React.createElement("i", null, " ", selectedDimension.units)));
-  }));
-};
 
 var getRenderLayersValues = function getRenderLayersValues(layerName, layers) {
   var serviceLayer = layers.find(function (l) {
@@ -5253,8 +5280,8 @@ var OpacitySelectConnect = function OpacitySelectConnect(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var useLayerDimensions = function useLayerDimensions(layerId, mapId) {
   var dispatch = useDispatch();
@@ -5264,7 +5291,7 @@ var useLayerDimensions = function useLayerDimensions(layerId, mapId) {
   var isLayerEnabled = useSelector(function (store) {
     return layerSelectors.getLayerEnabled(store, layerId);
   });
-  var layerChangeDimension = React.useCallback(function (_ref) {
+  var layerChangeDimension = useCallback(function (_ref) {
     var dimension = _ref.dimension,
       origin = _ref.origin;
     return dispatch(layerActions.layerChangeDimension({
@@ -5280,13 +5307,7 @@ var useLayerDimensions = function useLayerDimensions(layerId, mapId) {
     layerChangeDimension: layerChangeDimension
   };
 };
-var DimensionSelectConnect = function DimensionSelectConnect(_ref2) {
-  var layerId = _ref2.layerId,
-    mapId = _ref2.mapId;
-  var _useLayerDimensions = useLayerDimensions(layerId, mapId),
-    layerDimensions = _useLayerDimensions.layerDimensions,
-    isLayerEnabled = _useLayerDimensions.isLayerEnabled,
-    layerChangeDimension = _useLayerDimensions.layerChangeDimension;
+var useReferenceTimeWithLatestOption = function useReferenceTimeWithLatestOption(layerId) {
   var useLatestReferenceTime = useSelector(function (store) {
     return layerSelectors.getUseLatestReferenceTime(store, layerId);
   });
@@ -5297,6 +5318,38 @@ var DimensionSelectConnect = function DimensionSelectConnect(_ref2) {
       useLatestReferenceTime: useLatestReferenceTime
     }));
   };
+  return {
+    useLatestReferenceTime: useLatestReferenceTime,
+    setUseLatestReferenceTime: setUseLatestReferenceTime
+  };
+};
+
+/* *
+ * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var DimensionSelectConnect = function DimensionSelectConnect(_ref) {
+  var layerId = _ref.layerId,
+    mapId = _ref.mapId;
+  var _useLayerDimensions = useLayerDimensions(layerId, mapId),
+    layerDimensions = _useLayerDimensions.layerDimensions,
+    isLayerEnabled = _useLayerDimensions.isLayerEnabled,
+    layerChangeDimension = _useLayerDimensions.layerChangeDimension;
+  var _useReferenceTimeWith = useReferenceTimeWithLatestOption(layerId),
+    useLatestReferenceTime = _useReferenceTimeWith.useLatestReferenceTime,
+    setUseLatestReferenceTime = _useReferenceTimeWith.setUseLatestReferenceTime;
   if (!layerDimensions.length || !layerId) {
     return null;
   }
@@ -10541,12 +10594,14 @@ var CustomDimensionSelectConnect = function CustomDimensionSelectConnect(_a) {
   var layerId = _a.layerId,
     mapId = _a.mapId,
     dimensionsToShow = _a.dimensionsToShow,
-    SingleValueComponent = _a.SingleValueComponent,
-    props = __rest(_a, ["layerId", "mapId", "dimensionsToShow", "SingleValueComponent"]);
+    props = __rest(_a, ["layerId", "mapId", "dimensionsToShow"]);
   var _useLayerDimensions = useLayerDimensions(layerId, mapId),
     layerDimensions = _useLayerDimensions.layerDimensions,
     isLayerEnabled = _useLayerDimensions.isLayerEnabled,
     layerChangeDimension = _useLayerDimensions.layerChangeDimension;
+  var _useReferenceTimeWith = useReferenceTimeWithLatestOption(layerId),
+    useLatestReferenceTime = _useReferenceTimeWith.useLatestReferenceTime,
+    setUseLatestReferenceTime = _useReferenceTimeWith.setUseLatestReferenceTime;
   var filteredDimensions = dimensionsToShow ? dimensionsToShow.map(function (dimensionName) {
     return layerDimensions.find(function (dimension) {
       return dimension.name === dimensionName;
@@ -10554,7 +10609,6 @@ var CustomDimensionSelectConnect = function CustomDimensionSelectConnect(_a) {
   }).filter(Boolean) : layerDimensions;
   return /*#__PURE__*/React.createElement(DimensionSelect, Object.assign({
     layerDimensions: filteredDimensions,
-    SingleValueComponent: SingleValueComponent,
     onLayerChangeDimension: function onLayerChangeDimension(dimensionName, dimensionValue, origin) {
       var dimension = {
         name: dimensionName,
@@ -10565,7 +10619,9 @@ var CustomDimensionSelectConnect = function CustomDimensionSelectConnect(_a) {
         origin: origin
       });
     },
-    isEnabled: isLayerEnabled
+    isEnabled: isLayerEnabled,
+    useLatestReferenceTime: useLatestReferenceTime,
+    setUseLatestReferenceTime: setUseLatestReferenceTime
   }, props));
 };
 
@@ -11365,19 +11421,31 @@ var filterServices = function filterServices(presetArray) {
   var services = hasValidServices ? validServices : undefined;
   return services;
 };
+var filterTimeSeriesServices = function filterTimeSeriesServices(presetArray) {
+  var hasServices = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
+  var validServices = hasServices ? presetArray.filter(function (preset) {
+    return isValidService(preset);
+  }) : null;
+  var hasValidServices = validServices && validServices.length > 0;
+  var services = hasValidServices ? validServices : undefined;
+  return services;
+};
 var filterMapPresets = function filterMapPresets(initialAppPreset) {
   var preset = initialAppPreset && initialAppPreset.preset || {};
   var layers = preset.layers,
     services = preset.services,
-    baseServices = preset.baseServices;
+    baseServices = preset.baseServices,
+    timeSeriesServices = preset.timeSeriesServices;
   var _ref = layers ? filterLayers.filterLayers(layers, filterLayers.parseLayer) : filterLayers.createEmtpyFilteredList(undefined),
     baseLayers = _ref.baseLayers,
     mapLayers = _ref.mapLayers;
   var filterredServices = services ? filterServices(services) : undefined;
   var filteredBaseServices = baseServices ? filterServices(baseServices) : undefined;
+  var filteredTimeSeriesServices = timeSeriesServices ? filterTimeSeriesServices(timeSeriesServices) : undefined;
   var filteredPreset = {
     services: filterredServices,
     baseServices: filteredBaseServices,
+    timeSeriesServices: filteredTimeSeriesServices,
     baseLayers: baseLayers,
     mapLayers: mapLayers
   };
@@ -11388,6 +11456,32 @@ var preset = {
 	presetType: "mapPreset",
 	presetId: "mapPreset-1",
 	presetName: "Layer manager preset",
+	timeSeriesServices: [
+		{
+			name: "KNMI",
+			url: "https://gw-edr-dev-add-cfn.pub.dev.knmi.cloud/edr",
+			id: "knmi",
+			description: "KNMI EDR",
+			type: "EDR",
+			scope: "system"
+		},
+		{
+			name: "FMI",
+			url: "https://opendata.fmi.fi/edr",
+			id: "fmi",
+			description: "FMI EDR",
+			type: "EDR",
+			scope: "system"
+		},
+		{
+			name: "MET Norway",
+			url: "https://interpol-b.met.no",
+			id: "METNorway",
+			description: "MET Norway EDR",
+			type: "EDR",
+			scope: "system"
+		}
+	],
 	services: [
 		{
 			name: "KNMIgeoservicesRadar",
@@ -13679,7 +13773,7 @@ var getLayersToUpdate = function getLayersToUpdate(layers, mapId) {
     });
     return {
       layerId: layer.id,
-      url: wmjsMap.getWMSGetFeatureInfoRequestURL(wmjsLayer, "".concat(wmjsMap.getMapPin().getXY().x), "".concat(wmjsMap.getMapPin().getXY().y), 'text/html'),
+      url: wmjsMap.getWMSGetFeatureInfoRequestURL(wmjsLayer, wmjsMap.getMapPin().getXY().x, wmjsMap.getMapPin().getXY().y, 'text/html'),
       title: getTitle$1(layer.id)
     };
   });
@@ -15707,10 +15801,178 @@ var SearchControlButtonConnect = function SearchControlButtonConnect(_ref) {
   return /*#__PURE__*/React__default.createElement(MapControlButton, {
     onClick: openSearchDialog,
     title: "Search",
-    "aria-label": "Map search"
+    "aria-label": "Map search",
+    isActive: isOpenInStore
   }, /*#__PURE__*/React__default.createElement(Search, null));
 };
 
+/* *
+ * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var MY_LOCATION = 'MyLocation';
+var locationOptions = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+var circleDrawFunction = function circleDrawFunction(args) {
+  var fillColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#88F';
+  var radius = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 12;
+  var ctx = args.context,
+    coord = args.coord;
+  ctx.strokeStyle = '#000';
+  ctx.fillStyle = fillColor || '#88F';
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.arc(coord.x, coord.y, radius || 10, 0, 2 * Math.PI);
+  ctx.fill();
+  ctx.stroke();
+  ctx.fillStyle = '#000';
+  ctx.beginPath();
+  ctx.arc(coord.x, coord.y, 2, 0, 2 * Math.PI);
+  ctx.fill();
+};
+var MyMapLocation = function MyMapLocation(_ref) {
+  var mapId = _ref.mapId;
+  var dispatch = useDispatch();
+  var layersBelongsToCurrentMapId = useSelector(function (store) {
+    return layerSelectors.getLayersByMapId(store, mapId || '');
+  });
+  var layerLocation = layersBelongsToCurrentMapId.find(function (layer) {
+    var _a;
+    if (layer.geojson && layer.geojson.features[0] && layer.geojson.features[0].properties && ((_a = layer.geojson.features[0].properties) === null || _a === void 0 ? void 0 : _a.name)) {
+      if (layer.geojson.features[0].properties.name === MY_LOCATION) {
+        return layer;
+      }
+    }
+    return undefined;
+  });
+  var layerLocationId = (layerLocation === null || layerLocation === void 0 ? void 0 : layerLocation.id) || '';
+  var circleDrawFunctionId = useRef(registerDrawFunction(circleDrawFunction));
+  var handleLocationClick = function handleLocationClick() {
+    if (mapId && layerLocationId !== '') {
+      dispatch(layerActions.layerDelete({
+        mapId: mapId,
+        layerIndex: 0,
+        layerId: layerLocationId
+      }));
+    } else if (navigator.geolocation && mapId && layerLocationId === '' && circleDrawFunctionId) {
+      navigator.geolocation.getCurrentPosition(function (success) {
+        var _success$coords = success.coords,
+          latitude = _success$coords.latitude,
+          longitude = _success$coords.longitude;
+        var geojson = {
+          type: 'FeatureCollection',
+          features: [{
+            type: 'Feature',
+            properties: {
+              name: MY_LOCATION,
+              drawFunctionId: circleDrawFunctionId.current
+            },
+            geometry: {
+              type: 'Point',
+              coordinates: [longitude, latitude]
+            }
+          }]
+        };
+        var layerId = webmapUtils.generateLayerId();
+        dispatch(layerActions.addLayer({
+          mapId: mapId,
+          layer: {
+            geojson: geojson,
+            layerType: LayerType.featureLayer
+          },
+          layerId: layerId,
+          origin: MY_LOCATION
+        }));
+        var wmjsMap = webmapUtils.getWMJSMapById(mapId);
+        if (!wmjsMap) {
+          return;
+        }
+        wmjsMap.calculateBoundingBoxAndZoom(latitude, longitude);
+      }, function (error) {
+        console.warn("Geolocation error: ".concat(error.message));
+      }, locationOptions);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    title: "Find my location",
+    "aria-label": MY_LOCATION,
+    onClick: handleLocationClick,
+    isSelected: layerLocationId !== '',
+    size: "large"
+  }, /*#__PURE__*/React__default.createElement(MyLocation, null));
+};
+
+/* *
+ * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var SearchDialog = function SearchDialog(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    _ref$mapId = _ref.mapId,
+    mapId = _ref$mapId === void 0 ? '' : _ref$mapId;
+  return isOpen && mapId ? /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      position: 'absolute',
+      pointerEvents: 'all',
+      zIndex: 999,
+      left: 50,
+      top: 15,
+      borderBottom: '1px solid grey',
+      backgroundColor: function backgroundColor(theme) {
+        return theme.palette.background.paper;
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(MyMapLocation, {
+    mapId: mapId
+  }), /*#__PURE__*/React__default.createElement(TextField, {
+    id: "dummy-search-field",
+    label: "Search",
+    variant: "filled",
+    InputProps: {
+      disableUnderline: true,
+      endAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
+        position: "end"
+      }, /*#__PURE__*/React__default.createElement(CustomIconButton, {
+        tooltipTitle: "Close",
+        edge: "end",
+        onClick: onClose,
+        size: "large"
+      }, /*#__PURE__*/React__default.createElement(Close, null)))
+    }
+  })) : null;
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15735,7 +15997,8 @@ var SearchControlConnect = function SearchControlConnect(_ref) {
     onCloseDialog = _useSetupDialog.onCloseDialog;
   return /*#__PURE__*/React__default.createElement(SearchDialog, {
     isOpen: isDialogOpen,
-    onClose: onCloseDialog
+    onClose: onCloseDialog,
+    mapId: mapId
   });
 };
 
@@ -15996,6 +16259,9 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
     width: "".concat(Math.round(100 / cols), "%"),
     height: "".concat(Math.round(100 / rows), "%")
   };
+  if (maps.length === 0) {
+    return null;
+  }
   var firstMapId = maps[0].id;
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -16727,13 +16993,22 @@ var reformatFinnishDateString = function reformatFinnishDateString(dateString) {
 };
 /**
  * Marks UTC time with Z after hh:mm or hh.mm or appends UTC to the end of the date string
+ * If two matches of time are found, the second one is marked
  */
 var shortUTCTime = function shortUTCTime(dateString) {
-  var result = dateString.replace(/(\d[:.]\d{2})/, '$1Z');
-  if (result === dateString) {
+  var timeRegex = /(\d[:.]\d{2})/g;
+  var match = dateString.match(timeRegex);
+  if (!match) {
     return "".concat(dateString, " UTC");
   }
-  return result;
+  var _match = _slicedToArray(match, 2),
+    first = _match[0],
+    second = _match[1];
+  if (second) {
+    var secondIndex = dateString.lastIndexOf(second);
+    return "".concat(dateString.substring(0, secondIndex)).concat(second, "Z").concat(dateString.substring(secondIndex + second.length));
+  }
+  return dateString.replace(first, "".concat(first, "Z"));
 };
 var getMonthChanges = function getMonthChanges(startDate, endDate) {
   var result = [];
@@ -17802,6 +18077,8 @@ var ControlButtonGroup = function ControlButtonGroup(_a) {
   }), children);
 };
 
+var OBSERVED_PADDING_DAYS = 1;
+var FORECAST_PADDING_DAYS = OBSERVED_PADDING_DAYS + 2;
 var TICK_HEIGHT = 6;
 var HOUR_LABEL_OFFSET = 1.5;
 var MONTH_LABEL_BREAKPOINT = 65;
@@ -17847,8 +18124,8 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
   var showHourLabelEveryThirdHour = limitHourLabelsToEveryThirdHour || tickSpacing < HOUR_LABEL_EVERY_THIRD_HOUR_BREAKPOINT;
   // Set up variables for date labels and background colors
   var dayLabels = [];
-  var dayLabelDate = new Date(startTime * SECOND_TO_MILLISECOND);
-  var lastDayLabelDate = new Date(endDate.getTime() + 2 * DAY_TO_MILLISECOND); // Append two more days
+  var dayLabelDate = new Date(startTime * SECOND_TO_MILLISECOND - OBSERVED_PADDING_DAYS * DAY_TO_MILLISECOND);
+  var lastDayLabelDate = new Date(endDate.getTime() + FORECAST_PADDING_DAYS * DAY_TO_MILLISECOND);
   while (dayLabelDate < lastDayLabelDate) {
     var dateString = dayLabelDate.toLocaleDateString(locale, {
       weekday: 'short',
@@ -17880,12 +18157,12 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
       }
     }, label);
   }) : null;
-  var currentDayIndex = (currentTime - startTime) * SECOND_TO_DAY + startTimeDayOffset;
+  var currentDayIndex = (currentTime - startTime) * SECOND_TO_DAY + startTimeDayOffset + OBSERVED_PADDING_DAYS;
   var backgroundRectangles = dayLabels.map(function (label, index) {
-    var observedColor = index % 2 === 0 ? timeSliderLite.timelineBackgroundObservedAlternative.fill : timeSliderLite.timelineBackgroundObserved.fill;
-    var forecastColor = index % 2 === 0 ? timeSliderLite.timelineBackground.fill : timeSliderLite.timelineBackgroundAlternative.fill;
+    var observedColor = index % 2 === 0 ? timeSliderLite.timelineBackgroundObserved.fill : timeSliderLite.timelineBackgroundObservedAlternative.fill;
+    var forecastColor = index % 2 === 0 ? timeSliderLite.timelineBackgroundAlternative.fill : timeSliderLite.timelineBackground.fill;
     var defaultProps = {
-      x: Math.floor(index * tickSpacing - tickOffset),
+      x: Math.floor((index - OBSERVED_PADDING_DAYS) * tickSpacing - tickOffset),
       y: 0,
       height: height
     };
@@ -17908,7 +18185,7 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
   }).flat();
   var dailyLabels = !showMonthLabel ? dayLabels.map(function (label, index) {
     return /*#__PURE__*/React__default.createElement("text", {
-      x: index * tickSpacing + 8 - tickOffset,
+      x: (index - OBSERVED_PADDING_DAYS) * tickSpacing + 8 - tickOffset,
       y: 14,
       fill: timeSliderLite.timeline.fill,
       textAnchor: "left",
@@ -17925,7 +18202,7 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
       length: hourLabelsPerDay
     }, function (_, value) {
       var defaultProps = {
-        x: index * tickSpacing + value * (tickSpacing / hourLabelsPerDay) - tickOffset - HOUR_LABEL_OFFSET,
+        x: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / hourLabelsPerDay) - tickOffset - HOUR_LABEL_OFFSET,
         y: height - 10,
         visibility: showHourLabelEveryThirdHour && value % 3 !== 0 ? 'hidden' : 'visible',
         fill: timeSliderLite.timeline.fill,
@@ -17961,8 +18238,8 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
         length: Math.floor(observedTicksPerDay * (currentDayIndex - index)) + 1
       }, function (_, value) {
         return /*#__PURE__*/React__default.createElement("line", Object.assign({}, defaultProps, {
-          x1: index * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset,
-          x2: index * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset,
+          x1: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset,
+          x2: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset,
           key: "".concat(label, "-").concat(value, "-observed-tick")
         }));
       });
@@ -17970,8 +18247,8 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
         length: Math.floor(forecastTicksPerDay * (1 - (currentDayIndex - index))) + 1
       }, function (_, value) {
         return /*#__PURE__*/React__default.createElement("line", Object.assign({}, defaultProps, {
-          x1: (index + 1) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset,
-          x2: (index + 1) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset,
+          x1: (index + 1 - OBSERVED_PADDING_DAYS) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset,
+          x2: (index + 1 - OBSERVED_PADDING_DAYS) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset,
           key: "".concat(label, "-").concat(value, "-forecast-tick")
         }));
       });
@@ -17981,8 +18258,8 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
       length: ticksPerDay + 1
     }, function (_, value) {
       return /*#__PURE__*/React__default.createElement("line", Object.assign({}, defaultProps, {
-        x1: index * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
-        x2: index * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
+        x1: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
+        x2: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
         key: "".concat(label, "-").concat(value, "-tick")
       }));
     });
@@ -18250,6 +18527,8 @@ var TimeSliderLiteBackground = function TimeSliderLiteBackground(_ref) {
     timeStep = _ref.timeStep,
     selectedTime = _ref.selectedTime,
     setSelectedTime = _ref.setSelectedTime;
+  var _useTheme = useTheme$2(),
+    timeSliderLite = _useTheme.palette.geowebColors.timeSliderLite;
   var sliderAreaRef = useRef(null);
   var _React$useState = React__default.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -18273,7 +18552,8 @@ var TimeSliderLiteBackground = function TimeSliderLiteBackground(_ref) {
       position: 'relative',
       height: "".concat(height, "px"),
       overflow: 'hidden',
-      width: '100%'
+      width: '100%',
+      backgroundColor: timeSliderLite.timelineBackgroundObserved.fill
     },
     "data-testid": "TimeSliderLite-Background"
   }, /*#__PURE__*/React__default.createElement(TimeSliderLiteBackgroundSvg, {
@@ -18647,6 +18927,58 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
   }))));
 };
 
+/* *
+ * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var useOnToggleAnimation = function useOnToggleAnimation(dispatch, mapId, selectedTime, timeStep, defaultTimeStep, startTime, endTime, isAnimating, timeSliderProps) {
+  var startMapAnimation = function startMapAnimation() {
+    var _a, _b, _c;
+    var observedTimeStep = (_a = timeStep === null || timeStep === void 0 ? void 0 : timeStep[0]) !== null && _a !== void 0 ? _a : defaultTimeStep[0];
+    var forecastTimeStep = (_b = timeStep === null || timeStep === void 0 ? void 0 : timeStep[1]) !== null && _b !== void 0 ? _b : defaultTimeStep[1];
+    var floorCorrectedTimeStart = floorLocalSeconds(startTime, HOUR_TO_SECOND);
+    var floorCorrectedEndTime = floorLocalSeconds(endTime, HOUR_TO_SECOND);
+    var timeList = generateCustomTimeList((_c = timeSliderProps.currentTime) !== null && _c !== void 0 ? _c : Date.now() * MILLISECOND_TO_SECOND, floorCorrectedTimeStart, floorCorrectedEndTime, [observedTimeStep, forecastTimeStep]);
+    dispatch(mapActions.mapStartAnimation({
+      mapId: mapId,
+      initialTime: new Date(selectedTime * SECOND_TO_MILLISECOND).toISOString(),
+      timeList: timeList,
+      origin: mapEnums.MapActionOrigin.map
+    }));
+  };
+  var onToggleAnimation = function onToggleAnimation() {
+    if (isAnimating) {
+      dispatch(mapActions.mapStopAnimation({
+        mapId: mapId,
+        origin: mapEnums.MapActionOrigin.map
+      }));
+    } else {
+      startMapAnimation();
+    }
+  };
+  React__default.useEffect(function () {
+    var hasTimeRange = startTime && endTime && selectedTime;
+    var isInvalidAnimation = selectedTime < startTime || selectedTime > endTime;
+    if (hasTimeRange && isInvalidAnimation && isAnimating) {
+      startMapAnimation();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTime, startTime, endTime]);
+  return onToggleAnimation;
+};
+
 var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
   var _b, _c, _d, _e, _f, _g;
   var overrideUseTimeRange = _a.overrideUseTimeRange,
@@ -18719,27 +19051,7 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
   var selectedTime = useSelector(function (store) {
     return mapSelectors.getSelectedTime(store, mapId);
   });
-  var onToggleAnimation = function onToggleAnimation() {
-    var _a, _b, _c;
-    if (isAnimating) {
-      dispatch(mapActions.mapStopAnimation({
-        mapId: mapId,
-        origin: mapEnums.MapActionOrigin.map
-      }));
-    } else {
-      var observedTimeStep = (_a = timeStep === null || timeStep === void 0 ? void 0 : timeStep[0]) !== null && _a !== void 0 ? _a : defaultTimeStep[0];
-      var forecastTimeStep = (_b = timeStep === null || timeStep === void 0 ? void 0 : timeStep[1]) !== null && _b !== void 0 ? _b : defaultTimeStep[1];
-      var floorCorrectedTimeStart = floorLocalSeconds(startTime, HOUR_TO_SECOND);
-      var floorCorrectedEndTime = floorLocalSeconds(endTime, HOUR_TO_SECOND);
-      var timeList = generateCustomTimeList((_c = timeSliderProps.currentTime) !== null && _c !== void 0 ? _c : Date.now() * MILLISECOND_TO_SECOND, floorCorrectedTimeStart, floorCorrectedEndTime, [observedTimeStep, forecastTimeStep]);
-      dispatch(mapActions.mapStartAnimation({
-        mapId: mapId,
-        initialTime: new Date(selectedTime * SECOND_TO_MILLISECOND).toISOString(),
-        timeList: timeList,
-        origin: mapEnums.MapActionOrigin.map
-      }));
-    }
-  };
+  var onToggleAnimation = useOnToggleAnimation(dispatch, mapId, selectedTime, timeStep, defaultTimeStep, startTime, endTime, isAnimating, timeSliderProps);
   var handleTimeRangeChange = function handleTimeRangeChange(newTimeRange) {
     if (isAnimating && newTimeRange) {
       dispatch(mapActions.mapStopAnimation({
@@ -19519,4 +19831,4 @@ var AppWrapperConnect = withEggs([appModuleConfig])(function (_ref) {
   return children;
 });
 
-export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, MapViewConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, RouterWrapperConnect, SyncGroupViewerConnect, TimeSliderLite, TimeSliderLiteConnect, TimeSliderLiteOptionsMenu, timeSliderLiteUtils as TimeSliderLiteUtils, ZoomControlConnect, componentsLookUp, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, testLayers, useFetchServices };
+export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, MapViewConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, RouterWrapperConnect, SearchControlButtonConnect, SearchControlConnect, SearchDialog, SyncGroupViewerConnect, TimeSliderLite, TimeSliderLiteConnect, TimeSliderLiteOptionsMenu, timeSliderLiteUtils as TimeSliderLiteUtils, ZoomControlConnect, componentsLookUp, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, testLayers, useFetchServices };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "9.0.0",
+  "version": "9.2.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

package/src/lib/components/LayerManager/LayerContainerRow/LayerRow/DimensionSelect/DimensionSelect.d.ts

@@ -7,6 +7,7 @@ export interface SingleValueComponentProps extends mapTypes.Dimension {
     nameMappings?: DimensionNameMappings;
     valueMappings?: DimensionValueMappings;
 }
+export type DimensionTooltipGenerator = (selectedDimension: mapTypes.Dimension, isValue?: boolean) => string;
 export interface DimensionSelectProps {
     layerDimensions?: mapTypes.Dimension[];
     onLayerChangeDimension: (dimensionName: string, dimensionValue: string, origin?: layerTypes.LayerActionOrigin.layerManager) => void;
@@ -14,11 +15,11 @@ export interface DimensionSelectProps {
     icon?: ElementType;
     nameMappings?: DimensionNameMappings;
     valueMappings?: DimensionValueMappings;
-    tooltipPrefix?: string;
+    tooltipGenerator?: DimensionTooltipGenerator;
     useLatestReferenceTime?: boolean;
     setUseLatestReferenceTime?: (useLatestReferenceTime: boolean) => void;
     SingleValueComponent?: React.FC<SingleValueComponentProps>;
-    latestLabel?: string;
+    hideLatestDuplicate?: boolean;
 }
 declare const DimensionSelect: FC<DimensionSelectProps>;
 export default DimensionSelect;

package/src/lib/components/LayerManager/LayerContainerRow/LayerRow/DimensionSelect/DimensionSelectConnect.d.ts

@@ -1,17 +1,7 @@
 import * as React from 'react';
-import { layerTypes, mapTypes } from '@opengeoweb/store';
 export interface DimensionSelectProps {
     layerId: string;
     mapId: string;
 }
-interface LayerChangeDimensionParams {
-    dimension: mapTypes.Dimension;
-    origin: layerTypes.LayerActionOrigin | undefined;
-}
-export declare const useLayerDimensions: (layerId: string, mapId: string) => {
-    layerDimensions: mapTypes.Dimension[];
-    isLayerEnabled: boolean;
-    layerChangeDimension: ({ dimension, origin, }: LayerChangeDimensionParams) => void;
-};
 declare const DimensionSelectConnect: React.FC<DimensionSelectProps>;
 export default DimensionSelectConnect;

package/src/lib/components/LayerManager/LayerContainerRow/LayerRow/DimensionSelect/DimensionSelectName.d.ts

@@ -0,0 +1,15 @@
+import { ElementType, FC } from 'react';
+import { layerTypes, mapTypes } from '@opengeoweb/store';
+import { DimensionValueMappings } from '../../../LayerManagerUtils';
+declare const DimensionSelectValue: FC<{
+    selectedDimension?: mapTypes.Dimension;
+    icon?: ElementType;
+    tooltip: string;
+    isEnabled: boolean;
+    onLayerChangeDimension: (dimensionName: string, dimensionValue: string, origin?: layerTypes.LayerActionOrigin.layerManager) => void;
+    valueMappings?: DimensionValueMappings;
+    hideLatestDuplicate?: boolean;
+    useLatestReferenceTime?: boolean;
+    setUseLatestReferenceTime?: (useLatestReferenceTime: boolean) => void;
+}>;
+export default DimensionSelectValue;

package/src/lib/components/LayerManager/LayerContainerRow/LayerRow/DimensionSelect/DimensionSelectValue.d.ts

@@ -0,0 +1,12 @@
+import { ElementType, FC } from 'react';
+import { DimensionNameMappings } from '../../../LayerManagerUtils';
+declare const DimensionSelectName: FC<{
+    dimensionNames: string[];
+    selectedDimensionName: string;
+    setSelectedDimensionName: (dimension: string) => void;
+    icon?: ElementType;
+    nameMappings?: DimensionNameMappings;
+    tooltip: string;
+    isEnabled: boolean;
+}>;
+export default DimensionSelectName;

package/src/lib/components/LayerManager/LayerContainerRow/LayerRow/DimensionSelect/dimensionSelectHooks.d.ts

@@ -0,0 +1,15 @@
+import { layerTypes, mapTypes } from '@opengeoweb/store';
+interface LayerChangeDimensionParams {
+    dimension: mapTypes.Dimension;
+    origin: layerTypes.LayerActionOrigin | undefined;
+}
+export declare const useLayerDimensions: (layerId: string, mapId: string) => {
+    layerDimensions: mapTypes.Dimension[];
+    isLayerEnabled: boolean;
+    layerChangeDimension: ({ dimension, origin, }: LayerChangeDimensionParams) => void;
+};
+export declare const useReferenceTimeWithLatestOption: (layerId: string) => {
+    useLatestReferenceTime: boolean;
+    setUseLatestReferenceTime: (useLatestReferenceTime: boolean) => void;
+};
+export {};

package/src/lib/components/LayerManager/LayerManagerUtils.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { mapTypes } from '@opengeoweb/store';
-import type { SingleValueComponentProps } from './LayerContainerRow/LayerRow/DimensionSelect/DimensionSelect';
+import type { DimensionTooltipGenerator, SingleValueComponentProps } from './LayerContainerRow/LayerRow/DimensionSelect/DimensionSelect';
 import { Size, ToolbarButtonSettings } from './LayerManagerHeaderOptions';
 export declare const columnClasses: {
     column1: string;
@@ -163,7 +163,7 @@ export type DimensionNameMappings = {
     [dimensionName: string]: string;
 };
 export type DimensionValueMappings = {
-    [dimensionName: string]: (value: string) => string;
+    [dimensionName: string]: (value: string, latest?: string) => string;
 };
 export interface LayerManagerCustomSettings {
     toolbar?: {
@@ -232,9 +232,10 @@ export interface LayerManagerCustomSettings {
             dimensionsToShow?: string[];
             SingleValueComponent?: React.FC<SingleValueComponentProps>;
             icon?: React.ElementType;
-            tooltipPrefix?: string;
+            tooltipGenerator?: DimensionTooltipGenerator;
             nameMappings?: DimensionNameMappings;
             valueMappings?: DimensionValueMappings;
+            hideLatestDuplicate?: boolean;
         };
         deleteLayer?: {
             tooltipTitle?: string;

package/src/lib/components/MapDrawToolRedux/MapDrawToolReduxMultipleDrawTools.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const MultipleDrawToolsDemo: () => React.ReactElement;

package/src/lib/components/Search/MyMapLocation.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface MyMapLocationProps {
+    mapId: string | undefined;
+}
+export declare const MY_LOCATION = "MyLocation";
+export declare const MyMapLocation: React.FC<MyMapLocationProps>;

package/src/lib/components/Search/MyMapLocation.spec.d.ts

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

package/src/lib/components/Search/SearchDialog.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface SearchDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    mapId?: string;
+}
+export declare const SearchDialog: React.FC<SearchDialogProps>;

package/src/lib/components/Search/index.d.ts

@@ -1,2 +1,4 @@
 export { SearchControlButtonConnect } from './SearchControlButtonConnect';
 export { SearchControlConnect } from './SearchControlConnect';
+export { SearchDialog } from './SearchDialog';
+export { MyMapLocation } from './MyMapLocation';

package/src/lib/components/TimeSliderLite/timeSliderLiteUtils.d.ts

@@ -21,6 +21,7 @@ export declare const SEVEN_DAYS_IN_SECONDS: number;
 export declare const reformatFinnishDateString: (dateString: string) => string;
 /**
  * Marks UTC time with Z after hh:mm or hh.mm or appends UTC to the end of the date string
+ * If two matches of time are found, the second one is marked
  */
 export declare const shortUTCTime: (dateString: string) => string;
 export declare const getMonthChanges: (startDate: Date, endDate: Date) => number[];

package/src/lib/components/TimeSliderLite/useOnToggleAnimation.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch } from '@reduxjs/toolkit';
+import { TimeSliderLiteProps } from './TimeSliderLite';
+export declare const useOnToggleAnimation: (dispatch: Dispatch<any>, mapId: string, selectedTime: number, timeStep: [number, number] | null, defaultTimeStep: [number, number], startTime: number, endTime: number, isAnimating: boolean, timeSliderProps: Partial<TimeSliderLiteProps>) => (() => void);

package/src/lib/components/TimeSliderLite/useOnToggleAnimation.spec.d.ts

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

package/src/lib/index.d.ts

@@ -16,4 +16,5 @@ export * from './utils/jsonPresetFilter';
 export * as defaultConfigurations from './utils/defaultConfigurations';
 export * from './components/Providers/Providers';
 export * from './components/RouterWrapper';
+export * from './components/Search';
 export * from './components/AppWrapper';

package/src/lib/utils/jsonPresetFilter.d.ts

@@ -1,14 +1,17 @@
 import { layerSelectTypes } from '@opengeoweb/layer-select';
+import { TimeSeriesService } from '@opengeoweb/shared';
 import { filterLayers, layerTypes } from '@opengeoweb/store';
 interface FilteredMapPresets extends filterLayers.FilteredLayerList {
     services?: layerSelectTypes.LayerSelectService[];
     baseServices?: layerSelectTypes.LayerSelectService[];
+    timeSeriesServices?: TimeSeriesService[];
 }
 export interface InitialAppPresetProps {
     presetType?: string;
     presetId?: string;
     presetName?: string;
     services?: layerSelectTypes.LayerSelectService[];
+    timeSeriesServices?: TimeSeriesService[];
     baseServices?: layerSelectTypes.LayerSelectService[];
     layers?: layerTypes.Layer[];
     baseLayers?: layerTypes.Layer[];
@@ -17,5 +20,6 @@ export interface InitialAppPreset {
     preset: InitialAppPresetProps;
 }
 export declare const filterServices: (presetArray: layerSelectTypes.LayerSelectService[]) => layerSelectTypes.LayerSelectService[];
+export declare const filterTimeSeriesServices: (presetArray: TimeSeriesService[]) => TimeSeriesService[];
 export declare const filterMapPresets: (initialAppPreset: InitialAppPreset) => FilteredMapPresets;
 export {};