@opengeoweb/core 19.6.1 → 20.0.0

package/dist/index.esm.js

@@ -1,28 +1,29 @@
 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, SearchField, SearchHighlight, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, PROJECTION, calculateStartSize, useWheelStopPropagation, ToolContainerDraggable, dateUtils, sessionStorageProvider, useDebounce, usePrevious } from '@opengeoweb/shared';
-import { webmapUtils, queryWMSLayersTree, invalidateWMSGetCapabilities, LayerType, WMJSDimension, WMDefaultStyleName, WMJSMAP_LONLAT_EPSGCODE, queryWMSServiceInfo, queryWMSLayers, getWMSServiceId, handleDateUtilsISOString, generateLayerId, 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, useDebounce, dateUtils, sessionStorageProvider, 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, AnimationLengthMode, isValidAnimationLength, isWithinAnimationStepLimit, isAnchoredMode, settingRange, AnimationLengthPanel, exactAnimationLengthFrom, 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';
-import { handleResponse } from '@opengeoweb/api';
+import { handleResponse, authFetch } from '@opengeoweb/api';
 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';
@@ -2659,7 +2660,7 @@ var DimensionSelectValue = function DimensionSelectValue(_ref) {
     skipLocalStyling = _ref.skipLocalStyling;
   var _useCoreTranslation = useCoreTranslation(),
     t = _useCoreTranslation.t;
-  var dimensionValuesRaw = generatedValues.toReversed().slice(0, 100);
+  var dimensionValuesRaw = generatedValues.slice().reverse().slice(0, 100);
   var latestMap = useMemo(function () {
     return createLatestMap(dimensionValuesRaw);
   }, [dimensionValuesRaw]);
@@ -3414,32 +3415,28 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
   var onClickZoomToExtent = function onClickZoomToExtent() {
     onLayerZoomToExtent == null || onLayerZoomToExtent();
   };
-  var stacDataLayoutMenuItem = onChangeStacDataLayout ? {
-    text: t('layermanager-stac-layout-title'),
-    action: function action() {},
-    subMenuItems: [{
-      text: t('layermanager-stac-layout-auto'),
-      action: function action() {
-        return onChangeStacDataLayout('auto');
-      },
-      controlType: 'radio',
-      isSelected: !stacDataLayout || stacDataLayout === 'auto'
-    }].concat(!isTiledStacCollection ? [{
-      text: t('layermanager-stac-layout-temporal'),
-      action: function action() {
-        return onChangeStacDataLayout('temporal');
-      },
-      controlType: 'radio',
-      isSelected: stacDataLayout === 'temporal'
-    }] : [], [{
-      text: t('layermanager-stac-layout-spatial-tiles'),
-      action: function action() {
-        return onChangeStacDataLayout('spatial-tiles');
-      },
-      controlType: 'radio',
-      isSelected: stacDataLayout === 'spatial-tiles'
-    }])
-  } : undefined;
+  var stacDataLayoutMenuItems = onChangeStacDataLayout ? [{
+    text: t('layermanager-stac-layout-auto'),
+    action: function action() {
+      return onChangeStacDataLayout('auto');
+    },
+    controlType: 'radio',
+    isSelected: !stacDataLayout || stacDataLayout === 'auto'
+  }].concat(!isTiledStacCollection ? [{
+    text: t('layermanager-stac-layout-temporal'),
+    action: function action() {
+      return onChangeStacDataLayout('temporal');
+    },
+    controlType: 'radio',
+    isSelected: stacDataLayout === 'temporal'
+  }] : [], [{
+    text: t('layermanager-stac-layout-spatial-tiles'),
+    action: function action() {
+      return onChangeStacDataLayout('spatial-tiles');
+    },
+    controlType: 'radio',
+    isSelected: stacDataLayout === 'spatial-tiles'
+  }]) : [];
   return jsx(ToggleMenu, {
     buttonIcon: icon,
     buttonSx: {
@@ -3470,8 +3467,10 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
       action: onClickZoomToExtent,
       icon: jsx(ZoomToLayer, {}),
       isDisabled: !canZoomToLayerExtent
-    }].concat(stacDataLayoutMenuItem ? [stacDataLayoutMenuItem] : []),
+    }],
     menuPosition: "bottom",
+    secondaryMenuItems: stacDataLayoutMenuItems,
+    secondaryMenuTitle: stacDataLayoutMenuItems.length ? t('layermanager-stac-layout-title') : undefined,
     tooltipTitle: nonEmptyTooltipTitle,
     children: !!isFeatureLayer && jsx(SelectableFeaturesCheckboxConnect, {
       disabled: isFeatureSyncLayer,
@@ -4511,13 +4510,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,
@@ -4529,26 +4527,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) {
@@ -4579,9 +4557,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() {
@@ -4722,6 +4700,7 @@ var RenderEDRLayers = function RenderEDRLayers(_ref) {
     });
     return (layer == null ? void 0 : layer.title) || (layer == null ? void 0 : layer.name);
   });
+  // eslint-disable-next-line no-restricted-syntax
   var tooltip = nonEmptyTooltipPrefix + " " + tooltipNames.sort(function (paramA, paramB) {
     return (paramA != null ? paramA : '').localeCompare(paramB != null ? paramB : '');
   }).join(', ');
@@ -6610,56 +6589,98 @@ var MultiMapMultiDimensionSelectConnect = function MultiMapMultiDimensionSelectC
   });
 };
 
-var AnimationLengthButtonConnect = function AnimationLengthButtonConnect(_ref) {
+var AnimationLengthPanelConnect = function AnimationLengthPanelConnect(_ref) {
+  var _storedAnimationLengt, _ref2;
   var mapId = _ref.mapId;
   var dispatch = useDispatch();
+  var storedAnimationLength = useSelector(function (store) {
+    return mapSelectors.getAnimationLength(store, mapId);
+  });
   var isAnimating = useSelector(function (store) {
     return mapSelectors.isAnimating(store, mapId);
   });
-  var isAnimationLengthAuto = useSelector(function (store) {
-    return mapSelectors.isAnimationLengthAuto(store, mapId);
-  });
+  var _React$useState = React.useState(),
+    pendingLength = _React$useState[0],
+    setPendingLength = _React$useState[1];
+  var isCommittableRef = React.useRef(false);
+  var currentMode = (_storedAnimationLengt = storedAnimationLength == null ? void 0 : storedAnimationLength.mode) != null ? _storedAnimationLengt : AnimationLengthMode.Exact;
+  var draftLength = (pendingLength == null ? void 0 : pendingLength.mode) === currentMode ? pendingLength : undefined;
+  var debouncedLength = useDebounce(pendingLength, 500);
+  React.useEffect(function () {
+    setPendingLength(undefined);
+  }, [storedAnimationLength, 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),
-    disabled: isAnimating,
-    isAuto: isAnimationLengthAuto,
-    layerHasTimeStep: Boolean(timeStepFromLayer),
-    onChangeAnimationLength: handlechangeAnimationLength,
-    toggleAnimationLengthAuto: toggleAnimationLengthAuto
+  var timeStep = useSelector(function (store) {
+    return mapSelectors.getMapTimeStep(store, mapId);
+  });
+  var layerRefTimeDimension = useSelector(function (store) {
+    return layerSelectors.getLayerDimension(store, autoTimeStepLayerId, 'reference_time');
+  });
+  var referenceTimeFromLayer = (layerRefTimeDimension == null ? void 0 : layerRefTimeDimension.currentValue) || undefined;
+  var anchorTime = dateUtils.utc(referenceTimeFromLayer);
+  var commitAnimationLength = React.useCallback(function (length) {
+    var isUsableRange = isValidAnimationLength(length) && isWithinAnimationStepLimit(length, timeStep);
+    var carriesOwnRange = isAnchoredMode(length.mode) || length.mode === AnimationLengthMode.Exact;
+    var resolvedRange = carriesOwnRange && isUsableRange ? settingRange(length, anchorTime) : undefined;
+    dispatch(mapActions.setAnimationLength(Object.assign({
+      mapId: mapId,
+      animationLength: length
+    }, resolvedRange, {
+      origin: mapEnums.MapActionOrigin.map
+    })));
+  }, [anchorTime, dispatch, mapId, timeStep]);
+  React.useEffect(function () {
+    if (debouncedLength && isCommittableRef.current) {
+      commitAnimationLength(debouncedLength);
+      setPendingLength(undefined);
+    }
+  }, [debouncedLength, commitAnimationLength]);
+  var changeAnimationLength = function changeAnimationLength(animationLength, isStep) {
+    var shouldDefer = isAnimating && animationLength.mode === currentMode && (isAnchoredMode(currentMode) || currentMode === AnimationLengthMode.Exact);
+    isCommittableRef.current = shouldDefer;
+    setPendingLength(animationLength);
+    if (!shouldDefer) {
+      commitAnimationLength(animationLength);
+      return;
+    }
+    if (isStep) {
+      var isUsableRange = isValidAnimationLength(animationLength) && isWithinAnimationStepLimit(animationLength, timeStep);
+      if (isUsableRange) {
+        dispatch(mapActions.refreshAnimationRange(Object.assign({
+          mapId: mapId
+        }, settingRange(animationLength, anchorTime))));
+      }
+    }
+  };
+  var cancelPendingCommit = function cancelPendingCommit() {
+    isCommittableRef.current = false;
+  };
+  return jsx(AnimationLengthPanel, {
+    animationEndTime: (draftLength == null ? void 0 : draftLength.mode) === AnimationLengthMode.Exact ? draftLength.exact.animationEndTime : animationEndTime,
+    animationStartTime: (draftLength == null ? void 0 : draftLength.mode) === AnimationLengthMode.Exact ? draftLength.exact.animationStartTime : animationStartTime,
+    autoTimeStepLayerName: autoTimeStepLayerName,
+    isAutoDisabled: !timeStepFromLayer,
+    onChange: changeAnimationLength,
+    onInputChange: cancelPendingCommit,
+    referenceTimeFromLayer: referenceTimeFromLayer,
+    setting: (_ref2 = draftLength != null ? draftLength : storedAnimationLength) != null ? _ref2 : exactAnimationLengthFrom({
+      animationStartTime: animationStartTime,
+      animationEndTime: animationEndTime
+    }),
+    timeStep: timeStep
   });
 };
 
@@ -6773,6 +6794,9 @@ var PlayButtonConnectComponent = function PlayButtonConnectComponent(_ref) {
     }),
     animationStartTime = _useSelector.animationStartTime,
     animationEndTime = _useSelector.animationEndTime;
+  var selectedTime = useSelector(function (store) {
+    return mapSelectors.getSelectedTime(store, mapId);
+  });
   var animationInterval = timeStep || defaultTimeStep;
   var onTogglePlay = function onTogglePlay() {
     if (linkedMapAnimationInfo.isAnimating) {
@@ -6786,6 +6810,8 @@ var PlayButtonConnectComponent = function PlayButtonConnectComponent(_ref) {
         start: animationStartTime,
         end: animationEndTime,
         interval: animationInterval,
+        // Resume from the currently selected time when it falls within the animation period
+        initialTime: dateUtils.fromUnix(selectedTime).toISOString(),
         origin: mapEnums.MapActionOrigin.map
       });
     }
@@ -6973,9 +6999,9 @@ var OptionsMenu = function OptionsMenu(_ref) {
         children: [jsx(NowButtonConnect, {
           mapId: mapId,
           sourceId: mapId
-        }), jsx(TimeSpanButtonConnect, {
+        }), jsx(AnimationLengthPanelConnect, {
           mapId: mapId
-        }), jsx(AnimationLengthButtonConnect, {
+        }), jsx(TimeSpanButtonConnect, {
           mapId: mapId
         }), jsx(_TimeStepButtonConnect, {
           mapId: mapId
@@ -8357,9 +8383,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 [];
   }
@@ -8372,46 +8480,13 @@ 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$selectedFeatur2, _layer$selectedFeatur3;
+  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);
@@ -8433,7 +8508,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;
@@ -8444,9 +8519,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;
         }
@@ -8455,32 +8530,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;
     }
@@ -8490,10 +8588,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) {
@@ -8505,25 +8602,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,
@@ -8531,27 +8616,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;
     });
@@ -8562,7 +8635,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) {
@@ -8572,21 +8645,72 @@ 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 onFeatureGeometriesChange = React.useCallback(function (changedFeatures) {
+    if (!layerId || !changedFeatures.length) {
+      return;
+    }
+    dispatch(layerActions.moveFeatures({
+      layerId: layerId,
+      movedFeatures: changedFeatures,
+      geoJSONIntersectionLayerId: geoJSONIntersectionLayerId,
+      geoJSONIntersectionBoundsLayerId: geoJSONIntersectionBoundsLayerId
+    }));
+  }, [dispatch, layerId, geoJSONIntersectionLayerId, geoJSONIntersectionBoundsLayerId]);
+  var isMultiShapeInteractionEnabled = shouldEnableMultiShapeMove(hasRegisteredDrawTool, layer.isInEditMode, (_layer$selectedFeatur2 = (_layer$selectedFeatur3 = layer.selectedFeatureIds) == null ? void 0 : _layer$selectedFeatur3.length) != null ? _layer$selectedFeatur2 : 0, movableSelectedFeatureIds.length);
+  var moveFeaturesConfig = React.useMemo(function () {
+    return isMultiShapeInteractionEnabled ? {
+      onMoveEnd: onFeatureGeometriesChange,
+      active: true
+    } : undefined;
+  }, [isMultiShapeInteractionEnabled, onFeatureGeometriesChange]);
+  var modifyFeaturesConfig = React.useMemo(function () {
+    return isMultiShapeInteractionEnabled ? {
+      onModifyEnd: onFeatureGeometriesChange,
+      active: true
+    } : undefined;
+  }, [isMultiShapeInteractionEnabled, onFeatureGeometriesChange]);
+  var onViewOnlyFeatureClick = React.useCallback(function (feature, isShiftClick) {
+    if (sketchInProgress) {
       return;
     }
-    onFeatureClick(feature);
-  }, [activeDrawToolId, onFeatureClick]);
+    onFeatureClick(feature, isShiftClick);
+  }, [sketchInProgress, onFeatureClick]);
   var updateFeature = React.useCallback(function (geojson, reason) {
     if (!layerId) {
       window.console.error('updateFeature without layerId');
@@ -8617,18 +8741,21 @@ 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,
+      modifyFeatures: modifyFeaturesConfig,
+      moveFeatures: moveFeaturesConfig,
       opacity: layer.opacity,
       style: style,
       visible: layer.enabled,
       zIndex: zIndex
     }), jsx(OpenLayersMapDraw, {
+      boxSelect: editModeBoxSelectConfig,
       drawMode: layer.drawMode,
       exitDrawModeCallback: exitFeatureDrawMode,
       geojson: layer.geojson,
@@ -8636,6 +8763,7 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2
       onNoFeatureClick: onNoFeatureClick,
       onViewOnlyFeatureClick: onViewOnlyFeatureClick,
       selectedFeatureIndex: activeFeatureIndex,
+      selectedFeatureIndices: selectedFeatureIndices,
       updateGeojson: updateFeature,
       viewOnlyStyle: style
     })]
@@ -8659,6 +8787,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],
@@ -8666,17 +8802,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]);
     }
@@ -8689,7 +8817,7 @@ var useGetOpenLayersView = function useGetOpenLayersView(mapId, store) {
     return function () {
       unByKey(eventKey);
     };
-  }, [syncGroupView, mapId, store]);
+  }, [storedView, mapId, store]);
   return {
     view: view,
     name: name
@@ -9005,7 +9133,7 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
               isLoading: true
             });
             _context.n = 2;
-            return fetch(url);
+            return authFetch(url);
           case 2:
             response = _context.v;
             if (response.ok) {
@@ -9338,6 +9466,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.
@@ -9368,6 +9550,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);
   });
@@ -9796,11 +9981,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) {
@@ -9818,9 +10003,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;
@@ -9864,9 +10052,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,
@@ -9958,7 +10149,7 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
       }), !!displayTimeInMap && jsx(ClockConnect, {
         mapId: mapId
       }), children]
-    })
+    })]
   });
 };
 
@@ -9974,7 +10165,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,
@@ -12276,4 +12467,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, TIME_SLIDER_Z_INDEX, TimeSliderConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, getAffectedIndices, getCenterOfLinkedFeature, getCurrentSelectedIndices, 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 };

package/dist/src/lib/components/MapDrawToolRedux/OpenLayersFeatureLayerConnect.d.ts

@@ -1,15 +1,39 @@
+import type { Feature } from 'ol';
 import type { StyleLike } from 'ol/style/Style';
 import React from 'react';
 import type { layerTypes } from '@opengeoweb/store';
 import type { HoverSelect } from '@opengeoweb/webmap-react';
+import { getAffectedIndices } from '@opengeoweb/webmap-react';
+export { getAffectedIndices };
+/** Escape drops a multi selection only. A sole selection is kept, matching the
+ * plain click behaviour, and edit mode keeps its own Escape handling. */
+export declare const shouldDeselectAllOnEscape: (selectedFeatureCount: number, isInEditMode: boolean | undefined, hasRegisteredDrawTool: boolean) => boolean;
+interface DeselectAllOnEscapeOptions {
+    selectedFeatureCount: number;
+    isInEditMode: boolean | undefined;
+    hasRegisteredDrawTool: boolean;
+    onDeselectAll: () => void;
+}
+export declare const useDeselectAllOnEscape: ({ selectedFeatureCount, isInEditMode, hasRegisteredDrawTool, onDeselectAll, }: DeselectAllOnEscapeOptions) => void;
+export declare const shouldClearSelectionOnEmptyClick: (activeDrawToolId: string | undefined, hasRegisteredDrawTool: boolean) => boolean;
+export declare const isSketchInProgress: (isInEditMode: boolean | undefined, drawMode: string | undefined, activeFeature: GeoJSON.Feature | undefined) => boolean;
+/** Soundings and time series set their own highlight, so they must stay out of this. */
+export declare const usesFeatureIdSelection: (isSelectable: boolean | undefined, hasRegisteredDrawTool: boolean) => boolean;
+export declare const getSelectionProperties: (usesIdSelection: boolean, selectedFeatureIdSet: Set<string>, featureId: string | undefined) => {
+    isSelected: boolean;
+    highlightSelectedFeature: boolean;
+} | undefined;
+export declare const getClickedFeatureKey: (feature?: Feature) => string | undefined;
+export declare const findFeatureIndexByKey: (geojson: GeoJSON.FeatureCollection | undefined, feature?: Feature) => number;
+export declare const getMovableSelectedFeatureIds: (geojson: GeoJSON.FeatureCollection | undefined, selectedFeatureIds: string[] | undefined) => string[];
+/** Moving a set of shapes belongs to the drawing tool only: selection-only
+ * reference layers stay selectable but must never be dragged. */
+export declare const shouldEnableMultiShapeMove: (hasRegisteredDrawTool: boolean, isInEditMode: boolean | undefined, selectedFeatureCount: number, movableFeatureCount: number) => boolean;
 interface SelectionState {
     geojson?: GeoJSON.FeatureCollection;
     selectedFeatureIds?: string[];
 }
 export declare const getCurrentSelectedIndices: ({ geojson, selectedFeatureIds, }: SelectionState) => number[];
-export declare const calculateNewSelection: (currentSelectedIndices: number[], clickedIndex: number, isShiftClick: boolean) => number[];
-export declare const getAffectedIndices: (oldSelection: number[], newSelection: number[]) => number[];
-export declare const shouldEnterEditMode: (isReadonly: boolean, isShiftClick: boolean, newSelectionCount: number) => boolean;
 interface OpenLayersFeatureLayerConnectProps {
     layer: layerTypes.ReduxLayer;
     layerId?: string;
@@ -18,4 +42,3 @@ interface OpenLayersFeatureLayerConnectProps {
     hoverSelect?: HoverSelect;
 }
 export declare const OpenLayersFeatureLayerConnect: React.FC<OpenLayersFeatureLayerConnectProps>;
-export {};

package/dist/src/lib/components/MapViewConnect/InitialZoomToLayerConnect.d.ts

@@ -0,0 +1,8 @@
+import type { Extent } from 'ol/extent';
+import React from 'react';
+interface InitialZoomToLayerConnectProps {
+    mapId: string;
+    onHomeExtentResolved: (extent: Extent) => void;
+}
+declare const InitialZoomToLayerConnect: React.FC<InitialZoomToLayerConnectProps>;
+export default InitialZoomToLayerConnect;

package/dist/src/lib/components/MapViewConnect/useGetOpenLayersView.d.ts

@@ -1,9 +1,11 @@
 import type { Store } from '@reduxjs/toolkit';
 import type { View } from 'ol';
+import { getViewObjectForMapId } from '@opengeoweb/store';
 import type { CoreAppStore } from '@opengeoweb/store';
 interface UseGetOpenLayersViewValue {
     view?: View;
     name?: string;
 }
+export declare const getStoredViewObjectForMap: (mapId: string, store: Store<CoreAppStore>) => ReturnType<typeof getViewObjectForMapId>;
 export declare const useGetOpenLayersView: (mapId: string, store: Store<CoreAppStore>) => UseGetOpenLayersViewValue;
 export {};

package/dist/src/lib/components/MultiMapViewConnect/storyUtils/mapPresets.d.ts

@@ -6,7 +6,7 @@ export declare const mapPresetRadar: {
         enabled: boolean;
         style: string;
         id: string;
-        layerType: import("@opengeoweb/webmap").LayerType;
+        layerType: import("libs/webmap/dist").LayerType;
     }[];
     proj: {
         bbox: {
@@ -23,7 +23,7 @@ export declare const mapPresetObsTA: {
         service: string;
         name: string;
         id: string;
-        layerType: import("@opengeoweb/webmap").LayerType;
+        layerType: import("libs/webmap/dist").LayerType;
     }[];
     proj: {
         bbox: {
@@ -40,7 +40,7 @@ export declare const mapPresetObsWind: {
         service: string;
         name: string;
         id: string;
-        layerType: import("@opengeoweb/webmap").LayerType;
+        layerType: import("libs/webmap/dist").LayerType;
     }[];
     proj: {
         bbox: {
@@ -57,7 +57,7 @@ export declare const mapPresetObsPP: {
         service: string;
         name: string;
         id: string;
-        layerType: import("@opengeoweb/webmap").LayerType;
+        layerType: import("libs/webmap/dist").LayerType;
     }[];
     proj: {
         bbox: {
@@ -74,7 +74,7 @@ export declare const mapPresetObsRH: {
         service: string;
         name: string;
         id: string;
-        layerType: import("@opengeoweb/webmap").LayerType;
+        layerType: import("libs/webmap/dist").LayerType;
     }[];
     proj: {
         bbox: {
@@ -91,7 +91,7 @@ export declare const mapPresetObsQG: {
         service: string;
         name: string;
         id: string;
-        layerType: import("@opengeoweb/webmap").LayerType;
+        layerType: import("libs/webmap/dist").LayerType;
     }[];
     proj: {
         bbox: {
@@ -109,7 +109,7 @@ export declare const mapPresetEumetsat: {
         name: string;
         enabled: boolean;
         id: string;
-        layerType: import("@opengeoweb/webmap").LayerType;
+        layerType: import("libs/webmap/dist").LayerType;
     }[];
     proj: {
         bbox: {
@@ -126,7 +126,7 @@ export declare const mapPresetHarmoniePrecipitationFlux: {
         service: string;
         name: string;
         id: string;
-        layerType: import("@opengeoweb/webmap").LayerType;
+        layerType: import("libs/webmap/dist").LayerType;
         enabled: boolean;
     }[];
     proj: {
@@ -144,7 +144,7 @@ export declare const mapPresetHarmonieTemperature2m: {
         service: string;
         name: string;
         id: string;
-        layerType: import("@opengeoweb/webmap").LayerType;
+        layerType: import("libs/webmap/dist").LayerType;
         enabled: boolean;
     }[];
     proj: {
@@ -162,7 +162,7 @@ export declare const mapPresetHarmoniePressureMSL: {
         service: string;
         name: string;
         id: string;
-        layerType: import("@opengeoweb/webmap").LayerType;
+        layerType: import("libs/webmap/dist").LayerType;
         enabled: boolean;
     }[];
     proj: {

package/dist/src/lib/components/TimeSliderConnect/TimeSliderButtonsConnect/AnimationLengthPanelConnect.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface AnimationLengthPanelConnectProps {
+    mapId: string;
+}
+export declare const AnimationLengthPanelConnect: React.FC<AnimationLengthPanelConnectProps>;

package/package.json

@@ -1,64 +1,64 @@
 {
-  "name": "@opengeoweb/core",
-  "version": "19.6.1",
-  "description": "GeoWeb Core library for the opengeoweb project",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
-  },
-  "main": "./dist/index.esm.js",
-  "module": "./dist/index.esm.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "@opengeoweb/source": "./src/index.ts",
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.esm.js",
-      "default": "./dist/index.esm.js"
-    }
-  },
-  "dependencies": {
-    "@opengeoweb/shared": "*",
-    "react-redux": "^9.2.0",
-    "@opengeoweb/store": "*",
-    "@opengeoweb/time-slider": "*",
-    "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/webmap-react": "*",
-    "@opengeoweb/webmap": "*",
-    "@opengeoweb/theme": "*",
-    "@opengeoweb/layer-select": "*",
-    "lodash": "^4.18.1",
-    "ol": "^10.4.0",
-    "react-sortablejs": "^6.1.4",
-    "sortablejs": "^1.15.1",
-    "@mui/system": "^9.0.1",
-    "@opengeoweb/snackbar": "*",
-    "react-draggable": "^4.4.6",
-    "i18next": "^25.0.1",
-    "react-i18next": "^15.1.1",
-    "dompurify": "^3.4.13",
-    "@mui/material": "^9.0.1",
-    "@tanstack/react-query": "^5.85.5",
-    "@opengeoweb/api": "*",
-    "@types/geojson": "^7946.0.14",
-    "@turf/turf": "^7.2.0",
-    "proj4": "^2.15.0",
-    "react-router": "^7.18.2"
-  },
-  "peerDependencies": {
-    "react": "19",
-    "@emotion/react": "*",
-    "@emotion/styled": "*"
-  },
-  "devDependencies": {
-    "eslint-plugin-storybook": "10.3.3"
-  },
-  "files": [
-    "dist",
-    "!dist/package.json",
-    "README.md",
-    "package.json"
-  ]
-}
+    "name": "@opengeoweb/core",
+    "version": "20.0.0",
+    "description": "GeoWeb Core library for the opengeoweb project",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
+    },
+    "main": "./dist/index.esm.js",
+    "module": "./dist/index.esm.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "@opengeoweb/source": "./src/index.ts",
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.esm.js",
+            "default": "./dist/index.esm.js"
+        }
+    },
+    "dependencies": {
+        "@opengeoweb/shared": "20.0.0",
+        "react-redux": "^9.2.0",
+        "@opengeoweb/store": "20.0.0",
+        "@opengeoweb/time-slider": "20.0.0",
+        "@reduxjs/toolkit": "^2.6.1",
+        "@opengeoweb/webmap-react": "20.0.0",
+        "@opengeoweb/webmap": "20.0.0",
+        "@opengeoweb/theme": "20.0.0",
+        "@opengeoweb/layer-select": "20.0.0",
+        "lodash": "^4.18.1",
+        "ol": "^10.4.0",
+        "react-sortablejs": "^6.1.4",
+        "sortablejs": "^1.15.1",
+        "@mui/system": "^9.0.1",
+        "@opengeoweb/snackbar": "20.0.0",
+        "react-draggable": "^4.4.6",
+        "i18next": "^25.0.1",
+        "react-i18next": "^15.1.1",
+        "dompurify": "^3.4.13",
+        "@mui/material": "^9.0.1",
+        "@tanstack/react-query": "^5.85.5",
+        "@opengeoweb/api": "20.0.0",
+        "@types/geojson": "^7946.0.14",
+        "@turf/turf": "^7.2.0",
+        "proj4": "^2.15.0",
+        "react-router": "^7.18.2"
+    },
+    "peerDependencies": {
+        "react": "19",
+        "@emotion/react": "*",
+        "@emotion/styled": "*"
+    },
+    "devDependencies": {
+        "eslint-plugin-storybook": "10.3.3"
+    },
+    "files": [
+        "dist",
+        "!dist/package.json",
+        "README.md",
+        "package.json"
+    ]
+}