@opengeoweb/core 9.37.0 → 10.1.0

package/index.esm.js

@@ -1,20 +1,20 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useCallback, useRef } 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 { 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, ExitDomain, Info, Search, Exclamation, MyLocation, Close, ThemeWrapper, lightTheme, FlagBritain, FlagNetherlands, FlagFinland, FlagNorway } from '@opengeoweb/theme';
+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, ZoomControls, MapView, MapViewLayer, LegendDialog, LegendButton, registerDrawFunction, emptyGeoJSON, MapControls, publicLayers } from '@opengeoweb/webmap-react';
+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 { 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, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelector, syncGroupsActions, routerUtils } from '@opengeoweb/store';
-import { webmapUtils, WMGetServiceFromStore, getCapabilities, LayerType, handleDateUtilsISOString, wmServiceListener, EVENT_GETCAPABILITIES_START, EVENT_GETCAPABILITIES_READY, getWMSGetFeatureInfoRequestURL, WMLayer } from '@opengeoweb/webmap';
+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 _, { 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 { Box as Box$1, styled as styled$1 } from '@mui/system';
-import _, { isEqual, debounce, range } from 'lodash';
 import { LayerSelectButtonConnect, LayerSelectConnect } from '@opengeoweb/layer-select';
 import axios from 'axios';
 import DOMPurify from 'dompurify';
@@ -103,19 +103,19 @@ var fi = {
 	"add-layer-popup-available-services": "Käytettävissä olevat palvelut",
 	"add-layer-popup-available-layers": "Palvelusta {{serviceName}} saatavilla olevat karttatasot",
 	"add-layer-popup-reload-layers": "Lataa palvelun karttatasot uudelleen",
-	"layermanager-title": "Layer Manager",
+	"layermanager-title": "Karttatasot",
 	"layermanager-baselayers-title": "Pohjakartta",
 	"layermanager-baselayers-no-available": "Palvelu ei käytettävissä",
 	"layermanager-acceptance-time": "Hyväksymisaika",
 	"layermanager-dimensions-total-values": "Dimension arvon ({{total_dimensions}} valinnat)",
 	"layermanager-dimensions-title": "Dimensiot",
 	"layermanager-dimension-title": "Dimensiot",
-	"layermanager-opacity-title": "Läpinäkyvyys",
-	"layermanager-opacity-tooltip-prefix": "Läpinäkyvyys: ",
+	"layermanager-opacity-title": "Peittävyys",
+	"layermanager-opacity-tooltip-prefix": "Peittävyys: ",
 	"layermanager-style-title": "Tyyli",
 	"layermanager-layer-error": "Karttatason lataaminen epäonnistui: tasoa ei löytynyt palvelimelta",
 	"layermanager-layer": "Karttataso",
-	"layermanager-layer-toggle": "Vaihda läpinäkyvyyden tilaa",
+	"layermanager-layer-toggle": "Karttatason näkyvyys",
 	"layermanager-layer-select": "Avaa karttataso valitsin",
 	"layermanager-layer-drag": "Raahaa",
 	"layermanager-layer-leading": "Johtava karttataso",
@@ -900,9 +900,7 @@ var layerManagerStyle = {
   // opacity
   '.column-4': Object.assign({
     width: "calc(" + flexibleAreaWidth + " * 0.15)"
-  }, columnCollapseStyle, {
-    flexGrow: 0
-  }),
+  }, columnCollapseStyle),
   // dimensions
   '.column-5': Object.assign({
     width: "calc(" + flexibleAreaWidth + " * 0.35)"
@@ -1070,30 +1068,39 @@ var RowItemCollapse$1 = function RowItemCollapse(_ref) {
   var _useCoreTranslation = useCoreTranslation(),
     t = _useCoreTranslation.t;
   var hoverId = columnClasses.columnHeader + "-" + className;
-  return jsx(CustomTooltip, {
-    title: collapsedColumns != null && collapsedColumns[className] ? t('column-expand', {
-      title: title
-    }) : t('column-collapse'),
-    children: jsx(Grid2, {
-      id: hoverId,
-      className: columnClasses.columnHeader + " " + className,
-      style: Object.assign({}, (collapsedColumns == null ? void 0 : collapsedColumns[className]) && {
-        width: '24px',
-        flexGrow: 0
-      }),
-      onClick: function onClick() {
-        onToggleCollapsed(className);
-      },
-      children: collapsedColumns != null && collapsedColumns[className] ? jsx(ColumnCollapsed, {}) : jsxs(Fragment, {
-        children: [jsx(Box, {
-          sx: styles$3.text,
-          children: title
-        }), jsx(ColumnCollapse, {
-          className: "column-hover-icon"
-        })]
+  return jsx(Box, {
+    id: hoverId,
+    style: Object.assign({}, (collapsedColumns == null ? void 0 : collapsedColumns[className]) && {
+      width: '24px',
+      flexGrow: 0
+    }),
+    className: columnClasses.columnHeader + " " + className,
+    children: jsx(CustomTooltip, {
+      title: collapsedColumns != null && collapsedColumns[className] ? t('column-expand', {
+        title: title
+      }) : t('column-collapse'),
+      children: jsx(Grid2, {
+        className: columnClasses.columnHeader + " " + className,
+        style: Object.assign({}, (collapsedColumns == null ? void 0 : collapsedColumns[className]) && {
+          width: '24px',
+          flexGrow: 0
+        }),
+        onClick: function onClick() {
+          var _document$getElementB;
+          onToggleCollapsed(className);
+          (_document$getElementB = document.getElementById(hoverId)) == null || _document$getElementB.dispatchEvent(new Event('mouseleave'));
+        },
+        children: collapsedColumns != null && collapsedColumns[className] ? jsx(ColumnCollapsed, {}) : jsxs(Fragment, {
+          children: [jsx(Box, {
+            sx: styles$3.text,
+            children: title
+          }), jsx(ColumnCollapse, {
+            className: "column-hover-icon"
+          })]
+        })
       })
-    })
-  }, collapsedColumns != null && collapsedColumns[className] ? 'Expand' : 'Collapse');
+    }, collapsedColumns != null && collapsedColumns[className] ? 'Expand' : 'Collapse')
+  });
 };
 var styles$3 = {
   text: function text(theme) {
@@ -1653,7 +1660,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
               marks: marks,
               onChange: function onChange(event, newValue) {
                 event.stopPropagation();
-                onLayerChangeOpacity(newValue);
+                onLayerChangeOpacity(isArray(newValue) ? newValue[0] : newValue);
               },
               onKeyDown: onKeyDownSlider,
               onBlur: function onBlur(event) {
@@ -2834,10 +2841,13 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
           case 0:
             _context.prev = 0;
             _context.next = 3;
-            return getCapabilities.getLayersFlattenedFromService(serviceUrl);
+            return queryWMSLayers(serviceUrl);
           case 3:
             _layers = _context.sent;
-            wmService = WMGetServiceFromStore(serviceUrl);
+            _context.next = 6;
+            return queryWMSServiceInfo(serviceUrl);
+          case 6:
+            wmService = _context.sent;
             serviceSetLayers({
               id: wmService.id,
               name: wmService.title,
@@ -2846,17 +2856,17 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
               scope: 'user',
               "abstract": wmService["abstract"]
             });
-            _context.next = 11;
+            _context.next = 13;
             break;
-          case 8:
-            _context.prev = 8;
+          case 10:
+            _context.prev = 10;
             _context.t0 = _context["catch"](0);
-            console.warn(_context.t0.message);
-          case 11:
+            console.warn(_context.t0 instanceof Error ? _context.t0.message : 'addService failed');
+          case 13:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 8]]);
+      }, _callee, null, [[0, 10]]);
     }));
     return function addService(_x) {
       return _ref2.apply(this, arguments);
@@ -3652,7 +3662,7 @@ var BaseLayers = function BaseLayers(_ref) {
 // If already in selectedBaseLayers based on name or id, keep current id
 var constructLayerId = function constructLayerId(baseLayer, selectedBaseLayers) {
   var foundLayer = selectedBaseLayers.find(function (selectedBaseLayer) {
-    return baseLayer.id === selectedBaseLayer.id || baseLayer.name === selectedBaseLayer.name;
+    return (baseLayer == null ? void 0 : baseLayer.id) === (selectedBaseLayer == null ? void 0 : selectedBaseLayer.id) || baseLayer.name === selectedBaseLayer.name;
   });
   return foundLayer ? foundLayer.id : webmapUtils.generateLayerId();
 };
@@ -3669,7 +3679,7 @@ var constructListAvailableBaseLayers = function constructListAvailableBaseLayers
   // Ensure that current selected baselayer(s) are in the baseLayersWithMapId array, otherwise add them
   return selectedBaseLayers.reduce(function (list, selectedBaseLayer) {
     var foundLayer = baseLayersWithMapId.find(function (layer) {
-      return layer.id === selectedBaseLayer.id;
+      return layer.id === (selectedBaseLayer == null ? void 0 : selectedBaseLayer.id);
     });
     if (foundLayer) {
       return list;
@@ -3839,17 +3849,40 @@ var WMSLayerTree = function WMSLayerTree(_ref) {
   React.useEffect(function () {
     var isMounted = true;
     setIsLoading(true);
-    getCapabilities.getLayersFromService(service.url, forceReload).then(function (layerTreeFromPromise) {
-      if (isMounted) {
-        setLayerTree(layerTreeFromPromise);
-        setIsLoading(false);
-      }
-    })["catch"](function (error) {
-      if (isMounted) {
-        setLayerTree(error.toString());
-        setIsLoading(false);
-      }
-    });
+    var makeServiceQuery = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!forceReload) {
+                _context.next = 3;
+                break;
+              }
+              _context.next = 3;
+              return invalidateWMSGetCapabilities(service.url);
+            case 3:
+              queryWMSLayersTree(service.url).then(function (layerTreeFromPromise) {
+                if (isMounted) {
+                  setLayerTree(layerTreeFromPromise);
+                  setIsLoading(false);
+                }
+              })["catch"](function (error) {
+                if (isMounted) {
+                  setLayerTree(error.toString());
+                  setIsLoading(false);
+                }
+              });
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function makeServiceQuery() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    void makeServiceQuery();
     return function () {
       isMounted = false;
       setForceReload(false);
@@ -4295,7 +4328,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
       // Check if valid URL was passed
     } else if (validateServiceUrl(serviceURL)) {
       // Check if service is WMS server
-      getCapabilities.getLayersFromService(serviceURL).then(function (layerTreeFromPromise) {
+      queryWMSLayersTree(serviceURL).then(function (layerTreeFromPromise) {
         // Shorten URL as a naming backup
         var shortenedURL = serviceURL.substring(serviceURL.indexOf('//') + 2, serviceURL.indexOf('?'));
         handleAddToList(layerTreeFromPromise.title || layerTreeFromPromise.name || shortenedURL);
@@ -4674,9 +4707,9 @@ var ProjectionSelect = function ProjectionSelect(_ref) {
           value: currentProjection,
           list: availableProjections,
           currentIndex: index,
-          onChange: function onChange(e) {
-            e.stopPropagation();
-            selectProjection(e.target.value);
+          onChange: function onChange(event) {
+            event.stopPropagation();
+            selectProjection(event.target.value);
           },
           onChangeMouseWheel: function onChangeMouseWheel(e) {
             return selectProjection(e.value);
@@ -4895,36 +4928,45 @@ var LayerManager = function LayerManager(_ref) {
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var getServicesToLoad = function getServicesToLoad(services) {
-  return services.map(function (service) {
-    var wmService = WMGetServiceFromStore(service.url);
-    var scope = service.scope ? service.scope : 'system';
-    return {
-      id: wmService.id,
-      name: service.name,
-      url: service.url,
-      scope: scope,
-      "abstract": service["abstract"] || wmService["abstract"]
-    };
-  });
-};
+var getServicesToLoad = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(services) {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          return _context2.abrupt("return", Promise.all(services.map( /*#__PURE__*/function () {
+            var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(service) {
+              var scope;
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    scope = service.scope ? service.scope : 'system';
+                    return _context.abrupt("return", {
+                      id: getWMSServiceId(service.url),
+                      name: service.name,
+                      url: service.url,
+                      scope: scope,
+                      "abstract": service["abstract"]
+                    });
+                  case 2:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            return function (_x2) {
+              return _ref2.apply(this, arguments);
+            };
+          }())));
+        case 1:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function getServicesToLoad(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
 var useFetchServices = function useFetchServices(dialogType, preloadedServices, shouldDisableFetch) {
   if (preloadedServices === void 0) {
     preloadedServices = preloadedDefaultMapServices;
@@ -4947,7 +4989,7 @@ var useFetchServices = function useFetchServices(dialogType, preloadedServices,
   React.useEffect(function () {
     if (!shouldDisableFetch && isOpenInStore && preloadedServices && preloadedServices.length > 0 && !services.length) {
       var allServicesToLoad = mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices());
-      fetchInitialServices(getServicesToLoad(allServicesToLoad));
+      void getServicesToLoad(allServicesToLoad).then(fetchInitialServices);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpenInStore, services]);
@@ -5309,38 +5351,6 @@ var MultiMapMultiDimensionSelectConnect = function MultiMapMultiDimensionSelectC
   });
 };
 
-var ZoomControlConnect = function ZoomControlConnect(_ref) {
-  var mapId = _ref.mapId;
-  var isVisible = useSelector(function (store) {
-    return mapSelectors.isZoomControlsVisible(store, mapId);
-  });
-  var adagucRef = React.useRef(null);
-  React.useEffect(function () {
-    var webmapjs = webmapUtils.getWMJSMapById(mapId);
-    if (!webmapjs) {
-      return;
-    }
-    adagucRef.current = webmapjs;
-  }, [mapId]);
-  var onZoomIn = function onZoomIn() {
-    return adagucRef.current.zoomIn(undefined);
-  };
-  var onZoomOut = function onZoomOut() {
-    return adagucRef.current.zoomOut();
-  };
-  var onZoomReset = function onZoomReset() {
-    return adagucRef.current.zoomToLayer(adagucRef.current.getActiveLayer());
-  };
-  if (!isVisible) {
-    return null;
-  }
-  return jsx(ZoomControls, {
-    onZoomIn: onZoomIn,
-    onZoomOut: onZoomOut,
-    onZoomReset: onZoomReset
-  });
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -5586,393 +5596,297 @@ var useKeyboardZoomAndPan = function useKeyboardZoomAndPan(mapIsActive, mapId, m
 };
 var PAN_STEP_PERCENTAGE = 0.02;
 
-var _excluded$2 = ["mapId", "children"];
-var ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION';
-/**
- * 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 MapViewConnect = function MapViewConnect(_ref) {
+var SearchControlButtonConnect = function SearchControlButtonConnect(_ref) {
   var mapId = _ref.mapId,
-    children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  var mapRef = React.useRef(null);
-  var store = useStore();
-  var mapDimensions = useSelector(function (store) {
-    return mapSelectors.getMapDimensions(store, mapId);
-  });
-  var layers = useSelector(function (store) {
-    return mapSelectors.getMapLayers(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 linkedFeatures = useSelector(function (store) {
-    var _store$syncronization;
-    return genericSelectors.selectLinkedFeatures((_store$syncronization = store.syncronizationGroupStore) == null ? void 0 : _store$syncronization.linkedState, mapId);
-  });
-  var bbox = useSelector(function (store) {
-    return mapSelectors.getBbox(store, mapId);
-  });
-  var srs = useSelector(function (store) {
-    return mapSelectors.getSrs(store, mapId);
-  });
-  var activeLayerId = useSelector(function (store) {
-    return mapSelectors.getActiveLayerId(store, mapId);
-  });
-  var animationDelay = useSelector(function (store) {
-    return mapSelectors.getMapAnimationDelay(store, mapId);
-  });
-  var mapPinLocation = useSelector(function (store) {
-    return mapSelectors.getPinLocation(store, mapId);
-  });
-  var linkedPanelId = useSelector(function (store) {
-    return genericSelectors.selectLinkedPanelId(store, mapId);
-  });
-  var selectedFeatureCoordinates = useSelector(function (store) {
-    return genericSelectors.getSelectedFeature(store.syncronizationGroupStore, linkedPanelId);
-  });
-  var disableMapPin = useSelector(function (store) {
-    return mapSelectors.getDisableMapPin(store, mapId);
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source;
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  var dispatch = useDispatch();
+  var dialogType = uiTypes.DialogTypes.Search + "-" + mapId;
+  var currentActiveMapId = useSelector(function (store) {
+    return uiSelectors.getDialogMapId(store, dialogType);
   });
-  var displayMapPin = useSelector(function (store) {
-    return mapSelectors.getDisplayMapPin(store, mapId);
+  var isOpenInStore = useSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, dialogType);
   });
-  var timestep = useSelector(function (store) {
-    return mapSelectors.getMapTimeStep(store, mapId);
+  var openSearchDialog = React__default.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: dialogType,
+      mapId: mapId,
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: source
+    }));
+  }, [currentActiveMapId, dialogType, dispatch, isOpenInStore, mapId, source]);
+  return jsx(MapControlButton, {
+    onClick: openSearchDialog,
+    title: t('search-title'),
+    "aria-label": t('search-title-aria'),
+    isActive: isOpenInStore,
+    children: jsx(Search, {})
   });
+};
+
+var MY_LOCATION = 'MyLocation';
+var locationOptions = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  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 _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
   var dispatch = useDispatch();
-  var mapChangeDimension = React.useCallback(function (mapDimensionPayload) {
-    if (mapDimensionPayload.dimension) {
-      var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-      if (!wmjsMap) {
-        return;
-      }
-      var dimension = wmjsMap.getDimension(mapDimensionPayload.dimension.name);
-      if (dimension && dimension.currentValue === mapDimensionPayload.dimension.currentValue) {
-        return;
+  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;
       }
     }
-    dispatch(mapActions.mapChangeDimension(mapDimensionPayload));
-  }, [dispatch, mapId]);
-  var setTime = React.useCallback(function (setTimePayload) {
-    var _wmjsMap$getDimension;
-    var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-    /* Check if the map not already has this value set, otherwise this component will re-render */
-    if (wmjsMap && wmjsMap.getDimension('time') && ((_wmjsMap$getDimension = wmjsMap.getDimension('time')) == null ? void 0 : _wmjsMap$getDimension.currentValue) === setTimePayload.value) {
-      return;
-    }
-    dispatch(genericActions.setTime(setTimePayload));
-  }, [dispatch, mapId]);
-  var updateLayerInformation = React.useCallback(function (payload) {
-    dispatch(layerActions.onUpdateLayerInformation(payload));
-  }, [dispatch]);
-  var registerMap = React.useCallback(function (payload) {
-    dispatch(mapActions.registerMap(payload));
-  }, [dispatch]);
-  var unregisterMap = React.useCallback(function (payload) {
-    dispatch(mapActions.unregisterMap(payload));
-  }, [dispatch]);
-  var genericSetBbox = React.useCallback(function (payload) {
-    dispatch(genericActions.setBbox(payload));
-  }, [dispatch]);
-  var syncGroupAddSource = React.useCallback(function (payload) {
-    dispatch(genericActions.syncGroupAddSource(payload));
-  }, [dispatch]);
-  var syncGroupRemoveSource = React.useCallback(function (payload) {
-    dispatch(genericActions.syncGroupRemoveSource(payload));
-  }, [dispatch]);
-  var layerError = React.useCallback(function (payload) {
-    dispatch(layerActions.layerError(payload));
-  }, [dispatch]);
-  var mapPinChangeLocation = React.useCallback(function (payload) {
-    dispatch(mapActions.setMapPinLocation(payload));
-  }, [dispatch]);
-  var setSelectedFeature = React.useCallback(function (payload) {
-    dispatch(layerActions.setSelectedFeature(payload));
-  }, [dispatch]);
-  var handleFeatureSelect = function handleFeatureSelect(mapId, featureId) {
-    dispatch(genericActions.addSharedData({
-      panelId: mapId,
-      data: {
-        selectedFeatureId: featureId || ''
-      }
-    }));
-  };
-  var updateFeature = React.useCallback(function (_ref2) {
-    var geojson = _ref2.geojson,
-      reason = _ref2.reason,
-      layerId = _ref2.layerId;
-    var activeDrawToolId = drawtoolSelectors.getActiveDrawToolId(store.getState());
-    var activeDrawMode = drawtoolSelectors.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),
-      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());
-    dispatch(layerActions.exitFeatureDrawMode({
-      reason: reason,
-      layerId: layerId,
-      shouldAllowMultipleShapes: drawtoolSelectors.getShouldAllowMultipleShapes(store.getState(), activeDrawToolId)
-    }));
-  }, [dispatch, store]);
-  var isActiveWindowId = useSelector(function (store) {
-    return uiSelectors.getIsActiveWindowId(store, mapId);
+    return undefined;
   });
-  useKeyboardZoomAndPan(isActiveWindowId, mapId, mapRef.current);
-  useTouchZoomPan(isActiveWindowId, mapId);
-  var unRegister = React.useCallback(function (mapId) {
-    unregisterMap({
-      mapId: mapId
-    });
-    syncGroupRemoveSource({
-      id: mapId
-    });
-  }, [syncGroupRemoveSource, unregisterMap]);
-  React.useEffect(function () {
-    registerMap({
-      mapId: mapId
-    });
-    syncGroupAddSource({
-      id: mapId,
-      type: [syncConstants.SYNCGROUPS_TYPE_SETTIME, syncConstants.SYNCGROUPS_TYPE_SETBBOX]
-    });
-    dispatch(loadingIndicatorActions.setGetMapIsLoading({
-      id: mapId,
-      isGetMapLoading: false
-    }));
-  }, [dispatch, mapId, registerMap, syncGroupAddSource]);
-  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]);
-  var onGetCapabilitiesLoadStart = React.useCallback(function () {
-    dispatch(loadingIndicatorActions.setGetCapabilitiesIsLoading({
-      id: mapId,
-      isGetCapabilitiesLoading: true
-    }));
-  }, [dispatch, mapId]);
-  var onGetCapabilitiesLoadReady = React.useCallback(function () {
-    dispatch(loadingIndicatorActions.setGetCapabilitiesIsLoading({
-      id: mapId,
-      isGetCapabilitiesLoading: false
-    }));
-  }, [dispatch, mapId]);
-  var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
-  var _useSelector = useSelector(function (state) {
-      return genericSelectors.selectSharedData(state, linkedPanelId);
-    }),
-    hoverId = _useSelector.hoverId;
-  var debouncedSetHoverFeature = React.useMemo(function () {
-    return debounce(function (featureId) {
-      return dispatch(genericActions.addSharedData({
-        panelId: linkedPanelId,
-        data: {
-          hoverId: featureId
-        }
+  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
       }));
-    }, 200);
-  }, [dispatch, linkedPanelId]);
-  return jsx("div", {
-    style: {
-      height: '100%'
-    },
-    ref: mapRef,
-    children: jsxs(MapView, Object.assign({}, props, {
-      mapId: mapId,
-      linkedFeatures: {
-        type: 'FeatureCollection',
-        features: linkedFeatures.flatMap(function (feature) {
-          return feature.geoJSON.features;
-        })
-      },
-      isTimeScrollingEnabled: isTimeScrollingEnabled,
-      srs: srs,
-      bbox: bbox,
-      mapPinLocation: displayMapPin ? selectedFeatureCoordinates || mapPinLocation : undefined,
-      dimensions: mapDimensions,
-      activeLayerId: activeLayerId,
-      animationDelay: animationDelay,
-      timestep: timestep,
-      displayMapPin: displayMapPin,
-      disableMapPin: disableMapPin,
-      onMapChangeDimension: function onMapChangeDimension(mapDimensionPayload) {
-        if (mapDimensionPayload && mapDimensionPayload.dimension && mapDimensionPayload.dimension.name && mapDimensionPayload.dimension.name === 'time') {
-          setTime({
-            sourceId: mapId,
-            origin: mapDimensionPayload.origin + "==> " + ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION,
-            value: handleDateUtilsISOString(mapDimensionPayload.dimension.currentValue)
-          });
-        } else {
-          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) {
+      setIsLoading(false);
+    } else if (navigator.geolocation && mapId && layerLocationId === '' && circleDrawFunctionId) {
+      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 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.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);
+        wmjsMap.calculateBoundingBoxAndZoom(latitude, longitude);
+      }, function (error) {
+        setIsLoading(false);
+        setHasFailed(true);
+        console.warn(t('search-error', {
+          error: error.message
+        }));
+      }, locationOptions);
+    }
+  };
+  var chooseIcon = function chooseIcon() {
+    return hasFailed ? jsx(Exclamation, {
+      style: {
+        color: 'red'
       },
-      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 == null ? void 0 : linkedFeatures.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
-              });
-            }
+      "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';
           },
-          updateGeojson: function updateGeojson(geojson, reason) {
-            updateFeature({
-              geojson: geojson,
-              layerId: layer.id,
-              reason: reason
-            });
+          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';
           },
-          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]
-    }))
+          animationDuration: '1000ms',
+          position: 'absolute',
+          left: 0
+        }, _sx["& ." + circularProgressClasses.circle] = {
+          strokeLinecap: 'round'
+        }, _sx.padding = '8px', _sx),
+        thickness: 6
+      })]
+    }) : jsx(CustomIconButton, {
+      title: t('search-find-location'),
+      "aria-label": MY_LOCATION,
+      onClick: handleLocationClick,
+      isSelected: layerLocationId !== '',
+      size: "large",
+      children: chooseIcon()
+    })
+  });
+};
+
+var SearchDialog = function SearchDialog(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    _ref$mapId = _ref.mapId,
+    mapId = _ref$mapId === void 0 ? '' : _ref$mapId;
+  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, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      position: 'absolute',
+      pointerEvents: 'all',
+      zIndex: 999,
+      left: 50,
+      top: 15,
+      borderBottom: '1px solid grey',
+      backgroundColor: function backgroundColor(theme) {
+        return theme.palette.background.paper;
+      }
+    },
+    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",
+              children: jsx(Close, {})
+            })
+          })
+        }
+      }
+    })]
+  }) : null;
+};
+
+var SearchControlConnect = function SearchControlConnect(_ref) {
+  var mapId = _ref.mapId;
+  var dialogType = uiTypes.DialogTypes.Search + "-" + mapId;
+  var _useSetupDialog = useSetupDialog(dialogType),
+    isDialogOpen = _useSetupDialog.isDialogOpen,
+    onCloseDialog = _useSetupDialog.onCloseDialog;
+  return jsx(SearchDialog, {
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    mapId: mapId
+  });
+};
+
+var ZoomControlConnect = function ZoomControlConnect(_ref) {
+  var mapId = _ref.mapId;
+  var isVisible = useSelector(function (store) {
+    return mapSelectors.isZoomControlsVisible(store, mapId);
+  });
+  var adagucRef = React.useRef(null);
+  React.useEffect(function () {
+    var webmapjs = webmapUtils.getWMJSMapById(mapId);
+    if (!webmapjs) {
+      return;
+    }
+    adagucRef.current = webmapjs;
+  }, [mapId]);
+  var onZoomIn = function onZoomIn() {
+    return adagucRef.current.zoomIn(undefined);
+  };
+  var onZoomOut = function onZoomOut() {
+    return adagucRef.current.zoomOut();
+  };
+  var onZoomReset = function onZoomReset() {
+    return adagucRef.current.zoomToLayer(adagucRef.current.getActiveLayer());
+  };
+  if (!isVisible) {
+    return null;
+  }
+  return jsx(ZoomControls, {
+    onZoomIn: onZoomIn,
+    onZoomOut: onZoomOut,
+    onZoomReset: onZoomReset
   });
 };
 
-var _excluded$1 = ["showMapId"];
+var _excluded$2 = ["showMapId"];
 var LegendConnectComponent = function LegendConnectComponent(_ref) {
   var _ref$showMapId = _ref.showMapId,
     showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
@@ -6026,7 +5940,7 @@ var LegendConnectComponent = function LegendConnectComponent(_ref) {
 var LegendConnect = function LegendConnect(_ref2) {
   var _ref2$showMapId = _ref2.showMapId,
     showMapId = _ref2$showMapId === void 0 ? false : _ref2$showMapId,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
   return jsx(LegendConnectComponent, Object.assign({
     showMapId: showMapId
   }, props));
@@ -6215,7 +6129,7 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
           case 9:
             _context.prev = 9;
             _context.t0 = _context["catch"](0);
-            errorMessage = _context.t0.message;
+            errorMessage = _context.t0 instanceof Error ? _context.t0.message : 'fetchLayerInfo failed';
             updateLayerResult({
               layerId: layerId,
               data: errorMessage,
@@ -6422,261 +6336,434 @@ var GetFeatureInfoButtonConnect = function GetFeatureInfoButtonConnect(_ref) {
   });
 };
 
-var SearchControlButtonConnect = function SearchControlButtonConnect(_ref) {
+var _excluded$1 = ["mapId", "children", "controls"];
+var ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION';
+/**
+ * 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 MapViewConnect = function MapViewConnect(_ref) {
+  var _linkedFeatures$conca;
   var mapId = _ref.mapId,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source;
-  var _useCoreTranslation = useCoreTranslation(),
-    t = _useCoreTranslation.t;
-  var dispatch = useDispatch();
-  var dialogType = uiTypes.DialogTypes.Search + "-" + mapId;
-  var currentActiveMapId = useSelector(function (store) {
-    return uiSelectors.getDialogMapId(store, dialogType);
+    children = _ref.children,
+    _ref$controls = _ref.controls,
+    controls = _ref$controls === void 0 ? {
+      mapControlsPositionTop: 0,
+      zoomControls: true
+    } : _ref$controls,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var mapRef = React.useRef(null);
+  var store = useStore();
+  var mapDimensions = useSelector(function (store) {
+    return mapSelectors.getMapDimensions(store, mapId);
   });
-  var isOpenInStore = useSelector(function (store) {
-    return uiSelectors.getisDialogOpen(store, dialogType);
+  var layers = useSelector(function (store) {
+    return mapSelectors.getMapLayers(store, mapId);
   });
-  var openSearchDialog = React__default.useCallback(function () {
-    dispatch(uiActions.setActiveMapIdForDialog({
-      type: dialogType,
-      mapId: mapId,
-      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
-      source: source
-    }));
-  }, [currentActiveMapId, dialogType, dispatch, isOpenInStore, mapId, source]);
-  return jsx(MapControlButton, {
-    onClick: openSearchDialog,
-    title: t('search-title'),
-    "aria-label": t('search-title-aria'),
-    isActive: isOpenInStore,
-    children: jsx(Search, {})
+  var baseLayers = useSelector(function (store) {
+    return mapSelectors.getMapBaseLayers(store, mapId);
   });
-};
-
-var MY_LOCATION = 'MyLocation';
-var locationOptions = {
-  enableHighAccuracy: false,
-  timeout: 5000,
-  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 _useCoreTranslation = useCoreTranslation(),
-    t = _useCoreTranslation.t;
-  var dispatch = useDispatch();
-  var layersBelongsToCurrentMapId = useSelector(function (store) {
-    return layerSelectors.getLayersByMapId(store, mapId || '');
+  var overLayers = useSelector(function (store) {
+    return mapSelectors.getMapOverLayers(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;
+  var featureLayers = useSelector(function (store) {
+    return mapSelectors.getMapFeatureLayers(store, mapId);
+  });
+  var linkedFeatures = useSelector(function (store) {
+    var _store$syncGroups;
+    return genericSelectors.selectLinkedFeatures((_store$syncGroups = store.syncGroups) == null ? void 0 : _store$syncGroups.linkedState, mapId);
+  });
+  var linkedFormFeatures = useSelector(function (store) {
+    var _store$syncGroups2;
+    return genericSelectors.selectLinkedFormFeatures((_store$syncGroups2 = store.syncGroups) == null ? void 0 : _store$syncGroups2.linkedState, mapId);
+  });
+  var bbox = useSelector(function (store) {
+    return mapSelectors.getBbox(store, mapId);
+  });
+  var srs = useSelector(function (store) {
+    return mapSelectors.getSrs(store, mapId);
+  });
+  var activeLayerId = useSelector(function (store) {
+    return mapSelectors.getActiveLayerId(store, mapId);
+  });
+  var animationDelay = useSelector(function (store) {
+    return mapSelectors.getMapAnimationDelay(store, mapId);
+  });
+  var mapPinLocation = useSelector(function (store) {
+    return mapSelectors.getPinLocation(store, mapId);
+  });
+  var linkedPanelId = useSelector(function (store) {
+    return genericSelectors.selectLinkedPanelId(store, mapId);
+  });
+  var selectedFeatureCoordinates = useSelector(function (store) {
+    return genericSelectors.getSelectedFeature(store.syncGroups, linkedPanelId);
+  });
+  var disableMapPin = useSelector(function (store) {
+    return mapSelectors.getDisableMapPin(store, mapId);
+  });
+  var displayMapPin = useSelector(function (store) {
+    return mapSelectors.getDisplayMapPin(store, mapId);
+  });
+  var timestep = useSelector(function (store) {
+    return mapSelectors.getMapTimeStep(store, mapId);
+  });
+  var dispatch = useDispatch();
+  var mapChangeDimension = React.useCallback(function (mapDimensionPayload) {
+    if (mapDimensionPayload.dimension) {
+      var wmjsMap = webmapUtils.getWMJSMapById(mapId);
+      if (!wmjsMap) {
+        return;
+      }
+      var dimension = wmjsMap.getDimension(mapDimensionPayload.dimension.name);
+      if (dimension && dimension.currentValue === mapDimensionPayload.dimension.currentValue) {
+        return;
       }
     }
-    return undefined;
+    dispatch(mapActions.mapChangeDimension(mapDimensionPayload));
+  }, [dispatch, mapId]);
+  var setTime = React.useCallback(function (setTimePayload) {
+    var _wmjsMap$getDimension;
+    var wmjsMap = webmapUtils.getWMJSMapById(mapId);
+    /* Check if the map not already has this value set, otherwise this component will re-render */
+    if (wmjsMap && wmjsMap.getDimension('time') && ((_wmjsMap$getDimension = wmjsMap.getDimension('time')) == null ? void 0 : _wmjsMap$getDimension.currentValue) === setTimePayload.value) {
+      return;
+    }
+    dispatch(genericActions.setTime(setTimePayload));
+  }, [dispatch, mapId]);
+  var updateLayerInformation = React.useCallback(function (payload) {
+    dispatch(layerActions.onUpdateLayerInformation(payload));
+  }, [dispatch]);
+  var registerMap = React.useCallback(function (payload) {
+    dispatch(mapActions.registerMap(payload));
+  }, [dispatch]);
+  var unregisterMap = React.useCallback(function (payload) {
+    dispatch(mapActions.unregisterMap(payload));
+  }, [dispatch]);
+  var genericSetBbox = React.useCallback(function (payload) {
+    dispatch(genericActions.setBbox(payload));
+  }, [dispatch]);
+  var syncGroupAddSource = React.useCallback(function (payload) {
+    dispatch(genericActions.syncGroupAddSource(payload));
+  }, [dispatch]);
+  var syncGroupRemoveSource = React.useCallback(function (payload) {
+    dispatch(genericActions.syncGroupRemoveSource(payload));
+  }, [dispatch]);
+  var layerError = React.useCallback(function (payload) {
+    dispatch(layerActions.layerError(payload));
+  }, [dispatch]);
+  var mapPinChangeLocation = React.useCallback(function (payload) {
+    dispatch(mapActions.setMapPinLocation(payload));
+  }, [dispatch]);
+  var setSelectedFeature = React.useCallback(function (payload) {
+    dispatch(layerActions.setSelectedFeature(payload));
+  }, [dispatch]);
+  var handleFeatureSelect = function handleFeatureSelect(mapId, featureId) {
+    dispatch(genericActions.addSharedData({
+      panelId: mapId,
+      data: {
+        selectedFeatureId: featureId || ''
+      }
+    }));
+  };
+  var updateFeature = React.useCallback(function (_ref2) {
+    var geojson = _ref2.geojson,
+      reason = _ref2.reason,
+      layerId = _ref2.layerId;
+    var activeDrawToolId = drawtoolSelectors.getActiveDrawToolId(store.getState());
+    var activeDrawMode = drawtoolSelectors.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),
+      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());
+    dispatch(layerActions.exitFeatureDrawMode({
+      reason: reason,
+      layerId: layerId,
+      shouldAllowMultipleShapes: drawtoolSelectors.getShouldAllowMultipleShapes(store.getState(), activeDrawToolId)
+    }));
+  }, [dispatch, store]);
+  var isActiveWindowId = useSelector(function (store) {
+    return uiSelectors.getIsActiveWindowId(store, mapId);
   });
-  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
+  useKeyboardZoomAndPan(isActiveWindowId, mapId, mapRef.current);
+  useTouchZoomPan(isActiveWindowId, mapId);
+  var unRegister = React.useCallback(function (mapId) {
+    unregisterMap({
+      mapId: mapId
+    });
+    syncGroupRemoveSource({
+      id: mapId
+    });
+  }, [syncGroupRemoveSource, unregisterMap]);
+  React.useEffect(function () {
+    registerMap({
+      mapId: mapId
+    });
+    syncGroupAddSource({
+      id: mapId,
+      type: [syncConstants.SYNCGROUPS_TYPE_SETTIME, syncConstants.SYNCGROUPS_TYPE_SETBBOX]
+    });
+    dispatch(loadingIndicatorActions.setGetMapIsLoading({
+      id: mapId,
+      isGetMapLoading: false
+    }));
+  }, [dispatch, mapId, registerMap, syncGroupAddSource]);
+  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]);
+  var onGetCapabilitiesLoadStart = React.useCallback(function () {
+    dispatch(loadingIndicatorActions.setGetCapabilitiesIsLoading({
+      id: mapId,
+      isGetCapabilitiesLoading: true
+    }));
+  }, [dispatch, mapId]);
+  var onGetCapabilitiesLoadReady = React.useCallback(function () {
+    dispatch(loadingIndicatorActions.setGetCapabilitiesIsLoading({
+      id: mapId,
+      isGetCapabilitiesLoading: false
+    }));
+  }, [dispatch, mapId]);
+  var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
+  var _useSelector = useSelector(function (state) {
+      return genericSelectors.selectSharedData(state, linkedPanelId);
+    }),
+    hoverId = _useSelector.hoverId;
+  var debouncedSetHoverFeature = React.useMemo(function () {
+    return debounce(function (featureId) {
+      return dispatch(genericActions.addSharedData({
+        panelId: linkedPanelId,
+        data: {
+          hoverId: featureId
+        }
       }));
-      setIsLoading(false);
-    } else if (navigator.geolocation && mapId && layerLocationId === '' && circleDrawFunctionId) {
-      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]
+    }, 200);
+  }, [dispatch, linkedPanelId]);
+  return jsxs("div", {
+    style: {
+      height: '100%'
+    },
+    ref: mapRef,
+    children: [jsxs(MapView, Object.assign({}, props, {
+      mapId: mapId,
+      controls: {},
+      linkedFeatures: {
+        type: 'FeatureCollection',
+        features: linkedFeatures.flatMap(function (feature) {
+          return feature.geoJSON.features;
+        })
+      },
+      isTimeScrollingEnabled: isTimeScrollingEnabled,
+      srs: srs,
+      bbox: bbox,
+      mapPinLocation: displayMapPin ? selectedFeatureCoordinates || mapPinLocation : undefined,
+      dimensions: mapDimensions,
+      activeLayerId: activeLayerId,
+      animationDelay: animationDelay,
+      timestep: timestep,
+      displayMapPin: displayMapPin,
+      disableMapPin: disableMapPin,
+      onMapChangeDimension: function onMapChangeDimension(mapDimensionPayload) {
+        if (mapDimensionPayload && mapDimensionPayload.dimension && mapDimensionPayload.dimension.name && mapDimensionPayload.dimension.name === 'time') {
+          setTime({
+            sourceId: mapId,
+            origin: mapDimensionPayload.origin + "==> " + ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION,
+            value: handleDateUtilsISOString(mapDimensionPayload.dimension.currentValue)
+          });
+        } else {
+          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);
             }
-          }]
-        };
-        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) {
-        setIsLoading(false);
-        setHasFailed(true);
-        console.warn(t('search-error', {
-          error: error.message
-        }));
-      }, locationOptions);
-    }
-  };
-  var chooseIcon = function chooseIcon() {
-    return hasFailed ? jsx(Exclamation, {
-      style: {
-        color: 'red'
-      },
-      "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';
+          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)
+            });
           },
-          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';
+          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
+              });
+            }
           },
-          animationDuration: '1000ms',
-          position: 'absolute',
-          left: 0
-        }, _sx["& ." + circularProgressClasses.circle] = {
-          strokeLinecap: 'round'
-        }, _sx.padding = '8px', _sx),
-        thickness: 6
-      })]
-    }) : jsx(CustomIconButton, {
-      title: t('search-find-location'),
-      "aria-label": MY_LOCATION,
-      onClick: handleLocationClick,
-      isSelected: layerLocationId !== '',
-      size: "large",
-      children: chooseIcon()
-    })
-  });
-};
-
-var SearchDialog = function SearchDialog(_ref) {
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    _ref$mapId = _ref.mapId,
-    mapId = _ref$mapId === void 0 ? '' : _ref$mapId;
-  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, {
-    sx: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      position: 'absolute',
-      pointerEvents: 'all',
-      zIndex: 999,
-      left: 50,
-      top: 15,
-      borderBottom: '1px solid grey',
-      backgroundColor: function backgroundColor(theme) {
-        return theme.palette.background.paper;
-      }
-    },
-    children: [jsx(MyMapLocation, {
+          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,
-      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",
-              children: jsx(Close, {})
-            })
-          })
-        }
-      }
+      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
     })]
-  }) : null;
-};
-
-var SearchControlConnect = function SearchControlConnect(_ref) {
-  var mapId = _ref.mapId;
-  var dialogType = uiTypes.DialogTypes.Search + "-" + mapId;
-  var _useSetupDialog = useSetupDialog(dialogType),
-    isDialogOpen = _useSetupDialog.isDialogOpen,
-    onCloseDialog = _useSetupDialog.onCloseDialog;
-  return jsx(SearchDialog, {
-    isOpen: isDialogOpen,
-    onClose: onCloseDialog,
-    mapId: mapId
   });
 };
 
@@ -7635,7 +7722,8 @@ var titleStyle = function titleStyle(theme) {
     zIndex: 50,
     color: theme.palette.common.black,
     whiteSpace: 'nowrap',
-    userSelect: 'none'
+    userSelect: 'none',
+    textShadow: '1px 1px 2px  #ffffffE6, -1px 1px 2px #ffffffE6, -1px -1px 2px  #ffffffE6, 1px -1px 2px #ffffffE6'
   };
 };
 var defaultBbox = {
@@ -7758,7 +7846,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
       }));
     }
     if (shouldDisplayDrawControls) {
-      dispatch(mapStoreActions.addLayer({
+      dispatch(layerActions.addLayer({
         mapId: mapId,
         layer: {
           geojson: emptyGeoJSON,
@@ -7770,7 +7858,18 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var mapControlsPositionTop = title ? 24 : 8;
+  var mapControlConfig = useMemo(function () {
+    return {
+      mapControlsPositionTop: title ? 24 : 8,
+      search: displaySearchButtonInMap,
+      zoomControls: shouldShowZoomControls,
+      layerManagerAndLegend: displayLayerManagerAndLegendButtonInMap,
+      multiLegend: multiLegend,
+      dimensionSelect: displayDimensionSelectButtonInMap,
+      getFeatureInfo: displayGetFeatureInfoButtonInMap,
+      additionalMapControls: mapControls
+    };
+  }, [title, displaySearchButtonInMap, shouldShowZoomControls, displayLayerManagerAndLegendButtonInMap, multiLegend, displayDimensionSelectButtonInMap, displayGetFeatureInfoButtonInMap, mapControls]);
   return React__default.useMemo(function () {
     renderCounter.count(ConfigurableMapConnect.name + "_" + mapId);
     return jsxs(Box, {
@@ -7786,25 +7885,6 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
         "data-testid": "mapTitle",
         sx: titleStyle,
         children: title
-      }), jsxs(MapControls, {
-        "data-testid": "mapControls",
-        style: {
-          top: mapControlsPositionTop
-        },
-        children: [displaySearchButtonInMap && jsx(SearchControlButtonConnect, {
-          mapId: mapId
-        }), jsx(ZoomControlConnect, {
-          mapId: id
-        }), displayLayerManagerAndLegendButtonInMap && jsx(LayerManagerMapButtonConnect, {
-          mapId: mapId
-        }), displayLayerManagerAndLegendButtonInMap && jsx(LegendMapButtonConnect, {
-          mapId: mapId,
-          multiLegend: multiLegend
-        }), displayDimensionSelectButtonInMap && jsx(MultiDimensionSelectMapButtonsConnect, {
-          mapId: mapId
-        }), displayGetFeatureInfoButtonInMap && jsx(GetFeatureInfoButtonConnect, {
-          mapId: mapId
-        }), mapControls]
       }), !disableTimeSlider && jsx(Box, {
         sx: {
           position: 'absolute',
@@ -7819,7 +7899,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
           mapWindowRef: mapWindowRef
         })
       }), jsx(MapViewConnect, {
-        controls: {},
+        controls: mapControlConfig,
         displayTimeInMap: displayTimeInMap,
         showScaleBar: false,
         shouldAutoFetch: shouldAutoFetch,
@@ -7827,24 +7907,11 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
         shouldDisablePrefetching: shouldDisablePrefetching,
         tileServerSettings: tileServerSettings,
         children: children
-      }), multiLegend && jsx(LegendConnect, {
-        showMapId: true,
-        mapId: mapId,
-        multiLegend: multiLegend
-      }), jsx(SearchControlConnect, {
-        mapId: mapId
       }), showClock && jsx(TimeSliderClockConnect, {
         mapId: mapId
-      }), displayGetFeatureInfoButtonInMap && jsx(GetFeatureInfoConnect, {
-        showMapId: true,
-        mapId: mapId
-      }), jsx(LayerManagerConnect, {
-        mapId: mapId,
-        bounds: "parent",
-        isDocked: true
       })]
     });
-  }, [mapId, title, mapControlsPositionTop, displaySearchButtonInMap, id, displayLayerManagerAndLegendButtonInMap, multiLegend, displayDimensionSelectButtonInMap, displayGetFeatureInfoButtonInMap, tileServerSettings, mapControls, disableTimeSlider, displayTimeInMap, shouldAutoFetch, shouldDisablePrefetching, children, showClock]);
+  }, [mapId, title, id, mapControlConfig, tileServerSettings, disableTimeSlider, displayTimeInMap, shouldAutoFetch, shouldDisablePrefetching, children, showClock]);
 };
 
 var mapBoxStyle = function mapBoxStyle(theme) {
@@ -7923,7 +7990,7 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
         isAlwaysVisible: true,
         mapWindowRef: multiMapWindowRef
       })
-    }), !multiLegend && jsx(LegendConnect, {
+    }), jsx(LegendConnect, {
       showMapId: true,
       mapId: firstMapId,
       multiLegend: multiLegend
@@ -7964,7 +8031,7 @@ var useGetLatestReferenceTime = function useGetLatestReferenceTime(inputLayer) {
     setLatestReferenceTime = _React$useState[1];
   React.useEffect(function () {
     var wmLayer = new WMLayer(Object.assign({}, inputLayer));
-    wmLayer.parseLayerPromise().then(function (layer) {
+    wmLayer.parseLayer().then(function (layer) {
       var refTimeDim = layer.getDimension('reference_time');
       var lastRefTime = refTimeDim.getLastValue();
       setLatestReferenceTime(lastRefTime);
@@ -8004,23 +8071,24 @@ var makeMapPreset = function makeMapPreset(timeIncrement, uniqueId, referenceTim
     title: "FC +" + timeIncrement,
     displayTimeInMap: true,
     bbox: {
-      left: -129849.7860570465,
-      bottom: 6180677.243149376,
-      right: 1215891.3289626688,
-      top: 7540256.313079321
+      left: -638936.0386164065,
+      bottom: 6068439.661512798,
+      right: 1613044.3568348314,
+      top: 7876599.103115981
     },
     srs: PROJECTION.EPSG_3857.value,
     componentType: 'MultiMap',
     layers: layers.map(function (layer, index) {
       return Object.assign({}, layer, {
         id: uniqueId + "-" + index,
-        dimensions: [{
+        /* Set time dimensions if layer type is not overLayer */
+        dimensions: layer.layerType !== LayerType.overLayer ? [{
           name: 'reference_time',
           currentValue: referenceTime
         }, {
           name: 'time',
           currentValue: mapTime
-        }]
+        }] : []
       });
     }),
     displayLayerManagerAndLegendButtonInMap: displayLayerManagerAndLegendButtonInMap,
@@ -8038,8 +8106,10 @@ var ModelRunInterval = function ModelRunInterval(_ref) {
     _ref$multiLegend = _ref.multiLegend,
     multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
   var displayLayerManagerAndLegendButtonInAllMaps = !useHasSyncGroupWithLayerActions(syncGroupsIds);
-  /* Get latest reference time for this layer */
-  var latestReferenceTime = useGetLatestReferenceTime(layers[0]);
+  /* Get latest reference time for layer that is not an overLayer */
+  var latestReferenceTime = useGetLatestReferenceTime(layers.find(function (layer) {
+    return layer.layerType !== LayerType.overLayer;
+  }));
   if (latestReferenceTime === '') {
     return jsx("div", {
       children: "Loading..."
@@ -8071,7 +8141,7 @@ var useGetReferenceTimes = function useGetReferenceTimes(inputLayer) {
   React.useEffect(function () {
     var referenceTimes = [];
     var wmLayer = new WMLayer(Object.assign({}, inputLayer));
-    wmLayer.parseLayerPromise().then(function (layer) {
+    wmLayer.parseLayer().then(function (layer) {
       var refTimeDim = layer.getDimension('reference_time');
       /* Loop through all values of the dimension.
        A map cannot be used for iterating,  as the dimension values are not in an array (it is an API). */