@opengeoweb/webmap-react 19.4.0 → 19.5.0

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { WMInvalidDateValues, getCorrectWMSDimName, WMImageStore, WMImageStoreLo
 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';
-import { equals, containsExtent, getCenter } from 'ol/extent';
+import { equals, containsExtent as containsExtent$1, getCenter } from 'ol/extent';
 import ImageState from 'ol/ImageState';
 import LayerProperty from 'ol/layer/Property';
 import { fromResolutionLike } from 'ol/resolution';
@@ -10,7 +10,7 @@ import ImageSource, { getRequestExtent } from 'ol/source/Image';
 import ImageWrapper, { load } from 'ol/Image';
 import { getImageSrc, getRequestParams, createLoader } from 'ol/source/wms';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { CustomTooltip, CanvasComponent, useWheelStopPropagation, ToolContainerDraggable, CustomIconButton, dateUtils, useMakeSureContainerStaysInsideWindow, Draggable, Resizable } from '@opengeoweb/shared';
+import { CustomTooltip, CanvasComponent, useWheelStopPropagation, ToolContainerDraggable, CustomIconButton, dateUtils, isDialogFocused, useMakeSureContainerStaysInsideWindow, Draggable, Resizable } from '@opengeoweb/shared';
 import { useTheme, Card, Box, Typography, Grid, styled, Slider, FormGroup, FormControlLabel, Checkbox, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$2, FormLabel, Switch, Paper, ThemeProvider } from '@mui/material';
 import { Visibility, VisibilityOff, arrowUpPath, Home, Add, Minus, List, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime, locationPath, rotatePath, DrawToolSplitFeature, Location, DrawToolSmoothLine, DrawToolFreehand, DrawToolOval, DrawToolCircle, DrawToolSquare, Delete, DrawToolLineString, DrawToolRectangle, DrawToolPolygon, DrawToolPoint, DrawFIRLand, ArrowUp, darkTheme, ChevronRight, Options, Clock as Clock$1 } from '@opengeoweb/theme';
 import 'i18next';
@@ -20,13 +20,13 @@ 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, Feature, Collection, Overlay } from 'ol';
+import { View, Map as Map$1, Feature, Collection, Overlay } from 'ol';
 import { defaults, MouseWheelZoom, Draw, Modify, Translate, 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, transform } from 'ol/proj';
+import { toLonLat, fromLonLat, transformExtent, transform } from 'ol/proj';
 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';
@@ -1293,7 +1293,7 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
       var requestExtent = getRequestExtent(extent, resolution, pixelRatio, 1);
       var requestResolution = this.findNearestResolution(resolution);
       var requestDimProperties = _objectSpread2({}, this._dimProperties);
-      var requestedImageHasWantedExtent = (this._loadedExtent && containsExtent(this._loadedExtent, requestExtent) || containsExtent(this._imWrapperForOlSource.getExtent(), requestExtent)) && (this._loadedResolution && fromResolutionLike(this._loadedResolution) === requestResolution || fromResolutionLike(this._imWrapperForOlSource.getResolution()) === requestResolution);
+      var requestedImageHasWantedExtent = (this._loadedExtent && containsExtent$1(this._loadedExtent, requestExtent) || containsExtent$1(this._imWrapperForOlSource.getExtent(), requestExtent)) && (this._loadedResolution && fromResolutionLike(this._loadedResolution) === requestResolution || fromResolutionLike(this._imWrapperForOlSource.getResolution()) === requestResolution);
       var hasExactImage = this._loadedExtent && this._imWrapperForOlSource.hasImage(this._loadedExtent, this._loadedResolution, pixelRatio, projection, this._wmsUrl, this._extraWMSParams, this._layerName, this._styleName, requestDimProperties);
       if (hasExactImage && hasExactImage.isLoaded && requestedImageHasWantedExtent) {
         this._imWrapperForOlSource.setGeoReferencedImage(hasExactImage);
@@ -2470,7 +2470,6 @@ var renderLegendGraphic = function renderLegendGraphic(wmImage, ctx, width, heig
   }
 };
 var Legend = function Legend(_ref) {
-  var _layer$options;
   var layer = _ref.layer,
     onToggleLayerLegendVisibility = _ref.onToggleLayerLegendVisibility;
   /* Variable to remember the previous image */
@@ -2520,7 +2519,10 @@ var Legend = function Legend(_ref) {
   like a title and the WMS legendgraphic url */
   var wmLayer = webmapUtils.getWMLayerById(layer.id);
   var isEdrLayer = layer.layerType === LayerType.edrFeatureLayer;
-  var title = isEdrLayer ? (_layer$options = layer.options) === null || _layer$options === void 0 ? void 0 : _layer$options.collectionId : wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title;
+  var title = wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title;
+  if (isEdrLayer) {
+    title = layer.options && 'collectionId' in layer.options ? layer.options.collectionId : undefined;
+  }
   /* Custom legend toggle for layer */
   var toggleLayerLegendVisibility = function toggleLayerLegendVisibility(showLegend) {
     return onToggleLayerLegendVisibility(layerId, showLegend);
@@ -3690,7 +3692,9 @@ var OpenLayersMapView = function OpenLayersMapView(_ref) {
     passiveMap = _ref$passiveMap === void 0 ? false : _ref$passiveMap,
     _ref$holdShiftToScrol = _ref.holdShiftToScroll,
     holdShiftToScroll = _ref$holdShiftToScrol === void 0 ? false : _ref$holdShiftToScrol,
-    mapId = _ref.mapId;
+    mapId = _ref.mapId,
+    _ref$showMapMousePosi = _ref.showMapMousePosition,
+    showMapMousePosition = _ref$showMapMousePosi === void 0 ? true : _ref$showMapMousePosi;
   var mapRef = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -3707,7 +3711,7 @@ var OpenLayersMapView = function OpenLayersMapView(_ref) {
     if (!mapRef.current) {
       return function () {};
     }
-    var mapObject = new Map({
+    var mapObject = new Map$1({
       interactions: defaults({
         dragPan: true,
         mouseWheelZoom: false
@@ -3731,7 +3735,7 @@ var OpenLayersMapView = function OpenLayersMapView(_ref) {
       return function () {};
     }
     var handleKeyPress = function handleKeyPress(event) {
-      if (!dispatchingKeyboardEventRef.current && mapRef.current && document.activeElement === document.body && ['+', '-', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+      if (!dispatchingKeyboardEventRef.current && mapRef.current && document.activeElement === document.body && !isDialogFocused() && ['+', '-', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
         var newEvent = new KeyboardEvent(event.type, event);
         newEvent.preventDefault();
         dispatchingKeyboardEventRef.current = true;
@@ -3791,7 +3795,7 @@ var OpenLayersMapView = function OpenLayersMapView(_ref) {
         height: '100%',
         position: 'relative'
       },
-      children: [children, jsx(MapMousePosition, {}), !!holdShiftToScroll && !!isMouseWheelZoomEnabled && jsx(HoldShiftToZoomMessage, {})]
+      children: [children, !!showMapMousePosition && jsx(MapMousePosition, {}), !!holdShiftToScroll && !!isMouseWheelZoomEnabled && jsx(HoldShiftToZoomMessage, {})]
     })
   });
 };
@@ -6018,13 +6022,17 @@ var FeatureLayer = function FeatureLayer(_ref) {
     };
   }, [map, source, hoverSelect, visible]);
   useEffect(function () {
+    var _clickOnFeature$event;
     if (!map || !source || !clickOnFeature || !visible) {
       return function () {};
     }
     var clickFunction = function clickFunction(evt) {
       var _evt$originalEvent$sh;
       var features = [];
-      map.forEachFeatureAtPixel(evt.pixel, function (feature) {
+      map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
+        if ((layer === null || layer === void 0 ? void 0 : layer.getSource()) !== source) {
+          return;
+        }
         features.push(feature);
       }, {
         hitTolerance: clickOnFeature.hitTolerance
@@ -6032,7 +6040,7 @@ var FeatureLayer = function FeatureLayer(_ref) {
       var isShiftClick = (_evt$originalEvent$sh = evt.originalEvent.shiftKey) !== null && _evt$originalEvent$sh !== void 0 ? _evt$originalEvent$sh : false;
       clickOnFeature.onClick(features, isShiftClick);
     };
-    var eventKey = map.on('click', clickFunction);
+    var eventKey = map.on((_clickOnFeature$event = clickOnFeature.eventType) !== null && _clickOnFeature$event !== void 0 ? _clickOnFeature$event : 'click', clickFunction);
     return function () {
       unByKey(eventKey);
     };
@@ -6237,7 +6245,17 @@ var GeoTIFFLayer = function GeoTIFFLayer(_ref) {
     layerRef.current = layer;
     setInitialized(true);
     return function () {
-      map.removeLayer(layerRef.current);
+      map.removeLayer(layer);
+      // Removing a layer does not dispose its renderer or cached data tiles.
+      // Detach and dispose the source immediately to stop in-flight range reads.
+      // Layer disposal must wait for a new frame: OpenLayers nulls the layer in
+      // its cached frame state, which can race with debounced feature hit tests.
+      layer.setSource(null);
+      source.dispose();
+      map.once('postrender', function () {
+        return layer.dispose();
+      });
+      map.render();
       layerRef.current = undefined;
       setInitialized(false);
     };
@@ -6275,10 +6293,115 @@ var GeoTIFFLayer = function GeoTIFFLayer(_ref) {
   return null;
 };
 
-var STAC_ITEM_LOOKUP_WINDOW_MS = 60 * 60 * 1000;
-var STAC_ITEM_LOOKUP_WINDOW_INTERVAL_MULTIPLIER = 20;
-var STAC_GEOTIFF_FRAME_PRELOAD_RADIUS = 4;
-var resolvePreferredStyleName = function resolvePreferredStyleName(styleNames, currentStyle) {
+var STAC_VIEWPORT_BUFFER_RATIO = 0.25;
+var MAX_REUSED_BBOX_SIZE_RATIO = 4;
+// Only one COG is rendered at a time, so raster rendering can start while the
+// viewport is still broad enough to provide useful geographic context.
+var STAC_TILED_MINIMUM_ZOOM = 10;
+var MAX_STAC_QUERY_WIDTH_DEGREES = 120;
+var MAX_STAC_QUERY_HEIGHT_DEGREES = 90;
+var containsExtent = function containsExtent(container, extent) {
+  return container[0] <= extent[0] && container[1] <= extent[1] && container[2] >= extent[2] && container[3] >= extent[3];
+};
+var isBboxSizeReusable = function isBboxSizeReusable(currentBbox, viewportBbox) {
+  var currentWidth = currentBbox[2] - currentBbox[0];
+  var currentHeight = currentBbox[3] - currentBbox[1];
+  var viewportWidth = viewportBbox[2] - viewportBbox[0];
+  var viewportHeight = viewportBbox[3] - viewportBbox[1];
+  return currentWidth <= viewportWidth * MAX_REUSED_BBOX_SIZE_RATIO && currentHeight <= viewportHeight * MAX_REUSED_BBOX_SIZE_RATIO;
+};
+var roundCoordinate = function roundCoordinate(coordinate) {
+  return Number(coordinate.toFixed(5));
+};
+var getViewportBbox = function getViewportBbox(map) {
+  var _map$getSize, _map$getView;
+  var size = (_map$getSize = map.getSize) === null || _map$getSize === void 0 ? void 0 : _map$getSize.call(map);
+  var view = (_map$getView = map.getView) === null || _map$getView === void 0 ? void 0 : _map$getView.call(map);
+  if (!size || !(view !== null && view !== void 0 && view.calculateExtent)) {
+    return undefined;
+  }
+  var projection = view.getProjection();
+  var extent = transformExtent(view.calculateExtent(size), projection, 'EPSG:4326', 8);
+  if (!extent.every(Number.isFinite)) {
+    return undefined;
+  }
+  return extent.map(roundCoordinate);
+};
+var bufferBbox = function bufferBbox(extent) {
+  var bufferRatio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : STAC_VIEWPORT_BUFFER_RATIO;
+  var width = extent[2] - extent[0];
+  var height = extent[3] - extent[1];
+  if (width >= 360) {
+    return [-180, -90, 180, 90];
+  }
+  return [Math.max(-180, extent[0] - width * bufferRatio), Math.max(-90, extent[1] - height * bufferRatio), Math.min(180, extent[2] + width * bufferRatio), Math.min(90, extent[3] + height * bufferRatio)].map(roundCoordinate);
+};
+var isStacViewportBboxQueryable = function isStacViewportBboxQueryable(bbox) {
+  return Boolean((bbox === null || bbox === void 0 ? void 0 : bbox.length) === 4 && bbox.every(Number.isFinite) && bbox[2] - bbox[0] <= MAX_STAC_QUERY_WIDTH_DEGREES && bbox[3] - bbox[1] <= MAX_STAC_QUERY_HEIGHT_DEGREES);
+};
+var getNextStacViewportBbox = function getNextStacViewportBbox(currentBbox, viewportBbox) {
+  var bufferRatio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : STAC_VIEWPORT_BUFFER_RATIO;
+  if (bufferRatio === 0) {
+    return viewportBbox;
+  }
+  if (currentBbox && isStacViewportBboxQueryable(currentBbox) && isBboxSizeReusable(currentBbox, viewportBbox) && containsExtent(currentBbox, viewportBbox)) {
+    return currentBbox;
+  }
+  return bufferBbox(viewportBbox, bufferRatio);
+};
+var useStacViewportBbox = function useStacViewportBbox(map, enabled, minimumZoom) {
+  var bufferRatio = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : STAC_VIEWPORT_BUFFER_RATIO;
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    bbox = _React$useState2[0],
+    setBbox = _React$useState2[1];
+  React.useEffect(function () {
+    if (!map || !enabled) {
+      setBbox(undefined);
+      return function () {};
+    }
+    var updateBbox = function updateBbox() {
+      var _map$getView2, _map$getView2$call$ge, _map$getView2$call;
+      var zoom = (_map$getView2 = map.getView) === null || _map$getView2 === void 0 || (_map$getView2$call$ge = (_map$getView2$call = _map$getView2.call(map)).getZoom) === null || _map$getView2$call$ge === void 0 ? void 0 : _map$getView2$call$ge.call(_map$getView2$call);
+      if (minimumZoom !== undefined && (zoom === undefined || zoom < minimumZoom)) {
+        setBbox(undefined);
+        return;
+      }
+      var viewportBbox = getViewportBbox(map);
+      if (!viewportBbox) {
+        return;
+      }
+      setBbox(function (currentBbox) {
+        return getNextStacViewportBbox(currentBbox, viewportBbox, bufferRatio);
+      });
+    };
+    updateBbox();
+    var eventKey = map.on('moveend', updateBbox);
+    return function () {
+      eventKey && unByKey(eventKey);
+    };
+  }, [bufferRatio, enabled, map, minimumZoom]);
+  return bbox;
+};
+
+/* *
+ * 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 resolvePreferredStyleName$1 = function resolvePreferredStyleName(styleNames, currentStyle) {
   if (styleNames.length === 0) {
     return WMDefaultStyleName;
   }
@@ -6290,6 +6413,93 @@ var resolvePreferredStyleName = function resolvePreferredStyleName(styleNames, c
   }
   return styleNames[0];
 };
+
+var STAC_ITEM_LOOKUP_WINDOW_MS = 60 * 60 * 1000;
+var STAC_ITEM_LOOKUP_WINDOW_INTERVAL_MULTIPLIER = 20;
+// Tiled third-party collections can contain hundreds of spatial items per day.
+// Only discover the selected interval; adjacent frames are loaded on demand.
+var STAC_GEOTIFF_FRAME_PRELOAD_RADIUS = 4;
+var STAC_TILED_ITEM_PAGE_LIMIT = 100;
+var STAC_TILED_OVERVIEW_ITEM_PAGE_LIMIT = 1000;
+var isGlobalViewportBbox = function isGlobalViewportBbox(bbox) {
+  return Boolean((bbox === null || bbox === void 0 ? void 0 : bbox.length) === 4 && bbox.every(Number.isFinite) && bbox[0] <= -179 && bbox[1] <= -89 && bbox[2] >= 179 && bbox[3] >= 89);
+};
+var resolveStacItemQueryState = function resolveStacItemQueryState(_ref) {
+  var hasCollectionData = _ref.hasCollectionData,
+    isTiledCollection = _ref.isTiledCollection,
+    rasterViewportBbox = _ref.rasterViewportBbox,
+    shouldUseSpatialFilter = _ref.shouldUseSpatialFilter,
+    viewportBbox = _ref.viewportBbox;
+  var isTiledOverview = isTiledCollection && !rasterViewportBbox && Boolean(viewportBbox);
+  var isOverviewViewportQueryable = isStacViewportBboxQueryable(viewportBbox);
+  var itemQueryBbox = viewportBbox;
+  if (isTiledCollection) {
+    itemQueryBbox = isTiledOverview && !isOverviewViewportQueryable ? undefined : rasterViewportBbox !== null && rasterViewportBbox !== void 0 ? rasterViewportBbox : viewportBbox;
+  }
+  var isItemQueryEnabled = hasCollectionData && (!shouldUseSpatialFilter || (isTiledOverview ? isStacViewportBboxQueryable(viewportBbox) || isGlobalViewportBbox(viewportBbox) : isStacViewportBboxQueryable(itemQueryBbox)));
+  return {
+    isItemQueryEnabled: isItemQueryEnabled,
+    isTiledOverview: isTiledOverview,
+    itemQueryBbox: itemQueryBbox
+  };
+};
+var getSingleStacRasterItem = function getSingleStacRasterItem(frameItems, selectionBbox, preferredItemId) {
+  var preferredItem = frameItems.find(function (_ref2) {
+    var item = _ref2.item;
+    return item.id === preferredItemId;
+  });
+  if (preferredItem) {
+    return [{
+      item: preferredItem.item,
+      isSelected: true
+    }];
+  }
+  if (frameItems.length <= 1) {
+    return frameItems;
+  }
+  var selectedItems = frameItems.filter(function (_ref3) {
+    var isSelected = _ref3.isSelected;
+    return isSelected;
+  });
+  if ((selectionBbox === null || selectionBbox === void 0 ? void 0 : selectionBbox.length) !== 4) {
+    var _candidates = selectedItems.length > 0 ? selectedItems : frameItems;
+    var selectedCandidate = _toConsumableArray(_candidates).sort(function (first, second) {
+      return first.item.id.localeCompare(second.item.id);
+    })[0];
+    return [{
+      item: selectedCandidate.item,
+      isSelected: true
+    }];
+  }
+  var viewportCenter = [(selectionBbox[0] + selectionBbox[2]) / 2, (selectionBbox[1] + selectionBbox[3]) / 2];
+  var selectedItemsCoverViewportCenter = selectedItems.some(function (_ref4) {
+    var item = _ref4.item;
+    var bbox = item.bbox;
+    return (bbox === null || bbox === void 0 ? void 0 : bbox.length) === 4 && bbox[0] <= viewportCenter[0] && bbox[1] <= viewportCenter[1] && bbox[2] >= viewportCenter[0] && bbox[3] >= viewportCenter[1];
+  });
+  var candidates = selectedItems.length > 0 && selectedItemsCoverViewportCenter ? selectedItems : frameItems;
+  var getItemRank = function getItemRank(_ref5) {
+    var item = _ref5.item;
+    var bbox = item.bbox;
+    if ((bbox === null || bbox === void 0 ? void 0 : bbox.length) !== 4) {
+      return [1, Number.POSITIVE_INFINITY, item.id];
+    }
+    var containsCenter = bbox[0] <= viewportCenter[0] && bbox[1] <= viewportCenter[1] && bbox[2] >= viewportCenter[0] && bbox[3] >= viewportCenter[1];
+    var itemCenter = [(bbox[0] + bbox[2]) / 2, (bbox[1] + bbox[3]) / 2];
+    var centerDistance = Math.pow(itemCenter[0] - viewportCenter[0], 2) + Math.pow(itemCenter[1] - viewportCenter[1], 2);
+    return [containsCenter ? 0 : 1, centerDistance, item.id];
+  };
+  var sortedCandidates = _toConsumableArray(candidates).sort(function (first, second) {
+    var firstRank = getItemRank(first);
+    var secondRank = getItemRank(second);
+    return firstRank[0] - secondRank[0] || firstRank[1] - secondRank[1] || firstRank[2].localeCompare(secondRank[2]);
+  });
+  return [{
+    item: sortedCandidates[0].item,
+    isSelected: true
+  }];
+};
+var resolvePreferredStyleName = resolvePreferredStyleName$1;
 var getTimeIntervalInMilliseconds = function getTimeIntervalInMilliseconds(interval) {
   var supportedInterval = (interval === null || interval === void 0 ? void 0 : interval.year) === 0 && (interval === null || interval === void 0 ? void 0 : interval.month) === 0 ? interval : undefined;
   if (!supportedInterval) {
@@ -6311,10 +6521,10 @@ var getStacItemLookupWindowForTimes = function getStacItemLookupWindowForTimes(t
   var halfWindow = windowMs / 2;
   return [new Date(Math.min.apply(Math, _toConsumableArray(validTimes)) - halfWindow).toISOString(), new Date(Math.max.apply(Math, _toConsumableArray(validTimes)) + halfWindow).toISOString()];
 };
-var isStacItemLookupWindowValidForTime = function isStacItemLookupWindowValidForTime(_ref, timeValue, requiredMarginMs) {
-  var _ref2 = _slicedToArray(_ref, 2),
-    startDate = _ref2[0],
-    endDate = _ref2[1];
+var isStacItemLookupWindowValidForTime = function isStacItemLookupWindowValidForTime(_ref6, timeValue, requiredMarginMs) {
+  var _ref7 = _slicedToArray(_ref6, 2),
+    startDate = _ref7[0],
+    endDate = _ref7[1];
   if (!startDate || !endDate || !timeValue) {
     return false;
   }
@@ -6409,7 +6619,7 @@ var getRequiredLookupMarginInMilliseconds = function getRequiredLookupMarginInMi
   })));
   return requiredMarginMs > 0 ? requiredMarginMs : fallbackMarginMs;
 };
-var getStacFrameItemsToRender = function getStacFrameItemsToRender(items, timeValue, frameTargetTimes) {
+var getStacFrameItemsToRender = function getStacFrameItemsToRender(items, timeValue, frameTargetTimes, selectionBbox, frameTimeToleranceMs, selectionTimeToleranceMs) {
   if (!items || !timeValue) {
     return [];
   }
@@ -6437,18 +6647,49 @@ var getStacFrameItemsToRender = function getStacFrameItemsToRender(items, timeVa
   if (itemsByTime.length === 0) {
     return [];
   }
-  var selectedItemIndex = getClosestTimeIndex(itemsByTime, target);
+  var frames = itemsByTime.map(function (itemWithTime) {
+    return {
+      items: [itemWithTime],
+      time: itemWithTime.time
+    };
+  });
+  var selectionCenter = (selectionBbox === null || selectionBbox === void 0 ? void 0 : selectionBbox.length) === 4 ? [(selectionBbox[0] + selectionBbox[2]) / 2, (selectionBbox[1] + selectionBbox[3]) / 2] : undefined;
+  var viewportFrameIndexes = selectionCenter ? frames.flatMap(function (frame, frameIndex) {
+    return (selectionTimeToleranceMs === undefined || Math.abs(frame.time - target) <= selectionTimeToleranceMs) && frame.items.some(function (_ref8) {
+      var item = _ref8.item;
+      var bbox = item.bbox;
+      return (bbox === null || bbox === void 0 ? void 0 : bbox.length) === 4 && bbox[0] <= selectionCenter[0] && bbox[1] <= selectionCenter[1] && bbox[2] >= selectionCenter[0] && bbox[3] >= selectionCenter[1];
+    }) ? [frameIndex] : [];
+  }) : [];
+  var closestViewportFrameIndex = viewportFrameIndexes.length > 0 ? viewportFrameIndexes[getClosestTimeIndex(viewportFrameIndexes.map(function (frameIndex) {
+    return frames[frameIndex];
+  }), target)] : -1;
+  var selectedFrameIndex = getClosestTimeIndex(frames, target);
+  if (closestViewportFrameIndex >= 0) {
+    selectedFrameIndex = closestViewportFrameIndex;
+  }
+  if (selectionTimeToleranceMs !== undefined && Math.abs(frames[selectedFrameIndex].time - target) > selectionTimeToleranceMs) {
+    return [];
+  }
   var targetTimes = frameTargetTimes && frameTargetTimes.length > 0 ? frameTargetTimes : [target];
-  var itemIndexesToRender = Array.from(new Set([selectedItemIndex].concat(_toConsumableArray(targetTimes.map(function (targetTime) {
-    return getClosestTimeIndex(itemsByTime, targetTime);
+  var nearbyFrameIndexes = frameTimeToleranceMs !== undefined ? frames.map(function (_frame, frameIndex) {
+    return frameIndex;
+  }).filter(function (frameIndex) {
+    return Math.abs(frames[frameIndex].time - target) <= frameTimeToleranceMs;
+  }) : [];
+  var frameIndexesToRender = Array.from(new Set(frameTimeToleranceMs !== undefined ? nearbyFrameIndexes : [selectedFrameIndex].concat(_toConsumableArray(targetTimes.map(function (targetTime) {
+    return getClosestTimeIndex(frames, targetTime);
   }))))).sort(function (firstIndex, secondIndex) {
-    return itemsByTime[firstIndex].time - itemsByTime[secondIndex].time || itemsByTime[firstIndex].index - itemsByTime[secondIndex].index;
+    return frames[firstIndex].time - frames[secondIndex].time;
   });
-  return itemIndexesToRender.map(function (itemIndex) {
-    return {
-      item: itemsByTime[itemIndex].item,
-      isSelected: itemIndex === selectedItemIndex
-    };
+  return frameIndexesToRender.flatMap(function (frameIndex) {
+    return frames[frameIndex].items.map(function (_ref9) {
+      var item = _ref9.item;
+      return {
+        item: item,
+        isSelected: frameIndex === selectedFrameIndex
+      };
+    });
   });
 };
 
@@ -6469,6 +6710,24 @@ var getStacFrameItemsToRender = function getStacFrameItemsToRender(items, timeVa
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
+var STAC_ASSET_STYLE_PREFIX = 'asset:';
+var getStacAssetKeyFromStyle = function getStacAssetKeyFromStyle(styleName) {
+  return styleName !== null && styleName !== void 0 && styleName.startsWith(STAC_ASSET_STYLE_PREFIX) ? styleName.slice(STAC_ASSET_STYLE_PREFIX.length) : undefined;
+};
+var isGeoTIFFAsset = function isGeoTIFFAsset(asset) {
+  var _asset$type$toLowerCa, _asset$type, _asset$href$toLowerCa, _asset$href;
+  var type = (_asset$type$toLowerCa = (_asset$type = asset.type) === null || _asset$type === void 0 ? void 0 : _asset$type.toLowerCase()) !== null && _asset$type$toLowerCa !== void 0 ? _asset$type$toLowerCa : '';
+  var href = (_asset$href$toLowerCa = (_asset$href = asset.href) === null || _asset$href === void 0 ? void 0 : _asset$href.toLowerCase()) !== null && _asset$href$toLowerCa !== void 0 ? _asset$href$toLowerCa : '';
+  return type.includes('geotiff') || /\.tiff?(?:$|[?#])/.test(href);
+};
+var isBrowserReadableGeoTIFFAsset = function isBrowserReadableGeoTIFFAsset(asset) {
+  var _exec;
+  if (!asset.href || !isGeoTIFFAsset(asset)) {
+    return false;
+  }
+  var scheme = (_exec = /^([a-z][a-z\d+.-]*):/i.exec(asset.href)) === null || _exec === void 0 ? void 0 : _exec[1].toLowerCase();
+  return !scheme || scheme === 'http' || scheme === 'https';
+};
 /**
  * Converts a STAC render extension colormap to an OpenLayers WebGLTile palette style.
  *
@@ -6537,6 +6796,66 @@ var getRendersAsStyles = function getRendersAsStyles(renders) {
     };
   });
 };
+var getStacAssetStyles = function getStacAssetStyles(itemAssets) {
+  return Object.entries(itemAssets !== null && itemAssets !== void 0 ? itemAssets : {}).filter(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      asset = _ref4[1];
+    return isGeoTIFFAsset(asset);
+  }).sort(function (_ref5, _ref6) {
+    var _ref7 = _slicedToArray(_ref5, 2),
+      firstKey = _ref7[0],
+      firstAsset = _ref7[1];
+    var _ref8 = _slicedToArray(_ref6, 2),
+      secondKey = _ref8[0],
+      secondAsset = _ref8[1];
+    var priority = function priority(key, roles) {
+      if (roles !== null && roles !== void 0 && roles.includes('visual') || key === 'visual') {
+        return 0;
+      }
+      if (key === 'data') {
+        return 1;
+      }
+      return roles !== null && roles !== void 0 && roles.includes('data') ? 2 : 3;
+    };
+    return priority(firstKey, firstAsset.roles) - priority(secondKey, secondAsset.roles) || firstKey.localeCompare(secondKey);
+  }).map(function (_ref9) {
+    var _asset$title;
+    var _ref0 = _slicedToArray(_ref9, 2),
+      assetKey = _ref0[0],
+      asset = _ref0[1];
+    return {
+      name: "".concat(STAC_ASSET_STYLE_PREFIX).concat(assetKey),
+      title: (_asset$title = asset.title) !== null && _asset$title !== void 0 ? _asset$title : assetKey,
+      legendURL: '',
+      "abstract": ''
+    };
+  });
+};
+var getStacCollectionStyles = function getStacCollectionStyles(renders, itemAssets) {
+  return [].concat(_toConsumableArray(renders ? getRendersAsStyles(renders) : []), _toConsumableArray(getStacAssetStyles(itemAssets)));
+};
+var resolveStacAssetKey = function resolveStacAssetKey(assets, styleName, renderAssets, configuredAssetKey) {
+  var _Object$entries$find, _Object$entries$find2, _Object$entries$find3;
+  var candidates = [configuredAssetKey, getStacAssetKeyFromStyle(styleName)].concat(_toConsumableArray(renderAssets !== null && renderAssets !== void 0 ? renderAssets : []), [(_Object$entries$find = Object.entries(assets).find(function (_ref1) {
+    var _asset$roles;
+    var _ref10 = _slicedToArray(_ref1, 2),
+      key = _ref10[0],
+      asset = _ref10[1];
+    return key === 'visual' || ((_asset$roles = asset.roles) === null || _asset$roles === void 0 ? void 0 : _asset$roles.includes('visual'));
+  })) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[0], assets.data ? 'data' : undefined, (_Object$entries$find2 = Object.entries(assets).find(function (_ref11) {
+    var _asset$roles2;
+    var _ref12 = _slicedToArray(_ref11, 2),
+      asset = _ref12[1];
+    return (_asset$roles2 = asset.roles) === null || _asset$roles2 === void 0 ? void 0 : _asset$roles2.includes('data');
+  })) === null || _Object$entries$find2 === void 0 ? void 0 : _Object$entries$find2[0], (_Object$entries$find3 = Object.entries(assets).find(function (_ref13) {
+    var _ref14 = _slicedToArray(_ref13, 2),
+      asset = _ref14[1];
+    return isBrowserReadableGeoTIFFAsset(asset);
+  })) === null || _Object$entries$find3 === void 0 ? void 0 : _Object$entries$find3[0]]);
+  return candidates.find(function (candidate) {
+    return Boolean(candidate && assets[candidate] && isBrowserReadableGeoTIFFAsset(assets[candidate]));
+  });
+};
 
 var STAC_ITEM_PAGE_LIMIT = 1000;
 var STAC_TEMPORAL_STEP_SAMPLE_LIMIT = 11;
@@ -6600,15 +6919,31 @@ var fetchStacJson = /*#__PURE__*/function () {
     return _ref2.apply(this, arguments);
   };
 }();
-var getStacItemsUrl = function getStacItemsUrl(stacBaseUrlWithCollection, startDate, endDate) {
+var getStacItemsUrl = function getStacItemsUrl(stacBaseUrlWithCollection, startDate, endDate, bbox) {
   var normalizedUrl = stacBaseUrlWithCollection.trim().replace(/\/+$/, '');
   var searchParams = new URLSearchParams();
   if (startDate && endDate) {
     searchParams.set('datetime', "".concat(startDate, "/").concat(endDate));
   }
+  if ((bbox === null || bbox === void 0 ? void 0 : bbox.length) === 4 && bbox.every(Number.isFinite)) {
+    searchParams.set('bbox', bbox.join(','));
+  }
   var queryString = searchParams.toString();
   return "".concat(normalizedUrl, "/items").concat(queryString ? "?".concat(queryString) : '');
 };
+var STAC_ITEM_SEARCH_FIELDS_CONFORMANCE = 'https://api.stacspec.org/v1.0.0/item-search#fields';
+var getStacItemSearchUrl = function getStacItemSearchUrl(searchUrl, collectionId, startDate, endDate, bbox) {
+  var url = new URL(searchUrl);
+  url.searchParams.set('collections', collectionId);
+  if (startDate && endDate) {
+    url.searchParams.set('datetime', "".concat(startDate, "/").concat(endDate));
+  }
+  if ((bbox === null || bbox === void 0 ? void 0 : bbox.length) === 4 && bbox.every(Number.isFinite)) {
+    url.searchParams.set('bbox', bbox.join(','));
+  }
+  url.searchParams.set('fields', ['+id', '+bbox', '+geometry', '+properties.datetime', '-assets', '-links'].join(','));
+  return url.toString();
+};
 var getPaginatedStacItemsUrl = function getPaginatedStacItemsUrl(baseUrl, itemLimit, offset) {
   var url = new URL(baseUrl);
   url.searchParams.set('limit', "".concat(itemLimit));
@@ -6701,19 +7036,24 @@ var fetchStacItemsPage = /*#__PURE__*/function () {
 var fetchStacItemsWithPagination = /*#__PURE__*/function () {
   var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8(baseUrl) {
     var itemLimit,
+      signal,
+      maximumPages,
       items,
       visitedUrls,
       _fetchPage,
-      _args8 = arguments;
+      _args8 = arguments,
+      _t4;
     return _regenerator().w(function (_context8) {
-      while (1) switch (_context8.n) {
+      while (1) switch (_context8.p = _context8.n) {
         case 0:
           itemLimit = _args8.length > 1 && _args8[1] !== undefined ? _args8[1] : STAC_ITEM_PAGE_LIMIT;
+          signal = _args8.length > 2 ? _args8[2] : undefined;
+          maximumPages = _args8.length > 3 ? _args8[3] : undefined;
           items = [];
           visitedUrls = new Set();
           _fetchPage = /*#__PURE__*/function () {
             var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(requestUrl, offset, isUsingNextLinks, page) {
-              var collection, pageItems, nextUrl, nextOffset;
+              var collection, pageItems, numberMatched, nextUrl, nextOffset;
               return _regenerator().w(function (_context7) {
                 while (1) switch (_context7.n) {
                   case 0:
@@ -6731,30 +7071,45 @@ var fetchStacItemsWithPagination = /*#__PURE__*/function () {
                   case 2:
                     visitedUrls.add(requestUrl);
                     _context7.n = 3;
-                    return fetchStacCollection(requestUrl);
+                    return fetchStacJson(requestUrl, {
+                      signal: signal
+                    });
                   case 3:
                     collection = _context7.v;
                     pageItems = collection.features || [];
                     items.push.apply(items, _toConsumableArray(pageItems));
-                    nextUrl = getNextLinkUrl(collection, requestUrl);
-                    if (!nextUrl) {
+                    if (!(maximumPages !== undefined && page + 1 >= maximumPages)) {
                       _context7.n = 4;
                       break;
                     }
-                    return _context7.a(2, _fetchPage(nextUrl, offset, true, page + 1));
+                    return _context7.a(2, items);
                   case 4:
-                    if (!isUsingNextLinks) {
+                    numberMatched = collection.numberMatched; // Some APIs still return a next link after the reported total is reached.
+                    if (!(typeof numberMatched === 'number' && Number.isFinite(numberMatched) && items.length >= numberMatched)) {
                       _context7.n = 5;
                       break;
                     }
                     return _context7.a(2, items);
                   case 5:
-                    if (!(pageItems.length < itemLimit)) {
+                    nextUrl = getNextLinkUrl(collection, requestUrl);
+                    if (!nextUrl) {
                       _context7.n = 6;
                       break;
                     }
-                    return _context7.a(2, items);
+                    return _context7.a(2, _fetchPage(nextUrl, offset, true, page + 1));
                   case 6:
+                    if (!isUsingNextLinks) {
+                      _context7.n = 7;
+                      break;
+                    }
+                    return _context7.a(2, items);
+                  case 7:
+                    if (!(pageItems.length < itemLimit)) {
+                      _context7.n = 8;
+                      break;
+                    }
+                    return _context7.a(2, items);
+                  case 8:
                     nextOffset = offset + itemLimit;
                     return _context7.a(2, _fetchPage(getPaginatedStacItemsUrl(baseUrl, itemLimit, nextOffset), nextOffset, false, page + 1));
                 }
@@ -6764,9 +7119,23 @@ var fetchStacItemsWithPagination = /*#__PURE__*/function () {
               return _ref8.apply(this, arguments);
             };
           }();
-          return _context8.a(2, _fetchPage(getPaginatedStacItemsUrl(baseUrl, itemLimit, 0), 0, false, 0));
+          _context8.p = 1;
+          _context8.n = 2;
+          return _fetchPage(getPaginatedStacItemsUrl(baseUrl, itemLimit, 0), 0, false, 0);
+        case 2:
+          return _context8.a(2, _context8.v);
+        case 3:
+          _context8.p = 3;
+          _t4 = _context8.v;
+          if (!(signal !== null && signal !== void 0 && signal.aborted || items.length === 0)) {
+            _context8.n = 4;
+            break;
+          }
+          throw _t4;
+        case 4:
+          return _context8.a(2, items);
       }
-    }, _callee8);
+    }, _callee8, null, [[1, 3]]);
   }));
   return function fetchStacItemsWithPagination(_x8) {
     return _ref7.apply(this, arguments);
@@ -6861,7 +7230,7 @@ var stacCatalogCollectionToLayerProps = function stacCatalogCollectionToLayerPro
   var _collection$title, _collection$descripti, _collection$keywords;
   var geographicBoundingBox = getStacGeographicBoundingBox(collection.extent);
   var temporalDimension = getStacTemporalDimension(collection.extent);
-  var styles = collection.renders ? getRendersAsStyles(collection.renders) : undefined;
+  var styles = getStacCollectionStyles(collection.renders, collection.item_assets);
   return _objectSpread2(_objectSpread2(_objectSpread2({
     name: collection.id,
     title: (_collection$title = collection.title) !== null && _collection$title !== void 0 ? _collection$title : collection.id,
@@ -6902,22 +7271,17 @@ var useStacCollection = function useStacCollection(stacBaseUrlWithCollection) {
     enabled: stacBaseUrlWithCollection.length > 0 && enabled
   });
 };
-var useStacItems = function useStacItems(stacBaseUrlWithCollection, startDate, endDate) {
+var useStacCatalogRoot = function useStacCatalogRoot(stacRootUrl) {
+  var enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   return useQuery({
     staleTime: DEFAULT_STALE_TIME,
-    queryKey: ['useStacItems', stacBaseUrlWithCollection, startDate, endDate],
+    queryKey: [stacRootUrl, 'useStacCatalogRoot'],
     queryFn: function () {
       var _queryFn2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-        var queryUrl, items;
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.n) {
             case 0:
-              queryUrl = getStacItemsUrl(stacBaseUrlWithCollection, startDate, endDate);
-              _context2.n = 1;
-              return fetchStacItemsWithPagination(queryUrl);
-            case 1:
-              items = _context2.v;
-              return _context2.a(2, items);
+              return _context2.a(2, fetchStacCatalogRoot(stacRootUrl));
           }
         }, _callee2);
       }));
@@ -6926,7 +7290,64 @@ var useStacItems = function useStacItems(stacBaseUrlWithCollection, startDate, e
       }
       return queryFn;
     }(),
-    enabled: stacBaseUrlWithCollection.length > 0 && !!startDate && !!endDate
+    enabled: stacRootUrl.length > 0 && enabled
+  });
+};
+var useStacItems = function useStacItems(stacBaseUrlWithCollection, startDate, endDate, bbox) {
+  var enabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  var itemLimit = arguments.length > 5 ? arguments[5] : undefined;
+  var maximumPages = arguments.length > 6 ? arguments[6] : undefined;
+  return useQuery({
+    staleTime: DEFAULT_STALE_TIME,
+    queryKey: ['useStacItems', stacBaseUrlWithCollection, startDate, endDate, bbox, itemLimit, maximumPages],
+    queryFn: function () {
+      var _queryFn3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(_ref) {
+        var signal, queryUrl, items;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              signal = _ref.signal;
+              queryUrl = getStacItemsUrl(stacBaseUrlWithCollection, startDate, endDate, bbox);
+              _context3.n = 1;
+              return fetchStacItemsWithPagination(queryUrl, itemLimit, signal, maximumPages);
+            case 1:
+              items = _context3.v;
+              return _context3.a(2, items);
+          }
+        }, _callee3);
+      }));
+      function queryFn(_x) {
+        return _queryFn3.apply(this, arguments);
+      }
+      return queryFn;
+    }(),
+    enabled: stacBaseUrlWithCollection.length > 0 && !!startDate && !!endDate && enabled
+  });
+};
+var useStacOverviewItems = function useStacOverviewItems(searchUrl, collectionId, startDate, endDate, bbox) {
+  var enabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
+  var itemLimit = arguments.length > 6 ? arguments[6] : undefined;
+  return useQuery({
+    staleTime: DEFAULT_STALE_TIME,
+    queryKey: ['useStacOverviewItems', searchUrl, collectionId, startDate, endDate, bbox, itemLimit],
+    queryFn: function () {
+      var _queryFn4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(_ref2) {
+        var signal, queryUrl;
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.n) {
+            case 0:
+              signal = _ref2.signal;
+              queryUrl = getStacItemSearchUrl(searchUrl, collectionId, startDate, endDate, bbox);
+              return _context4.a(2, fetchStacItemsWithPagination(queryUrl, itemLimit, signal));
+          }
+        }, _callee4);
+      }));
+      function queryFn(_x2) {
+        return _queryFn4.apply(this, arguments);
+      }
+      return queryFn;
+    }(),
+    enabled: searchUrl.length > 0 && collectionId.length > 0 && !!startDate && !!endDate && enabled
   });
 };
 var useStacTemporalStepItems = function useStacTemporalStepItems(stacBaseUrlWithCollection, startDate, endDate) {
@@ -6935,18 +7356,18 @@ var useStacTemporalStepItems = function useStacTemporalStepItems(stacBaseUrlWith
     staleTime: DEFAULT_STALE_TIME,
     queryKey: ['useStacTemporalStepItems', stacBaseUrlWithCollection, startDate, endDate],
     queryFn: function () {
-      var _queryFn3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+      var _queryFn5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
         var queryUrl;
-        return _regenerator().w(function (_context3) {
-          while (1) switch (_context3.n) {
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.n) {
             case 0:
               queryUrl = getStacItemsUrl(stacBaseUrlWithCollection, startDate, endDate);
-              return _context3.a(2, fetchStacItemsPage(queryUrl));
+              return _context5.a(2, fetchStacItemsPage(queryUrl));
           }
-        }, _callee3);
+        }, _callee5);
       }));
       function queryFn() {
-        return _queryFn3.apply(this, arguments);
+        return _queryFn5.apply(this, arguments);
       }
       return queryFn;
     }(),
@@ -6972,17 +7393,56 @@ var useStacTemporalStepItems = function useStacTemporalStepItems(stacBaseUrlWith
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
 var DEFAULT_STAC_TEMPORAL_STEP = 'PT1H';
+var STAC_BBOX_COMPARISON_TOLERANCE = 1e-6;
+var hasSameBboxAndDifferentTimes = function hasSameBboxAndDifferentTimes(items) {
+  if (items.length < 2) {
+    return false;
+  }
+  var firstBbox = items[0].bbox;
+  if ((firstBbox === null || firstBbox === void 0 ? void 0 : firstBbox.length) !== 4 || !firstBbox.every(function (coordinate) {
+    return Number.isFinite(coordinate);
+  })) {
+    return false;
+  }
+  var times = new Set();
+  var _iterator = _createForOfIteratorHelper(items),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _item$properties$date, _item$bbox;
+      var item = _step.value;
+      var itemTime = new Date((_item$properties$date = item.properties.datetime) !== null && _item$properties$date !== void 0 ? _item$properties$date : '').getTime();
+      if (!Number.isFinite(itemTime) || ((_item$bbox = item.bbox) === null || _item$bbox === void 0 ? void 0 : _item$bbox.length) !== firstBbox.length || !item.bbox.every(function (coordinate, index) {
+        return Number.isFinite(coordinate) && Math.abs(coordinate - firstBbox[index]) <= STAC_BBOX_COMPARISON_TOLERANCE;
+      })) {
+        return false;
+      }
+      times.add(itemTime);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return times.size > 1;
+};
+var isSpatiallyTiledStacCollection = function isSpatiallyTiledStacCollection(dataLayout, hasItemAssets) {
+  var sampleItems = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return dataLayout === 'spatial-tiles' || dataLayout !== 'temporal' && hasItemAssets && !hasSameBboxAndDifferentTimes(sampleItems);
+};
 /**
  * Infers the temporal step (time resolution) from STAC collection metadata and items.
  * Attempts multiple strategies:
  * 1. Look for 'temporal-resolution' in collection properties
- * 2. Calculate from actual item timestamps
- * 3. Fall back to PT1H if unable to determine
+ * 2. Use a daily step for spatially tiled collections
+ * 3. Calculate from actual item timestamps
+ * 4. Fall back to PT1H if unable to determine
  *
  * @param collection - STAC collection with metadata and items
  * @returns ISO 8601 duration string (e.g., 'PT5M', 'PT1H', 'P1D')
  */
 var inferTemporalStep = function inferTemporalStep(collection, items) {
+  var dataLayout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'auto';
   if (!collection) {
     return DEFAULT_STAC_TEMPORAL_STEP;
   }
@@ -6993,6 +7453,11 @@ var inferTemporalStep = function inferTemporalStep(collection, items) {
       return resolution;
     }
   }
+  // Item datetimes in a spatially tiled collection describe individual tiles,
+  // so differences between them are not animation timesteps.
+  if (isSpatiallyTiledStacCollection(dataLayout, Boolean(collection.item_assets), items)) {
+    return 'P1D';
+  }
   // Strategy 2: Calculate from actual item timestamps
   var itemsToInferFrom = items && items.length >= 2 ? items : collection.features;
   if (itemsToInferFrom && itemsToInferFrom.length >= 2) {
@@ -7126,8 +7591,9 @@ var useGetStacGeoTIFFWMLayerInstance = function useGetStacGeoTIFFWMLayerInstance
   }, [name, onLayerError, serviceUrl]);
   return layer;
 };
-var useGetStacGeoTIFFLayerInstance = function useGetStacGeoTIFFLayerInstance(stacCollectionURL, parameter, layerId, onInitializeLayer) {
-  var _collectionInfo$data, _collectionInfo$data2;
+var useGetStacGeoTIFFLayerInstance = function useGetStacGeoTIFFLayerInstance(stacCollectionURL, parameter, layerId, onInitializeLayer, configuredTemporalStep) {
+  var _collectionInfo$data, _collectionInfo$data2, _collectionInfo$data3;
+  var dataLayout = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'auto';
   var wmLayer = useGetStacGeoTIFFWMLayerInstance(stacCollectionURL, parameter, layerId);
   var collectionInfo = useStacCollection(stacCollectionURL);
   var _React$useState3 = React.useState(undefined),
@@ -7140,13 +7606,14 @@ var useGetStacGeoTIFFLayerInstance = function useGetStacGeoTIFFLayerInstance(sta
     return collectionInfo.data ? new Date().toISOString() : undefined;
   }, [collectionInfo.data]);
   var extentEnd = (temporalInterval === null || temporalInterval === void 0 ? void 0 : temporalInterval[1]) || fallbackExtentEnd;
-  var shouldFetchTemporalStepItems = collectionInfo.isFetched && !!extentStart && !!extentEnd && !hasTemporalResolution((_collectionInfo$data2 = collectionInfo.data) === null || _collectionInfo$data2 === void 0 ? void 0 : _collectionInfo$data2.properties);
+  var isSpatiallyTiledCollection = isSpatiallyTiledStacCollection(dataLayout, Boolean((_collectionInfo$data2 = collectionInfo.data) === null || _collectionInfo$data2 === void 0 ? void 0 : _collectionInfo$data2.item_assets));
+  var shouldFetchTemporalStepItems = collectionInfo.isFetched && !!extentStart && !!extentEnd && !hasTemporalResolution((_collectionInfo$data3 = collectionInfo.data) === null || _collectionInfo$data3 === void 0 ? void 0 : _collectionInfo$data3.properties) && !isSpatiallyTiledCollection && !configuredTemporalStep;
   var temporalStepItems = useStacTemporalStepItems(stacCollectionURL, extentStart || undefined, extentEnd, shouldFetchTemporalStepItems);
   var temporalStepItemsReady = !shouldFetchTemporalStepItems || temporalStepItems.isFetched || temporalStepItems.isError;
   React.useEffect(function () {
     if (wmLayer && collectionInfo.data && collectionInfo.isFetched && extentStart && extentEnd && temporalStepItemsReady) {
       // Infer temporal step from collection metadata and items instead of hardcoding a fixed step.
-      var temporalStep = inferTemporalStep(collectionInfo.data, temporalStepItems.data);
+      var temporalStep = configuredTemporalStep || inferTemporalStep(collectionInfo.data, temporalStepItems.data, dataLayout);
       var timeRangeDurationFromStacCollection = "".concat(extentStart, "/").concat(extentEnd, "/").concat(temporalStep);
       if (!wmLayer.getDimension('time')) {
         var dim = new WMJSDimension({
@@ -7164,7 +7631,7 @@ var useGetStacGeoTIFFLayerInstance = function useGetStacGeoTIFFLayerInstance(sta
       setTimeRangeDuration(timeRangeDurationFromStacCollection);
       wmLayer.isConfigured = true;
     }
-  }, [collectionInfo.data, collectionInfo.isFetched, extentEnd, extentStart, temporalStepItems.data, temporalStepItemsReady, wmLayer]);
+  }, [collectionInfo.data, collectionInfo.isFetched, configuredTemporalStep, dataLayout, extentEnd, extentStart, temporalStepItems.data, temporalStepItemsReady, wmLayer]);
   React.useEffect(function () {
     var initializeLayer = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
@@ -7215,52 +7682,240 @@ var useGetStacGeoTIFFLayerInstance = function useGetStacGeoTIFFLayerInstance(sta
   return wmLayer;
 };
 
-var TimeAwareGeoTIFFLayer = function TimeAwareGeoTIFFLayer(_ref) {
-  var _collectionData$rende2, _wmLayer$getDimension;
-  var stacCollectionUrl = _ref.stacCollectionUrl,
-    layerName = _ref.layerName;
-    _ref.style;
-    var styleName = _ref.styleName,
-    zIndex = _ref.zIndex,
-    opacity = _ref.opacity,
-    _ref$dimensions = _ref.dimensions,
-    dimensions = _ref$dimensions === void 0 ? [] : _ref$dimensions,
-    layerId = _ref.layerId,
-    _ref$visible = _ref.visible,
-    visible = _ref$visible === void 0 ? true : _ref$visible,
-    onInitializeLayer = _ref.onInitializeLayer;
+var STAC_LOOKUP_HALF_WINDOW_MS = 30 * 60 * 1000;
+var STAC_TILED_LOOKUP_WINDOW_MS = STAC_LOOKUP_HALF_WINDOW_MS * 2;
+var STAC_OVERVIEW_TIME_TOLERANCE_MS = STAC_LOOKUP_HALF_WINDOW_MS;
+var STAC_TILED_TIMELINE_TOLERANCE_MS = STAC_LOOKUP_HALF_WINDOW_MS;
+var stacFootprintStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(0, 145, 234, 0.08)'
+  }),
+  stroke: new Stroke({
+    color: 'rgba(0, 145, 234, 0.9)',
+    width: 2
+  })
+});
+var hoveredStacFootprintStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(0, 145, 234, 0.2)'
+  }),
+  stroke: new Stroke({
+    color: 'rgba(0, 145, 234, 1)',
+    width: 3
+  })
+});
+var hoveredRasterStacFootprintStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(0, 0, 0, 0)'
+  }),
+  stroke: new Stroke({
+    color: 'rgba(0, 145, 234, 1)',
+    width: 3
+  })
+});
+var selectedStacFootprintStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255, 193, 7, 0)'
+  }),
+  stroke: new Stroke({
+    color: 'rgba(255, 193, 7, 1)',
+    width: 3
+  })
+});
+var hoveredSelectedStacFootprintStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255, 193, 7, 0.2)'
+  }),
+  stroke: new Stroke({
+    color: 'rgba(255, 193, 7, 1)',
+    width: 3
+  })
+});
+var hoveredSelectedRasterStacFootprintStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(0, 0, 0, 0)'
+  }),
+  stroke: new Stroke({
+    color: 'rgba(255, 193, 7, 1)',
+    width: 3
+  })
+});
+var transparentStacFootprintStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(0, 0, 0, 0)'
+  }),
+  stroke: new Stroke({
+    color: 'rgba(0, 0, 0, 0)',
+    width: 1
+  })
+});
+var bboxesIntersect = function bboxesIntersect(first, second) {
+  return first.length === 4 && second.length === 4 && first[0] <= second[2] && first[2] >= second[0] && first[1] <= second[3] && first[3] >= second[1];
+};
+var useStacItemsQueryStrategy = function useStacItemsQueryStrategy(_ref) {
+  var _collectionData$links, _catalogRootQuery$dat, _catalogRootQuery$dat2, _collectionData$id;
+  var collectionData = _ref.collectionData,
+    isItemQueryEnabled = _ref.isItemQueryEnabled,
+    isTiledCollection = _ref.isTiledCollection,
+    isTiledOverview = _ref.isTiledOverview,
+    itemEndDate = _ref.itemEndDate,
+    itemQueryBbox = _ref.itemQueryBbox,
+    itemStartDate = _ref.itemStartDate,
+    stacCollectionUrl = _ref.stacCollectionUrl;
+  var stacRootUrl = collectionData === null || collectionData === void 0 || (_collectionData$links = collectionData.links.find(function (_ref2) {
+    var rel = _ref2.rel;
+    return rel === 'root';
+  })) === null || _collectionData$links === void 0 ? void 0 : _collectionData$links.href;
+  var catalogRootQuery = useStacCatalogRoot(stacRootUrl !== null && stacRootUrl !== void 0 ? stacRootUrl : '', isTiledOverview);
+  var itemSearchUrl = (_catalogRootQuery$dat = catalogRootQuery.data) === null || _catalogRootQuery$dat === void 0 || (_catalogRootQuery$dat = _catalogRootQuery$dat.links.find(function (_ref3) {
+    var rel = _ref3.rel,
+      method = _ref3.method;
+    return rel === 'search' && (!method || method.toUpperCase() === 'GET');
+  })) === null || _catalogRootQuery$dat === void 0 ? void 0 : _catalogRootQuery$dat.href;
+  var conformsToItemSearchFields = (_catalogRootQuery$dat2 = catalogRootQuery.data) === null || _catalogRootQuery$dat2 === void 0 || (_catalogRootQuery$dat2 = _catalogRootQuery$dat2.conformsTo) === null || _catalogRootQuery$dat2 === void 0 ? void 0 : _catalogRootQuery$dat2.some(function (conformance) {
+    return conformance.replace(/\/$/, '') === STAC_ITEM_SEARCH_FIELDS_CONFORMANCE;
+  });
+  var supportsItemSearchFields = Boolean(itemSearchUrl && conformsToItemSearchFields);
+  var isOverviewCapabilityResolved = !stacRootUrl || catalogRootQuery.isSuccess || catalogRootQuery.isError;
+  var canUseLightweightOverview = isTiledOverview && supportsItemSearchFields;
+  var overviewItemsQuery = useStacOverviewItems(itemSearchUrl !== null && itemSearchUrl !== void 0 ? itemSearchUrl : '', (_collectionData$id = collectionData === null || collectionData === void 0 ? void 0 : collectionData.id) !== null && _collectionData$id !== void 0 ? _collectionData$id : '', itemStartDate, itemEndDate, itemQueryBbox, isItemQueryEnabled && canUseLightweightOverview, STAC_TILED_OVERVIEW_ITEM_PAGE_LIMIT);
+  var shouldUseLightweightOverview = canUseLightweightOverview && !overviewItemsQuery.isError;
+  var shouldUseFullItemQuery = !isTiledOverview || isTiledOverview && isOverviewCapabilityResolved && !shouldUseLightweightOverview;
+  var fullItemsQuery = useStacItems(stacCollectionUrl, itemStartDate, itemEndDate, itemQueryBbox, isItemQueryEnabled && shouldUseFullItemQuery, isTiledCollection ? STAC_TILED_ITEM_PAGE_LIMIT : undefined);
+  var _ref4 = shouldUseLightweightOverview ? overviewItemsQuery : fullItemsQuery,
+    items = _ref4.data,
+    isFetching = _ref4.isFetching;
+  return {
+    items: items,
+    isFetching: isFetching
+  };
+};
+var useRetainedTiledItems = function useRetainedTiledItems(_ref5) {
+  var isFetching = _ref5.isFetching,
+    isTiledCollection = _ref5.isTiledCollection,
+    isTiledOverview = _ref5.isTiledOverview,
+    items = _ref5.items,
+    timeValue = _ref5.timeValue;
+  var lastTiledItemsRef = React.useRef(undefined);
+  React.useEffect(function () {
+    if (isTiledCollection && !isTiledOverview && items && items.length > 0) {
+      lastTiledItemsRef.current = {
+        items: items,
+        timeValue: timeValue
+      };
+    }
+  }, [isTiledCollection, isTiledOverview, items, timeValue]);
+  var lastTiledItems = lastTiledItemsRef.current;
+  var retainedTiledItems = !isTiledOverview && lastTiledItems && lastTiledItems.timeValue === timeValue && isFetching ? lastTiledItems.items : undefined;
+  var displayedItems = items && items.length > 0 ? items : retainedTiledItems;
+  var canRetainRasterWhileFetching = Boolean(retainedTiledItems);
+  return {
+    displayedItems: displayedItems,
+    canRetainRasterWhileFetching: canRetainRasterWhileFetching
+  };
+};
+var TimeAwareGeoTIFFLayer = function TimeAwareGeoTIFFLayer(_ref6) {
+  var _collectionData$exten, _temporalInterval$, _temporalInterval$2, _collectionData$rende, _dimensions$find, _wmLayer$getDimension;
+  var stacCollectionUrl = _ref6.stacCollectionUrl,
+    layerName = _ref6.layerName;
+    _ref6.style;
+    var styleName = _ref6.styleName,
+    zIndex = _ref6.zIndex,
+    opacity = _ref6.opacity,
+    _ref6$dimensions = _ref6.dimensions,
+    dimensions = _ref6$dimensions === void 0 ? [] : _ref6$dimensions,
+    layerId = _ref6.layerId,
+    _ref6$visible = _ref6.visible,
+    visible = _ref6$visible === void 0 ? true : _ref6$visible,
+    assetKey = _ref6.assetKey,
+    _ref6$dataLayout = _ref6.dataLayout,
+    dataLayout = _ref6$dataLayout === void 0 ? 'auto' : _ref6$dataLayout,
+    spatialFilter = _ref6.spatialFilter,
+    temporalStep = _ref6.temporalStep,
+    onInitializeLayer = _ref6.onInitializeLayer;
   var _React$useContext = React.useContext(TimeContext),
     _React$useContext$pre = _React$useContext.prefetchList,
     prefetchList = _React$useContext$pre === void 0 ? [] : _React$useContext$pre;
-  var wmLayer = useGetStacGeoTIFFLayerInstance(stacCollectionUrl, layerName, layerId, onInitializeLayer);
+  var _React$useContext2 = React.useContext(MapContext),
+    map = _React$useContext2.map;
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    manuallySelectedTile = _React$useState2[0],
+    setManuallySelectedTile = _React$useState2[1];
   var _useStacCollection = useStacCollection(stacCollectionUrl),
     collectionData = _useStacCollection.data;
+  var temporalInterval = collectionData === null || collectionData === void 0 || (_collectionData$exten = collectionData.extent) === null || _collectionData$exten === void 0 || (_collectionData$exten = _collectionData$exten.temporal) === null || _collectionData$exten === void 0 || (_collectionData$exten = _collectionData$exten.interval) === null || _collectionData$exten === void 0 ? void 0 : _collectionData$exten[0];
+  var sampleStart = (_temporalInterval$ = temporalInterval === null || temporalInterval === void 0 ? void 0 : temporalInterval[0]) !== null && _temporalInterval$ !== void 0 ? _temporalInterval$ : undefined;
+  var fallbackSampleEnd = React.useMemo(function () {
+    return collectionData ? new Date().toISOString() : undefined;
+  }, [collectionData]);
+  var sampleEnd = (_temporalInterval$2 = temporalInterval === null || temporalInterval === void 0 ? void 0 : temporalInterval[1]) !== null && _temporalInterval$2 !== void 0 ? _temporalInterval$2 : fallbackSampleEnd;
+  var layoutSample = useStacTemporalStepItems(stacCollectionUrl, sampleStart, sampleEnd, dataLayout === 'auto');
+  var isTiledCollection = isSpatiallyTiledStacCollection(dataLayout, Boolean(collectionData === null || collectionData === void 0 ? void 0 : collectionData.item_assets), layoutSample.data);
+  var effectiveDataLayout = isTiledCollection ? 'spatial-tiles' : 'temporal';
+  var wmLayer = useGetStacGeoTIFFLayerInstance(stacCollectionUrl, layerName, layerId, onInitializeLayer, temporalStep, effectiveDataLayout);
   var effectiveStyleName = React.useMemo(function () {
-    var renderNames = Object.keys((collectionData === null || collectionData === void 0 ? void 0 : collectionData.renders) || {});
-    return resolvePreferredStyleName(renderNames, styleName);
+    var stacStyles = getStacCollectionStyles(collectionData === null || collectionData === void 0 ? void 0 : collectionData.renders, collectionData === null || collectionData === void 0 ? void 0 : collectionData.item_assets);
+    var styleNames = stacStyles.map(function (stacStyle) {
+      return stacStyle.name;
+    });
+    return resolvePreferredStyleName(styleNames, styleName);
   }, [collectionData, styleName]);
+  var renderEntry = collectionData === null || collectionData === void 0 || (_collectionData$rende = collectionData.renders) === null || _collectionData$rende === void 0 ? void 0 : _collectionData$rende[effectiveStyleName];
   var geotiffStyle = React.useMemo(function () {
-    var _collectionData$rende;
-    var renderEntry = collectionData === null || collectionData === void 0 || (_collectionData$rende = collectionData.renders) === null || _collectionData$rende === void 0 ? void 0 : _collectionData$rende[effectiveStyleName];
     if (renderEntry !== null && renderEntry !== void 0 && renderEntry.colormap) {
       return stacColormapToOlStyle(renderEntry.colormap);
     }
     return undefined;
-  }, [effectiveStyleName, collectionData]);
-  var shouldNormalizeGeoTiff = effectiveStyleName === WMDefaultStyleName && !(collectionData !== null && collectionData !== void 0 && (_collectionData$rende2 = collectionData.renders) !== null && _collectionData$rende2 !== void 0 && (_collectionData$rende2 = _collectionData$rende2[effectiveStyleName]) !== null && _collectionData$rende2 !== void 0 && _collectionData$rende2.colormap);
+  }, [renderEntry === null || renderEntry === void 0 ? void 0 : renderEntry.colormap]);
+  var shouldNormalizeGeoTiff = !(renderEntry !== null && renderEntry !== void 0 && renderEntry.colormap);
+  var shouldUseSpatialFilter = spatialFilter !== null && spatialFilter !== void 0 ? spatialFilter : isTiledCollection;
+  var viewportBbox = useStacViewportBbox(map, shouldUseSpatialFilter);
+  var selectionViewportBbox = useStacViewportBbox(map, shouldUseSpatialFilter, undefined, 0);
+  React.useEffect(function () {
+    if (manuallySelectedTile && selectionViewportBbox && !bboxesIntersect(manuallySelectedTile.bbox, selectionViewportBbox)) {
+      setManuallySelectedTile(undefined);
+    }
+  }, [manuallySelectedTile, selectionViewportBbox]);
+  var rasterViewportBbox = useStacViewportBbox(map, shouldUseSpatialFilter, isTiledCollection ? STAC_TILED_MINIMUM_ZOOM : undefined);
+  var _resolveStacItemQuery = resolveStacItemQueryState({
+      hasCollectionData: Boolean(collectionData),
+      isTiledCollection: isTiledCollection,
+      rasterViewportBbox: rasterViewportBbox,
+      shouldUseSpatialFilter: shouldUseSpatialFilter,
+      viewportBbox: viewportBbox
+    }),
+    isTiledOverview = _resolveStacItemQuery.isTiledOverview,
+    itemQueryBbox = _resolveStacItemQuery.itemQueryBbox,
+    isItemQueryEnabled = _resolveStacItemQuery.isItemQueryEnabled;
   var dimensionsValues = getDimensionParamsForWMS(dimensions, wmLayer);
-  var timeValue = dimensionsValues === null || dimensionsValues === void 0 ? void 0 : dimensionsValues['TIME'];
+  var requestedTimeValue = (_dimensions$find = dimensions.find(function (_ref7) {
+    var name = _ref7.name;
+    return (name === null || name === void 0 ? void 0 : name.toLowerCase()) === 'time';
+  })) === null || _dimensions$find === void 0 ? void 0 : _dimensions$find.currentValue;
+  // Third-party tiled STAC collections expose a temporal extent, not a list of
+  // discrete valid times. WMS closest-value logic can therefore snap the
+  // timeline to an unrelated acquisition; query STAC with the exact selection.
+  var timeValue = isTiledCollection ? requestedTimeValue : dimensionsValues === null || dimensionsValues === void 0 ? void 0 : dimensionsValues['TIME'];
+  React.useEffect(function () {
+    setManuallySelectedTile(undefined);
+  }, [isTiledCollection, timeValue]);
   var timeIntervalMs = getTimeIntervalInMilliseconds(wmLayer === null || wmLayer === void 0 || (_wmLayer$getDimension = wmLayer.getDimension('time')) === null || _wmLayer$getDimension === void 0 ? void 0 : _wmLayer$getDimension.getDimInterval());
   var prefetchListEffectCheck = prefetchList.join(',');
   var frameStepMs = React.useMemo(function () {
-    return getFrameStepInMilliseconds(timeValue, prefetchList, timeIntervalMs);
+    return isTiledCollection ? undefined : getFrameStepInMilliseconds(timeValue, prefetchList, timeIntervalMs);
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [prefetchListEffectCheck, timeIntervalMs, timeValue]);
-  var lookupStepMs = getLookupStepInMilliseconds(frameStepMs, timeIntervalMs);
+  [isTiledCollection, prefetchListEffectCheck, timeIntervalMs, timeValue]);
+  var lookupStepMs = isTiledCollection ? undefined : getLookupStepInMilliseconds(frameStepMs, timeIntervalMs);
   var shouldPreloadFrames = shouldPreloadStacFrames(frameStepMs, timeIntervalMs);
-  var preloadRadius = shouldPreloadFrames ? STAC_GEOTIFF_FRAME_PRELOAD_RADIUS : 0;
-  var lookupWindowMs = lookupStepMs ? lookupStepMs * STAC_ITEM_LOOKUP_WINDOW_INTERVAL_MULTIPLIER : STAC_ITEM_LOOKUP_WINDOW_MS;
+  var preloadRadius = shouldPreloadFrames && !isTiledCollection ? STAC_GEOTIFF_FRAME_PRELOAD_RADIUS : 0;
+  var lookupWindowMs = STAC_ITEM_LOOKUP_WINDOW_MS;
+  if (isTiledCollection) {
+    lookupWindowMs = STAC_TILED_LOOKUP_WINDOW_MS;
+  } else if (lookupStepMs) {
+    lookupWindowMs = lookupStepMs * STAC_ITEM_LOOKUP_WINDOW_INTERVAL_MULTIPLIER;
+  }
   var frameTargetTimes = React.useMemo(function () {
     return getStacFrameTargetTimes(timeValue, prefetchList, frameStepMs, preloadRadius);
   },
@@ -7273,17 +7928,21 @@ var TimeAwareGeoTIFFLayer = function TimeAwareGeoTIFFLayer(_ref) {
     _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
     requestedStartDate = _React$useMemo2[0],
     requestedEndDate = _React$useMemo2[1];
-  var _React$useState = React.useState([undefined, undefined]),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    activeItemLookupWindow = _React$useState2[0],
-    setActiveItemLookupWindow = _React$useState2[1];
+  var isTiledLookupWindow = isTiledCollection;
+  var _React$useState3 = React.useState([undefined, undefined]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    activeItemLookupWindow = _React$useState4[0],
+    setActiveItemLookupWindow = _React$useState4[1];
   var isActiveItemLookupWindowValid = isStacItemLookupWindowValidForTime(activeItemLookupWindow, timeValue, requiredLookupMarginMs);
   var _activeItemLookupWind = _slicedToArray(activeItemLookupWindow, 2),
     activeStartDate = _activeItemLookupWind[0],
     activeEndDate = _activeItemLookupWind[1];
-  var startDate = isActiveItemLookupWindowValid ? activeStartDate : requestedStartDate;
-  var endDate = isActiveItemLookupWindowValid ? activeEndDate : requestedEndDate;
+  var startDate = !isTiledLookupWindow && isActiveItemLookupWindowValid ? activeStartDate : requestedStartDate;
+  var endDate = !isTiledLookupWindow && isActiveItemLookupWindowValid ? activeEndDate : requestedEndDate;
   React.useEffect(function () {
+    if (isTiledLookupWindow) {
+      return;
+    }
     setActiveItemLookupWindow(function (currentWindow) {
       if (isStacItemLookupWindowValidForTime(currentWindow, timeValue, requiredLookupMarginMs)) {
         return currentWindow;
@@ -7293,23 +7952,240 @@ var TimeAwareGeoTIFFLayer = function TimeAwareGeoTIFFLayer(_ref) {
       }
       return [requestedStartDate, requestedEndDate];
     });
-  }, [requestedEndDate, requestedStartDate, requiredLookupMarginMs, timeValue]);
-  var _useStacItems = useStacItems(stacCollectionUrl, startDate, endDate),
-    items = _useStacItems.data,
-    isLoading = _useStacItems.isLoading;
+  }, [isTiledLookupWindow, requestedEndDate, requestedStartDate, requiredLookupMarginMs, timeValue]);
+  var _React$useMemo3 = React.useMemo(function () {
+      if (isTiledCollection && timeValue) {
+        return getStacItemLookupWindowForTimes([timeValue], STAC_TILED_LOOKUP_WINDOW_MS);
+      }
+      return [startDate, endDate];
+    }, [endDate, isTiledCollection, startDate, timeValue]),
+    _React$useMemo4 = _slicedToArray(_React$useMemo3, 2),
+    itemStartDate = _React$useMemo4[0],
+    itemEndDate = _React$useMemo4[1];
+  // When a tile is manually selected, fetch its full item data
+  // This works in both overview mode and zoomed-in mode
+  var isManualSelectionActive = manuallySelectedTile;
+  var manualSelectionItemsQuery = useStacItems(stacCollectionUrl, itemStartDate, itemEndDate, manuallySelectedTile === null || manuallySelectedTile === void 0 ? void 0 : manuallySelectedTile.bbox, isManualSelectionActive && Boolean(itemStartDate && itemEndDate), STAC_TILED_ITEM_PAGE_LIMIT);
+  var _useStacItemsQueryStr = useStacItemsQueryStrategy({
+      collectionData: collectionData,
+      isItemQueryEnabled: isItemQueryEnabled,
+      isTiledCollection: isTiledCollection,
+      isTiledOverview: isTiledOverview,
+      itemEndDate: itemEndDate,
+      itemQueryBbox: itemQueryBbox,
+      itemStartDate: itemStartDate,
+      stacCollectionUrl: stacCollectionUrl
+    }),
+    items = _useStacItemsQueryStr.items,
+    isFetching = _useStacItemsQueryStr.isFetching;
+  var _useRetainedTiledItem = useRetainedTiledItems({
+      isFetching: isFetching,
+      isTiledCollection: isTiledCollection,
+      isTiledOverview: isTiledOverview,
+      items: items,
+      timeValue: timeValue
+    }),
+    displayedItems = _useRetainedTiledItem.displayedItems,
+    canRetainRasterWhileFetching = _useRetainedTiledItem.canRetainRasterWhileFetching;
+  var timelineSelectionItems = React.useMemo(function () {
+    if (!isTiledCollection || isTiledOverview || !displayedItems || !timeValue) {
+      return displayedItems;
+    }
+    var timelineTime = new Date(timeValue).getTime();
+    if (!Number.isFinite(timelineTime)) {
+      return displayedItems;
+    }
+    return displayedItems.filter(function (item) {
+      var _item$properties$date;
+      var itemTime = new Date((_item$properties$date = item.properties.datetime) !== null && _item$properties$date !== void 0 ? _item$properties$date : '').getTime();
+      return Number.isFinite(itemTime) && Math.abs(itemTime - timelineTime) <= STAC_TILED_TIMELINE_TOLERANCE_MS;
+    });
+  }, [displayedItems, isTiledCollection, isTiledOverview, timeValue]);
+  var _React$useState5 = React.useState(undefined),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    tiledRasterAnchorTime = _React$useState6[0],
+    setTiledRasterAnchorTime = _React$useState6[1];
+  React.useEffect(function () {
+    if (!isTiledCollection) {
+      return;
+    }
+    setTiledRasterAnchorTime(undefined);
+  }, [isTiledCollection, timeValue]);
+  React.useEffect(function () {
+    if (isTiledCollection && isTiledOverview) {
+      setTiledRasterAnchorTime(undefined);
+    }
+  }, [isTiledCollection, isTiledOverview]);
+  var frameSelectionTimeValue = isTiledCollection && !isTiledOverview ? tiledRasterAnchorTime !== null && tiledRasterAnchorTime !== void 0 ? tiledRasterAnchorTime : timeValue : timeValue;
+  var isWaitingForRasterQuery = isTiledCollection && !isTiledOverview && !canRetainRasterWhileFetching && (!items || isFetching);
+  var isWaitingForManualSelectionQuery = isManualSelectionActive && manualSelectionItemsQuery.isFetching;
+  var isWaitingForRasterSelection = isTiledCollection && !isTiledOverview && !selectionViewportBbox;
+  var shouldRenderFootprints = isTiledOverview && !isManualSelectionActive || isWaitingForRasterQuery || isWaitingForManualSelectionQuery || isWaitingForRasterSelection;
   var frameItems = React.useMemo(function () {
-    return getStacFrameItemsToRender(items, timeValue, frameTargetTimes);
-  }, [frameTargetTimes, items, timeValue]);
+    return getStacFrameItemsToRender(timelineSelectionItems, frameSelectionTimeValue, frameTargetTimes, selectionViewportBbox, isTiledOverview ? STAC_OVERVIEW_TIME_TOLERANCE_MS : undefined, isTiledCollection ? STAC_TILED_LOOKUP_WINDOW_MS : undefined);
+  }, [frameSelectionTimeValue, frameTargetTimes, isTiledCollection, isTiledOverview, selectionViewportBbox, timelineSelectionItems]);
+  var rasterFrameItems = React.useMemo(function () {
+    var _manualSelectionItems;
+    // When a tile is manually selected, use the separately fetched full item data
+    if (isManualSelectionActive && (_manualSelectionItems = manualSelectionItemsQuery.data) !== null && _manualSelectionItems !== void 0 && _manualSelectionItems.length) {
+      // Filter to only the selected item (query might return overlapping tiles)
+      // Match by ID first, then verify bbox if needed
+      var selectedItem = manualSelectionItemsQuery.data.find(function (item) {
+        return item.id === (manuallySelectedTile === null || manuallySelectedTile === void 0 ? void 0 : manuallySelectedTile.id);
+      });
+      if (selectedItem) {
+        return [{
+          item: selectedItem,
+          isSelected: true
+        }];
+      }
+      // Fallback: if no exact ID match, try to find by bbox (shouldn't happen in normal cases)
+      var bboxMatch = manualSelectionItemsQuery.data.find(function (item) {
+        if (!(manuallySelectedTile !== null && manuallySelectedTile !== void 0 && manuallySelectedTile.bbox) || !item.bbox) {
+          return false;
+        }
+        return item.bbox[0] === manuallySelectedTile.bbox[0] && item.bbox[1] === manuallySelectedTile.bbox[1] && item.bbox[2] === manuallySelectedTile.bbox[2] && item.bbox[3] === manuallySelectedTile.bbox[3];
+      });
+      return bboxMatch ? [{
+        item: bboxMatch,
+        isSelected: true
+      }] : [];
+    }
+    if (isTiledCollection && !isTiledOverview) {
+      return getSingleStacRasterItem(frameItems, selectionViewportBbox, undefined);
+    }
+    return frameItems;
+  }, [frameItems, isTiledCollection, isTiledOverview, isManualSelectionActive, manuallySelectedTile === null || manuallySelectedTile === void 0 ? void 0 : manuallySelectedTile.id, manuallySelectedTile === null || manuallySelectedTile === void 0 ? void 0 : manuallySelectedTile.bbox, manualSelectionItemsQuery.data, selectionViewportBbox]);
+  React.useEffect(function () {
+    var _manualSelectionItems2;
+    if (manuallySelectedTile && displayedItems && !isFetching && !manualSelectionItemsQuery.isFetching && !((_manualSelectionItems2 = manualSelectionItemsQuery.data) !== null && _manualSelectionItems2 !== void 0 && _manualSelectionItems2.some(function (_ref8) {
+      var id = _ref8.id;
+      return id === manuallySelectedTile.id;
+    }))) {
+      setManuallySelectedTile(undefined);
+    }
+  }, [displayedItems, isFetching, manualSelectionItemsQuery.data, manualSelectionItemsQuery.isFetching, manuallySelectedTile]);
+  React.useEffect(function () {
+    var _rasterFrameItems$fin;
+    if (!isTiledCollection || isTiledOverview) {
+      return;
+    }
+    var selectedRasterTime = (_rasterFrameItems$fin = rasterFrameItems.find(function (_ref9) {
+      var isSelected = _ref9.isSelected;
+      return isSelected;
+    })) === null || _rasterFrameItems$fin === void 0 ? void 0 : _rasterFrameItems$fin.item.properties.datetime;
+    if (typeof selectedRasterTime !== 'string') {
+      return;
+    }
+    var selectedRasterEpoch = new Date(selectedRasterTime !== null && selectedRasterTime !== void 0 ? selectedRasterTime : '').getTime();
+    if (!Number.isFinite(selectedRasterEpoch)) {
+      return;
+    }
+    setTiledRasterAnchorTime(function (currentTime) {
+      return currentTime === selectedRasterTime ? currentTime : selectedRasterTime;
+    });
+  }, [isTiledCollection, isTiledOverview, rasterFrameItems]);
+  var rasterAssetKeys = React.useMemo(function () {
+    var _manualSelectionItems3;
+    // When manually selected, fetch assets for the selected item
+    if (isManualSelectionActive && (_manualSelectionItems3 = manualSelectionItemsQuery.data) !== null && _manualSelectionItems3 !== void 0 && _manualSelectionItems3.length) {
+      var _selectedItem$assets;
+      // Find the item matching the selected tile id (query might return overlapping tiles)
+      var selectedItem = manualSelectionItemsQuery.data.find(function (item) {
+        return item.id === (manuallySelectedTile === null || manuallySelectedTile === void 0 ? void 0 : manuallySelectedTile.id);
+      });
+      if (!selectedItem) {
+        return new Map();
+      }
+      var resolvedAssetKey = resolveStacAssetKey((_selectedItem$assets = selectedItem.assets) !== null && _selectedItem$assets !== void 0 ? _selectedItem$assets : {}, effectiveStyleName, renderEntry === null || renderEntry === void 0 ? void 0 : renderEntry.assets, assetKey);
+      return resolvedAssetKey ? new Map([[selectedItem.id, resolvedAssetKey]]) : new Map();
+    }
+    if (isTiledOverview) {
+      return new Map();
+    }
+    return new Map(rasterFrameItems.flatMap(function (_ref0) {
+      var _item$assets;
+      var item = _ref0.item;
+      var resolvedAssetKey = resolveStacAssetKey((_item$assets = item.assets) !== null && _item$assets !== void 0 ? _item$assets : {}, effectiveStyleName, renderEntry === null || renderEntry === void 0 ? void 0 : renderEntry.assets, assetKey);
+      return resolvedAssetKey ? [[item.id, resolvedAssetKey]] : [];
+    }));
+  }, [isManualSelectionActive, manualSelectionItemsQuery.data, isTiledOverview, rasterFrameItems, effectiveStyleName, renderEntry === null || renderEntry === void 0 ? void 0 : renderEntry.assets, assetKey, manuallySelectedTile === null || manuallySelectedTile === void 0 ? void 0 : manuallySelectedTile.id]);
+  var rasterItemIds = React.useMemo(function () {
+    return new Set(rasterFrameItems.map(function (_ref1) {
+      var item = _ref1.item;
+      return item.id;
+    }).filter(function (itemId) {
+      return rasterAssetKeys.has(itemId);
+    }));
+  }, [rasterAssetKeys, rasterFrameItems]);
+  var footprintStyle = React.useMemo(function () {
+    return function (feature) {
+      var itemId = feature.get('stacItemId');
+      var isHovered = feature.get('hover') === true;
+      var hasRasterData = itemId && rasterItemIds.has(itemId);
+      if (itemId === (manuallySelectedTile === null || manuallySelectedTile === void 0 ? void 0 : manuallySelectedTile.id)) {
+        if (!isHovered) {
+          return selectedStacFootprintStyle;
+        }
+        return hasRasterData ? hoveredSelectedRasterStacFootprintStyle : hoveredSelectedStacFootprintStyle;
+      }
+      if (isHovered) {
+        return hasRasterData ? hoveredRasterStacFootprintStyle : hoveredStacFootprintStyle;
+      }
+      return hasRasterData ? transparentStacFootprintStyle : stacFootprintStyle;
+    };
+  }, [manuallySelectedTile === null || manuallySelectedTile === void 0 ? void 0 : manuallySelectedTile.id, rasterItemIds]);
+  var clickOnFootprint = React.useMemo(function () {
+    return {
+      eventType: 'singleclick',
+      onClick: function onClick(features) {
+        var clickedFeature = features.find(function (feature) {
+          return Boolean(feature.get('stacItemId'));
+        });
+        var itemId = clickedFeature === null || clickedFeature === void 0 ? void 0 : clickedFeature.get('stacItemId');
+        var bbox = clickedFeature === null || clickedFeature === void 0 ? void 0 : clickedFeature.get('stacItemBbox');
+        if (!itemId || (bbox === null || bbox === void 0 ? void 0 : bbox.length) !== 4 || !bbox.every(function (coordinate) {
+          return Number.isFinite(coordinate);
+        })) {
+          return;
+        }
+        setManuallySelectedTile(function (currentTile) {
+          return (currentTile === null || currentTile === void 0 ? void 0 : currentTile.id) === itemId ? undefined : {
+            bbox: _toConsumableArray(bbox),
+            id: itemId
+          };
+        });
+      }
+    };
+  }, []);
+  var hoverOnFootprint = React.useMemo(function () {
+    return {
+      active: true
+    };
+  }, []);
   React.useLayoutEffect(function () {
-    frameItems.forEach(function (_ref2) {
-      var item = _ref2.item;
+    var _manualSelectionItems4;
+    frameItems.forEach(function (_ref10) {
+      var item = _ref10.item;
       var wkt2 = item.properties['proj:wkt2'];
       if (wkt2) {
         registerProjection(wkt2);
       }
     });
-  }, [frameItems]);
-  if (!items || isLoading || !startDate || !endDate) {
+    // Also register projection for manually selected item
+    if (isManualSelectionActive && (_manualSelectionItems4 = manualSelectionItemsQuery.data) !== null && _manualSelectionItems4 !== void 0 && _manualSelectionItems4.length) {
+      var selectedItem = manualSelectionItemsQuery.data.find(function (item) {
+        return item.id === (manuallySelectedTile === null || manuallySelectedTile === void 0 ? void 0 : manuallySelectedTile.id);
+      });
+      if (selectedItem) {
+        var wkt2 = selectedItem.properties['proj:wkt2'];
+        if (wkt2) {
+          registerProjection(wkt2);
+        }
+      }
+    }
+  }, [frameItems, isManualSelectionActive, manualSelectionItemsQuery.data, manuallySelectedTile === null || manuallySelectedTile === void 0 ? void 0 : manuallySelectedTile.id]);
+  if (!displayedItems || !startDate || !endDate) {
     return null;
   }
   if (!isStacItemLookupWindowValidForTime([startDate, endDate], timeValue, requiredLookupMarginMs)) {
@@ -7318,13 +8194,55 @@ var TimeAwareGeoTIFFLayer = function TimeAwareGeoTIFFLayer(_ref) {
   if (frameItems.length === 0) {
     return null;
   }
-  return jsx(Fragment, {
-    children: frameItems.map(function (_ref3) {
-      var item = _ref3.item,
-        isSelected = _ref3.isSelected;
+  var footprintFeatureCollection = {
+    type: 'FeatureCollection',
+    features: frameItems.filter(function (_ref11) {
+      var item = _ref11.item;
+      return Boolean(item.geometry);
+    }).map(function (_ref12) {
+      var item = _ref12.item;
+      return {
+        type: 'Feature',
+        id: item.id,
+        geometry: item.geometry,
+        properties: {
+          datetime: item.properties.datetime,
+          stacItemBbox: item.bbox,
+          stacItemId: item.id
+        }
+      };
+    })
+  };
+  var footprintLayer = isTiledCollection ? jsx(OpenLayersFeatureLayer, {
+    clickOnFeature: clickOnFootprint,
+    featureCollection: footprintFeatureCollection,
+    hoverSelect: hoverOnFootprint,
+    opacity: opacity,
+    style: footprintStyle,
+    testId: "stac-item-footprints",
+    visible: visible,
+    zIndex: (zIndex !== null && zIndex !== void 0 ? zIndex : 0) + 1
+  }) : null;
+  if (shouldRenderFootprints) {
+    return footprintLayer;
+  }
+  return jsxs(Fragment, {
+    children: [footprintLayer, rasterFrameItems.map(function (_ref13) {
+      var _item$assets2, _ref14, _item$properties$proj;
+      var item = _ref13.item,
+        isSelected = _ref13.isSelected;
+      var resolvedAssetKey = rasterAssetKeys.get(item.id);
+      if (!resolvedAssetKey) {
+        return null;
+      }
+      var resolvedAsset = (_item$assets2 = item.assets) === null || _item$assets2 === void 0 ? void 0 : _item$assets2[resolvedAssetKey];
+      if (!resolvedAsset) {
+        return null;
+      }
+      var projection = (_ref14 = (_item$properties$proj = item.properties['proj:wkt2']) !== null && _item$properties$proj !== void 0 ? _item$properties$proj : item.properties['proj:code']) !== null && _ref14 !== void 0 ? _ref14 : item.properties['proj:epsg'] ? "EPSG:".concat(item.properties['proj:epsg']) : undefined;
       return jsx(GeoTIFFLayer, {
         geotiffStyle: geotiffStyle,
-        layerName: item.id,
+        layerName: "".concat(item.id, "-").concat(resolvedAssetKey),
         layerOptions: {
           opacity: isSelected ? opacity !== null && opacity !== void 0 ? opacity : 1 : 0,
           zIndex: isSelected ? zIndex : (zIndex !== null && zIndex !== void 0 ? zIndex : 0) - 1
@@ -7333,10 +8251,10 @@ var TimeAwareGeoTIFFLayer = function TimeAwareGeoTIFFLayer(_ref) {
           enabled: visible
         },
         normalize: shouldNormalizeGeoTiff,
-        projection: item.properties['proj:wkt2'],
-        url: item.assets['data'].href
-      }, "".concat(item.id, "-").concat(effectiveStyleName));
-    })
+        projection: projection,
+        url: resolvedAsset.href
+      }, "".concat(item.id, "-").concat(resolvedAssetKey, "-").concat(effectiveStyleName));
+    })]
   });
 };
 var registerProjection = function registerProjection(wkt2) {
@@ -8139,8 +9057,9 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
         });
       case LayerType.edrFeatureLayer:
         {
-          var parameterNames = (options === null || options === void 0 ? void 0 : options.parameterNames.join(',')) || '';
-          var multiParam = Array.isArray(options === null || options === void 0 ? void 0 : options.parameterNames) && options.parameterNames.length > 1;
+          var edrOptions = options && 'parameterNames' in options ? options : undefined;
+          var parameterNames = (edrOptions === null || edrOptions === void 0 ? void 0 : edrOptions.parameterNames.join(',')) || '';
+          var multiParam = Array.isArray(edrOptions === null || edrOptions === void 0 ? void 0 : edrOptions.parameterNames) && edrOptions.parameterNames.length > 1;
           var styleLike = style !== undefined ? styleNameToStyleLike(style, multiParam) : undefined;
           return jsx(TimeAwareEDRLocationLayer, {
             dimensions: dimensions,
@@ -8156,14 +9075,19 @@ var OpenLayersLayer = function OpenLayersLayer(layerProps) {
         }
       case LayerType.stacGeoTIFFLayer:
         {
+          var stacOptions = options && !('parameterNames' in options) ? options : undefined;
           return jsx(TimeAwareGeoTIFFLayer, {
+            assetKey: stacOptions === null || stacOptions === void 0 ? void 0 : stacOptions.assetKey,
+            dataLayout: stacOptions === null || stacOptions === void 0 ? void 0 : stacOptions.dataLayout,
             dimensions: dimensions,
             layerId: id,
             layerName: id,
             onInitializeLayer: onInitializeLayer,
             opacity: layerOptions.opacity,
+            spatialFilter: stacOptions === null || stacOptions === void 0 ? void 0 : stacOptions.spatialFilter,
             stacCollectionUrl: service,
             styleName: style,
+            temporalStep: stacOptions === null || stacOptions === void 0 ? void 0 : stacOptions.temporalStep,
             visible: !!(enabled !== false),
             zIndex: layerOptions.zIndex
           });
@@ -8473,6 +9397,20 @@ new Style$1({
     })
   })
 })];
+var observationStationStyleWithOpacity = function observationStationStyleWithOpacity(styles, layerOpacity) {
+  if (layerOpacity === 1) {
+    return styles;
+  }
+  return styles.map(function (style) {
+    var nextStyle = style.clone();
+    var image = nextStyle.getImage();
+    if (!(image instanceof Circle)) {
+      return nextStyle;
+    }
+    image.setOpacity(layerOpacity);
+    return nextStyle;
+  });
+};
 var FEATURE_OBSERVATIONSTATION_HIDDEN = [
 // Outer circle
 new Style$1({
@@ -8571,10 +9509,6 @@ new Style$1({
     })
   })
 })];
-/**
- * Creates a nearby observation station style with the specified color.
- * Used for highlighting nearest location markers with per-source colors.
- */
 var createObservationStationNearbyStyle = function createObservationStationNearbyStyle(color) {
   return [
   // Outer circle with custom color
@@ -8829,31 +9763,33 @@ var stylesByMapFeatureClass = _defineProperty(_defineProperty(_defineProperty(_d
 }), MapFeatureClass.MyLocation, function (feature) {
   return !feature.get('hover') ? FEATURE_MY_LOCATION : [FEATURE_MY_LOCATION, textLabelStyle(feature.getProperties().name)];
 }), MapFeatureClass.ObservationStation, function (feature) {
+  var layerOpacity = typeof feature.get('layerOpacity') === 'number' ? feature.get('layerOpacity') : 1;
   if (feature.get('hidden') && feature.get('hover') && feature.get('highlightSelectedFeature')) {
-    return [].concat(FEATURE_OBSERVATIONSTATION_SELECTED, [textLabelStyle(feature.getProperties().name)]);
+    return [].concat(_toConsumableArray(observationStationStyleWithOpacity(FEATURE_OBSERVATIONSTATION_SELECTED, layerOpacity)), [textLabelStyle(feature.getProperties().name)]);
   }
   if (feature.get('highlightNearbyFeature')) {
     // Use per-source highlightColor if available, otherwise fall back to default green
     var highlightColor = feature.get('highlightColor');
     var nearbyStyle = highlightColor ? createObservationStationNearbyStyle(highlightColor) : FEATURE_OBSERVATIONSTATION_NEARBY;
-    return [].concat(_toConsumableArray(nearbyStyle), [textLabelStyle(feature.getProperties().name)]);
+    var visibleNearbyStyle = observationStationStyleWithOpacity(nearbyStyle, layerOpacity);
+    return [].concat(_toConsumableArray(visibleNearbyStyle), [textLabelStyle(feature.getProperties().name)]);
   }
   if (feature.get('hidden') && feature.get('hover')) {
-    return [].concat(FEATURE_OBSERVATIONSTATION_HIDDEN_AND_HOVERED, [textLabelStyle(feature.getProperties().name)]);
+    return [].concat(_toConsumableArray(observationStationStyleWithOpacity(FEATURE_OBSERVATIONSTATION_HIDDEN_AND_HOVERED, layerOpacity)), [textLabelStyle(feature.getProperties().name)]);
   }
   if (feature.get('highlightSelectedFeature') && feature.get('hover')) {
-    return [].concat(FEATURE_OBSERVATIONSTATION_SELECTED, [textLabelStyle(feature.getProperties().name)]);
+    return [].concat(_toConsumableArray(observationStationStyleWithOpacity(FEATURE_OBSERVATIONSTATION_SELECTED, layerOpacity)), [textLabelStyle(feature.getProperties().name)]);
   }
   if (feature.get('highlightSelectedFeature')) {
-    return FEATURE_OBSERVATIONSTATION_SELECTED;
+    return observationStationStyleWithOpacity(FEATURE_OBSERVATIONSTATION_SELECTED, layerOpacity);
   }
   if (feature.get('hidden')) {
-    return FEATURE_OBSERVATIONSTATION_HIDDEN;
+    return observationStationStyleWithOpacity(FEATURE_OBSERVATIONSTATION_HIDDEN, layerOpacity);
   }
   if (feature.get('hover')) {
-    return [].concat(FEATURE_OBSERVATIONSTATION_HOVER, [textLabelStyle(feature.getProperties().name)]);
+    return [].concat(_toConsumableArray(observationStationStyleWithOpacity(FEATURE_OBSERVATIONSTATION_HOVER, layerOpacity)), [textLabelStyle(feature.getProperties().name)]);
   }
-  return FEATURE_OBSERVATIONSTATION;
+  return observationStationStyleWithOpacity(FEATURE_OBSERVATIONSTATION, layerOpacity);
 }), MapFeatureClass.EDRFeature, function (feature) {
   return !feature.get('hover') ? FEATURE_EDR : [].concat(FEATURE_EDR_HOVER, [textLabelStyle(feature.getProperties().name)]);
 }), MapFeatureClass.EDRMultiPolygon, function (feature) {
@@ -8920,11 +9856,7 @@ var geowebColorToOpenLayersColor = function geowebColorToOpenLayersColor(color,
     return color;
   }
   var decimalToHex = function decimalToHex(decimal, padding) {
-    var hex = decimal.toString(16).split('');
-    if (hex.length < padding.length) {
-      hex.push(padding.substring(hex.length));
-    }
-    return hex.join('');
+    return decimal.toString(16).padStart(padding.length, '0');
   };
   var opacityNumber = Math.min(Math.max(0, Number.parseFloat("".concat(opacity))), 255 / 256);
   var bitsPerColor = color.length - 1 >= 6 ? 8 : 4;
@@ -8943,12 +9875,14 @@ var geowebColorToOpenLayersColor = function geowebColorToOpenLayersColor(color,
   return resultingColor.join('');
 };
 var inlineFeatureStyle = function inlineFeatureStyle(feature) {
-  var fillProperty = feature.getProperties()['fill'];
-  var strokeProperty = feature.getProperties()['stroke'];
+  var featureProperties = feature.getProperties();
+  var fillProperty = featureProperties['fill'];
+  var strokeProperty = featureProperties['stroke'];
+  var layerOpacity = typeof featureProperties.layerOpacity === 'number' ? featureProperties.layerOpacity : 1;
   var fillStrokeStyle = new Style$1();
   var styles = [fillStrokeStyle];
   if (fillProperty) {
-    var fillColor = geowebColorToOpenLayersColor(fillProperty, feature.getProperties()['fill-opacity']);
+    var fillColor = geowebColorToOpenLayersColor(fillProperty, (typeof featureProperties['fill-opacity'] === 'number' ? featureProperties['fill-opacity'] : 1) * layerOpacity);
     fillStrokeStyle.setFill(new Fill({
       color: fillColor
     }));
@@ -8964,8 +9898,8 @@ var inlineFeatureStyle = function inlineFeatureStyle(feature) {
   }
   if (strokeProperty) {
     fillStrokeStyle.setStroke(new Stroke({
-      color: geowebColorToOpenLayersColor(strokeProperty, feature.getProperties()['stroke-opacity']),
-      width: feature.getProperties()['stroke-width']
+      color: geowebColorToOpenLayersColor(strokeProperty, (typeof featureProperties['stroke-opacity'] === 'number' ? featureProperties['stroke-opacity'] : 1) * layerOpacity),
+      width: featureProperties['stroke-width']
     }));
   }
   return styles;
@@ -9049,7 +9983,13 @@ var genericOpenLayersFeatureStyle = function genericOpenLayersFeatureStyle(featu
     showNameOnHover = props.showNameOnHover,
     name = props.name,
     geometry = props.geometry,
-    selectionType = props.selectionType;
+    selectionType = props.selectionType,
+    _props$layerOpacity = props.layerOpacity,
+    layerOpacity = _props$layerOpacity === void 0 ? 1 : _props$layerOpacity;
+  var effectiveLayerOpacity = typeof layerOpacity === 'number' ? layerOpacity : 1;
+  var effectiveFillOpacity = (typeof fillOpacity === 'number' ? fillOpacity : 1) * effectiveLayerOpacity;
+  var effectiveStrokeOpacity = (typeof strokeOpacity === 'number' ? strokeOpacity : 1) * effectiveLayerOpacity;
+  var effectiveHighlightFillOpacity = typeof fillOpacity === 'number' ? fillOpacity : 0;
   var hoverLabelStyle = hover && showNameOnHover && name ? function () {
     var type = geometry === null || geometry === void 0 ? void 0 : geometry.getType();
     switch (type) {
@@ -9072,7 +10012,7 @@ var genericOpenLayersFeatureStyle = function genericOpenLayersFeatureStyle(featu
         geometry: new LineString(smoothed),
         stroke: new Stroke({
           width: strokeWidth || 3,
-          color: geowebColorToOpenLayersColor(stroke, strokeOpacity || 1)
+          color: geowebColorToOpenLayersColor(stroke, effectiveStrokeOpacity)
         })
       });
     }
@@ -9108,7 +10048,7 @@ var genericOpenLayersFeatureStyle = function genericOpenLayersFeatureStyle(featu
         width: 3
       }),
       fill: new Fill({
-        color: geowebColorToOpenLayersColor(fill, (fillOpacity !== null && fillOpacity !== void 0 ? fillOpacity : 0) + (hover ? 0.6 : 0.4) || 0.9)
+        color: geowebColorToOpenLayersColor(fill, Math.min((effectiveHighlightFillOpacity + (hover ? 0.6 : 0.4)) * effectiveLayerOpacity, 1) || 0.9)
       }),
       zIndex: 9998
     });
@@ -9122,7 +10062,7 @@ var genericOpenLayersFeatureStyle = function genericOpenLayersFeatureStyle(featu
         width: 3
       }),
       fill: new Fill({
-        color: fill ? geowebColorToOpenLayersColor(fill, (fillOpacity !== null && fillOpacity !== void 0 ? fillOpacity : 0) + 0.2 || 0.9) : 'rgba(226, 125, 0, 0.6)'
+        color: fill ? geowebColorToOpenLayersColor(fill, Math.min((effectiveHighlightFillOpacity + 0.2) * effectiveLayerOpacity, 1) || 0.9) : 'rgba(226, 125, 0, 0.6)'
       }),
       zIndex: 9999
     });
@@ -9132,7 +10072,7 @@ var genericOpenLayersFeatureStyle = function genericOpenLayersFeatureStyle(featu
     return [].concat(_toConsumableArray(inlineFeatureStyle(feature)), [hoverLabelStyle]);
   }
   if ((!mapFeatureClass || mapFeatureClass === MapFeatureClass["default"]) && geometry && selectionType === 'point') {
-    return getFeaturePointStyle(fill, fillOpacity);
+    return getFeaturePointStyle(fill, effectiveFillOpacity);
   }
   if (fill || stroke) {
     return inlineFeatureStyle(feature);
@@ -12723,4 +13663,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_ITEM_PAGE_LIMIT, STAC_TEMPORAL_STEP_SAMPLE_LIMIT, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeAwareGeoTIFFLayer, TimeAwareWMTSLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, 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, getStacFrameItemsToRender, getStacItemLookupWindowForTimes, getStacItemsUrl, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isClickFromDrag, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, 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, 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, useStacCollection, useStacItems, 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, 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, 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, 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 };