@opengeoweb/core 13.2.1 → 14.0.1

package/index.esm.js

@@ -1,19 +1,19 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useCallback, useEffect, useContext, useMemo } from 'react';
-import { Grid, Box, MenuItem, Typography, useTheme, Popper, Fade, Tooltip, styled, Checkbox, LinearProgress, FormControl, InputLabel, Paper, List, ListItemButton, ListItemText, CircularProgress, ListSubheader, DialogContentText, TextField, InputAdornment, Button, Autocomplete, ListItemIcon, Switch, Select } from '@mui/material';
-import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, CustomIconButton, CustomTooltip, TooltipSelect, AlertIcon, useScrollingInIsolation, sliderHeaderStyle, CustomSlider, ToggleMenu, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, CustomDialog, PROJECTION, calculateStartSize, useWheelStopPropagation, ToolContainerDraggable, dateUtils, useDebounce, sessionStorageProvider, usePrevious, ErrorBoundary } from '@opengeoweb/shared';
+import React__default, { useMemo, useState, useCallback, useEffect, useContext } from 'react';
+import { Grid, Box, MenuItem, Typography, useTheme, Popper, Fade, ListItem, ListItemButton, ListItemText, ListItemIcon, Checkbox, Tooltip, styled, LinearProgress, FormControl, InputLabel, Paper, List, CircularProgress, ListSubheader, DialogContentText, TextField, InputAdornment, Button, Autocomplete, Switch, Select } from '@mui/material';
+import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, CustomIconButton, CustomTooltip, TooltipSelect, AlertIcon, useScrollingInIsolation, sliderHeaderStyle, CustomSlider, ToggleMenu, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, useConfirmationDialog, CustomDialog, PROJECTION, calculateStartSize, useWheelStopPropagation, ToolContainerDraggable, dateUtils, useDebounce, sessionStorageProvider, usePrevious, ErrorBoundary } from '@opengeoweb/shared';
 import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, ColumnCollapsed, ColumnCollapse, Copy, None, FastForward, AutoUpdateActive, Both, Delete, Visibility, VisibilityOff, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Overlayers, Layers, ExitDomain, Info, Search, Exclamation, MyLocation, Close, ThemeWrapper, lightTheme, FlagBritain, FlagNetherlands, FlagFinland, FlagNorway } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { useTranslation, I18nextProvider } from 'react-i18next';
 import { TIME_SLIDER_NAMESPACE, timesliderTranslations, defaultTimeSpan, SpeedButton, TimeStepButton, AnimationLengthButton, AnimationLength, TimeSpanButton, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, OptionsMenuButton, PlayButton, defaultTimeStep, BackwardForwardStepButton, AutoUpdateButton, NowButton, handleSetNowEvent, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, onsetNewDateDebounced, defaultSecondsPerPx, moveSelectedTimePx, TimeSlider, getFilteredTime, ControlButtons, OptionsMenu, TimeSliderClock } from '@opengeoweb/time-slider';
-import { webmapReactTranslations, WEBMAP_REACT_NAMESPACE, webmapTranslations, WEBMAP_NAMESPACE, LayerInfoButton, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, LegendDialog, LegendButton, MapContext, emptyGeoJSON, MapFeatureClass, setMapCenter, OpenLayersFeatureLayer, OpenLayersMapDraw, makeTimeList, getIsInsideAcceptanceTime, OpenLayersLayer, useSetIntervalWhenVisible, openLayersGetMapImageStore, TimeContext, OpenLayersMapView, WMSLayer, genericOpenLayersFeatureStyle, OpenLayersGetFeatureInfo, MapControls, OpenLayersZoomControl, getLayerUpdateInfo, publicLayers } from '@opengeoweb/webmap-react';
+import { webmapReactTranslations, WEBMAP_REACT_NAMESPACE, webmapTranslations, WEBMAP_NAMESPACE, openLayersGetMapImageStore, LayerInfoButton, useEDRLayerCollection, defaultEdrStyles, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, LegendDialog, LegendButton, MapContext, emptyGeoJSON, MapFeatureClass, setMapCenter, OpenLayersFeatureLayer, OpenLayersMapDraw, makeTimeList, getIsInsideAcceptanceTime, OpenLayersLayer, useSetIntervalWhenVisible, TimeContext, OpenLayersMapView, WMSLayer, genericOpenLayersFeatureStyle, OpenLayersGetFeatureInfo, MapControls, OpenLayersZoomControl, getLayerUpdateInfo, publicLayers } from '@opengeoweb/webmap-react';
 import { useDispatch, useSelector, connect, useStore, Provider } from 'react-redux';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
-import { layerTypes, layerUtils, mapSelectors, layerActions, layerSelectors, serviceSelectors, serviceActions, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, getUserAddedServices, uiActions, genericActions, syncGroupsSelectors, drawingToolSelectors, syncConstants, getViewObjectForSyncGroup, getViewObjectForMapId, genericSelectors, loadingIndicatorActions, defaultLayers, getSingularDrawtoolDrawLayerId, syncGroupsSelector, syncGroupsActions, routerUtils, mapUtils } from '@opengeoweb/store';
+import { layerTypes, layerSelectors, layerActions, loadingIndicatorSelectors, layerUtils, mapSelectors, serviceSelectors, serviceActions, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, getUserAddedServices, uiActions, genericActions, syncGroupsSelectors, drawingToolSelectors, syncConstants, getViewObjectForSyncGroup, getViewObjectForMapId, loadingIndicatorActions, genericSelectors, defaultLayers, getSingularDrawtoolDrawLayerId, syncGroupsSelector, syncGroupsActions, routerUtils, mapUtils } from '@opengeoweb/store';
 import { webmapUtils, LayerType, queryWMSServiceInfo, queryWMSLayers, queryWMSLayersTree, invalidateWMSGetCapabilities, getWMSServiceId, handleDateUtilsISOString, getMapDimURL, generateLayerId, WMJSDimension, getWMLayerById, WMLayer } from '@opengeoweb/webmap';
-import _, { isArray, isEqual, range } from 'lodash';
+import _, { isArray, isEqual, throttle, range } from 'lodash';
 import { Box as Box$1, styled as styled$1 } from '@mui/system';
 import { LayerSelectButtonConnect, LayerSelectConnect, DataExplorerButtonConnect } from '@opengeoweb/layer-select';
 import { unByKey } from 'ol/Observable';
@@ -105,6 +105,7 @@ var en = {
 	"layermanager-acceptance-time-off": "off",
 	"layermanager-acceptance-time-exact": "exact",
 	"layermanager-dimensions-none": "Layer has no time dimension",
+	"layermanager-selectable-features": "Selectable features",
 	feature_info_marker_info: "Event marker info",
 	feature_info_location_info: "Get information for a specific location",
 	"language-select": "Language",
@@ -114,7 +115,14 @@ var en = {
 	"workspace-time-scroll-on": "ON",
 	"workspace-time-scroll-info": "This feature affects all views in this workspace",
 	"workspace-time-scroll-toggle-on": "Workspace time scroll ON",
-	"workspace-time-scroll-toggle-off": "Workspace time scroll OFF"
+	"workspace-time-scroll-toggle-off": "Workspace time scroll OFF",
+	"featureinfo-title": "Feature info",
+	"featureinfo-id": "ID",
+	"featureinfo-location": "Location",
+	"delete-dialog-title": "Delete layer",
+	"delete-dialog-description": "Are you sure you want to delete this layer? EDR layers are not yet available in the Layer Select.",
+	"delete-dialog-cancel": "Cancel",
+	"delete-dialog-confirm": "Delete"
 };
 var fi = {
 	feature_info_title: "Napsauta karttaa nähdäksesi lisätietoja.",
@@ -192,7 +200,10 @@ var fi = {
 	"workspace-time-scroll-on": "PÄÄLLÄ",
 	"workspace-time-scroll-info": "Tämä ominaisuus vaikuttaa kaikkiin näkymiin tämän työtilan sisällä",
 	"workspace-time-scroll-toggle-on": "Työtilan aika scrollaus PÄÄLLÄ",
-	"workspace-time-scroll-toggle-off": "Työtilan aika scrollaus POIS PÄÄLTÄ"
+	"workspace-time-scroll-toggle-off": "Työtilan aika scrollaus POIS PÄÄLTÄ",
+	"featureinfo-title": "Ominaisuuden tiedot",
+	"featureinfo-id": "ID",
+	"featureinfo-location": "Paikka"
 };
 var no = {
 	feature_info_title: "Klikk på kartet for å få mer informasjon.",
@@ -270,7 +281,10 @@ var no = {
 	"workspace-time-scroll-on": "ikke oversatt",
 	"workspace-time-scroll-info": "ikke oversatt",
 	"workspace-time-scroll-toggle-on": "ikke oversatt",
-	"workspace-time-scroll-toggle-off": "ikke oversatt"
+	"workspace-time-scroll-toggle-off": "ikke oversatt",
+	"featureinfo-title": "ikke oversatt",
+	"featureinfo-id": "ikke oversatt",
+	"featureinfo-location": "ikke oversatt"
 };
 var nl = {
 	feature_info_title: "Klik op de kaart voor informatie.",
@@ -348,7 +362,14 @@ var nl = {
 	"workspace-time-scroll-on": "niet vertaald",
 	"workspace-time-scroll-info": "niet vertaald",
 	"workspace-time-scroll-toggle-on": "niet vertaald",
-	"workspace-time-scroll-toggle-off": "niet vertaald"
+	"workspace-time-scroll-toggle-off": "niet vertaald",
+	"featureinfo-title": "niet vertaald",
+	"featureinfo-id": "niet vertaald",
+	"featureinfo-location": "niet vertaald",
+	"delete-dialog-title": "Laag verwijderen",
+	"delete-dialog-description": "Weet je zeker dat je deze laag wilt verwijderen? EDR lagen zijn nog niet beschikbaar in de Layer Select.",
+	"delete-dialog-cancel": "Annuleren",
+	"delete-dialog-confirm": "Verwijderen"
 };
 var coreTranslations = {
 	en: en,
@@ -1254,7 +1275,9 @@ var DimensionSelectValue = function DimensionSelectValue(_ref) {
   var _useCoreTranslation = useCoreTranslation(),
     t = _useCoreTranslation.t;
   var dimensionValuesRaw = generatedValues.toReversed().slice(0, 100);
-  var latestMap = createLatestMap(dimensionValuesRaw);
+  var latestMap = useMemo(function () {
+    return createLatestMap(dimensionValuesRaw);
+  }, [dimensionValuesRaw]);
   if (!(selectedDimension != null && selectedDimension.name) || !(dimensionValuesRaw != null && dimensionValuesRaw.length)) {
     return null;
   }
@@ -1263,7 +1286,7 @@ var DimensionSelectValue = function DimensionSelectValue(_ref) {
   var dimensionValues = isReferenceTimeDimensionAndUseLatestIsAvailable ? [].concat(latestMap.latestOptions, dimensionValuesRaw.slice(hideLatestDuplicate ? 1 : 0)) : dimensionValuesRaw.slice().reverse();
   var extendedDimensionValues = dimensionValues.findIndex(function (dimensionValue) {
     return dimensionValue === selectedDimension.currentValue;
-  }) === -1 ? [].concat(dimensionValues, [selectedDimension.currentValue]) : dimensionValues;
+  }) === -1 && selectedDimension.currentValue ? [].concat(dimensionValues, [selectedDimension.currentValue]) : dimensionValues;
   var setDimensionValue = function setDimensionValue(dimensionValue) {
     if (isReferenceTimeDimensionAndUseLatestIsAvailable) {
       var index = latestMap.getIndex(dimensionValue);
@@ -1279,13 +1302,13 @@ var DimensionSelectValue = function DimensionSelectValue(_ref) {
   var isOneOfLatest = isReferenceTimeDimensionAndUseLatestIsAvailable && useLatestReferenceTime;
   var getValue = function getValue() {
     if (isOneOfLatest) {
-      return latestMap.getValue(selectedDimension.currentValue);
+      return latestMap.getValue(selectedDimension.currentValue || '') || '';
     }
-    return selectedDimension.currentValue;
+    return selectedDimension.currentValue || '';
   };
   var getIndex = function getIndex() {
     if (isOneOfLatest) {
-      return latestMap.getIndex(selectedDimension.currentValue);
+      return latestMap.getIndex(selectedDimension.currentValue || '');
     }
     return extendedDimensionValues.findIndex(function (dimensionValue) {
       return dimensionValue === selectedDimension.currentValue;
@@ -1341,7 +1364,7 @@ var DimensionSelectValue = function DimensionSelectValue(_ref) {
               textOverflow: 'ellipsis',
               overflow: 'hidden'
             },
-            children: [dimensionValue, !dimensionValue.includes('Latest') && jsxs("i", {
+            children: [dimensionValue, !(dimensionValue != null && dimensionValue.includes('Latest')) && jsxs("i", {
               children: [" ", selectedDimension.units]
             })]
           }), currentIndex === dimensionValues.length && jsx(AlertIcon, {
@@ -1717,9 +1740,81 @@ var OpacitySelect = function OpacitySelect(_ref) {
   });
 };
 
+var SelectableFeatures = function SelectableFeatures(_ref) {
+  var layerId = _ref.layerId,
+    isSelectable = _ref.isSelectable,
+    onToggleSelectable = _ref.onToggleSelectable;
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  var onClickCheckbox = function onClickCheckbox() {
+    onToggleSelectable();
+  };
+  return jsx(ListItem, {
+    disablePadding: true,
+    sx: {
+      width: '100%',
+      height: '100%',
+      borderBottom: '1px solid #E0E0E0'
+    },
+    children: jsxs(ListItemButton, {
+      role: undefined,
+      onClick: function onClick() {
+        return onClickCheckbox();
+      },
+      disableGutters: true,
+      sx: {
+        paddingX: '16px',
+        paddingY: '6px',
+        height: '100%'
+      },
+      children: [jsx(ListItemText, {
+        id: "selectablefeatures-checkbox-" + layerId,
+        primary: jsx(Typography, {
+          sx: {
+            "float": 'left',
+            fontSize: '16px'
+          },
+          children: t('layermanager-selectable-features')
+        })
+      }), jsx(ListItemIcon, {
+        sx: {
+          width: '42px'
+        },
+        children: jsx(Checkbox, {
+          "data-testid": "selectablefeatures-checkbox-" + layerId,
+          checked: isSelectable,
+          tabIndex: -1,
+          disableRipple: true,
+          name: "selectablefeatures-checkbox-" + layerId
+        })
+      })]
+    })
+  });
+};
+
+var SelectableFeaturesCheckboxConnect = function SelectableFeaturesCheckboxConnect(_ref) {
+  var layerId = _ref.layerId;
+  var dispatch = useDispatch();
+  var isSelectable = useSelector(function (store) {
+    return layerSelectors.getIsLayerSelectable(store, layerId);
+  });
+  var toggleSelectable = React.useCallback(function () {
+    return dispatch(layerActions.toggleSelectableFeatures({
+      layerId: layerId
+    }));
+  }, [dispatch, layerId]);
+  return jsx(SelectableFeatures, {
+    layerId: layerId,
+    onToggleSelectable: toggleSelectable,
+    isSelectable: isSelectable
+  });
+};
+
 var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
   var mapId = _ref.mapId,
     layerId = _ref.layerId,
+    _ref$isFeatureLayer = _ref.isFeatureLayer,
+    isFeatureLayer = _ref$isFeatureLayer === void 0 ? false : _ref$isFeatureLayer,
     onLayerDuplicate = _ref.onLayerDuplicate,
     tooltipTitle = _ref.tooltipTitle,
     icon = _ref.icon;
@@ -1748,7 +1843,10 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
       icon: jsx(Copy, {})
     }],
     tooltipTitle: nonEmptyTooltipTitle,
-    buttonIcon: icon
+    buttonIcon: icon,
+    children: isFeatureLayer && jsx(SelectableFeaturesCheckboxConnect, {
+      layerId: layerId
+    })
   });
 };
 
@@ -2070,6 +2168,74 @@ var MissingData = function MissingData(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var loadingIndicatorContainerStyle = {
+  "float": 'left',
+  zIndex: 1,
+  overflow: 'hidden'
+};
+var colorBackground = '#444444ff';
+var colorLoading = '#287DFF';
+var colorLoaded = '#00bf0e';
+var loadingIndicatorStyle = {
+  display: 'block',
+  marginTop: '20px',
+  marginLeft: '0x',
+  padding: 0,
+  position: 'absolute',
+  background: colorBackground
+};
+var clamp = function clamp(number, min, max) {
+  return Math.max(min, Math.min(number, max));
+};
+var LoadingIndicatorProgressBar = function LoadingIndicatorProgressBar(_ref) {
+  var progressPercentage = _ref.progressPercentage,
+    _ref$width = _ref.width,
+    loadingBarWidthInPx = _ref$width === void 0 ? 24 : _ref$width,
+    _ref$height = _ref.height,
+    loadingBarHeightPx = _ref$height === void 0 ? 3 : _ref$height,
+    _ref$top = _ref.top,
+    top = _ref$top === void 0 ? 20 : _ref$top,
+    _ref$left = _ref.left,
+    left = _ref$left === void 0 ? 0 : _ref$left;
+  var width = clamp(progressPercentage, 0, 100) / (100 / loadingBarWidthInPx);
+  var style = Object.assign({}, loadingIndicatorStyle, {
+    width: loadingBarWidthInPx + "px",
+    height: loadingBarHeightPx + "px",
+    marginTop: top + "px",
+    marginLeft: left + "px"
+  });
+  return progressPercentage >= 0 ? jsxs("span", {
+    style: loadingIndicatorContainerStyle,
+    "data-testid": "loadDurationProgressBar",
+    children: [jsx("span", {
+      style: style
+    }), jsx("span", {
+      "data-testid": "LoadingIndicatorProgressBarSpan",
+      style: Object.assign({}, style, {
+        width: width + "px",
+        background: progressPercentage < 100 ? colorLoading : colorLoaded
+      })
+    })]
+  }) : jsx("span", {});
+};
+
 var MILLISECONDS_PER_SECOND = 1e3;
 var MAX_DURATION_IN_SECONDS = 60;
 var MIN_DURATION_IN_SECONDS = 0.1;
@@ -2078,7 +2244,9 @@ var DECIMALS_IN_TOOLTIP = 3;
 var LoadDuration = function LoadDuration(_ref) {
   var mapId = _ref.mapId,
     layerId = _ref.layerId;
-  var loadDurationLabel = useLoadDurationLabel(mapId, layerId);
+  var _useLoadDurationLabel = useLoadDurationLabel(mapId, layerId),
+    loadDurationLabel = _useLoadDurationLabel[0],
+    percentage = _useLoadDurationLabel[1];
   var _React$useState = React.useState(),
     tooltipText = _React$useState[0],
     setTooltipText = _React$useState[1];
@@ -2095,15 +2263,24 @@ var LoadDuration = function LoadDuration(_ref) {
         setTooltipText(getDurationTooltip(duration));
       }
     },
-    children: jsx(Typography, {
+    children: jsxs(Typography, {
       component: "div",
       variant: "subtitle2",
       whiteSpace: "nowrap",
-      "data-testid": "loadDuration",
       sx: {
-        fontSize: 12
+        fontSize: 12,
+        width: '100%',
+        textAlign: 'center'
       },
-      children: loadDurationLabel
+      children: [percentage < 100 && jsx(LoadingIndicatorProgressBar, {
+        progressPercentage: percentage,
+        width: 32,
+        height: 4,
+        top: 17
+      }), jsx("span", {
+        "data-testid": "loadDuration",
+        children: loadDurationLabel
+      })]
     })
   });
 };
@@ -2114,13 +2291,7 @@ var getDurationTooltip = function getDurationTooltip(milliSeconds) {
   return roundToDecimals(milliSeconds / MILLISECONDS_PER_SECOND, DECIMALS_IN_TOOLTIP) + " s";
 };
 var getImageLoadDuration = function getImageLoadDuration(layerId) {
-  var layer = webmapUtils.getWMLayerById(layerId);
-  var currentRequestedGetMapURL = layer == null ? void 0 : layer.getCurrentRequestedGetMapURL();
-  if (currentRequestedGetMapURL === undefined) {
-    return undefined;
-  }
-  // TODO: https://gitlab.com/opengeoweb/geoweb-assets/-/issues/3958
-  return 0;
+  return openLayersGetMapImageStore.loadDuration.getLoadDurationForId(layerId);
 };
 var roundToDecimals = function roundToDecimals(num, decimals) {
   return num.toLocaleString('en', {
@@ -2128,6 +2299,20 @@ var roundToDecimals = function roundToDecimals(num, decimals) {
     useGrouping: false
   });
 };
+var getLoadDurationLabel = function getLoadDurationLabel(layerId) {
+  var loadDurationMs = getImageLoadDuration(layerId);
+  if (loadDurationMs === undefined) {
+    return '-';
+  }
+  var loadDurationInSeconds = loadDurationMs / MILLISECONDS_PER_SECOND;
+  if (loadDurationInSeconds > MAX_DURATION_IN_SECONDS) {
+    return "> " + MAX_DURATION_IN_SECONDS.toLocaleString('en') + " s";
+  }
+  if (loadDurationInSeconds < MIN_DURATION_IN_SECONDS) {
+    return "< " + MIN_DURATION_IN_SECONDS.toLocaleString('en') + " s";
+  }
+  return roundToDecimals(loadDurationInSeconds, DECIMALS_IN_LABEL) + " s";
+};
 /**
  * Hook to subscribe to changes in the load duration for a map layer.
  * This will only trigger a render when the load duration rounded down to seconds changes for the given layer and map combination
@@ -2136,26 +2321,12 @@ var roundToDecimals = function roundToDecimals(num, decimals) {
  * @returns {number}
  */
 var useLoadDurationLabel = function useLoadDurationLabel(mapId, layerId) {
-  var subscribe = React.useCallback(
-  // eslint-disable-next-line no-unused-vars
-  function (onStoreChange) {
-    return function () {};
-  }, []);
-  var getSnapshot = React.useCallback(function () {
-    var loadDurationMs = getImageLoadDuration(layerId);
-    if (loadDurationMs === undefined) {
-      return '-';
-    }
-    var loadDurationInSeconds = loadDurationMs / MILLISECONDS_PER_SECOND;
-    if (loadDurationInSeconds > MAX_DURATION_IN_SECONDS) {
-      return "> " + MAX_DURATION_IN_SECONDS.toLocaleString('en') + " s";
-    }
-    if (loadDurationInSeconds < MIN_DURATION_IN_SECONDS) {
-      return "< " + MIN_DURATION_IN_SECONDS.toLocaleString('en') + " s";
-    }
-    return roundToDecimals(loadDurationInSeconds, DECIMALS_IN_LABEL) + " s";
-  }, [layerId]);
-  return React.useSyncExternalStore(subscribe, getSnapshot);
+  // Selector which triggers update of all labels in the layer manager when percentage of the map changes.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  useSelector(function (store) {
+    return loadingIndicatorSelectors.getMapLoadingPercentage(store, mapId);
+  });
+  return [getLoadDurationLabel(layerId), openLayersGetMapImageStore.loadDuration.getTotalLoadingPercentageForIds([layerId]).percentage];
 };
 
 var LeftButtons = function LeftButtons(_ref) {
@@ -2594,10 +2765,17 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
   var _useCoreTranslation = useCoreTranslation(),
     t = _useCoreTranslation.t;
   var dispatch = useDispatch();
+  var confirmationDialog = useConfirmationDialog();
   var nonEmptyTooltipTitle = tooltipTitle != null ? tooltipTitle : t('layermanager-layer-delete');
   var layerIndex = useSelector(function (store) {
     return mapSelectors.getLayerIndexByLayerId(store, mapId, layerId);
   });
+  var layerType = useSelector(function (store) {
+    return layerSelectors.getLayerType(store, layerId);
+  });
+  var isLayerEnabled = useSelector(function (store) {
+    return layerSelectors.getLayerEnabled(store, layerId);
+  });
   var layerDelete = React.useCallback(function (_ref2) {
     var mapId = _ref2.mapId,
       layerId = _ref2.layerId;
@@ -2608,13 +2786,32 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
       origin: layerTypes.LayerActionOrigin.layerManager
     }));
   }, [dispatch, layerIndex]);
-  var isLayerEnabled = useSelector(function (store) {
-    return layerSelectors.getLayerEnabled(store, layerId);
-  });
+  var onDelete = React.useCallback(function (_ref3) {
+    var mapId = _ref3.mapId,
+      layerId = _ref3.layerId;
+    if (layerType === LayerType.edrFeatureLayer) {
+      void confirmationDialog({
+        title: t('delete-dialog-title'),
+        description: t('delete-dialog-description'),
+        confirmLabel: t('delete-dialog-confirm'),
+        cancelLabel: t('delete-dialog-cancel')
+      }).then(function () {
+        layerDelete({
+          mapId: mapId,
+          layerId: layerId
+        });
+      });
+    } else {
+      layerDelete({
+        mapId: mapId,
+        layerId: layerId
+      });
+    }
+  }, [layerType, confirmationDialog, t, layerDelete]);
   return jsx(CustomIconButton, {
     tooltipTitle: nonEmptyTooltipTitle,
     onClick: function onClick() {
-      layerDelete({
+      return onDelete({
         mapId: mapId,
         layerId: layerId
       });
@@ -2967,6 +3164,23 @@ var RenderEDRLayers = function RenderEDRLayers(_ref) {
   });
 };
 
+var RenderFeatureLayers = function RenderFeatureLayers(_ref) {
+  var layerName = _ref.layerName;
+  return jsx(CustomTooltip, {
+    title: layerName,
+    children: jsx(Typography, {
+      variant: "caption",
+      sx: {
+        fontWeight: 'medium',
+        paddingLeft: '8px',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+      },
+      children: layerName
+    })
+  });
+};
+
 var RenderLayersConnect = function RenderLayersConnect(_ref) {
   var layerId = _ref.layerId,
     mapId = _ref.mapId,
@@ -2982,14 +3196,14 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
   var layerType = useSelector(function (store) {
     return layerSelectors.getLayerType(store, layerId);
   });
-  var layerService = useSelector(function (store) {
+  var serviceUrl = useSelector(function (store) {
     return layerSelectors.getLayerService(store, layerId);
   });
   var isLayerEnabled = useSelector(function (store) {
     return layerSelectors.getLayerEnabled(store, layerId);
   });
   var service = useSelector(function (store) {
-    return serviceSelectors.getServiceByUrl(store, layerService);
+    return serviceSelectors.getServiceByUrl(store, serviceUrl);
   });
   var layerOptions = useSelector(function (store) {
     return layerSelectors.getLayerOptions(store, layerId);
@@ -2997,7 +3211,7 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
   var serviceSetLayers = React.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(payload));
   }, [dispatch]);
-  var addService = /*#__PURE__*/function () {
+  var addWmsService = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(serviceUrl) {
       var _layers, wmService;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -3032,15 +3246,45 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
         }
       }, _callee, null, [[0, 10]]);
     }));
-    return function addService(_x) {
+    return function addWmsService(_x) {
       return _ref2.apply(this, arguments);
     };
   }();
-  if (!service) {
-    void addService(layerService);
+  var isEdrLayer = layerType === LayerType.edrFeatureLayer;
+  var isFeatureLayer = layerType === LayerType.featureLayer;
+  if (!service && !isEdrLayer && !isFeatureLayer) {
+    void addWmsService(serviceUrl);
   }
+  var _useEDRLayerCollectio = useEDRLayerCollection(serviceUrl, '', isEdrLayer),
+    data = _useEDRLayerCollectio.data;
+  React.useEffect(function () {
+    if (!(data != null && data.parameter_names) || service) {
+      return;
+    }
+    var layers = Object.entries(data == null ? void 0 : data.parameter_names).map(function (parameter) {
+      return {
+        name: parameter[0],
+        title: parameter[1].label,
+        styles: defaultEdrStyles,
+        leaf: true,
+        path: []
+      };
+    }).sort(function (paramA, paramB) {
+      var _paramA$title, _paramB$title;
+      return ((_paramA$title = paramA.title) != null ? _paramA$title : '').localeCompare((_paramB$title = paramB.title) != null ? _paramB$title : '');
+    });
+    serviceSetLayers({
+      id: data.id,
+      name: data.title || 'EDR collection',
+      serviceUrl: serviceUrl,
+      "abstract": data.description,
+      layers: layers,
+      scope: 'system',
+      type: 'EDR'
+    });
+  }, [data, serviceUrl, service, serviceSetLayers]);
   var layers = useSelector(function (store) {
-    return serviceSelectors.getLayersFromServiceSelector(store, layerService);
+    return serviceSelectors.getLayersFromServiceSelector(store, serviceUrl);
   });
   var layerChangeName = React.useCallback(function (_ref3) {
     var layerId = _ref3.layerId,
@@ -3082,6 +3326,11 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
       skipLocalStyling: skipLocalStyling
     });
   }
+  if (layerType === LayerType.featureLayer) {
+    return jsx(RenderFeatureLayers, {
+      layerName: layerDisplayName
+    });
+  }
   return jsx(RenderLayers, {
     layers: layers,
     layerName: layerName,
@@ -3103,6 +3352,10 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
     tooltipTitle = _ref.tooltipTitle,
     icon = _ref.icon;
   var dispatch = useDispatch();
+  var layerType = useSelector(function (store) {
+    return layerSelectors.getLayerType(store, layerId);
+  });
+  var isFeatureLayer = layerType === LayerType.featureLayer;
   var duplicateLayer = React.useCallback(function (_ref2) {
     var newLayerId = _ref2.newLayerId,
       mapId = _ref2.mapId;
@@ -3116,6 +3369,7 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
   return jsx(LayerManagerMenuButton, {
     layerId: layerId,
     mapId: mapId,
+    isFeatureLayer: isFeatureLayer,
     onLayerDuplicate: function onLayerDuplicate() {
       duplicateLayer({
         newLayerId: webmapUtils.generateLayerId(),
@@ -3419,6 +3673,7 @@ var CustomDimensionSelectConnect = function CustomDimensionSelectConnect(_ref) {
 
 var LayerInfoButtonConnect = function LayerInfoButtonConnect(_ref) {
   var isLayerMissing = _ref.isLayerMissing,
+    isFeatureLayer = _ref.isFeatureLayer,
     mapId = _ref.mapId,
     serviceUrl = _ref.serviceUrl,
     layerName = _ref.layerName,
@@ -3445,7 +3700,7 @@ var LayerInfoButtonConnect = function LayerInfoButtonConnect(_ref) {
     }
   };
   return jsx(LayerInfoButton, {
-    disabled: isLayerMissing,
+    disabled: isLayerMissing || isFeatureLayer,
     isActive: isActive,
     onClick: onClick
   });
@@ -3508,11 +3763,12 @@ var LayerRowConnect = /*#__PURE__*/React.memo(function (_ref) {
     return layerSelectors.getLayerType(store, layerId);
   });
   var isEDRLayer = layerType === LayerType.edrFeatureLayer;
+  var isFeatureLayer = layerType === LayerType.featureLayer;
   var layerServiceUrl = useSelector(function (store) {
     return layerSelectors.getLayerService(store, layerId);
   });
   var isLayerMissing = useSelector(function (store) {
-    return layerSelectors.getIsLayerMissing(store, layerId);
+    return !isFeatureLayer ? layerSelectors.getIsLayerMissing(store, layerId) : false;
   });
   renderCounter.count(LayerRowConnect.name);
   return jsx(LayerRow, {
@@ -3573,7 +3829,8 @@ var LayerRowConnect = /*#__PURE__*/React.memo(function (_ref) {
       isLayerMissing: isLayerMissing,
       mapId: mapId,
       serviceUrl: layerServiceUrl,
-      layerName: layerName
+      layerName: layerName,
+      isFeatureLayer: isFeatureLayer
     }),
     layerMenuLayout: jsx(LayerManagerMenuButtonConnect, Object.assign({
       mapId: mapId,
@@ -3639,76 +3896,146 @@ var LayerContainerRow = /*#__PURE__*/React.memo(function (_ref) {
   var _React$useTransition = React.useTransition(),
     isPending = _React$useTransition[0],
     startTransition = _React$useTransition[1];
-  var _React$useState = React.useState(0),
-    rowsToDisplay = _React$useState[0],
-    setRowsToDisplay = _React$useState[1];
-  var layerIds = useSelector(function (store) {
+  // Separate map layers and feature layers
+  var mapLayerIds = useSelector(function (store) {
     return mapSelectors.getLayerIds(store, mapId);
   });
-  var layerLength = layerIds.length;
-  var layerMoveLayer = React.useCallback(function (_ref2) {
+  var featureLayers = useSelector(function (store) {
+    return mapSelectors.getMapFeatureLayers(store, mapId);
+  });
+  // State for drag and display for each list
+  var _React$useState = React.useState(null),
+    activeDragIndexMap = _React$useState[0],
+    setActiveDragIndexMap = _React$useState[1];
+  var _React$useState2 = React.useState(null),
+    activeDragIndexFeature = _React$useState2[0],
+    setActiveDragIndexFeature = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    rowsToDisplayMap = _React$useState3[0],
+    setRowsToDisplayMap = _React$useState3[1];
+  var _React$useState4 = React.useState(0),
+    rowsToDisplayFeature = _React$useState4[0],
+    setRowsToDisplayFeature = _React$useState4[1];
+  var featureLayerIds = React.useMemo(function () {
+    return featureLayers.filter(function (layer) {
+      return layer.name !== undefined && layer.id !== undefined;
+    }).map(function (layer) {
+      return layer.id;
+    });
+  }, [featureLayers]);
+  var layerMove = React.useCallback(function (_ref2) {
     var mapId = _ref2.mapId,
       oldIndex = _ref2.oldIndex,
-      newIndex = _ref2.newIndex;
+      newIndex = _ref2.newIndex,
+      layerType = _ref2.layerType;
     return dispatch(mapActions.layerMoveLayer({
       mapId: mapId,
       oldIndex: oldIndex,
       newIndex: newIndex,
-      origin: layerTypes.LayerActionOrigin.layerManager
+      origin: layerTypes.LayerActionOrigin.layerManager,
+      layerType: layerType
     }));
   }, [dispatch]);
-  var _React$useState2 = React.useState(null),
-    activeDragIndex = _React$useState2[0],
-    setActiveDragIndex = _React$useState2[1];
-  var onSetList = function onSetList() {}; // since we use activeDragIndex, we don't need inner state handling of ReactSortable
-  var onStart = React.useCallback(function (_ref3) {
+  // Drag handlers for map layers
+  var onSetListMap = function onSetListMap() {};
+  var onStartDragMap = React.useCallback(function (_ref3) {
     var oldIndex = _ref3.oldIndex;
-    setActiveDragIndex(oldIndex);
+    setActiveDragIndexMap(oldIndex);
     if (Sortable.ghost) {
       Sortable.ghost.style.opacity = '1';
     }
   }, []);
-  var onEnd = React.useCallback(function () {
-    if (activeDragIndex !== null) {
-      setActiveDragIndex(null);
+  var onEndDragMap = React.useCallback(function () {
+    if (activeDragIndexMap !== null) {
+      setActiveDragIndexMap(null);
     }
-  }, [activeDragIndex]);
-  var onSortEnd = function onSortEnd(_ref4) {
+  }, [activeDragIndexMap]);
+  var onSortEndMap = function onSortEndMap(_ref4) {
     var oldIndex = _ref4.oldIndex,
       newIndex = _ref4.newIndex;
-    setActiveDragIndex(null);
-    layerMoveLayer({
+    setActiveDragIndexMap(null);
+    layerMove({
       mapId: mapId,
       oldIndex: oldIndex,
-      newIndex: newIndex
+      newIndex: newIndex,
+      layerType: LayerType.mapLayer
     });
   };
-  var isSorting = activeDragIndex !== null;
-  var isDragDisabled = layerLength === 1;
-  var contents = layerIds.map(function (layerId) {
+  // Drag handlers for feature layers
+  var onSetListFeature = function onSetListFeature() {};
+  var onStartDragFeature = React.useCallback(function (_ref5) {
+    var oldIndex = _ref5.oldIndex;
+    setActiveDragIndexFeature(oldIndex);
+    if (Sortable.ghost) {
+      Sortable.ghost.style.opacity = '1';
+    }
+  }, []);
+  var onEndDragFeature = React.useCallback(function () {
+    if (activeDragIndexFeature !== null) {
+      setActiveDragIndexFeature(null);
+    }
+  }, [activeDragIndexFeature]);
+  var onSortEndFeature = function onSortEndFeature(_ref6) {
+    var oldIndex = _ref6.oldIndex,
+      newIndex = _ref6.newIndex;
+    setActiveDragIndexFeature(null);
+    layerMove({
+      mapId: mapId,
+      oldIndex: oldIndex,
+      newIndex: newIndex,
+      layerType: LayerType.featureLayer
+    });
+  };
+  // Display logic for each list
+  var isSortingMap = activeDragIndexMap !== null;
+  var isSortingFeature = activeDragIndexFeature !== null;
+  var isDragDisabledMap = mapLayerIds.length === 1;
+  var isDragDisabledFeature = featureLayerIds.length === 1;
+  var mapLayerContents = mapLayerIds.map(function (layerId) {
     var _settings$dragHandle, _settings$dragHandle2;
     return jsx(LayerRowConnect, {
       mapId: mapId,
       layerId: layerId,
       dragHandle: jsx(DragHandle, {
-        isDisabled: isDragDisabled,
-        hideTooltip: isSorting || isDragDisabled,
-        isSorting: isSorting,
+        isDisabled: isDragDisabledMap,
+        hideTooltip: isSortingMap || isDragDisabledMap,
+        isSorting: isSortingMap,
         icon: settings == null || (_settings$dragHandle = settings.dragHandle) == null ? void 0 : _settings$dragHandle.icon,
         tooltipTitle: settings == null || (_settings$dragHandle2 = settings.dragHandle) == null ? void 0 : _settings$dragHandle2.tooltipTitle
       }),
       settings: settings,
       collapsedColumns: collapsedColumns
-    }, "layerRowConnect-" + layerId);
+    }, "layerRowConnect-map-" + layerId);
+  });
+  var featureLayerContents = featureLayerIds.map(function (layerId) {
+    var _settings$dragHandle3, _settings$dragHandle4;
+    return jsx(LayerRowConnect, {
+      mapId: mapId,
+      layerId: layerId,
+      dragHandle: jsx(DragHandle, {
+        isDisabled: isDragDisabledFeature,
+        hideTooltip: isSortingFeature || isDragDisabledFeature,
+        isSorting: isSortingFeature,
+        icon: settings == null || (_settings$dragHandle3 = settings.dragHandle) == null ? void 0 : _settings$dragHandle3.icon,
+        tooltipTitle: settings == null || (_settings$dragHandle4 = settings.dragHandle) == null ? void 0 : _settings$dragHandle4.tooltipTitle
+      }),
+      settings: settings,
+      collapsedColumns: collapsedColumns
+    }, "layerRowConnect-feature-" + layerId);
   });
   React.useEffect(function () {
-    if (rowsToDisplay < layerLength) {
+    if (rowsToDisplayMap < mapLayerIds.length) {
+      startTransition(function () {
+        setRowsToDisplayMap(rowsToDisplayMap + mapLayerIds.length);
+      });
+    }
+    if (rowsToDisplayFeature < featureLayerIds.length) {
       startTransition(function () {
-        setRowsToDisplay(rowsToDisplay + layerLength);
+        setRowsToDisplayFeature(rowsToDisplayFeature + featureLayerIds.length);
       });
     }
-  }, [layerLength, rowsToDisplay]);
-  return jsx(Grid, Object.assign({
+  }, [mapLayerIds.length, featureLayerIds.length, rowsToDisplayMap, rowsToDisplayFeature]);
+  return jsxs(Grid, Object.assign({
     container: true,
     "data-testid": "layerContainerRow",
     className: "layerContainerRow",
@@ -3724,29 +4051,48 @@ var LayerContainerRow = /*#__PURE__*/React.memo(function (_ref) {
       }
     }
   }, gridProps, {
-    children: jsx(ReactSortable, {
+    children: [rowsToDisplayFeature > 0 && jsx(ReactSortable, {
       tag: "div",
-      list: layerIds.map(function (layerId) {
+      list: featureLayerIds.map(function (layerId) {
         return {
           id: layerId
         };
       }),
-      setList: onSetList,
+      setList: onSetListFeature,
       animation: 200,
-      onSort: onSortEnd,
+      onSort: onSortEndFeature,
       handle: ".handle",
       direction: "vertical",
-      // hover props
       forceFallback: false,
-      onStart: onStart,
-      onEnd: onEnd,
+      onStart: onStartDragFeature,
+      onEnd: onEndDragFeature,
+      style: {
+        width: '100%',
+        marginBottom: '8px'
+      },
+      children: featureLayerContents.slice(0, rowsToDisplayFeature)
+    }), jsx(ReactSortable, {
+      tag: "div",
+      list: mapLayerIds.map(function (layerId) {
+        return {
+          id: layerId
+        };
+      }),
+      setList: onSetListMap,
+      animation: 200,
+      onSort: onSortEndMap,
+      handle: ".handle",
+      direction: "vertical",
+      forceFallback: false,
+      onStart: onStartDragMap,
+      onEnd: onEndDragMap,
       style: {
         width: '100%'
       },
       children: isPending ? jsx(LinearProgress, {
-        "data-testid": "loading-bar"
-      }) : contents.slice(0, rowsToDisplay)
-    })
+        "data-testid": "loading-bar-map"
+      }) : mapLayerContents.slice(0, rowsToDisplayMap)
+    })]
   }));
 });
 
@@ -4222,7 +4568,7 @@ var WMSLayerTreeConnect = connectRedux$3(ConnectedTree);
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 var isValidService = function isValidService(service) {
-  return Object.prototype.hasOwnProperty.call(service, 'url');
+  return Object.hasOwn(service, 'url');
 };
 var filterServices = function filterServices(presetArray) {
   var hasServices = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
@@ -4552,7 +4898,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
               // No error message until new check
               setUrlError('');
             },
-            onKeyPress: function onKeyPress(event) {
+            onKeyDown: function onKeyDown(event) {
               if (event.key === 'Enter') {
                 handleAddServiceURL();
               }
@@ -6067,7 +6413,7 @@ var connectRedux = connect(function (store, props) {
     secondsPerPx: mapSelectors.getMapTimeSliderSecondsPerPx(store, props.mapId),
     span: mapSelectors.getMapTimeSliderSpan(store, props.mapId),
     timeStep: mapSelectors.getMapTimeStep(store, props.mapId),
-    isAnimating: mapSelectors.isAnimating(store, props.mapId),
+    linkedMapAnimationInfo: mapSelectors.linkedMapAnimationInfo(store, props.mapId),
     isAutoUpdating: mapSelectors.isAutoUpdating(store, props.mapId)
   };
 }, {
@@ -6081,6 +6427,7 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
     secondsPerPx = _ref.secondsPerPx,
     span = _ref.span,
     timeStep = _ref.timeStep,
+    linkedMapAnimationInfo = _ref.linkedMapAnimationInfo,
     isAutoUpdating = _ref.isAutoUpdating,
     setCenterTime = _ref.setCenterTime,
     unfilteredSelectedTime = _ref.unfilteredSelectedTime,
@@ -6098,6 +6445,7 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
     dataStartTime: dataStartTime,
     dataEndTime: dataEndTime,
     timeStep: timeStep,
+    linkedMapAnimationInfo: linkedMapAnimationInfo,
     isAutoUpdating: isAutoUpdating,
     unfilteredSelectedTime: unfilteredSelectedTime,
     setUnfilteredSelectedTime: setUnfilteredSelectedTime,
@@ -7346,19 +7694,21 @@ var LocationSearch = function LocationSearch(_ref) {
               setSelectedValue(null);
             }
           },
-          InputProps: Object.assign({}, params.InputProps, {
-            endAdornment: jsx(CustomIconButton, {
-              tooltipTitle: t('search-clear'),
-              onClick: function onClick() {
-                setInputValue('');
-                setSelectedValue(null);
-              },
-              sx: {
-                marginRight: 1
-              },
-              children: jsx(Close, {})
+          slotProps: {
+            input: Object.assign({}, params.InputProps, {
+              endAdornment: jsx(CustomIconButton, {
+                tooltipTitle: t('search-clear'),
+                onClick: function onClick() {
+                  setInputValue('');
+                  setSelectedValue(null);
+                },
+                sx: {
+                  marginRight: 1
+                },
+                children: jsx(Close, {})
+              })
             })
-          })
+          }
         }));
       }
     })]
@@ -7540,6 +7890,34 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref)
     hoverSelect = _ref.hoverSelect;
   var store = useStore();
   var dispatch = useDispatch();
+  var onFeatureClick = React__default.useCallback(function (feature) {
+    var previouslySelectedFeatureIndex = layer.selectedFeatureIndex;
+    var selectedFeatureIndex = layer.geojson.features.findIndex(function (feat) {
+      return feature[0] && feat.id === feature[0].getId();
+    });
+    if (selectedFeatureIndex !== -1 && selectedFeatureIndex !== previouslySelectedFeatureIndex) {
+      dispatch(layerActions.setSelectedFeature({
+        layerId: layerId,
+        selectedFeatureIndex: selectedFeatureIndex
+      }));
+      dispatch(layerActions.updateFeatureProperties({
+        layerId: layerId,
+        properties: {
+          highlightSelectedFeature: true
+        },
+        selectedFeatureIndex: selectedFeatureIndex
+      }));
+      if (previouslySelectedFeatureIndex !== undefined) {
+        dispatch(layerActions.updateFeatureProperties({
+          layerId: layerId,
+          properties: {
+            highlightSelectedFeature: false
+          },
+          selectedFeatureIndex: previouslySelectedFeatureIndex
+        }));
+      }
+    }
+  }, [dispatch, layer.geojson, layer.selectedFeatureIndex, layerId]);
   var updateFeature = React__default.useCallback(function (geojson, reason) {
     if (!layerId) {
       window.console.error('updateFeature without layerId');
@@ -7574,7 +7952,13 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref)
       featureCollection: !layer.isInEditMode ? layer.geojson : undefined,
       zIndex: zIndex,
       style: style,
-      hoverSelect: hoverSelect
+      hoverSelect: hoverSelect,
+      clickOnFeature: layer.isSelectable ? {
+        onClick: onFeatureClick,
+        hitTolerance: 5
+      } : undefined,
+      visible: layer.enabled,
+      opacity: layer.opacity
     }), jsx(OpenLayersMapDraw, {
       drawMode: layer.drawMode,
       viewOnlyStyle: style,
@@ -7621,12 +8005,31 @@ var makePrefetchTimeSpan = function makePrefetchTimeSpan(timeSliderStartCenterEn
     end: roundEnd,
     step: timeSliderTimeStepInS
   });
-  // eslint-disable-next-line no-constant-condition
   return {
     isAnimating: isAnimating,
     prefetchList: timeSpanList
   };
 };
+var usePrefetchTimeSpan = function usePrefetchTimeSpan(timeSliderStartCenterEndTime, isAnimating, animationList) {
+  var _useState = useState({
+      isAnimating: isAnimating,
+      prefetchList: animationList || []
+    }),
+    prefetchTimespan = _useState[0],
+    setPrefetchTimeSpan = _useState[1];
+  var makeThrottledPrefetchTimespan = useMemo(function () {
+    return throttle(function (timeSliderStartCenterEndTime, isAnimating, animationList) {
+      return setPrefetchTimeSpan(makePrefetchTimeSpan(timeSliderStartCenterEndTime, isAnimating, animationList));
+    }, 500, {
+      leading: true,
+      trailing: true
+    });
+  }, []);
+  useEffect(function () {
+    return makeThrottledPrefetchTimespan(timeSliderStartCenterEndTime, isAnimating, animationList);
+  }, [animationList, isAnimating, makeThrottledPrefetchTimespan, timeSliderStartCenterEndTime]);
+  return prefetchTimespan;
+};
 var makeLayerInfoPayload = function makeLayerInfoPayload(payload, mapDimensions, mapId) {
   // During intialization, try to base the layer dimension on the current map dimension value.
   var origin = 'onInitializeLayer in OlMapViewLayerConnect';
@@ -7824,6 +8227,54 @@ var useGetOpenLayersView = function useGetOpenLayersView(mapId, store) {
   };
 };
 
+/* *
+ * 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 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var LOADING_INDICATOR_UPDATE_INTERVAL_MS = 200;
+// This hook checks periodically if the loading completeness (percentage) of a set of layerIds has changed. This avoids an action storm of setGetMapIsLoading actions. Should only be used in mapview.
+var useMapViewLoadingIndicator = function useMapViewLoadingIndicator(mapId, layerIds) {
+  var _useStore = useStore(),
+    dispatch = _useStore.dispatch;
+  var setGetMapLoadingPercentage = React__default.useCallback(function (percentageComplete) {
+    dispatch(loadingIndicatorActions.setGetMapIsLoading({
+      id: mapId,
+      getMapLoadingPercentage: percentageComplete
+    }));
+  }, [dispatch, mapId]);
+  // Check periodically if percentage is changed. If this is the case, dispatch an action.
+  var percentageCompleteRef = React__default.useRef(100);
+  var numberDoneRef = React__default.useRef(0);
+  React__default.useEffect(function () {
+    var intervalId = setInterval(function () {
+      var _openLayersGetMapImag = openLayersGetMapImageStore.loadDuration.getTotalLoadingPercentageForIds(layerIds),
+        percentageComplete = _openLayersGetMapImag.percentage,
+        doneLoading = _openLayersGetMapImag.doneLoading;
+      if (percentageComplete !== percentageCompleteRef.current || doneLoading !== numberDoneRef.current) {
+        numberDoneRef.current = doneLoading;
+        percentageCompleteRef.current = percentageComplete;
+        setGetMapLoadingPercentage(percentageComplete);
+      }
+    }, LOADING_INDICATOR_UPDATE_INTERVAL_MS);
+    return function () {
+      clearInterval(intervalId);
+    };
+  }, [layerIds, mapId, setGetMapLoadingPercentage]);
+};
+
 /**
  * Connected component used to display the map and selected layers.
  * Includes options to disable the map controls and legend.
@@ -7978,6 +8429,9 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
   });
   var mapPinChangeLocation = React.useCallback(function (clickedLocation) {
     var _hoverLinkedFeature$g;
+    if (disableMapPin) {
+      return;
+    }
     var mapPinLocation = getCenterOfLinkedFeature(hoverLinkedFeature, srs) || clickedLocation;
     var selectedFeatureId = (hoverLinkedFeature == null || (_hoverLinkedFeature$g = hoverLinkedFeature.getId()) == null ? void 0 : _hoverLinkedFeature$g.toString()) || '';
     if (hoverLinkedFeature) {
@@ -8002,7 +8456,7 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
         mapPinLocation: mapPinLocation
       }));
     });
-  }, [dispatch, hoverLinkedFeature, linkedFeatures.features, linkedPanelId, mapId, selectedMapIds, srs]);
+  }, [dispatch, disableMapPin, hoverLinkedFeature, linkedFeatures.features, linkedPanelId, mapId, selectedMapIds, srs]);
   var isActiveWindowId = useSelector(function (store) {
     return uiSelectors.getIsActiveWindowId(store, mapId);
   });
@@ -8017,10 +8471,6 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
       id: mapId,
       type: [syncConstants.SYNCGROUPS_TYPE_SETTIME, syncConstants.SYNCGROUPS_TYPE_SETBBOX]
     });
-    dispatch(loadingIndicatorActions.setGetMapIsLoading({
-      id: mapId,
-      isGetMapLoading: false
-    }));
     return function () {
       unregisterMap({
         mapId: mapId
@@ -8030,18 +8480,6 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
       });
     };
   }, [dispatch, mapId, registerMap, syncGroupRemoveSource, syncGroupsAddSource, unregisterMap]);
-  var onGetMapLoadStart = React.useCallback(function () {
-    dispatch(loadingIndicatorActions.setGetMapIsLoading({
-      id: mapId,
-      isGetMapLoading: true
-    }));
-  }, [dispatch, mapId]);
-  var onGetMapLoadReady = React.useCallback(function () {
-    dispatch(loadingIndicatorActions.setGetMapIsLoading({
-      id: mapId,
-      isGetMapLoading: false
-    }));
-  }, [dispatch, mapId]);
   React.useEffect(function () {
     if (!view) {
       return function () {};
@@ -8095,7 +8533,7 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
       }
     }));
   }, [hoverId, previousHoverId, hoverLinkedFeature, featureProperties, linkedPanelId, dispatch]);
-  var prefetchTimespan = makePrefetchTimeSpan(timeSliderStartCenterEndTime, isAnimating, animationList);
+  var prefetchTimespan = usePrefetchTimeSpan(timeSliderStartCenterEndTime, isAnimating, animationList);
   var layerIds = mapLayerIds.join();
   var refetchLayers = React.useCallback(function () {
     mapLayerIds == null || mapLayerIds.forEach(/*#__PURE__*/function () {
@@ -8145,24 +8583,7 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mapId, updateLayerInformation, layerIds]);
   useSetIntervalWhenVisible(refetchLayers, 60000);
-  var isLoading = React.useRef(false);
-  // UseEffect for loading indicator
-  React.useEffect(function () {
-    openLayersGetMapImageStore.addImageEventCallback(function () {
-      var checkLoading = !!(openLayersGetMapImageStore.getNumImagesLoading() > 0);
-      if (checkLoading !== isLoading.current) {
-        if (checkLoading === true) {
-          onGetMapLoadStart && onGetMapLoadStart();
-        } else {
-          onGetMapLoadReady && onGetMapLoadReady();
-        }
-        isLoading.current = checkLoading;
-      }
-    }, mapId);
-    return function () {
-      openLayersGetMapImageStore.removeEventCallback(mapId);
-    };
-  }, [mapId, onGetMapLoadReady, onGetMapLoadStart]);
+  useMapViewLoadingIndicator(mapId, mapLayerIds);
   var _React$useState2 = React.useState(false),
     debugMode = _React$useState2[0],
     setDebugMode = _React$useState2[1];
@@ -8961,8 +9382,10 @@ var SyncGroupListItem = function SyncGroupListItem(_ref) {
             checked: isChecked,
             tabIndex: -1,
             disableRipple: true,
-            inputProps: {
-              'aria-labelledby': source.name
+            slotProps: {
+              input: {
+                'aria-labelledby': source.name
+              }
             },
             sx: isNotCheckedElseWhere ? styles.checkboxIsActive : styles.isDisabled,
             color: "default"
@@ -9143,8 +9566,10 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
         },
         children: t('workspace-time-scroll-off')
       }), jsx(Switch, {
-        inputProps: {
-          'aria-label': 'workspace time scroll toggle'
+        slotProps: {
+          input: {
+            'aria-label': 'workspace time scroll toggle'
+          }
         },
         checked: isTimeScrollingEnabled,
         onChange: function onChange() {
@@ -9658,6 +10083,215 @@ var LanguageSelect = function LanguageSelect(_ref) {
   });
 };
 
+var textStyle = {
+  lineHeight: '20px',
+  letterSpacing: '0.25px'
+};
+var textStyleWithMargin = Object.assign({}, textStyle, {
+  marginBottom: 1
+});
+var SelectedFeature = function SelectedFeature(_ref) {
+  var feature = _ref.feature,
+    layerName = _ref.layerName;
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  var getFormattedCoordinates = function getFormattedCoordinates(lat, lon) {
+    var latHemisphere = lat >= 0 ? 'N' : 'S';
+    var lonHemisphere = lon >= 0 ? 'E' : 'W';
+    return Math.abs(lat) + "\xB0 " + latHemisphere + ", " + Math.abs(lon) + "\xB0 " + lonHemisphere;
+  };
+  var formattedCoordinates = useMemo(function () {
+    if (feature && feature.geometry.type === 'Point') {
+      var latitude = feature.geometry.coordinates[1];
+      var longitude = feature.geometry.coordinates[0];
+      return getFormattedCoordinates(latitude, longitude);
+    }
+    return '';
+  }, [feature]);
+  var featureInfoKeys = useMemo(function () {
+    return feature ? Object.keys(feature.properties || {}).filter(function (key) {
+      return !['id', 'geometry', 'hover', 'highlightSelectedFeature'].includes(key);
+    }).sort() : [];
+  }, [feature]);
+  return jsx(CustomAccordion, {
+    title: layerName,
+    children: jsxs(Box, {
+      sx: {
+        minWidth: '12rem',
+        paddingX: '1rem'
+      },
+      children: [jsx(Typography, {
+        variant: "caption",
+        sx: textStyle,
+        color: "textSecondary",
+        children: t('featureinfo-id')
+      }), jsx(Typography, {
+        variant: "body2",
+        sx: textStyleWithMargin,
+        children: feature.id
+      }), jsx(Typography, {
+        variant: "caption",
+        sx: textStyle,
+        color: "textSecondary",
+        children: t('featureinfo-location')
+      }), jsx(Typography, {
+        variant: "body2",
+        sx: textStyleWithMargin,
+        children: formattedCoordinates
+      }), featureInfoKeys.map(function (key) {
+        var _feature$properties;
+        return jsxs(React__default.Fragment, {
+          children: [jsx(Typography, {
+            variant: "caption",
+            sx: textStyle,
+            color: "textSecondary",
+            children: t("" + key)
+          }), jsx(Typography, {
+            variant: "body2",
+            sx: textStyleWithMargin,
+            children: (_feature$properties = feature.properties) == null || (_feature$properties = _feature$properties[key]) == null ? void 0 : _feature$properties.toString()
+          })]
+        }, key);
+      })]
+    })
+  }, layerName);
+};
+
+var SelectedFeaturesDialog = function SelectedFeaturesDialog(_ref) {
+  var onClose = _ref.onClose,
+    isOpen = _ref.isOpen,
+    _ref$onMouseDown = _ref.onMouseDown,
+    onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    _ref$order = _ref.order,
+    order = _ref$order === void 0 ? 0 : _ref$order,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source,
+    _ref$startPosition = _ref.startPosition,
+    startPosition = _ref$startPosition === void 0 ? {
+      top: 85,
+      left: 50
+    } : _ref$startPosition,
+    features = _ref.features;
+  var minSize = {
+    width: 400,
+    height: 200
+  };
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  var stopWheelEventPropagationRef = useWheelStopPropagation();
+  return jsx(ToolContainerDraggable, {
+    title: t('featureinfo-title'),
+    startSize: {
+      width: 510,
+      height: 500
+    },
+    minWidth: minSize.width,
+    minHeight: minSize.height,
+    startPosition: startPosition,
+    isOpen: isOpen,
+    onClose: onClose,
+    "data-testid": "featureInfoWindow",
+    onMouseDown: onMouseDown,
+    order: order,
+    source: source,
+    className: "featureInfo",
+    children: jsx(Box, {
+      ref: stopWheelEventPropagationRef,
+      onKeyDown: function onKeyDown(event) {
+        event.stopPropagation();
+      },
+      style: {
+        paddingTop: '8px',
+        paddingBottom: '8px'
+      },
+      "data-testid": "dataExplorerInfoBox",
+      children: Object.entries(features).map(function (_ref2) {
+        var key = _ref2[0],
+          value = _ref2[1];
+        return jsx(SelectedFeature, {
+          feature: value,
+          layerName: key
+        }, key);
+      })
+    })
+  });
+};
+
+var SelectedFeaturesDialogConnect = function SelectedFeaturesDialogConnect() {
+  var dispatch = useDispatch();
+  var _useSetupDialog = useSetupDialog(uiTypes.DialogTypes.SelectedFeatures),
+    dialogOrder = _useSetupDialog.dialogOrder,
+    setDialogOrder = _useSetupDialog.setDialogOrder,
+    onCloseDialog = _useSetupDialog.onCloseDialog,
+    isDialogOpen = _useSetupDialog.isDialogOpen,
+    uiSource = _useSetupDialog.uiSource;
+  var activeMapId = useSelector(function (store) {
+    return uiSelectors.getActiveWindowId(store);
+  });
+  var featureLayers = useSelector(function (store) {
+    return mapSelectors.getMapFeatureLayers(store, activeMapId);
+  });
+  var selectedFeatureLayers = useMemo(function () {
+    return featureLayers.filter(function (layer) {
+      return layer.isSelectable && layer.selectedFeatureIndex !== undefined;
+    });
+  }, [featureLayers]);
+  var selectedFeatures = useMemo(function () {
+    var featuresMap = {};
+    selectedFeatureLayers.forEach(function (layer) {
+      var _layer$geojson;
+      var feature = (_layer$geojson = layer.geojson) == null ? void 0 : _layer$geojson.features[layer.selectedFeatureIndex];
+      if (feature && layer.name) {
+        featuresMap[layer.name] = feature;
+      }
+    });
+    return featuresMap;
+  }, [selectedFeatureLayers]);
+  // Deselect the selected features and close the dialog
+  var closeDialog = useCallback(function () {
+    selectedFeatureLayers.forEach(function (layer) {
+      dispatch(layerActions.setSelectedFeature({
+        layerId: layer.id,
+        selectedFeatureIndex: undefined
+      }));
+      dispatch(layerActions.updateFeatureProperties({
+        layerId: layer.id,
+        properties: {
+          highlightSelectedFeature: false
+        },
+        selectedFeatureIndex: layer.selectedFeatureIndex
+      }));
+    });
+    onCloseDialog();
+  }, [dispatch, onCloseDialog, selectedFeatureLayers]);
+  useEffect(function () {
+    if (Object.entries(selectedFeatures).length > 0 && activeMapId !== undefined) {
+      dispatch(uiActions.setActiveMapIdForDialog({
+        type: uiTypes.DialogTypes.SelectedFeatures,
+        mapId: activeMapId,
+        setOpen: true,
+        source: 'app'
+      }));
+    } else {
+      onCloseDialog();
+    }
+  }, [activeMapId, onCloseDialog, dispatch, selectedFeatures]);
+  return React.useMemo(function () {
+    return jsx(SelectedFeaturesDialog, {
+      isOpen: isDialogOpen,
+      onClose: closeDialog,
+      onMouseDown: setDialogOrder,
+      order: dialogOrder,
+      source: uiSource,
+      startPosition: {
+        top: 85,
+        left: 50
+      },
+      features: selectedFeatures
+    });
+  }, [dialogOrder, isDialogOpen, closeDialog, setDialogOrder, uiSource, selectedFeatures]);
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -9939,4 +10573,4 @@ var storyUtils = /*#__PURE__*/Object.freeze({
   useDefaultMapSettings: useDefaultMapSettings
 });
 
-export { CORE_NAMESPACE, ConfigurableMapConnect, CoreI18nProvider, CoreStoreProvider, CoreThemeProvider, CoreThemeStoreProvider, DemoWrapper, DemoWrapperConnect, HarmonieTempAndPrecipPreset, LanguageSelect, LayerInfoButtonConnect, LayerInfoDialogConnect, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, LocationSearch, LocationSearchConnect, types as LocationSearchTypes, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, OlMapViewConnect, RouterWrapperConnect, SearchControlButtonConnect, SentryRecordButton, SyncGroupViewerConnect, TimeSliderConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, fakeLocationDetailList, fakeLocationList, filterMapPresets, filterServices, filterTimeSeriesServices, getCenterOfLinkedFeature, getLanguageFromLocalStorage, languageLocalStorageKey, locationApiEndpoints, makeLayerInfoPayload, makePrefetchTimeSpan, saveLanguageToLocalStorage, storyUtils, testLayers, useFetchServices, useFitAndHighlightWarningFeature, useGetOpenLayersView, useLocationDetail, useLocationList, useUpdateTimeSpan, useUpdateTimestep };
+export { CORE_NAMESPACE, ConfigurableMapConnect, CoreI18nProvider, CoreStoreProvider, CoreThemeProvider, CoreThemeStoreProvider, DemoWrapper, DemoWrapperConnect, HarmonieTempAndPrecipPreset, LanguageSelect, LayerInfoButtonConnect, LayerInfoDialogConnect, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, LoadingIndicatorProgressBar, LocationSearch, LocationSearchConnect, types as LocationSearchTypes, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, OlMapViewConnect, RouterWrapperConnect, SearchControlButtonConnect, SelectedFeaturesDialogConnect, SentryRecordButton, SyncGroupViewerConnect, TimeSliderConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, fakeLocationDetailList, fakeLocationList, filterMapPresets, filterServices, filterTimeSeriesServices, getCenterOfLinkedFeature, getLanguageFromLocalStorage, languageLocalStorageKey, locationApiEndpoints, makeLayerInfoPayload, makePrefetchTimeSpan, saveLanguageToLocalStorage, storyUtils, testLayers, useFetchServices, useFitAndHighlightWarningFeature, useGetOpenLayersView, useLocationDetail, useLocationList, usePrefetchTimeSpan, useUpdateTimeSpan, useUpdateTimestep };