@opengeoweb/webmap-react 19.6.0 → 19.6.1-nightly-20260913

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { WMInvalidDateValues, getCorrectWMSDimName, WMImageStore, WMImageStoreLoadType, WMJSDimension, webmapUtils, WMLayer, LayerType, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WEBMAP_NAMESPACE, WMProj4Defs, privateWebMapUtils, wmDetermineDimensionMode, WMDefaultStyleName, tilesettings } from '@opengeoweb/webmap';
+import { WMInvalidDateValues, getCorrectWMSDimName, WMImageStore, WMImageStoreLoadType, WMJSDimension, webmapUtils, WMLayer, LayerType, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WEBMAP_NAMESPACE, WMProj4Defs, privateWebMapUtils, wmDetermineDimensionMode, WMJSMAP_LONLAT_EPSGCODE, WMDefaultStyleName, tilesettings } from '@opengeoweb/webmap';
 export { WEBMAP_NAMESPACE, webmapTranslations } from '@opengeoweb/webmap';
 import React, { createContext, useMemo, useRef, useState, useEffect, useCallback, useContext, useLayoutEffect } from 'react';
 import { memoize, range, without, isEqual, throttle, debounce, cloneDeep } from 'lodash';
@@ -20,13 +20,15 @@ import { Point, MultiPoint, Polygon, LineString } from 'ol/geom';
 import { Style, Icon as Icon$1, Circle, Stroke, Fill, Text } from 'ol/style';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
-import { View, Map as Map$1, Feature, Collection, Overlay } from 'ol';
-import { defaults, MouseWheelZoom, Draw, Modify, Translate, Snap, DragPan } from 'ol/interaction';
+import { View, Map as Map$1, Collection, Feature, Overlay } from 'ol';
+import { defaults, MouseWheelZoom, Draw, Modify, Translate as Translate$1, Snap, DragPan } from 'ol/interaction';
 import 'ol/ol.css';
 import { listen, unlistenByKey } from 'ol/events';
 import { unByKey } from 'ol/Observable';
 import EventType from 'ol/pointer/EventType';
 import { toLonLat, fromLonLat, transformExtent, transform } from 'ol/proj';
+import { noModifierKeys, platformModifierKeyOnly, always, never } from 'ol/events/condition';
+import Translate from 'ol/interaction/Translate';
 import { register } from 'ol/proj/proj4';
 import proj4 from 'proj4';
 import { lineSplit, cleanCoords, featureCollection, difference, bbox, feature, simplify, booleanPointInPolygon, intersect, polygonToLine, booleanClockwise, rewind, toWgs84, toMercator, coordEach } from '@turf/turf';
@@ -36,11 +38,10 @@ import WMTSCapabilities from 'ol/format/WMTSCapabilities';
 import TileLayer from 'ol/layer/Tile';
 import { WMTS, XYZ, TileWMS, GeoTIFF } from 'ol/source';
 import { optionsFromCapabilities } from 'ol/source/WMTS';
-import OlGeoJSON from 'ol/format/GeoJSON';
-import { platformModifierKeyOnly, always, never } from 'ol/events/condition';
-import DragBox from 'ol/interaction/DragBox';
+import GeoJSON from 'ol/format/GeoJSON';
 import { Vector } from 'ol/layer';
 import VectorSource from 'ol/source/Vector';
+import DragBox from 'ol/interaction/DragBox';
 import TileLayer$1 from 'ol/layer/WebGLTile';
 import { fromCircle } from 'ol/geom/Polygon';
 import { createBox, createRegularPolygon } from 'ol/interaction/Draw';
@@ -3846,6 +3847,101 @@ var OpenLayersMapView = function OpenLayersMapView(_ref) {
   });
 };
 
+var getOlFeatureKey = function getOlFeatureKey(feature) {
+  var id = feature === null || feature === void 0 ? void 0 : feature.getId();
+  if (id !== undefined && id !== null) {
+    return String(id);
+  }
+  var originalId = feature === null || feature === void 0 ? void 0 : feature.get('originalId');
+  return typeof originalId === 'string' ? originalId : undefined;
+};
+var isDefaultMovable = function isDefaultMovable(feature) {
+  return feature.get('isSelected') === true && feature.get('isReadonly') !== true;
+};
+var createMoveFeatures = function createMoveFeatures(_ref) {
+  var features = _ref.features,
+    isMovable = _ref.isMovable,
+    onMoveEnd = _ref.onMoveEnd,
+    onMoveStart = _ref.onMoveStart;
+  var movableFeatures = features.filter(isMovable);
+  if (movableFeatures.length === 0) {
+    return undefined;
+  }
+  var collection = new Collection(movableFeatures);
+  var translate = new Translate({
+    features: collection,
+    // Cmd/Ctrl must fall through to the box select and shift to the selection toggle.
+    condition: noModifierKeys,
+    hitTolerance: 5
+  });
+  translate.on('translatestart', function () {
+    onMoveStart === null || onMoveStart === void 0 || onMoveStart();
+  });
+  translate.on('translateend', function (event) {
+    var _event$startCoordinat = _slicedToArray(event.startCoordinate, 2),
+      startX = _event$startCoordinat[0],
+      startY = _event$startCoordinat[1];
+    var _event$coordinate = _slicedToArray(event.coordinate, 2),
+      endX = _event$coordinate[0],
+      endY = _event$coordinate[1];
+    if (startX === endX && startY === endY) {
+      onMoveEnd([]);
+      return;
+    }
+    onMoveEnd(event.features.getArray());
+  });
+  return {
+    translate: translate,
+    dispose: function dispose() {
+      return collection.clear();
+    }
+  };
+};
+var useMoveFeatures = function useMoveFeatures(_ref2) {
+  var map = _ref2.map,
+    features = _ref2.features,
+    active = _ref2.active,
+    isMovable = _ref2.isMovable,
+    onMoveEnd = _ref2.onMoveEnd,
+    onMoveStart = _ref2.onMoveStart;
+  var isMovableRef = useRef(isMovable);
+  var onMoveEndRef = useRef(onMoveEnd);
+  var onMoveStartRef = useRef(onMoveStart);
+  useEffect(function () {
+    isMovableRef.current = isMovable;
+    onMoveEndRef.current = onMoveEnd;
+    onMoveStartRef.current = onMoveStart;
+  });
+  useEffect(function () {
+    if (!map || !active || !features.length) {
+      return function () {};
+    }
+    var moveFeatures = createMoveFeatures({
+      features: features,
+      isMovable: function isMovable(feature) {
+        var _isMovableRef$current;
+        return ((_isMovableRef$current = isMovableRef.current) !== null && _isMovableRef$current !== void 0 ? _isMovableRef$current : isDefaultMovable)(feature);
+      },
+      onMoveEnd: function onMoveEnd(movedFeatures) {
+        var _onMoveEndRef$current;
+        return (_onMoveEndRef$current = onMoveEndRef.current) === null || _onMoveEndRef$current === void 0 ? void 0 : _onMoveEndRef$current.call(onMoveEndRef, movedFeatures);
+      },
+      onMoveStart: function onMoveStart() {
+        var _onMoveStartRef$curre;
+        return (_onMoveStartRef$curre = onMoveStartRef.current) === null || _onMoveStartRef$curre === void 0 ? void 0 : _onMoveStartRef$curre.call(onMoveStartRef);
+      }
+    });
+    if (!moveFeatures) {
+      return function () {};
+    }
+    map.addInteraction(moveFeatures.translate);
+    return function () {
+      moveFeatures.dispose();
+      map.removeInteraction(moveFeatures.translate);
+    };
+  }, [map, features, active]);
+};
+
 var initializeOpenLayersProjections = function initializeOpenLayersProjections() {
   WMProj4Defs.forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
@@ -4953,6 +5049,7 @@ var useGetWMSLayerStyleList = function useGetWMSLayerStyleList(serviceUrl, name)
  * @returns object with wmLayer and if set an errorMessage
  */
 var useGetWMLayerInstance = function useGetWMLayerInstance(layerFoundation) {
+  var hasLayerFoundation = layerFoundation !== undefined;
   var id = layerFoundation === null || layerFoundation === void 0 ? void 0 : layerFoundation.id;
   var serviceUrl = (layerFoundation === null || layerFoundation === void 0 ? void 0 : layerFoundation.service) || '';
   var name = (layerFoundation === null || layerFoundation === void 0 ? void 0 : layerFoundation.name) || '';
@@ -4973,7 +5070,7 @@ var useGetWMLayerInstance = function useGetWMLayerInstance(layerFoundation) {
   var tmpWMLayer = webmapUtils.getWMLayerById(layerId);
   var layerIdChanged = id && id !== (tmpWMLayer === null || tmpWMLayer === void 0 ? void 0 : tmpWMLayer.id);
   var layerServiceChanged = (tmpWMLayer === null || tmpWMLayer === void 0 ? void 0 : tmpWMLayer.service) !== serviceUrl;
-  if (layerServiceChanged || layerIdChanged) {
+  if (serviceUrl && (layerServiceChanged || layerIdChanged)) {
     // Make a new layer if the serviceUrl changes. (But not when the name changes)
     var refTimeDimensionMode = wmDetermineDimensionMode({
       name: name,
@@ -4991,6 +5088,9 @@ var useGetWMLayerInstance = function useGetWMLayerInstance(layerFoundation) {
     webmapUtils.registerWMLayer(wmLayer, layerId);
   }
   React.useEffect(function () {
+    if (!hasLayerFoundation || !serviceUrl) {
+      return;
+    }
     // Set the name and parse the layer
     var wmLayer = webmapUtils.getWMLayerById(layerId);
     if (wmLayer.layerType !== layerType) {
@@ -5001,7 +5101,7 @@ var useGetWMLayerInstance = function useGetWMLayerInstance(layerFoundation) {
     })["finally"](function () {
       setLayer(wmLayer);
     });
-  }, [layerId, layerType, name, serviceUrl]);
+  }, [hasLayerFoundation, layerId, layerType, name, serviceUrl]);
   return {
     wmLayer: layer,
     errorMessage: errorMessage
@@ -5029,7 +5129,8 @@ var useQueryWMTSGetCapabilities = function useQueryWMTSGetCapabilities(serviceUr
         return _queryFn2.apply(this, arguments);
       }
       return queryFn;
-    }()
+    }(),
+    enabled: serviceUrl.length > 0
   });
 };
 
@@ -5746,6 +5847,17 @@ var useSetIntervalWhenVisible = function useSetIntervalWhenVisible(autoUpdate, r
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
 initializeOpenLayersProjections();
+var getLayerExtentForProjection = function getLayerExtentForProjection(wmLayer, projectionCode) {
+  var crs = wmLayer.getCRSByName(projectionCode);
+  if (crs !== null && crs !== void 0 && crs.bbox) {
+    return crs.bbox.getExtent();
+  }
+  var geo = wmLayer.geographicBoundingBox;
+  if (geo) {
+    return transformExtent([parseFloat(geo.west), parseFloat(geo.south), parseFloat(geo.east), parseFloat(geo.north)], WMJSMAP_LONLAT_EPSGCODE, projectionCode);
+  }
+  return undefined;
+};
 var useViewFromLayer = function useViewFromLayer(layerProps) {
   var baseView = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     projection: 'EPSG:3857',
@@ -5771,11 +5883,11 @@ var useViewFromLayer = function useViewFromLayer(layerProps) {
     if (!wmLayer) {
       return;
     }
-    var layerProjectionForCode = wmLayer.getProjection(viewRef.current.getProjection().getCode());
-    if (!(layerProjectionForCode !== null && layerProjectionForCode !== void 0 && layerProjectionForCode.bbox)) {
+    var extent = getLayerExtentForProjection(wmLayer, viewRef.current.getProjection().getCode());
+    if (!extent) {
       return;
     }
-    viewRef.current.fit(layerProjectionForCode.bbox.getExtent());
+    viewRef.current.fit(extent);
   }, [wmLayer]);
   return viewRef.current;
 };
@@ -5991,13 +6103,141 @@ var DefaultBaseLayers = function DefaultBaseLayers(_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 isBoxSelectModifier = function isBoxSelectModifier(event) {
+  return platformModifierKeyOnly({
+    originalEvent: event
+  });
+};
+var createDragBoxSelect = function createDragBoxSelect(_ref) {
+  var sources = _ref.sources,
+    onBoxSelect = _ref.onBoxSelect;
+  var dragBox = new DragBox({
+    condition: platformModifierKeyOnly
+  });
+  var previewedFeatures = [];
+  // Preview flags are set silently, so the source needs telling or it keeps its cached frame.
+  var repaint = function repaint() {
+    sources.forEach(function (source) {
+      return source.changed();
+    });
+  };
+  var setPreview = function setPreview(feature, isPreviewed) {
+    feature.set('boxSelectPreview', isPreviewed, true);
+  };
+  var clearPreview = function clearPreview() {
+    if (!previewedFeatures.length) {
+      return;
+    }
+    previewedFeatures.forEach(function (feature) {
+      setPreview(feature, false);
+    });
+    previewedFeatures = [];
+    repaint();
+  };
+  var getIntersectingFeatures = function getIntersectingFeatures() {
+    var extent = dragBox.getGeometry().getExtent();
+    return sources.flatMap(function (source) {
+      return source.getFeaturesInExtent(extent).filter(function (feature) {
+        var _feature$getGeometry;
+        return (_feature$getGeometry = feature.getGeometry()) === null || _feature$getGeometry === void 0 ? void 0 : _feature$getGeometry.intersectsExtent(extent);
+      });
+    });
+  };
+  dragBox.on('boxstart', function () {
+    clearPreview();
+  });
+  dragBox.on('boxdrag', function () {
+    var intersectingFeatures = getIntersectingFeatures();
+    var intersectingSet = new Set(intersectingFeatures);
+    var previousSet = new Set(previewedFeatures);
+    var hasChanges = false;
+    previewedFeatures.forEach(function (feature) {
+      if (!intersectingSet.has(feature)) {
+        setPreview(feature, false);
+        hasChanges = true;
+      }
+    });
+    intersectingFeatures.forEach(function (feature) {
+      if (!previousSet.has(feature)) {
+        setPreview(feature, true);
+        hasChanges = true;
+      }
+    });
+    previewedFeatures = intersectingFeatures;
+    if (hasChanges) {
+      repaint();
+    }
+  });
+  dragBox.on('boxend', function (event) {
+    clearPreview();
+    var selectedFeatures = getIntersectingFeatures();
+    if (selectedFeatures.length > 0) {
+      var originalEvent = event.mapBrowserEvent.originalEvent;
+      var addToSelection = Boolean(originalEvent === null || originalEvent === void 0 ? void 0 : originalEvent.shiftKey);
+      onBoxSelect(selectedFeatures, addToSelection);
+    }
+  });
+  return {
+    dragBox: dragBox,
+    dispose: clearPreview
+  };
+};
+var useDragBoxSelect = function useDragBoxSelect(_ref2) {
+  var map = _ref2.map,
+    source = _ref2.source,
+    active = _ref2.active,
+    onBoxSelect = _ref2.onBoxSelect;
+  var onBoxSelectRef = useRef(onBoxSelect);
+  useEffect(function () {
+    onBoxSelectRef.current = onBoxSelect;
+  });
+  useEffect(function () {
+    if (!map || !source || !active) {
+      return function () {};
+    }
+    var _createDragBoxSelect = createDragBoxSelect({
+        sources: [source],
+        onBoxSelect: function onBoxSelect(features, addToSelection) {
+          var _onBoxSelectRef$curre;
+          return (_onBoxSelectRef$curre = onBoxSelectRef.current) === null || _onBoxSelectRef$curre === void 0 ? void 0 : _onBoxSelectRef$curre.call(onBoxSelectRef, features, addToSelection);
+        }
+      }),
+      dragBox = _createDragBoxSelect.dragBox,
+      dispose = _createDragBoxSelect.dispose;
+    map.addInteraction(dragBox);
+    return function () {
+      dispose();
+      map.removeInteraction(dragBox);
+    };
+  }, [map, source, active]);
+};
+
 var FeatureLayer = function FeatureLayer(_ref) {
+  var _moveFeatures$isMovab;
   var features = _ref.features,
     style = _ref.style,
     zIndex = _ref.zIndex,
     hoverSelect = _ref.hoverSelect,
     clickOnFeature = _ref.clickOnFeature,
     boxSelect = _ref.boxSelect,
+    moveFeatures = _ref.moveFeatures,
     layerId = _ref.layerId,
     testId = _ref.testId,
     opacity = _ref.opacity,
@@ -6011,6 +6251,8 @@ var FeatureLayer = function FeatureLayer(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     source = _useState2[0],
     setSource = _useState2[1];
+  var isMovingRef = useRef(false);
+  var pendingFeaturesRef = useRef(undefined);
   var layerRef = useRef(undefined);
   useEffect(function () {
     if (!map || !visible) {
@@ -6062,21 +6304,36 @@ var FeatureLayer = function FeatureLayer(_ref) {
     var _layerRef$current3;
     (_layerRef$current3 = layerRef.current) === null || _layerRef$current3 === void 0 || _layerRef$current3.setVisible(visible);
   }, [visible]);
-  useEffect(function () {
+  var syncSource = React.useCallback(function (nextFeatures) {
     if (!source) {
       return;
     }
     source.clear();
-    if (features && features.length > 0) {
-      source.addFeatures(features);
+    if (nextFeatures.length > 0) {
+      source.addFeatures(nextFeatures);
+    }
+  }, [source]);
+  useEffect(function () {
+    if (!source) {
+      return;
     }
-  }, [source, features]);
+    // Rebuilding the source mid-drag would swap the features out from under the
+    // move interaction, so it is deferred until the move has finished.
+    if (isMovingRef.current) {
+      pendingFeaturesRef.current = features;
+      return;
+    }
+    syncSource(features !== null && features !== void 0 ? features : []);
+  }, [source, features, syncSource]);
   useEffect(function () {
     if (!map || !source || !hoverSelect || !hoverSelect.active || !visible) {
       return function () {};
     }
     var previousHover = [];
     var pointerMoveFunction = debounce(function (evt) {
+      if (isMovingRef.current) {
+        return;
+      }
       var hoveredFeature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
         if (!layer || (layer === null || layer === void 0 ? void 0 : layer.getSource()) !== source) {
           return false;
@@ -6136,64 +6393,34 @@ var FeatureLayer = function FeatureLayer(_ref) {
       unByKey(eventKey);
     };
   }, [map, source, clickOnFeature, visible]);
-  var onBoxSelectRef = useRef(boxSelect === null || boxSelect === void 0 ? void 0 : boxSelect.onBoxSelect);
-  useEffect(function () {
-    onBoxSelectRef.current = boxSelect === null || boxSelect === void 0 ? void 0 : boxSelect.onBoxSelect;
+  useDragBoxSelect({
+    map: map,
+    source: source,
+    active: Boolean((boxSelect === null || boxSelect === void 0 ? void 0 : boxSelect.active) && visible),
+    onBoxSelect: boxSelect === null || boxSelect === void 0 ? void 0 : boxSelect.onBoxSelect
+  });
+  var handleMoveStart = React.useCallback(function () {
+    isMovingRef.current = true;
+  }, []);
+  var handleMoveEnd = React.useCallback(function (movedFeatures) {
+    isMovingRef.current = false;
+    var pendingFeatures = pendingFeaturesRef.current;
+    pendingFeaturesRef.current = undefined;
+    if (pendingFeatures) {
+      syncSource(pendingFeatures);
+    }
+    if (movedFeatures.length > 0) {
+      moveFeatures === null || moveFeatures === void 0 || moveFeatures.onMoveEnd(movedFeatures);
+    }
+  }, [moveFeatures, syncSource]);
+  useMoveFeatures({
+    map: map,
+    features: features,
+    active: Boolean((moveFeatures === null || moveFeatures === void 0 ? void 0 : moveFeatures.active) && visible),
+    isMovable: (_moveFeatures$isMovab = moveFeatures === null || moveFeatures === void 0 ? void 0 : moveFeatures.isMovable) !== null && _moveFeatures$isMovab !== void 0 ? _moveFeatures$isMovab : isDefaultMovable,
+    onMoveEnd: handleMoveEnd,
+    onMoveStart: handleMoveStart
   });
-  useEffect(function () {
-    if (!map || !source || !(boxSelect !== null && boxSelect !== void 0 && boxSelect.active) || !visible) {
-      return function () {};
-    }
-    var dragBox = new DragBox({
-      condition: platformModifierKeyOnly
-    });
-    var previewedFeatures = [];
-    var clearPreview = function clearPreview() {
-      previewedFeatures.forEach(function (feature) {
-        feature.set('boxSelectPreview', false, true);
-      });
-      previewedFeatures = [];
-    };
-    dragBox.on('boxstart', function () {
-      clearPreview();
-    });
-    dragBox.on('boxdrag', function () {
-      var extent = dragBox.getGeometry().getExtent();
-      var intersectingFeatures = source.getFeaturesInExtent(extent).filter(function (feature) {
-        var _feature$getGeometry;
-        return (_feature$getGeometry = feature.getGeometry()) === null || _feature$getGeometry === void 0 ? void 0 : _feature$getGeometry.intersectsExtent(extent);
-      });
-      var intersectingSet = new Set(intersectingFeatures);
-      previewedFeatures.forEach(function (feature) {
-        if (!intersectingSet.has(feature)) {
-          feature.set('boxSelectPreview', false, true);
-        }
-      });
-      intersectingFeatures.forEach(function (feature) {
-        feature.set('boxSelectPreview', true, true);
-      });
-      previewedFeatures = intersectingFeatures;
-    });
-    dragBox.on('boxend', function (event) {
-      clearPreview();
-      var extent = dragBox.getGeometry().getExtent();
-      var selectedFeatures = source.getFeaturesInExtent(extent).filter(function (feature) {
-        var _feature$getGeometry2;
-        return (_feature$getGeometry2 = feature.getGeometry()) === null || _feature$getGeometry2 === void 0 ? void 0 : _feature$getGeometry2.intersectsExtent(extent);
-      });
-      if (selectedFeatures.length > 0) {
-        var _onBoxSelectRef$curre;
-        var originalEvent = event.mapBrowserEvent.originalEvent;
-        var addToSelection = Boolean(originalEvent === null || originalEvent === void 0 ? void 0 : originalEvent.shiftKey);
-        (_onBoxSelectRef$curre = onBoxSelectRef.current) === null || _onBoxSelectRef$curre === void 0 || _onBoxSelectRef$curre.call(onBoxSelectRef, selectedFeatures, addToSelection);
-      }
-    });
-    map.addInteraction(dragBox);
-    return function () {
-      clearPreview();
-      map.removeInteraction(dragBox);
-    };
-  }, [map, source, boxSelect === null || boxSelect === void 0 ? void 0 : boxSelect.active, visible]);
   return null;
 };
 
@@ -6214,6 +6441,7 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
     hoverSelect = _ref.hoverSelect,
     clickOnFeature = _ref.clickOnFeature,
     boxSelect = _ref.boxSelect,
+    moveFeatures = _ref.moveFeatures,
     layerId = _ref.layerId,
     testId = _ref.testId,
     opacity = _ref.opacity,
@@ -6222,6 +6450,40 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
     _ref$visible = _ref.visible,
     visible = _ref$visible === void 0 ? true : _ref$visible;
   var projection = useProjection();
+  var onMoveEnd = moveFeatures === null || moveFeatures === void 0 ? void 0 : moveFeatures.onMoveEnd;
+  var handleMoveEnd = useCallback(function (olFeatures) {
+    if (!onMoveEnd || !projection) {
+      return;
+    }
+    var formatter = new GeoJSON({
+      featureProjection: projection
+    });
+    var movedFeatures = olFeatures.reduce(function (acc, olFeature) {
+      var featureId = getOlFeatureKey(olFeature);
+      var geometry = olFeature.getGeometry();
+      if (!featureId || !geometry) {
+        return acc;
+      }
+      var geoJSONGeometry = formatter.writeGeometryObject(geometry);
+      if ('coordinates' in geoJSONGeometry) {
+        geoJSONGeometry.coordinates = roundCoordinates(geoJSONGeometry.coordinates);
+      }
+      acc.push({
+        featureId: featureId,
+        geometry: geoJSONGeometry
+      });
+      return acc;
+    }, []);
+    if (movedFeatures.length > 0) {
+      onMoveEnd(movedFeatures);
+    }
+  }, [onMoveEnd, projection]);
+  var moveFeaturesConfig = useMemo(function () {
+    return moveFeatures ? {
+      active: moveFeatures.active,
+      onMoveEnd: handleMoveEnd
+    } : undefined;
+  }, [moveFeatures, handleMoveEnd]);
   var featureCollectionRef = useRef(undefined);
   var projectionRef = useRef(projection);
   var features = useRef([]);
@@ -6230,7 +6492,7 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
     if (projection && featureCollection) {
       featureCollectionRef.current = featureCollection;
       projectionRef.current = projection;
-      var formatter = new OlGeoJSON({
+      var formatter = new GeoJSON({
         featureProjection: projection
       });
       features.current = formatter.readFeatures(featureCollection);
@@ -6247,6 +6509,7 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
     features: features.current,
     hoverSelect: hoverSelect,
     layerId: layerId,
+    moveFeatures: moveFeaturesConfig,
     opacity: opacity,
     style: style,
     testId: testId,
@@ -9662,7 +9925,22 @@ var FEATURE_MY_LOCATION = new Style$1({
     ctx.restore();
   }
 });
+var SELECTED_FEATURE_COLOR = '#006CFD';
+var getBoxSelectPreviewStyle = function getBoxSelectPreviewStyle(fill) {
+  return new Style$1({
+    stroke: new Stroke({
+      color: SELECTED_FEATURE_COLOR,
+      width: 2,
+      lineDash: [4, 4]
+    }),
+    fill: new Fill({
+      color: geowebColorToOpenLayersColor(fill, 0.3)
+    }),
+    zIndex: 9997
+  });
+};
 var getFeaturePointStyle = function getFeaturePointStyle(fillColor, fillOpacity) {
+  var isSelected = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return new Style$1({
     renderer: function renderer(pixelCoordinates, state) {
       var ctx = state.context,
@@ -9677,10 +9955,33 @@ var getFeaturePointStyle = function getFeaturePointStyle(fillColor, fillOpacity)
       ctx.arc(coord[0], coord[1], 9 * pixelRatio, 0, 2 * Math.PI);
       ctx.fill();
       ctx.shadowBlur = 0;
+      if (isSelected) {
+        ctx.strokeStyle = SELECTED_FEATURE_COLOR;
+        ctx.lineWidth = 3 * pixelRatio;
+        ctx.beginPath();
+        ctx.arc(coord[0], coord[1], 12 * pixelRatio, 0, 2 * Math.PI);
+        ctx.stroke();
+      }
       ctx.restore();
     }
   });
 };
+// For icon points; getFeaturePointStyle draws the ring for the rest.
+var SELECTED_POINT_HALO_STYLE = new Style$1({
+  renderer: function renderer(pixelCoordinates, state) {
+    var ctx = state.context,
+      pixelRatio = state.pixelRatio;
+    var coord = pixelCoordinates;
+    ctx.save();
+    ctx.strokeStyle = SELECTED_FEATURE_COLOR;
+    ctx.lineWidth = 3 * pixelRatio;
+    ctx.beginPath();
+    ctx.arc(coord[0], coord[1], 16 * pixelRatio, 0, 2 * Math.PI);
+    ctx.stroke();
+    ctx.restore();
+  },
+  zIndex: 9998
+});
 var FEATURE_POINT_MODIFY = new Style$1({
   renderer: function renderer(pixelCoordinates, state) {
     var ctx = state.context,
@@ -10109,27 +10410,23 @@ var genericOpenLayersFeatureStyle = function genericOpenLayersFeatureStyle(featu
     }
     return undefined;
   }
+  var isSelectedFeature = Boolean(highlightSelectedFeature || isSelected);
+  var canHighlightPoint = mapFeatureClass !== MapFeatureClass.ObservationStation && mapFeatureClass !== MapFeatureClass.Plugin && selectionType !== 'fir';
   if (((_feature$getGeometry3 = feature.getGeometry) === null || _feature$getGeometry3 === void 0 || (_feature$getGeometry3 = _feature$getGeometry3.call(feature)) === null || _feature$getGeometry3 === void 0 ? void 0 : _feature$getGeometry3.getType()) === 'Point' && props.iconPath) {
     var iconStyle = customIconStyle(feature);
+    var styles = [iconStyle];
+    if (isSelectedFeature && canHighlightPoint) {
+      styles.unshift(SELECTED_POINT_HALO_STYLE);
+    }
     if (hoverLabelStyle) {
-      return [iconStyle, hoverLabelStyle];
+      styles.push(hoverLabelStyle);
     }
-    return iconStyle;
+    return styles.length === 1 ? iconStyle : styles;
   }
   var shouldHighlight = geometry && geometry.getType() !== 'Point' && mapFeatureClass !== MapFeatureClass.ObservationStation && mapFeatureClass !== MapFeatureClass.Plugin && selectionType !== 'fir';
   // Preview highlight during box-select drag
   if (boxSelectPreview && shouldHighlight) {
-    return new Style$1({
-      stroke: new Stroke({
-        color: '#006CFD',
-        width: 2,
-        lineDash: [4, 4]
-      }),
-      fill: new Fill({
-        color: geowebColorToOpenLayersColor(fill, 0.3)
-      }),
-      zIndex: 9997
-    });
+    return getBoxSelectPreviewStyle(fill);
   }
   // Highlight selected features (applies to predefined areas, etc)
   if ((highlightSelectedFeature || isSelected) && shouldHighlight) {
@@ -10163,7 +10460,7 @@ var genericOpenLayersFeatureStyle = function genericOpenLayersFeatureStyle(featu
     return [].concat(_toConsumableArray(inlineFeatureStyle(feature)), [hoverLabelStyle]);
   }
   if ((!mapFeatureClass || mapFeatureClass === MapFeatureClass["default"]) && geometry && selectionType === 'point') {
-    return getFeaturePointStyle(fill, effectiveFillOpacity);
+    return getFeaturePointStyle(fill, effectiveFillOpacity, isSelectedFeature && canHighlightPoint);
   }
   if (fill || stroke) {
     return inlineFeatureStyle(feature);
@@ -10792,10 +11089,12 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     viewOnlyStyle = _ref.viewOnlyStyle,
     geojson = _ref.geojson,
     selectedFeatureIndex = _ref.selectedFeatureIndex,
+    selectedFeatureIndices = _ref.selectedFeatureIndices,
     exitDrawModeCallback = _ref.exitDrawModeCallback,
     updateGeojson = _ref.updateGeojson,
     onViewOnlyFeatureClick = _ref.onViewOnlyFeatureClick,
-    onNoFeatureClick = _ref.onNoFeatureClick;
+    onNoFeatureClick = _ref.onNoFeatureClick,
+    boxSelect = _ref.boxSelect;
   var _React$useContext = React.useContext(MapContext),
     map = _React$useContext.map;
   var projection = useProjection();
@@ -10803,10 +11102,12 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
   var updateGeojsonRef = React.useRef(updateGeojson);
   var onViewOnlyFeatureClickRef = React.useRef(onViewOnlyFeatureClick);
   var onNoFeatureClickRef = React.useRef(onNoFeatureClick);
+  var boxSelectRef = React.useRef(boxSelect);
   exitDrawModeCallbackRef.current = exitDrawModeCallback;
   updateGeojsonRef.current = updateGeojson;
   onViewOnlyFeatureClickRef.current = onViewOnlyFeatureClick;
   onNoFeatureClickRef.current = onNoFeatureClick;
+  boxSelectRef.current = boxSelect;
   React.useEffect(function () {
     var _geojson$features$sel;
     if (!map || !isInEditMode) {
@@ -10824,10 +11125,18 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     var drawOperation = createDrawOperation(actualDrawMode, selectedFeature === null || selectedFeature === void 0 ? void 0 : selectedFeature.geometry.type);
     var drawStyle = drawStyles[actualDrawMode];
     var modifyStyle = modifyStyles[actualDrawMode];
-    var geojsonFormatter = new OlGeoJSON({
+    var geojsonFormatter = new GeoJSON({
       featureProjection: projection
     });
     var allFeatures = geojson ? geojsonFormatter.readFeatures(geojson) : [];
+    if (selectedFeatureIndices) {
+      var selectedIndexSet = new Set(selectedFeatureIndices);
+      allFeatures.forEach(function (feature, index) {
+        var isSelected = selectedIndexSet.has(index);
+        feature.set('isSelected', isSelected, true);
+        feature.set('highlightSelectedFeature', isSelected, true);
+      });
+    }
     var viewOnlyFeatures = allFeatures.filter(function (_f, i) {
       return i !== selectedFeatureIndex;
     });
@@ -10844,9 +11153,16 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       features: editFeatureCollection
     });
     var selectedFeatureHasGeometry = selectedFeature && !isGeoJSONGeometryEmpty(selectedFeature);
+    // Without this the shape being edited is the only one missing a drag box outline.
+    var editStyle = function editStyle(feature, resolution) {
+      if (feature.get('boxSelectPreview')) {
+        return getBoxSelectPreviewStyle(feature.get('fill'));
+      }
+      return typeof modifyStyle === 'function' ? modifyStyle(feature, resolution) : modifyStyle;
+    };
     var layer = new VectorLayer({
       source: source,
-      style: modifyStyle,
+      style: editStyle,
       zIndex: 1000000
     });
     map.addLayer(layer);
@@ -10864,8 +11180,9 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         }
       });
       if (features.length) {
-        var _onViewOnlyFeatureCli;
-        (_onViewOnlyFeatureCli = onViewOnlyFeatureClickRef.current) === null || _onViewOnlyFeatureCli === void 0 || _onViewOnlyFeatureCli.call(onViewOnlyFeatureClickRef, features);
+        var _event$originalEvent, _onViewOnlyFeatureCli;
+        var isShiftClick = Boolean((_event$originalEvent = event.originalEvent) === null || _event$originalEvent === void 0 ? void 0 : _event$originalEvent.shiftKey);
+        (_onViewOnlyFeatureCli = onViewOnlyFeatureClickRef.current) === null || _onViewOnlyFeatureCli === void 0 || _onViewOnlyFeatureCli.call(onViewOnlyFeatureClickRef, features, isShiftClick);
       } else {
         var _onNoFeatureClickRef$;
         (_onNoFeatureClickRef$ = onNoFeatureClickRef.current) === null || _onNoFeatureClickRef$ === void 0 || _onNoFeatureClickRef$.call(onNoFeatureClickRef);
@@ -10898,7 +11215,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         return;
       }
       // GeoJsons are always treated as latlon, therefore using EPSG:4326 as transformer does not do anything except translating the object.
-      var geojsonFormatterNoTransform = new OlGeoJSON({
+      var geojsonFormatterNoTransform = new GeoJSON({
         featureProjection: 'EPSG:4326'
       });
       var isLineSplit = selectedFeature.geometry.type === 'LineString';
@@ -11133,7 +11450,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
         updateFeature(evt.features.getArray()[0]);
       });
     }
-    var translate = new Translate({
+    var translate = new Translate$1({
       features: editFeatureCollection
     });
     translate.on('translateend', function (evt) {
@@ -11149,6 +11466,9 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     // immediately show a grabbing cursor on mousedown (before any movement).
     var isPointerDownNearCorner = false;
     var handlePointerDownNearCorner = function handlePointerDownNearCorner(event) {
+      if (isBoxSelectModifier(event)) {
+        return;
+      }
       if (!isBoxOrSquare || !selectedFeatureHasGeometry) {
         return;
       }
@@ -11199,6 +11519,9 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       isPointerDownNearCorner = false;
     };
     var startRotateIfOnHandle = function startRotateIfOnHandle(event) {
+      if (isBoxSelectModifier(event)) {
+        return;
+      }
       if (!isBoxOrSquareRotatable || !selectedFeatureHasGeometry) {
         return;
       }
@@ -11414,14 +11737,36 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
       _viewport2.addEventListener('pointerup', handlePointerUpAfterCorner);
     }
     window.addEventListener('keydown', abortOnEsc);
+    // Read from the prop, not the ref: `boxSelect?.active` is a dependency of this
+    // effect, so toggling it adds or removes the DragBox. Only `onBoxSelect` goes
+    // through the ref, to keep an inline arrow from re-running the effect.
+    // Not while sketching, or the drag would both box select and dangle the sketch.
+    var shouldEnableBoxSelect = (boxSelect === null || boxSelect === void 0 ? void 0 : boxSelect.active) && actualDrawMode !== DRAWMODE.SPLIT && Boolean(selectedFeatureHasGeometry);
+    var disposeBoxSelect;
+    if (shouldEnableBoxSelect) {
+      var _createDragBoxSelect = createDragBoxSelect({
+          sources: [viewOnlySource, source],
+          onBoxSelect: function onBoxSelect(features, addToSelection) {
+            var _boxSelectRef$current;
+            return (_boxSelectRef$current = boxSelectRef.current) === null || _boxSelectRef$current === void 0 ? void 0 : _boxSelectRef$current.onBoxSelect(features, addToSelection);
+          }
+        }),
+        dragBox = _createDragBoxSelect.dragBox,
+        dispose = _createDragBoxSelect.dispose;
+      // Added last so it takes priority over Translate and Modify.
+      interactions.push(dragBox);
+      disposeBoxSelect = dispose;
+    }
     interactions.forEach(function (i) {
       return map.addInteraction(i);
     });
     return function () {
+      var _disposeBoxSelect;
       map.getViewport().removeEventListener('dblclick', handleDoubleClickToClosePolygon);
       map.getViewport().removeEventListener('click', handleClickNearPolygonStartPoint);
       map.getViewport().removeEventListener('pointerdown', recordPointerDownPosition);
       window.removeEventListener('keydown', abortOnEsc);
+      (_disposeBoxSelect = disposeBoxSelect) === null || _disposeBoxSelect === void 0 || _disposeBoxSelect();
       interactions.forEach(function (i) {
         return map.removeInteraction(i);
       });
@@ -11448,7 +11793,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
     // re-run when parents pass inline arrows. Re-running mid-sketch would
     // tear down the Draw interaction and lose the in-progress polygon.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [map, isInEditMode, geojson, projection, viewOnlyStyle, selectedFeatureIndex, drawMode]);
+  }, [map, isInEditMode, geojson, projection, viewOnlyStyle, selectedFeatureIndex, selectedFeatureIndices, boxSelect === null || boxSelect === void 0 ? void 0 : boxSelect.active, drawMode]);
   return null;
 };
 
@@ -13067,6 +13412,51 @@ var endToolExampleConfig = {
   }
 };
 
+/* *
+ * 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 calculateNewSelection = function calculateNewSelection(currentSelectedIndices, clickedIndex, isShiftClick) {
+  if (isShiftClick) {
+    if (currentSelectedIndices.includes(clickedIndex)) {
+      return currentSelectedIndices.filter(function (i) {
+        return i !== clickedIndex;
+      });
+    }
+    return [].concat(_toConsumableArray(currentSelectedIndices), [clickedIndex]);
+  }
+  var isSoleSelection = currentSelectedIndices.length === 1 && currentSelectedIndices[0] === clickedIndex;
+  return isSoleSelection ? [] : [clickedIndex];
+};
+var getAffectedIndices = function getAffectedIndices(oldSelection, newSelection) {
+  var allIndices = new Set([].concat(_toConsumableArray(oldSelection), _toConsumableArray(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 shouldExitEditModeForMultiSelect = function shouldExitEditModeForMultiSelect(newSelectionCount) {
+  return newSelectionCount > 1;
+};
+var calculateBoxSelection = function calculateBoxSelection(currentSelectedIndices, boxSelectedIndices, addToSelection) {
+  return addToSelection ? Array.from(new Set([].concat(_toConsumableArray(currentSelectedIndices), _toConsumableArray(boxSelectedIndices)))) : boxSelectedIndices;
+};
+
 var ClickOnMapTool = function ClickOnMapTool(_ref) {
   var isActive = _ref.isActive,
     isVisible = _ref.isVisible,
@@ -13756,4 +14146,4 @@ var getLayerUpdateInfo = function getLayerUpdateInfo(wmLayer, mapId) {
   return updateObject;
 };
 
-export { BaseLayerType, CLASSNAME_MAP_MEASURE_TOOLTIP, ClickOnMapTool, Clock, DEFAULT_GEOJSON_STYLE_FILL_OPACITY, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_DRAW_FILL_COLOR, FEATURE_DRAW_FILL_COLOR_TRANSPARENT, FEATURE_DRAW_SECONDARY_FILL_COLOR, FEATURE_DRAW_SECONDARY_STROKE_COLOR, FEATURE_DRAW_STROKE_COLOR, FEATURE_FILL, FEATURE_FILL_SELECTED, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_STROKE_SELECTED, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MIN_HEIGHT, MIN_WIDTH, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapMeasure, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, POINTER_CLICK_TOLERANCE_PX, STAC_ASSET_STYLE_PREFIX, STAC_ITEM_PAGE_LIMIT, STAC_ITEM_SEARCH_FIELDS_CONFORMANCE, STAC_TEMPORAL_STEP_SAMPLE_LIMIT, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeAwareGeoTIFFLayer, TimeAwareWMTSLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, asNewFeature, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, catmullRomSpline, clearImageCacheForAllMaps, colorMaps, createBoxBasedOnModifiedVertex, createIconStyle, createInterSections, createOval, currentlySupportedDrawModes, defaultBox, defaultCircle, defaultDelete, defaultEdrStyles, defaultFreehandLine, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultLineString, defaultLocation, defaultModes, defaultOval, defaultPoint, defaultPolygon, defaultRotatableBox, defaultSmoothLine, defaultSplit, defaultSquare, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureMultiPoint, featurePoint, featurePolygon, fetchStacCatalogCollections, fetchStacCatalogRoot, fetchStacCollection, fetchStacItem, fetchStacItems, fetchStacItemsPage, fetchStacItemsWithPagination, fillOptions, firSelectionType, formatTime, generateImageFromLegend, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getBoxRotateHandlePoints, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawModeIdFromSelectionType, getFeatureCollection, getFeatureExtent, getFeaturePointStyle, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getRendersAsStyles, getStacAssetKeyFromStyle, getStacAssetStyles, getStacCollectionStyles, getStacFrameItemsToRender, getStacItemLookupWindowForTimes, getStacItemSearchUrl, getStacItemsUrl, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isBrowserReadableGeoTIFFAsset, isClickFromDrag, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isGeoTIFFAsset, isPointFeatureCollection, keepIdentityOnFirstSplitFeature, labelOptions, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeFeatureStyleMultiParam, makeFeatureStyleMultiParamLoading, makeFeatureStyleWind, makeLegendFromColorMap, makeLegendFromStyleName, makeTimeList, makeView, marksByDimension, measureResultStyle, measureToolStyle, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, polygonCleanDangling, polygonCleanDanglingCoords, polygonFeatureCollectionCleanDangling, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, removeOverlappingLines, resolvePreferredStyleName$1 as resolvePreferredStyleName, resolveStacAssetKey, rewindGeometry, roundCoordinates, roundFeatureCoordinates, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, splitLine, splitPolygon, splitStyle, stacCatalogCollectionToLayerProps, stacColormapToOlStyle, stacGrayscaleOlStyle, stacNormalizedGrayscaleOlStyle, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRGetCollectionDetails, useEDRGetParameterData, useEDRWMLayer, useGeoJSON, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useStacCatalogRoot, useStacCollection, useStacItems, useStacOverviewItems, useStacTemporalStepItems, useViewFromLayer, viewUtils, webmapEDRQueryOptions, webmapReactTranslations };
+export { BaseLayerType, CLASSNAME_MAP_MEASURE_TOOLTIP, ClickOnMapTool, Clock, DEFAULT_GEOJSON_STYLE_FILL_OPACITY, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_DRAW_FILL_COLOR, FEATURE_DRAW_FILL_COLOR_TRANSPARENT, FEATURE_DRAW_SECONDARY_FILL_COLOR, FEATURE_DRAW_SECONDARY_STROKE_COLOR, FEATURE_DRAW_STROKE_COLOR, FEATURE_FILL, FEATURE_FILL_SELECTED, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_STROKE_SELECTED, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MIN_HEIGHT, MIN_WIDTH, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapMeasure, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, POINTER_CLICK_TOLERANCE_PX, SELECTED_FEATURE_COLOR, SELECTED_POINT_HALO_STYLE, STAC_ASSET_STYLE_PREFIX, STAC_ITEM_PAGE_LIMIT, STAC_ITEM_SEARCH_FIELDS_CONFORMANCE, STAC_TEMPORAL_STEP_SAMPLE_LIMIT, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeAwareGeoTIFFLayer, TimeAwareWMTSLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, asNewFeature, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, calculateBoxSelection, calculateNewSelection, catmullRomSpline, clearImageCacheForAllMaps, colorMaps, createBoxBasedOnModifiedVertex, createIconStyle, createInterSections, createMoveFeatures, createOval, currentlySupportedDrawModes, defaultBox, defaultCircle, defaultDelete, defaultEdrStyles, defaultFreehandLine, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultLineString, defaultLocation, defaultModes, defaultOval, defaultPoint, defaultPolygon, defaultRotatableBox, defaultSmoothLine, defaultSplit, defaultSquare, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureMultiPoint, featurePoint, featurePolygon, fetchStacCatalogCollections, fetchStacCatalogRoot, fetchStacCollection, fetchStacItem, fetchStacItems, fetchStacItemsPage, fetchStacItemsWithPagination, fillOptions, firSelectionType, formatTime, generateImageFromLegend, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getAffectedIndices, getBoxRotateHandlePoints, getBoxSelectPreviewStyle, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawModeIdFromSelectionType, getFeatureCollection, getFeatureExtent, getFeaturePointStyle, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerExtentForProjection, getLayerStyles, getLayerUpdateInfo, getLegendClass, getOlFeatureKey, getProj4, getRendersAsStyles, getStacAssetKeyFromStyle, getStacAssetStyles, getStacCollectionStyles, getStacFrameItemsToRender, getStacItemLookupWindowForTimes, getStacItemSearchUrl, getStacItemsUrl, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isBrowserReadableGeoTIFFAsset, isClickFromDrag, isDefaultMovable, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isGeoTIFFAsset, isPointFeatureCollection, keepIdentityOnFirstSplitFeature, labelOptions, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeFeatureStyleMultiParam, makeFeatureStyleMultiParamLoading, makeFeatureStyleWind, makeLegendFromColorMap, makeLegendFromStyleName, makeTimeList, makeView, marksByDimension, measureResultStyle, measureToolStyle, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, polygonCleanDangling, polygonCleanDanglingCoords, polygonFeatureCollectionCleanDangling, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, removeOverlappingLines, resolvePreferredStyleName$1 as resolvePreferredStyleName, resolveStacAssetKey, rewindGeometry, roundCoordinates, roundFeatureCoordinates, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, shouldEnterEditMode, shouldExitEditModeForMultiSelect, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, splitLine, splitPolygon, splitStyle, stacCatalogCollectionToLayerProps, stacColormapToOlStyle, stacGrayscaleOlStyle, stacNormalizedGrayscaleOlStyle, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRGetCollectionDetails, useEDRGetParameterData, useEDRWMLayer, useGeoJSON, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useMoveFeatures, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useStacCatalogRoot, useStacCollection, useStacItems, useStacOverviewItems, useStacTemporalStepItems, useViewFromLayer, viewUtils, webmapEDRQueryOptions, webmapReactTranslations };

package/dist/src/lib/components/OpenLayers/OlStyles.d.ts

@@ -24,7 +24,10 @@ export declare const FEATURE_STROKE_SELECTED: Stroke;
 export declare const FEATURE_VERTICE_IMAGE: Circle;
 export declare const FEATURE_VERTICE_HANDLE_IMAGE: Circle;
 export declare const FEATURE_VERTICES_EDIT_HANDLES: Style;
-export declare const getFeaturePointStyle: (fillColor?: string, fillOpacity?: number) => Style;
+export declare const SELECTED_FEATURE_COLOR = "#006CFD";
+export declare const getBoxSelectPreviewStyle: (fill?: string) => Style;
+export declare const getFeaturePointStyle: (fillColor?: string, fillOpacity?: number, isSelected?: boolean) => Style;
+export declare const SELECTED_POINT_HALO_STYLE: Style;
 export declare const labelOptions: {
     font: string;
     padding: number[];

package/dist/src/lib/components/OpenLayers/draw/OpenLayersMapDraw.d.ts

@@ -3,6 +3,7 @@ import type { Geometry } from 'ol/geom';
 import type { StyleLike } from 'ol/style/Style';
 import React from 'react';
 import type { DrawModeExitCallback, DrawModeValue } from './types';
+import type { BoxSelect } from '../utils/types';
 export interface OpenLayersMapDrawProps {
     geojson: GeoJSON.FeatureCollection;
     drawMode?: DrawModeValue;
@@ -10,9 +11,12 @@ export interface OpenLayersMapDrawProps {
     exitDrawModeCallback?: (reason: DrawModeExitCallback) => void;
     isInEditMode: boolean;
     selectedFeatureIndex: number;
+    /** Highlight-only. The edit target stays `selectedFeatureIndex`. */
+    selectedFeatureIndices?: number[];
     updateGeojson?: (geoJson: GeoJSON.FeatureCollection, text: string) => void;
-    onViewOnlyFeatureClick?: (feature: Feature<Geometry>[]) => void;
+    onViewOnlyFeatureClick?: (feature: Feature<Geometry>[], isShiftClick?: boolean) => void;
     onNoFeatureClick?: () => void;
+    boxSelect?: BoxSelect;
 }
 /**
  * Integrates with OpenLayers Draw and Modify (+Snap) interactions, to implement feature drawing

package/dist/src/lib/components/OpenLayers/draw/index.d.ts

@@ -10,3 +10,4 @@ export * from './geojsonShapes';
 export * from './mapDrawUtils';
 export * from './storyComponents';
 export * from './polygonCleanDangling';
+export * from './selectionUtils';

package/dist/src/lib/components/OpenLayers/draw/selectionUtils.d.ts

@@ -0,0 +1,5 @@
+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;
+export declare const shouldExitEditModeForMultiSelect: (newSelectionCount: number) => boolean;
+export declare const calculateBoxSelection: (currentSelectedIndices: number[], boxSelectedIndices: number[], addToSelection: boolean) => number[];

package/dist/src/lib/components/OpenLayers/index.d.ts

@@ -2,6 +2,7 @@ export { default as MapContext } from './context/MapContext';
 export * from './component/OpenLayersMapView';
 export * from './utils/TimeAwareImageWrapper';
 export type * from './utils/types';
+export * from './utils/moveFeatures';
 export * from './utils/projections';
 export * from './utils/setMapCenter';
 export * from './utils/viewUtils';

package/dist/src/lib/components/OpenLayers/layers/FeatureLayer.d.ts

@@ -1,6 +1,7 @@
 import type { Feature } from 'ol';
 import type { StyleLike } from 'ol/style/Style';
-import type { BoxSelect, ClickOnFeature, HoverSelect } from '../utils/types';
+import React from 'react';
+import type { BoxSelect, ClickOnFeature, HoverSelect, MoveFeatures } from '../utils/types';
 export interface FeatureLayerProps {
     features: Feature[];
     style: StyleLike;
@@ -8,6 +9,7 @@ export interface FeatureLayerProps {
     hoverSelect?: HoverSelect;
     clickOnFeature?: ClickOnFeature;
     boxSelect?: BoxSelect;
+    moveFeatures?: MoveFeatures;
     layerId?: string;
     testId?: string;
     opacity?: number;

package/dist/src/lib/components/OpenLayers/layers/OpenLayersFeatureLayer.d.ts

@@ -1,6 +1,6 @@
 import type { FeatureCollection } from 'geojson';
 import type { StyleLike } from 'ol/style/Style';
-import type { BoxSelect, ClickOnFeature, HoverSelect } from '../utils/types';
+import type { BoxSelect, ClickOnFeature, HoverSelect, MoveFeaturesGeoJSON } from '../utils/types';
 export interface OpenLayersFeatureLayerProps {
     featureCollection?: FeatureCollection;
     style?: StyleLike;
@@ -8,6 +8,7 @@ export interface OpenLayersFeatureLayerProps {
     hoverSelect?: HoverSelect;
     clickOnFeature?: ClickOnFeature;
     boxSelect?: BoxSelect;
+    moveFeatures?: MoveFeaturesGeoJSON;
     layerId?: string;
     testId?: string;
     opacity?: number;

package/dist/src/lib/components/OpenLayers/utils/dragBoxSelect.d.ts

@@ -0,0 +1,25 @@
+import type { Feature, Map } from 'ol';
+import DragBox from 'ol/interaction/DragBox';
+import type VectorSource from 'ol/source/Vector';
+export declare const isBoxSelectModifier: (event: {
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}) => boolean;
+export interface CreateDragBoxSelectOptions {
+    sources: VectorSource[];
+    onBoxSelect: (features: Feature[], addToSelection: boolean) => void;
+}
+export interface DragBoxSelect {
+    dragBox: DragBox;
+    dispose: () => void;
+}
+export declare const createDragBoxSelect: ({ sources, onBoxSelect, }: CreateDragBoxSelectOptions) => DragBoxSelect;
+export interface UseDragBoxSelectOptions {
+    map?: Map | null;
+    source?: VectorSource;
+    active: boolean;
+    onBoxSelect?: (features: Feature[], addToSelection: boolean) => void;
+}
+export declare const useDragBoxSelect: ({ map, source, active, onBoxSelect, }: UseDragBoxSelectOptions) => void;

package/dist/src/lib/components/OpenLayers/utils/moveFeatures.d.ts

@@ -0,0 +1,24 @@
+import type { Feature, Map } from 'ol';
+import Translate from 'ol/interaction/Translate';
+export declare const getOlFeatureKey: (feature?: Feature) => string | undefined;
+export declare const isDefaultMovable: (feature: Feature) => boolean;
+export interface CreateMoveFeaturesOptions {
+    features: Feature[];
+    isMovable: (feature: Feature) => boolean;
+    onMoveEnd: (features: Feature[]) => void;
+    onMoveStart?: () => void;
+}
+export interface MoveFeaturesInteraction {
+    translate: Translate;
+    dispose: () => void;
+}
+export declare const createMoveFeatures: ({ features, isMovable, onMoveEnd, onMoveStart, }: CreateMoveFeaturesOptions) => MoveFeaturesInteraction | undefined;
+export interface UseMoveFeaturesOptions {
+    map?: Map | null;
+    features: Feature[];
+    active: boolean;
+    isMovable?: (feature: Feature) => boolean;
+    onMoveEnd?: (features: Feature[]) => void;
+    onMoveStart?: () => void;
+}
+export declare const useMoveFeatures: ({ map, features, active, isMovable, onMoveEnd, onMoveStart, }: UseMoveFeaturesOptions) => void;

package/dist/src/lib/components/OpenLayers/utils/types.d.ts

@@ -13,6 +13,19 @@ export interface BoxSelect {
     onBoxSelect: (features: Feature[], addToSelection: boolean) => void;
     active: boolean;
 }
+export interface MovedFeature {
+    featureId: string;
+    geometry: GeoJSON.Geometry;
+}
+export interface MoveFeatures {
+    onMoveEnd: (features: Feature[]) => void;
+    isMovable?: (feature: Feature) => boolean;
+    active: boolean;
+}
+export interface MoveFeaturesGeoJSON {
+    onMoveEnd: (movedFeatures: MovedFeature[]) => void;
+    active: boolean;
+}
 export interface OnInitializeLayerProps {
     layerId: string;
     style: string;

package/dist/src/lib/hooks/useViewFromLayer.d.ts

@@ -1,6 +1,9 @@
 import { View } from 'ol';
+import type { Extent } from 'ol/extent';
+import type { WMLayer } from '@opengeoweb/webmap';
 import type { OpenLayersLayerProps } from '../components/OpenLayers/layers';
-export declare const useViewFromLayer: (layerProps: OpenLayersLayerProps, baseView?: {
+export declare const getLayerExtentForProjection: (wmLayer: WMLayer, projectionCode: string) => Extent | undefined;
+export declare const useViewFromLayer: (layerProps: OpenLayersLayerProps | undefined, baseView?: {
     projection: string;
     zoom: number;
     center: number[];

package/package.json

@@ -1,51 +1,51 @@
 {
-  "name": "@opengeoweb/webmap-react",
-  "version": "19.6.0",
-  "description": "GeoWeb react wrapper for webmap",
-  "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/webmap": "*",
-    "@opengeoweb/theme": "*",
-    "@opengeoweb/shared": "*",
-    "lodash": "^4.18.1",
-    "ol": "^10.4.0",
-    "proj4": "^2.9.2",
-    "@turf/turf": "^7.1.0",
-    "immer": "^10.0.3",
-    "i18next": "^25.0.1",
-    "@mui/material": "^9.0.1",
-    "react-i18next": "^15.1.1",
-    "@tanstack/react-query": "^5.85.5",
-    "@types/geojson": "^7946.0.14"
-  },
-  "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/webmap-react",
+    "version": "19.6.1-nightly-20260913",
+    "description": "GeoWeb react wrapper for webmap",
+    "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/webmap": "19.6.1-nightly-20260913",
+        "@opengeoweb/theme": "19.6.1-nightly-20260913",
+        "@opengeoweb/shared": "19.6.1-nightly-20260913",
+        "lodash": "^4.18.1",
+        "ol": "^10.4.0",
+        "proj4": "^2.9.2",
+        "@turf/turf": "^7.1.0",
+        "immer": "^10.0.3",
+        "i18next": "^25.0.1",
+        "@mui/material": "^9.0.1",
+        "react-i18next": "^15.1.1",
+        "@tanstack/react-query": "^5.85.5",
+        "@types/geojson": "^7946.0.14"
+    },
+    "peerDependencies": {
+        "react": "19",
+        "@emotion/react": "*",
+        "@emotion/styled": "*"
+    },
+    "devDependencies": {
+        "eslint-plugin-storybook": "10.3.3"
+    },
+    "files": [
+        "dist",
+        "!dist/package.json",
+        "README.md",
+        "package.json"
+    ]
+}