@opengeoweb/core 10.0.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, queryWMSServiceInfo, queryWMSLayers, queryWMSLayersTree, invalidateWMSGetCapabilities, LayerType, getWMSServiceId, 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",
@@ -1660,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) {
@@ -2861,7 +2861,7 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
           case 10:
             _context.prev = 10;
             _context.t0 = _context["catch"](0);
-            console.warn(_context.t0.message);
+            console.warn(_context.t0 instanceof Error ? _context.t0.message : 'addService failed');
           case 13:
           case "end":
             return _context.stop();
@@ -3662,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();
 };
@@ -3679,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;
@@ -4707,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);
@@ -5351,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.
@@ -5628,398 +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 _linkedFeatures$conca;
+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 linkedFormFeatures = useSelector(function (store) {
-    var _store$syncronization2;
-    return genericSelectors.selectLinkedFormFeatures((_store$syncronization2 = store.syncronizationGroupStore) == null ? void 0 : _store$syncronization2.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$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);
-            }
+      "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
-              });
-            }
-          },
-          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]
-    }))
+          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,
@@ -6073,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));
@@ -6262,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,
@@ -6469,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);
-  });
-  var isOpenInStore = useSelector(function (store) {
-    return uiSelectors.getisDialogOpen(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 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 layers = useSelector(function (store) {
+    return mapSelectors.getMapLayers(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 baseLayers = useSelector(function (store) {
+    return mapSelectors.getMapBaseLayers(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 overLayers = useSelector(function (store) {
+    return mapSelectors.getMapOverLayers(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
+  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;
+      }
+    }
+    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);
+  });
+  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
   });
 };
 
@@ -7682,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 = {
@@ -7805,7 +7846,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
       }));
     }
     if (shouldDisplayDrawControls) {
-      dispatch(mapStoreActions.addLayer({
+      dispatch(layerActions.addLayer({
         mapId: mapId,
         layer: {
           geojson: emptyGeoJSON,
@@ -7817,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, {
@@ -7833,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',
@@ -7866,7 +7899,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
           mapWindowRef: mapWindowRef
         })
       }), jsx(MapViewConnect, {
-        controls: {},
+        controls: mapControlConfig,
         displayTimeInMap: displayTimeInMap,
         showScaleBar: false,
         shouldAutoFetch: shouldAutoFetch,
@@ -7874,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) {
@@ -7970,7 +7990,7 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
         isAlwaysVisible: true,
         mapWindowRef: multiMapWindowRef
       })
-    }), !multiLegend && jsx(LegendConnect, {
+    }), jsx(LegendConnect, {
       showMapId: true,
       mapId: firstMapId,
       multiLegend: multiLegend
@@ -8051,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,
@@ -8085,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..."