@opengeoweb/core 19.5.1 → 19.6.1-nightly-20260910

package/dist/index.esm.js

@@ -1,20 +1,20 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FormControl, MenuItem, Grid, InputLabel, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItemButton, ListItemText, DialogContentText, TextField, InputAdornment, Button, useTheme, Tooltip, ListItem, ListItemIcon, Checkbox, Popper, Fade, styled, LinearProgress, Autocomplete, Switch, Select } from '@mui/material';
 import React, { useMemo, useState, useCallback, useEffect, useContext } from 'react';
-import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, TooltipSelect, CustomIconButton, CustomDialog, CustomTooltip, ToggleMenu, AlertIcon, useConfirmationDialog, useScrollingInIsolation, sliderHeaderStyle, CustomSlider, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, PROJECTION, calculateStartSize, useWheelStopPropagation, ToolContainerDraggable, dateUtils, sessionStorageProvider, useDebounce, usePrevious } from '@opengeoweb/shared';
-import { webmapUtils, queryWMSLayersTree, invalidateWMSGetCapabilities, LayerType, WMDefaultStyleName, WMJSMAP_LONLAT_EPSGCODE, queryWMSServiceInfo, queryWMSLayers, getWMSServiceId, handleDateUtilsISOString, generateLayerId, WMJSDimension, getWMLayerById, getMapDimURL, WMLayer } from '@opengeoweb/webmap';
+import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, TooltipSelect, CustomIconButton, CustomDialog, CustomTooltip, ToggleMenu, AlertIcon, useConfirmationDialog, useScrollingInIsolation, sliderHeaderStyle, CustomSlider, SearchField, SearchHighlight, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, PROJECTION, calculateStartSize, useWheelStopPropagation, ToolContainerDraggable, dateUtils, sessionStorageProvider, useDebounce, usePrevious } from '@opengeoweb/shared';
+import { webmapUtils, queryWMSLayersTree, invalidateWMSGetCapabilities, LayerType, WMJSDimension, WMDefaultStyleName, queryWMSServiceInfo, queryWMSLayers, getWMSServiceId, handleDateUtilsISOString, generateLayerId, getWMLayerById, getMapDimURL, WMLayer } from '@opengeoweb/webmap';
 import _, { isEqual, isArray, range, zip, throttle } from 'lodash';
 import { useDispatch, useSelector, connect, useStore, shallowEqual, Provider } from 'react-redux';
 import { mapSelectors, layerSelectors, layerActions, layerTypes, filterLayers, mapActions, mapEnums, loadingIndicatorSelectors, layerUtils, serviceSelectors, serviceActions, uiSelectors, uiTypes, useSetupDialog, getUserAddedServices, uiActions, genericActions, drawingToolSelectors, syncGroupsSelectors, syncConstants, getViewObjectForSyncGroup, getViewObjectForMapId, loadingIndicatorActions, genericSelectors, PUBLIC_WARNING_DRAW_TOOL_ID, defaultLayers, getSingularDrawtoolDrawLayerId, syncGroupsSelector, syncGroupsActions, routerUtils, mapUtils } from '@opengeoweb/store';
 import i18n from 'i18next';
 import { useTranslation, Trans, I18nextProvider } from 'react-i18next';
-import { TIME_SLIDER_NAMESPACE, timesliderTranslations, defaultTimeSpan, AnimationLengthButton, AnimationLength, AutoUpdateButton, BackwardForwardStepButton, NowButton, handleSetNowEvent, PlayButton, defaultTimeStep, SpeedButton, TimeSpanButton, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, TimeStepButton, OptionsMenuButton, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, onsetNewDateDebounced, getFilteredTime, defaultSecondsPerPx, moveSelectedTimePx, TimeSlider } from '@opengeoweb/time-slider';
-import { webmapReactTranslations, WEBMAP_REACT_NAMESPACE, webmapTranslations, WEBMAP_NAMESPACE, openLayersGetMapImageStore, LayerInfoButton, useStacCollection, useGetWMLayerInstance, useEDRGetCollectionDetails, getStacCollectionStyles, resolvePreferredStyleName, defaultEdrStyles, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, Clock, LegendDialog, LegendButton, MapContext, emptyGeoJSON, MapFeatureClass, setMapCenter, makeTimeList, getIsInsideAcceptanceTime, OpenLayersLayer, isGeoJSONGeometryEmpty, OpenLayersFeatureLayer, OpenLayersMapDraw, MapMeasure, useSetIntervalWhenVisible, TimeContext, OpenLayersMapView, WMSLayer, genericOpenLayersFeatureStyle, OpenLayersGetFeatureInfo, MapControls, OpenLayersZoomControl, getLayerUpdateInfo, publicLayers } from '@opengeoweb/webmap-react';
+import { TIME_SLIDER_NAMESPACE, timesliderTranslations, defaultTimeSpan, AnimationLengthPanel, exactAnimationLength, AnimationLengthMode, isValidNowAnimationLength, isWithinAnimationStepLimit, resolveNowAnimationRange, AutoUpdateButton, BackwardForwardStepButton, NowButton, handleSetNowEvent, PlayButton, defaultTimeStep, SpeedButton, TimeSpanButton, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, TimeStepButton, OptionsMenuButton, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, onsetNewDateDebounced, getFilteredTime, defaultSecondsPerPx, moveSelectedTimePx, TimeSlider } from '@opengeoweb/time-slider';
+import { webmapReactTranslations, WEBMAP_REACT_NAMESPACE, webmapTranslations, WEBMAP_NAMESPACE, openLayersGetMapImageStore, LayerInfoButton, useStacCollection, useGetWMLayerInstance, getLayerExtentForProjection, useEDRGetCollectionDetails, getStacCollectionStyles, resolvePreferredStyleName, defaultEdrStyles, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, Clock, LegendDialog, LegendButton, MapContext, emptyGeoJSON, MapFeatureClass, setMapCenter, makeTimeList, getIsInsideAcceptanceTime, OpenLayersLayer, isGeoJSONGeometryEmpty, calculateNewSelection, shouldExitEditModeForMultiSelect, shouldEnterEditMode, calculateBoxSelection, OpenLayersFeatureLayer, OpenLayersMapDraw, DRAWMODE, getOlFeatureKey, MapMeasure, useViewFromLayer, useSetIntervalWhenVisible, TimeContext, OpenLayersMapView, WMSLayer, genericOpenLayersFeatureStyle, OpenLayersGetFeatureInfo, MapControls, OpenLayersZoomControl, getLayerUpdateInfo, publicLayers } from '@opengeoweb/webmap-react';
+export { getAffectedIndices } from '@opengeoweb/webmap-react';
 import { Cached, Add, MapAdd, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, ColumnCollapsed, ColumnCollapse, DragHandle as DragHandle$1, None, FastForward, AutoUpdateActive, Both, Delete, Visibility, VisibilityOff, Copy, ZoomToLayer, Overlayers, WorldMapProjection, Layers, Search, Exclamation, MyLocation, Airplane, Region, Pinned, Close, ExitDomain, LocationInfo, Measure, Options, Info, ThemeWrapper, lightTheme, FlagBritain, FlagNetherlands, FlagFinland, FlagNorway } from '@opengeoweb/theme';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
 import { Box as Box$1, Stack } from '@mui/system';
-import { transformExtent, toLonLat, fromLonLat } from 'ol/proj';
 import { LayerSelectButtonConnect, LayerSelectConnect, DataExplorerButtonConnect } from '@opengeoweb/layer-select';
 import { unByKey } from 'ol/Observable';
 import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -23,6 +23,7 @@ import { bbox } from '@turf/turf';
 import proj4 from 'proj4';
 import { getIntersection } from 'ol/extent';
 import GeoJSON from 'ol/format/GeoJSON';
+import { toLonLat, fromLonLat } from 'ol/proj';
 import { ImageWMS } from 'ol/source';
 import DOMPurify from 'dompurify';
 import { snackbarTypes, snackbarActions, SnackbarWrapperConnect } from '@opengeoweb/snackbar';
@@ -2793,7 +2794,10 @@ var DimensionSelect = function DimensionSelect(_ref) {
     return dimension.name === selectedDimensionName;
   });
   var wmDimension = webmapUtils.getWMJSDimensionForLayerAndDimension(layerId || '', selectedDimension == null ? void 0 : selectedDimension.name);
-  var generatedValues = (wmDimension == null ? void 0 : wmDimension.generateAllValues()) || [];
+  var generatedValues = React.useMemo(function () {
+    var dimension = wmDimension || (selectedDimension != null && selectedDimension.values ? new WMJSDimension(selectedDimension) : undefined);
+    return (dimension == null ? void 0 : dimension.generateAllValues()) || [];
+  }, [selectedDimension, wmDimension]);
   var dimensionNames = layerDimensions.map(function (dimension) {
     return dimension.name;
   });
@@ -3694,6 +3698,9 @@ var RenderLayers = function RenderLayers(_ref) {
     isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
     tooltipPrefix = _ref.tooltipPrefix,
     skipLocalStyling = _ref.skipLocalStyling;
+  var _React$useState = React.useState(''),
+    searchFilter = _React$useState[0],
+    setSearchFilter = _React$useState[1];
   var _useCoreTranslation = useCoreTranslation(),
     t = _useCoreTranslation.t;
   var nonEmptyTooltipPrefix = tooltipPrefix != null ? tooltipPrefix : t('layermanager-layer') + ": ";
@@ -3713,7 +3720,25 @@ var RenderLayers = function RenderLayers(_ref) {
       value: layer.name
     };
   });
+  var filteredLayers = extendedLayers.filter(function (layer) {
+    var _layer$title;
+    return (_layer$title = layer.title) == null ? void 0 : _layer$title.toLowerCase().includes(searchFilter.toLowerCase());
+  });
   return jsxs(TooltipSelect, {
+    MenuProps: {
+      slotProps: {
+        paper: {
+          style: {
+            width: '500px'
+          }
+        },
+        list: {
+          style: {
+            padding: 0
+          }
+        }
+      }
+    },
     currentIndex: currentIndex,
     disableUnderline: true,
     inputProps: {
@@ -3736,19 +3761,57 @@ var RenderLayers = function RenderLayers(_ref) {
     skipLocalStyling: skipLocalStyling,
     tooltip: "" + nonEmptyTooltipPrefix + ((_extendedLayers$curre = extendedLayers[currentIndex]) == null ? void 0 : _extendedLayers$curre.title),
     value: currentValue,
-    children: [jsx(MenuItem, {
+    children: [jsx(Box, {
+      ref: function ref(node) {
+        if (node) {
+          // focus the search field when the menu opens
+          requestAnimationFrame(function () {
+            var _node$querySelector;
+            (_node$querySelector = node.querySelector('input')) == null || _node$querySelector.focus();
+          });
+        }
+      },
+      sx: {
+        position: 'sticky',
+        top: 0,
+        zIndex: 1,
+        backgroundColor: 'geowebColors.background.surface'
+      },
+      children: jsx(SearchField, {
+        searchFilter: searchFilter,
+        setSearchFilter: setSearchFilter
+      })
+    }), jsx(MenuItem, {
       disabled: true,
-      children: t('layermanager-layer')
-    }), extendedLayers.map(function (layerFromServiceLayers, currentIndex) {
+      children: filteredLayers.length ? t('layermanager-layer') : t('layermanager-layer') + " - " + t('search-no-results')
+    }), filteredLayers.map(function (layerFromServiceLayers, currentIndex) {
       return jsxs(MenuItem, {
         disabled: !layerFromServiceLayers.leaf,
         sx: {
           '& .MuiSvgIcon-root': {
             marginLeft: '28px'
-          }
+          },
+          gap: 1
         },
         value: layerFromServiceLayers.name,
-        children: [layerFromServiceLayers.title, currentIndex === layers.length && jsx(AlertIcon, {
+        children: [jsx(CustomTooltip, {
+          title: layerFromServiceLayers.title,
+          children: jsx(Box, {
+            component: "span",
+            sx: {
+              display: 'block',
+              flex: '1 1 auto',
+              minWidth: 0,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap'
+            },
+            children: jsx(SearchHighlight, {
+              search: searchFilter,
+              text: layerFromServiceLayers.title
+            })
+          })
+        }), currentIndex === layers.length && jsx(AlertIcon, {
           severity: "error"
         })]
       }, layerFromServiceLayers.name);
@@ -4449,13 +4512,12 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
     if (!layerId || !mapSrs || !wmLayer) {
       return;
     }
-    var crs = wmLayer.getCRSByName(mapSrs);
-    if (crs != null && crs.bbox) {
-      var _crs$bbox$getExtent = crs.bbox.getExtent(),
-        left = _crs$bbox$getExtent[0],
-        bottom = _crs$bbox$getExtent[1],
-        right = _crs$bbox$getExtent[2],
-        top = _crs$bbox$getExtent[3];
+    var extent = getLayerExtentForProjection(wmLayer, mapSrs);
+    if (extent) {
+      var left = extent[0],
+        bottom = extent[1],
+        right = extent[2],
+        top = extent[3];
       dispatch(mapActions.setBbox({
         mapId: mapId,
         srs: mapSrs,
@@ -4467,26 +4529,6 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
         },
         origin: layerTypes.LayerActionOrigin.layerManager
       }));
-      return;
-    }
-    var geo = wmLayer.geographicBoundingBox;
-    if (geo) {
-      var _transformExtent = transformExtent([parseFloat(geo.west), parseFloat(geo.south), parseFloat(geo.east), parseFloat(geo.north)], WMJSMAP_LONLAT_EPSGCODE, mapSrs),
-        _left = _transformExtent[0],
-        _bottom = _transformExtent[1],
-        _right = _transformExtent[2],
-        _top = _transformExtent[3];
-      dispatch(mapActions.setBbox({
-        mapId: mapId,
-        srs: mapSrs,
-        bbox: {
-          left: _left,
-          bottom: _bottom,
-          right: _right,
-          top: _top
-        },
-        origin: layerTypes.LayerActionOrigin.layerManager
-      }));
     }
   }, [dispatch, layerId, mapId, mapSrs, wmLayer]);
   var duplicateLayer = React.useCallback(function (_ref3) {
@@ -4517,9 +4559,9 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
     icon: icon,
     isFeatureLayer: isFeatureLayer,
     isFeatureSyncLayer: isFeatureSyncLayer,
+    isTiledStacCollection: isStacGeoTIFFLayer ? isTiledStacCollection : undefined,
     layerId: layerId,
     mapId: mapId,
-    isTiledStacCollection: isStacGeoTIFFLayer ? isTiledStacCollection : undefined,
     onChangeStacDataLayout: isStacGeoTIFFLayer ? changeStacDataLayout : undefined,
     onLayerCopyToOtherMaps: copyLayerToOtherMaps,
     onLayerDuplicate: function onLayerDuplicate() {
@@ -4621,6 +4663,9 @@ var RenderEDRLayers = function RenderEDRLayers(_ref) {
     isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
     tooltipPrefix = _ref.tooltipPrefix,
     skipLocalStyling = _ref.skipLocalStyling;
+  var _React$useState = React.useState(''),
+    searchFilter = _React$useState[0],
+    setSearchFilter = _React$useState[1];
   var _useCoreTranslation = useCoreTranslation(),
     t = _useCoreTranslation.t;
   var nonEmptyTooltipPrefix = tooltipPrefix != null ? tooltipPrefix : selectedParams.length === 1 ? t('layermanager-layer') + ": " : t('layermanager-layer-multi') + ": ";
@@ -4646,6 +4691,10 @@ var RenderEDRLayers = function RenderEDRLayers(_ref) {
       value: layer.name
     };
   });
+  var filteredLayers = extendedLayers.filter(function (layer) {
+    var _layer$title;
+    return (_layer$title = layer.title) == null ? void 0 : _layer$title.toLowerCase().includes(searchFilter.toLowerCase());
+  });
   var edrText = t('layermanager-EDR');
   var tooltipNames = currentValues.map(function (value) {
     var layer = extendedLayers.find(function (layer) {
@@ -4657,6 +4706,20 @@ var RenderEDRLayers = function RenderEDRLayers(_ref) {
     return (paramA != null ? paramA : '').localeCompare(paramB != null ? paramB : '');
   }).join(', ');
   return jsxs(TooltipSelect, {
+    MenuProps: {
+      slotProps: {
+        paper: {
+          style: {
+            width: '500px'
+          }
+        },
+        list: {
+          style: {
+            padding: 0
+          }
+        }
+      }
+    },
     disableUnderline: true,
     inputProps: {
       SelectDisplayProps: {
@@ -4673,22 +4736,59 @@ var RenderEDRLayers = function RenderEDRLayers(_ref) {
     skipLocalStyling: skipLocalStyling,
     tooltip: tooltip,
     value: currentValues,
-    children: [jsx(MenuItem, {
+    children: [jsx(Box, {
+      ref: function ref(node) {
+        if (node) {
+          requestAnimationFrame(function () {
+            var _node$querySelector;
+            (_node$querySelector = node.querySelector('input')) == null || _node$querySelector.focus();
+          });
+        }
+      },
+      sx: {
+        position: 'sticky',
+        top: 0,
+        zIndex: 1,
+        backgroundColor: 'geowebColors.background.surface'
+      },
+      children: jsx(SearchField, {
+        searchFilter: searchFilter,
+        setSearchFilter: setSearchFilter
+      })
+    }), jsx(MenuItem, {
       disabled: true,
-      children: t('layermanager-layer')
-    }), extendedLayers.map(function (layerFromServiceLayers, currentIndex) {
+      children: filteredLayers.length ? t('layermanager-layer') : t('layermanager-layer') + " - " + t('search-no-results')
+    }), filteredLayers.map(function (layerFromServiceLayers, currentIndex) {
       return jsxs(MenuItem, {
         disabled: !layerFromServiceLayers.leaf,
         sx: {
           '&.MuiMenuItem-root.Mui-selected': {
             background: 'none',
             color: 'geowebColors.typographyAndIcons.text'
-          }
+          },
+          whiteSpace: 'pre-wrap'
         },
         value: layerFromServiceLayers.name,
         children: [jsx(Checkbox, {
           checked: currentValues.includes(layerFromServiceLayers.name)
-        }), layerFromServiceLayers.title, currentIndex === layers.length && jsx(AlertIcon, {
+        }), jsx(CustomTooltip, {
+          title: layerFromServiceLayers.title,
+          children: jsx(Box, {
+            component: "span",
+            sx: {
+              display: 'block',
+              flex: '1 1 auto',
+              minWidth: 0,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap'
+            },
+            children: jsx(SearchHighlight, {
+              search: searchFilter,
+              text: layerFromServiceLayers.title
+            })
+          })
+        }), currentIndex === layers.length && jsx(AlertIcon, {
           severity: "error"
         })]
       }, layerFromServiceLayers.name);
@@ -5932,6 +6032,7 @@ var _LayerManager = function LayerManager(_ref) {
     "data-size": dataSize,
     "data-testid": "layerManagerWindow",
     dragHandleIcon: settings == null || (_settings$toolbar2 = settings.toolbar) == null || (_settings$toolbar2 = _settings$toolbar2.dragHandle) == null ? void 0 : _settings$toolbar2.icon,
+    fixTopPosition: true,
     headerSize: headerSize,
     isOpen: isOpen,
     minHeight: minSize.height,
@@ -6489,56 +6590,52 @@ var MultiMapMultiDimensionSelectConnect = function MultiMapMultiDimensionSelectC
   });
 };
 
-var AnimationLengthButtonConnect = function AnimationLengthButtonConnect(_ref) {
+var AnimationLengthPanelConnect = function AnimationLengthPanelConnect(_ref) {
   var mapId = _ref.mapId;
   var dispatch = useDispatch();
   var isAnimating = useSelector(function (store) {
     return mapSelectors.isAnimating(store, mapId);
   });
-  var isAnimationLengthAuto = useSelector(function (store) {
-    return mapSelectors.isAnimationLengthAuto(store, mapId);
+  var animationLength = useSelector(function (store) {
+    return mapSelectors.getAnimationLength(store, mapId);
   });
   var _useSelector = useSelector(function (store) {
       return mapSelectors.getAnimationRange(store, mapId);
     }),
     animationStartTime = _useSelector.animationStartTime,
     animationEndTime = _useSelector.animationEndTime;
-  var currentDiffInMinutes = dateUtils.differenceInMinutes(dateUtils.utc(animationEndTime), dateUtils.utc(animationStartTime));
-  var handlechangeAnimationLength = function handlechangeAnimationLength(length) {
-    var newStartTime = dateUtils.dateToIsoString(dateUtils.add(dateUtils.utc(animationEndTime), {
-      minutes: -length
-    }));
-    dispatch(mapActions.setAnimationStartTime({
-      mapId: mapId,
-      animationStartTime: newStartTime || dateUtils.dateToIsoString(dateUtils.utc()),
-      origin: mapEnums.MapActionOrigin.map
-    }));
-    dispatch(mapActions.setAnimationEndTime({
-      mapId: mapId,
-      animationEndTime: animationEndTime || dateUtils.dateToIsoString(dateUtils.utc()),
-      origin: mapEnums.MapActionOrigin.map
-    }));
-  };
-  var toggleAnimationLengthAuto = React.useCallback(function () {
-    dispatch(mapActions.toggleAnimationLengthAuto({
-      mapId: mapId,
-      autoAnimationLength: true,
-      origin: mapEnums.MapActionOrigin.map
-    }));
-  }, [dispatch, mapId]);
-  var autoTimestepLayerId = useSelector(function (store) {
+  var autoTimeStepLayerId = useSelector(function (store) {
     return mapSelectors.getAutoTimeStepLayerId(store, mapId);
   });
+  var autoTimeStepLayerName = useSelector(function (store) {
+    return autoTimeStepLayerId ? layerSelectors.getLayerTitleFromService(store, autoTimeStepLayerId) : undefined;
+  });
   var timeStepFromLayer = useSelector(function (store) {
-    return layerSelectors.getTimeStepForLayerId(store, autoTimestepLayerId);
+    return layerSelectors.getTimeStepForLayerId(store, autoTimeStepLayerId);
   });
-  return jsx(AnimationLengthButton, {
-    animationLength: currentDiffInMinutes || Number(AnimationLength.Hours24),
+  var timeStep = useSelector(function (store) {
+    return mapSelectors.getMapTimeStep(store, mapId);
+  });
+  var changeAnimationLength = function changeAnimationLength(animationLength) {
+    var followsClock = animationLength.mode === AnimationLengthMode.Now;
+    var isUsableRange = isValidNowAnimationLength(animationLength) && isWithinAnimationStepLimit(animationLength, timeStep);
+    var resolvedRange = followsClock && isUsableRange ? resolveNowAnimationRange(animationLength) : undefined;
+    dispatch(mapActions.setAnimationLength(Object.assign({
+      mapId: mapId,
+      animationLength: animationLength
+    }, resolvedRange, {
+      origin: mapEnums.MapActionOrigin.map
+    })));
+  };
+  return jsx(AnimationLengthPanel, {
+    animationEndTime: animationEndTime,
+    animationStartTime: animationStartTime,
+    autoTimeStepLayerName: autoTimeStepLayerName,
     disabled: isAnimating,
-    isAuto: isAnimationLengthAuto,
-    layerHasTimeStep: Boolean(timeStepFromLayer),
-    onChangeAnimationLength: handlechangeAnimationLength,
-    toggleAnimationLengthAuto: toggleAnimationLengthAuto
+    isAutoDisabled: !timeStepFromLayer,
+    timeStep: timeStep,
+    onChange: changeAnimationLength,
+    setting: animationLength != null ? animationLength : exactAnimationLength
   });
 };
 
@@ -6807,42 +6904,31 @@ var _TimeStepButtonConnect = function TimeStepButtonConnect(_ref) {
 };
 
 var POPPER_WIDTH = 440;
-var POPPER_LENGTH = 270;
-var getPopperplacement = function getPopperplacement(buttonElement, mapId) {
+var getOptionsMenuOrientation = function getOptionsMenuOrientation(buttonElement, mapId) {
   var _document$getElementB;
   var button = buttonElement == null ? void 0 : buttonElement.getBoundingClientRect();
   var mapWindow = (_document$getElementB = document.getElementById("mapcontainer_" + mapId)) == null ? void 0 : _document$getElementB.getBoundingClientRect();
-  if (button && mapWindow) {
-    var popperIsOutsideWindowOnLeft = mapWindow.left > button.left - POPPER_WIDTH;
-    var popperIsOutsideWindowOnBottom = button.bottom + POPPER_LENGTH > mapWindow.bottom;
-    var popperIsOutsideWindowOnRight = button.right + POPPER_WIDTH > mapWindow.right;
-    if (!popperIsOutsideWindowOnLeft) {
-      return 'left';
-    }
-    if (!popperIsOutsideWindowOnBottom) {
-      return 'bottom';
-    }
-    if (!popperIsOutsideWindowOnRight) {
-      return 'right';
-    }
-    return 'top';
+  if (!button || !mapWindow) {
+    return 'horizontal';
   }
-  return 'left';
+  var horizontalMenuFitsInsideMap = button.right - POPPER_WIDTH >= mapWindow.left;
+  return horizontalMenuFitsInsideMap ? 'horizontal' : 'vertical';
 };
 var OptionsMenu = function OptionsMenu(_ref) {
   var _ref$isOpen = _ref.isOpen,
     isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
     buttonElement = _ref.buttonElement,
-    popperPlacement = _ref.popperPlacement,
+    orientation = _ref.orientation,
     mapId = _ref.mapId;
   if (!buttonElement) {
     return null;
   }
-  var direction = ['bottom', 'top'].includes(popperPlacement) ? 'column' : 'row';
+  var isVertical = orientation === 'vertical';
   return jsx(Popper, {
     anchorEl: buttonElement,
+    "data-testid": "clockOptionsMenu",
     open: isOpen,
-    placement: popperPlacement,
+    placement: "bottom-end",
     sx: {
       zIndex: 1002
     },
@@ -6853,19 +6939,19 @@ var OptionsMenu = function OptionsMenu(_ref) {
         spacing: 0.5,
         sx: Object.assign({
           padding: '8px'
-        }, direction === 'column' && {
+        }, isVertical && {
           '& button': {
             width: '100%!important'
           }
         }, {
-          flexDirection: direction === 'column' ? 'column' : 'row'
+          flexDirection: isVertical ? 'column' : 'row'
         }),
         children: [jsx(NowButtonConnect, {
           mapId: mapId,
           sourceId: mapId
-        }), jsx(TimeSpanButtonConnect, {
+        }), jsx(AnimationLengthPanelConnect, {
           mapId: mapId
-        }), jsx(AnimationLengthButtonConnect, {
+        }), jsx(TimeSpanButtonConnect, {
           mapId: mapId
         }), jsx(_TimeStepButtonConnect, {
           mapId: mapId
@@ -6893,9 +6979,9 @@ var ClockConnect = function ClockConnect(_ref) {
   var _useState = useState(null),
     popperButtonElement = _useState[0],
     setPopperButtonElement = _useState[1];
-  var _useState2 = useState('bottom'),
-    popperPlacement = _useState2[0],
-    setPopperPlacement = _useState2[1];
+  var _useState2 = useState('horizontal'),
+    optionsMenuOrientation = _useState2[0],
+    setOptionsMenuOrientation = _useState2[1];
   var selectedTime = useSelector(function (store) {
     return mapSelectors.getSelectedTime(store, mapId);
   });
@@ -6912,9 +6998,8 @@ var ClockConnect = function ClockConnect(_ref) {
     return mapSelectors.getIsClockOptionsMenuVisible(store, mapId);
   });
   useEffect(function () {
-    // Update optionsMenu placement when visiblity or clock position/size changes
     if (popperButtonElement) {
-      setPopperPlacement(getPopperplacement(popperButtonElement, mapId));
+      setOptionsMenuOrientation(getOptionsMenuOrientation(popperButtonElement, mapId));
     }
   }, [mapId, isOptionsMenuVisible, clockPosition, clockSize, popperButtonElement]);
   var onToggleClock = function onToggleClock(isClockVisible) {
@@ -6961,7 +7046,7 @@ var ClockConnect = function ClockConnect(_ref) {
       buttonElement: popperButtonElement,
       isOpen: isOptionsMenuVisible,
       mapId: mapId,
-      popperPlacement: popperPlacement
+      orientation: optionsMenuOrientation
     })]
   });
 };
@@ -6981,15 +7066,16 @@ var LegendConnectComponent = function LegendConnectComponent(_ref) {
   var mapIdStore = useSelector(function (store) {
     return uiSelectors.getDialogMapId(store, legendType);
   });
-  var _React$useState = React.useState(initialMapId),
-    mapId = _React$useState[0],
-    setMapId = _React$useState[1];
-  React.useEffect(function () {
-    setMapId(mapIdStore);
-  }, [mapIdStore]);
+  var mapId = initialMapId || mapIdStore;
   var mapLayers = useSelector(function (store) {
     return mapSelectors.getMapLayers(store, mapId);
   });
+  var legendPosition = useSelector(function (store) {
+    return mapSelectors.getLegendPosition(store, mapId);
+  });
+  var legendSize = useSelector(function (store) {
+    return mapSelectors.getLegendSize(store, mapId);
+  });
   var _useSetupDialog = useSetupDialog(legendType, source),
     dialogOrder = _useSetupDialog.dialogOrder,
     isDialogOpen = _useSetupDialog.isDialogOpen,
@@ -7013,16 +7099,42 @@ var LegendConnectComponent = function LegendConnectComponent(_ref) {
       origin: mapEnums.MapActionOrigin.map
     }));
   };
+  var onLegendDialogMove = React.useCallback(function (position, size) {
+    dispatch(mapActions.setLegendPositionSize(Object.assign({
+      mapId: mapId,
+      position: {
+        x: position.x,
+        y: position.y
+      }
+    }, typeof size.width === 'number' && typeof size.height === 'number' && {
+      size: {
+        width: size.width,
+        height: size.height
+      }
+    }, {
+      origin: mapEnums.MapActionOrigin.map
+    })));
+  }, [dispatch, mapId]);
   return jsx(LegendDialog, {
     isOpen: isDialogOpen,
     layers: mapLayers,
     mapId: mapId,
     onClose: onCloseDialog,
+    onDragEnd: onLegendDialogMove,
     onMouseDown: setDialogOrder,
     onToggleLayerLegendVisibility: onToggleLayerLegendVisibility,
     order: dialogOrder,
     showMapId: showMapId,
-    source: uiSource
+    source: uiSource,
+    startDraggablePosition: legendPosition != null ? legendPosition : {
+      x: 0,
+      y: 0
+    },
+    startPosition: {
+      right: 20,
+      top: 50
+    },
+    startSize: legendSize
   });
 };
 /**
@@ -8221,9 +8333,91 @@ var OlMapViewLayerConnect = function OlMapViewLayerConnect(layerProps) {
   }), "layer-" + (layer == null ? void 0 : layer.id));
 };
 
-var getCurrentSelectedIndices = function getCurrentSelectedIndices(_ref) {
-  var geojson = _ref.geojson,
-    selectedFeatureIds = _ref.selectedFeatureIds;
+/** Escape drops a multi selection only. A sole selection is kept, matching the
+ * plain click behaviour, and edit mode keeps its own Escape handling. */
+var shouldDeselectAllOnEscape = function shouldDeselectAllOnEscape(selectedFeatureCount, isInEditMode, hasRegisteredDrawTool) {
+  return hasRegisteredDrawTool && !isInEditMode && selectedFeatureCount > 1;
+};
+var useDeselectAllOnEscape = function useDeselectAllOnEscape(_ref) {
+  var selectedFeatureCount = _ref.selectedFeatureCount,
+    isInEditMode = _ref.isInEditMode,
+    hasRegisteredDrawTool = _ref.hasRegisteredDrawTool,
+    onDeselectAll = _ref.onDeselectAll;
+  React.useEffect(function () {
+    if (!shouldDeselectAllOnEscape(selectedFeatureCount, isInEditMode, hasRegisteredDrawTool)) {
+      return undefined;
+    }
+    var onKeyDown = function onKeyDown(event) {
+      if (event.key !== 'Escape' || document.activeElement !== document.body) {
+        return;
+      }
+      onDeselectAll();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return function () {
+      return window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [selectedFeatureCount, isInEditMode, hasRegisteredDrawTool, onDeselectAll]);
+};
+var shouldClearSelectionOnEmptyClick = function shouldClearSelectionOnEmptyClick(activeDrawToolId, hasRegisteredDrawTool) {
+  return !activeDrawToolId && hasRegisteredDrawTool;
+};
+var isSketchInProgress = function isSketchInProgress(isInEditMode, drawMode, activeFeature) {
+  if (!isInEditMode) {
+    return false;
+  }
+  if (drawMode === DRAWMODE.SPLIT) {
+    return true;
+  }
+  return Boolean(activeFeature && isGeoJSONGeometryEmpty(activeFeature));
+};
+/** Soundings and time series set their own highlight, so they must stay out of this. */
+var usesFeatureIdSelection = function usesFeatureIdSelection(isSelectable, hasRegisteredDrawTool) {
+  return Boolean(isSelectable) || hasRegisteredDrawTool;
+};
+var getSelectionProperties = function getSelectionProperties(usesIdSelection, selectedFeatureIdSet, featureId) {
+  if (!usesIdSelection) {
+    return undefined;
+  }
+  var isSelected = featureId !== undefined && selectedFeatureIdSet.has(featureId);
+  return {
+    isSelected: isSelected,
+    highlightSelectedFeature: isSelected
+  };
+};
+var getClickedFeatureKey = getOlFeatureKey;
+var findFeatureIndexByKey = function findFeatureIndexByKey(geojson, feature) {
+  var key = getClickedFeatureKey(feature);
+  // -1 when the feature has no key, so an unidentifiable click never matches feature 0
+  if (key === undefined || !geojson) {
+    return -1;
+  }
+  return geojson.features.findIndex(function (feat) {
+    return layerUtils.getFeatureSelectionKey(feat) === key;
+  });
+};
+var getMovableSelectedFeatureIds = function getMovableSelectedFeatureIds(geojson, selectedFeatureIds) {
+  if (!(geojson != null && geojson.features.length) || !(selectedFeatureIds != null && selectedFeatureIds.length)) {
+    return [];
+  }
+  var selectedFeatureIdSet = new Set(selectedFeatureIds);
+  return geojson.features.reduce(function (featureIds, feature) {
+    var _feature$properties;
+    var featureKey = layerUtils.getFeatureSelectionKey(feature);
+    if (featureKey && selectedFeatureIdSet.has(featureKey) && ((_feature$properties = feature.properties) == null ? void 0 : _feature$properties.isReadonly) !== true) {
+      featureIds.push(featureKey);
+    }
+    return featureIds;
+  }, []);
+};
+/** Moving a set of shapes belongs to the drawing tool only: selection-only
+ * reference layers stay selectable but must never be dragged. */
+var shouldEnableMultiShapeMove = function shouldEnableMultiShapeMove(hasRegisteredDrawTool, isInEditMode, selectedFeatureCount, movableFeatureCount) {
+  return hasRegisteredDrawTool && !isInEditMode && selectedFeatureCount > 1 && movableFeatureCount > 0;
+};
+var getCurrentSelectedIndices = function getCurrentSelectedIndices(_ref2) {
+  var geojson = _ref2.geojson,
+    selectedFeatureIds = _ref2.selectedFeatureIds;
   if (!(geojson != null && geojson.features.length) || !(selectedFeatureIds != null && selectedFeatureIds.length)) {
     return [];
   }
@@ -8236,46 +8430,12 @@ var getCurrentSelectedIndices = function getCurrentSelectedIndices(_ref) {
     return indices;
   }, []);
 };
-var calculateNewSelection = function calculateNewSelection(currentSelectedIndices, clickedIndex, isShiftClick) {
-  if (isShiftClick) {
-    if (currentSelectedIndices.includes(clickedIndex)) {
-      return currentSelectedIndices.filter(function (i) {
-        return i !== clickedIndex;
-      });
-    }
-    return [].concat(currentSelectedIndices, [clickedIndex]);
-  }
-  var isSoleSelection = currentSelectedIndices.length === 1 && currentSelectedIndices[0] === clickedIndex;
-  return isSoleSelection ? [] : [clickedIndex];
-};
-var getAffectedIndices = function getAffectedIndices(oldSelection, newSelection) {
-  var allIndices = new Set([].concat(oldSelection, newSelection));
-  return Array.from(allIndices).filter(function (idx) {
-    return oldSelection.includes(idx) !== newSelection.includes(idx);
-  });
-};
-var shouldEnterEditMode = function shouldEnterEditMode(isReadonly, isShiftClick, newSelectionCount) {
-  return !isReadonly && !isShiftClick && newSelectionCount === 1;
-};
-var updateFeatureSelectionProperties = function updateFeatureSelectionProperties(dispatch, layerId, affectedIndices, newSelection) {
-  affectedIndices.forEach(function (idx) {
-    var isNowSelected = newSelection.includes(idx);
-    dispatch(layerActions.updateFeatureProperties({
-      layerId: layerId,
-      properties: {
-        highlightSelectedFeature: isNowSelected,
-        isSelected: isNowSelected
-      },
-      targetFeatureIndex: idx
-    }));
-  });
-};
-var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2) {
-  var layer = _ref2.layer,
-    layerId = _ref2.layerId,
-    zIndex = _ref2.zIndex,
-    style = _ref2.style,
-    hoverSelect = _ref2.hoverSelect;
+var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref3) {
+  var layer = _ref3.layer,
+    layerId = _ref3.layerId,
+    zIndex = _ref3.zIndex,
+    style = _ref3.style,
+    hoverSelect = _ref3.hoverSelect;
   var store = useStore();
   var dispatch = useDispatch();
   var activeDrawToolId = useSelector(drawingToolSelectors.getActiveDrawToolId);
@@ -8297,7 +8457,7 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2
     return drawingToolSelectors.getGeoJSONIntersectionBoundsLayerId(store, activeDrawToolId);
   });
   var activeFeatureIndex = React.useMemo(function () {
-    var _layer$geojson, _currentSelectedFeatu, _ref3;
+    var _layer$geojson, _currentSelectedFeatu, _ref4;
     var currentActiveFeatureIndex = layerUtils.getSelectedFeatureIndexByIds(layer.geojson, layer.selectedFeatureIds);
     if (!shouldAllowMultipleShapes || !(activeDrawMode != null && activeDrawMode.selectionType) || !((_layer$geojson = layer.geojson) != null && _layer$geojson.features.length)) {
       return currentActiveFeatureIndex != null ? currentActiveFeatureIndex : 0;
@@ -8308,9 +8468,9 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2
     }
     var matchingFeatureIndex;
     for (var index = layer.geojson.features.length - 1; index >= 0; index -= 1) {
-      var _feature$properties;
+      var _feature$properties2;
       var feature = layer.geojson.features[index];
-      if (((_feature$properties = feature.properties) == null ? void 0 : _feature$properties.selectionType) === activeDrawMode.selectionType) {
+      if (((_feature$properties2 = feature.properties) == null ? void 0 : _feature$properties2.selectionType) === activeDrawMode.selectionType) {
         if (isGeoJSONGeometryEmpty(feature)) {
           return index;
         }
@@ -8319,32 +8479,55 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2
         }
       }
     }
-    return (_ref3 = matchingFeatureIndex != null ? matchingFeatureIndex : currentActiveFeatureIndex) != null ? _ref3 : 0;
+    return (_ref4 = matchingFeatureIndex != null ? matchingFeatureIndex : currentActiveFeatureIndex) != null ? _ref4 : 0;
   }, [activeDrawMode == null ? void 0 : activeDrawMode.selectionType, layer.geojson, layer.selectedFeatureIds, shouldAllowMultipleShapes]);
+  var sketchInProgress = React.useMemo(function () {
+    var _layer$geojson2;
+    return isSketchInProgress(layer.isInEditMode, layer.drawMode, (_layer$geojson2 = layer.geojson) == null ? void 0 : _layer$geojson2.features[activeFeatureIndex]);
+  }, [layer.isInEditMode, layer.drawMode, layer.geojson, activeFeatureIndex]);
+  var usesIdSelection = usesFeatureIdSelection(layer.isSelectable, hasRegisteredDrawTool);
   var displayGeojson = React.useMemo(function () {
-    var _layer$hoveredFeature;
+    var _layer$hoveredFeature, _layer$selectedFeatur;
     if (!layer.geojson) {
       return undefined;
     }
     var hoveredFeatureIds = new Set((_layer$hoveredFeature = layer.hoveredFeatureIds) != null ? _layer$hoveredFeature : []);
+    var selectedFeatureIdSet = new Set((_layer$selectedFeatur = layer.selectedFeatureIds) != null ? _layer$selectedFeatur : []);
     return Object.assign({}, layer.geojson, {
       features: layer.geojson.features.map(function (feature) {
-        var _feature$properties2;
+        var _feature$properties3;
         var featureId = feature.id !== undefined ? String(feature.id) : undefined;
-        var originalId = typeof ((_feature$properties2 = feature.properties) == null ? void 0 : _feature$properties2.originalId) === 'string' ? feature.properties.originalId : layer.originalId;
+        var originalId = typeof ((_feature$properties3 = feature.properties) == null ? void 0 : _feature$properties3.originalId) === 'string' ? feature.properties.originalId : layer.originalId;
+        var selectionProperties = getSelectionProperties(usesIdSelection, selectedFeatureIdSet, featureId);
         return Object.assign({}, feature, {
           properties: Object.assign({}, feature.properties, {
             hover: featureId !== undefined && hoveredFeatureIds.has(featureId) || typeof originalId === 'string' && hoveredFeatureIds.has(originalId)
-          })
+          }, selectionProperties)
         });
       })
     });
-  }, [layer.geojson, layer.hoveredFeatureIds, layer.originalId]);
+  }, [layer.geojson, layer.hoveredFeatureIds, layer.originalId, layer.selectedFeatureIds, usesIdSelection]);
+  var clearSelection = React.useCallback(function () {
+    if (!shouldClearSelectionOnEmptyClick(activeDrawToolId, hasRegisteredDrawTool)) {
+      return;
+    }
+    dispatch(layerActions.setSelectedFeatures({
+      layerId: layerId,
+      selectedFeatureIds: []
+    }));
+    dispatch(layerActions.toggleFeatureMode({
+      layerId: layerId,
+      isInEditMode: false,
+      drawMode: ''
+    }));
+  }, [activeDrawToolId, hasRegisteredDrawTool, dispatch, layerId]);
   var onFeatureClick = React.useCallback(function (feature, isShiftClick) {
     var _clickedFeature$prope;
-    var clickedIndex = layer.geojson.features.findIndex(function (feat) {
-      return feature[0] && feat.id === feature[0].getId();
-    });
+    if (!feature.length) {
+      clearSelection();
+      return;
+    }
+    var clickedIndex = findFeatureIndexByKey(layer.geojson, feature[0]);
     if (clickedIndex === -1) {
       return;
     }
@@ -8354,10 +8537,9 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2
       geojson: layer.geojson,
       selectedFeatureIds: layer.selectedFeatureIds
     });
-    // When a draw tool is registered for this layer, keep a sole selected
-    // feature selected on normal click. Deselecting the active edit target
-    // causes edit mode to collapse immediately; clearing selection should
-    // instead happen via empty-space click or multi-select interactions.
+    // Drawing layers only: deselecting the active edit target collapses edit mode,
+    // so a plain click on the sole selection keeps it. Clearing happens through
+    // empty space or shift+click instead.
     var shouldPreventDeselect = hasRegisteredDrawTool && !isReadonly && !isShiftClick && currentSelection.length === 1 && currentSelection[0] === clickedIndex;
     var newSelection = shouldPreventDeselect ? [clickedIndex] : calculateNewSelection(currentSelection, clickedIndex, isShiftClick != null ? isShiftClick : false);
     var nextSelectedFeatureIds = newSelection.map(function (index) {
@@ -8369,25 +8551,13 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2
       layerId: layerId,
       selectedFeatureIds: nextSelectedFeatureIds
     }));
-    if (newSelection.length === 0) {
+    if (newSelection.length === 0 || shouldExitEditModeForMultiSelect(newSelection.length)) {
       dispatch(layerActions.toggleFeatureMode({
         layerId: layerId,
         isInEditMode: false,
         drawMode: ''
       }));
     }
-    var affectedIndices = getAffectedIndices(currentSelection, newSelection);
-    affectedIndices.forEach(function (idx) {
-      var isNowSelected = newSelection.includes(idx);
-      dispatch(layerActions.updateFeatureProperties({
-        layerId: layerId,
-        properties: {
-          highlightSelectedFeature: isNowSelected,
-          isSelected: isNowSelected
-        },
-        targetFeatureIndex: idx
-      }));
-    });
     if (shouldEnterEditMode(isReadonly, isShiftClick != null ? isShiftClick : false, newSelection.length)) {
       dispatch(layerActions.toggleFeatureMode({
         layerId: layerId,
@@ -8395,27 +8565,15 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2
         drawMode: ''
       }));
     }
-  }, [hasRegisteredDrawTool, dispatch, layer.geojson, layer.selectedFeatureIds, layerId]);
-  var onNoFeatureClick = React.useCallback(function () {
-    if (activeDrawToolId) {
-      // do not disable edit mode when a drawing tool is active
-      return;
-    }
-    dispatch(layerActions.toggleFeatureMode({
-      layerId: layerId,
-      isInEditMode: false,
-      drawMode: ''
-    }));
-  }, [activeDrawToolId, dispatch, layerId]);
+  }, [hasRegisteredDrawTool, dispatch, layer.geojson, layer.selectedFeatureIds, layerId, clearSelection]);
+  var onNoFeatureClick = clearSelection;
   var onBoxSelect = React.useCallback(function (features, addToSelection) {
-    var _layer$geojson2;
-    if (!((_layer$geojson2 = layer.geojson) != null && _layer$geojson2.features.length)) {
+    var _layer$geojson3;
+    if (!((_layer$geojson3 = layer.geojson) != null && _layer$geojson3.features.length)) {
       return;
     }
     var boxSelectedIndices = features.map(function (feature) {
-      return layer.geojson.features.findIndex(function (feat) {
-        return feat.id === feature.getId();
-      });
+      return findFeatureIndexByKey(layer.geojson, feature);
     }).filter(function (idx) {
       return idx !== -1;
     });
@@ -8426,7 +8584,7 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2
       geojson: layer.geojson,
       selectedFeatureIds: layer.selectedFeatureIds
     });
-    var newSelection = addToSelection ? Array.from(new Set([].concat(previousSelection, boxSelectedIndices))) : boxSelectedIndices;
+    var newSelection = calculateBoxSelection(previousSelection, boxSelectedIndices, addToSelection);
     var nextSelectedFeatureIds = newSelection.map(function (index) {
       return layerUtils.getFeatureSelectionKey(layer.geojson.features[index]);
     }).filter(function (featureId) {
@@ -8436,21 +8594,66 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2
       layerId: layerId,
       selectedFeatureIds: nextSelectedFeatureIds
     }));
-    var affectedIndices = getAffectedIndices(previousSelection, newSelection);
-    updateFeatureSelectionProperties(dispatch, layerId, affectedIndices, newSelection);
+    if (shouldExitEditModeForMultiSelect(newSelection.length)) {
+      dispatch(layerActions.toggleFeatureMode({
+        layerId: layerId,
+        isInEditMode: false,
+        drawMode: ''
+      }));
+    }
   }, [dispatch, layer.geojson, layer.selectedFeatureIds, layerId]);
   var boxSelectConfig = React.useMemo(function () {
-    return layer.isSelectable && !layer.isInEditMode ? {
+    return usesIdSelection && !layer.isInEditMode ? {
       onBoxSelect: onBoxSelect,
       active: true
     } : undefined;
-  }, [layer.isSelectable, layer.isInEditMode, onBoxSelect]);
-  var onViewOnlyFeatureClick = React.useCallback(function (feature) {
-    if (activeDrawToolId) {
+  }, [usesIdSelection, layer.isInEditMode, onBoxSelect]);
+  // Mutually exclusive with boxSelectConfig, so only one DragBox is ever live.
+  var editModeBoxSelectConfig = React.useMemo(function () {
+    return usesIdSelection && layer.isInEditMode ? {
+      onBoxSelect: onBoxSelect,
+      active: true
+    } : undefined;
+  }, [usesIdSelection, layer.isInEditMode, onBoxSelect]);
+  var selectedFeatureIndices = React.useMemo(function () {
+    return getCurrentSelectedIndices({
+      geojson: layer.geojson,
+      selectedFeatureIds: layer.selectedFeatureIds
+    });
+  }, [layer.geojson, layer.selectedFeatureIds]);
+  useDeselectAllOnEscape({
+    selectedFeatureCount: selectedFeatureIndices.length,
+    isInEditMode: layer.isInEditMode,
+    hasRegisteredDrawTool: hasRegisteredDrawTool,
+    onDeselectAll: clearSelection
+  });
+  var movableSelectedFeatureIds = React.useMemo(function () {
+    return getMovableSelectedFeatureIds(layer.geojson, layer.selectedFeatureIds);
+  }, [layer.geojson, layer.selectedFeatureIds]);
+  var onMoveEnd = React.useCallback(function (movedFeatures) {
+    if (!layerId || !movedFeatures.length) {
       return;
     }
-    onFeatureClick(feature);
-  }, [activeDrawToolId, onFeatureClick]);
+    dispatch(layerActions.moveFeatures({
+      layerId: layerId,
+      movedFeatures: movedFeatures,
+      geoJSONIntersectionLayerId: geoJSONIntersectionLayerId,
+      geoJSONIntersectionBoundsLayerId: geoJSONIntersectionBoundsLayerId
+    }));
+  }, [dispatch, layerId, geoJSONIntersectionLayerId, geoJSONIntersectionBoundsLayerId]);
+  var moveFeaturesConfig = React.useMemo(function () {
+    var _layer$selectedFeatur2, _layer$selectedFeatur3;
+    return shouldEnableMultiShapeMove(hasRegisteredDrawTool, layer.isInEditMode, (_layer$selectedFeatur2 = (_layer$selectedFeatur3 = layer.selectedFeatureIds) == null ? void 0 : _layer$selectedFeatur3.length) != null ? _layer$selectedFeatur2 : 0, movableSelectedFeatureIds.length) ? {
+      onMoveEnd: onMoveEnd,
+      active: true
+    } : undefined;
+  }, [hasRegisteredDrawTool, layer.isInEditMode, layer.selectedFeatureIds, movableSelectedFeatureIds, onMoveEnd]);
+  var onViewOnlyFeatureClick = React.useCallback(function (feature, isShiftClick) {
+    if (sketchInProgress) {
+      return;
+    }
+    onFeatureClick(feature, isShiftClick);
+  }, [sketchInProgress, onFeatureClick]);
   var updateFeature = React.useCallback(function (geojson, reason) {
     if (!layerId) {
       window.console.error('updateFeature without layerId');
@@ -8481,18 +8684,20 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2
   return jsxs(Fragment, {
     children: [jsx(OpenLayersFeatureLayer, {
       boxSelect: boxSelectConfig,
-      clickOnFeature: layer.isSelectable ? {
+      clickOnFeature: usesIdSelection && !layer.isInEditMode ? {
         onClick: onFeatureClick,
         hitTolerance: 5
       } : undefined,
       featureCollection: !layer.isInEditMode ? displayGeojson : undefined,
       hoverSelect: hoverSelect,
       layerId: layerId,
+      moveFeatures: moveFeaturesConfig,
       opacity: layer.opacity,
       style: style,
       visible: layer.enabled,
       zIndex: zIndex
     }), jsx(OpenLayersMapDraw, {
+      boxSelect: editModeBoxSelectConfig,
       drawMode: layer.drawMode,
       exitDrawModeCallback: exitFeatureDrawMode,
       geojson: layer.geojson,
@@ -8500,6 +8705,7 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2
       onNoFeatureClick: onNoFeatureClick,
       onViewOnlyFeatureClick: onViewOnlyFeatureClick,
       selectedFeatureIndex: activeFeatureIndex,
+      selectedFeatureIndices: selectedFeatureIndices,
       updateGeojson: updateFeature,
       viewOnlyStyle: style
     })]
@@ -8523,6 +8729,14 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2
  * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+var getStoredViewObjectForMap = function getStoredViewObjectForMap(mapId, store) {
+  var syncGroupState = syncGroupsSelectors.getSynchronizationGroupState(store.getState());
+  var thisAreaSyncGroupId = syncGroupState.groups.allIds.find(function (id) {
+    var group = syncGroupState.groups.byId[id];
+    return group.type === syncConstants.SYNCGROUPS_TYPE_SETBBOX && group.targets.allIds.includes(mapId);
+  });
+  return thisAreaSyncGroupId ? getViewObjectForSyncGroup(thisAreaSyncGroupId) : getViewObjectForMapId(mapId);
+};
 var useGetOpenLayersView = function useGetOpenLayersView(mapId, store) {
   var _useState = useState(),
     view = _useState[0],
@@ -8530,17 +8744,9 @@ var useGetOpenLayersView = function useGetOpenLayersView(mapId, store) {
   var _useState2 = useState(),
     name = _useState2[0],
     setName = _useState2[1];
-  var syncGroupState = syncGroupsSelectors.getSynchronizationGroupState(store.getState());
-  var syncGroupView = useMemo(function () {
-    var thisAreaSyncGroupId = syncGroupState.groups.allIds.find(function (id) {
-      var group = syncGroupState.groups.byId[id];
-      return group.type === syncConstants.SYNCGROUPS_TYPE_SETBBOX && group.targets.allIds.includes(mapId);
-    });
-    return thisAreaSyncGroupId ? getViewObjectForSyncGroup(thisAreaSyncGroupId) : null;
-  }, [mapId, syncGroupState.groups]);
+  var storedView = getStoredViewObjectForMap(mapId, store);
   useEffect(function () {
     var mapBbox = mapSelectors.getBbox(store.getState(), mapId);
-    var storedView = syncGroupView || getViewObjectForMapId(mapId);
     if (storedView.view.getCenter() === undefined && mapBbox.left !== undefined) {
       storedView.view.fit([mapBbox.left, mapBbox.bottom, mapBbox.right, mapBbox.top]);
     }
@@ -8553,7 +8759,7 @@ var useGetOpenLayersView = function useGetOpenLayersView(mapId, store) {
     return function () {
       unByKey(eventKey);
     };
-  }, [syncGroupView, mapId, store]);
+  }, [storedView, mapId, store]);
   return {
     view: view,
     name: name
@@ -8923,6 +9129,7 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
   return jsx(ToolContainerDraggable, {
     bounds: "parent",
     "data-testid": "moveable-getfeatureinfo",
+    fixTopPosition: true,
     initialMaxHeight: 440,
     isOpen: isOpen,
     minWidth: 100,
@@ -9201,6 +9408,60 @@ var MapOptionsButtonConnect = function MapOptionsButtonConnect(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2026 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2026 - Finnish Meteorological Institute (FMI)
+ * Copyright 2026 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var InitialZoomToLayerConnect = function InitialZoomToLayerConnect(_ref) {
+  var mapId = _ref.mapId,
+    onHomeExtentResolved = _ref.onHomeExtentResolved;
+  var initialZoomToLayerId = useSelector(function (store) {
+    return mapSelectors.getInitialZoomToLayerId(store, mapId);
+  });
+  var layer = useSelector(function (store) {
+    return initialZoomToLayerId ? layerSelectors.getLayerById(store, initialZoomToLayerId) : undefined;
+  });
+  var store = useStore();
+  var view = useViewFromLayer(layer);
+  var _useGetWMLayerInstanc = useGetWMLayerInstance(layer),
+    wmLayer = _useGetWMLayerInstanc.wmLayer;
+  var hasResolvedInitialLayerView = React.useRef(false);
+  React.useEffect(function () {
+    var storedView = getStoredViewObjectForMap(mapId, store);
+    if (storedView.view !== view) {
+      storedView.setView(view);
+    }
+  }, [mapId, store, view]);
+  React.useEffect(function () {
+    if (hasResolvedInitialLayerView.current || !wmLayer) {
+      return;
+    }
+    var extent = getLayerExtentForProjection(wmLayer, view.getProjection().getCode());
+    if (extent) {
+      onHomeExtentResolved([].concat(extent));
+    }
+    hasResolvedInitialLayerView.current = true;
+    store.dispatch(mapActions.setPendingInitialZoomToLayer({
+      mapId: mapId,
+      layerId: undefined
+    }));
+  }, [mapId, onHomeExtentResolved, store, view, wmLayer]);
+  return null;
+};
+
 /**
  * Connected component used to display the map and selected layers.
  * Includes options to disable the map controls and legend.
@@ -9231,6 +9492,9 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
   var _React$useState = React.useState(),
     hoverLinkedFeature = _React$useState[0],
     setHoverLinkedFeature = _React$useState[1];
+  var _React$useState2 = React.useState(undefined),
+    derivedHomeExtent = _React$useState2[0],
+    setDerivedHomeExtent = _React$useState2[1];
   var linkedPanelIds = useSelector(function (store) {
     return genericSelectors.selectLinkedPanelIdsForMap(store, mapId);
   });
@@ -9659,11 +9923,11 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
     checkIfDataOutdated();
   }, [checkIfDataOutdated]);
   useMapViewLoadingIndicator(mapId, mapLayerIds);
-  var _React$useState2 = React.useState({
+  var _React$useState3 = React.useState({
       debugMode: false
     }),
-    mapMode = _React$useState2[0],
-    setMapMode = _React$useState2[1];
+    mapMode = _React$useState3[0],
+    setMapMode = _React$useState3[1];
   React.useEffect(function () {
     var handleKeyPress = function handleKeyPress(event) {
       if (event.isTrusted && document.activeElement === document.body) {
@@ -9681,9 +9945,12 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
       document.removeEventListener('keyup', handleKeyPress);
     };
   }, [mapMode]);
+  var handleInitialHomeExtentResolved = React.useCallback(function (extent) {
+    setDerivedHomeExtent(extent);
+  }, []);
   var homeExtent = React.useMemo(function () {
-    return initialBbox && [initialBbox.left, initialBbox.bottom, initialBbox.right, initialBbox.top];
-  }, [initialBbox]);
+    return initialBbox ? [initialBbox.left, initialBbox.bottom, initialBbox.right, initialBbox.top] : derivedHomeExtent;
+  }, [derivedHomeExtent, initialBbox]);
   var dialogType = uiTypes.DialogTypes.Search + "-" + mapId;
   var _useSetupDialog = useSetupDialog(dialogType),
     isSearchDialogOpen = _useSetupDialog.isDialogOpen;
@@ -9727,9 +9994,12 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
       features: linkedFeatureCollectionsWithHover.features
     };
   }, [linkedFeatureCollectionsWithHover]);
-  return jsx(TimeContext.Provider, {
+  return jsxs(TimeContext.Provider, {
     value: prefetchTimespan,
-    children: jsxs(OpenLayersMapView, {
+    children: [jsx(InitialZoomToLayerConnect, {
+      mapId: mapId,
+      onHomeExtentResolved: handleInitialHomeExtentResolved
+    }), jsxs(OpenLayersMapView, {
       holdShiftToScroll: holdShiftToScroll,
       isFocused: isActiveWindowId,
       isMouseWheelZoomEnabled: !isTimeScrollingEnabled,
@@ -9821,7 +10091,7 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
       }), !!displayTimeInMap && jsx(ClockConnect, {
         mapId: mapId
       }), children]
-    })
+    })]
   });
 };
 
@@ -9837,7 +10107,7 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
   var mapId = _ref.mapId,
     enableKeyboardShortcut = _ref.enableKeyboardShortcut;
   return jsx(OptionsMenuButton, {
-    animationLengthBtn: jsx(AnimationLengthButtonConnect, {
+    animationLengthBtn: jsx(AnimationLengthPanelConnect, {
       mapId: mapId
     }),
     enableKeyboardShortcut: enableKeyboardShortcut,
@@ -10128,6 +10398,8 @@ var calculateNewAnimationTimeBounds = function calculateNewAnimationTimeBounds(n
   };
 };
 
+/** Below dialogs, so their resize handles stay hoverable over the slider. */
+var TIME_SLIDER_Z_INDEX = 60;
 var useUpdateTimestep = function useUpdateTimestep(mapId) {
   var autoTimeStepLayerId = useSelector(function (store) {
     return mapSelectors.getAutoTimeStepLayerId(store, mapId);
@@ -10670,7 +10942,7 @@ var _ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
           position: 'absolute',
           left: '0px',
           bottom: '0px',
-          zIndex: 1000,
+          zIndex: TIME_SLIDER_Z_INDEX,
           width: '100%'
         },
         children: jsx(TimeSliderConnect, {
@@ -10766,7 +11038,7 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
         position: 'absolute',
         left: '0px',
         bottom: '0px',
-        zIndex: 1000,
+        zIndex: TIME_SLIDER_Z_INDEX,
         width: '100%'
       },
       children: !!showTimeSlider && jsx(TimeSliderConnect, {
@@ -12137,4 +12409,4 @@ var storyUtils = /*#__PURE__*/Object.freeze({
   useDefaultMapSettings: useDefaultMapSettings
 });
 
-export { CORE_NAMESPACE, _ConfigurableMapConnect as ConfigurableMapConnect, CoreI18nProvider, CoreStoreProvider, CoreThemeProvider, CoreThemeStoreProvider, DemoWrapper, DemoWrapperConnect, HarmonieTempAndPrecipPreset, LanguageSelect, LayerInfoButtonConnect, LayerInfoDialogConnect, _LayerManager as LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, LoadingIndicatorProgressBar, LocationSearch, LocationSearchConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, OlMapViewConnect, RouterWrapperConnect, SearchControlButtonConnect, SelectedFeaturesDialogConnect, SyncGroupViewerConnect, TimeSliderConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, getCenterOfLinkedFeature, getIsOutdated, getLanguageFromLocalStorage, getRenderedDimensions, languageLocalStorageKey, makeLayerInfoPayload, makePrefetchTimeSpan, saveLanguageToLocalStorage, storyUtils, testLayers, useFetchServices, useFitAndHighlightWarningFeature, useGetOpenLayersView, useLocationDetail, useLocationList, usePrefetchTimeSpan, useUpdateTimeSpan, useUpdateTimestep };
+export { CORE_NAMESPACE, _ConfigurableMapConnect as ConfigurableMapConnect, CoreI18nProvider, CoreStoreProvider, CoreThemeProvider, CoreThemeStoreProvider, DemoWrapper, DemoWrapperConnect, HarmonieTempAndPrecipPreset, LanguageSelect, LayerInfoButtonConnect, LayerInfoDialogConnect, _LayerManager as LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, LoadingIndicatorProgressBar, LocationSearch, LocationSearchConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, OlMapViewConnect, RouterWrapperConnect, SearchControlButtonConnect, SelectedFeaturesDialogConnect, SyncGroupViewerConnect, TIME_SLIDER_Z_INDEX, TimeSliderConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, getCenterOfLinkedFeature, getCurrentSelectedIndices, getIsOutdated, getLanguageFromLocalStorage, getRenderedDimensions, getStoredViewObjectForMap, languageLocalStorageKey, makeLayerInfoPayload, makePrefetchTimeSpan, saveLanguageToLocalStorage, storyUtils, testLayers, useFetchServices, useFitAndHighlightWarningFeature, useGetOpenLayersView, useLocationDetail, useLocationList, usePrefetchTimeSpan, useUpdateTimeSpan, useUpdateTimestep };