@opengeoweb/core 14.3.0 → 14.4.0

package/index.esm.js

@@ -2,29 +2,31 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 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, useDebounce, sessionStorageProvider, usePrevious, dateUtils, 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 { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, CustomIconButton, CustomTooltip, TooltipSelect, AlertIcon, useScrollingInIsolation, sliderHeaderStyle, CustomSlider, ToggleMenu, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, useConfirmationDialog, CustomDialog, PROJECTION, calculateStartSize, useWheelStopPropagation, ToolContainerDraggable, sessionStorageProvider, useDebounce, usePrevious, dateUtils, ErrorBoundary } from '@opengeoweb/shared';
+import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, ColumnCollapsed, ColumnCollapse, Copy, Delete, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Overlayers, Layers, Search, Exclamation, MyLocation, Airplane, Region, Pinned, Close, ExitDomain, LocationInfo, Measure, Options, Info, 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, BackwardForwardStepButton, PlayButton, defaultTimeStep, AutoUpdateButton, NowButton, handleSetNowEvent, ControlButtons, TimeSpanButton, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, TimeStepButton, SpeedButton, AnimationLengthButton, AnimationLength, OptionsMenu, TimeSliderClock, OptionsMenuButton, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, onsetNewDateDebounced, defaultSecondsPerPx, moveSelectedTimePx, TimeSlider, getFilteredTime } from '@opengeoweb/time-slider';
-import { webmapReactTranslations, WEBMAP_REACT_NAMESPACE, webmapTranslations, WEBMAP_NAMESPACE, openLayersGetMapImageStore, LayerInfoButton, useEDRGetCollectionDetails, 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 { webmapReactTranslations, WEBMAP_REACT_NAMESPACE, webmapTranslations, WEBMAP_NAMESPACE, openLayersGetMapImageStore, LayerInfoButton, useEDRGetCollectionDetails, defaultEdrStyles, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, LegendDialog, LegendButton, MapContext, emptyGeoJSON, MapFeatureClass, setMapCenter, OpenLayersFeatureLayer, OpenLayersMapDraw, makeTimeList, getIsInsideAcceptanceTime, OpenLayersLayer, MapMeasure, 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, layerSelectors, layerActions, loadingIndicatorSelectors, layerUtils, mapSelectors, serviceSelectors, serviceActions, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, getUserAddedServices, uiActions, drawingToolSelectors, syncGroupsSelectors, syncConstants, getViewObjectForSyncGroup, getViewObjectForMapId, loadingIndicatorActions, genericSelectors, genericActions, defaultLayers, getSingularDrawtoolDrawLayerId, syncGroupsSelector, syncGroupsActions, routerUtils, mapUtils } from '@opengeoweb/store';
-import { webmapUtils, LayerType, queryWMSServiceInfo, queryWMSLayers, queryWMSLayersTree, invalidateWMSGetCapabilities, getWMSServiceId, getMapDimURL, generateLayerId, WMJSDimension, getWMLayerById, handleDateUtilsISOString, WMLayer } from '@opengeoweb/webmap';
-import _, { isArray, isEqual, throttle, range } from 'lodash';
-import { Box as Box$1, styled as styled$1 } from '@mui/system';
+import { webmapUtils, LayerType, queryWMSServiceInfo, queryWMSLayers, queryWMSLayersTree, invalidateWMSGetCapabilities, getWMSServiceId, generateLayerId, WMJSDimension, getMapDimURL, getWMLayerById, handleDateUtilsISOString, WMLayer } from '@opengeoweb/webmap';
+import _, { isArray, range, zip, isEqual, throttle } from 'lodash';
+import { Box as Box$1, Stack, styled as styled$1 } from '@mui/system';
 import { LayerSelectButtonConnect, LayerSelectConnect, DataExplorerButtonConnect } from '@opengeoweb/layer-select';
 import { unByKey } from 'ol/Observable';
-import axios from 'axios';
-import { ImageWMS } from 'ol/source';
-import DOMPurify from 'dompurify';
 import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { handleResponse } from '@opengeoweb/api';
+import * as turf from '@turf/turf';
+import proj4 from 'proj4';
 import GeoJSON from 'ol/format/GeoJSON';
 import { toLonLat } from 'ol/proj';
 import { getIntersection } from 'ol/extent';
+import axios from 'axios';
+import { ImageWMS } from 'ol/source';
+import DOMPurify from 'dompurify';
 import { snackbarTypes, snackbarActions, SnackbarWrapperConnect } from '@opengeoweb/snackbar';
 import { useNavigate } from 'react-router-dom';
 import * as Sentry from '@sentry/react';
@@ -69,6 +71,8 @@ var en = {
 	"layermanager-layer-leading-both": "Both",
 	"layermanager-layer-delete": "Delete",
 	"layermanager-layer-duplicate": "Duplicate layer",
+	"layermanager-layer-duplicate-to-other-maps": "Copy layer to other maps",
+	"layermanager-layer-remove-from-other-maps": "Remove layer from other maps",
 	"layermanager-options": "Options",
 	"layermanager-baselayers-tooltip": "Add base layers",
 	"layermanager-header-button-small": "small",
@@ -88,6 +92,9 @@ var en = {
 	"search-my-location": "Find my location",
 	"search-title-long": "Find location, area, postal code, GPS, ...",
 	"search-no-results": "No results",
+	"search-airports": "Airports",
+	"search-countries-regions-cities": "Countries/Regions/Cities",
+	"search-places": "Places",
 	"my-location": "My location",
 	"search-clear": "Clear",
 	"syncgroups-title": "Sync",
@@ -122,7 +129,9 @@ var en = {
 	"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"
+	"delete-dialog-confirm": "Delete",
+	"map-options-button": "Location or Measuring tool",
+	"map-measure-tool": "Measuring tool"
 };
 var fi = {
 	feature_info_title: "Napsauta karttaa nähdäksesi lisätietoja.",
@@ -156,6 +165,8 @@ var fi = {
 	"layermanager-layer-leading-both": "Molemmat",
 	"layermanager-layer-delete": "Poista",
 	"layermanager-layer-duplicate": "Monista karttataso",
+	"layermanager-layer-duplicate-to-other-maps": "Kopioi karttataso muihin karttoihin",
+	"layermanager-layer-remove-from-other-maps": "Poista karttataso muista kartoista",
 	"layermanager-options": "Valinnat",
 	"layermanager-baselayers-tooltip": "Lisää pohjakartta",
 	"layermanager-header-button-small": "Pieni",
@@ -174,6 +185,9 @@ var fi = {
 	"search-my-location": "Etsi sijaintini",
 	"search-title-long": "Find location, area, postal code, GPS, ...",
 	"search-no-results": "No results",
+	"search-airports": "Lentokentät",
+	"search-countries-regions-cities": "Maat/Alueet/Kaupungit",
+	"search-places": "Paikat",
 	"my-location": "My location",
 	"search-clear": "Clear",
 	"syncgroups-title": "Sync",
@@ -237,6 +251,8 @@ var no = {
 	"layermanager-layer-leading-both": "Begge",
 	"layermanager-layer-delete": "Slett",
 	"layermanager-layer-duplicate": "Duplikat lag",
+	"layermanager-layer-duplicate-to-other-maps": "Kopier lag til andre kart",
+	"layermanager-layer-remove-from-other-maps": "Fjern lag fra andre kart",
 	"layermanager-options": "Laginnstillinger",
 	"layermanager-baselayers-tooltip": "Legg til basislag",
 	"layermanager-header-button-small": "liten",
@@ -255,6 +271,9 @@ var no = {
 	"search-my-location": "Finn min lokasjon",
 	"search-title-long": "Find location, area, postal code, GPS, ...",
 	"search-no-results": "No results",
+	"search-airports": "Flyplasser",
+	"search-countries-regions-cities": "Land/Regioner/Byer",
+	"search-places": "Steder",
 	"my-location": "Min lokasjon",
 	"search-clear": "Clear",
 	"syncgroups-title": "Synkroniser",
@@ -318,6 +337,8 @@ var nl = {
 	"layermanager-layer-leading-both": "Beide",
 	"layermanager-layer-delete": "Verwijderen",
 	"layermanager-layer-duplicate": "Dupliceren",
+	"layermanager-layer-duplicate-to-other-maps": "Kopieer laag naar andere kaarten",
+	"layermanager-layer-remove-from-other-maps": "Verwijder laag van andere kaarten",
 	"layermanager-options": "Opties",
 	"layermanager-baselayers-tooltip": "Basislagen toevoegen",
 	"layermanager-header-button-small": "klein",
@@ -336,6 +357,9 @@ var nl = {
 	"search-my-location": "Vind mijn locatie",
 	"search-title-long": "Vind locatie, gebied, postcode, GPS, ...",
 	"search-no-results": "Geen resultaten",
+	"search-airports": "Luchthavens",
+	"search-countries-regions-cities": "Landen/Regio’s/Steden",
+	"search-places": "Plaatsen",
 	"my-location": "Mijn locatie",
 	"search-clear": "Wissen",
 	"syncgroups-title": "Synchroniseren",
@@ -369,7 +393,9 @@ var nl = {
 	"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"
+	"delete-dialog-confirm": "Verwijderen",
+	"map-options-button": "Locatie informatie en Meten",
+	"map-measure-tool": "Meten"
 };
 var coreTranslations = {
 	en: en,
@@ -1059,7 +1085,7 @@ var LayerSelectButton = function LayerSelectButton(_ref) {
   });
 };
 
-var _excluded$5 = ["settings", "addLayerComponent", "onToggleCollapsed", "collapsedColumns"];
+var _excluded$6 = ["settings", "addLayerComponent", "onToggleCollapsed", "collapsedColumns"];
 var RowItemCollapse$1 = function RowItemCollapse(_ref) {
   var className = _ref.className,
     title = _ref.title,
@@ -1123,7 +1149,7 @@ var DescriptionRow = function DescriptionRow(_ref2) {
     _ref2$onToggleCollaps = _ref2.onToggleCollapsed,
     onToggleCollapsed = _ref2$onToggleCollaps === void 0 ? function () {} : _ref2$onToggleCollaps,
     collapsedColumns = _ref2.collapsedColumns,
-    gridProps = _objectWithoutPropertiesLoose(_ref2, _excluded$5);
+    gridProps = _objectWithoutPropertiesLoose(_ref2, _excluded$6);
   var _useCoreTranslation2 = useCoreTranslation(),
     t = _useCoreTranslation2.t;
   return jsxs(Grid, Object.assign({
@@ -1816,6 +1842,8 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
     _ref$isFeatureLayer = _ref.isFeatureLayer,
     isFeatureLayer = _ref$isFeatureLayer === void 0 ? false : _ref$isFeatureLayer,
     onLayerDuplicate = _ref.onLayerDuplicate,
+    onLayerCopyToOtherMaps = _ref.onLayerCopyToOtherMaps,
+    onLayerRemoveFromOtherMaps = _ref.onLayerRemoveFromOtherMaps,
     tooltipTitle = _ref.tooltipTitle,
     icon = _ref.icon;
   var _useCoreTranslation = useCoreTranslation(),
@@ -1827,6 +1855,12 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
       layerId: layerId
     });
   };
+  var onClickCopyToOtherMaps = function onClickCopyToOtherMaps() {
+    onLayerCopyToOtherMaps && onLayerCopyToOtherMaps();
+  };
+  var onClickRemoveFromOtherMaps = function onClickRemoveFromOtherMaps() {
+    onLayerRemoveFromOtherMaps && onLayerRemoveFromOtherMaps();
+  };
   return jsx(ToggleMenu, {
     buttonTestId: "openMenuButton",
     buttonSx: {
@@ -1841,6 +1875,14 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
       text: t('layermanager-layer-duplicate'),
       action: onClickDuplicate,
       icon: jsx(Copy, {})
+    }, {
+      text: t('layermanager-layer-duplicate-to-other-maps'),
+      action: onClickCopyToOtherMaps,
+      icon: jsx(Copy, {})
+    }, {
+      text: t('layermanager-layer-remove-from-other-maps'),
+      action: onClickRemoveFromOtherMaps,
+      icon: jsx(Delete, {})
     }],
     tooltipTitle: nonEmptyTooltipTitle,
     buttonIcon: icon,
@@ -3181,6 +3223,10 @@ var RenderFeatureLayers = function RenderFeatureLayers(_ref) {
   });
 };
 
+var formatParameterTitle = function formatParameterTitle(baseTitle, parameterKey) {
+  var title = baseTitle + " (" + parameterKey;
+  return title.length > 100 ? title.substring(0, 100) + "...)" : title + ")";
+};
 var RenderLayersConnect = function RenderLayersConnect(_ref) {
   var layerId = _ref.layerId,
     mapId = _ref.mapId,
@@ -3263,9 +3309,11 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
     }
     var layers = Object.entries(data == null ? void 0 : data.parameter_names).map(function (parameter) {
       var _ref3, _parameter$1$label;
+      var parameterTitle = (_ref3 = (_parameter$1$label = parameter[1].label) != null ? _parameter$1$label : parameter[1].description) != null ? _ref3 : parameter[0];
+      var title = formatParameterTitle(parameterTitle, parameter[0]);
       return {
         name: parameter[0],
-        title: (_ref3 = (_parameter$1$label = parameter[1].label) != null ? _parameter$1$label : parameter[1].description) != null ? _ref3 : parameter[0],
+        title: title,
         styles: defaultEdrStyles,
         leaf: true,
         path: []
@@ -3357,9 +3405,52 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
     return layerSelectors.getLayerType(store, layerId);
   });
   var isFeatureLayer = layerType === LayerType.featureLayer;
-  var duplicateLayer = React.useCallback(function (_ref2) {
-    var newLayerId = _ref2.newLayerId,
-      mapId = _ref2.mapId;
+  // get all map ids
+  var allMapIds = useSelector(mapSelectors.getAllMapIds);
+  var allOtherMapIdsExceptCurrentOne = allMapIds.filter(function (id) {
+    return id !== mapId;
+  });
+  var allLayers = useSelector(layerSelectors.getAllLayers);
+  var copyLayerToOtherMaps = React.useCallback(function () {
+    // generate new layer ids
+    var newLayerIds = range(allOtherMapIdsExceptCurrentOne.length).map(function (_) {
+      return webmapUtils.generateLayerId();
+    });
+    // run all duplicateLayer calls in a loop
+    zip(allOtherMapIdsExceptCurrentOne, newLayerIds).forEach(function (_ref2) {
+      var newMapId = _ref2[0],
+        newLayerId = _ref2[1];
+      if (!newMapId || !layerId || !newLayerId) {
+        return;
+      }
+      dispatch(layerActions.duplicateMapLayer({
+        mapId: newMapId,
+        oldLayerId: layerId,
+        newLayerId: newLayerId,
+        origin: layerTypes.LayerActionOrigin.layerManager
+      }));
+    });
+  }, [allOtherMapIdsExceptCurrentOne, dispatch, layerId]);
+  var removeLayerFromAllMaps = React.useCallback(function () {
+    var _allLayers$find;
+    if (!layerId) {
+      return;
+    }
+    var layerName = (_allLayers$find = allLayers.find(function (layer) {
+      return layer.id === layerId;
+    })) == null ? void 0 : _allLayers$find.name;
+    layerName && allLayers.filter(function (layer) {
+      return layer.name === layerName && layer.mapId !== mapId;
+    }).forEach(function (layer) {
+      layer.mapId && layer.id && dispatch(layerActions.layerDelete({
+        mapId: layer.mapId,
+        layerId: layer.id
+      }));
+    });
+  }, [dispatch, allLayers, mapId, layerId]);
+  var duplicateLayer = React.useCallback(function (_ref3) {
+    var newLayerId = _ref3.newLayerId,
+      mapId = _ref3.mapId;
     return dispatch(layerActions.duplicateMapLayer({
       mapId: mapId,
       oldLayerId: layerId,
@@ -3377,6 +3468,8 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
         mapId: mapId
       });
     },
+    onLayerCopyToOtherMaps: copyLayerToOtherMaps,
+    onLayerRemoveFromOtherMaps: removeLayerFromAllMaps,
     tooltipTitle: tooltipTitle,
     icon: icon
   });
@@ -3635,12 +3728,12 @@ var MissingDataConnect = function MissingDataConnect(_ref) {
   });
 };
 
-var _excluded$4 = ["layerId", "mapId", "dimensionsToShow"];
+var _excluded$5 = ["layerId", "mapId", "dimensionsToShow"];
 var CustomDimensionSelectConnect = function CustomDimensionSelectConnect(_ref) {
   var layerId = _ref.layerId,
     mapId = _ref.mapId,
     dimensionsToShow = _ref.dimensionsToShow,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var _useLayerDimensions = useLayerDimensions(layerId, mapId),
     layerDimensions = _useLayerDimensions.layerDimensions,
     isLayerEnabled = _useLayerDimensions.isLayerEnabled,
@@ -3887,12 +3980,12 @@ var DragHandle = function DragHandle(_ref) {
   });
 };
 
-var _excluded$3 = ["mapId", "settings", "collapsedColumns"];
+var _excluded$4 = ["mapId", "settings", "collapsedColumns"];
 var LayerContainerRow = /*#__PURE__*/React.memo(function (_ref) {
   var mapId = _ref.mapId,
     settings = _ref.settings,
     collapsedColumns = _ref.collapsedColumns,
-    gridProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    gridProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var dispatch = useDispatch();
   var _React$useTransition = React.useTransition(),
     isPending = _React$useTransition[0],
@@ -5002,7 +5095,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
   });
 };
 
-var _excluded$2 = ["mapId", "preloadedAvailableBaseLayers", "preloadedServices", "tooltip", "settings"];
+var _excluded$3 = ["mapId", "preloadedAvailableBaseLayers", "preloadedServices", "tooltip", "settings"];
 var _onRenderTree = function onRenderTree(_ref) {
   var service = _ref.service,
     mapId = _ref.mapId,
@@ -5023,7 +5116,7 @@ var BaseLayerRow = function BaseLayerRow(_ref2) {
     _ref2$tooltip = _ref2.tooltip,
     tooltip = _ref2$tooltip === void 0 ? '' : _ref2$tooltip,
     settings = _ref2.settings,
-    gridProps = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+    gridProps = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
   var theme = useTheme();
   return jsxs(Grid, Object.assign({
     container: true,
@@ -5969,6 +6062,219 @@ var MultiMapMultiDimensionSelectConnect = function MultiMapMultiDimensionSelectC
   });
 };
 
+var _excluded$2 = ["showMapId"];
+var LegendConnectComponent = function LegendConnectComponent(_ref) {
+  var _ref$showMapId = _ref.showMapId,
+    showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source,
+    _ref$mapId = _ref.mapId,
+    initialMapId = _ref$mapId === void 0 ? null : _ref$mapId,
+    _ref$multiLegend = _ref.multiLegend,
+    multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
+  var legendType = multiLegend ? "legend-" + initialMapId : "legend";
+  var mapIdStore = useSelector(function (store) {
+    return uiSelectors.getDialogMapId(store, legendType);
+  });
+  var _React$useState = React.useState(initialMapId),
+    mapId = _React$useState[0],
+    setMapId = _React$useState[1];
+  React.useEffect(function () {
+    setMapId(mapIdStore);
+  }, [mapIdStore]);
+  var mapLayers = useSelector(function (store) {
+    return mapSelectors.getMapLayers(store, mapId);
+  });
+  var _useSetupDialog = useSetupDialog(legendType, source),
+    dialogOrder = _useSetupDialog.dialogOrder,
+    isDialogOpen = _useSetupDialog.isDialogOpen,
+    uiSource = _useSetupDialog.uiSource,
+    setDialogOrder = _useSetupDialog.setDialogOrder,
+    onCloseDialog = _useSetupDialog.onCloseDialog;
+  return jsx(LegendDialog, {
+    layers: mapLayers,
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    mapId: mapId,
+    showMapId: showMapId,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: uiSource
+  });
+};
+/**
+ * Legend component connected to the store displaying a legend for every layer shown on the active map Id
+ * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
+ * a dialog should have the <LegendMapButtonConnect/> which is used to focus the correct map and open the dialog
+ *
+ * Expects the following props:
+ * @param {boolean} showMapId (optional) showMapId: boolean - show the id of the map in the dialog title of which the legend is shown in te dialog
+ * @param {uiTypes.Source} source (optional) source: uiTypes.Source - default is 'app', 'module' makes sure it will be shown on top of the module
+
+ * ``` <LegendConnect legendDialogId={legendDialogId} />```
+ */
+var LegendConnect = function LegendConnect(_ref2) {
+  var _ref2$showMapId = _ref2.showMapId,
+    showMapId = _ref2$showMapId === void 0 ? false : _ref2$showMapId,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+  return jsx(LegendConnectComponent, Object.assign({
+    showMapId: showMapId
+  }, props));
+};
+
+var LegendMapButtonConnect = function LegendMapButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source,
+    _ref$multiLegend = _ref.multiLegend,
+    multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
+  var dispatch = useDispatch();
+  var legendType = multiLegend ? "legend-" + mapId : "legend";
+  var currentActiveMapId = useSelector(function (store) {
+    return uiSelectors.getDialogMapId(store, legendType);
+  });
+  var isOpenInStore = useSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, legendType);
+  });
+  var openLegendDialog = React.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: legendType,
+      mapId: mapId,
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: source,
+      origin: mapEnums.MapActionOrigin.map
+    }));
+  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source, legendType]);
+  var isOpen = currentActiveMapId === mapId && isOpenInStore;
+  return jsx(LegendButton, {
+    isOpen: isOpen,
+    openLegendDialog: openLegendDialog
+  });
+};
+
+var SearchControlButtonConnect = function SearchControlButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source;
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  var dispatch = useDispatch();
+  var dialogType = uiTypes.DialogTypes.Search + "-" + mapId;
+  var currentActiveMapId = useSelector(function (store) {
+    return uiSelectors.getDialogMapId(store, dialogType);
+  });
+  var isOpenInStore = useSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, dialogType);
+  });
+  var openSearchDialog = React__default.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: dialogType,
+      mapId: mapId,
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: source
+    }));
+  }, [currentActiveMapId, dialogType, dispatch, isOpenInStore, mapId, source]);
+  React__default.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      var target = event.target;
+      if (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' && event.code === 'KeyF' || (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') && event.code === 'Escape') {
+        event.preventDefault();
+        openSearchDialog();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [openSearchDialog]);
+  return jsx(MapControlButton, {
+    onClick: openSearchDialog,
+    title: t('search-title'),
+    "aria-label": t('search-title-aria'),
+    isActive: isOpenInStore,
+    children: jsx(Search, {})
+  });
+};
+
+var MY_LOCATION = 'My location';
+var locationOptions = {
+  enableHighAccuracy: false,
+  timeout: 10000,
+  maximumAge: 0
+};
+var MyMapLocation = function MyMapLocation(_ref) {
+  var _ref$mapId = _ref.mapId,
+    mapId = _ref$mapId === void 0 ? '' : _ref$mapId,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$onUpdateMyLocati = _ref.onUpdateMyLocation,
+    onUpdateMyLocation = _ref$onUpdateMyLocati === void 0 ? function () {} : _ref$onUpdateMyLocati;
+  var theme = useTheme();
+  var _useState = useState(false),
+    isLoading = _useState[0],
+    setIsLoading = _useState[1];
+  var _useState2 = useState(false),
+    hasFailed = _useState2[0],
+    setHasFailed = _useState2[1];
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  var handleLocationClick = function handleLocationClick() {
+    if (mapId && isSelected) {
+      onUpdateMyLocation(undefined);
+    } else if (navigator.geolocation && mapId && !isSelected) {
+      setIsLoading(true);
+      setHasFailed(false);
+      navigator.geolocation.getCurrentPosition(function (success) {
+        setIsLoading(false);
+        var _success$coords = success.coords,
+          latitude = _success$coords.latitude,
+          longitude = _success$coords.longitude;
+        var location = {
+          lat: latitude,
+          lon: longitude,
+          name: MY_LOCATION,
+          source: 'MyMapLocation',
+          id: MY_LOCATION
+        };
+        onUpdateMyLocation(location);
+      }, function () {
+        setIsLoading(false);
+        setHasFailed(true);
+        onUpdateMyLocation(undefined);
+      }, locationOptions);
+    }
+  };
+  var chooseIcon = function chooseIcon() {
+    return hasFailed ? jsx(Exclamation, {
+      style: {
+        color: theme.palette.geowebColors.functional.error
+      },
+      "aria-label": "location error"
+    }) : jsx(MyLocation, {
+      "aria-label": "location default"
+    });
+  };
+  return jsx(Box, {
+    sx: {
+      height: 40,
+      padding: 1
+    },
+    children: isLoading ? jsx(CircularProgress, {
+      size: 24,
+      "aria-label": "Location loading",
+      color: "secondary"
+    }) : jsx(CustomIconButton, {
+      tooltipTitle: t('search-my-location'),
+      "aria-label": t('search-my-location'),
+      onClick: handleLocationClick,
+      isSelected: isSelected,
+      variant: "tool",
+      size: "small",
+      children: chooseIcon()
+    })
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -5982,67 +6288,359 @@ var MultiMapMultiDimensionSelectConnect = function MultiMapMultiDimensionSelectC
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-/**
- * Get the title for this WMS layer based on its layerId. If not defined, layerId is used instead.
- * @param layerId
- * @returns Title for the layer
- */
-var getTitle = function getTitle(layerId) {
-  var wmjsLayer = webmapUtils.getWMLayerById(layerId);
-  return wmjsLayer ? wmjsLayer.title || wmjsLayer.name : layerId;
+var config = sessionStorageProvider.getConfig();
+var locationBaseUrl = config.GW_LOCATION_BASE_URL;
+var getLocationBaseUrl = function getLocationBaseUrl() {
+  if (locationBaseUrl === undefined) {
+    var _config = sessionStorageProvider.getConfig();
+    locationBaseUrl = _config.GW_LOCATION_BASE_URL || '';
+  }
+  return locationBaseUrl;
 };
-var getFeatureInfoUrl = function getFeatureInfoUrl(layer, mapPinLocation) {
-  /*
-    We need a wmjsLayer to build the getfeatureinfo url (getWMSGetFeatureInfoRequestURL function).
-    But it seems that its dimension are lazely updated (by ReactMapView).
-    Therefore make a clone of this layer and set its dimensions based on the layer object.
-    Otherwise we risk making a getfeatureinfo call with outdated dimension values.
-  */
-  var wmjsLayer = webmapUtils.getWMLayerById(layer.id).cloneLayer();
-  if (mapPinLocation) {
-    // OpenLayers WMS version
-    var source = new ImageWMS({
-      url: wmjsLayer.getmapURL,
-      params: {
-        LAYERS: wmjsLayer.getLayerName()
+var getLocationList = function getLocationList(search) {
+  return fetch(getLocationBaseUrl() + "/locations?search=" + search).then(handleResponse);
+};
+var getLocationDetail = function getLocationDetail(id, source) {
+  return fetch(getLocationBaseUrl() + "/locationdetail?id=" + id + "&source=" + source).then(handleResponse);
+};
+
+var useLocationList = function useLocationList(search) {
+  return useQuery({
+    queryKey: ['location-list', search],
+    queryFn: function () {
+      var _queryFn = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(search.length > 0)) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return", getLocationList(search));
+            case 2:
+              return _context.abrupt("return", []);
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function queryFn() {
+        return _queryFn.apply(this, arguments);
       }
+      return queryFn;
+    }()
+  });
+};
+var useLocationDetail = function useLocationDetail(location) {
+  return useQuery({
+    queryKey: ['location-detail', {
+      id: location == null ? void 0 : location.id,
+      source: location == null ? void 0 : location.source
+    }],
+    queryFn: function queryFn() {
+      return getLocationDetail(location.id, location.source);
+    },
+    enabled: !!(location != null && location.id) && !!(location != null && location.source)
+  });
+};
+
+var _excluded$1 = ["key"];
+var LocationSearch = function LocationSearch(_ref) {
+  var isOpen = _ref.isOpen,
+    _ref$mapId = _ref.mapId,
+    mapId = _ref$mapId === void 0 ? '' : _ref$mapId,
+    _ref$onSelectLocation = _ref.onSelectLocation,
+    onSelectLocation = _ref$onSelectLocation === void 0 ? function () {} : _ref$onSelectLocation,
+    _ref$onUpdateMyLocati = _ref.onUpdateMyLocation,
+    onUpdateMyLocation = _ref$onUpdateMyLocati === void 0 ? function () {} : _ref$onUpdateMyLocati,
+    _ref$isMyLocationSele = _ref.isMyLocationSelected,
+    isMyLocationSelected = _ref$isMyLocationSele === void 0 ? false : _ref$isMyLocationSele;
+  var theme = useTheme();
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  var _useState = useState(''),
+    inputValue = _useState[0],
+    setInputValue = _useState[1];
+  var _useState2 = useState(null),
+    selectedValue = _useState2[0],
+    setSelectedValue = _useState2[1];
+  var _useState3 = useState(true),
+    dropdownOpen = _useState3[0],
+    setDropdownOpen = _useState3[1];
+  var debouncedInputValue = useDebounce(inputValue, 300);
+  var _useLocationList = useLocationList(debouncedInputValue),
+    locationListData = _useLocationList.data;
+  // For when we are still typing something
+  var _useState4 = useState(null),
+    pendingValue = _useState4[0],
+    setPendingValue = _useState4[1];
+  // Extract predefined locations from BE (and group them)
+  var backendPredefined = useMemo(function () {
+    return (locationListData || []).filter(function (item) {
+      return item.source === 'predefined';
     });
-    layer.dimensions && layer.dimensions.forEach(function (dim) {
-      var wmDim = wmjsLayer.getDimension(dim.name);
-      if (wmDim && wmDim.getValue() !== dim.currentValue) {
-        wmDim.setValue(dim.currentValue);
-      }
+  }, [locationListData]);
+  var groupedPredefinedAreas = useMemo(function () {
+    return [{
+      header: t('search-airports'),
+      icon: Airplane,
+      items: backendPredefined.filter(function (i) {
+        return i.group === 'airport';
+      })
+    }, {
+      header: t('search-countries-regions-cities'),
+      icon: Region,
+      items: backendPredefined.filter(function (i) {
+        return i.group === 'country' || i.group === 'city' || i.group === 'region';
+      })
+    }, {
+      header: t('search-places'),
+      icon: Pinned,
+      items: backendPredefined.filter(function (i) {
+        return i.group === 'special';
+      })
+    }];
+  }, [backendPredefined, t]);
+  var predefinedOptions = useMemo(function () {
+    return groupedPredefinedAreas.flatMap(function (group) {
+      return group.items.map(function (item) {
+        return Object.assign({}, item, {
+          groupHeader: group.header,
+          groupIcon: group.icon
+        });
+      });
     });
-    return source.getFeatureInfoUrl([mapPinLocation.projectionX, mapPinLocation.projectionY], mapPinLocation.resolution, mapPinLocation.srs, {
-      INFO_FORMAT: 'text/html'
-    }) + "&" + getMapDimURL(wmjsLayer).toString();
-  }
-  return undefined;
-};
-/**
- * Make a list of GFI Layers to display.
- * @param layers
- * @param mapId
- * @returns
- */
-var getLayersToUpdate = function getLayersToUpdate(mapPinLocation, layers) {
-  if (!layers || layers.length === 0 || !mapPinLocation) {
-    return [];
-  }
-  return layers.filter(function (layer) {
-    return layer && layer.enabled && !!webmapUtils.getWMLayerById(layer.id);
-  }).map(function (layer) {
-    var url = getFeatureInfoUrl(layer, mapPinLocation);
-    return {
-      layerId: layer.id,
-      url: url,
-      title: getTitle(layer.id)
+  }, [groupedPredefinedAreas]);
+  // Filter predefined options by search string
+  var filteredPredefinedOptions = useMemo(function () {
+    return debouncedInputValue.trim() === '' ? predefinedOptions : predefinedOptions.filter(function (option) {
+      return option.name.toLowerCase().includes(debouncedInputValue.trim().toLowerCase());
+    });
+  }, [debouncedInputValue, predefinedOptions]);
+  // Filter out predefined options from locationListData to avoid duplicates
+  var locationListResults = useMemo(function () {
+    return (locationListData || []).filter(function (result) {
+      return !filteredPredefinedOptions.some(function (predef) {
+        return predef.id === result.id && predef.source === result.source;
+      });
+    });
+  }, [locationListData, filteredPredefinedOptions]);
+  var autocompleteOptions = useMemo(function () {
+    return debouncedInputValue.trim() === '' ? predefinedOptions : [].concat(filteredPredefinedOptions, locationListResults);
+  }, [debouncedInputValue, predefinedOptions, filteredPredefinedOptions, locationListResults]);
+  var _useLocationDetail = useLocationDetail(selectedValue),
+    locationDetail = _useLocationDetail.data,
+    isFetchingDetail = _useLocationDetail.isFetching;
+  useEffect(function () {
+    // Only open dropdown if no location is selected
+    if (isOpen && !selectedValue) {
+      setDropdownOpen(true);
+    }
+  }, [isOpen, selectedValue]);
+  useEffect(function () {
+    // Update pin only on confirmed selection
+    if (!selectedValue || isFetchingDetail || !isOpen) {
+      return;
+    }
+    onSelectLocation(locationDetail);
+  }, [selectedValue, locationDetail, isFetchingDetail, isOpen, onSelectLocation]);
+  React__default.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (isOpen && event.key === 'Escape') {
+        if (dropdownOpen) {
+          setDropdownOpen(false);
+        }
+        event.stopPropagation();
+      }
     };
-  });
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [dropdownOpen, isOpen]);
+  return isOpen && mapId ? jsxs(Box, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      position: 'absolute',
+      pointerEvents: 'all',
+      zIndex: 99,
+      left: 50,
+      top: 8,
+      backgroundColor: theme.palette.geowebColors.textInputField["default"].fill,
+      height: 40,
+      boxShadow: theme.shadows[6],
+      width: 'calc(100% - 50px)',
+      maxWidth: 380
+    },
+    children: [jsx(MyMapLocation, {
+      mapId: mapId,
+      onUpdateMyLocation: onUpdateMyLocation,
+      isSelected: isMyLocationSelected
+    }), jsx(Autocomplete, Object.assign({
+      autoHighlight: true,
+      disablePortal: true,
+      selectOnFocus: true,
+      open: dropdownOpen,
+      onOpen: function onOpen() {
+        return setDropdownOpen(true);
+      },
+      onClose: function onClose() {
+        return setDropdownOpen(false);
+      },
+      sx: {
+        width: '100%',
+        '&.MuiAutocomplete-root .MuiFilledInput-root': {
+          height: 40,
+          padding: '0px!important',
+          '&:before, &:hover:before': {
+            borderColor: 'transparent'
+          }
+        },
+        '&.MuiAutocomplete-root .MuiInputLabel-root': {
+          lineHeight: '16px',
+          maxWidth: 'calc(100% - 40px)',
+          ':not(.MuiInputLabel-shrink)': {
+            transform: 'translate(12px, 12px) scale(1)'
+          }
+        },
+        '&.MuiAutocomplete-root .MuiFilledInput-input': {
+          lineHeight: '20px',
+          paddingLeft: '12px',
+          paddingTop: '20px'
+        }
+      },
+      getOptionLabel: function getOptionLabel(option) {
+        return option.name;
+      },
+      getOptionKey: function getOptionKey(option) {
+        return option.id + option.name;
+      },
+      filterOptions: function filterOptions(x) {
+        return x;
+      },
+      options: autocompleteOptions
+    }, debouncedInputValue.trim() === '' ? {
+      groupBy: function groupBy(option) {
+        return 'groupHeader' in option && typeof option.groupHeader === 'string' ? option.groupHeader : '';
+      },
+      renderGroup: function renderGroup(params) {
+        return jsxs(React__default.Fragment, {
+          children: [jsx(ListSubheader, {
+            disableSticky: true,
+            sx: {
+              color: theme.palette.primary.main,
+              fontWeight: 400,
+              fontSize: '16px',
+              py: 1,
+              my: 0,
+              minHeight: '26px',
+              lineHeight: 1
+            },
+            children: params.group
+          }), Array.isArray(params.children) ? params.children : [params.children]]
+        }, params.key);
+      }
+    } : {}, {
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      renderOption: function renderOption(props, option) {
+        var key = props.key,
+          rest = _objectWithoutPropertiesLoose(props, _excluded$1);
+        var icon = null;
+        if (typeof option.groupIcon === 'function') {
+          var Icon = option.groupIcon;
+          var iconElement = jsx(Icon, {
+            sx: {
+              mr: 1
+            },
+            fontSize: "small",
+            "data-testid": option.name + "-svg"
+          });
+          icon = /*#__PURE__*/React__default.cloneElement(iconElement, {}, React__default.Children.map(iconElement.props.children, function (child) {
+            return /*#__PURE__*/React__default.isValidElement(child) ? /*#__PURE__*/React__default.cloneElement(child, {
+              'data-testid': option.name + "-path"
+            }) : child;
+          }));
+        }
+        return jsxs("li", Object.assign({}, rest, {
+          children: [icon, option.name]
+        }), key);
+      },
+      /* eslint-enable @typescript-eslint/no-explicit-any */
+      noOptionsText: t('search-no-results'),
+      popupIcon: null,
+      clearIcon: null,
+      onChange: function onChange(_event, newValue, reason) {
+        if (newValue && typeof newValue !== 'string') {
+          if (reason === 'selectOption') {
+            // Confirm if user clicked
+            setSelectedValue(newValue);
+            setPendingValue(null);
+            setInputValue(newValue.name);
+            setDropdownOpen(false);
+          } else {
+            // Just a pending result when typing
+            setPendingValue(newValue);
+            setInputValue(newValue.name);
+          }
+        }
+      },
+      value: selectedValue,
+      inputValue: inputValue,
+      isOptionEqualToValue: function isOptionEqualToValue(option, value) {
+        return option.id === value.id;
+      },
+      renderInput: function renderInput(params) {
+        return jsx(TextField, Object.assign({}, params, {
+          autoFocus: true,
+          size: "medium",
+          label: t('search-title-long'),
+          fullWidth: true,
+          variant: "filled",
+          onChange: function onChange(event) {
+            setInputValue(event.target.value);
+            if (selectedValue) {
+              setSelectedValue(null);
+            }
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === 'Enter' && pendingValue) {
+              setSelectedValue(pendingValue); // confirm selection
+              setPendingValue(null); // clear pending
+              setDropdownOpen(false);
+              event.preventDefault();
+            }
+            if (params.inputProps && typeof params.inputProps.onKeyDown === 'function') {
+              params.inputProps.onKeyDown(event);
+            }
+          },
+          slotProps: {
+            input: Object.assign({}, params.InputProps, {
+              endAdornment: jsx(CustomIconButton, {
+                tooltipTitle: t('search-clear'),
+                onClick: function onClick() {
+                  setInputValue('');
+                  setSelectedValue(null);
+                  setPendingValue(null);
+                  onSelectLocation(undefined);
+                },
+                sx: {
+                  marginRight: 1
+                },
+                children: jsx(Close, {})
+              })
+            })
+          }
+        }));
+      }
+    }))]
+  }) : null;
 };
 
 /* *
@@ -6058,483 +6656,322 @@ var getLayersToUpdate = function getLayersToUpdate(mapPinLocation, layers) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var sanitizeHTML = function sanitizeHTML(htmlToBeSanitized) {
-  return {
-    __html: DOMPurify.sanitize(htmlToBeSanitized, {
-      ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'table', 'td', 'tr', 'br', 'hr', 'th'],
-      ALLOWED_ATTR: ['href']
-    })
-  };
+var geometryStyling = {
+  fill: '#FF7800',
+  'fill-opacity': 0.25,
+  stroke: '#FF7800',
+  'stroke-opacity': 1,
+  'stroke-width': 4
 };
-
-var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
-  var layers = _ref.layers,
-    isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    _ref$onMouseDown = _ref.onMouseDown,
-    onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
-    mapId = _ref.mapId,
-    _ref$showMapId = _ref.showMapId,
-    showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
-    _ref$order = _ref.order,
-    order = _ref$order === void 0 ? 0 : _ref$order,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source,
-    mapPinLocation = _ref.mapPinLocation;
-  var _useCoreTranslation = useCoreTranslation(),
-    t = _useCoreTranslation.t;
-  /* Ref, state and update function for results per layer map */
-  var gfiResultMap = React__default.useRef(new Map()).current;
-  var _React$useState = React__default.useState(),
-    triggerRerender = _React$useState[1];
-  var updateLayerResult = function updateLayerResult(_ref2) {
-    var layerId = _ref2.layerId,
-      data = _ref2.data,
-      isLoading = _ref2.isLoading;
-    gfiResultMap.set(layerId, {
-      data: data,
-      isLoading: isLoading
-    });
-    triggerRerender("" + layerId + isLoading);
-  };
-  /* Build a layerlist array with a set of arguments per layer to do the query for */
-  var layerToUpdateList = isOpen && mapPinLocation ? getLayersToUpdate(mapPinLocation, layers) : [];
-  /*
-    Build a string based on the GFI urls. If this changes for whatever reason we need to update.
-    These strings can change very often, therefore they need to be debounced and only use the most recent result  must be used.
-  */
-  var debouncedlayerListString = useDebounce(layerToUpdateList.map(function (layer) {
-    return layer.url;
-  }).join(','), 100);
-  /* Do a GFI call to the server and use the updateLayerResult to provide the results. */
-  var fetchLayerInfo = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(url, layerId) {
-      var _yield$axios$get, data, errorMessage;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            updateLayerResult({
-              layerId: layerId,
-              data: '',
-              isLoading: true
-            });
-            _context.next = 4;
-            return axios.get(url);
-          case 4:
-            _yield$axios$get = _context.sent;
-            data = _yield$axios$get.data;
-            updateLayerResult({
-              layerId: layerId,
-              data: data,
-              isLoading: false
-            });
-            _context.next = 13;
-            break;
-          case 9:
-            _context.prev = 9;
-            _context.t0 = _context["catch"](0);
-            errorMessage = _context.t0 instanceof Error ? _context.t0.message : 'fetchLayerInfo failed';
-            updateLayerResult({
-              layerId: layerId,
-              data: errorMessage,
-              isLoading: false
-            });
-          case 13:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 9]]);
-    }));
-    return function fetchLayerInfo(_x, _x2) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-  /* For each changed getfeature url string, load new data using WMS GetFeatureInfo */
-  React__default.useEffect(function () {
-    if (mapPinLocation && isOpen) {
-      layerToUpdateList.forEach(function (_ref4) {
-        var url = _ref4.url,
-          layerId = _ref4.layerId;
-        void fetchLayerInfo(url, layerId);
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedlayerListString]);
-  var hasLayers = layers && layers.length > 0;
-  var stopWheelEventPropagationRef = useWheelStopPropagation();
-  return jsx(ToolContainerDraggable, {
-    startPosition: {
-      right: 10,
-      top: 80
-    },
-    minWidth: 100,
-    onClose: onClose,
-    title: showMapId ? t('feature_info_marker_info') + " " + mapId : t('feature_info_marker_info'),
-    initialMaxHeight: 440,
-    isOpen: isOpen,
-    "data-testid": "moveable-getfeatureinfo",
-    bounds: "parent",
-    onMouseDown: onMouseDown,
-    order: order,
-    source: source,
-    children: jsxs(Box, {
-      sx: {
-        padding: 0
-      },
-      children: [isOpen && hasLayers && mapPinLocation && jsx(Box, {
-        "data-testid": "GetFeatureInfoList",
-        ref: stopWheelEventPropagationRef,
-        children: layerToUpdateList.map(function (layer) {
-          var layerId = layer.layerId,
-            title = layer.title,
-            url = layer.url;
-          var result = gfiResultMap.get(layerId);
-          if (!result) {
-            return null;
-          }
-          return jsxs(Grid, {
-            sx: {
-              margin: '4px 6px 4px 6px',
-              padding: '6px',
-              backgroundColor: 'geowebColors.cards.cardContainer',
-              border: 'solid 1px',
-              borderColor: 'geowebColors.cards.cardContainerBorder'
-            },
-            children: [jsxs(Typography, {
-              variant: "subtitle1",
-              children: [title, "\xA0", jsx(CustomIconButton, {
-                sx: {
-                  "float": 'right'
-                },
-                "aria-label": "Open layer featureinfo in another page",
-                onClick: function onClick() {
-                  window.open(url);
-                },
-                children: jsx(ExitDomain, {})
-              })]
-            }), !result.isLoading ? jsx("div", {
-              style: {
-                fontSize: '11px',
-                padding: '6px',
-                margin: '0',
-                fontFamily: 'Roboto,Helvetica,Arial,sans-serif',
-                fontWeight: '400',
-                lineHeight: '1.75',
-                letterSpacing: '0.25px'
-              },
-              "data-testid": "layer-result-ready-" + layerId,
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML: sanitizeHTML(result.data)
-            }) : jsx("div", {
-              "data-testid": "layer-result-loading-" + layerId,
-              children: jsx(CircularProgress, {
-                "data-testid": "spinner",
-                color: "inherit"
-              })
-            })]
-          }, layerId);
-        })
-      }), hasLayers && !mapPinLocation && jsx(Typography, {
-        "data-testid": "click-on-map-for-info",
-        variant: "subtitle1",
-        sx: {
-          padding: '10px'
-        },
-        children: t('feature_info_title')
-      }), !hasLayers && jsx(Typography, {
-        "data-testid": "NoLayers",
-        variant: "subtitle1",
-        sx: {
-          padding: '10px'
-        },
-        children: t('feature_info_no_layers')
-      })]
-    })
-  });
+var bufferFromZoomLevel = function bufferFromZoomLevel(zoom, lat, viewportWidthPx) {
+  var earthCircumference = 40075016.686;
+  var worldPx = 256 * Math.pow(2, zoom);
+  var metersPerPx = earthCircumference / worldPx;
+  var viewportWidthMeters = metersPerPx * viewportWidthPx;
+  var metersPerDegree = 111320 * Math.cos(lat * Math.PI / 180);
+  // Buffer in degrees (half the viewport width)
+  var buffer = viewportWidthMeters / metersPerDegree / 2;
+  return buffer;
+};
+var bboxFromPolygon = function bboxFromPolygon(geom, buffer) {
+  // A bbox is calculated with a buffer (expressed in %)
+  var _turf$bbox = turf.bbox(geom),
+    minX = _turf$bbox[0],
+    minY = _turf$bbox[1],
+    maxX = _turf$bbox[2],
+    maxY = _turf$bbox[3];
+  var width = maxX - minX;
+  var height = maxY - minY;
+  return [minX - width * buffer, minY - height * buffer, maxX + width * buffer, maxY + height * buffer];
+};
+var bboxFromPoint = function bboxFromPoint(geom, buffer) {
+  if (geom.type !== 'Point' || !Array.isArray(geom.coordinates)) {
+    throw new Error('bboxFromPoint: geometry must be of type Point');
+  }
+  var _geom$coordinates = geom.coordinates,
+    lon = _geom$coordinates[0],
+    lat = _geom$coordinates[1];
+  var width = 0.01;
+  var height = 0.01;
+  return [lon - width * buffer, lat - height * buffer, lon + width * buffer, lat + height * buffer];
 };
-
-var GetFeatureInfoConnect = function GetFeatureInfoConnect(_ref) {
-  var _ref$showMapId = _ref.showMapId,
-    showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
-    mapId = _ref.mapId;
-  var dispatch = useDispatch();
-  var getFeatureInfoType = "getfeatureinfo-" + mapId;
-  var mapPinLocation = useSelector(function (store) {
-    return mapSelectors.getPinLocation(store, mapId);
-  });
-  var toggleMapPinIsVisible = React.useCallback(function (displayMapPin) {
-    dispatch(mapActions.toggleMapPinIsVisible({
-      mapId: mapId,
-      displayMapPin: displayMapPin
-    }));
-  }, [dispatch, mapId]);
-  var enableMapPin = function enableMapPin() {
-    dispatch(mapActions.setDisableMapPin({
-      mapId: mapId,
-      disableMapPin: false
-    }));
+var makeGeoJSONFeatureFromLocation = function makeGeoJSONFeatureFromLocation(location, mapFeatureClass, t) {
+  var _location$geometry;
+  var collection = {
+    type: 'FeatureCollection',
+    features: []
   };
-  var mapLayers = useSelector(function (store) {
-    return mapSelectors.getMapLayers(store, mapId);
+  var name = mapFeatureClass === MapFeatureClass.MyLocation ? t('my-location') : location.name;
+  var geometry = Object.assign({}, location.geometry, {
+    properties: Object.assign({}, geometryStyling, {
+      name: name,
+      mapFeatureClass: mapFeatureClass,
+      showNameOnHover: true
+    })
   });
-  var _useSetupDialog = useSetupDialog(getFeatureInfoType),
-    dialogOrder = _useSetupDialog.dialogOrder,
-    isDialogOpen = _useSetupDialog.isDialogOpen,
-    uiSource = _useSetupDialog.uiSource,
-    setDialogOrder = _useSetupDialog.setDialogOrder,
-    onCloseDialog = _useSetupDialog.onCloseDialog;
-  React.useEffect(function () {
-    toggleMapPinIsVisible(isDialogOpen);
-    if (isDialogOpen) {
-      enableMapPin();
+  var marker = {
+    type: 'Feature',
+    properties: {
+      name: name,
+      mapFeatureClass: mapFeatureClass,
+      showNameOnHover: true
+    },
+    geometry: {
+      type: 'Point',
+      coordinates: [location.lon, location.lat]
     }
-    /* Do not respond on changes of isMapPinVisible, to allow other components to open/close the mappin. */
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isDialogOpen, toggleMapPinIsVisible]);
-  return jsx(GetFeatureInfoDialog, {
-    layers: mapLayers,
-    isOpen: isDialogOpen,
-    onClose: onCloseDialog,
-    mapId: mapId,
-    showMapId: showMapId,
-    onMouseDown: setDialogOrder,
-    order: dialogOrder,
-    source: uiSource,
-    mapPinLocation: mapPinLocation
-  });
-};
-
-var GetFeatureInfoButtonConnect = function GetFeatureInfoButtonConnect(_ref) {
-  var mapId = _ref.mapId,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source;
-  var _useCoreTranslation = useCoreTranslation(),
-    t = _useCoreTranslation.t;
-  var dispatch = useDispatch();
-  var gfiType = "getfeatureinfo-" + mapId;
-  var isOpenInStore = useSelector(function (store) {
-    return uiSelectors.getisDialogOpen(store, gfiType);
-  });
-  var openGfiDialog = React.useCallback(function () {
-    dispatch(uiActions.setActiveMapIdForDialog({
-      type: gfiType,
-      mapId: mapId,
-      setOpen: !isOpenInStore,
-      source: source,
-      origin: mapEnums.MapActionOrigin.map
-    }));
-  }, [mapId, dispatch, isOpenInStore, source, gfiType]);
-  return jsx(MapControlButton, {
-    title: t('feature_info_location_info'),
-    "data-testid": "open-getfeatureinfo",
-    onClick: openGfiDialog,
-    isActive: isOpenInStore,
-    children: jsx(Info, {})
-  });
+  };
+  switch ((_location$geometry = location.geometry) == null ? void 0 : _location$geometry.geometry.type) {
+    case 'Point':
+    case undefined:
+      collection.features.push(marker);
+      break;
+    default:
+      collection.features.push(geometry);
+  }
+  return collection;
 };
-
-var _excluded$1 = ["showMapId"];
-var LegendConnectComponent = function LegendConnectComponent(_ref) {
-  var _ref$showMapId = _ref.showMapId,
-    showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source,
-    _ref$mapId = _ref.mapId,
-    initialMapId = _ref$mapId === void 0 ? null : _ref$mapId,
-    _ref$multiLegend = _ref.multiLegend,
-    multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
-  var legendType = multiLegend ? "legend-" + initialMapId : "legend";
-  var mapIdStore = useSelector(function (store) {
-    return uiSelectors.getDialogMapId(store, legendType);
-  });
-  var _React$useState = React.useState(initialMapId),
-    mapId = _React$useState[0],
-    setMapId = _React$useState[1];
-  React.useEffect(function () {
-    setMapId(mapIdStore);
-  }, [mapIdStore]);
-  var mapLayers = useSelector(function (store) {
-    return mapSelectors.getMapLayers(store, mapId);
-  });
-  var _useSetupDialog = useSetupDialog(legendType, source),
-    dialogOrder = _useSetupDialog.dialogOrder,
-    isDialogOpen = _useSetupDialog.isDialogOpen,
-    uiSource = _useSetupDialog.uiSource,
-    setDialogOrder = _useSetupDialog.setDialogOrder,
-    onCloseDialog = _useSetupDialog.onCloseDialog;
-  return jsx(LegendDialog, {
-    layers: mapLayers,
-    isOpen: isDialogOpen,
-    onClose: onCloseDialog,
-    mapId: mapId,
-    showMapId: showMapId,
-    onMouseDown: setDialogOrder,
-    order: dialogOrder,
-    source: uiSource
-  });
+var useShiftPressed = function useShiftPressed() {
+  var _React$useState = React__default.useState(false),
+    shiftIsPressed = _React$useState[0],
+    setShiftIsPressed = _React$useState[1];
+  React__default.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Shift') {
+        setShiftIsPressed(true);
+      }
+    };
+    var handleKeyUp = function handleKeyUp(event) {
+      if (event.key === 'Shift') {
+        setShiftIsPressed(false);
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+    return function () {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, []);
+  return shiftIsPressed;
 };
-/**
- * Legend component connected to the store displaying a legend for every layer shown on the active map Id
- * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
- * a dialog should have the <LegendMapButtonConnect/> which is used to focus the correct map and open the dialog
- *
- * Expects the following props:
- * @param {boolean} showMapId (optional) showMapId: boolean - show the id of the map in the dialog title of which the legend is shown in te dialog
- * @param {uiTypes.Source} source (optional) source: uiTypes.Source - default is 'app', 'module' makes sure it will be shown on top of the module
-
- * ``` <LegendConnect legendDialogId={legendDialogId} />```
- */
-var LegendConnect = function LegendConnect(_ref2) {
-  var _ref2$showMapId = _ref2.showMapId,
-    showMapId = _ref2$showMapId === void 0 ? false : _ref2$showMapId,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
-  return jsx(LegendConnectComponent, Object.assign({
-    showMapId: showMapId
-  }, props));
+var setBbox = function setBbox(map, bbox) {
+  var to = map.getView().getProjection().getCode();
+  var extent = [].concat(proj4(to, [bbox[0], bbox[1]]), proj4(to, [bbox[2], bbox[3]]));
+  map.getView().fit(extent);
 };
-
-var LegendMapButtonConnect = function LegendMapButtonConnect(_ref) {
-  var mapId = _ref.mapId,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source,
-    _ref$multiLegend = _ref.multiLegend,
-    multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
+var useDrawOnMap = function useDrawOnMap(mapId) {
   var dispatch = useDispatch();
-  var legendType = multiLegend ? "legend-" + mapId : "legend";
-  var currentActiveMapId = useSelector(function (store) {
-    return uiSelectors.getDialogMapId(store, legendType);
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  var shiftIsPressed = useShiftPressed();
+  var _useContext = useContext(MapContext),
+    map = _useContext.map;
+  var layerIdRef = React__default.useRef();
+  React__default.useEffect(function () {
+    layerIdRef.current = generateLayerId();
+  }, []);
+  var layerId = layerIdRef.current;
+  var isMapPresent = useSelector(function (store) {
+    return mapSelectors.getIsMapPresent(store, mapId);
   });
-  var isOpenInStore = useSelector(function (store) {
-    return uiSelectors.getisDialogOpen(store, legendType);
+  var isLayerPresent = useSelector(function (store) {
+    return layerSelectors.getIsLayerPresent(store, layerIdRef.current);
   });
-  var openLegendDialog = React.useCallback(function () {
-    dispatch(uiActions.setActiveMapIdForDialog({
-      type: legendType,
-      mapId: mapId,
-      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
-      source: source,
-      origin: mapEnums.MapActionOrigin.map
+  var shouldAddLayer = isMapPresent && !isLayerPresent && layerId;
+  React__default.useEffect(function () {
+    if (shouldAddLayer) {
+      dispatch(layerActions.addLayer({
+        mapId: mapId,
+        layerId: layerId,
+        layer: {
+          geojson: emptyGeoJSON,
+          layerType: LayerType.featureLayer
+        },
+        origin: 'LocationSearchConnect'
+      }));
+    }
+  }, [dispatch, layerId, mapId, shouldAddLayer]);
+  var updateGeoJSON = React__default.useCallback(function (location) {
+    var mapFeatureClass = (location == null ? void 0 : location.source) === 'MyMapLocation' ? MapFeatureClass.MyLocation : MapFeatureClass.GenericMarker;
+    var geojson = location ? makeGeoJSONFeatureFromLocation(location, mapFeatureClass, t) : emptyGeoJSON;
+    dispatch(layerActions.updateFeature({
+      layerId: layerId,
+      geojson: geojson
     }));
-  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source, legendType]);
-  var isOpen = currentActiveMapId === mapId && isOpenInStore;
-  return jsx(LegendButton, {
-    isOpen: isOpen,
-    openLegendDialog: openLegendDialog
-  });
+  }, [dispatch, layerId, t]);
+  var zoomToFeature = React__default.useCallback(function (location) {
+    if (map) {
+      var _location$geometry2;
+      var defaultZoomLevel = 12;
+      setMapCenter(map, location.lon, location.lat, shiftIsPressed ? defaultZoomLevel : undefined);
+      if (shiftIsPressed && location.bbox) {
+        setBbox(map, location.bbox);
+        return;
+      }
+      if (shiftIsPressed && (_location$geometry2 = location.geometry) != null && _location$geometry2.geometry) {
+        var mapSize = map.getSize();
+        if (mapSize) {
+          var buffer = bufferFromZoomLevel(defaultZoomLevel, location.lat, mapSize[0]);
+          var bbox = location.geometry.geometry.type === 'Point' ? bboxFromPoint(location.geometry.geometry, buffer) : bboxFromPolygon(location.geometry.geometry, buffer);
+          setBbox(map, bbox);
+        }
+      }
+    }
+  }, [map, shiftIsPressed]);
+  var onUpdateLocation = React__default.useCallback(function (location) {
+    updateGeoJSON(location);
+    if (location) {
+      zoomToFeature(location);
+    }
+  }, [updateGeoJSON, zoomToFeature]);
+  return [onUpdateLocation];
 };
 
-var SearchControlButtonConnect = function SearchControlButtonConnect(_ref) {
-  var mapId = _ref.mapId,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source;
-  var _useCoreTranslation = useCoreTranslation(),
-    t = _useCoreTranslation.t;
-  var dispatch = useDispatch();
+var LocationSearchConnect = function LocationSearchConnect(_ref) {
+  var _ref$mapId = _ref.mapId,
+    mapId = _ref$mapId === void 0 ? '' : _ref$mapId;
   var dialogType = uiTypes.DialogTypes.Search + "-" + mapId;
-  var currentActiveMapId = useSelector(function (store) {
-    return uiSelectors.getDialogMapId(store, dialogType);
+  var _useSetupDialog = useSetupDialog(dialogType),
+    isDialogOpen = _useSetupDialog.isDialogOpen;
+  var _useDrawOnMap = useDrawOnMap(mapId),
+    updateMapPin = _useDrawOnMap[0];
+  var _useDrawOnMap2 = useDrawOnMap(mapId),
+    updateMyLocation = _useDrawOnMap2[0];
+  var mapLayers = useSelector(function (store) {
+    return layerSelectors.getLayersByMapId(store, mapId);
   });
-  var isOpenInStore = useSelector(function (store) {
-    return uiSelectors.getisDialogOpen(store, dialogType);
+  var myLocationLayer = mapLayers.find(function (layer) {
+    var _layer$geojson;
+    if ((_layer$geojson = layer.geojson) != null && (_layer$geojson = _layer$geojson.features[0]) != null && (_layer$geojson = _layer$geojson.properties) != null && _layer$geojson.name) {
+      if (layer.geojson.features[0].properties.name === MY_LOCATION) {
+        return true;
+      }
+    }
+    return false;
   });
-  var openSearchDialog = React__default.useCallback(function () {
-    dispatch(uiActions.setActiveMapIdForDialog({
-      type: dialogType,
-      mapId: mapId,
-      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
-      source: source
-    }));
-  }, [currentActiveMapId, dialogType, dispatch, isOpenInStore, mapId, source]);
-  return jsx(MapControlButton, {
-    onClick: openSearchDialog,
-    title: t('search-title'),
-    "aria-label": t('search-title-aria'),
-    isActive: isOpenInStore,
-    children: jsx(Search, {})
+  var isMyLocationSelected = !!myLocationLayer;
+  return jsx(LocationSearch, {
+    isOpen: isDialogOpen,
+    mapId: mapId,
+    onSelectLocation: updateMapPin,
+    onUpdateMyLocation: updateMyLocation,
+    isMyLocationSelected: isMyLocationSelected
   });
 };
 
-var MY_LOCATION = 'My location';
-var locationOptions = {
-  enableHighAccuracy: false,
-  timeout: 10000,
-  maximumAge: 0
-};
-var MyMapLocation = function MyMapLocation(_ref) {
-  var _ref$mapId = _ref.mapId,
-    mapId = _ref$mapId === void 0 ? '' : _ref$mapId,
-    _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-    _ref$onUpdateMyLocati = _ref.onUpdateMyLocation,
-    onUpdateMyLocation = _ref$onUpdateMyLocati === void 0 ? function () {} : _ref$onUpdateMyLocati;
-  var theme = useTheme();
-  var _useState = useState(false),
-    isLoading = _useState[0],
-    setIsLoading = _useState[1];
-  var _useState2 = useState(false),
-    hasFailed = _useState2[0],
-    setHasFailed = _useState2[1];
-  var _useCoreTranslation = useCoreTranslation(),
-    t = _useCoreTranslation.t;
-  var handleLocationClick = function handleLocationClick() {
-    if (mapId && isSelected) {
-      onUpdateMyLocation(undefined);
-    } else if (navigator.geolocation && mapId && !isSelected) {
-      setIsLoading(true);
-      setHasFailed(false);
-      navigator.geolocation.getCurrentPosition(function (success) {
-        setIsLoading(false);
-        var _success$coords = success.coords,
-          latitude = _success$coords.latitude,
-          longitude = _success$coords.longitude;
-        var location = {
-          lat: latitude,
-          lon: longitude,
-          name: MY_LOCATION,
-          source: 'MyMapLocation',
-          id: MY_LOCATION
-        };
-        onUpdateMyLocation(location);
-      }, function () {
-        setIsLoading(false);
-        setHasFailed(true);
-        onUpdateMyLocation(undefined);
-      }, locationOptions);
-    }
-  };
-  var chooseIcon = function chooseIcon() {
-    return hasFailed ? jsx(Exclamation, {
-      style: {
-        color: theme.palette.geowebColors.functional.error
-      },
-      "aria-label": "location error"
-    }) : jsx(MyLocation, {
-      "aria-label": "location default"
+/* *
+ * 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 types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref) {
+  var layer = _ref.layer,
+    layerId = _ref.layerId,
+    zIndex = _ref.zIndex,
+    style = _ref.style,
+    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();
     });
-  };
-  return jsx(Box, {
-    sx: {
-      height: 40,
-      padding: 1
-    },
-    children: isLoading ? jsx(CircularProgress, {
-      size: 24,
-      "aria-label": "Location loading",
-      color: "secondary"
-    }) : jsx(CustomIconButton, {
-      tooltipTitle: t('search-my-location'),
-      "aria-label": t('search-my-location'),
-      onClick: handleLocationClick,
-      isSelected: isSelected,
-      variant: "tool",
-      size: "small",
-      children: chooseIcon()
-    })
+    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');
+      return;
+    }
+    var activeDrawToolId = drawingToolSelectors.getActiveDrawToolId(store.getState());
+    var activeDrawMode = drawingToolSelectors.getActiveDrawMode(store.getState(), activeDrawToolId);
+    dispatch(layerActions.updateFeature({
+      geojson: geojson,
+      reason: reason,
+      layerId: layerId,
+      shouldAllowMultipleShapes: drawingToolSelectors.getShouldAllowMultipleShapes(store.getState(), activeDrawToolId),
+      geoJSONIntersectionLayerId: drawingToolSelectors.getGeoJSONIntersectionLayerId(store.getState(), activeDrawToolId),
+      geoJSONIntersectionBoundsLayerId: drawingToolSelectors.getGeoJSONIntersectionBoundsLayerId(store.getState(), activeDrawToolId),
+      selectionType: activeDrawMode == null ? void 0 : activeDrawMode.selectionType
+    }));
+  }, [dispatch, store, layerId]);
+  var exitFeatureDrawMode = React__default.useCallback(function (reason) {
+    if (!layerId) {
+      window.console.error('exitFeatureDrawMode without layerId');
+      return;
+    }
+    var activeDrawToolId = drawingToolSelectors.getActiveDrawToolId(store.getState());
+    dispatch(layerActions.exitFeatureDrawMode({
+      reason: reason,
+      layerId: layerId,
+      shouldAllowMultipleShapes: drawingToolSelectors.getShouldAllowMultipleShapes(store.getState(), activeDrawToolId)
+    }));
+  }, [dispatch, store, layerId]);
+  return jsxs(Fragment, {
+    children: [jsx(OpenLayersFeatureLayer, {
+      featureCollection: !layer.isInEditMode ? layer.geojson : undefined,
+      zIndex: zIndex,
+      style: style,
+      hoverSelect: hoverSelect,
+      clickOnFeature: layer.isSelectable ? {
+        onClick: onFeatureClick,
+        hitTolerance: 5
+      } : undefined,
+      visible: layer.enabled,
+      opacity: layer.opacity
+    }), jsx(OpenLayersMapDraw, {
+      drawMode: layer.drawMode,
+      viewOnlyStyle: style,
+      exitDrawModeCallback: exitFeatureDrawMode,
+      geojson: layer.geojson,
+      isInEditMode: layer.isInEditMode || false,
+      selectedFeatureIndex: layer.selectedFeatureIndex || 0,
+      updateGeojson: updateFeature
+    })]
   });
 };
 
@@ -6555,201 +6992,189 @@ var MyMapLocation = function MyMapLocation(_ref) {
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var config = sessionStorageProvider.getConfig();
-var locationBaseUrl = config.GW_LOCATION_BASE_URL;
-var getLocationBaseUrl = function getLocationBaseUrl() {
-  if (locationBaseUrl === undefined) {
-    var _config = sessionStorageProvider.getConfig();
-    locationBaseUrl = _config.GW_LOCATION_BASE_URL || '';
+var makePrefetchTimeSpan = function makePrefetchTimeSpan(timeSliderStartCenterEndTime, isAnimating, prefetchList) {
+  var timeSliderTimeStepInS = timeSliderStartCenterEndTime.step * 60 * 1000;
+  var prefetchStart = timeSliderStartCenterEndTime.start * 1000;
+  var prefetchEnd = timeSliderStartCenterEndTime.end * 1000;
+  if (isAnimating || !prefetchStart || !prefetchEnd) {
+    return {
+      isAnimating: isAnimating,
+      prefetchList: prefetchList
+    };
   }
-  return locationBaseUrl;
-};
-var getLocationList = function getLocationList(search) {
-  return fetch(getLocationBaseUrl() + "/locations?search=" + search).then(handleResponse);
+  var roundStart = Math.round(prefetchStart / timeSliderTimeStepInS) * timeSliderTimeStepInS;
+  var roundEnd = Math.round(prefetchEnd / timeSliderTimeStepInS) * timeSliderTimeStepInS + timeSliderTimeStepInS;
+  var timeSpanList = makeTimeList({
+    start: roundStart,
+    end: roundEnd,
+    step: timeSliderTimeStepInS
+  });
+  return {
+    isAnimating: isAnimating,
+    prefetchList: timeSpanList
+  };
 };
-var getLocationDetail = function getLocationDetail(id, source) {
-  return fetch(getLocationBaseUrl() + "/locationdetail?id=" + id + "&source=" + source).then(handleResponse);
+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 useLocationList = function useLocationList(search) {
-  return useQuery({
-    queryKey: ['location-list', search],
-    queryFn: function () {
-      var _queryFn = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!(search.length > 0)) {
-                _context.next = 2;
-                break;
-              }
-              return _context.abrupt("return", getLocationList(search));
-            case 2:
-              return _context.abrupt("return", []);
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      function queryFn() {
-        return _queryFn.apply(this, arguments);
-      }
-      return queryFn;
-    }()
+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';
+  var dimensions = (payload.dimensions || []).map(function (layerDim) {
+    var _find;
+    var currentMapDim = ((_find = (mapDimensions || []).find(function (mapDim) {
+      return mapDim.name === layerDim.name;
+    })) == null ? void 0 : _find.currentValue) || layerDim.currentValue;
+    var wmDim = new WMJSDimension(layerDim);
+    return Object.assign({}, layerDim, {
+      currentValue: wmDim.getClosestValue(currentMapDim, true)
+    });
   });
+  var updatedPayLoad = {
+    origin: origin,
+    layerDimensions: {
+      layerId: payload.layerId,
+      origin: origin,
+      dimensions: dimensions
+    },
+    mapDimensions: {
+      mapId: mapId,
+      origin: origin,
+      dimensions: dimensions
+    }
+  };
+  return updatedPayLoad;
 };
-var useLocationDetail = function useLocationDetail(id, source) {
-  if (id === void 0) {
-    id = '';
-  }
-  if (source === void 0) {
-    source = '';
-  }
-  return useQuery({
-    queryKey: ['location-detail', {
+var getCenterOfLinkedFeature = function getCenterOfLinkedFeature(feature, srs) {
+  var _feature$getGeometry;
+  if (feature && ((_feature$getGeometry = feature.getGeometry()) == null ? void 0 : _feature$getGeometry.getType()) === 'Point') {
+    var _feature$getId;
+    var projectionCoords = feature.getGeometry().getCoordinates();
+    var coords = toLonLat(projectionCoords, srs);
+    var id = (feature == null || (_feature$getId = feature.getId()) == null ? void 0 : _feature$getId.toString()) || '';
+    return {
+      lon: coords[0],
+      lat: coords[1],
       id: id,
-      source: source
-    }],
-    queryFn: function queryFn() {
-      return getLocationDetail(id, source);
-    },
-    enabled: !!id
-  });
+      serviceId: feature.getProperties().serviceId,
+      collectionId: feature.getProperties().collectionId
+    };
+  }
+  return null;
 };
-
-var LocationSearch = function LocationSearch(_ref) {
-  var isOpen = _ref.isOpen,
-    _ref$mapId = _ref.mapId,
-    mapId = _ref$mapId === void 0 ? '' : _ref$mapId,
-    _ref$onSelectLocation = _ref.onSelectLocation,
-    onSelectLocation = _ref$onSelectLocation === void 0 ? function () {} : _ref$onSelectLocation,
-    _ref$onUpdateMyLocati = _ref.onUpdateMyLocation,
-    onUpdateMyLocation = _ref$onUpdateMyLocati === void 0 ? function () {} : _ref$onUpdateMyLocati,
-    _ref$isMyLocationSele = _ref.isMyLocationSelected,
-    isMyLocationSelected = _ref$isMyLocationSele === void 0 ? false : _ref$isMyLocationSele;
-  var theme = useTheme();
-  var _useCoreTranslation = useCoreTranslation(),
-    t = _useCoreTranslation.t;
-  var _useState = useState(''),
-    inputValue = _useState[0],
-    setInputValue = _useState[1];
-  var _useState2 = useState(null),
-    selectedValue = _useState2[0],
-    setSelectedValue = _useState2[1];
-  var debouncedInputValue = useDebounce(inputValue, 300);
-  var _useLocationList = useLocationList(debouncedInputValue),
-    locationListData = _useLocationList.data;
-  var _useLocationDetail = useLocationDetail(selectedValue == null ? void 0 : selectedValue.id, selectedValue == null ? void 0 : selectedValue.source),
-    locationDetail = _useLocationDetail.data,
-    isFetchingDetail = _useLocationDetail.isFetching;
+function useFitAndHighlightWarningFeature(_ref) {
+  var view = _ref.view,
+    warningDialogFeatures = _ref.warningDialogFeatures,
+    srs = _ref.srs,
+    mapId = _ref.mapId;
+  var dispatch = useDispatch();
   useEffect(function () {
-    if (isFetchingDetail || !isOpen) {
+    var _warningDialogFeature, _geoJsonFeature$prope, _warningDialogFeature2, _geoJsonFeature$bbox;
+    if (!view || !(warningDialogFeatures != null && warningDialogFeatures.length) || !srs) {
       return;
     }
-    onSelectLocation(selectedValue ? locationDetail : undefined);
-  }, [locationDetail, onSelectLocation, selectedValue, isFetchingDetail, isOpen]);
-  return isOpen && mapId ? jsxs(Box, {
-    sx: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      position: 'absolute',
-      pointerEvents: 'all',
-      zIndex: 99,
-      left: 50,
-      top: 8,
-      backgroundColor: theme.palette.geowebColors.textInputField["default"].fill,
-      height: 40,
-      boxShadow: theme.shadows[6],
-      width: 'calc(100% - 50px)',
-      maxWidth: 380
-    },
-    children: [jsx(MyMapLocation, {
-      mapId: mapId,
-      onUpdateMyLocation: onUpdateMyLocation,
-      isSelected: isMyLocationSelected
-    }), jsx(Autocomplete, {
-      disablePortal: true,
-      selectOnFocus: true,
-      sx: {
-        width: '100%',
-        '&.MuiAutocomplete-root .MuiFilledInput-root': {
-          height: 40,
-          padding: '0px!important',
-          '&:before, &:hover:before': {
-            borderColor: 'transparent'
-          }
-        },
-        '&.MuiAutocomplete-root .MuiInputLabel-root': {
-          lineHeight: '16px',
-          maxWidth: 'calc(100% - 40px)',
-          ':not(.MuiInputLabel-shrink)': {
-            transform: 'translate(12px, 12px) scale(1)'
-          }
-        },
-        '&.MuiAutocomplete-root .MuiFilledInput-input': {
-          lineHeight: '20px',
-          paddingLeft: '12px',
-          paddingTop: '20px'
-        }
-      },
-      getOptionLabel: function getOptionLabel(option) {
-        return option.name;
-      },
-      getOptionKey: function getOptionKey(option) {
-        return option.id + option.name;
-      },
-      filterOptions: function filterOptions(x) {
-        return x;
-      },
-      options: locationListData || [],
-      noOptionsText: t('search-no-results'),
-      popupIcon: null,
-      clearIcon: null,
-      onChange: function onChange(_event, newValue) {
-        if (newValue && typeof newValue !== 'string') {
-          setSelectedValue(newValue);
-          setInputValue(newValue.name);
-        }
-      },
-      value: selectedValue,
-      inputValue: inputValue,
-      isOptionEqualToValue: function isOptionEqualToValue(option, value) {
-        return option.id === value.id;
-      },
-      renderInput: function renderInput(params) {
-        return jsx(TextField, Object.assign({}, params, {
-          autoFocus: true,
-          size: "medium",
-          label: t('search-title-long'),
-          fullWidth: true,
-          variant: "filled",
-          onChange: function onChange(event) {
-            setInputValue(event.target.value);
-            if (selectedValue) {
-              setSelectedValue(null);
-            }
+    var geoJsonFeature = (_warningDialogFeature = warningDialogFeatures[0]) == null || (_warningDialogFeature = _warningDialogFeature.geoJSON) == null || (_warningDialogFeature = _warningDialogFeature.features) == null ? void 0 : _warningDialogFeature[0];
+    var warningLevel = geoJsonFeature == null || (_geoJsonFeature$prope = geoJsonFeature.properties) == null ? void 0 : _geoJsonFeature$prope.warningLevel;
+    var isAviationWarning = warningLevel === 'SIG' || warningLevel === 'AIR';
+    if (!geoJsonFeature) {
+      return;
+    }
+    var warningDialogFeature = new GeoJSON().readFeature(geoJsonFeature, {
+      featureProjection: srs
+    });
+    var geometry = Array.isArray(warningDialogFeature) ? (_warningDialogFeature2 = warningDialogFeature[0]) == null ? void 0 : _warningDialogFeature2.getGeometry() : warningDialogFeature.getGeometry();
+    if (!geometry) {
+      return;
+    }
+    var featureExtent = (_geoJsonFeature$bbox = geoJsonFeature.bbox) != null ? _geoJsonFeature$bbox : geometry.getExtent();
+    var currentExtent = view.calculateExtent();
+    var intersection = getIntersection(currentExtent, featureExtent);
+    var isCompletelyOutside = !intersection || intersection[0] >= intersection[2] || intersection[1] >= intersection[3];
+    var shouldPan = false;
+    if (isCompletelyOutside) {
+      shouldPan = true;
+    } else {
+      var featureArea = (featureExtent[2] - featureExtent[0]) * (featureExtent[3] - featureExtent[1]);
+      var visibleArea = (intersection[2] - intersection[0]) * (intersection[3] - intersection[1]);
+      var visibleRatio = visibleArea / featureArea;
+      shouldPan = visibleRatio <= 0.5;
+    }
+    if (shouldPan) {
+      view.fit(featureExtent, {
+        duration: 500,
+        padding: [40, 40, 40, 40],
+        maxZoom: 5
+      });
+    }
+    if (!isAviationWarning) {
+      dispatch(layerActions.addLayer({
+        mapId: mapId,
+        layer: {
+          geojson: {
+            type: 'FeatureCollection',
+            features: [geoJsonFeature]
           },
-          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, {})
-              })
-            })
-          }
+          layerType: LayerType.featureLayer
+        },
+        layerId: 'highlight-layer',
+        origin: 'OlMapViewConnect'
+      }));
+      // eslint-disable-next-line consistent-return
+      return function () {
+        dispatch(layerActions.layerDelete({
+          mapId: mapId,
+          layerId: 'highlight-layer'
         }));
-      }
-    })]
-  }) : null;
+      };
+    }
+  }, [view, warningDialogFeatures, srs, dispatch, mapId]);
+}
+
+var OlMapViewLayerConnect = function OlMapViewLayerConnect(layerProps) {
+  var layerId = layerProps.layerId,
+    mapId = layerProps.mapId,
+    zIndex = layerProps.zIndex,
+    debugMode = layerProps.debugMode;
+  var layer = useSelector(function (store) {
+    return layerSelectors.getLayerById(store, layerId);
+  });
+  var mapDimensions = useSelector(function (store) {
+    return mapSelectors.getMapDimensions(store, mapId);
+  });
+  var dispatch = useDispatch();
+  var onInitializeLayer = useCallback(function (initProps) {
+    var updatedPayLoad = makeLayerInfoPayload(initProps, mapDimensions || [], mapId);
+    dispatch(layerActions.onUpdateLayerInformation(updatedPayLoad));
+  }, [dispatch, mapDimensions, mapId]);
+  if (!layerId || !layer) {
+    return null;
+  }
+  var isInsideAcceptanceTime = getIsInsideAcceptanceTime(layer.acceptanceTimeInMinutes, mapDimensions, layer.dimensions);
+  return jsx(OpenLayersLayer, Object.assign({
+    id: "layer-" + (layer == null ? void 0 : layer.id),
+    zIndex: zIndex
+  }, layer, {
+    enabled: isInsideAcceptanceTime && layer.enabled,
+    onInitializeLayer: onInitializeLayer,
+    debugMode: debugMode
+  }), "layer-" + (layer == null ? void 0 : layer.id));
 };
 
 /* *
@@ -6765,136 +7190,93 @@ var LocationSearch = function LocationSearch(_ref) {
  * 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)
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var geometryStyling = {
-  fill: '#FF7800',
-  'fill-opacity': 0.25,
-  stroke: '#FF7800',
-  'stroke-opacity': 1,
-  'stroke-width': 4
-};
-var makeGeoJSONFeatureFromLocation = function makeGeoJSONFeatureFromLocation(location, mapFeatureClass, t) {
-  var _location$geometry;
-  var collection = {
-    type: 'FeatureCollection',
-    features: []
-  };
-  var name = mapFeatureClass === MapFeatureClass.MyLocation ? t('my-location') : location.name;
-  var geometry = Object.assign({}, location.geometry, {
-    properties: Object.assign({}, geometryStyling, {
-      name: name,
-      mapFeatureClass: mapFeatureClass,
-      showNameOnHover: true
-    })
-  });
-  var marker = {
-    type: 'Feature',
-    properties: {
-      name: name,
-      mapFeatureClass: mapFeatureClass,
-      showNameOnHover: true
-    },
-    geometry: {
-      type: 'Point',
-      coordinates: [location.lon, location.lat]
+var useGetOpenLayersView = function useGetOpenLayersView(mapId, store) {
+  var _useState = useState(),
+    view = _useState[0],
+    setView = _useState[1];
+  var _useState2 = useState(),
+    name = _useState2[0],
+    setName = _useState2[1];
+  var syncGroupState = syncGroupsSelectors.getSynchronizationGroupState(store.getState());
+  var syncGroupView = useMemo(function () {
+    var thisAreaSyncGroupId = syncGroupState.groups.allIds.find(function (id) {
+      var group = syncGroupState.groups.byId[id];
+      return group.type === syncConstants.SYNCGROUPS_TYPE_SETBBOX && group.targets.allIds.indexOf(mapId) !== -1;
+    });
+    return thisAreaSyncGroupId ? getViewObjectForSyncGroup(thisAreaSyncGroupId) : null;
+  }, [mapId, syncGroupState.groups]);
+  useEffect(function () {
+    var mapBbox = mapSelectors.getBbox(store.getState(), mapId);
+    var storedView = syncGroupView || getViewObjectForMapId(mapId);
+    if (storedView.view.getCenter() === undefined && mapBbox.left !== undefined) {
+      storedView.view.fit([mapBbox.left, mapBbox.bottom, mapBbox.right, mapBbox.top]);
     }
+    setName(storedView.name);
+    var setViewFromStoredView = function setViewFromStoredView() {
+      setView(storedView.view);
+    };
+    setViewFromStoredView();
+    var eventKey = storedView.on('change', setViewFromStoredView);
+    return function () {
+      unByKey(eventKey);
+    };
+  }, [syncGroupView, mapId, store]);
+  return {
+    view: view,
+    name: name
   };
-  switch ((_location$geometry = location.geometry) == null ? void 0 : _location$geometry.geometry.type) {
-    case 'Point':
-    case undefined:
-      collection.features.push(marker);
-      break;
-    default:
-      collection.features.push(geometry);
-  }
-  return collection;
-};
-var useDrawOnMap = function useDrawOnMap(mapId) {
-  var dispatch = useDispatch();
-  var _useCoreTranslation = useCoreTranslation(),
-    t = _useCoreTranslation.t;
-  var _useContext = useContext(MapContext),
-    map = _useContext.map;
-  var layerIdRef = React__default.useRef();
-  React__default.useEffect(function () {
-    layerIdRef.current = generateLayerId();
-  }, []);
-  var layerId = layerIdRef.current;
-  var isMapPresent = useSelector(function (store) {
-    return mapSelectors.getIsMapPresent(store, mapId);
-  });
-  var isLayerPresent = useSelector(function (store) {
-    return layerSelectors.getIsLayerPresent(store, layerIdRef.current);
-  });
-  var shouldAddLayer = isMapPresent && !isLayerPresent && layerId;
-  React__default.useEffect(function () {
-    if (shouldAddLayer) {
-      dispatch(layerActions.addLayer({
-        mapId: mapId,
-        layerId: layerId,
-        layer: {
-          geojson: emptyGeoJSON,
-          layerType: LayerType.featureLayer
-        },
-        origin: 'LocationSearchConnect'
-      }));
-    }
-  }, [dispatch, layerId, mapId, shouldAddLayer]);
-  var updateGeoJSON = React__default.useCallback(function (location) {
-    var mapFeatureClass = (location == null ? void 0 : location.source) === 'MyMapLocation' ? MapFeatureClass.MyLocation : MapFeatureClass.GenericMarker;
-    var geojson = location ? makeGeoJSONFeatureFromLocation(location, mapFeatureClass, t) : emptyGeoJSON;
-    dispatch(layerActions.updateFeature({
-      layerId: layerId,
-      geojson: geojson
-    }));
-  }, [dispatch, layerId, t]);
-  var zoomToFeature = React__default.useCallback(function (location) {
-    if (map) {
-      setMapCenter(map, location.lon, location.lat);
-    }
-  }, [map]);
-  var onUpdateLocation = React__default.useCallback(function (location) {
-    updateGeoJSON(location);
-    if (location) {
-      zoomToFeature(location);
-    }
-  }, [updateGeoJSON, zoomToFeature]);
-  return [onUpdateLocation];
 };
 
-var LocationSearchConnect = function LocationSearchConnect(_ref) {
-  var _ref$mapId = _ref.mapId,
-    mapId = _ref$mapId === void 0 ? '' : _ref$mapId;
-  var dialogType = uiTypes.DialogTypes.Search + "-" + mapId;
-  var _useSetupDialog = useSetupDialog(dialogType),
-    isDialogOpen = _useSetupDialog.isDialogOpen;
-  var _useDrawOnMap = useDrawOnMap(mapId),
-    updateMapPin = _useDrawOnMap[0];
-  var _useDrawOnMap2 = useDrawOnMap(mapId),
-    updateMyLocation = _useDrawOnMap2[0];
-  var mapLayers = useSelector(function (store) {
-    return layerSelectors.getLayersByMapId(store, mapId);
-  });
-  var myLocationLayer = mapLayers.find(function (layer) {
-    var _layer$geojson;
-    if ((_layer$geojson = layer.geojson) != null && (_layer$geojson = _layer$geojson.features[0]) != null && (_layer$geojson = _layer$geojson.properties) != null && _layer$geojson.name) {
-      if (layer.geojson.features[0].properties.name === MY_LOCATION) {
-        return true;
+/* *
+ * 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);
       }
-    }
-    return false;
-  });
-  var isMyLocationSelected = !!myLocationLayer;
-  return jsx(LocationSearch, {
-    isOpen: isDialogOpen,
-    mapId: mapId,
-    onSelectLocation: updateMapPin,
-    onUpdateMyLocation: updateMyLocation,
-    isMyLocationSelected: isMyLocationSelected
-  });
+    }, LOADING_INDICATOR_UPDATE_INTERVAL_MS);
+    return function () {
+      clearInterval(intervalId);
+    };
+  }, [layerIds, mapId, setGetMapLoadingPercentage]);
 };
 
 /* *
@@ -6910,101 +7292,66 @@ var LocationSearchConnect = function LocationSearchConnect(_ref) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-
-var types = /*#__PURE__*/Object.freeze({
-  __proto__: null
-});
-
-var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref) {
-  var layer = _ref.layer,
-    layerId = _ref.layerId,
-    zIndex = _ref.zIndex,
-    style = _ref.style,
-    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();
+/**
+ * Get the title for this WMS layer based on its layerId. If not defined, layerId is used instead.
+ * @param layerId
+ * @returns Title for the layer
+ */
+var getTitle = function getTitle(layerId) {
+  var wmjsLayer = webmapUtils.getWMLayerById(layerId);
+  return wmjsLayer ? wmjsLayer.title || wmjsLayer.name : layerId;
+};
+var getFeatureInfoUrl = function getFeatureInfoUrl(layer, mapPinLocation) {
+  /*
+    We need a wmjsLayer to build the getfeatureinfo url (getWMSGetFeatureInfoRequestURL function).
+    But it seems that its dimension are lazely updated (by ReactMapView).
+    Therefore make a clone of this layer and set its dimensions based on the layer object.
+    Otherwise we risk making a getfeatureinfo call with outdated dimension values.
+  */
+  var wmjsLayer = webmapUtils.getWMLayerById(layer.id).cloneLayer();
+  if (mapPinLocation) {
+    // OpenLayers WMS version
+    var source = new ImageWMS({
+      url: wmjsLayer.getmapURL,
+      params: {
+        LAYERS: wmjsLayer.getLayerName()
+      }
     });
-    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
-        }));
+    layer.dimensions && layer.dimensions.forEach(function (dim) {
+      var wmDim = wmjsLayer.getDimension(dim.name);
+      if (wmDim && wmDim.getValue() !== dim.currentValue) {
+        wmDim.setValue(dim.currentValue);
       }
-    }
-  }, [dispatch, layer.geojson, layer.selectedFeatureIndex, layerId]);
-  var updateFeature = React__default.useCallback(function (geojson, reason) {
-    if (!layerId) {
-      window.console.error('updateFeature without layerId');
-      return;
-    }
-    var activeDrawToolId = drawingToolSelectors.getActiveDrawToolId(store.getState());
-    var activeDrawMode = drawingToolSelectors.getActiveDrawMode(store.getState(), activeDrawToolId);
-    dispatch(layerActions.updateFeature({
-      geojson: geojson,
-      reason: reason,
-      layerId: layerId,
-      shouldAllowMultipleShapes: drawingToolSelectors.getShouldAllowMultipleShapes(store.getState(), activeDrawToolId),
-      geoJSONIntersectionLayerId: drawingToolSelectors.getGeoJSONIntersectionLayerId(store.getState(), activeDrawToolId),
-      geoJSONIntersectionBoundsLayerId: drawingToolSelectors.getGeoJSONIntersectionBoundsLayerId(store.getState(), activeDrawToolId),
-      selectionType: activeDrawMode == null ? void 0 : activeDrawMode.selectionType
-    }));
-  }, [dispatch, store, layerId]);
-  var exitFeatureDrawMode = React__default.useCallback(function (reason) {
-    if (!layerId) {
-      window.console.error('exitFeatureDrawMode without layerId');
-      return;
-    }
-    var activeDrawToolId = drawingToolSelectors.getActiveDrawToolId(store.getState());
-    dispatch(layerActions.exitFeatureDrawMode({
-      reason: reason,
-      layerId: layerId,
-      shouldAllowMultipleShapes: drawingToolSelectors.getShouldAllowMultipleShapes(store.getState(), activeDrawToolId)
-    }));
-  }, [dispatch, store, layerId]);
-  return jsxs(Fragment, {
-    children: [jsx(OpenLayersFeatureLayer, {
-      featureCollection: !layer.isInEditMode ? layer.geojson : undefined,
-      zIndex: zIndex,
-      style: style,
-      hoverSelect: hoverSelect,
-      clickOnFeature: layer.isSelectable ? {
-        onClick: onFeatureClick,
-        hitTolerance: 5
-      } : undefined,
-      visible: layer.enabled,
-      opacity: layer.opacity
-    }), jsx(OpenLayersMapDraw, {
-      drawMode: layer.drawMode,
-      viewOnlyStyle: style,
-      exitDrawModeCallback: exitFeatureDrawMode,
-      geojson: layer.geojson,
-      isInEditMode: layer.isInEditMode || false,
-      selectedFeatureIndex: layer.selectedFeatureIndex || 0,
-      updateGeojson: updateFeature
-    })]
+    });
+    return source.getFeatureInfoUrl([mapPinLocation.projectionX, mapPinLocation.projectionY], mapPinLocation.resolution, mapPinLocation.srs, {
+      INFO_FORMAT: 'text/html'
+    }) + "&" + getMapDimURL(wmjsLayer).toString();
+  }
+  return undefined;
+};
+/**
+ * Make a list of GFI Layers to display.
+ * @param layers
+ * @param mapId
+ * @returns
+ */
+var getLayersToUpdate = function getLayersToUpdate(mapPinLocation, layers) {
+  if (!layers || layers.length === 0 || !mapPinLocation) {
+    return [];
+  }
+  return layers.filter(function (layer) {
+    return layer && layer.enabled && !!webmapUtils.getWMLayerById(layer.id);
+  }).map(function (layer) {
+    var url = getFeatureInfoUrl(layer, mapPinLocation);
+    return {
+      layerId: layer.id,
+      url: url,
+      title: getTitle(layer.id)
+    };
   });
 };
 
@@ -7021,295 +7368,387 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref)
  * 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)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var makePrefetchTimeSpan = function makePrefetchTimeSpan(timeSliderStartCenterEndTime, isAnimating, prefetchList) {
-  var timeSliderTimeStepInS = timeSliderStartCenterEndTime.step * 60 * 1000;
-  var prefetchStart = timeSliderStartCenterEndTime.start * 1000;
-  var prefetchEnd = timeSliderStartCenterEndTime.end * 1000;
-  if (isAnimating || !prefetchStart || !prefetchEnd) {
-    return {
-      isAnimating: isAnimating,
-      prefetchList: prefetchList
-    };
-  }
-  var roundStart = Math.round(prefetchStart / timeSliderTimeStepInS) * timeSliderTimeStepInS;
-  var roundEnd = Math.round(prefetchEnd / timeSliderTimeStepInS) * timeSliderTimeStepInS + timeSliderTimeStepInS;
-  var timeSpanList = makeTimeList({
-    start: roundStart,
-    end: roundEnd,
-    step: timeSliderTimeStepInS
-  });
+var sanitizeHTML = function sanitizeHTML(htmlToBeSanitized) {
   return {
-    isAnimating: isAnimating,
-    prefetchList: timeSpanList
+    __html: DOMPurify.sanitize(htmlToBeSanitized, {
+      ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'table', 'td', 'tr', 'br', 'hr', 'th'],
+      ALLOWED_ATTR: ['href']
+    })
   };
 };
-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';
-  var dimensions = (payload.dimensions || []).map(function (layerDim) {
-    var _find;
-    var currentMapDim = ((_find = (mapDimensions || []).find(function (mapDim) {
-      return mapDim.name === layerDim.name;
-    })) == null ? void 0 : _find.currentValue) || layerDim.currentValue;
-    var wmDim = new WMJSDimension(layerDim);
-    return Object.assign({}, layerDim, {
-      currentValue: wmDim.getClosestValue(currentMapDim, true)
+
+var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
+  var layers = _ref.layers,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    _ref$onMouseDown = _ref.onMouseDown,
+    onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    mapId = _ref.mapId,
+    _ref$showMapId = _ref.showMapId,
+    showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
+    _ref$order = _ref.order,
+    order = _ref$order === void 0 ? 0 : _ref$order,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source,
+    mapPinLocation = _ref.mapPinLocation;
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  /* Ref, state and update function for results per layer map */
+  var gfiResultMap = React__default.useRef(new Map()).current;
+  var _React$useState = React__default.useState(),
+    triggerRerender = _React$useState[1];
+  var updateLayerResult = function updateLayerResult(_ref2) {
+    var layerId = _ref2.layerId,
+      data = _ref2.data,
+      isLoading = _ref2.isLoading;
+    gfiResultMap.set(layerId, {
+      data: data,
+      isLoading: isLoading
     });
-  });
-  var updatedPayLoad = {
-    origin: origin,
-    layerDimensions: {
-      layerId: payload.layerId,
-      origin: origin,
-      dimensions: dimensions
-    },
-    mapDimensions: {
-      mapId: mapId,
-      origin: origin,
-      dimensions: dimensions
-    }
+    triggerRerender("" + layerId + isLoading);
   };
-  return updatedPayLoad;
-};
-var getCenterOfLinkedFeature = function getCenterOfLinkedFeature(feature, srs) {
-  var _feature$getGeometry;
-  if (feature && ((_feature$getGeometry = feature.getGeometry()) == null ? void 0 : _feature$getGeometry.getType()) === 'Point') {
-    var _feature$getId;
-    var projectionCoords = feature.getGeometry().getCoordinates();
-    var coords = toLonLat(projectionCoords, srs);
-    var id = (feature == null || (_feature$getId = feature.getId()) == null ? void 0 : _feature$getId.toString()) || '';
-    return {
-      lon: coords[0],
-      lat: coords[1],
-      id: id,
-      serviceId: feature.getProperties().serviceId,
-      collectionId: feature.getProperties().collectionId
+  /* Build a layerlist array with a set of arguments per layer to do the query for */
+  var layerToUpdateList = isOpen && mapPinLocation ? getLayersToUpdate(mapPinLocation, layers) : [];
+  /*
+    Build a string based on the GFI urls. If this changes for whatever reason we need to update.
+    These strings can change very often, therefore they need to be debounced and only use the most recent result  must be used.
+  */
+  var debouncedlayerListString = useDebounce(layerToUpdateList.map(function (layer) {
+    return layer.url;
+  }).join(','), 100);
+  /* Do a GFI call to the server and use the updateLayerResult to provide the results. */
+  var fetchLayerInfo = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(url, layerId) {
+      var _yield$axios$get, data, errorMessage;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            updateLayerResult({
+              layerId: layerId,
+              data: '',
+              isLoading: true
+            });
+            _context.next = 4;
+            return axios.get(url);
+          case 4:
+            _yield$axios$get = _context.sent;
+            data = _yield$axios$get.data;
+            updateLayerResult({
+              layerId: layerId,
+              data: data,
+              isLoading: false
+            });
+            _context.next = 13;
+            break;
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](0);
+            errorMessage = _context.t0 instanceof Error ? _context.t0.message : 'fetchLayerInfo failed';
+            updateLayerResult({
+              layerId: layerId,
+              data: errorMessage,
+              isLoading: false
+            });
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 9]]);
+    }));
+    return function fetchLayerInfo(_x, _x2) {
+      return _ref3.apply(this, arguments);
     };
-  }
-  return null;
-};
-function useFitAndHighlightWarningFeature(_ref) {
-  var view = _ref.view,
-    warningDialogFeatures = _ref.warningDialogFeatures,
-    srs = _ref.srs,
-    mapId = _ref.mapId;
-  var dispatch = useDispatch();
-  useEffect(function () {
-    var _warningDialogFeature, _geoJsonFeature$prope, _warningDialogFeature2, _geoJsonFeature$bbox;
-    if (!view || !(warningDialogFeatures != null && warningDialogFeatures.length) || !srs) {
-      return;
-    }
-    var geoJsonFeature = (_warningDialogFeature = warningDialogFeatures[0]) == null || (_warningDialogFeature = _warningDialogFeature.geoJSON) == null || (_warningDialogFeature = _warningDialogFeature.features) == null ? void 0 : _warningDialogFeature[0];
-    var warningLevel = geoJsonFeature == null || (_geoJsonFeature$prope = geoJsonFeature.properties) == null ? void 0 : _geoJsonFeature$prope.warningLevel;
-    var isAviationWarning = warningLevel === 'SIG' || warningLevel === 'AIR';
-    if (!geoJsonFeature) {
-      return;
-    }
-    var warningDialogFeature = new GeoJSON().readFeature(geoJsonFeature, {
-      featureProjection: srs
-    });
-    var geometry = Array.isArray(warningDialogFeature) ? (_warningDialogFeature2 = warningDialogFeature[0]) == null ? void 0 : _warningDialogFeature2.getGeometry() : warningDialogFeature.getGeometry();
-    if (!geometry) {
-      return;
-    }
-    var featureExtent = (_geoJsonFeature$bbox = geoJsonFeature.bbox) != null ? _geoJsonFeature$bbox : geometry.getExtent();
-    var currentExtent = view.calculateExtent();
-    var intersection = getIntersection(currentExtent, featureExtent);
-    var isCompletelyOutside = !intersection || intersection[0] >= intersection[2] || intersection[1] >= intersection[3];
-    var shouldPan = false;
-    if (isCompletelyOutside) {
-      shouldPan = true;
-    } else {
-      var featureArea = (featureExtent[2] - featureExtent[0]) * (featureExtent[3] - featureExtent[1]);
-      var visibleArea = (intersection[2] - intersection[0]) * (intersection[3] - intersection[1]);
-      var visibleRatio = visibleArea / featureArea;
-      shouldPan = visibleRatio <= 0.5;
-    }
-    if (shouldPan) {
-      view.fit(featureExtent, {
-        duration: 500,
-        padding: [40, 40, 40, 40],
-        maxZoom: 5
+  }();
+  /* For each changed getfeature url string, load new data using WMS GetFeatureInfo */
+  React__default.useEffect(function () {
+    if (mapPinLocation && isOpen) {
+      layerToUpdateList.forEach(function (_ref4) {
+        var url = _ref4.url,
+          layerId = _ref4.layerId;
+        void fetchLayerInfo(url, layerId);
       });
     }
-    if (!isAviationWarning) {
-      dispatch(layerActions.addLayer({
-        mapId: mapId,
-        layer: {
-          geojson: {
-            type: 'FeatureCollection',
-            features: [geoJsonFeature]
-          },
-          layerType: LayerType.featureLayer
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedlayerListString]);
+  var hasLayers = layers && layers.length > 0;
+  var stopWheelEventPropagationRef = useWheelStopPropagation();
+  return jsx(ToolContainerDraggable, {
+    startPosition: {
+      right: 10,
+      top: 80
+    },
+    minWidth: 100,
+    onClose: onClose,
+    title: showMapId ? t('feature_info_marker_info') + " " + mapId : t('feature_info_marker_info'),
+    initialMaxHeight: 440,
+    isOpen: isOpen,
+    "data-testid": "moveable-getfeatureinfo",
+    bounds: "parent",
+    onMouseDown: onMouseDown,
+    order: order,
+    source: source,
+    children: jsxs(Box, {
+      sx: {
+        padding: 0
+      },
+      children: [isOpen && hasLayers && mapPinLocation && jsx(Box, {
+        "data-testid": "GetFeatureInfoList",
+        ref: stopWheelEventPropagationRef,
+        children: layerToUpdateList.map(function (layer) {
+          var layerId = layer.layerId,
+            title = layer.title,
+            url = layer.url;
+          var result = gfiResultMap.get(layerId);
+          if (!result) {
+            return null;
+          }
+          return jsxs(Grid, {
+            sx: {
+              margin: '4px 6px 4px 6px',
+              padding: '6px',
+              backgroundColor: 'geowebColors.cards.cardContainer',
+              border: 'solid 1px',
+              borderColor: 'geowebColors.cards.cardContainerBorder'
+            },
+            children: [jsxs(Typography, {
+              variant: "subtitle1",
+              children: [title, "\xA0", jsx(CustomIconButton, {
+                sx: {
+                  "float": 'right'
+                },
+                "aria-label": "Open layer featureinfo in another page",
+                onClick: function onClick() {
+                  window.open(url);
+                },
+                children: jsx(ExitDomain, {})
+              })]
+            }), !result.isLoading ? jsx("div", {
+              style: {
+                fontSize: '11px',
+                padding: '6px',
+                margin: '0',
+                fontFamily: 'Roboto,Helvetica,Arial,sans-serif',
+                fontWeight: '400',
+                lineHeight: '1.75',
+                letterSpacing: '0.25px'
+              },
+              "data-testid": "layer-result-ready-" + layerId,
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML: sanitizeHTML(result.data)
+            }) : jsx("div", {
+              "data-testid": "layer-result-loading-" + layerId,
+              children: jsx(CircularProgress, {
+                "data-testid": "spinner",
+                color: "inherit"
+              })
+            })]
+          }, layerId);
+        })
+      }), hasLayers && !mapPinLocation && jsx(Typography, {
+        "data-testid": "click-on-map-for-info",
+        variant: "subtitle1",
+        sx: {
+          padding: '10px'
         },
-        layerId: 'highlight-layer',
-        origin: 'OlMapViewConnect'
-      }));
-      // eslint-disable-next-line consistent-return
-      return function () {
-        dispatch(layerActions.layerDelete({
-          mapId: mapId,
-          layerId: 'highlight-layer'
-        }));
-      };
-    }
-  }, [view, warningDialogFeatures, srs, dispatch, mapId]);
-}
+        children: t('feature_info_title')
+      }), !hasLayers && jsx(Typography, {
+        "data-testid": "NoLayers",
+        variant: "subtitle1",
+        sx: {
+          padding: '10px'
+        },
+        children: t('feature_info_no_layers')
+      })]
+    })
+  });
+};
 
-var OlMapViewLayerConnect = function OlMapViewLayerConnect(layerProps) {
-  var layerId = layerProps.layerId,
-    mapId = layerProps.mapId,
-    zIndex = layerProps.zIndex,
-    debugMode = layerProps.debugMode;
-  var layer = useSelector(function (store) {
-    return layerSelectors.getLayerById(store, layerId);
+var GetFeatureInfoConnect = function GetFeatureInfoConnect(_ref) {
+  var _ref$showMapId = _ref.showMapId,
+    showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
+    mapId = _ref.mapId;
+  var dispatch = useDispatch();
+  var getFeatureInfoType = "getfeatureinfo-" + mapId;
+  var mapPinLocation = useSelector(function (store) {
+    return mapSelectors.getPinLocation(store, mapId);
   });
-  var mapDimensions = useSelector(function (store) {
-    return mapSelectors.getMapDimensions(store, mapId);
+  var toggleMapPinIsVisible = React.useCallback(function (displayMapPin) {
+    dispatch(mapActions.toggleMapPinIsVisible({
+      mapId: mapId,
+      displayMapPin: displayMapPin
+    }));
+  }, [dispatch, mapId]);
+  var enableMapPin = function enableMapPin() {
+    dispatch(mapActions.setDisableMapPin({
+      mapId: mapId,
+      disableMapPin: false
+    }));
+  };
+  var mapLayers = useSelector(function (store) {
+    return mapSelectors.getMapLayers(store, mapId);
+  });
+  var _useSetupDialog = useSetupDialog(getFeatureInfoType),
+    dialogOrder = _useSetupDialog.dialogOrder,
+    isDialogOpen = _useSetupDialog.isDialogOpen,
+    uiSource = _useSetupDialog.uiSource,
+    setDialogOrder = _useSetupDialog.setDialogOrder,
+    onCloseDialog = _useSetupDialog.onCloseDialog;
+  React.useEffect(function () {
+    toggleMapPinIsVisible(isDialogOpen);
+    if (isDialogOpen) {
+      enableMapPin();
+    }
+    /* Do not respond on changes of isMapPinVisible, to allow other components to open/close the mappin. */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDialogOpen, toggleMapPinIsVisible]);
+  return jsx(GetFeatureInfoDialog, {
+    layers: mapLayers,
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    mapId: mapId,
+    showMapId: showMapId,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: uiSource,
+    mapPinLocation: mapPinLocation
   });
-  var dispatch = useDispatch();
-  var onInitializeLayer = useCallback(function (initProps) {
-    var updatedPayLoad = makeLayerInfoPayload(initProps, mapDimensions || [], mapId);
-    dispatch(layerActions.onUpdateLayerInformation(updatedPayLoad));
-  }, [dispatch, mapDimensions, mapId]);
-  if (!layerId || !layer) {
-    return null;
-  }
-  var isInsideAcceptanceTime = getIsInsideAcceptanceTime(layer.acceptanceTimeInMinutes, mapDimensions, layer.dimensions);
-  return jsx(OpenLayersLayer, Object.assign({
-    id: "layer-" + (layer == null ? void 0 : layer.id),
-    zIndex: zIndex
-  }, layer, {
-    enabled: isInsideAcceptanceTime && layer.enabled,
-    onInitializeLayer: onInitializeLayer,
-    debugMode: debugMode
-  }), "layer-" + (layer == null ? void 0 : layer.id));
 };
 
-/* *
- * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var useGetOpenLayersView = function useGetOpenLayersView(mapId, store) {
-  var _useState = useState(),
-    view = _useState[0],
-    setView = _useState[1];
-  var _useState2 = useState(),
-    name = _useState2[0],
-    setName = _useState2[1];
-  var syncGroupState = syncGroupsSelectors.getSynchronizationGroupState(store.getState());
-  var syncGroupView = useMemo(function () {
-    var thisAreaSyncGroupId = syncGroupState.groups.allIds.find(function (id) {
-      var group = syncGroupState.groups.byId[id];
-      return group.type === syncConstants.SYNCGROUPS_TYPE_SETBBOX && group.targets.allIds.indexOf(mapId) !== -1;
-    });
-    return thisAreaSyncGroupId ? getViewObjectForSyncGroup(thisAreaSyncGroupId) : null;
-  }, [mapId, syncGroupState.groups]);
-  useEffect(function () {
-    var mapBbox = mapSelectors.getBbox(store.getState(), mapId);
-    var storedView = syncGroupView || getViewObjectForMapId(mapId);
-    if (storedView.view.getCenter() === undefined && mapBbox.left !== undefined) {
-      storedView.view.fit([mapBbox.left, mapBbox.bottom, mapBbox.right, mapBbox.top]);
-    }
-    setName(storedView.name);
-    var setViewFromStoredView = function setViewFromStoredView() {
-      setView(storedView.view);
+var GetFeatureInfoButtonConnect = function GetFeatureInfoButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source;
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  var dispatch = useDispatch();
+  var gfiType = "getfeatureinfo-" + mapId;
+  var isOpenInStore = useSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, gfiType);
+  });
+  var openGfiDialog = React.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: gfiType,
+      mapId: mapId,
+      setOpen: !isOpenInStore,
+      source: source,
+      origin: mapEnums.MapActionOrigin.map
+    }));
+  }, [mapId, dispatch, isOpenInStore, source, gfiType]);
+  React.useEffect(function () {
+    var handleKeyPress = function handleKeyPress(event) {
+      if (event.isTrusted && document.activeElement === document.body) {
+        if (event.key === 'i') {
+          openGfiDialog();
+        }
+      }
     };
-    setViewFromStoredView();
-    var eventKey = storedView.on('change', setViewFromStoredView);
+    document.addEventListener('keyup', handleKeyPress);
     return function () {
-      unByKey(eventKey);
+      document.removeEventListener('keyup', handleKeyPress);
     };
-  }, [syncGroupView, mapId, store]);
-  return {
-    view: view,
-    name: name
-  };
+  }, [openGfiDialog]);
+  return jsx(MapControlButton, {
+    title: t('feature_info_location_info'),
+    "data-testid": "open-getfeatureinfo",
+    onClick: openGfiDialog,
+    isActive: isOpenInStore,
+    children: jsx(LocationInfo, {})
+  });
 };
 
-/* *
- * 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);
+var MeasureToolButton = function MeasureToolButton(_ref) {
+  var isActive = _ref.isActive,
+    setIsActive = _ref.setIsActive;
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  React.useEffect(function () {
+    var handleKeyPress = function handleKeyPress(event) {
+      if (event.isTrusted && document.activeElement === document.body) {
+        if (event.key === 'm') {
+          setIsActive(!isActive);
+        }
       }
-    }, LOADING_INDICATOR_UPDATE_INTERVAL_MS);
+    };
+    document.addEventListener('keyup', handleKeyPress);
     return function () {
-      clearInterval(intervalId);
+      document.removeEventListener('keyup', handleKeyPress);
     };
-  }, [layerIds, mapId, setGetMapLoadingPercentage]);
+  }, [isActive, setIsActive]);
+  return jsxs(Fragment, {
+    children: [jsx(MapControlButton, {
+      title: t('map-measure-tool'),
+      "data-testid": "measure-tool-button",
+      onClick: function onClick() {
+        return setIsActive(!isActive);
+      },
+      isActive: isActive,
+      children: jsx(Measure, {})
+    }), isActive ? jsx(MapMeasure, {}) : null]
+  });
+};
+
+var MapOptionsButtonConnect = function MapOptionsButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+    _ref$getFeatureInfo = _ref.getFeatureInfo,
+    getFeatureInfo = _ref$getFeatureInfo === void 0 ? false : _ref$getFeatureInfo,
+    _ref$measureTool = _ref.measureTool,
+    measureTool = _ref$measureTool === void 0 ? false : _ref$measureTool;
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  var _React$useState = React.useState(false),
+    isMapOptionsOpen = _React$useState[0],
+    setIsMapOptionsOpen = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    isMeasureToolActive = _React$useState2[0],
+    setIsMeasureToolActive = _React$useState2[1];
+  var gfiType = "getfeatureinfo-" + mapId;
+  var isFeatureInfoActive = useSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, gfiType);
+  });
+  React.useEffect(function () {
+    if (!isMapOptionsOpen && (isMeasureToolActive || isFeatureInfoActive)) {
+      setIsMapOptionsOpen(true);
+    }
+  }, [isFeatureInfoActive, isMapOptionsOpen, isMeasureToolActive]);
+  return getFeatureInfo && measureTool ? jsxs(Stack, {
+    direction: "row",
+    spacing: 1,
+    marginBottom: 1,
+    children: [jsx(MapControlButton, {
+      title: t('map-options-button'),
+      "data-testid": "map-options-button",
+      onClick: function onClick() {
+        return setIsMapOptionsOpen(!isMapOptionsOpen);
+      },
+      shouldShowExtraOptionsIndicator: true,
+      optionsActive: isMapOptionsOpen || isMeasureToolActive || isFeatureInfoActive,
+      children: jsx(Options, {})
+    }), jsxs(Stack, {
+      direction: "row",
+      spacing: 1,
+      sx: {
+        display: isMapOptionsOpen ? 'flex' : 'none'
+      },
+      children: [getFeatureInfo && jsx(GetFeatureInfoButtonConnect, {
+        mapId: mapId
+      }), measureTool && jsx(MeasureToolButton, {
+        isActive: isMeasureToolActive,
+        setIsActive: setIsMeasureToolActive
+      })]
+    })]
+  }) : jsxs(Fragment, {
+    children: [getFeatureInfo && jsx(GetFeatureInfoButtonConnect, {
+      mapId: mapId
+    }), measureTool && jsx(MeasureToolButton, {
+      isActive: isMeasureToolActive,
+      setIsActive: setIsMeasureToolActive
+    })]
+  });
 };
 
 /**
@@ -7621,22 +8060,28 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
   }, [mapId, updateLayerInformation, layerIds]);
   useSetIntervalWhenVisible(refetchLayers, 60000);
   useMapViewLoadingIndicator(mapId, mapLayerIds);
-  var _React$useState2 = React.useState(false),
-    debugMode = _React$useState2[0],
-    setDebugMode = _React$useState2[1];
+  var _React$useState2 = React.useState({
+      debugMode: false
+    }),
+    mapMode = _React$useState2[0],
+    setMapMode = _React$useState2[1];
   React.useEffect(function () {
     var handleKeyPress = function handleKeyPress(event) {
-      if (event.isTrusted && event.key === 'd' && document.activeElement === document.body) {
-        setDebugMode(function (prev) {
-          return !prev;
-        });
+      if (event.isTrusted && document.activeElement === document.body) {
+        if (event.key === 'd') {
+          setMapMode(function (prev) {
+            return Object.assign({}, prev, {
+              debugMode: !prev.debugMode
+            });
+          });
+        }
       }
     };
     document.addEventListener('keyup', handleKeyPress);
     return function () {
       document.removeEventListener('keyup', handleKeyPress);
     };
-  }, [debugMode]);
+  }, [mapMode]);
   var homeExtent = React.useMemo(function () {
     return initialBbox && [initialBbox.left, initialBbox.bottom, initialBbox.right, initialBbox.top];
   }, [initialBbox]);
@@ -7686,7 +8131,7 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
           return jsx(OlMapViewLayerConnect, {
             layerId: layerId,
             zIndex: mapLayerIds.length - zIndex + 1000,
-            debugMode: debugMode,
+            debugMode: mapMode.debugMode,
             mapId: mapId
           }, "layer-" + layerId);
         }), overLayers.map(function (layer, zIndex) {
@@ -7741,8 +8186,10 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
           mapId: mapId
         }), (controls == null ? void 0 : controls.dimensionSelect) && jsx(MultiDimensionSelectMapButtonsConnect, {
           mapId: mapId
-        }), (controls == null ? void 0 : controls.getFeatureInfo) && jsx(GetFeatureInfoButtonConnect, {
-          mapId: mapId
+        }), jsx(MapOptionsButtonConnect, {
+          mapId: mapId,
+          getFeatureInfo: controls == null ? void 0 : controls.getFeatureInfo,
+          measureTool: controls == null ? void 0 : controls.measureToolButton
         }), controls == null ? void 0 : controls.additionalMapControls]
       }), (controls == null ? void 0 : controls.multiLegend) && jsx(LegendConnect, {
         showMapId: true,
@@ -8726,7 +9173,7 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
   });
 };
 
-var _excluded = ["id", "dockedLayerManagerSize", "title", "layers", "dimensions", "shouldAutoUpdate", "shouldAnimate", "shouldAutoFetch", "initialBbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "shouldShowDockedLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "shouldDisplayDrawControls", "displaySearchButtonInMap", "displayDataExplorerButtonOnMap", "mapControls", "children", "shouldDisablePrefetching", "tileServerSettings", "featureStyle"];
+var _excluded = ["id", "dockedLayerManagerSize", "title", "layers", "dimensions", "shouldAutoUpdate", "shouldAnimate", "shouldAutoFetch", "initialBbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "shouldShowDockedLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "shouldDisplayDrawControls", "displaySearchButtonInMap", "displayDataExplorerButtonOnMap", "mapControls", "children", "shouldDisablePrefetching", "tileServerSettings", "featureStyle", "shouldDisplayMeasureToolButton"];
 var titleStyle = function titleStyle(theme) {
   return {
     position: 'absolute',
@@ -8798,9 +9245,10 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
     tileServerSettings = _ref.tileServerSettings,
     _ref$featureStyle = _ref.featureStyle,
     featureStyle = _ref$featureStyle === void 0 ? genericOpenLayersFeatureStyle : _ref$featureStyle,
+    _ref$shouldDisplayMea = _ref.shouldDisplayMeasureToolButton,
+    shouldDisplayMeasureToolButton = _ref$shouldDisplayMea === void 0 ? false : _ref$shouldDisplayMea,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var dispatch = useDispatch();
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
   var mapId = React__default.useRef(id || webmapUtils.generateMapId()).current;
   var _ref2 = (_useSelector = useSelector(mapSelectors.getdefaultMapSettings)) != null ? _useSelector : {},
     customLayers = _ref2.layers,
@@ -8903,9 +9351,10 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
       dimensionSelect: displayDimensionSelectButtonInMap,
       getFeatureInfo: displayGetFeatureInfoButtonInMap,
       dataExplorerButton: displayDataExplorerButtonOnMap,
+      measureToolButton: shouldDisplayMeasureToolButton,
       additionalMapControls: mapControls
     };
-  }, [title, displaySearchButtonInMap, shouldShowZoomControls, displayLayerManagerAndLegendButtonInMap, multiLegend, displayDimensionSelectButtonInMap, displayGetFeatureInfoButtonInMap, displayDataExplorerButtonOnMap, mapControls]);
+  }, [title, displaySearchButtonInMap, shouldShowZoomControls, displayLayerManagerAndLegendButtonInMap, multiLegend, displayDimensionSelectButtonInMap, displayGetFeatureInfoButtonInMap, displayDataExplorerButtonOnMap, shouldDisplayMeasureToolButton, mapControls]);
   return React__default.useMemo(function () {
     renderCounter.count(ConfigurableMapConnect.name + "_" + mapId);
     return jsxs(Box, {
@@ -9292,6 +9741,7 @@ var componentsLookUp = function componentsLookUp(_ref) {
           id: id,
           "data-testid": "coreConfigurableMapConnect",
           displayGetFeatureInfoButtonInMap: true,
+          shouldDisplayMeasureToolButton: true,
           shouldDisplayDrawControls: shouldDisplayDrawControls,
           displaySearchButtonInMap: displaySearchButtonInMap,
           displayDataExplorerButtonOnMap: displayDataExplorerButtonOnMap,
@@ -10325,6 +10775,31 @@ var SelectedFeaturesDialogConnect = function SelectedFeaturesDialogConnect() {
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
 var fakeLocationList = [{
+  id: 'P001',
+  name: 'Test Airport P',
+  source: 'predefined',
+  group: 'airport'
+}, {
+  id: 'C001',
+  name: 'Finland',
+  source: 'predefined',
+  group: 'country'
+}, {
+  id: 'C002',
+  name: 'The Netherlands',
+  source: 'predefined',
+  group: 'country'
+}, {
+  id: 'C003',
+  name: 'Norway',
+  source: 'predefined',
+  group: 'country'
+}, {
+  id: 'hotel_korpilampi',
+  name: 'Hotel Korpilampi',
+  source: 'predefined',
+  group: 'special'
+}, {
   id: 'EHAM',
   name: 'Amsterdam Airport Schiphol - EHAM',
   source: 'A'
@@ -10358,6 +10833,46 @@ var fakeLocationList = [{
   source: 'G'
 }];
 var fakeLocationDetailList = [{
+  id: 'P001',
+  name: 'Test Airport P',
+  source: 'predefined',
+  group: 'airport',
+  lat: 52.3,
+  lon: 4.7,
+  geometry: null
+}, {
+  id: 'C001',
+  name: 'Finland',
+  source: 'predefined',
+  group: 'country',
+  lat: 64,
+  lon: 26,
+  bbox: [20.5486367, 59.690894673, 31.5867034, 70.0922932]
+}, {
+  id: 'C002',
+  name: 'The Netherlands',
+  source: 'predefined',
+  group: 'country',
+  lat: 52.25,
+  lon: 5.75,
+  bbox: [3.35837827202, 50.7503674993741, 7.22749859212922, 53.5550145156973]
+}, {
+  id: 'C003',
+  name: 'Norway',
+  source: 'predefined',
+  group: 'country',
+  lat: 62,
+  lon: 10,
+  bbox: [4.504130421063497, 57.959537164107346, 31.168391344451287, 71.1854764998959]
+}, {
+  id: 'hotel_korpilampi',
+  name: 'Hotel Korpilampi',
+  source: 'predefined',
+  group: 'special',
+  lat: 60.3248395915,
+  lon: 24.7299337387,
+  bbox: [24.7259155527, 60.3235458164, 24.7339503079, 60.3268439875]
+}, {
   id: 'EHAM',
   name: 'Amsterdam Airport Schiphol - EHAM',
   source: 'A',