@opengeoweb/core 10.1.0 → 10.2.1-spike-ol.0

package/index.esm.js

@@ -1,23 +1,29 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useCallback, useRef, useMemo } from 'react';
-import { Grid2, Box, MenuItem, Typography, useTheme, Popper, Fade, Tooltip, styled, LinearProgress, FormControl, InputLabel, Paper, List, ListItemButton, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, Button, circularProgressClasses, ListItemIcon, Checkbox, Switch, Select } from '@mui/material';
+import React__default, { useState, useCallback, useEffect, useContext, useMemo } from 'react';
+import { Grid2, Box, MenuItem, Typography, useTheme, Popper, Fade, Tooltip, styled, LinearProgress, FormControl, InputLabel, Paper, List, ListItemButton, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, Button, Autocomplete, ListItemIcon, Checkbox, Switch, Select } from '@mui/material';
 import { SHARED_NAMESPACE, sharedTranslations, CustomIconButton, CustomTooltip, TooltipSelect, AlertIcon, sliderHeaderStyle, CustomSlider, ToggleMenu, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, PROJECTION, calculateStartSize, useWheelStopPropagation, ToolContainerDraggable, useDebounce, dateUtils, ErrorBoundary } from '@opengeoweb/shared';
 import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, ColumnCollapsed, ColumnCollapse, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, Search, Exclamation, MyLocation, Close, ExitDomain, Info, ThemeWrapper, lightTheme, FlagBritain, FlagNetherlands, FlagFinland, FlagNorway } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { initReactI18next, useTranslation, I18nextProvider } from 'react-i18next';
-import { TIMESLIDER_NAMESPACE, timesliderTranslations, defaultTimeSpan, TIME_SLIDER_LEGEND_HEIGHT, SpeedButton, TimeStepButton, AnimationLengthButton, AnimationLength, TimeSpanButton, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, OptionsMenuButton, PlayButton, defaultTimeStep, BackwardForwardStepButton, AutoUpdateButton, NowButton, handleSetNowEvent, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSlider, onsetNewDateDebounced, getFilteredTime, ControlButtons, OptionsMenu, TimeSliderClock } from '@opengeoweb/timeslider';
-import { WEBMAP_REACT_NAMESPACE, webmapReactTranslations, WEBMAP_NAMESPACE, webmapTranslations, LayerInfoButton, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, registerDrawFunction, ZoomControls, LegendDialog, LegendButton, MapView, MapViewLayer, MapControls, emptyGeoJSON, publicLayers } from '@opengeoweb/webmap-react';
+import { TIMESLIDER_NAMESPACE, timesliderTranslations, defaultTimeSpan, TIME_SLIDER_LEGEND_HEIGHT, SpeedButton, TimeStepButton, AnimationLengthButton, AnimationLength, TimeSpanButton, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, OptionsMenuButton, PlayButton, defaultTimeStep, BackwardForwardStepButton, AutoUpdateButton, NowButton, handleSetNowEvent, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, onsetNewDateDebounced, defaultSecondsPerPx, moveSelectedTimePx, TimeSlider, getFilteredTime, ControlButtons, OptionsMenu, TimeSliderClock } from '@opengeoweb/timeslider';
+import { WEBMAP_REACT_NAMESPACE, webmapReactTranslations, WEBMAP_NAMESPACE, webmapTranslations, LayerInfoButton, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, MapContext, emptyGeoJSON, registerDrawFunction, MapFeatureClass, setMapCenter, ZoomControls, LegendDialog, LegendButton, MapView, MapViewLayer, MapControls, GeoJSONLayer, OpenLayersMapDraw, getIsInsideAcceptanceTime, MapViewLayerToOpenLayer, useSetIntervalWhenVisible, openLayersGetMapImageStore, TimeContext, OpenLayersMapView, WMSLayer, genericOpenlayersFeatureStyle, OpenLayersGetFeatureInfo, OpenLayersZoomControl, getLayerUpdateInfo, publicLayers, isOpenLayersEnabled } from '@opengeoweb/webmap-react';
 import { useDispatch, useSelector, connect, useStore, Provider } from 'react-redux';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
-import { layerTypes, layerUtils, mapSelectors, layerActions, layerSelectors, serviceSelectors, serviceActions, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, getUserAddedServices, uiActions, genericSelectors, genericActions, drawtoolSelectors, syncConstants, loadingIndicatorActions, syncGroupsSelectors, defaultLayers, getSingularDrawtoolDrawLayerId, syncGroupsSelector, syncGroupsActions, routerUtils } from '@opengeoweb/store';
+import { layerTypes, layerUtils, mapSelectors, layerActions, layerSelectors, serviceSelectors, serviceActions, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, getUserAddedServices, uiActions, genericSelectors, genericActions, drawingToolSelectors, syncConstants, loadingIndicatorActions, syncGroupsSelectors, getViewObjectForSyncGroup, getViewObjectForMapId, defaultLayers, getSingularDrawtoolDrawLayerId, syncGroupsSelector, syncGroupsActions, routerUtils } from '@opengeoweb/store';
 import _, { isArray, isEqual, debounce, range } from 'lodash';
-import { webmapUtils, queryWMSServiceInfo, queryWMSLayers, queryWMSLayersTree, invalidateWMSGetCapabilities, LayerType, getWMSServiceId, getWMSGetFeatureInfoRequestURL, handleDateUtilsISOString, wmServiceListener, EVENT_GETCAPABILITIES_START, EVENT_GETCAPABILITIES_READY, WMLayer } from '@opengeoweb/webmap';
+import { webmapUtils, queryWMSServiceInfo, queryWMSLayers, queryWMSLayersTree, invalidateWMSGetCapabilities, LayerType, getWMSServiceId, generateLayerId, getWMJSMapById, getWMSGetFeatureInfoRequestURL, getMapDimURL, handleDateUtilsISOString, wmServiceListener, EVENT_GETCAPABILITIES_START, EVENT_GETCAPABILITIES_READY, WMJSDimension, getWMLayerById, WMLayer } from '@opengeoweb/webmap';
 import { Box as Box$1, styled as styled$1 } from '@mui/system';
 import { LayerSelectButtonConnect, LayerSelectConnect } from '@opengeoweb/layer-select';
+import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { getConfig } from '@opengeoweb/authentication';
+import { handleResponse } from '@opengeoweb/api';
 import axios from 'axios';
+import { ImageWMS } from 'ol/source';
 import DOMPurify from 'dompurify';
+import { unByKey } from 'ol/Observable';
+import { toLonLat } from 'ol/proj';
 import { snackbarTypes, snackbarActions, SnackbarWrapperConnect } from '@opengeoweb/snackbar';
 import { useNavigate } from 'react-router-dom';
 import * as Sentry from '@sentry/react';
@@ -65,10 +71,13 @@ var en = {
 	"wms-loader-error-http": "Use https or allow Mixed Content in your browser to use this WMS service",
 	"wms-loader-error-valid-service": "Please enter a valid WMS service",
 	"wms-loader-error-valid-url": "Please enter a valid URL",
-	"search-title": "Search",
-	"search-title-aria": "Map search",
-	"search-find-location": "Find my location",
-	"search-error": "Geolocation error: {{error}}",
+	"search-title": "Find location",
+	"search-title-aria": "Find location on the map",
+	"search-my-location": "Find my location",
+	"search-title-long": "Find location, area, postal code, GPS, ...",
+	"search-no-results": "No results",
+	"my-location": "My location",
+	"search-clear": "Clear",
 	"syncgroups-title": "Sync",
 	"syncgroups-zoom": "ZoomPane",
 	"syncgroups-timeslider": "Timeslider",
@@ -140,8 +149,11 @@ var fi = {
 	"wms-loader-error-valid-url": "Lisää toimiva URL",
 	"search-title": "Etsi",
 	"search-title-aria": "Karttahaku",
-	"search-find-location": "Etsi sijaintini",
-	"search-error": "Maantieteellisen sijainnin virhe: {{error}}",
+	"search-my-location": "Etsi sijaintini",
+	"search-title-long": "Find location, area, postal code, GPS, ...",
+	"search-no-results": "No results",
+	"my-location": "My location",
+	"search-clear": "Clear",
 	"syncgroups-title": "Sync",
 	"syncgroups-zoom": "ZoomPane",
 	"syncgroups-timeslider": "TimeSlider",
@@ -213,8 +225,11 @@ var no = {
 	"wms-loader-error-valid-url": "Vennligst skriv inn en gyldig URL",
 	"search-title": "Søk",
 	"search-title-aria": "Kart søk",
-	"search-find-location": "Finn min lokasjon",
-	"search-error": "Geolocation error: {{error}}",
+	"search-my-location": "Finn min lokasjon",
+	"search-title-long": "Find location, area, postal code, GPS, ...",
+	"search-no-results": "No results",
+	"my-location": "Min lokasjon",
+	"search-clear": "Clear",
 	"syncgroups-title": "Synkroniser",
 	"syncgroups-zoom": "Zoom/Paner",
 	"syncgroups-timeslider": "Timeslider",
@@ -286,8 +301,11 @@ var nl = {
 	"wms-loader-error-valid-url": "Voer een geldige URL in",
 	"search-title": "Zoeken",
 	"search-title-aria": "Zoeken op de kaart",
-	"search-find-location": "Vind mijn locatie",
-	"search-error": "Geolocatie fout: {{error}}",
+	"search-my-location": "Vind mijn locatie",
+	"search-title-long": "Vind locatie, gebied, postcode, GPS, ...",
+	"search-no-results": "Geen resultaten",
+	"my-location": "Mijn locatie",
+	"search-clear": "Wissen",
 	"syncgroups-title": "Synchroniseren",
 	"syncgroups-zoom": "Zoomvenster",
 	"syncgroups-timeslider": "Timeslider",
@@ -5627,230 +5645,512 @@ var SearchControlButtonConnect = function SearchControlButtonConnect(_ref) {
   });
 };
 
-var MY_LOCATION = 'MyLocation';
+var MY_LOCATION = 'My location';
 var locationOptions = {
   enableHighAccuracy: false,
-  timeout: 5000,
+  timeout: 10000,
   maximumAge: 0
 };
-var circleDrawFunction = function circleDrawFunction(args, fillColor, radius) {
-  if (fillColor === void 0) {
-    fillColor = '#88F';
-  }
-  if (radius === void 0) {
-    radius = 12;
-  }
-  var ctx = args.context,
-    coord = args.coord;
-  ctx.strokeStyle = '#000';
-  ctx.fillStyle = fillColor || '#88F';
-  ctx.lineWidth = 1;
-  ctx.beginPath();
-  ctx.arc(coord.x, coord.y, radius || 10, 0, 2 * Math.PI);
-  ctx.fill();
-  ctx.stroke();
-  ctx.fillStyle = '#000';
-  ctx.beginPath();
-  ctx.arc(coord.x, coord.y, 2, 0, 2 * Math.PI);
-  ctx.fill();
-};
 var MyMapLocation = function MyMapLocation(_ref) {
-  var _sx;
-  var mapId = _ref.mapId,
-    isLoading = _ref.isLoading,
-    hasFailed = _ref.hasFailed,
-    setIsLoading = _ref.setIsLoading,
-    setHasFailed = _ref.setHasFailed;
+  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 dispatch = useDispatch();
-  var layersBelongsToCurrentMapId = useSelector(function (store) {
-    return layerSelectors.getLayersByMapId(store, mapId || '');
-  });
-  var layerLocation = layersBelongsToCurrentMapId.find(function (layer) {
-    var _layer$geojson$featur;
-    if (layer.geojson && layer.geojson.features[0] && layer.geojson.features[0].properties && (_layer$geojson$featur = layer.geojson.features[0].properties) != null && _layer$geojson$featur.name) {
-      if (layer.geojson.features[0].properties.name === MY_LOCATION) {
-        return layer;
-      }
-    }
-    return undefined;
-  });
-  var layerLocationId = (layerLocation == null ? void 0 : layerLocation.id) || '';
-  var circleDrawFunctionId = useRef(registerDrawFunction(circleDrawFunction));
   var handleLocationClick = function handleLocationClick() {
-    setIsLoading(true);
-    if (mapId && layerLocationId !== '') {
-      dispatch(layerActions.layerDelete({
-        mapId: mapId,
-        layerId: layerLocationId
-      }));
-      setIsLoading(false);
-    } else if (navigator.geolocation && mapId && layerLocationId === '' && circleDrawFunctionId) {
+    if (mapId && isSelected) {
+      onUpdateMyLocation(undefined);
+    } else if (navigator.geolocation && mapId && !isSelected) {
+      setIsLoading(true);
+      setHasFailed(false);
       navigator.geolocation.getCurrentPosition(function (success) {
         setIsLoading(false);
-        setHasFailed(false);
         var _success$coords = success.coords,
           latitude = _success$coords.latitude,
           longitude = _success$coords.longitude;
-        var geojson = {
-          type: 'FeatureCollection',
-          features: [{
-            type: 'Feature',
-            properties: {
-              name: MY_LOCATION,
-              drawFunctionId: circleDrawFunctionId.current
-            },
-            geometry: {
-              type: 'Point',
-              coordinates: [longitude, latitude]
-            }
-          }]
+        var location = {
+          lat: latitude,
+          lon: longitude,
+          name: MY_LOCATION,
+          source: 'MyMapLocation',
+          id: MY_LOCATION
         };
-        var layerId = webmapUtils.generateLayerId();
-        dispatch(layerActions.addLayer({
-          mapId: mapId,
-          layer: {
-            geojson: geojson,
-            layerType: LayerType.featureLayer
-          },
-          layerId: layerId,
-          origin: MY_LOCATION
-        }));
-        var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-        if (!wmjsMap) {
-          return;
-        }
-        wmjsMap.calculateBoundingBoxAndZoom(latitude, longitude);
-      }, function (error) {
+        onUpdateMyLocation(location);
+      }, function () {
         setIsLoading(false);
         setHasFailed(true);
-        console.warn(t('search-error', {
-          error: error.message
-        }));
+        onUpdateMyLocation(undefined);
       }, locationOptions);
     }
   };
   var chooseIcon = function chooseIcon() {
     return hasFailed ? jsx(Exclamation, {
       style: {
-        color: 'red'
+        color: theme.palette.geowebColors.functional.error
       },
       "aria-label": "location error"
     }) : jsx(MyLocation, {
       "aria-label": "location default"
     });
   };
-  return jsx("div", {
-    children: isLoading ? jsxs(Fragment, {
-      children: [jsx(CircularProgress, {
-        value: 100,
-        variant: "determinate",
-        sx: {
-          height: '100%',
-          width: '100%',
-          color: function color(theme) {
-            return theme.palette.mode === 'light' ? '#1a90ff' : '#bad4ff';
-          },
-          padding: '8px'
-        },
-        thickness: 6,
-        "aria-label": "location loading"
-      }), jsx(CircularProgress, {
-        variant: "indeterminate",
-        disableShrink: true,
-        sx: (_sx = {
-          height: '100%',
-          width: '100%',
-          color: function color(theme) {
-            return theme.palette.mode === 'light' ? '#bad4ff' : '#45556F';
-          },
-          animationDuration: '1000ms',
-          position: 'absolute',
-          left: 0
-        }, _sx["& ." + circularProgressClasses.circle] = {
-          strokeLinecap: 'round'
-        }, _sx.padding = '8px', _sx),
-        thickness: 6
-      })]
+  return jsx(Box, {
+    sx: {
+      height: 40,
+      padding: 1
+    },
+    children: isLoading ? jsx(CircularProgress, {
+      size: 24,
+      "aria-label": "Location loading",
+      color: "secondary"
     }) : jsx(CustomIconButton, {
-      title: t('search-find-location'),
-      "aria-label": MY_LOCATION,
+      tooltipTitle: t('search-my-location'),
+      "aria-label": t('search-my-location'),
       onClick: handleLocationClick,
-      isSelected: layerLocationId !== '',
-      size: "large",
+      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.
+ * 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 config = getConfig();
+var locationBaseUrl = config.GW_LOCATION_BASE_URL || '';
+var getLocationList = function getLocationList(search) {
+  return fetch(locationBaseUrl + "/locations?search=" + search).then(handleResponse);
+};
+var getLocationDetail = function getLocationDetail(id, source) {
+  return fetch(locationBaseUrl + "/locationdetail?id=" + id + "&source=" + source).then(handleResponse);
+};
+
+/* *
+ * 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 useLocationList = function useLocationList(search) {
+  return useQuery({
+    queryKey: ['location-list', search],
+    queryFn: function queryFn() {
+      return getLocationList(search);
+    }
+  });
+};
+var useLocationDetail = function useLocationDetail(id, source) {
+  if (id === void 0) {
+    id = '';
+  }
+  if (source === void 0) {
+    source = '';
+  }
+  return useQuery({
+    queryKey: ['location-detail', {
+      id: id,
+      source: source
+    }],
+    queryFn: function queryFn() {
+      return getLocationDetail(id, source);
+    },
+    enabled: !!id
+  });
+};
+
 var SearchDialog = function SearchDialog(_ref) {
   var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
     _ref$mapId = _ref.mapId,
-    mapId = _ref$mapId === void 0 ? '' : _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(false),
-    isLoading = _useState[0],
-    setIsLoading = _useState[1];
-  var _useState2 = useState(false),
-    hasFailed = _useState2[0],
-    setHasFailed = _useState2[1];
-  return isOpen && mapId ? jsxs(Box$1, {
+  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;
+  useEffect(function () {
+    if (isFetchingDetail) {
+      return;
+    }
+    onSelectLocation(selectedValue ? locationDetail : undefined);
+  }, [locationDetail, onSelectLocation, selectedValue, isFetchingDetail]);
+  return isOpen && mapId ? jsxs(Box, {
     sx: {
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',
       position: 'absolute',
       pointerEvents: 'all',
-      zIndex: 999,
+      zIndex: 99,
       left: 50,
-      top: 15,
-      borderBottom: '1px solid grey',
-      backgroundColor: function backgroundColor(theme) {
-        return theme.palette.background.paper;
-      }
+      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,
-      isLoading: isLoading,
-      hasFailed: hasFailed,
-      setIsLoading: setIsLoading,
-      setHasFailed: setHasFailed
-    }), jsx(TextField, {
-      id: "dummy-search-field",
-      label: t('search-title'),
-      variant: "filled",
-      slotProps: {
-        input: {
-          disableUnderline: true,
-          endAdornment: jsx(InputAdornment, {
-            position: "end",
-            children: jsx(CustomIconButton, {
-              tooltipTitle: t('actions-close'),
-              edge: "end",
-              onClick: onClose,
-              size: "large",
+      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;
+      },
+      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);
+            }
+          },
+          InputProps: Object.assign({}, params.InputProps, {
+            endAdornment: jsx(CustomIconButton, {
+              tooltipTitle: t('search-clear'),
+              onClick: function onClick() {
+                setInputValue('');
+                setSelectedValue(null);
+              },
+              sx: {
+                marginRight: 1
+              },
               children: jsx(Close, {})
             })
           })
-        }
+        }));
       }
     })]
   }) : null;
 };
 
-var SearchControlConnect = function SearchControlConnect(_ref) {
-  var mapId = _ref.mapId;
+/* *
+ * 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 myLocationDrawFunction = function myLocationDrawFunction(args) {
+  var ctx = args.context,
+    coord = args.coord;
+  // Draw outer circle
+  ctx.strokeStyle = '#fff';
+  ctx.fillStyle = '#fff';
+  ctx.shadowColor = '#00000080';
+  ctx.shadowBlur = 4;
+  ctx.beginPath();
+  ctx.arc(coord.x, coord.y, 14, 0, 2 * Math.PI);
+  ctx.fill();
+  ctx.shadowBlur = 0;
+  // Draw inner circle
+  ctx.fillStyle = '#186dff';
+  ctx.beginPath();
+  ctx.arc(coord.x, coord.y, 10, 0, 2 * Math.PI);
+  ctx.fill();
+};
+var selectedLocationDrawFunction = function selectedLocationDrawFunction(args) {
+  var ctx = args.context,
+    coord = args.coord;
+  ctx.strokeStyle = '#051039';
+  ctx.fillStyle = '#051039';
+  ctx.beginPath();
+  var topRadius = 7;
+  var topHeight = 2 * topRadius;
+  ctx.arc(coord.x, coord.y - topHeight, topRadius, Math.PI, Math.PI * 2);
+  ctx.bezierCurveTo(coord.x + topRadius, coord.y - topHeight, coord.x + topRadius / 1.6, coord.y - topRadius, coord.x, coord.y);
+  ctx.bezierCurveTo(coord.x, coord.y, coord.x - topRadius / 1.6, coord.y - topRadius, coord.x - topRadius, coord.y - topHeight);
+  ctx.stroke();
+  ctx.fill();
+  /* Fill center circle */
+  ctx.fillStyle = '#FFF';
+  ctx.beginPath();
+  ctx.arc(coord.x, coord.y - topHeight, topRadius / 2.5, Math.PI * 2, 0);
+  ctx.fill();
+};
+var geometryStyling = {
+  fill: '#FF7800',
+  'fill-opacity': 0.25,
+  stroke: '#FF7800',
+  'stroke-opacity': 1,
+  'stroke-width': 4
+};
+var makeGeoJSONFeatureFromLocation = function makeGeoJSONFeatureFromLocation(location, drawFunctionId, hoverDrawFunctionId, mapFeatureClass) {
+  var _location$geometry;
+  var collection = {
+    type: 'FeatureCollection',
+    features: []
+  };
+  var geometry = Object.assign({}, location.geometry, {
+    properties: Object.assign({}, geometryStyling, {
+      name: location.name,
+      hoverDrawFunctionId: hoverDrawFunctionId
+    })
+  });
+  var marker = {
+    type: 'Feature',
+    properties: {
+      name: location.name,
+      drawFunctionId: drawFunctionId,
+      hoverDrawFunctionId: hoverDrawFunctionId,
+      mapFeatureClass: mapFeatureClass
+    },
+    geometry: {
+      type: 'Point',
+      coordinates: [location.lon, location.lat]
+    }
+  };
+  switch ((_location$geometry = location.geometry) == null ? void 0 : _location$geometry.geometry.type) {
+    case 'Point':
+    case 'MultiLineString':
+    case undefined:
+      collection.features.push(marker);
+      break;
+    default:
+      collection.features.push(geometry);
+  }
+  return collection;
+};
+var fitText = function fitText(ctx, text, x, y, lineheight) {
+  var lines = text.split('\n');
+  for (var i = 0; i < lines.length; i += 1) {
+    ctx.fillText(lines[i], x, y + i * lineheight);
+  }
+};
+var roundRect = function roundRect(ctx, w, h, x, y, radius) {
+  if (radius === void 0) {
+    radius = 2;
+  }
+  var r = x + w;
+  var b = y + h;
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(r - radius, y);
+  ctx.quadraticCurveTo(r, y, r, y + radius);
+  ctx.lineTo(r, y + h - radius);
+  ctx.quadraticCurveTo(r, b, r - radius, b);
+  ctx.lineTo(x + radius, b);
+  ctx.quadraticCurveTo(x, b, x, b - radius);
+  ctx.lineTo(x, y + radius);
+  ctx.quadraticCurveTo(x, y, x + radius, y);
+  ctx.stroke();
+  ctx.fill();
+};
+var hoverDrawFunction = function hoverDrawFunction(args) {
+  var ctx = args.context,
+    coord = args.coord,
+    feature = args.feature;
+  var fontSize = 16;
+  var padding = 20;
+  // eslint-disable-next-line no-param-reassign
+  ctx.font = fontSize + "px Roboto";
+  var x = coord.x,
+    y = coord.y;
+  ctx.strokeStyle = '#000';
+  ctx.fillStyle = '#000';
+  roundRect(ctx, ctx.measureText(feature.properties.name).width + padding, fontSize + padding, x - padding * 0.5 - ctx.measureText(feature.properties.name).width * 0.5, y + padding);
+  // eslint-disable-next-line no-param-reassign
+  ctx.fillStyle = '#FFF';
+  // eslint-disable-next-line no-param-reassign
+  ctx.textAlign = 'left';
+  if (feature && feature.properties) {
+    fitText(ctx, feature.properties.name, x - ctx.measureText(feature.properties.name).width * 0.5, y + padding * 2, fontSize);
+  }
+};
+var useDrawOnMap = function useDrawOnMap(mapId, drawFunction) {
+  var dispatch = useDispatch();
+  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: 'SearchDialogConnect'
+      }));
+    }
+  }, [dispatch, layerId, mapId, shouldAddLayer]);
+  var drawFunctionId = React__default.useRef(registerDrawFunction(drawFunction)).current;
+  var hoverDrawFunctionId = React__default.useRef(registerDrawFunction(hoverDrawFunction)).current;
+  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, drawFunctionId, hoverDrawFunctionId, mapFeatureClass) : emptyGeoJSON;
+    dispatch(layerActions.updateFeature({
+      layerId: layerId,
+      geojson: geojson
+    }));
+  }, [dispatch, drawFunctionId, hoverDrawFunctionId, layerId]);
+  var zoomToFeature = React__default.useCallback(function (location) {
+    var webMap = getWMJSMapById(mapId);
+    if (webMap) {
+      webMap.calculateBoundingBoxAndZoom(location.lat, location.lon);
+    } else if (map) {
+      setMapCenter(map, location.lon, location.lat);
+    }
+  }, [mapId, map]);
+  var onUpdateLocation = React__default.useCallback(function (location) {
+    updateGeoJSON(location);
+    if (location) {
+      zoomToFeature(location);
+    }
+  }, [updateGeoJSON, zoomToFeature]);
+  return [onUpdateLocation];
+};
+
+var SearchDialogConnect = function SearchDialogConnect(_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,
-    onCloseDialog = _useSetupDialog.onCloseDialog;
+    isDialogOpen = _useSetupDialog.isDialogOpen;
+  var _useDrawOnMap = useDrawOnMap(mapId, selectedLocationDrawFunction),
+    updateMapPin = _useDrawOnMap[0];
+  var _useDrawOnMap2 = useDrawOnMap(mapId, myLocationDrawFunction),
+    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;
+      }
+    }
+    return false;
+  });
+  var isMyLocationSelected = !!myLocationLayer;
   return jsx(SearchDialog, {
     isOpen: isDialogOpen,
-    onClose: onCloseDialog,
-    mapId: mapId
+    mapId: mapId,
+    onSelectLocation: updateMapPin,
+    onUpdateMyLocation: updateMyLocation,
+    isMyLocationSelected: isMyLocationSelected
   });
 };
 
@@ -6002,30 +6302,50 @@ var getTitle = function getTitle(layerId) {
   var wmjsLayer = webmapUtils.getWMLayerById(layerId);
   return wmjsLayer ? wmjsLayer.title || wmjsLayer.name : layerId;
 };
+var getFeatureInfoUrl = function getFeatureInfoUrl(layer, wmjsMap, 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 (wmjsMap) {
+    // WebMapJS version
+    return getWMSGetFeatureInfoRequestURL(wmjsLayer, wmjsMap.getMapPin().getXY().x, wmjsMap.getMapPin().getXY().y, 'text/html');
+  }
+  if (mapPinLocation) {
+    // OpenLayers WMS version
+    var source = new ImageWMS({
+      url: wmjsLayer.getmapURL,
+      params: {
+        LAYERS: wmjsLayer.getLayerName()
+      }
+    });
+    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(layers, mapId) {
+var getLayersToUpdate = function getLayersToUpdate(mapPinLocation, layers, mapId) {
   var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-  if (!wmjsMap || !layers || layers.length === 0) {
+  if (!layers || layers.length === 0 || !wmjsMap && !mapPinLocation) {
     return [];
   }
   return layers.filter(function (layer) {
     return layer && layer.enabled && !!webmapUtils.getWMLayerById(layer.id);
   }).map(function (layer) {
-    /*
-      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();
+    var url = getFeatureInfoUrl(layer, wmjsMap, mapPinLocation);
     return {
       layerId: layer.id,
-      url: getWMSGetFeatureInfoRequestURL(wmjsLayer, wmjsMap.getMapPin().getXY().x, wmjsMap.getMapPin().getXY().y, 'text/html'),
+      url: url,
       title: getTitle(layer.id)
     };
   });
@@ -6093,7 +6413,7 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
     triggerRerender("" + layerId + isLoading);
   };
   /* Build a layerlist array with a set of arguments per layer to do the query for */
-  var layerToUpdateList = isOpen ? getLayersToUpdate(layers, mapId) : [];
+  var layerToUpdateList = isOpen && mapPinLocation ? getLayersToUpdate(mapPinLocation, layers, mapId) : [];
   /*
     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.
@@ -6336,7 +6656,7 @@ var GetFeatureInfoButtonConnect = function GetFeatureInfoButtonConnect(_ref) {
   });
 };
 
-var _excluded$1 = ["mapId", "children", "controls"];
+var _excluded$1 = ["mapId", "children", "controls", "initialBbox"];
 var ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION';
 /**
  * Connected component used to display the map and selected layers.
@@ -6358,8 +6678,9 @@ var MapViewConnect = function MapViewConnect(_ref) {
     controls = _ref$controls === void 0 ? {
       mapControlsPositionTop: 0,
       zoomControls: true
-    } : _ref$controls,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    } : _ref$controls;
+    _ref.initialBbox;
+    var props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var mapRef = React.useRef(null);
   var store = useStore();
   var mapDimensions = useSelector(function (store) {
@@ -6477,26 +6798,26 @@ var MapViewConnect = function MapViewConnect(_ref) {
     var geojson = _ref2.geojson,
       reason = _ref2.reason,
       layerId = _ref2.layerId;
-    var activeDrawToolId = drawtoolSelectors.getActiveDrawToolId(store.getState());
-    var activeDrawMode = drawtoolSelectors.getActiveDrawMode(store.getState(), activeDrawToolId);
+    var activeDrawToolId = drawingToolSelectors.getActiveDrawToolId(store.getState());
+    var activeDrawMode = drawingToolSelectors.getActiveDrawMode(store.getState(), activeDrawToolId);
     dispatch(layerActions.updateFeature({
       geojson: geojson,
       reason: reason,
       layerId: layerId,
-      shouldAllowMultipleShapes: drawtoolSelectors.getShouldAllowMultipleShapes(store.getState(), activeDrawToolId),
-      geoJSONIntersectionLayerId: drawtoolSelectors.getGeoJSONIntersectionLayerId(store.getState(), activeDrawToolId),
-      geoJSONIntersectionBoundsLayerId: drawtoolSelectors.getGeoJSONIntersectionBoundsLayerId(store.getState(), activeDrawToolId),
+      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]);
   var exitFeatureDrawMode = React.useCallback(function (_ref3) {
     var reason = _ref3.reason,
       layerId = _ref3.layerId;
-    var activeDrawToolId = drawtoolSelectors.getActiveDrawToolId(store.getState());
+    var activeDrawToolId = drawingToolSelectors.getActiveDrawToolId(store.getState());
     dispatch(layerActions.exitFeatureDrawMode({
       reason: reason,
       layerId: layerId,
-      shouldAllowMultipleShapes: drawtoolSelectors.getShouldAllowMultipleShapes(store.getState(), activeDrawToolId)
+      shouldAllowMultipleShapes: drawingToolSelectors.getShouldAllowMultipleShapes(store.getState(), activeDrawToolId)
     }));
   }, [dispatch, store]);
   var isActiveWindowId = useSelector(function (store) {
@@ -6596,174 +6917,769 @@ var MapViewConnect = function MapViewConnect(_ref) {
             value: handleDateUtilsISOString(mapDimensionPayload.dimension.currentValue)
           });
         } else {
-          mapChangeDimension(mapDimensionPayload);
+          mapChangeDimension(mapDimensionPayload);
+        }
+      },
+      onUpdateLayerInformation: updateLayerInformation,
+      onMapPinChangeLocation: mapPinChangeLocation,
+      onMapZoomEnd: function onMapZoomEnd(a) {
+        genericSetBbox({
+          bbox: a.bbox,
+          srs: a.srs,
+          sourceId: mapId,
+          origin: mapEnums.MapActionOrigin.map,
+          mapId: mapId
+        });
+      },
+      onWMJSMount: function onWMJSMount(mapId) {
+        var wmjsMap = webmapUtils.getWMJSMapById(mapId);
+        if (!wmjsMap) {
+          return;
+        }
+        wmjsMap.getListener().addEventListener('onloadstart', onGetMapLoadStart);
+        wmjsMap.getListener().addEventListener('onloadready', onGetMapLoadReady);
+        wmServiceListener.addEventListener(EVENT_GETCAPABILITIES_START, onGetCapabilitiesLoadStart, true);
+        wmServiceListener.addEventListener(EVENT_GETCAPABILITIES_READY, onGetCapabilitiesLoadReady, true);
+      },
+      onWMJSUnMount: function onWMJSUnMount(mapId) {
+        unRegister(mapId);
+        wmServiceListener.removeEventListener(EVENT_GETCAPABILITIES_START, onGetCapabilitiesLoadStart);
+        wmServiceListener.removeEventListener(EVENT_GETCAPABILITIES_READY, onGetCapabilitiesLoadReady);
+      },
+      children: [baseLayers.map(function (layer) {
+        return jsx(MapViewLayer, Object.assign({
+          id: "baselayer-" + layer.id,
+          onLayerError: function onLayerError(_, error) {
+            layerError({
+              layerId: layer.id,
+              error: Error("" + error)
+            });
+          }
+        }, layer), layer.id);
+      }), layers.map(function (layer) {
+        return jsx(MapViewLayer, Object.assign({
+          id: "layer-" + layer.id,
+          onLayerError: function onLayerError(_, error) {
+            layerError({
+              layerId: layer.id,
+              error: Error("" + error)
+            });
+          }
+        }, layer), layer.id);
+      }), (_linkedFeatures$conca = linkedFeatures.concat(linkedFormFeatures)) == null ? void 0 : _linkedFeatures$conca.map(function (feature) {
+        return jsx(MapViewLayer, {
+          id: feature.id,
+          geojson: feature == null ? void 0 : feature.geoJSON,
+          onHoverFeature: function onHoverFeature(hoverInfo) {
+            if (hoverInfo === undefined && hoverId !== undefined) {
+              debouncedSetHoverFeature();
+            } else if (hoverInfo != null && hoverInfo.feature && feature.originalId !== hoverId) {
+              debouncedSetHoverFeature(feature.originalId);
+            }
+          },
+          onClickFeature: function onClickFeature(event) {
+            var _event$feature$proper;
+            var isClickOutsideFeature = !event || !event.feature;
+            if (isClickOutsideFeature) {
+              if (mapPinLocation) {
+                handleFeatureSelect(linkedPanelId, undefined);
+              }
+              return;
+            }
+            // Handle clicks on station
+            var clickedFeatureName = (_event$feature$proper = event.feature.properties) == null ? void 0 : _event$feature$proper.name;
+            var features = linkedFeatures[0].geoJSON.features;
+            var clickedFeatureIndex = features.findIndex(function (feature) {
+              var _feature$properties;
+              return ((_feature$properties = feature.properties) == null ? void 0 : _feature$properties.name) === clickedFeatureName;
+            });
+            if (disableMapPin === false) {
+              var _selectedFeature$id;
+              var selectedFeature = features[clickedFeatureIndex];
+              handleFeatureSelect(linkedPanelId, (_selectedFeature$id = selectedFeature.id) == null ? void 0 : _selectedFeature$id.toString());
+            }
+          }
+        }, feature.id);
+      }), featureLayers.map(function (layer) {
+        return jsx(MapViewLayer, Object.assign({
+          id: "featurelayer-" + layer.id,
+          onLayerError: function onLayerError(_, error) {
+            layerError({
+              layerId: layer.id,
+              error: Error("" + error)
+            });
+          },
+          onClickFeature: function onClickFeature(event) {
+            var isClickOutsideFeature = !event;
+            if (isClickOutsideFeature && !layer.isInEditMode) {
+              setSelectedFeature({
+                layerId: layer.id,
+                selectedFeatureIndex: undefined
+              });
+              return;
+            }
+            if ((event == null ? void 0 : event.isInEditMode) === false) {
+              setSelectedFeature({
+                layerId: layer.id,
+                selectedFeatureIndex: event.featureIndex
+              });
+            }
+          },
+          updateGeojson: function updateGeojson(geojson, reason) {
+            updateFeature({
+              geojson: geojson,
+              layerId: layer.id,
+              reason: reason
+            });
+          },
+          exitDrawModeCallback: function exitDrawModeCallback(reason) {
+            return exitFeatureDrawMode({
+              reason: reason,
+              layerId: layer.id
+            });
+          }
+        }, layer), layer.id);
+      }), overLayers.map(function (layer) {
+        return jsx(MapViewLayer, Object.assign({
+          id: "baselayer-" + layer.id,
+          onLayerError: function onLayerError(_, error) {
+            layerError({
+              layerId: layer.id,
+              error: Error("" + error)
+            });
+          }
+        }, layer), layer.id);
+      }), children]
+    })), jsxs(MapControls, {
+      "data-testid": "mapControls",
+      style: {
+        top: controls == null ? void 0 : controls.mapControlsPositionTop
+      },
+      children: [(controls == null ? void 0 : controls.search) && jsx(SearchControlButtonConnect, {
+        mapId: mapId
+      }), (controls == null ? void 0 : controls.zoomControls) && jsx(ZoomControlConnect, {
+        mapId: mapId
+      }), (controls == null ? void 0 : controls.layerManagerAndLegend) && jsxs(Fragment, {
+        children: [jsx(LayerManagerMapButtonConnect, {
+          mapId: mapId
+        }), jsx(LegendMapButtonConnect, {
+          mapId: mapId,
+          multiLegend: controls == null ? void 0 : controls.multiLegend
+        })]
+      }), (controls == null ? void 0 : controls.dimensionSelect) && jsx(MultiDimensionSelectMapButtonsConnect, {
+        mapId: mapId
+      }), (controls == null ? void 0 : controls.getFeatureInfo) && jsx(GetFeatureInfoButtonConnect, {
+        mapId: mapId
+      }), controls == null ? void 0 : controls.additionalMapControls]
+    }), (controls == null ? void 0 : controls.multiLegend) && jsx(LegendConnect, {
+      showMapId: true,
+      mapId: mapId,
+      multiLegend: controls == null ? void 0 : controls.multiLegend
+    }), (controls == null ? void 0 : controls.search) && jsx(SearchDialogConnect, {
+      mapId: mapId
+    }), (controls == null ? void 0 : controls.getFeatureInfo) && jsx(GetFeatureInfoConnect, {
+      showMapId: true,
+      mapId: mapId
+    }), jsx(LayerManagerConnect, {
+      mapId: mapId,
+      bounds: "parent",
+      isDocked: 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 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);
+    // window.console.log('useGetOpenlayersView -> ######## Choosing storedView object')
+    var setViewFromStoredView = function setViewFromStoredView() {
+      // window.console.log('useGetOpenlayersView -> ######## calling setView()', storedView.view);
+      setView(storedView.view);
+    };
+    setViewFromStoredView();
+    var eventKey = storedView.on('change', setViewFromStoredView);
+    return function () {
+      unByKey(eventKey);
+    };
+  }, [syncGroupView, mapId, store]);
+  return {
+    view: view,
+    name: name
+  };
+};
+
+/* *
+ * 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 makePrefetchTimeSpan = function makePrefetchTimeSpan(timeSliderStartCenterEndTime, animationStartTime, animationEndTime, isAnimating) {
+  var timeSliderTimeStepInS = timeSliderStartCenterEndTime.step * 60;
+  var animationTimeStartInS = dateUtils.parseISO(animationStartTime).getTime() / 1000;
+  var animationTimeEndInS = dateUtils.parseISO(animationEndTime).getTime() / 1000;
+  var prefetchStart = isAnimating ? animationTimeStartInS : timeSliderStartCenterEndTime.start;
+  var prefetchEnd = isAnimating ? animationTimeEndInS : timeSliderStartCenterEndTime.end;
+  if (!prefetchStart || !prefetchEnd) {
+    return {
+      timespan: {
+        start: 0,
+        end: 0,
+        step: 0
+      },
+      isAnimating: isAnimating
+    };
+  }
+  var roundStart = Math.round(prefetchStart / timeSliderTimeStepInS) * timeSliderTimeStepInS;
+  var roundEnd = Math.round(prefetchEnd / timeSliderTimeStepInS) * timeSliderTimeStepInS;
+  // eslint-disable-next-line no-constant-condition
+  return {
+    timespan: {
+      start: roundStart * 1000,
+      end: roundEnd * 1000,
+      step: timeSliderTimeStepInS * 1000
+    },
+    isAnimating: isAnimating
+  };
+};
+var makeLayerInfoPayload = function makeLayerInfoPayload(payload, mapDimensions, mapId) {
+  // During intialization, try to base the layer dimension on the current map dimension value.
+  var updatedPayLoad = {
+    origin: 'OnInitializeLayerProps in MapViewConnect',
+    layerDimensions: {
+      layerId: payload.layerId,
+      origin: 'OnInitializeLayerProps in MapViewConnect',
+      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)
+        });
+      })
+    },
+    mapDimensions: {
+      mapId: mapId,
+      origin: 'OnInitializeLayerProps in MapViewConnect',
+      dimensions: (payload.dimensions || []).map(function (layerDim) {
+        var _find2;
+        var currentMapDim = ((_find2 = (mapDimensions || []).find(function (mapDim) {
+          return mapDim.name === layerDim.name;
+        })) == null ? void 0 : _find2.currentValue) || layerDim.currentValue;
+        var wmDim = new WMJSDimension(layerDim);
+        return Object.assign({}, layerDim, {
+          currentValue: wmDim.getClosestValue(currentMapDim)
+        });
+      })
+    }
+  };
+  return updatedPayLoad;
+};
+
+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();
+  // geoJson: GeometryObject, text: string
+  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(GeoJSONLayer, {
+      featureCollection: !layer.isInEditMode ? layer.geojson : undefined,
+      zIndex: zIndex,
+      style: style,
+      hoverSelect: hoverSelect
+    }), jsx(OpenLayersMapDraw
+    // linkedFeatures={null!} // TODO: !!!
+    , {
+      // linkedFeatures={null!} // TODO: !!!
+      drawMode: layer.drawMode,
+      viewOnlyStyle: style,
+      exitDrawModeCallback: exitFeatureDrawMode,
+      geojson: layer.geojson,
+      // isInDeleteMode={false} // TODO: dunno!
+      isInEditMode: layer.isInEditMode || false,
+      selectedFeatureIndex: layer.selectedFeatureIndex || 0,
+      updateGeojson: updateFeature
+    })]
+  });
+};
+
+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(MapViewLayerToOpenLayer, 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));
+};
+
+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
+    };
+  }
+  return null;
+};
+/**
+ * Connected component used to display the map and selected layers.
+ * Includes options to disable the map controls and legend.
+ *
+ * Expects the following props:
+ * @param {string} mapId mapId: string - Id of the map
+ * @param {object} [controls.zoomControls] **optional** controls: object - toggle the map controls, zoomControls defaults to true
+ * @param {boolean} [displayTimeInMap] **optional** displayTimeInMap: boolean, toggles the mapTime, defaults to true
+ * @param {boolean} [showScaleBar] **optional** showScaleBar: boolean, toggles the scaleBar, defaults to true
+ * @example
+ * ```<MapViewConnect mapId={mapId} controls={{ zoomControls: false }} displayTimeInMap={false} showScaleBar={false}/>```
+ */
+var OlMapViewConnect = function OlMapViewConnect(_ref) {
+  var mapId = _ref.mapId,
+    _ref$controls = _ref.controls,
+    controls = _ref$controls === void 0 ? {
+      mapControlsPositionTop: 0,
+      zoomControls: true
+    } : _ref$controls,
+    initialBbox = _ref.initialBbox,
+    children = _ref.children;
+  var store = useStore();
+  var mapRef = React.useRef(null);
+  var _useGetOpenlayersView = useGetOpenlayersView(mapId, store),
+    view = _useGetOpenlayersView.view;
+  var _React$useState = React.useState(),
+    hoverLinkedFeature = _React$useState[0],
+    setHoverLinkedFeature = _React$useState[1];
+  var linkedPanelId = useSelector(function (store) {
+    return genericSelectors.selectLinkedPanelId(store, mapId);
+  });
+  var mapLayerIds = useSelector(function (store) {
+    return mapSelectors.getMapLayerIdsEnabled(store, mapId);
+  });
+  var baseLayers = useSelector(function (store) {
+    return mapSelectors.getMapBaseLayers(store, mapId);
+  });
+  var overLayers = useSelector(function (store) {
+    return mapSelectors.getMapOverLayers(store, mapId);
+  });
+  var featureLayers = useSelector(function (store) {
+    return mapSelectors.getMapFeatureLayers(store, mapId);
+  });
+  var linkedFeaturesFromState = useSelector(function (store) {
+    var _store$syncGroups;
+    return genericSelectors.selectLinkedFeatures((_store$syncGroups = store.syncGroups) == null ? void 0 : _store$syncGroups.linkedState, mapId);
+  });
+  var linkedFeatures = React.useMemo(function () {
+    return {
+      type: 'FeatureCollection',
+      features: linkedFeaturesFromState.flatMap(function (feature) {
+        return feature.geoJSON.features;
+      })
+    };
+  }, [linkedFeaturesFromState]);
+  var srs = useSelector(function (store) {
+    return mapSelectors.getSrs(store, mapId);
+  });
+  var timeSliderStartCenterEndTime = useSelector(function (store) {
+    return mapSelectors.getMapTimeSliderStartCenterEndAndStep(store, mapId);
+  });
+  var animationStartTime = useSelector(function (store) {
+    return mapSelectors.getAnimationStartTime(store, mapId);
+  });
+  var animationEndTime = useSelector(function (store) {
+    return mapSelectors.getAnimationEndTime(store, mapId);
+  });
+  var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
+  var isAnimating = useSelector(function (store) {
+    return mapSelectors.isAnimating(store, mapId);
+  });
+  var dispatch = useDispatch();
+  var updateLayerInformation = React.useCallback(function (payload) {
+    var _payload$layerDimensi, _payload$layerDimensi2;
+    var updatedPayLoad = Object.assign({}, payload, {
+      origin: 'OnInitializeLayerProps in MapViewConnect',
+      layerDimensions: {
+        layerId: ((_payload$layerDimensi = payload.layerDimensions) == null ? void 0 : _payload$layerDimensi.layerId) || '',
+        origin: 'OnInitializeLayerProps in MapViewConnect',
+        dimensions: (((_payload$layerDimensi2 = payload.layerDimensions) == null ? void 0 : _payload$layerDimensi2.dimensions) || []).map(function (layerDim) {
+          return Object.assign({}, layerDim);
+        })
+      }
+    });
+    dispatch(layerActions.onUpdateLayerInformation(updatedPayLoad));
+  }, [dispatch]);
+  var registerMap = React.useCallback(function (payload) {
+    dispatch(mapActions.registerMap(payload));
+  }, [dispatch]);
+  var syncGroupsAddSource = React.useCallback(function (payload) {
+    dispatch(genericActions.syncGroupAddSource(payload));
+  }, [dispatch]);
+  var hoverSelect = React.useMemo(function () {
+    return {
+      active: true,
+      onHover: setHoverLinkedFeature
+    };
+  }, []);
+  var displayMapPin = useSelector(function (store) {
+    return mapSelectors.getDisplayMapPin(store, mapId);
+  });
+  var mapPinLocation = useSelector(function (store) {
+    return mapSelectors.getPinLocation(store, mapId);
+  });
+  var mapPinChangeLocation = React.useCallback(function (clickedLocation) {
+    var _hoverLinkedFeature$g;
+    var mapPinLocation = getCenterOfLinkedFeature(hoverLinkedFeature, srs) || clickedLocation;
+    var selectedFeatureId = (hoverLinkedFeature == null || (_hoverLinkedFeature$g = hoverLinkedFeature.getId()) == null ? void 0 : _hoverLinkedFeature$g.toString()) || '';
+    if (hoverLinkedFeature) {
+      var selectedFeatureIndex = linkedFeatures.features.findIndex(function (feature) {
+        return feature.id === selectedFeatureId;
+      });
+      dispatch(layerActions.setSelectedFeature({
+        layerId: "drawlayer-" + mapId,
+        selectedFeatureIndex: selectedFeatureIndex
+      }));
+    }
+    dispatch(genericActions.addSharedData({
+      panelId: linkedPanelId,
+      data: {
+        selectedFeatureId: selectedFeatureId
+      }
+    }));
+    dispatch(mapActions.setMapPinLocation({
+      mapId: mapId,
+      mapPinLocation: mapPinLocation
+    }));
+  }, [dispatch, hoverLinkedFeature, linkedFeatures.features, linkedPanelId, mapId, srs]);
+  var isActiveWindowId = useSelector(function (store) {
+    return uiSelectors.getIsActiveWindowId(store, mapId);
+  });
+  useKeyboardZoomAndPan(isActiveWindowId, mapId, mapRef.current);
+  useTouchZoomPan(isActiveWindowId, mapId);
+  React.useEffect(function () {
+    registerMap({
+      mapId: mapId
+    });
+    syncGroupsAddSource({
+      id: mapId,
+      type: [syncConstants.SYNCGROUPS_TYPE_SETTIME, syncConstants.SYNCGROUPS_TYPE_SETBBOX]
+    });
+    dispatch(loadingIndicatorActions.setGetMapIsLoading({
+      id: mapId,
+      isGetMapLoading: false
+    }));
+  }, [dispatch, mapId, registerMap, syncGroupsAddSource]);
+  var onGetMapLoadStart = React.useCallback(function () {
+    dispatch(loadingIndicatorActions.setGetMapIsLoading({
+      id: mapId,
+      isGetMapLoading: true
+    }));
+  }, [dispatch, mapId]);
+  var onGetMapLoadReady = React.useCallback(function () {
+    dispatch(loadingIndicatorActions.setGetMapIsLoading({
+      id: mapId,
+      isGetMapLoading: false
+    }));
+  }, [dispatch, mapId]);
+  React.useEffect(function () {
+    if (!view) {
+      return function () {};
+    }
+    var eventKey = view.on('change', function () {
+      var _view$getViewStateAnd = view.getViewStateAndExtent(),
+        extent = _view$getViewStateAnd.extent;
+      dispatch(genericActions.setBbox({
+        bbox: {
+          left: extent[0],
+          bottom: extent[1],
+          right: extent[2],
+          top: extent[3]
+        },
+        sourceId: mapId,
+        srs: srs
+      }));
+    });
+    return function () {
+      unByKey(eventKey);
+    };
+  }, [view, mapId, srs, dispatch]);
+  var prefetchTimespan = makePrefetchTimeSpan(timeSliderStartCenterEndTime, animationStartTime, animationEndTime, isAnimating);
+  var layerIds = mapLayerIds.join();
+  var refetchLayers = React.useCallback(function () {
+    mapLayerIds == null || mapLayerIds.forEach( /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(layerId) {
+        var wmLayer, layerInfo;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!layerId) {
+                _context.next = 15;
+                break;
+              }
+              _context.prev = 1;
+              wmLayer = getWMLayerById(layerId);
+              if (!wmLayer) {
+                console.warn('No wmLayer exists for layer id', layerId);
+              }
+              _context.next = 6;
+              return wmLayer.parseLayer(true);
+            case 6:
+              layerInfo = getLayerUpdateInfo(wmLayer, mapId);
+              updateLayerInformation && updateLayerInformation(layerInfo);
+              _context.next = 13;
+              break;
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](1);
+              window.console.error(_context.t0);
+            case 13:
+              _context.next = 16;
+              break;
+            case 15:
+              console.warn('Not updating layer, something is wrong.', layerId);
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[1, 10]]);
+      }));
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mapId, updateLayerInformation, layerIds]);
+  useSetIntervalWhenVisible(refetchLayers, 60000);
+  var isLoading = React.useRef(false);
+  // UseEffect for loading indicator
+  React.useEffect(function () {
+    openLayersGetMapImageStore.addImageEventCallback(function () {
+      var checkLoading = !!(openLayersGetMapImageStore.getNumImagesLoading() > 0);
+      if (checkLoading !== isLoading.current) {
+        if (checkLoading === true) {
+          onGetMapLoadStart && onGetMapLoadStart();
+        } else {
+          onGetMapLoadReady && onGetMapLoadReady();
         }
-      },
-      onUpdateLayerInformation: updateLayerInformation,
-      onMapPinChangeLocation: mapPinChangeLocation,
-      onMapZoomEnd: function onMapZoomEnd(a) {
-        genericSetBbox({
-          bbox: a.bbox,
-          srs: a.srs,
-          sourceId: mapId,
-          origin: mapEnums.MapActionOrigin.map,
+        isLoading.current = checkLoading;
+      }
+    }, mapId);
+    return function () {
+      openLayersGetMapImageStore.removeEventCallback(mapId);
+    };
+  }, [mapId, onGetMapLoadReady, onGetMapLoadStart]);
+  var _React$useState2 = React.useState(false),
+    debugMode = _React$useState2[0],
+    toggleDebugMode = _React$useState2[1];
+  React.useEffect(function () {
+    var handleKeyPress = function handleKeyPress(event) {
+      if (event.isTrusted && event.key === 'd') {
+        toggleDebugMode(!debugMode);
+      }
+    };
+    document.addEventListener('keyup', handleKeyPress);
+    return function () {
+      document.removeEventListener('keyup', handleKeyPress);
+    };
+  }, [debugMode]);
+  var homeExtent = React.useMemo(function () {
+    return initialBbox && [initialBbox.left, initialBbox.bottom, initialBbox.right, initialBbox.top];
+  }, [initialBbox]);
+  return jsx(TimeContext.Provider, {
+    value: prefetchTimespan,
+    children: jsxs(OpenLayersMapView, {
+      view: view,
+      isFocused: isActiveWindowId,
+      isMouseWheelZoomEnabled: !isTimeScrollingEnabled,
+      children: [children, baseLayers.map(function (layer, zIndex) {
+        return jsx(MapViewLayerToOpenLayer, Object.assign({
+          id: "baselayer-" + (layer == null ? void 0 : layer.id),
+          zIndex: baseLayers.length - zIndex + 10
+        }, layer, {
+          isBaseLayer: true
+        }), "baselayer-" + (layer == null ? void 0 : layer.id));
+      }), mapLayerIds.map(function (layerId, zIndex) {
+        return jsx(OlMapViewLayerConnect, {
+          layerId: layerId,
+          zIndex: mapLayerIds.length - zIndex + 1000,
+          debugMode: debugMode,
           mapId: mapId
-        });
-      },
-      onWMJSMount: function onWMJSMount(mapId) {
-        var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-        if (!wmjsMap) {
-          return;
-        }
-        wmjsMap.getListener().addEventListener('onloadstart', onGetMapLoadStart);
-        wmjsMap.getListener().addEventListener('onloadready', onGetMapLoadReady);
-        wmServiceListener.addEventListener(EVENT_GETCAPABILITIES_START, onGetCapabilitiesLoadStart, true);
-        wmServiceListener.addEventListener(EVENT_GETCAPABILITIES_READY, onGetCapabilitiesLoadReady, true);
-      },
-      onWMJSUnMount: function onWMJSUnMount(mapId) {
-        unRegister(mapId);
-        wmServiceListener.removeEventListener(EVENT_GETCAPABILITIES_START, onGetCapabilitiesLoadStart);
-        wmServiceListener.removeEventListener(EVENT_GETCAPABILITIES_READY, onGetCapabilitiesLoadReady);
-      },
-      children: [baseLayers.map(function (layer) {
-        return jsx(MapViewLayer, Object.assign({
-          id: "baselayer-" + layer.id,
-          onLayerError: function onLayerError(_, error) {
-            layerError({
-              layerId: layer.id,
-              error: Error("" + error)
-            });
-          }
-        }, layer), layer.id);
-      }), layers.map(function (layer) {
-        return jsx(MapViewLayer, Object.assign({
-          id: "layer-" + layer.id,
-          onLayerError: function onLayerError(_, error) {
-            layerError({
-              layerId: layer.id,
-              error: Error("" + error)
-            });
-          }
-        }, layer), layer.id);
-      }), (_linkedFeatures$conca = linkedFeatures.concat(linkedFormFeatures)) == null ? void 0 : _linkedFeatures$conca.map(function (feature) {
-        return jsx(MapViewLayer, {
-          id: feature.id,
-          geojson: feature == null ? void 0 : feature.geoJSON,
-          onHoverFeature: function onHoverFeature(hoverInfo) {
-            if (hoverInfo === undefined && hoverId !== undefined) {
-              debouncedSetHoverFeature();
-            } else if (hoverInfo != null && hoverInfo.feature && feature.originalId !== hoverId) {
-              debouncedSetHoverFeature(feature.originalId);
-            }
-          },
-          onClickFeature: function onClickFeature(event) {
-            var _event$feature$proper;
-            var isClickOutsideFeature = !event || !event.feature;
-            if (isClickOutsideFeature) {
-              if (mapPinLocation) {
-                handleFeatureSelect(linkedPanelId, undefined);
-              }
-              return;
-            }
-            // Handle clicks on station
-            var clickedFeatureName = (_event$feature$proper = event.feature.properties) == null ? void 0 : _event$feature$proper.name;
-            var features = linkedFeatures[0].geoJSON.features;
-            var clickedFeatureIndex = features.findIndex(function (feature) {
-              var _feature$properties;
-              return ((_feature$properties = feature.properties) == null ? void 0 : _feature$properties.name) === clickedFeatureName;
-            });
-            if (disableMapPin === false) {
-              var _selectedFeature$id;
-              var selectedFeature = features[clickedFeatureIndex];
-              handleFeatureSelect(linkedPanelId, (_selectedFeature$id = selectedFeature.id) == null ? void 0 : _selectedFeature$id.toString());
-            }
-          }
-        }, feature.id);
-      }), featureLayers.map(function (layer) {
-        return jsx(MapViewLayer, Object.assign({
-          id: "featurelayer-" + layer.id,
-          onLayerError: function onLayerError(_, error) {
-            layerError({
-              layerId: layer.id,
-              error: Error("" + error)
-            });
-          },
-          onClickFeature: function onClickFeature(event) {
-            var isClickOutsideFeature = !event;
-            if (isClickOutsideFeature && !layer.isInEditMode) {
-              setSelectedFeature({
-                layerId: layer.id,
-                selectedFeatureIndex: undefined
-              });
-              return;
-            }
-            if ((event == null ? void 0 : event.isInEditMode) === false) {
-              setSelectedFeature({
-                layerId: layer.id,
-                selectedFeatureIndex: event.featureIndex
-              });
-            }
-          },
-          updateGeojson: function updateGeojson(geojson, reason) {
-            updateFeature({
-              geojson: geojson,
-              layerId: layer.id,
-              reason: reason
-            });
-          },
-          exitDrawModeCallback: function exitDrawModeCallback(reason) {
-            return exitFeatureDrawMode({
-              reason: reason,
-              layerId: layer.id
-            });
+        }, "layer-" + layerId);
+      }), overLayers.filter(function (layer) {
+        return layer == null ? void 0 : layer.service;
+      }).map(function (layer, zIndex) {
+        return jsx(WMSLayer, {
+          url: layer.service,
+          layerName: layer.name,
+          styleName: layer.style,
+          layerOptions: {
+            zIndex: overLayers.length - zIndex + 2000
           }
-        }, layer), layer.id);
-      }), overLayers.map(function (layer) {
-        return jsx(MapViewLayer, Object.assign({
-          id: "baselayer-" + layer.id,
-          onLayerError: function onLayerError(_, error) {
-            layerError({
-              layerId: layer.id,
-              error: Error("" + error)
-            });
+        }, "overlayer-" + (layer == null ? void 0 : layer.id));
+      }), featureLayers.map(function (layer, zIndex) {
+        return jsx(OpenLayersFeatureLayerConnect, {
+          layerId: layer == null ? void 0 : layer.id,
+          layer: layer,
+          zIndex: mapLayerIds.length - zIndex + 3000,
+          style: genericOpenlayersFeatureStyle,
+          hoverSelect: {
+            active: true
           }
-        }, layer), layer.id);
-      }), children]
-    })), jsxs(MapControls, {
-      "data-testid": "mapControls",
-      style: {
-        top: controls == null ? void 0 : controls.mapControlsPositionTop
-      },
-      children: [(controls == null ? void 0 : controls.search) && jsx(SearchControlButtonConnect, {
-        mapId: mapId
-      }), (controls == null ? void 0 : controls.zoomControls) && jsx(ZoomControlConnect, {
-        mapId: mapId
-      }), (controls == null ? void 0 : controls.layerManagerAndLegend) && jsxs(Fragment, {
-        children: [jsx(LayerManagerMapButtonConnect, {
+        }, "featurelayer-" + (layer == null ? void 0 : layer.id));
+      }), jsx(GeoJSONLayer, {
+        style: genericOpenlayersFeatureStyle,
+        featureCollection: linkedFeatures,
+        zIndex: 4000,
+        hoverSelect: hoverSelect
+      }), jsx(OpenLayersGetFeatureInfo, {
+        mapPinLocation: mapPinLocation,
+        displayMapPin: displayMapPin,
+        selectLocation: mapPinChangeLocation
+      }), jsxs(MapControls, {
+        "data-testid": "mapControls",
+        style: {
+          top: controls == null ? void 0 : controls.mapControlsPositionTop
+        },
+        children: [(controls == null ? void 0 : controls.search) && jsx(SearchControlButtonConnect, {
           mapId: mapId
-        }), jsx(LegendMapButtonConnect, {
-          mapId: mapId,
-          multiLegend: controls == null ? void 0 : controls.multiLegend
-        })]
-      }), (controls == null ? void 0 : controls.dimensionSelect) && jsx(MultiDimensionSelectMapButtonsConnect, {
+        }), (controls == null ? void 0 : controls.zoomControls) && jsx(OpenLayersZoomControl, {
+          homeExtent: homeExtent
+        }), (controls == null ? void 0 : controls.layerManagerAndLegend) && jsxs(Fragment, {
+          children: [jsx(LayerManagerMapButtonConnect, {
+            mapId: mapId
+          }), jsx(LegendMapButtonConnect, {
+            mapId: mapId,
+            multiLegend: controls == null ? void 0 : controls.multiLegend
+          })]
+        }), (controls == null ? void 0 : controls.dimensionSelect) && jsx(MultiDimensionSelectMapButtonsConnect, {
+          mapId: mapId
+        }), (controls == null ? void 0 : controls.getFeatureInfo) && jsx(GetFeatureInfoButtonConnect, {
+          mapId: mapId
+        }), controls == null ? void 0 : controls.additionalMapControls]
+      }), (controls == null ? void 0 : controls.multiLegend) && jsx(LegendConnect, {
+        showMapId: true,
+        mapId: mapId,
+        multiLegend: controls == null ? void 0 : controls.multiLegend
+      }), (controls == null ? void 0 : controls.search) && jsx(SearchDialogConnect, {
         mapId: mapId
-      }), (controls == null ? void 0 : controls.getFeatureInfo) && jsx(GetFeatureInfoButtonConnect, {
+      }), (controls == null ? void 0 : controls.getFeatureInfo) && jsx(GetFeatureInfoConnect, {
+        showMapId: true,
         mapId: mapId
-      }), controls == null ? void 0 : controls.additionalMapControls]
-    }), (controls == null ? void 0 : controls.multiLegend) && jsx(LegendConnect, {
-      showMapId: true,
-      mapId: mapId,
-      multiLegend: controls == null ? void 0 : controls.multiLegend
-    }), jsx(SearchControlConnect, {
-      mapId: mapId
-    }), (controls == null ? void 0 : controls.getFeatureInfo) && jsx(GetFeatureInfoConnect, {
-      showMapId: true,
-      mapId: mapId
-    }), jsx(LayerManagerConnect, {
-      mapId: mapId,
-      bounds: "parent",
-      isDocked: true
-    })]
+      }), jsx(LayerManagerConnect, {
+        mapId: mapId,
+        bounds: "parent",
+        isDocked: true
+      })]
+    })
   });
 };
 
@@ -6981,7 +7897,8 @@ var TimeSpanButtonConnect = function TimeSpanButtonConnect(_ref) {
       }));
       dispatch(mapActions.setTimeSliderSpan({
         mapId: mapId,
-        timeSliderSpan: spanInSeconds
+        timeSliderSpan: spanInSeconds,
+        origin: mapEnums.MapActionOrigin.map
       }));
       dispatch(mapActions.setTimeSliderCenterTime({
         mapId: mapId,
@@ -7258,7 +8175,8 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
     onSetTimeSliderSpan = _ref.onSetTimeSliderSpan,
     unfilteredSelectedTime = _ref.unfilteredSelectedTime,
     setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime,
-    mapWindowRef = _ref.mapWindowRef;
+    mapWindowRef = _ref.mapWindowRef,
+    adjustSelectedTimeOnWheel = _ref.adjustSelectedTimeOnWheel;
   var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
   var centerTime = useSelector(function (store) {
     return mapSelectors.getMapTimeSliderCenterTime(store, mapId);
@@ -7390,7 +8308,8 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
           }));
         }
       }
-    }
+    },
+    adjustSelectedTimeOnWheel: adjustSelectedTimeOnWheel
   });
 };
 
@@ -7450,10 +8369,7 @@ var useUpdateTimeSpan = function useUpdateTimeSpan(mapId, myOnSetTimeSliderSpan)
     }
   };
   React.useEffect(function () {
-    if (!activeLayerTimeDimension) {
-      return;
-    }
-    if (isTimeSpanAuto && autoTimeStepLayerId) {
+    if (isTimeSpanAuto && autoTimeStepLayerId && activeLayerTimeDimension) {
       var _getTimeBounds = getTimeBounds([activeLayerTimeDimension]),
         startTime = _getTimeBounds.startTime,
         endTime = _getTimeBounds.endTime;
@@ -7468,7 +8384,7 @@ var useUpdateTimeSpan = function useUpdateTimeSpan(mapId, myOnSetTimeSliderSpan)
       updateTimeSliderSpan(_spanInSeconds, _newCenterTime, _newSecondsPerPx);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [autoTimeStepLayerId, isTimeSpanAuto, activeLayerTimeDimension, mapId]);
+  }, [autoTimeStepLayerId, isTimeSpanAuto, mapId]);
 };
 var timeToIso = function timeToIso(selectedTime) {
   return handleDateUtilsISOString(dateUtils.fromUnix(selectedTime).toISOString());
@@ -7549,9 +8465,6 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
   });
   useUpdateTimestep(mapId);
   useUpdateTimeSpan(mapId, onSetTimeSliderSpan);
-  var makeFilteredSelectedTime = function makeFilteredSelectedTime(timeValue) {
-    return getFilteredTime(timeValue, timeStep, dataStartTime, dataEndTime);
-  };
   // Local state for unfiltered selected time
   var _React$useState = React.useState(selectedTime),
     unfilteredSelectedTime = _React$useState[0],
@@ -7559,7 +8472,7 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
   // Reference to the last time value set by this timeslider
   var lastTimeValueAsSetByThisTimeSlider = React.useRef();
   // Set new time in the redux state
-  var _onSetNewDate = function onSetNewDate(newDate) {
+  var _onSetNewDate = React.useCallback(function (newDate) {
     // Remember that this timeslider has set this time
     lastTimeValueAsSetByThisTimeSlider.current = newDate;
     if (isAnimating) {
@@ -7572,7 +8485,7 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
       origin: 'TimeSliderConnect',
       value: handleDateUtilsISOString(newDate)
     }));
-  };
+  }, [dispatch, isAnimating, mapId, sourceId]);
   // Update local state when time is updated outside of this component, e.g. during animation or syncgroups
   React.useEffect(function () {
     var selectedTimeAsIsoString = timeToIso(selectedTime);
@@ -7581,13 +8494,16 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
     }
   }, [selectedTime]);
   // Function used by timeslider components to update the unfiltered selected time
-  var setUnfilteredSelectedTime = function setUnfilteredSelectedTime(unfilteredSelectedTimeFromComponents) {
+  var setUnfilteredSelectedTime = React.useCallback(function (unfilteredSelectedTimeFromComponents) {
+    var makeFilteredSelectedTime = function makeFilteredSelectedTime(timeValue) {
+      return getFilteredTime(timeValue, timeStep, dataStartTime, dataEndTime);
+    };
     setUnfilteredSelectedTimeViaState(unfilteredSelectedTimeFromComponents);
     var filteredIsoTime = makeFilteredSelectedTime(unfilteredSelectedTimeFromComponents);
     if (selectedTime !== filteredIsoTime) {
       onsetNewDateDebounced(timeToIso(filteredIsoTime), _onSetNewDate);
     }
-  };
+  }, [dataEndTime, dataStartTime, _onSetNewDate, selectedTime, timeStep]);
   // Move animation bar when user changes time using time picker
   // Animation bar however cannot be moved into a time where there is no data
   var moveAnimationUsingCalendar = function moveAnimationUsingCalendar(newTime) {
@@ -7613,6 +8529,40 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
     setUnfilteredSelectedTime(newSelectedTime);
     moveAnimationUsingCalendar(newSelectedTime);
   };
+  var secondsPerPx = useSelector(function (store) {
+    return mapSelectors.getMapTimeSliderSecondsPerPx(store, mapId);
+  }) || defaultSecondsPerPx;
+  var timeSliderWidth = useSelector(function (store) {
+    return mapSelectors.getMapTimeSliderWidth(store, mapId);
+  }) || 0;
+  var centerTime = useSelector(function (store) {
+    return mapSelectors.getMapTimeSliderCenterTime(store, mapId);
+  });
+  var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
+  var adjustSelectedTimeOnWheel = React.useCallback(function (_ref2) {
+    var event = _ref2.event,
+      deltaY = _ref2.deltaY;
+    if (!(event.ctrlKey || event.metaKey || event.shiftKey || event.altKey)) {
+      var pixelsPerScroll = -deltaY * timeStep / (2 * secondsPerPx);
+      moveSelectedTimePx(pixelsPerScroll, timeSliderWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime);
+    }
+  }, [timeSliderWidth, centerTime, dataEndTime, dataStartTime, secondsPerPx, setUnfilteredSelectedTime, timeStep, unfilteredSelectedTime]);
+  React.useEffect(function () {
+    if (isTimeScrollingEnabled && mapWindowRef != null && mapWindowRef.current) {
+      var handleWheel = function handleWheel(event) {
+        adjustSelectedTimeOnWheel({
+          event: event,
+          deltaY: event.deltaY
+        });
+      };
+      var element = mapWindowRef.current;
+      element.addEventListener('wheel', handleWheel);
+      return function () {
+        element.removeEventListener('wheel', handleWheel);
+      };
+    }
+    return undefined;
+  }, [isTimeScrollingEnabled, mapWindowRef, adjustSelectedTimeOnWheel]);
   return jsx(TimeSlider, {
     timeStep: timeStep,
     dataStartTime: dataStartTime,
@@ -7642,7 +8592,8 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
       onSetTimeSliderSpan: onSetTimeSliderSpan,
       unfilteredSelectedTime: unfilteredSelectedTime,
       setUnfilteredSelectedTime: setUnfilteredSelectedTime,
-      mapWindowRef: mapWindowRef
+      mapWindowRef: mapWindowRef,
+      adjustSelectedTimeOnWheel: adjustSelectedTimeOnWheel
     }),
     mapIsActive: mapIsActive,
     onToggleTimeSlider: onToggleTimeSliderVisibility,
@@ -7714,7 +8665,7 @@ var TimeSliderClockConnect = function TimeSliderClockConnect(_ref) {
   });
 };
 
-var _excluded = ["id", "dockedLayerManagerSize", "title", "layers", "dimensions", "shouldAutoUpdate", "shouldAnimate", "shouldAutoFetch", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "shouldShowDockedLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "shouldDisplayDrawControls", "displaySearchButtonInMap", "mapControls", "children", "shouldDisablePrefetching", "tileServerSettings"];
+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", "useOl", "mapControls", "children", "shouldDisablePrefetching", "tileServerSettings"];
 var titleStyle = function titleStyle(theme) {
   return {
     position: 'absolute',
@@ -7749,8 +8700,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
     shouldAnimate = _ref$shouldAnimate === void 0 ? false : _ref$shouldAnimate,
     _ref$shouldAutoFetch = _ref.shouldAutoFetch,
     shouldAutoFetch = _ref$shouldAutoFetch === void 0 ? true : _ref$shouldAutoFetch,
-    _ref$bbox = _ref.bbox,
-    bbox = _ref$bbox === void 0 ? defaultBbox.bbox : _ref$bbox,
+    _ref$initialBbox = _ref.initialBbox,
+    initialBbox = _ref$initialBbox === void 0 ? defaultBbox.bbox : _ref$initialBbox,
     _ref$srs = _ref.srs,
     srs = _ref$srs === void 0 ? defaultBbox.srs : _ref$srs,
     _ref$shouldShowZoomCo = _ref.shouldShowZoomControls,
@@ -7779,6 +8730,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
     shouldDisplayDrawControls = _ref$shouldDisplayDra === void 0 ? false : _ref$shouldDisplayDra,
     _ref$displaySearchBut = _ref.displaySearchButtonInMap,
     displaySearchButtonInMap = _ref$displaySearchBut === void 0 ? false : _ref$displaySearchBut,
+    _ref$useOl = _ref.useOl,
+    useOl = _ref$useOl === void 0 ? true : _ref$useOl,
     mapControls = _ref.mapControls,
     children = _ref.children,
     shouldDisablePrefetching = _ref.shouldDisablePrefetching,
@@ -7807,7 +8760,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
     var mapPreset = Object.assign({
       layers: updatedLayers,
       proj: {
-        bbox: bbox,
+        bbox: initialBbox,
         srs: srs
       },
       dimensions: dimensions,
@@ -7898,7 +8851,17 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
           sourceId: id,
           mapWindowRef: mapWindowRef
         })
-      }), jsx(MapViewConnect, {
+      }), useOl ? jsx(OlMapViewConnect, {
+        controls: mapControlConfig,
+        displayTimeInMap: displayTimeInMap,
+        showScaleBar: false,
+        shouldAutoFetch: shouldAutoFetch,
+        mapId: mapId,
+        initialBbox: initialBbox,
+        shouldDisablePrefetching: shouldDisablePrefetching,
+        tileServerSettings: tileServerSettings,
+        children: children
+      }) : jsx(MapViewConnect, {
         controls: mapControlConfig,
         displayTimeInMap: displayTimeInMap,
         showScaleBar: false,
@@ -7911,7 +8874,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
         mapId: mapId
       })]
     });
-  }, [mapId, title, id, mapControlConfig, tileServerSettings, disableTimeSlider, displayTimeInMap, shouldAutoFetch, shouldDisablePrefetching, children, showClock]);
+  }, [mapId, title, id, useOl, initialBbox, mapControlConfig, tileServerSettings, disableTimeSlider, displayTimeInMap, shouldAutoFetch, shouldDisablePrefetching, children, showClock]);
 };
 
 var mapBoxStyle = function mapBoxStyle(theme) {
@@ -8007,7 +8970,7 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
           layers: map.layers || [],
           autoTimeStepLayerId: map.autoTimeStepLayerId,
           autoUpdateLayerId: map.autoUpdateLayerId,
-          bbox: map.bbox,
+          initialBbox: map.bbox,
           srs: map.srs,
           dimensions: map.dimensions || [],
           displayTimeInMap: map.displayTimeInMap || false,
@@ -8138,6 +9101,9 @@ var useGetReferenceTimes = function useGetReferenceTimes(inputLayer) {
   var _React$useState = React.useState([]),
     referenceTimes = _React$useState[0],
     setReferenceTimes = _React$useState[1];
+  var _React$useState2 = React.useState(null),
+    error = _React$useState2[0],
+    setError = _React$useState2[1];
   React.useEffect(function () {
     var referenceTimes = [];
     var wmLayer = new WMLayer(Object.assign({}, inputLayer));
@@ -8150,9 +9116,14 @@ var useGetReferenceTimes = function useGetReferenceTimes(inputLayer) {
         referenceTimes.push(referenceTimeValue);
       }
       setReferenceTimes(referenceTimes);
-    })["catch"](console.error);
+    })["catch"](function (error) {
+      setError(error);
+    });
   }, [inputLayer]);
-  return referenceTimes;
+  return {
+    referenceTimes: referenceTimes,
+    error: error
+  };
 };
 var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
   var layers = _ref.layers,
@@ -8161,7 +9132,14 @@ var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
   var displayLayerManagerAndLegendButtonInAllTopRows = !useHasSyncGroupWithLayerActions(layers && layers.topRowSyncGroups);
   var displayLayerManagerAndLegendButtonInAllBottomRows = !useHasSyncGroupWithLayerActions(layers && layers.bottomRowSyncGroups);
   /* Get all the reference times for this layer */
-  var referenceTimes = useGetReferenceTimes(layers.topRow);
+  var _useGetReferenceTimes = useGetReferenceTimes(layers.topRow),
+    referenceTimes = _useGetReferenceTimes.referenceTimes,
+    error = _useGetReferenceTimes.error;
+  if (error) {
+    return jsx(AlertBanner, {
+      title: error.message
+    });
+  }
   if (referenceTimes.length === 0) {
     return jsx("div", {
       children: "Loading..."
@@ -8224,17 +9202,20 @@ var componentsLookUp = function componentsLookUp(_ref) {
   switch (componentType) {
     case 'Map':
       {
+        var _mapPreset$proj;
         var mapPreset = initialProps.mapPreset,
           mapControls = initialProps.mapControls,
           shouldDisplayDrawControls = initialProps.shouldDisplayDrawControls,
           displaySearchButtonInMap = initialProps.displaySearchButtonInMap;
         return jsx(ConfigurableMapConnect, Object.assign({}, mapPreset, {
+          initialBbox: mapPreset == null || (_mapPreset$proj = mapPreset.proj) == null ? void 0 : _mapPreset$proj.bbox,
           id: id,
           "data-testid": "coreConfigurableMapConnect",
           displayGetFeatureInfoButtonInMap: true,
           shouldDisplayDrawControls: shouldDisplayDrawControls,
           displaySearchButtonInMap: displaySearchButtonInMap,
-          mapControls: mapControls
+          mapControls: mapControls,
+          useOl: isOpenLayersEnabled()
         }));
       }
     case 'MultiMap':
@@ -8425,7 +9406,7 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       var target = event.target;
-      if (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' && event.key === 's') {
+      if (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' && (event.key === 's' || event.key === 'S') && !event.getModifierState('Control') && !event.getModifierState('Alt') && !event.getModifierState('AltGraph') && !event.getModifierState('Meta')) {
         toggleTimeScroll({
           isTimeScrollingEnabled: !isTimeScrollingEnabled
         });
@@ -8756,17 +9737,19 @@ var CoreThemeProvider = function CoreThemeProvider(_ref) {
   var children = _ref.children,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? lightTheme : _ref$theme;
-  return jsx(ThemeWrapper, {
-    theme: theme,
-    children: children
+  var queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false
+      }
+    }
   });
-};
-var ThemeWrapperWithModules = function ThemeWrapperWithModules(_ref2) {
-  var theme = _ref2.theme,
-    children = _ref2.children;
-  return jsx(CoreThemeProvider, {
+  return jsx(ThemeWrapper, {
     theme: theme,
-    children: children
+    children: jsx(QueryClientProvider, {
+      client: queryClient,
+      children: children
+    })
   });
 };
 /**
@@ -8775,14 +9758,14 @@ var ThemeWrapperWithModules = function ThemeWrapperWithModules(_ref2) {
  * @param children
  * @returns
  */
-var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref3) {
-  var children = _ref3.children,
-    _ref3$theme = _ref3.theme,
-    theme = _ref3$theme === void 0 ? lightTheme : _ref3$theme,
-    store = _ref3.store;
+var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
+  var children = _ref2.children,
+    _ref2$theme = _ref2.theme,
+    theme = _ref2$theme === void 0 ? lightTheme : _ref2$theme,
+    store = _ref2.store;
   return jsx(Provider, {
     store: store,
-    children: jsx(ThemeWrapperWithModules, {
+    children: jsx(CoreThemeProvider, {
       theme: theme,
       children: jsx(SnackbarWrapperConnect, {
         children: children
@@ -8790,8 +9773,8 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref3) {
     })
   });
 };
-var CoreI18nProvider = function CoreI18nProvider(_ref4) {
-  var children = _ref4.children;
+var CoreI18nProvider = function CoreI18nProvider(_ref3) {
+  var children = _ref3.children;
   initCoreReactI18n();
   return jsx(I18nextProvider, {
     i18n: i18n,
@@ -9017,4 +10000,4 @@ var LanguageSelect = function LanguageSelect(_ref) {
   });
 };
 
-export { CORE_NAMESPACE, ConfigurableMapConnect, CoreI18nProvider, CoreThemeProvider, CoreThemeStoreProvider, DemoWrapper, DemoWrapperConnect, HarmonieTempAndPrecipPreset, LanguageSelect, LayerInfoButtonConnect, LayerInfoDialogConnect, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, MapViewConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, RouterWrapperConnect, SearchControlButtonConnect, SearchControlConnect, SearchDialog, SentryRecordButton, SyncGroupViewerConnect, ThemeWrapperWithModules, TimeSliderConnect, ZoomControlConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, getLanguageFromLocalStorage, languageLocalStorageKey, saveLanguageToLocalStorage, testLayers, useFetchServices, useUpdateTimeSpan, useUpdateTimestep };
+export { CORE_NAMESPACE, ConfigurableMapConnect, CoreI18nProvider, CoreThemeProvider, CoreThemeStoreProvider, DemoWrapper, DemoWrapperConnect, HarmonieTempAndPrecipPreset, LanguageSelect, LayerInfoButtonConnect, LayerInfoDialogConnect, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, MapViewConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, OlMapViewConnect, RouterWrapperConnect, SearchControlButtonConnect, SearchDialog, SearchDialogConnect, SentryRecordButton, SyncGroupViewerConnect, TimeSliderConnect, ZoomControlConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, getLanguageFromLocalStorage, languageLocalStorageKey, saveLanguageToLocalStorage, testLayers, useFetchServices, useUpdateTimeSpan, useUpdateTimestep };