@opengeoweb/core 7.0.0 → 8.1.0

package/index.esm.js

@@ -2,18 +2,18 @@ import * as React from 'react';
 import React__default, { forwardRef, useContext, useCallback, useEffect, createElement, PureComponent, useState, useRef, 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, Backdrop, ListItem, ListItemSecondaryAction, Checkbox, Switch, styled as styled$1, Slider, Menu, Card, IconButton, Select, CardContent, RadioGroup, FormControlLabel, Radio, ToggleButtonGroup, ToggleButton, Divider, Tooltip, ButtonGroup, Snackbar } from '@mui/material';
 import { CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, CustomTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, AlertBanner, CustomAccordion, ToolContainerDraggable, calculateDialogSizeAndPosition, CustomToggleButton, SearchHighlight, dateUtils, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
-import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Close, Layers, Equalizer, Link, LinkOff, AutoUpdateInActive, Speed, Clock, Now, Animation, Options, Pause, Play, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, Location, DrawPolygon, DrawRegion, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Close, Layers, Equalizer, Link, LinkOff, AutoUpdateInActive, Speed, Clock, Now, Animation, Options, Pause, Play, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { useDispatch, useSelector, connect, Provider } from 'react-redux';
-import { uiTypes, uiSelectors, uiActions, layerTypes, layerUtils, layerActions, layerSelectors, serviceSelectors, serviceActions, mapSelectors, mapActions, mapEnums, mapConstants, filterLayers, getUserAddedServices, layerSelectSelectors, layerSelectActions, storeUtils, snackbarActions, layerSelectTypes, mapUtils, genericActions, syncConstants, drawActions, mapStoreActions, drawSelectors, defaultLayers, syncGroupsSelectors, syncGroupsSelector, snackbarModuleConfig, snackbarSelectors, coreModuleConfig, routerUtils, routerModuleConfig, appModuleConfig, appActions } from '@opengeoweb/store';
+import { uiTypes, uiSelectors, uiActions, layerTypes, layerUtils, layerActions, layerSelectors, serviceSelectors, serviceActions, mapSelectors, mapActions, mapEnums, mapConstants, filterLayers, getUserAddedServices, layerSelectSelectors, layerSelectActions, storeUtils, snackbarActions, layerSelectTypes, mapUtils, genericActions, syncConstants, defaultLayers, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelectors, syncGroupsSelector, snackbarModuleConfig, snackbarSelectors, coreModuleConfig, routerUtils, routerModuleConfig, appModuleConfig, appActions } from '@opengeoweb/store';
 import { ReactSortable } from 'react-sortablejs';
 import { webmapUtils, WMGetServiceFromStore, getCapabilities, LayerType, clearImageCache, WMLayer } from '@opengeoweb/webmap';
 import { jsx } from 'react/jsx-runtime';
-import _, { isEqual as isEqual$1, debounce, groupBy, throttle as throttle$1, clamp as clamp$1, range } from 'lodash';
+import _, { isEqual as isEqual$1, debounce, groupBy, throttle as throttle$1, range } from 'lodash';
 import Box$3 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 import Grid$1 from '@mui/material/Grid';
-import { LegendLayout, MapControlButton, ZoomControls, CanvasComponent, MapView, MapViewLayer, LegendDialog, defaultStyleProperties, lineString, featurePoint, featurePolygon, emptyGeoJSON, DRAWMODE, addFeatureProperties, isGeoJSONFeatureCreatedByTool, getFeatureCollection, getGeoJson, createInterSections, MapControls, publicLayers } from '@opengeoweb/webmap-react';
-import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField, ReactHookFormSelect, ReactHookFormHiddenInput } from '@opengeoweb/form-fields';
+import { LegendLayout, MapControlButton, ZoomControls, CanvasComponent, MapView, MapViewLayer, LegendDialog, emptyGeoJSON, MapControls, publicLayers } from '@opengeoweb/webmap-react';
+import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
 import moment from 'moment';
 import Draggable from 'react-draggable';
 import { flushSync } from 'react-dom';
@@ -5516,28 +5516,23 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
     tooltipTitle = _ref.tooltipTitle,
     icon = _ref.icon;
   var dispatch = useDispatch();
-  var layer = useSelector(function (store) {
-    return layerSelectors.getLayerById(store, layerId);
-  });
-  var addLayer = React.useCallback(function (_ref2) {
-    var mapId = _ref2.mapId,
-      layerId = _ref2.layerId,
-      layer = _ref2.layer;
-    return dispatch(layerActions.addLayer({
+  var duplicateLayer = React.useCallback(function (_ref2) {
+    var newLayerId = _ref2.newLayerId,
+      mapId = _ref2.mapId;
+    return dispatch(layerActions.duplicateMapLayer({
       mapId: mapId,
-      layerId: layerId,
-      layer: layer,
+      oldLayerId: layerId,
+      newLayerId: newLayerId,
       origin: layerTypes.LayerActionOrigin.layerManager
     }));
-  }, [dispatch]);
+  }, [dispatch, layerId]);
   return /*#__PURE__*/React.createElement(LayerManagerMenuButton, {
     layerId: layerId,
     mapId: mapId,
     onLayerDuplicate: function onLayerDuplicate() {
-      addLayer({
-        layerId: webmapUtils.generateLayerId(),
-        mapId: mapId,
-        layer: layer
+      duplicateLayer({
+        newLayerId: webmapUtils.generateLayerId(),
+        mapId: mapId
       });
     },
     tooltipTitle: tooltipTitle,
@@ -8971,7 +8966,7 @@ tags.forEach(function (tagName) {
 });
 
 /**
- * @mui/styled-engine v5.14.8
+ * @mui/styled-engine v5.14.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -10384,10 +10379,10 @@ var ActivateLayerConnect = function ActivateLayerConnect(_ref) {
     }
   }
   var current = getCurrentOptionForLayer(thisLayerHasBoth, thisLayerHasAutoTimestep, thisLayerHasAutoUpdate);
-  var layerTimeDimension = useSelector(function (store) {
-    return layerSelectors.getLayerTimeDimension(store, layerId);
+  var layerHasTimeDimension = useSelector(function (store) {
+    return layerSelectors.getLayerHasTimeDimension(store, layerId);
   });
-  if (!layerTimeDimension) {
+  if (!layerHasTimeDimension) {
     return /*#__PURE__*/React.createElement(CustomTooltip, {
       title: "Layer has no time dimension",
       placement: "top"
@@ -10461,10 +10456,10 @@ var AcceptanceTimeConnect = function AcceptanceTimeConnect(_ref) {
       acceptanceTime: acceptanceTime
     }));
   };
-  var layerTimeDimension = useSelector(function (store) {
-    return layerSelectors.getLayerTimeDimension(store, layerId);
+  var layerHasTimeDimension = useSelector(function (store) {
+    return layerSelectors.getLayerHasTimeDimension(store, layerId);
   });
-  if (!layerTimeDimension) {
+  if (!layerHasTimeDimension) {
     return /*#__PURE__*/React__default.createElement(CustomTooltip, {
       title: "Layer has no time dimension",
       placement: "top"
@@ -11856,7 +11851,7 @@ var styles$6 = {
     boxSizing: 'border-box'
   }
 };
-var calculateStartSize$1 = function calculateStartSize(minSize, prefSize, startPosition) {
+var calculateStartSize = function calculateStartSize(minSize, prefSize, startPosition) {
   var _calculateDialogSizeA = calculateDialogSizeAndPosition(),
     calcWidth = _calculateDialogSizeA.width,
     calcHeight = _calculateDialogSizeA.height;
@@ -11907,7 +11902,7 @@ var LayerManager = function LayerManager(_ref) {
     width: 100,
     height: 126
   };
-  var startSizeCalc = calculateStartSize$1(minSize, size, startPosition);
+  var startSizeCalc = calculateStartSize(minSize, size, startPosition);
   var _React$useState = React.useState(startSizeCalc),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     sizeInState = _React$useState2[0],
@@ -12169,7 +12164,7 @@ var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var getDialogType$1 = function getDialogType(mapId, isMultiMap, isDocked) {
+var getDialogType = function getDialogType(mapId, isMultiMap, isDocked) {
   if (isDocked) {
     return "".concat(uiTypes.DialogTypes.DockedLayerManager, "-").concat(mapId);
   }
@@ -12209,7 +12204,7 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
     _ref$source = _ref.source,
     source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
-  var dialogType = getDialogType$1(initialMapId, isMultiMap, isDocked);
+  var dialogType = getDialogType(initialMapId, isMultiMap, isDocked);
   var activeMapId = useSelector(function (store) {
     return uiSelectors.getDialogMapId(store, dialogType);
   });
@@ -16571,11 +16566,6 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
 var millisecondsInSecond = 1000;
 var speedFactors = [0.1, 0.2, 0.5, 1, 2, 4, 8, 16]; // Declares available animation speed multipliers for default delay
 
-var getSelectedTime = function getSelectedTime(timeDimension) {
-  var currentValueIsValid = timeDimension && timeDimension.currentValue && dateUtils.isValid(dateUtils.utc(timeDimension.currentValue));
-  var selectedTime = currentValueIsValid && timeDimension ? dateUtils.unix(dateUtils.utc(timeDimension.currentValue)) : dateUtils.unix(dateUtils.utc());
-  return selectedTime;
-};
 /**
  * Returns time bounds from the given dimension. If no time dimension given, current time is returned as default
  */
@@ -16589,27 +16579,11 @@ var getTimeBounds = function getTimeBounds(dimensions) {
   });
   var startTime = timeDimension && timeDimension.minValue ? dateUtils.unix(dateUtils.utc(timeDimension.minValue)) : defaultStartEnd;
   var endTime = timeDimension && timeDimension.maxValue ? dateUtils.unix(dateUtils.utc(timeDimension.maxValue)) : defaultStartEnd;
-  var selectedTime = getSelectedTime(timeDimension);
   return {
-    selectedTime: selectedTime,
     startTime: startTime,
     endTime: endTime
   };
 };
-/**
- * Returns time bounds as *Moment* time instances from the given dimension. If no time dimension given, current time is returned as default
- */
-var getMomentTimeBounds = function getMomentTimeBounds(dimensions) {
-  var _getTimeBounds = getTimeBounds(dimensions),
-    selectedTime = _getTimeBounds.selectedTime,
-    startTime = _getTimeBounds.startTime,
-    endTime = _getTimeBounds.endTime;
-  return {
-    selectedTime: moment.unix(selectedTime),
-    startTime: moment.unix(startTime),
-    endTime: moment.unix(endTime)
-  };
-};
 var scalingCoefficient = function scalingCoefficient(end, start, width) {
   return width / (end - start);
 };
@@ -16622,88 +16596,6 @@ var timestampToPixel = function timestampToPixel(timestamp, centerTime, widthPx,
 var pixelToTimestamp = function pixelToTimestamp(timePx, centerTime, widthPx, secondsPerPx) {
   return centerTime - (widthPx / 2 - timePx) * secondsPerPx;
 };
-var onsetNewDateDebounced = function onsetNewDateDebounced(dateToSet, onSetNewDate) {
-  debounce(function () {
-    onSetNewDate(dateToSet);
-  }, 10, {
-    leading: true
-  })();
-};
-var setNewRoundedTime = function setNewRoundedTime(x, centerTime, width, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate) {
-  var unixTime = pixelToTimestamp(x, centerTime, width, secondsPerPx);
-  var roundedTime = mapUtils.roundWithTimeStep(unixTime, timeStep);
-  var maxTime = Math.max(roundedTime, dataStartTime);
-  var newTime = Math.min(maxTime, dataEndTime || roundedTime);
-  var selectedTimeString = moment.unix(newTime).toISOString();
-  onsetNewDateDebounced(selectedTimeString, onSetNewDate);
-};
-var getDataLimitsFromLayers = function getDataLimitsFromLayers(layers) {
-  return layers.reduce(function (_ref, layer) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      start = _ref2[0],
-      end = _ref2[1];
-    var dimension = webmapUtils.getWMJSTimeDimensionForLayerId(layer.id);
-    if (dimension) {
-      var lastValue = moment(dimension.getLastValue()).unix();
-      var firstValue = moment(dimension.getFirstValue()).unix();
-      var newLast = lastValue > end ? lastValue : end;
-      var newFirst = firstValue < start ? firstValue : start;
-      return [newFirst, newLast];
-    }
-    return [start, end];
-  },
-  /* Using the maximum 32-bit value and 0 as starting points
-   * bigger values like Number.MAX_VALUE or Number.MAX_SAFE_INTEGER
-   * cause weird behaviour as timestamps break at 32bit limit (year 2038)
-   */
-  [2147483647, 0]);
-};
-var setPreviousTimeStep = function setPreviousTimeStep(timeStep, currentTime, dataStartTime, onSetNewDate) {
-  var nextTime = currentTime - timeStep;
-  var roundedTime = mapUtils.roundWithTimeStep(nextTime, timeStep, 'floor');
-  var newTime = Math.max(roundedTime, dataStartTime || roundedTime);
-  var selectedTimeString = moment.unix(newTime).toISOString();
-  onsetNewDateDebounced(selectedTimeString, onSetNewDate);
-};
-var setNextTimeStep = function setNextTimeStep(timeStep, currentTime, dataEndTime, onSetNewDate) {
-  var nextTime = currentTime + timeStep;
-  var roundedTime = mapUtils.roundWithTimeStep(nextTime, timeStep, 'ceil');
-  var newTime = Math.min(roundedTime, dataEndTime || roundedTime);
-  var selectedTimeString = moment.unix(newTime).toISOString();
-  onsetNewDateDebounced(selectedTimeString, onSetNewDate);
-};
-/**
- * updates unfiltered selected time and moves selected time a given distance
- * in pixels. Unfiltered selected time can be outside data data limits, but
- * selected time cannot.
- */
-var moveSelectedTimePx = function moveSelectedTimePx(x, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime, onSetNewDate) {
-  var _map = [dataStartTime, dataEndTime, unfilteredSelectedTime].map(function (timestamp) {
-      return timestampToPixel(timestamp, centerTime, canvasWidth, secondsPerPx);
-    }),
-    _map2 = _slicedToArray(_map, 3),
-    leftMarkerPx = _map2[0],
-    rightMarkerPx = _map2[1],
-    unfilteredSelectedTimePx = _map2[2];
-  setUnfilteredSelectedTime(pixelToTimestamp(unfilteredSelectedTimePx + x, centerTime, canvasWidth, secondsPerPx));
-  var clickedUnfilteredSelectedTimePx = unfilteredSelectedTimePx + x;
-  var minClickedUnfilteredSelectedTimePx = Math.min(clickedUnfilteredSelectedTimePx, rightMarkerPx);
-  var newUnfilteredSelectedTimePx = Math.max(minClickedUnfilteredSelectedTimePx, leftMarkerPx);
-  setNewRoundedTime(newUnfilteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
-};
-/**
- * This function gets the length in seconds of the data layers
- * @param layers
- * @returns dataSpanSeconds,
- */
-var getDataSpanSeconds = function getDataSpanSeconds(layers) {
-  var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
-    _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
-    dataStartTime = _getDataLimitsFromLay2[0],
-    dataEndTime = _getDataLimitsFromLay2[1];
-  var dataRegionInSeconds = dataEndTime - dataStartTime;
-  return Math.floor(dataRegionInSeconds);
-};
 /**
  * This function creates and returns an array where there is secondsPerPx
  * number of the data set added for a data scale (secondsPerPx)
@@ -16776,24 +16668,6 @@ var AUTO_MOVE_AREA_PADDING = 1;
 var getAutoMoveAreaWidth = function getAutoMoveAreaWidth(scale) {
   return (scale === mapEnums.Scale.Year ? timeBoxGeom.largeWidth + timeBoxGeom.iconWidth : timeBoxGeom.smallWidth + timeBoxGeom.iconWidth) / 2 + AUTO_MOVE_AREA_PADDING;
 };
-/** Reusable business logic for how to handle events that set time to now (closest).
- * Used in NowButton and TimeSliderLegend.
- */
-var handleSetNowEvent = function handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime) {
-  if (dataStartTime < dataEndTime) {
-    if (dataEndTime < currentTime) {
-      onSetNewDate(moment.utc(dataEndTime * millisecondsInSecond).toISOString());
-      onSetCenterTime(dataEndTime);
-    } else if (dataStartTime > currentTime) {
-      onSetNewDate(moment.utc(dataStartTime * millisecondsInSecond).toISOString());
-      onSetCenterTime(dataStartTime);
-    } else {
-      var closestToCurrent = mapUtils.roundWithTimeStep(currentTime, timeStep);
-      onSetNewDate(moment.utc(closestToCurrent * millisecondsInSecond).toISOString());
-      onSetCenterTime(closestToCurrent);
-    }
-  }
-};
 var TimeInMinutes;
 (function (TimeInMinutes) {
   TimeInMinutes[TimeInMinutes["YEAR"] = 525600] = "YEAR";
@@ -16889,20 +16763,11 @@ var getFundamentalScale$1 = function getFundamentalScale(secondsPerPx) {
 
 var timeSliderUtils = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  getSelectedTime: getSelectedTime,
   getTimeBounds: getTimeBounds,
-  getMomentTimeBounds: getMomentTimeBounds,
   scalingCoefficient: scalingCoefficient,
   timestampToPixelEdges: timestampToPixelEdges,
   timestampToPixel: timestampToPixel,
   pixelToTimestamp: pixelToTimestamp,
-  onsetNewDateDebounced: onsetNewDateDebounced,
-  setNewRoundedTime: setNewRoundedTime,
-  getDataLimitsFromLayers: getDataLimitsFromLayers,
-  setPreviousTimeStep: setPreviousTimeStep,
-  setNextTimeStep: setNextTimeStep,
-  moveSelectedTimePx: moveSelectedTimePx,
-  getDataSpanSeconds: getDataSpanSeconds,
   secondsPerPxValues: secondsPerPxValues,
   secondsPerPxFromCanvasWidth: secondsPerPxFromCanvasWidth,
   getNewCenterOfFixedPointZoom: getNewCenterOfFixedPointZoom,
@@ -16911,7 +16776,6 @@ var timeSliderUtils = /*#__PURE__*/Object.freeze({
   timeBoxGeom: timeBoxGeom,
   AUTO_MOVE_AREA_PADDING: AUTO_MOVE_AREA_PADDING,
   getAutoMoveAreaWidth: getAutoMoveAreaWidth,
-  handleSetNowEvent: handleSetNowEvent,
   get TimeInMinutes () { return TimeInMinutes; },
   minutesToDescribedDuration: minutesToDescribedDuration,
   getFundamentalScale: getFundamentalScale$1
@@ -17270,13 +17134,13 @@ var marks$1 = [{
   value: 12 * 3600,
   text: '12h'
 }, {
-  label: 'day',
+  label: '24 h',
   value: 24 * 3600,
-  text: 'd'
+  text: '24h'
 }, {
-  label: '2 days',
+  label: '48 h',
   value: 2 * 24 * 3600,
-  text: '2d'
+  text: '48h'
 }, {
   label: 'week',
   value: 7 * 24 * 3600,
@@ -18313,6 +18177,73 @@ var drawTimeSliderLegend = function drawTimeSliderLegend(context, theme, canvasW
   drawNeedle(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, selectedTimeUnix);
 };
 
+var onsetNewDateDebounced = function onsetNewDateDebounced(dateToSet, onSetNewDate) {
+  debounce(function () {
+    onSetNewDate(dateToSet);
+  }, 10, {
+    leading: true
+  })();
+};
+var setPreviousTimeStep = function setPreviousTimeStep(timeStep, currentTime, dataStartTime, onSetNewDate) {
+  var nextTime = currentTime - timeStep;
+  var roundedTime = mapUtils.roundWithTimeStep(nextTime, timeStep, 'floor');
+  var newTime = Math.max(roundedTime, dataStartTime || roundedTime);
+  var selectedTimeString = moment.unix(newTime).toISOString();
+  onsetNewDateDebounced(selectedTimeString, onSetNewDate);
+};
+var setNextTimeStep = function setNextTimeStep(timeStep, currentTime, dataEndTime, onSetNewDate) {
+  var nextTime = currentTime + timeStep;
+  var roundedTime = mapUtils.roundWithTimeStep(nextTime, timeStep, 'ceil');
+  var newTime = Math.min(roundedTime, dataEndTime || roundedTime);
+  var selectedTimeString = moment.unix(newTime).toISOString();
+  onsetNewDateDebounced(selectedTimeString, onSetNewDate);
+};
+/**
+ * updates unfiltered selected time and moves selected time a given distance
+ * in pixels. Unfiltered selected time can be outside data data limits, but
+ * selected time cannot.
+ */
+var moveSelectedTimePx = function moveSelectedTimePx(x, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime, onSetNewDate) {
+  var _map = [dataStartTime, dataEndTime, unfilteredSelectedTime].map(function (timestamp) {
+      return timestampToPixel(timestamp, centerTime, canvasWidth, secondsPerPx);
+    }),
+    _map2 = _slicedToArray(_map, 3),
+    leftMarkerPx = _map2[0],
+    rightMarkerPx = _map2[1],
+    unfilteredSelectedTimePx = _map2[2];
+  setUnfilteredSelectedTime(pixelToTimestamp(unfilteredSelectedTimePx + x, centerTime, canvasWidth, secondsPerPx));
+  var clickedUnfilteredSelectedTimePx = unfilteredSelectedTimePx + x;
+  var minClickedUnfilteredSelectedTimePx = Math.min(clickedUnfilteredSelectedTimePx, rightMarkerPx);
+  var newUnfilteredSelectedTimePx = Math.max(minClickedUnfilteredSelectedTimePx, leftMarkerPx);
+  setNewRoundedTime(newUnfilteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
+};
+var setNewRoundedTime = function setNewRoundedTime(x, centerTime, width, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate) {
+  var unixTime = pixelToTimestamp(x, centerTime, width, secondsPerPx);
+  var roundedTime = mapUtils.roundWithTimeStep(unixTime, timeStep);
+  var maxTime = Math.max(roundedTime, dataStartTime);
+  var newTime = Math.min(maxTime, dataEndTime || roundedTime);
+  var selectedTimeString = moment.unix(newTime).toISOString();
+  onsetNewDateDebounced(selectedTimeString, onSetNewDate);
+};
+/** Reusable business logic for how to handle events that set time to now (closest).
+ * Used in NowButton and TimeSliderLegend.
+ */
+var handleSetNowEvent = function handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime) {
+  if (dataStartTime < dataEndTime) {
+    if (dataEndTime < currentTime) {
+      onSetNewDate(moment.utc(dataEndTime * millisecondsInSecond).toISOString());
+      onSetCenterTime(dataEndTime);
+    } else if (dataStartTime > currentTime) {
+      onSetNewDate(moment.utc(dataStartTime * millisecondsInSecond).toISOString());
+      onSetCenterTime(dataStartTime);
+    } else {
+      var closestToCurrent = mapUtils.roundWithTimeStep(currentTime, timeStep);
+      onSetNewDate(moment.utc(closestToCurrent * millisecondsInSecond).toISOString());
+      onSetCenterTime(closestToCurrent);
+    }
+  }
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19227,12 +19158,12 @@ var NowButtonConnect = function NowButtonConnect(_ref) {
   var timeStep = useSelector(function (store) {
     return mapSelectors.getMapTimeStep(store, mapId);
   });
-  var _getDataLimitsFromLay = getDataLimitsFromLayers(useSelector(function (store) {
-      return mapSelectors.getMapLayers(store, mapId);
-    })),
-    _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
-    dataStartTime = _getDataLimitsFromLay2[0],
-    dataEndTime = _getDataLimitsFromLay2[1];
+  var _useSelector = useSelector(function (store) {
+      return mapSelectors.getDataLimitsFromLayers(store, mapId);
+    }),
+    _useSelector2 = _slicedToArray(_useSelector, 2),
+    dataStartTime = _useSelector2[0],
+    dataEndTime = _useSelector2[1];
   var isAnimating = useSelector(function (store) {
     return mapSelectors.isAnimating(store, mapId);
   });
@@ -19295,7 +19226,8 @@ var AnimationLengthButtonConnect = function AnimationLengthButtonConnect(_ref) {
     var animationEndTime = moment(animationStartTime).add(length, 'minutes').toISOString();
     dispatch(mapActions.setAnimationEndTime({
       mapId: mapId,
-      animationEndTime: animationEndTime
+      animationEndTime: animationEndTime,
+      origin: mapEnums.MapActionOrigin.map
     }));
   };
   return /*#__PURE__*/React.createElement(AnimationLengthButton, {
@@ -19341,9 +19273,6 @@ var TimeSpanButtonConnect = function TimeSpanButtonConnect(_ref) {
   var secondsPerPx = useSelector(function (store) {
     return mapSelectors.getMapTimeSliderSecondsPerPx(store, mapId);
   });
-  var dimensions = useSelector(function (store) {
-    return mapSelectors.getMapDimensions(store, mapId);
-  });
   var autoTimeStepLayerId = useSelector(function (store) {
     return mapSelectors.getAutoTimeStepLayerId(store, mapId);
   });
@@ -19373,8 +19302,9 @@ var TimeSpanButtonConnect = function TimeSpanButtonConnect(_ref) {
       origin: mapEnums.MapActionOrigin.map
     }));
   }, [dispatch, isTimeSpanAuto, mapId]);
-  var _getTimeBounds = getTimeBounds(dimensions),
-    selectedTime = _getTimeBounds.selectedTime;
+  var selectedTime = useSelector(function (store) {
+    return mapSelectors.getSelectedTime(store, mapId);
+  });
   return /*#__PURE__*/React.createElement(TimeSpanButton, {
     timeSliderSpan: timeSliderSpan,
     onChangeTimeSliderSpan: onSetTimeSliderSpan,
@@ -19524,17 +19454,15 @@ var BackwardForwardStepButtonConnect = function BackwardForwardStepButtonConnect
   var isAnimating = useSelector(function (store) {
     return mapSelectors.isAnimating(store, mapId);
   });
-  var timedim = useSelector(function (store) {
-    return mapSelectors.getMapDimension(store, mapId, 'time');
-  });
-  var selectedTime = getSelectedTime(timedim);
-  var layers = useSelector(function (store) {
-    return mapSelectors.getMapLayers(store, mapId);
+  var selectedTime = useSelector(function (store) {
+    return mapSelectors.getSelectedTime(store, mapId);
   });
-  var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
-    _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
-    dataStartTime = _getDataLimitsFromLay2[0],
-    dataEndTime = _getDataLimitsFromLay2[1];
+  var _useSelector = useSelector(function (store) {
+      return mapSelectors.getDataLimitsFromLayers(store, mapId);
+    }),
+    _useSelector2 = _slicedToArray(_useSelector, 2),
+    dataStartTime = _useSelector2[0],
+    dataEndTime = _useSelector2[1];
   var onClickBF = function onClickBF() {
     if (isAnimating) {
       stopAnimation();
@@ -19600,12 +19528,6 @@ var TimeSliderButtonsConnectMemo = /*#__PURE__*/React.memo(TimeSliderButtonsConn
 var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
   var sourceId = _ref.sourceId,
     mapId = _ref.mapId;
-  var layers = useSelector(function (store) {
-    return mapSelectors.getMapLayers(store, mapId);
-  });
-  var dimensions = useSelector(function (store) {
-    return mapSelectors.getMapDimensions(store, mapId);
-  });
   var centerTime = useSelector(function (store) {
     return mapSelectors.getMapTimeSliderCenterTime(store, mapId);
   });
@@ -19633,13 +19555,16 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
   var unfilteredSelectedTime = useSelector(function (store) {
     return mapSelectors.getTimeSliderUnfilteredSelectedTime(store, mapId);
   });
-  var _getTimeBounds = getTimeBounds(dimensions),
-    selectedTime = _getTimeBounds.selectedTime;
+  var selectedTime = useSelector(function (store) {
+    return mapSelectors.getSelectedTime(store, mapId);
+  });
   var currentTime = moment.utc().unix();
-  var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
-    _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
-    dataStartTime = _getDataLimitsFromLay2[0],
-    dataEndTime = _getDataLimitsFromLay2[1];
+  var _useSelector = useSelector(function (store) {
+      return mapSelectors.getDataLimitsFromLayers(store, mapId);
+    }),
+    _useSelector2 = _slicedToArray(_useSelector, 2),
+    dataStartTime = _useSelector2[0],
+    dataEndTime = _useSelector2[1];
   var dispatch = useDispatch();
   return /*#__PURE__*/React.createElement(TimeSliderLegend, {
     mapId: mapId,
@@ -19692,13 +19617,15 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
     onSetAnimationStartTime: function onSetAnimationStartTime(animationStartTime) {
       dispatch(mapActions.setAnimationStartTime({
         mapId: mapId,
-        animationStartTime: animationStartTime
+        animationStartTime: animationStartTime,
+        origin: mapEnums.MapActionOrigin.map
       }));
     },
     onSetAnimationEndTime: function onSetAnimationEndTime(animationEndTime) {
       dispatch(mapActions.setAnimationEndTime({
         mapId: mapId,
-        animationEndTime: animationEndTime
+        animationEndTime: animationEndTime,
+        origin: mapEnums.MapActionOrigin.map
       }));
     },
     updateCanvasWidth: function updateCanvasWidth(storeWidth, newWidth) {
@@ -19722,8 +19649,6 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
 
 var connectRedux = connect(function (store, props) {
   return {
-    layers: mapSelectors.getMapLayers(store, props.mapId),
-    dimensions: mapSelectors.getMapDimensions(store, props.mapId),
     centerTime: mapSelectors.getMapTimeSliderCenterTime(store, props.mapId),
     secondsPerPx: mapSelectors.getMapTimeSliderSecondsPerPx(store, props.mapId),
     span: mapSelectors.getMapTimeSliderSpan(store, props.mapId),
@@ -19741,11 +19666,9 @@ var connectRedux = connect(function (store, props) {
 var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBoxConnectComponent(_ref) {
   var mapId = _ref.mapId,
     sourceId = _ref.sourceId,
-    dimensions = _ref.dimensions,
     centerTime = _ref.centerTime,
     secondsPerPx = _ref.secondsPerPx,
     span = _ref.span,
-    layers = _ref.layers,
     timeStep = _ref.timeStep,
     isAnimating = _ref.isAnimating,
     isAutoUpdating = _ref.isAutoUpdating,
@@ -19754,12 +19677,15 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
     setTimeSliderUnfilteredSelectedTime = _ref.setTimeSliderUnfilteredSelectedTime,
     setTime = _ref.setTime,
     setCenterTime = _ref.setCenterTime;
-  var _getTimeBounds = getTimeBounds(dimensions),
-    selectedTime = _getTimeBounds.selectedTime;
-  var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
-    _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
-    dataStartTime = _getDataLimitsFromLay2[0],
-    dataEndTime = _getDataLimitsFromLay2[1];
+  var selectedTime = useSelector(function (store) {
+    return mapSelectors.getSelectedTime(store, mapId);
+  });
+  var _useSelector = useSelector(function (store) {
+      return mapSelectors.getDataLimitsFromLayers(store, mapId);
+    }),
+    _useSelector2 = _slicedToArray(_useSelector, 2),
+    dataStartTime = _useSelector2[0],
+    dataEndTime = _useSelector2[1];
   return /*#__PURE__*/React.createElement(TimeSliderCurrentTimeBox, {
     centerTime: centerTime,
     secondsPerPx: secondsPerPx,
@@ -19842,14 +19768,12 @@ var useUpdateTimeSpan = function useUpdateTimeSpan(mapId, onSetTimeSliderSpan) {
   var secondsPerPx = useSelector(function (store) {
     return mapSelectors.getMapTimeSliderSecondsPerPx(store, mapId);
   });
-  var dimensions = useSelector(function (store) {
-    return mapSelectors.getMapDimensions(store, mapId);
-  });
   var currentTimeSpan = useSelector(function (store) {
     return mapSelectors.getMapTimeSliderSpan(store, mapId);
   });
-  var _getTimeBounds = getTimeBounds(dimensions),
-    selectedTime = _getTimeBounds.selectedTime;
+  var selectedTime = useSelector(function (store) {
+    return mapSelectors.getSelectedTime(store, mapId);
+  });
   var updateTimeSliderSpan = function updateTimeSliderSpan(spanInSeconds, newCenterTime, newSecondsPerPx) {
     if (spanInSeconds !== undefined && newCenterTime !== undefined && newSecondsPerPx !== undefined) {
       onSetTimeSliderSpan(spanInSeconds, newCenterTime, newSecondsPerPx);
@@ -19857,9 +19781,9 @@ var useUpdateTimeSpan = function useUpdateTimeSpan(mapId, onSetTimeSliderSpan) {
   };
   React.useEffect(function () {
     if (isTimeSpanAuto && autoTimeStepLayerId) {
-      var _getTimeBounds2 = getTimeBounds([activeLayerTimeDimension]),
-        startTime = _getTimeBounds2.startTime,
-        endTime = _getTimeBounds2.endTime;
+      var _getTimeBounds = getTimeBounds([activeLayerTimeDimension]),
+        startTime = _getTimeBounds.startTime,
+        endTime = _getTimeBounds.endTime;
       var spanInSeconds = endTime - startTime;
       var newSecondsPerPx = secondsPerPxFromCanvasWidth(timeSliderWidth, spanInSeconds);
       var newCenterTime = (startTime + endTime) / 2;
@@ -19930,21 +19854,18 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
   var timeStep = useSelector(function (store) {
     return mapSelectors.getMapTimeStep(store, mapId);
   });
-  var layers = useSelector(function (store) {
-    return mapSelectors.getMapLayers(store, mapId);
-  });
-  var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
-    _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
-    dataStartTime = _getDataLimitsFromLay2[0],
-    dataEndTime = _getDataLimitsFromLay2[1];
+  var _useSelector = useSelector(function (store) {
+      return mapSelectors.getDataLimitsFromLayers(store, mapId);
+    }),
+    _useSelector2 = _slicedToArray(_useSelector, 2),
+    dataStartTime = _useSelector2[0],
+    dataEndTime = _useSelector2[1];
   var isAnimating = useSelector(function (store) {
     return mapSelectors.isAnimating(store, mapId);
   });
-  var dimensions = useSelector(function (store) {
-    return mapSelectors.getMapDimensions(store, mapId);
+  var selectedTime = useSelector(function (store) {
+    return mapSelectors.getSelectedTime(store, mapId);
   });
-  var _getTimeBounds3 = getTimeBounds(dimensions),
-    selectedTime = _getTimeBounds3.selectedTime;
   useUpdateTimestep(mapId);
   useUpdateTimeSpan(mapId, onSetTimeSliderSpan);
   return /*#__PURE__*/React.createElement(TimeSlider, {
@@ -20268,6 +20189,9 @@ var MapViewConnect = function MapViewConnect(_a) {
   var displayMapPin = useSelector(function (store) {
     return mapSelectors.getDisplayMapPin(store, mapId);
   });
+  var timestep = useSelector(function (store) {
+    return mapSelectors.getMapTimeStep(store, mapId);
+  });
   var dispatch = useDispatch();
   var mapChangeDimension = React.useCallback(function (mapDimensionPayload) {
     if (mapDimensionPayload.dimension) {
@@ -20355,6 +20279,7 @@ var MapViewConnect = function MapViewConnect(_a) {
     dimensions: mapDimensions,
     activeLayerId: activeLayerId,
     animationDelay: animationDelay,
+    timestep: timestep,
     displayMapPin: displayMapPin,
     disableMapPin: disableMapPin,
     onMapChangeDimension: function onMapChangeDimension(mapDimensionPayload) {
@@ -20412,10 +20337,12 @@ var MapViewConnect = function MapViewConnect(_a) {
         });
       },
       onClickFeature: layer.geojson ? function (event) {
-        setSelectedFeature({
-          layerId: layer.id,
-          selectedFeatureIndex: event === null || event === void 0 ? void 0 : event.featureIndex
-        });
+        if (Boolean(event === null || event === void 0 ? void 0 : event.isInEditMode) === false) {
+          setSelectedFeature({
+            layerId: layer.id,
+            selectedFeatureIndex: event === null || event === void 0 ? void 0 : event.featureIndex
+          });
+        }
       } : undefined,
       updateGeojson: function updateGeojson(geojson) {
         return updateFeature({
@@ -21858,11 +21785,9 @@ var resizeHandlePlacement = {
  * */
 var TimeSliderClockConnect = function TimeSliderClockConnect(_ref) {
   var mapId = _ref.mapId;
-  var dimensions = useSelector(function (store) {
-    return mapSelectors.getMapDimensions(store, mapId);
+  var selectedTime = useSelector(function (store) {
+    return mapSelectors.getSelectedTime(store, mapId);
   });
-  var _getMomentTimeBounds = getMomentTimeBounds(dimensions),
-    selectedTime = _getMomentTimeBounds.selectedTime;
   var isTimeSliderVisible = useSelector(function (store) {
     return mapSelectors.isTimeSliderVisible(store, mapId);
   });
@@ -21875,7 +21800,7 @@ var TimeSliderClockConnect = function TimeSliderClockConnect(_ref) {
       mapId: mapId,
       sourceId: mapId
     }),
-    time: selectedTime
+    time: moment.unix(selectedTime)
   });
 };
 
@@ -23882,931 +23807,14 @@ var GetFeatureInfoButtonConnect = function GetFeatureInfoButtonConnect(_ref) {
   }, /*#__PURE__*/React.createElement(Info, null));
 };
 
-var defaultIntersectionStyleProperties = Object.assign(Object.assign({}, defaultStyleProperties), {
-  'fill-opacity': 0.5
-});
-var emptyLineString = Object.assign(Object.assign({}, lineString.features[0]), {
-  properties: Object.assign(Object.assign({}, defaultStyleProperties), {
-    selectionType: 'linestring'
-  })
-});
-var emptyPoint = Object.assign(Object.assign({}, featurePoint), {
-  properties: Object.assign(Object.assign({}, defaultStyleProperties), {
-    selectionType: 'point'
-  })
-});
-var emptyPolygon = Object.assign(Object.assign({}, featurePolygon), {
-  properties: Object.assign(Object.assign({}, defaultStyleProperties), {
-    selectionType: 'poly'
-  })
-});
-var emptyBox = Object.assign(Object.assign({}, featurePolygon), {
-  properties: Object.assign(Object.assign({}, defaultStyleProperties), {
-    selectionType: 'box'
-  })
-});
-// TODO: improve this: without a feature, the custom shape does not work on first click
-var emptyIntersectionShape = Object.assign(Object.assign({}, emptyGeoJSON), {
-  features: [featurePolygon]
-});
-var defaultPoint = {
-  id: 'drawtools-point',
-  value: DRAWMODE.POINT,
-  title: 'Point',
-  icon: /*#__PURE__*/React__default.createElement(Location, null),
-  shape: emptyPoint,
-  isSelectable: true
-};
-var defaultPolygon = {
-  id: 'drawtools-polygon',
-  value: DRAWMODE.POLYGON,
-  title: 'Polygon',
-  icon: /*#__PURE__*/React__default.createElement(DrawPolygon, null),
-  shape: emptyPolygon,
-  isSelectable: true
-};
-var defaultBox = {
-  id: 'drawtools-box',
-  value: DRAWMODE.BOX,
-  title: 'Box',
-  icon: /*#__PURE__*/React__default.createElement(DrawRegion, null),
-  shape: emptyBox,
-  isSelectable: true
-};
-var defaultLineString = {
-  id: 'drawtools-linestring',
-  value: DRAWMODE.LINESTRING,
-  title: 'LineString',
-  icon: /*#__PURE__*/React__default.createElement(Edit, null),
-  shape: emptyLineString,
-  isSelectable: true
-};
-var defaultDelete = {
-  id: 'drawtools-delete',
-  value: 'DELETE',
-  title: 'Delete',
-  icon: /*#__PURE__*/React__default.createElement(Delete, null),
-  shape: emptyGeoJSON,
-  isSelectable: false
-};
-var defaultModes = [defaultPoint, defaultPolygon, defaultBox, defaultLineString, defaultDelete];
-var useMapDrawTool = function useMapDrawTool(_ref) {
-  var _ref$defaultEditModes = _ref.defaultEditModes,
-    defaultEditModes = _ref$defaultEditModes === void 0 ? defaultModes : _ref$defaultEditModes,
-    _ref$shouldAllowMulti = _ref.shouldAllowMultipleshapes,
-    shouldAllowMultipleshapes = _ref$shouldAllowMulti === void 0 ? false : _ref$shouldAllowMulti,
-    _ref$defaultGeoJSON = _ref.defaultGeoJSON,
-    defaultGeoJSON = _ref$defaultGeoJSON === void 0 ? emptyGeoJSON : _ref$defaultGeoJSON,
-    _ref$defaultGeoJSONIn = _ref.defaultGeoJSONIntersection,
-    defaultGeoJSONIntersection = _ref$defaultGeoJSONIn === void 0 ? emptyIntersectionShape : _ref$defaultGeoJSONIn,
-    defaultGeoJSONIntersectionBounds = _ref.defaultGeoJSONIntersectionBounds,
-    _ref$defaultGeoJSONIn2 = _ref.defaultGeoJSONIntersectionProperties,
-    defaultGeoJSONIntersectionProperties = _ref$defaultGeoJSONIn2 === void 0 ? defaultIntersectionStyleProperties : _ref$defaultGeoJSONIn2;
-  // geoJSON feature collections
-  var _React$useState = React__default.useState(defaultGeoJSON),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    geoJSON = _React$useState2[0],
-    setGeoJSON = _React$useState2[1];
-  var _React$useState3 = React__default.useState(defaultGeoJSONIntersection),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    geoJSONIntersection = _React$useState4[0],
-    setGeoJSONIntersection = _React$useState4[1];
-  var _React$useState5 = React__default.useState(defaultGeoJSONIntersectionBounds),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    geoJSONIntersectionBounds = _React$useState6[0],
-    setGeoJSONIntersectionBounds = _React$useState6[1];
-  // state
-  var _React$useState7 = React__default.useState(defaultEditModes),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    editModes = _React$useState8[0],
-    setEditModes = _React$useState8[1];
-  var _React$useState9 = React__default.useState(''),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    activeTool = _React$useState10[0],
-    setActiveTool = _React$useState10[1];
-  var _React$useState11 = React__default.useState(''),
-    _React$useState12 = _slicedToArray(_React$useState11, 2),
-    drawMode = _React$useState12[0],
-    setDrawMode = _React$useState12[1];
-  var _React$useState13 = React__default.useState(false),
-    _React$useState14 = _slicedToArray(_React$useState13, 2),
-    isInEditMode = _React$useState14[0],
-    setEditMode = _React$useState14[1];
-  var _React$useState15 = React__default.useState(0),
-    _React$useState16 = _slicedToArray(_React$useState15, 2),
-    featureLayerIndex = _React$useState16[0],
-    setFeatureLayerIndex = _React$useState16[1];
-  var changeProperties = function changeProperties(styleProperties) {
-    // update all modes with new properties
-    var newModes = editModes.map(function (mode) {
-      var shape = mode.shape.type === 'Feature' ? Object.assign(Object.assign({}, mode.shape), {
-        properties: Object.assign(Object.assign({}, mode.shape.properties), styleProperties)
-      }) : addFeatureProperties(mode.shape, styleProperties);
-      return Object.assign(Object.assign({}, mode), {
-        shape: shape
-      });
-    });
-    setEditModes(newModes);
-    // update current geoJSON with new properties
-    var updateGeoJSON = addFeatureProperties(geoJSON, styleProperties, featureLayerIndex);
-    setGeoJSON(updateGeoJSON);
-  };
-  var getProperties = function getProperties() {
-    if (!geoJSON || !geoJSON.features.length) {
-      return {};
-    }
-    return geoJSON.features[featureLayerIndex].properties;
-  };
-  var changeActiveTool = function changeActiveTool(newMode) {
-    var shouldDeleteShape = newMode.value === 'DELETE';
-    // reset if same tool is selected
-    if (newMode.id === activeTool || shouldDeleteShape) {
-      reset(shouldDeleteShape);
-      return;
-    }
-    setActiveTool(newMode.id);
-    // updates shape
-    var isNewSelectedTool = !isGeoJSONFeatureCreatedByTool(geoJSON, newMode.shape);
-    var shouldUpdateShape = !geoJSON.features.length || shouldAllowMultipleshapes || isNewSelectedTool;
-    if (shouldUpdateShape) {
-      var updatedGeoJSON = changeGeoJSON(newMode.shape);
-      setFeatureLayerIndex(updatedGeoJSON.features.length - 1);
-    }
-    // handle modes and update feature layer index
-    setDrawMode(newMode.value);
-    setEditMode(!!newMode.value);
-  };
-  var changeGeoJSON = function changeGeoJSON(updatedGeoJSON) {
-    var geoJSONFeatureCollection = getFeatureCollection(updatedGeoJSON, shouldAllowMultipleshapes, geoJSON);
-    var newGeoJSON = getGeoJson(geoJSONFeatureCollection, shouldAllowMultipleshapes);
-    setGeoJSON(newGeoJSON);
-    if (geoJSONIntersectionBounds) {
-      setGeoJSONIntersection(createInterSections(newGeoJSON, geoJSONIntersectionBounds, defaultGeoJSONIntersectionProperties));
-    }
-    return newGeoJSON;
-  };
-  var onSetGeoJSONIntersectionBounds = function onSetGeoJSONIntersectionBounds(newGeoJSON) {
-    setGeoJSONIntersectionBounds(newGeoJSON);
-    // reset all other geoJSONs
-    setGeoJSONIntersection(emptyIntersectionShape);
-    setGeoJSON(emptyGeoJSON);
-  };
-  var onSetDrawMode = function onSetDrawMode(drawMode) {
-    setDrawMode(drawMode);
-    var newActiveTool = editModes.find(function (mode) {
-      return mode.value === drawMode;
-    });
-    if (newActiveTool) {
-      setActiveTool(newActiveTool.id);
-    }
-  };
-  var deactivateTool = function deactivateTool() {
-    setEditMode(false);
-    setActiveTool('');
-    setDrawMode('');
-  };
-  var reset = function reset() {
-    var shouldClearState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    deactivateTool();
-    if (shouldClearState) {
-      setGeoJSONIntersection(emptyIntersectionShape);
-      setGeoJSON(emptyGeoJSON);
-      setFeatureLayerIndex(0);
-    }
-  };
-  var getLayer = function getLayer(layerType, layerId) {
-    // geoJSON
-    if (layerType === 'geoJSON') {
-      return {
-        id: layerId,
-        geojson: geoJSON,
-        isInEditMode: isInEditMode,
-        drawMode: drawMode,
-        updateGeojson: changeGeoJSON,
-        featureNrToEdit: featureLayerIndex
-      };
-    }
-    // intersections
-    return {
-      id: layerId,
-      geojson: layerType === 'geoJSONIntersection' ? geoJSONIntersection : geoJSONIntersectionBounds,
-      isInEditMode: false
-    };
-  };
-  var layers = [].concat(_toConsumableArray(geoJSONIntersectionBounds ? [getLayer('geoJSONIntersectionBounds', 'static-layer'), getLayer('geoJSONIntersection', 'intersection-layer')] : []), [getLayer('geoJSON', 'draw-layer')]);
+var titleStyle = function titleStyle(theme) {
   return {
-    geoJSON: geoJSON,
-    geoJSONIntersection: geoJSONIntersection,
-    geoJSONIntersectionBounds: geoJSONIntersectionBounds,
-    setGeoJSON: changeGeoJSON,
-    setGeoJSONIntersectionBounds: onSetGeoJSONIntersectionBounds,
-    editModes: editModes,
-    isInEditMode: isInEditMode,
-    changeDrawMode: onSetDrawMode,
-    setEditMode: setEditMode,
-    featureLayerIndex: featureLayerIndex,
-    setFeatureLayerIndex: setFeatureLayerIndex,
-    activeTool: activeTool,
-    changeActiveTool: changeActiveTool,
-    setActiveTool: setActiveTool,
-    layers: layers,
-    getLayer: getLayer,
-    deactivateTool: deactivateTool,
-    setEditModes: setEditModes,
-    changeProperties: changeProperties,
-    getProperties: getProperties
-  };
-};
-
-/* *
- * 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 MapDrawToolContext = /*#__PURE__*/React.createContext({});
-// currently used options
-var drawOptions = {
-  defaultEditModes: [defaultPolygon, defaultDelete]
-};
-var MapDrawToolProvider = function MapDrawToolProvider(_ref) {
-  var children = _ref.children,
-    _ref$options = _ref.options,
-    options = _ref$options === void 0 ? {} : _ref$options;
-  var value = useMapDrawTool(options);
-  return /*#__PURE__*/React.createElement(MapDrawToolContext.Provider, {
-    value: value
-  }, children);
-};
-function useMapDrawContext() {
-  return React.useContext(MapDrawToolContext);
-}
-
-/* *
- * 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 areaDialogType$1 = uiTypes.DialogTypes.AreaManager;
-var useAreaDrawDialogAction = function useAreaDrawDialogAction(_ref) {
-  var mapId = _ref.mapId,
-    source = _ref.source;
-  var dispatch = useDispatch();
-  var drawingDialogType = "".concat(uiTypes.DialogTypes.DockedDrawingTool, "-").concat(mapId);
-  var geoJSONLayerId = "".concat(mapId, "-geosjon");
-  var currentLayer = useSelector(function (store) {
-    return layerSelectors.getLayerById(store, geoJSONLayerId);
-  });
-  var openAreaDialog = React__default.useCallback(function () {
-    dispatch(uiActions.setActiveMapIdForDialog({
-      type: areaDialogType$1,
-      mapId: mapId,
-      setOpen: true,
-      source: source
-    }));
-  }, [dispatch, mapId, source]);
-  var openDrawDialog = React__default.useCallback(function () {
-    dispatch(uiActions.setActiveMapIdForDialog({
-      type: drawingDialogType,
-      mapId: mapId,
-      setOpen: true,
-      source: source
-    }));
-  }, [dispatch, mapId, source, drawingDialogType]);
-  var closeDrawDialog = React__default.useCallback(function () {
-    dispatch(drawActions.setDrawValues({
-      mapId: mapId,
-      area: undefined,
-      areaName: '',
-      id: ''
-    }));
-    dispatch(uiActions.setActiveMapIdForDialog({
-      type: drawingDialogType,
-      mapId: mapId,
-      setOpen: false,
-      source: source
-    }));
-  }, [dispatch, mapId, drawingDialogType, source]);
-  var closeAreaDialog = React__default.useCallback(function () {
-    if (currentLayer) {
-      dispatch(mapStoreActions.layerDelete({
-        layerId: geoJSONLayerId,
-        mapId: mapId,
-        layerIndex: 0
-      }));
-    }
-    dispatch(uiActions.setActiveMapIdForDialog({
-      type: areaDialogType$1,
-      mapId: mapId,
-      setOpen: false,
-      source: source
-    }));
-    dispatch(drawActions.setDrawValues({
-      mapId: mapId,
-      area: undefined,
-      areaName: '',
-      id: ''
-    }));
-  }, [dispatch, mapId, source, currentLayer, geoJSONLayerId]);
-  return {
-    closeDrawDialog: closeDrawDialog,
-    closeAreaDialog: closeAreaDialog,
-    openAreaDialog: openAreaDialog,
-    openDrawDialog: openDrawDialog
-  };
-};
-
-/* *
- * 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 areaDialogType = uiTypes.DialogTypes.AreaManager;
-var DrawingToolMapButtonConnect = function DrawingToolMapButtonConnect(_ref) {
-  var mapId = _ref.mapId,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source;
-  var _useMapDrawContext = useMapDrawContext(),
-    deactivateTool = _useMapDrawContext.deactivateTool;
-  // TODO: Re-enable when we put back in the floating version when drawing tools become available: https://gitlab.com/opengeoweb/opengeoweb/-/issues/3872
-  var drawingDialogType = "".concat(uiTypes.DialogTypes.DockedDrawingTool, "-").concat(mapId);
-  // const drawingDialogType = isMultiMap
-  //   ? `${uiTypes.DialogTypes.DrawingTool}-${mapId}`
-  //   : uiTypes.DialogTypes.DrawingTool;
-  var _useAreaDrawDialogAct = useAreaDrawDialogAction({
-      mapId: mapId,
-      source: source
-    }),
-    closeAreaDialog = _useAreaDrawDialogAct.closeAreaDialog,
-    openDrawDialog = _useAreaDrawDialogAct.openDrawDialog,
-    closeDrawDialog = _useAreaDrawDialogAct.closeDrawDialog;
-  var currentActiveMapId = useSelector(function (store) {
-    return uiSelectors.getDialogMapId(store, drawingDialogType);
-  });
-  var isDrawDialogOpen = useSelector(function (store) {
-    return uiSelectors.getisDialogOpen(store, drawingDialogType);
-  });
-  var isAreaDialogOpen = useSelector(function (store) {
-    return uiSelectors.getisDialogOpen(store, areaDialogType);
-  });
-  var openDrawingDialog = React.useCallback(function () {
-    if (isAreaDialogOpen) {
-      closeAreaDialog();
-    }
-    openDrawDialog();
-  }, [isAreaDialogOpen, closeAreaDialog, openDrawDialog]);
-  var closeDrawingDialog = React.useCallback(function () {
-    deactivateTool();
-    closeDrawDialog();
-  }, [deactivateTool, closeDrawDialog]);
-  var onClick = React.useCallback(function () {
-    var shouldOpen = currentActiveMapId !== mapId ? true : !isDrawDialogOpen;
-    shouldOpen ? openDrawingDialog() : closeDrawingDialog();
-  }, [currentActiveMapId, isDrawDialogOpen, mapId, closeDrawingDialog, openDrawingDialog]);
-  var isOpen = currentActiveMapId === mapId && isDrawDialogOpen;
-  return /*#__PURE__*/React.createElement(MapControlButton, {
-    title: "Drawing Toolbox",
-    "data-testid": "drawingToolButton",
-    onClick: onClick,
-    isActive: isOpen
-  }, /*#__PURE__*/React.createElement(DrawPolygon, null));
-};
-
-var calculateStartSize = function calculateStartSize(minSize, prefSize, startPosition) {
-  var _calculateDialogSizeA = calculateDialogSizeAndPosition(),
-    calcWidth = _calculateDialogSizeA.width,
-    calcHeight = _calculateDialogSizeA.height;
-  return {
-    width: Math.max(minSize.width, Math.min(prefSize.width, calcWidth)),
-    height: Math.max(minSize.height, Math.min(prefSize.height, calcHeight - startPosition.top))
-  };
-};
-var DERFAULT_DRAW_TOOL_SIZE = {
-  width: 320,
-  height: 542
-};
-var DEFAULT_DRAW_TOOL_POSITION = {
-  top: 120,
-  left: 50
-};
-var DEFAULT_DRAW_TOOL_MIN_SIZE = {
-  width: 160,
-  height: 300
-};
-var DrawingTool = function DrawingTool(_ref) {
-  var bounds = _ref.bounds,
-    onClose = _ref.onClose,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'Drawing Toolbox' : _ref$title,
-    isOpen = _ref.isOpen,
-    _ref$onMouseDown = _ref.onMouseDown,
-    onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
-    _ref$order = _ref.order,
-    order = _ref$order === void 0 ? 0 : _ref$order,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    error = _ref.error,
-    _ref$isDocked = _ref.isDocked,
-    isDocked = _ref$isDocked === void 0 ? false : _ref$isDocked,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? DERFAULT_DRAW_TOOL_SIZE : _ref$size,
-    _ref$startPosition = _ref.startPosition,
-    startPosition = _ref$startPosition === void 0 ? DEFAULT_DRAW_TOOL_POSITION : _ref$startPosition,
-    _ref$setFocused = _ref.setFocused,
-    setFocused = _ref$setFocused === void 0 ? function () {} : _ref$setFocused,
-    _ref$headerSize = _ref.headerSize,
-    headerSize = _ref$headerSize === void 0 ? 'xs' : _ref$headerSize,
-    children = _ref.children;
-  var minSize = DEFAULT_DRAW_TOOL_MIN_SIZE;
-  var startSizeCalc = calculateStartSize(minSize, size, startPosition);
-  var _React$useState = React.useState(startSizeCalc),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    sizeInState = _React$useState2[0],
-    setSizeInState = _React$useState2[1];
-  React.useEffect(function () {
-    if (size !== sizeInState && isDocked && isOpen) {
-      setSizeInState(size);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [size, isOpen]);
-  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
-    title: title,
-    startSize: sizeInState,
-    minWidth: minSize.width,
-    minHeight: minSize.height,
-    startPosition: startPosition,
-    isOpen: isOpen,
-    onClose: onClose,
-    headerSize: headerSize,
-    bounds: bounds,
-    "data-testid": "drawingToolWindow",
-    onMouseDown: onMouseDown,
-    onFocus: function onFocus() {
-      return setFocused(true);
-    },
-    onBlur: function onBlur() {
-      return setFocused(false);
-    },
-    order: order,
-    source: source,
-    // TODO: Re-enable when we put back in the floating version when drawing tools become available: https://gitlab.com/opengeoweb/opengeoweb/-/issues/3872
-    // rightHeaderComponent={
-    //   <CustomIconButton
-    //     tooltipTitle={isDocked ? 'Undock' : 'Dock'}
-    //     data-testid="dockedBtn"
-    //     disableRipple
-    //     onClick={(): void => onToggleDock()}
-    //   >
-    //     {isDocked ? (
-    //       <CollapseWindow data-testid="dockedDrawingTool-collapse" />
-    //     ) : (
-    //       <ExpandWindow data-testid="dockedDrawingTool-uncollapse" />
-    //     )}
-    //   </CustomIconButton>
-    // }
-    onResizeStop: function onResizeStop(_event, _direction, node) {
-      var width = node.offsetWidth,
-        height = node.offsetHeight;
-      setSizeInState({
-        width: width,
-        height: height
-      });
-    },
-    onDragEnd: function onDragEnd(_position, dragSize) {
-      if (dragSize !== sizeInState) {
-        setSizeInState(dragSize);
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Box$2, {
-    onKeyDown: function onKeyDown(event) {
-      event.stopPropagation();
-    },
-    sx: {
-      height: '100%'
-    }
-  }, isLoading && /*#__PURE__*/React.createElement(LinearProgress, {
-    "data-testid": "loading-bar-drawingTool",
-    color: "secondary",
-    sx: {
-      position: 'absolute',
-      width: '100%'
-    }
-  }), error && /*#__PURE__*/React.createElement(Box$2, {
-    sx: {
-      padding: '0 6px'
-    }
-  }, /*#__PURE__*/React.createElement(AlertBanner, {
-    title: error,
-    shouldClose: true
-  })), children));
-};
-
-var opacityOptions = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
-var getAreaName = function getAreaName(areaName) {
-  return areaName || "".concat(dateUtils.dateToString(new Date(), 'dd/MM/yyyy HH:mm', true), " UTC");
-};
-var SAVE_AREA_BUTTON = 'Save new area';
-var UPDATE_AREA_BUTTON = 'Update area';
-var INPUT_AREA = 'Area name';
-var INPUT_OPACITY = 'Opacity';
-var DRAW_EXIT_MODE_MESSAGE = 'press ESC to exit draw mode';
-var DrawingToolForm = function DrawingToolForm(_ref) {
-  var onSubmitForm = _ref.onSubmitForm,
-    defaultGeoJSON = _ref.area,
-    isLoading = _ref.isLoading,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? '' : _ref$id;
-  var _useFormContext = useFormContext(),
-    handleSubmit = _useFormContext.handleSubmit,
-    errors = _useFormContext.formState.errors;
-  var _useMapDrawContext = useMapDrawContext(),
-    editModes = _useMapDrawContext.editModes,
-    changeActiveTool = _useMapDrawContext.changeActiveTool,
-    activeTool = _useMapDrawContext.activeTool,
-    deactivateTool = _useMapDrawContext.deactivateTool,
-    geoJSON = _useMapDrawContext.geoJSON,
-    getProperties = _useMapDrawContext.getProperties,
-    changeProperties = _useMapDrawContext.changeProperties,
-    isInEditMode = _useMapDrawContext.isInEditMode,
-    setGeoJSON = _useMapDrawContext.setGeoJSON;
-  var onSubmit = function onSubmit() {
-    deactivateTool();
-    handleSubmit(function (formValues) {
-      // remove unneeded properties
-      formValues.opacity;
-        var allFormValues = __rest(formValues, ["opacity"]);
-      onSubmitForm(Object.assign(Object.assign({}, allFormValues), {
-        area: geoJSON,
-        id: id
-      }));
-    })();
-  };
-  var hasErrors = Object.keys(errors).length > 0;
-  var getInitialGeoJSONPropertyValue = function getInitialGeoJSONPropertyValue(property) {
-    if (getProperties()[property]) {
-      return getProperties()[property];
-    }
-    return defaultStyleProperties[property];
-  };
-  var _React$useState = React.useState(getInitialGeoJSONPropertyValue('fill-opacity') * 100),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    opacity = _React$useState2[0],
-    setOpacity = _React$useState2[1];
-  var onChangeOpacity = function onChangeOpacity(event) {
-    var value = event.target.value;
-    var parseValue = parseInt(value, 10);
-    setOpacity(parseValue);
-    var newOpacity = parseValue / 100;
-    var additionalStrokeOpacity = 0.8;
-    changeProperties({
-      'fill-opacity': newOpacity,
-      'stroke-opacity': clamp$1(newOpacity + additionalStrokeOpacity, 0.01, 1)
-    });
-  };
-  var onKeyDown = function onKeyDown(event) {
-    if (event.key === 'Escape') {
-      deactivateTool();
-    }
-  };
-  var onMount = function onMount() {
-    // sets the initial values
-    if (defaultGeoJSON) {
-      // TODO: defaults open to poly. When creating new tools, this should be based on the selectionType properties of the given geoJSON
-      changeActiveTool(editModes[0]);
-      setGeoJSON(defaultGeoJSON);
-    }
-  };
-  var onUnMount = function onUnMount() {
-    // clear shape
-    changeActiveTool(editModes.find(function (mode) {
-      return mode.value === 'DELETE';
-    }));
-  };
-  React.useEffect(function () {
-    onMount();
-    return function () {
-      onUnMount();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/React.createElement(Box$2, {
-    "data-testid": "drawingToolForm",
-    sx: {
-      padding: '16px',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    direction: "column",
-    justifyContent: "space-between",
-    sx: {
-      height: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    container: true,
-    direction: "column",
-    spacing: 1
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "body2"
-  }, "Tools")), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    container: true
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, editModes.map(function (mode) {
-    return /*#__PURE__*/React.createElement(CustomIconButton, {
-      key: mode.id,
-      variant: "tool",
-      tooltipTitle: mode.title,
-      isSelected: mode.isSelectable && activeTool === mode.id,
-      onClick: function onClick() {
-        return changeActiveTool(mode);
-      },
-      sx: {
-        marginRight: 1,
-        marginBottom: 1
-      },
-      "data-testid": mode.id,
-      onKeyDown: onKeyDown,
-      disabled: isLoading
-    }, mode.icon);
-  }), isInEditMode && /*#__PURE__*/React.createElement(Typography, {
-    component: "span",
-    sx: {
-      display: 'inline-block',
-      marginLeft: 2,
-      top: -1,
-      position: 'relative',
-      fontSize: 14
-    }
-  }, DRAW_EXIT_MODE_MESSAGE))), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    container: true
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 12,
-    sm: 6
-  }, /*#__PURE__*/React.createElement(ReactHookFormSelect, {
-    name: "opacity",
-    label: INPUT_OPACITY,
-    rules: {},
-    disabled: isLoading,
-    isReadOnly: false,
-    "data-testid": "drawingToolForm-opacity",
-    onChange: onChangeOpacity,
-    autoFocus: true,
-    value: opacity
-  }, opacityOptions.map(function (opacity) {
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      value: opacity,
-      key: opacity
-    }, opacity, " %");
-  })))), /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(ReactHookFormTextField, {
-    name: "areaName",
-    label: INPUT_AREA,
-    rules: {
-      required: true
-    },
-    disabled: isLoading,
-    isReadOnly: false
-  }), /*#__PURE__*/React.createElement(ReactHookFormHiddenInput, {
-    name: "id"
-  }))), /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    variant: "primary",
-    onClick: onSubmit,
-    sx: {
-      width: '100%',
-      textTransform: 'none'
-    },
-    "data-testid": "saveDrawingFormButton",
-    // TODO: re-enable for: https://gitlab.com/opengeoweb/opengeoweb/-/issues/4080
-    // disabled={isLoading || hasErrors}
-    disabled: isLoading || id !== '' || hasErrors
-  }, id !== '' ? UPDATE_AREA_BUTTON : SAVE_AREA_BUTTON))));
-};
-var Wrapper = function Wrapper(props) {
-  var _props$id = props.id,
-    id = _props$id === void 0 ? '' : _props$id,
-    _props$areaName = props.areaName,
-    areaName = _props$areaName === void 0 ? '' : _props$areaName,
-    area = props.area;
-  return /*#__PURE__*/React.createElement(ReactHookFormProvider, {
-    options: Object.assign(Object.assign({}, defaultFormOptions), {
-      defaultValues: {
-        id: id,
-        area: area,
-        areaName: getAreaName(areaName)
-      }
-    })
-  }, /*#__PURE__*/React.createElement(DrawingToolForm, Object.assign({}, props)));
-};
-
-/* *
- * 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 DrawingToolFormConnect = function DrawingToolFormConnect(_ref) {
-  var mapId = _ref.mapId;
-  var dispatch = useDispatch();
-  var drawing = useSelector(function (store) {
-    return drawSelectors.selectDrawByMapId(store, mapId);
-  });
-  var isDialogLoading = useSelector(function (store) {
-    return uiSelectors.getDialogIsLoading(store, "".concat(uiTypes.DialogTypes.DockedDrawingTool, "-").concat(mapId));
-  });
-  var onSubmitForm = function onSubmitForm(formValues) {
-    dispatch(drawActions.submitDrawValues({
-      mapId: mapId,
-      area: formValues.area,
-      name: formValues.areaName,
-      scope: 'user'
-    }));
-  };
-  return /*#__PURE__*/React.createElement(Wrapper, {
-    id: drawing === null || drawing === void 0 ? void 0 : drawing.id,
-    onSubmitForm: onSubmitForm,
-    areaName: drawing === null || drawing === void 0 ? void 0 : drawing.areaName,
-    area: drawing === null || drawing === void 0 ? void 0 : drawing.area,
-    isLoading: isDialogLoading
-  });
-};
-
-/* *
- * 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 getDialogType = function getDialogType(mapId, isMultiMap, isDocked) {
-  if (isDocked) {
-    return "".concat(uiTypes.DialogTypes.DockedDrawingTool, "-").concat(mapId);
-  }
-  if (isMultiMap) {
-    return "".concat(uiTypes.DialogTypes.DrawingTool, "-").concat(mapId);
-  }
-  return uiTypes.DialogTypes.DrawingTool;
-};
-var DrawingToolConnect = function DrawingToolConnect(_ref) {
-  var bounds = _ref.bounds,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'Drawing Toolbox' : _ref$title,
-    _ref$showMapIdInTitle = _ref.showMapIdInTitle,
-    showMapIdInTitle = _ref$showMapIdInTitle === void 0 ? false : _ref$showMapIdInTitle,
-    _ref$mapId = _ref.mapId,
-    initialMapId = _ref$mapId === void 0 ? null : _ref$mapId,
-    _ref$isMultiMap = _ref.isMultiMap,
-    isMultiMap = _ref$isMultiMap === void 0 ? false : _ref$isMultiMap,
-    _ref$isDocked = _ref.isDocked,
-    isDocked = _ref$isDocked === void 0 ? false : _ref$isDocked,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source;
-  var dialogType = getDialogType(initialMapId, isMultiMap, isDocked);
-  var _useMapDrawContext = useMapDrawContext(),
-    deactivateTool = _useMapDrawContext.deactivateTool;
-  var activeMapId = useSelector(function (store) {
-    return uiSelectors.getDialogMapId(store, dialogType);
-  });
-  // In case of a docked drawing toolbox or multimap, use the map id that is passed
-  // For floating drawingtoolbox, use the currently active, selected mapid
-  var mapId = initialMapId || activeMapId;
-  var _useAreaDrawDialogAct = useAreaDrawDialogAction({
-      mapId: mapId,
-      source: source
-    }),
-    closeDrawDialog = _useAreaDrawDialogAct.closeDrawDialog;
-  var _useSetupDialog = useSetupDialog(dialogType, source),
-    dialogOrder = _useSetupDialog.dialogOrder,
-    setDialogOrder = _useSetupDialog.setDialogOrder,
-    isDialogOpen = _useSetupDialog.isDialogOpen,
-    uiSource = _useSetupDialog.uiSource,
-    uiIsLoading = _useSetupDialog.uiIsLoading,
-    uiError = _useSetupDialog.uiError,
-    setFocused = _useSetupDialog.setFocused;
-  // TODO: Re-enable when we put back in the floating version when drawing tools become available: https://gitlab.com/opengeoweb/opengeoweb/-/issues/3872
-  // const onToggleDock = (): void => {
-  //   onCloseDialog();
-  //   if (isDocked) {
-  //     // Close docked drawingtool and open the floating drawingtool
-  //     dispatch(
-  //       uiActions.setActiveMapIdForDialog({
-  //         type: uiTypes.DialogTypes.DrawingTool,
-  //         mapId,
-  //         setOpen: true,
-  //         source,
-  //       }),
-  //     );
-  //   } else {
-  //     // Close the floating drawingtool and open docked drawingtool
-  //     dispatch(
-  //       uiActions.setToggleOpenDialog({
-  //         type: `${uiTypes.DialogTypes.DockedDrawingTool}-${mapId}`,
-  //         setOpen: true,
-  //       }),
-  //     );
-  //   }
-  // };
-  var shownTitle = showMapIdInTitle ? "".concat(title, " ").concat(mapId) : title;
-  var onClose = function onClose() {
-    deactivateTool();
-    closeDrawDialog();
-  };
-  if (!isDialogOpen) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(DrawingTool, {
-    bounds: bounds,
-    isOpen: isDialogOpen,
-    onClose: onClose,
-    title: shownTitle,
-    onMouseDown: setDialogOrder,
-    order: dialogOrder,
-    source: uiSource,
-    isLoading: uiIsLoading,
-    error: uiError,
-    // onToggleDock={onToggleDock}
-    setFocused: setFocused,
-    headerSize: "xs",
-    isDocked: isDocked,
-    startPosition: {
-      top: 134,
-      left: 50
-    }
-  }, /*#__PURE__*/React.createElement(DrawingToolFormConnect, {
-    mapId: mapId
-  }));
-};
-
-var titleStyle = function titleStyle(theme) {
-  return {
-    position: 'absolute',
-    padding: '5px',
-    zIndex: 50,
-    color: theme.palette.common.black,
-    whiteSpace: 'nowrap',
-    userSelect: 'none'
+    position: 'absolute',
+    padding: '5px',
+    zIndex: 50,
+    color: theme.palette.common.black,
+    whiteSpace: 'nowrap',
+    userSelect: 'none'
   };
 };
 var defaultBbox = {
@@ -24818,7 +23826,7 @@ var defaultBbox = {
     top: 11520588.9031
   }
 };
-var BaseConfigurableMapConnect = function BaseConfigurableMapConnect(_a) {
+var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
   var id = _a.id,
     dockedLayerManagerSize = _a.dockedLayerManagerSize,
     title = _a.title,
@@ -24911,16 +23919,20 @@ var BaseConfigurableMapConnect = function BaseConfigurableMapConnect(_a) {
         setOpen: true
       }));
     }
+    if (shouldDisplayDrawControls) {
+      dispatch(mapStoreActions.addLayer({
+        mapId: mapId,
+        layer: {
+          geojson: emptyGeoJSON,
+          layerType: LayerType.featureLayer
+        },
+        layerId: getSingularDrawtoolDrawLayerId(mapId),
+        origin: 'ConfigurableMapConnect'
+      }));
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var mapControlsPositionTop = title ? 24 : 8;
-  // draw tools
-  var _useMapDrawContext = useMapDrawContext(),
-    geoJSONLayers = _useMapDrawContext.layers,
-    deactivateTool = _useMapDrawContext.deactivateTool;
-  var onExitDrawMode = function onExitDrawMode() {
-    deactivateTool();
-  };
   return /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       width: '100%',
@@ -24948,8 +23960,6 @@ var BaseConfigurableMapConnect = function BaseConfigurableMapConnect(_a) {
     mapId: mapId
   }), displayGetFeatureInfoButtonInMap && /*#__PURE__*/React__default.createElement(GetFeatureInfoButtonConnect, {
     mapId: mapId
-  }), shouldDisplayDrawControls && /*#__PURE__*/React__default.createElement(DrawingToolMapButtonConnect, {
-    mapId: mapId
   }), mapControls), !disableTimeSlider && /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       position: 'absolute',
@@ -24966,13 +23976,7 @@ var BaseConfigurableMapConnect = function BaseConfigurableMapConnect(_a) {
     displayTimeInMap: displayTimeInMap,
     showScaleBar: false,
     mapId: mapId
-  }, children || geoJSONLayers.map(function (layer) {
-    return /*#__PURE__*/React__default.createElement(MapViewLayer, Object.assign({
-      key: layer.id
-    }, layer, {
-      exitDrawModeCallback: onExitDrawMode
-    }));
-  })), multiLegend && /*#__PURE__*/React__default.createElement(LegendConnect, {
+  }, children), multiLegend && /*#__PURE__*/React__default.createElement(LegendConnect, {
     showMapId: true,
     mapId: mapId,
     multiLegend: multiLegend
@@ -24985,17 +23989,8 @@ var BaseConfigurableMapConnect = function BaseConfigurableMapConnect(_a) {
     mapId: mapId,
     bounds: "parent",
     isDocked: true
-  }), shouldDisplayDrawControls && /*#__PURE__*/React__default.createElement(DrawingToolConnect, {
-    mapId: mapId,
-    isDocked: true,
-    bounds: "parent"
   }));
 };
-var ConfigurableMapConnect = function ConfigurableMapConnect(props) {
-  return /*#__PURE__*/React__default.createElement(MapDrawToolProvider, {
-    options: drawOptions
-  }, /*#__PURE__*/React__default.createElement(BaseConfigurableMapConnect, Object.assign({}, props)));
-};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -25794,6 +24789,7 @@ var HOUR_TO_SECOND = 3600;
 var HOUR_TO_MINUTE = 60;
 var MILLISECOND_TO_DAY = 1 / 86400000;
 var MILLISECOND_TO_SECOND = 1 / 1000;
+var MILLISECOND_TO_MINUTE = 1 / 60000;
 var MINUTE_TO_SECOND = 60;
 var SECOND_TO_DAY = 1 / 86400;
 var SECOND_TO_HOUR = 1 / 3600;
@@ -25863,6 +24859,11 @@ var getNearestSelectableTime = function getNearestSelectableTime(timeStep, start
   var result = isBetweenObservedAndForecast ? roundedCurrentTime : floorLocalSeconds(hoveredTime + timeStepSeconds / 2, timeStepSeconds);
   return result;
 };
+var floorLocalMinutes = function floorLocalMinutes(selectedTimeMinutes, timeStepMinutes, timeZoneOffsetMinutes) {
+  var localTimeZoneOffset = timeZoneOffsetMinutes !== null && timeZoneOffsetMinutes !== void 0 ? timeZoneOffsetMinutes : new Date().getTimezoneOffset();
+  var unFlooredTimeSteps = (selectedTimeMinutes - localTimeZoneOffset) / timeStepMinutes;
+  return Math.floor(unFlooredTimeSteps) * timeStepMinutes + localTimeZoneOffset;
+};
 var floorLocalSeconds = function floorLocalSeconds(selectedTimeSeconds, timeStepSeconds, timeZoneOffsetSeconds) {
   var localTimeZoneOffset = timeZoneOffsetSeconds !== null && timeZoneOffsetSeconds !== void 0 ? timeZoneOffsetSeconds : new Date().getTimezoneOffset() * 60;
   var unFlooredTimeSteps = (selectedTimeSeconds - localTimeZoneOffset) / timeStepSeconds;
@@ -26016,6 +25017,54 @@ var getRemainingHours = function getRemainingHours(maxHours, days) {
 var secondsSinceLocalMidnight = function secondsSinceLocalMidnight(currentTimeInSeconds) {
   return new Date(currentTimeInSeconds * 1000).getHours() * HOUR_TO_SECOND + new Date(currentTimeInSeconds * 1000).getMinutes() * MINUTE_TO_SECOND + new Date(currentTimeInSeconds * 1000).getSeconds();
 };
+var getTimeScaleDescription = function getTimeScaleDescription(timeScale) {
+  if (timeScale !== 1 && timeScale < HOUR_TO_SECOND) {
+    return "".concat(Math.round(timeScale / MINUTE_TO_SECOND), " minutes is ~1 second");
+  }
+  if (timeScale > 60) {
+    var hours = Math.floor(timeScale / HOUR_TO_SECOND);
+    var mins = Math.round((timeScale - hours * HOUR_TO_SECOND) / MINUTE_TO_SECOND);
+    return "".concat(hours, " h ").concat(mins, " min is ~1 second");
+  }
+  return 'Real-time';
+};
+
+var timeSliderLiteUtils = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  DAY_TO_MILLISECOND: DAY_TO_MILLISECOND,
+  DAY_TO_SECOND: DAY_TO_SECOND,
+  HOUR_TO_SECOND: HOUR_TO_SECOND,
+  HOUR_TO_MINUTE: HOUR_TO_MINUTE,
+  MILLISECOND_TO_DAY: MILLISECOND_TO_DAY,
+  MILLISECOND_TO_SECOND: MILLISECOND_TO_SECOND,
+  MILLISECOND_TO_MINUTE: MILLISECOND_TO_MINUTE,
+  MINUTE_TO_SECOND: MINUTE_TO_SECOND,
+  SECOND_TO_DAY: SECOND_TO_DAY,
+  SECOND_TO_HOUR: SECOND_TO_HOUR,
+  SECOND_TO_MILLISECOND: SECOND_TO_MILLISECOND,
+  SEVEN_DAYS_IN_SECONDS: SEVEN_DAYS_IN_SECONDS,
+  reformatFinnishDateString: reformatFinnishDateString,
+  shortUTCTime: shortUTCTime,
+  getMonthChanges: getMonthChanges,
+  getSelectedTimePx: getSelectedTimePx,
+  boundedValue: boundedValue,
+  getSelectedTimeFromPx: getSelectedTimeFromPx,
+  getNearestSelectableTime: getNearestSelectableTime,
+  floorLocalMinutes: floorLocalMinutes,
+  floorLocalSeconds: floorLocalSeconds,
+  secondsToDaysAndHours: secondsToDaysAndHours,
+  hoursAndDaysToSeconds: hoursAndDaysToSeconds,
+  TIME_SLIDER_LITE_DEFAULT_MAX_FORECAST_RANGE: TIME_SLIDER_LITE_DEFAULT_MAX_FORECAST_RANGE,
+  TIME_SLIDER_LITE_DEFAULT_MAX_OBSERVED_RANGE: TIME_SLIDER_LITE_DEFAULT_MAX_OBSERVED_RANGE,
+  defaultTimeRange: defaultTimeRange,
+  useDefaultTimeRange: useDefaultTimeRange,
+  generateCustomTimeList: generateCustomTimeList,
+  subTicksPerDay: subTicksPerDay,
+  maxSubTicksPerDay: maxSubTicksPerDay,
+  getRemainingHours: getRemainingHours,
+  secondsSinceLocalMidnight: secondsSinceLocalMidnight,
+  getTimeScaleDescription: getTimeScaleDescription
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -26639,7 +25688,7 @@ var TimeSliderLiteOptionsMenu = function TimeSliderLiteOptionsMenu(_ref) {
     speedOptionItemPrefix = _ref.speedOptionItemPrefix,
     speedOptions = _ref.speedOptions,
     updateIntervalOptions = _ref.updateIntervalOptions,
-    submenuSx = _ref.submenuSx,
+    subMenuSx = _ref.subMenuSx,
     sx = _ref.sx,
     _ref$TimeZoneSwitch = _ref.TimeZoneSwitch,
     TimeZoneSwitch$1 = _ref$TimeZoneSwitch === void 0 ? TimeZoneSwitch : _ref$TimeZoneSwitch,
@@ -26660,7 +25709,7 @@ var TimeSliderLiteOptionsMenu = function TimeSliderLiteOptionsMenu(_ref) {
     sx: Object.assign({
       left: submenuLeft,
       marginLeft: '-12px'
-    }, submenuSx),
+    }, subMenuSx),
     setSubmenu: setSubmenu,
     title: getTitle(submenu),
     closeButtonIcon: closeButtonIcon
@@ -27498,6 +26547,9 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? TIME_SLIDER_LITE_DEFAULT_HEIGHT : _ref$height,
     hideButton = _ref.hideButton,
+    hideMenuButton = _ref.hideMenuButton,
+    hideStepButtons = _ref.hideStepButtons,
+    hidePlayButton = _ref.hidePlayButton,
     isAnimating = _ref.isAnimating,
     isVisible = _ref.isVisible,
     _ref$locale = _ref.locale,
@@ -27508,12 +26560,12 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
     overrideAnimation = _ref.overrideAnimation,
     onToggleAnimation = _ref.onToggleAnimation,
     onToggleMenu = _ref.onToggleMenu,
+    onToggleTimeSlider = _ref.onToggleTimeSlider,
     needleWidth = _ref.needleWidth,
     needleDragAreaWidth = _ref.needleDragAreaWidth,
     needleLabelZIndex = _ref.needleLabelZIndex,
     needleLabelOffset = _ref.needleLabelOffset,
     draggableTimeStamp = _ref.draggableTimeStamp,
-    onToggleTimeSlider = _ref.onToggleTimeSlider,
     selectedTime = _ref.selectedTime,
     setSelectedTime = _ref.setSelectedTime,
     settings = _ref.settings,
@@ -27609,7 +26661,7 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
     }
   }, controlButtons || /*#__PURE__*/React__default.createElement(ControlButtonGroup, {
     left: true
-  }, /*#__PURE__*/React__default.createElement(MenuButton, {
+  }, !hideMenuButton && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MenuButton, {
     settings: settings === null || settings === void 0 ? void 0 : settings.menuButton,
     menuOpen: menuOpen,
     onClick: onToggleMenu
@@ -27619,12 +26671,12 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
       height: "".concat(height, "px"),
       margin: '2px'
     }
-  }), /*#__PURE__*/React__default.createElement(PlayButton, {
+  })), !hidePlayButton && /*#__PURE__*/React__default.createElement(PlayButton, {
     settings: settings === null || settings === void 0 ? void 0 : settings.playButton,
     isAnimating: isAnimating,
     onTogglePlayButton: onToggleAnimation,
     tooltipDelay: tooltipDelay
-  }), /*#__PURE__*/React__default.createElement(StepButton, {
+  }), !hideStepButtons && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StepButton, {
     settings: settings === null || settings === void 0 ? void 0 : settings.stepButton,
     onClick: function onClick() {
       return handleTimeStep(-timeStepSeconds);
@@ -27637,7 +26689,7 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
       return handleTimeStep(timeStepSeconds);
     },
     tooltipDelay: tooltipDelay
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
+  })))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(TimeSliderLiteBackground, {
     draggableTimeStamp: draggableTimeStamp,
@@ -27679,13 +26731,13 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
   var _b, _c, _d, _e, _f;
   var overrideUseTimeRange = _a.overrideUseTimeRange,
     overrideUseTimeStep = _a.overrideUseTimeStep,
+    overrideUseTimeZone = _a.overrideUseTimeZone,
     sourceId = _a.sourceId,
     mapId = _a.mapId,
     _a$isAlwaysVisible = _a.isAlwaysVisible,
     isAlwaysVisible = _a$isAlwaysVisible === void 0 ? false : _a$isAlwaysVisible,
-    menuSx = _a.menuSx,
-    subMenuSx = _a.subMenuSx,
-    timeSliderProps = __rest(_a, ["overrideUseTimeRange", "overrideUseTimeStep", "sourceId", "mapId", "isAlwaysVisible", "menuSx", "subMenuSx"]);
+    TimeSliderLiteOptionsMenuProps = _a.TimeSliderLiteOptionsMenuProps,
+    timeSliderProps = __rest(_a, ["overrideUseTimeRange", "overrideUseTimeStep", "overrideUseTimeZone", "sourceId", "mapId", "isAlwaysVisible", "TimeSliderLiteOptionsMenuProps"]);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     menuOpen = _React$useState2[0],
@@ -27700,10 +26752,11 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
     _ref4 = _slicedToArray(_ref3, 2),
     timeStep = _ref4[0],
     setTimeStep = _ref4[1];
-  var _React$useState3 = React.useState('LT'),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    timeZone = _React$useState4[0],
-    setTimeZone = _React$useState4[1];
+  var useTimeZone = React.useState('LT');
+  var _ref5 = overrideUseTimeZone || useTimeZone,
+    _ref6 = _slicedToArray(_ref5, 2),
+    timeZone = _ref6[0],
+    setTimeZone = _ref6[1];
   var isTimeSliderVisible = useSelector(function (store) {
     return mapSelectors.isTimeSliderVisible(store, mapId);
   });
@@ -27732,9 +26785,6 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
     }));
   };
   var defaultTimeStep = [5, 15];
-  var dimensions = useSelector(function (store) {
-    return mapSelectors.getMapDimensions(store, mapId);
-  });
   var layers = useSelector(function (store) {
     return mapSelectors.getMapLayers(store, mapId);
   });
@@ -27742,12 +26792,13 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
     _useDefaultTimeRange2 = _slicedToArray(_useDefaultTimeRange, 2),
     defaultStartTime = _useDefaultTimeRange2[0],
     defaultEndTime = _useDefaultTimeRange2[1];
-  var _ref5 = timeRange || [defaultStartTime, defaultEndTime],
-    _ref6 = _slicedToArray(_ref5, 2),
-    startTime = _ref6[0],
-    endTime = _ref6[1];
-  var _getTimeBounds = getTimeBounds(dimensions),
-    selectedTime = _getTimeBounds.selectedTime;
+  var _ref7 = timeRange || [defaultStartTime, defaultEndTime],
+    _ref8 = _slicedToArray(_ref7, 2),
+    startTime = _ref8[0],
+    endTime = _ref8[1];
+  var selectedTime = useSelector(function (store) {
+    return mapSelectors.getSelectedTime(store, mapId);
+  });
   var onToggleAnimation = function onToggleAnimation() {
     var _a, _b;
     if (isAnimating) {
@@ -27786,9 +26837,7 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
     }
     setTimeStep(newTimeStep);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isVisible && menuOpen && /*#__PURE__*/React.createElement(TimeSliderLiteOptionsMenu, {
-    sx: menuSx,
-    submenuSx: subMenuSx,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isVisible && menuOpen && /*#__PURE__*/React.createElement(TimeSliderLiteOptionsMenu, Object.assign({
     menuOpen: menuOpen,
     setMenuOpen: setMenuOpen,
     defaultTimeRange: [defaultStartTime, defaultEndTime],
@@ -27800,7 +26849,7 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
     closeButtonIcon: (_c = (_b = timeSliderProps.settings) === null || _b === void 0 ? void 0 : _b.closeButton) === null || _c === void 0 ? void 0 : _c.icon,
     dropdownButtonIcon: (_e = (_d = timeSliderProps.settings) === null || _d === void 0 ? void 0 : _d.dropdownButton) === null || _e === void 0 ? void 0 : _e.icon,
     TimeZoneSwitch: (_f = timeSliderProps === null || timeSliderProps === void 0 ? void 0 : timeSliderProps.settings) === null || _f === void 0 ? void 0 : _f.TimeZoneSwitch
-  }), /*#__PURE__*/React.createElement(TimeSliderLite, Object.assign({
+  }, TimeSliderLiteOptionsMenuProps)), /*#__PURE__*/React.createElement(TimeSliderLite, Object.assign({
     selectedTime: selectedTime,
     timeStep: timeStep !== null && timeStep !== void 0 ? timeStep : defaultTimeStep,
     timeZone: timeZone,
@@ -28086,7 +27135,7 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref3) {
 };
 
 /**
- * @remix-run/router v1.8.0
+ * @remix-run/router v1.9.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -28150,7 +27199,7 @@ function warning(cond, message) {
     try {
       // Welcome to debugging history!
       //
-      // This error is thrown as a convenience so you can more easily
+      // This error is thrown as a convenience, so you can more easily
       // find the source for a warning that appears in the console by
       // enabling "pause on exceptions" in your JavaScript debugger.
       throw new Error(message);
@@ -28326,7 +27375,7 @@ const validMutationMethodsArr = ["post", "put", "patch", "delete"];
 ["get", ...validMutationMethodsArr];
 
 /**
- * React Router v6.15.0
+ * React Router v6.16.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -28649,61 +27698,4 @@ var AppWrapperConnect = withEggs([appModuleConfig])(function (_ref) {
   return children;
 });
 
-/* *
- * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-var MapWarningProperties = function MapWarningProperties(_ref) {
-  var selectedFeatureProperties = _ref.selectedFeatureProperties,
-    languageIndex = _ref.languageIndex,
-    parentSize = _ref.parentSize;
-  var language = languageIndex || 0;
-  var newWidth = parentSize ? parentSize - 100 : 350;
-  return /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      position: 'fixed',
-      width: "".concat(newWidth, "px"),
-      height: '1px',
-      display: 'flex',
-      justifyContent: 'center',
-      left: '50px'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    "data-testid": "map-warning-properties",
-    style: {
-      marginTop: '50px',
-      width: '350px',
-      height: '190px',
-      padding: '0px 20px 20px',
-      overflow: 'auto',
-      fontSize: '11px',
-      backgroundColor: '#CCCCCCC0'
-    }
-  }, /*#__PURE__*/React__default.createElement("h1", {
-    "data-testid": "map-warning-properties-title"
-  }, selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].areaDesc), selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].areaDesc && /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, "event:", ' ', selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, "Sent:", ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.onset), 'dd MMM yyyy, HH:mm'), ' ', "UTC"), selectedFeatureProperties.expires && /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, "Expires:", ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.expires), 'dd MMM yyyy, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].senderName && /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, "Sender:", ' ', selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, "Identifier: ", selectedFeatureProperties.identifier)));
-};
-
-export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DrawingToolConnect, DrawingToolMapButtonConnect, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LayerSelectConnect, LegendConnect, LegendMapButtonConnect, MapDrawToolProvider, MapViewConnect, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, RouterWrapperConnect, SnackbarWrapperConnect, SyncGroupViewerConnect, TimeSlider, BackwardForwardStepButtonConnect as TimeSliderBackwardForwardStepButtonConnect, TimeSliderButtonsConnectMemo as TimeSliderButtonsConnect, TimeSliderConnect, TimeSliderLite, TimeSliderLiteConnect, TimeSliderLiteOptionsMenu, OptionsMenuButtonConnect as TimeSliderOptionsMenuButtonConnect, PlayButtonConnect as TimeSliderPlayButtonConnect, ZoomControlConnect, componentsLookUp, defaultBbox, defaultBox, defaultConfigurations, defaultDelete, defaultIntersectionStyleProperties, defaultPoint, defaultPolygon, drawOptions, filterMapPresets, filterServices, store, testLayers, timeSliderUtils, useAreaDrawDialogAction, useFetchServices, useMapDrawContext, useMapDrawTool, useSetupDialog };
+export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LayerSelectConnect, LegendConnect, LegendMapButtonConnect, MapViewConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, RouterWrapperConnect, SnackbarWrapperConnect, SyncGroupViewerConnect, TimeSlider, BackwardForwardStepButtonConnect as TimeSliderBackwardForwardStepButtonConnect, TimeSliderButtonsConnectMemo as TimeSliderButtonsConnect, TimeSliderConnect, TimeSliderLite, TimeSliderLiteConnect, TimeSliderLiteOptionsMenu, timeSliderLiteUtils as TimeSliderLiteUtils, OptionsMenuButtonConnect as TimeSliderOptionsMenuButtonConnect, PlayButtonConnect as TimeSliderPlayButtonConnect, ZoomControlConnect, componentsLookUp, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, store, testLayers, timeSliderUtils, useFetchServices, useSetupDialog };