@opengeoweb/core 2.7.0 → 2.8.0

package/index.esm.js

@@ -3174,6 +3174,7 @@ var UI_REGISTER_DIALOG = 'UI_REGISTER_DIALOG';
 var UI_UNREGISTER_DIALOG = 'UI_UNREGISTER_DIALOG';
 var UI_TOGGLE_DIALOG = 'UI_TOGGLE_DIALOG';
 var UI_ORDER_DIALOG = 'UI_ORDER_DIALOG';
+var UI_SET_ACTIVE_WINDOW_ID = 'UI_SET_ACTIVE_WINDOW_ID';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3256,6 +3257,19 @@ var orderDialog = function orderDialog(payload) {
     payload: payload
   };
 };
+/**
+ * Sets which window should receive keyboard shortcuts
+ *
+ * Example: setActiveWindowId({ activeMapId: 'activeWindowId'})
+ * @param {string} activeWindowId the windowId to receive keyboard shortcuts
+ */
+
+var setActiveWindowId = function setActiveWindowId(payload) {
+  return {
+    type: UI_SET_ACTIVE_WINDOW_ID,
+    payload: payload
+  };
+};
 
 var actions$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -3263,7 +3277,8 @@ var actions$2 = /*#__PURE__*/Object.freeze({
   unregisterDialog: unregisterDialog,
   setActiveMapIdForDialog: setActiveMapIdForDialog,
   setToggleOpenDialog: setToggleOpenDialog,
-  orderDialog: orderDialog
+  orderDialog: orderDialog,
+  setActiveWindowId: setActiveWindowId
 });
 
 /* *
@@ -3379,6 +3394,19 @@ var getDialogSource = createSelector(getDialogDetailsByType, function (details)
 
   return 'app';
 });
+/**
+ * Get the active window that should receive keyboard shortcuts
+ *
+ * Example: getActiveWindowId(store)
+ * @param {object} store store object from which the window state will be extracted
+ * @returns {string} active window id
+ */
+
+var getActiveWindowId = function getActiveWindowId(store) {
+  var _a;
+
+  return (_a = store === null || store === void 0 ? void 0 : store.ui) === null || _a === void 0 ? void 0 : _a.activeWindowId;
+};
 
 var selectors = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -3387,7 +3415,8 @@ var selectors = /*#__PURE__*/Object.freeze({
   getDialogMapId: getDialogMapId,
   getDialogOrder: getDialogOrder,
   getDialogIsOrderedOnTop: getDialogIsOrderedOnTop,
-  getDialogSource: getDialogSource
+  getDialogSource: getDialogSource,
+  getActiveWindowId: getActiveWindowId
 });
 
 /* *
@@ -5787,7 +5816,8 @@ var createUIDialogElement = function createUIDialogElement(_ref) {
 };
 var initialState$3 = {
   order: [],
-  dialogs: {}
+  dialogs: {},
+  activeWindowId: undefined
 };
 var reducer$3 = function reducer() {
   var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$3;
@@ -5880,6 +5910,14 @@ var reducer$3 = function reducer() {
         });
       }
 
+    case UI_SET_ACTIVE_WINDOW_ID:
+      {
+        var activeWindowId = action.payload.activeWindowId;
+        return produce$1(state, function (draft) {
+          draft.activeWindowId = activeWindowId;
+        });
+      }
+
     default:
       return state;
   }
@@ -8207,14 +8245,15 @@ function setMapPresetSaga(_ref6) {
           }));
 
         case 46:
-          _context8.next = 50;
+          _context8.next = 51;
           break;
 
         case 48:
           _context8.prev = 48;
           _context8.t0 = _context8["catch"](1);
+          console.error(_context8.t0);
 
-        case 50:
+        case 51:
         case "end":
           return _context8.stop();
       }
@@ -8247,7 +8286,7 @@ function rootSaga$1() {
 
         case 10:
           _context9.next = 12;
-          return takeLatest(WEBMAP_SET_MAPPRESET, setMapPresetSaga);
+          return takeEvery(WEBMAP_SET_MAPPRESET, setMapPresetSaga);
 
         case 12:
         case "end":
@@ -9334,7 +9373,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$u = makeStyles({
+var useStyles$s = makeStyles({
   buttonDiv: {
     position: 'relative'
   },
@@ -9370,7 +9409,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
       handleClose = _ref.handleClose,
       _ref$layerType = _ref.layerType,
       layerType = _ref$layerType === void 0 ? LayerType.mapLayer : _ref$layerType;
-  var classes = useStyles$u();
+  var classes = useStyles$s();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9740,7 +9779,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$t = makeStyles({
+var useStyles$r = makeStyles({
   row: {
     height: '32px'
   },
@@ -9764,7 +9803,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
-  var classes = useStyles$t();
+  var classes = useStyles$r();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -9829,6 +9868,16 @@ var DimensionSelect = function DimensionSelect(_ref) {
       setActiveDimName(layerDimensions.length ? layerDimensions[0].name : '');
     }
   }, [layerDimensions, activeDimName]);
+  React.useEffect(function () {
+    var activeDim = layerDimensions.find(function (d) {
+      return d.name === activeDimName;
+    });
+
+    if (activeDim) {
+      onLayerChangeDimension(activeDim.name, activeDim.currentValue);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   if (!layerDimensions.length || !layerId) return null;
 
   var getValuesToDisplay = function getValuesToDisplay() {
@@ -9946,7 +9995,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
   }))));
 };
 
-var useStyles$s = makeStyles(function (theme) {
+var useStyles$q = makeStyles(function (theme) {
   return createStyles({
     dropdownEmpty: {
       paddingLeft: 8,
@@ -9996,7 +10045,7 @@ var RenderLayers = function RenderLayers(_ref) {
       layers = _ref$layers === void 0 ? [] : _ref$layers,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$s();
+  var classes = useStyles$q();
 
   if (!layers || !layers.length) {
     return /*#__PURE__*/React.createElement("div", {
@@ -10062,7 +10111,7 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var useStyles$r = makeStyles(function (theme) {
+var useStyles$p = makeStyles(function (theme) {
   return {
     opacityDiv: {
       height: 'calc(100% - 5px)',
@@ -10123,7 +10172,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$r();
+  var classes = useStyles$p();
   var sliderClasses = sliderStyles();
 
   var _React$useState = React.useState(false),
@@ -10333,7 +10382,7 @@ var RenderStyles = function RenderStyles(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$q = makeStyles(function (theme) {
+var useStyles$o = makeStyles(function (theme) {
   return createStyles({
     svgIcon: {
       fill: function fill(_ref) {
@@ -10362,7 +10411,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
       isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
       _ref2$isEnabled = _ref2.isEnabled,
       isEnabled = _ref2$isEnabled === void 0 ? true : _ref2$isEnabled;
-  var classes = useStyles$q({
+  var classes = useStyles$o({
     isActive: isActive,
     isEnabled: isEnabled
   });
@@ -10415,7 +10464,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$p = makeStyles(function (theme) {
+var useStyles$n = makeStyles(function (theme) {
   return createStyles({
     row: {
       background: function background(isEnabled) {
@@ -10468,7 +10517,7 @@ var LayerRow = function LayerRow(_ref) {
       layerActiveLayout = _ref.layerActiveLayout,
       layerManagerWidth = _ref.layerManagerWidth,
       dragHandle = _ref.dragHandle;
-  var classes = useStyles$p(isEnabled);
+  var classes = useStyles$n(isEnabled);
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
   var onClickRow = function onClickRow() {
@@ -11094,7 +11143,7 @@ var DragHandle = function DragHandle(_ref) {
   });
 };
 
-var useStyles$o = makeStyles(function () {
+var useStyles$m = makeStyles(function () {
   return {
     layerRows: {
       width: '100%',
@@ -11167,7 +11216,7 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
 
   var isSorting = activeDragIndex !== null;
   var isDragDisabled = layerIds.length === 1;
-  var classes = useStyles$o(isSorting);
+  var classes = useStyles$m(isSorting);
 
   var keyPressedTrue = function keyPressedTrue(event) {
     if (event.ctrlKey || event.metaKey) {
@@ -11412,7 +11461,7 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$n = makeStyles({
+var useStyles$l = makeStyles({
   layerRow: {
     width: '100%',
     height: '36px'
@@ -11435,7 +11484,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  var classes = useStyles$n();
+  var classes = useStyles$l();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -12675,11 +12724,12 @@ var ServiceChip = function ServiceChip(_ref) {
   var _ref$all = _ref.all,
       all = _ref$all === void 0 ? false : _ref$all,
       service = _ref.service,
-      isEnabled = _ref.isEnabled,
+      isSelected = _ref.isSelected,
+      isDisabled = _ref.isDisabled,
       toggleChip = _ref.toggleChip;
   return /*#__PURE__*/React.createElement(CustomToggleButton, {
     variant: "boxed",
-    selected: isEnabled,
+    selected: isSelected,
     tabIndex: 0,
     "data-testid": all ? 'serviceChipAll' : 'serviceChip',
     onClick: function onClick() {
@@ -12688,6 +12738,7 @@ var ServiceChip = function ServiceChip(_ref) {
     onKeyPress: function onKeyPress() {
       return toggleChip(all ? 'all' : service && service.serviceUrl);
     },
+    disabled: isDisabled,
     sx: style
   }, service ? service.name : 'All');
 };
@@ -12713,7 +12764,8 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
   var _ref$all = _ref.all,
       all = _ref$all === void 0 ? false : _ref$all,
       service = _ref.service,
-      isEnabled = _ref.isEnabled;
+      isSelected = _ref.isSelected,
+      isDisabled = _ref.isDisabled;
   var dispatch = useDispatch();
   var activeServices = useSelector(function (store) {
     return getActiveServices(store);
@@ -12721,7 +12773,7 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
 
   var toggleChip = function toggleChip(service) {
     if (service === 'all') {
-      if (isEnabled) {
+      if (isSelected) {
         Object.values(activeServices).forEach(function (s) {
           if (s.enabled) dispatch(disableActiveService({
             serviceUrl: s.id,
@@ -12736,7 +12788,7 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
           }));
         });
       }
-    } else if (isEnabled) {
+    } else if (isSelected) {
       dispatch(disableActiveService({
         serviceUrl: service,
         keywords: activeServices[service].keywordsPerService
@@ -12753,11 +12805,12 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
     service: service,
     all: all,
     toggleChip: toggleChip,
-    isEnabled: isEnabled
+    isSelected: isSelected,
+    isDisabled: isDisabled
   });
 };
 
-var useStyles$m = makeStyles(function (theme) {
+var useStyles$k = makeStyles(function (theme) {
   return createStyles({
     serviceChips: {
       width: '100%',
@@ -12838,7 +12891,7 @@ var ServiceList = function ServiceList(_ref4) {
   var ref = React.useRef(null);
   var scrollSpeed = 5;
   var maxWidthValue = ref && ref.current && ref.current.scrollWidth && ref.current.scrollWidth >= layerSelectWidth - margin && ref.current.scrollWidth || layerSelectWidth - 50;
-  var classes = useStyles$m({
+  var classes = useStyles$k({
     margin: margin,
     maxWidthValue: maxWidthValue
   });
@@ -12885,7 +12938,7 @@ var ServiceList = function ServiceList(_ref4) {
       setIntervalId(null);
     }
   }, [services, layerSelectWidth, width, margin, intervalId]);
-  var isAllEnabled = Object.values(activeServices).every(function (activeService) {
+  var isAllSelected = Object.values(activeServices).every(function (activeService) {
     return activeService.enabled;
   });
   return /*#__PURE__*/React.createElement("div", {
@@ -12903,7 +12956,7 @@ var ServiceList = function ServiceList(_ref4) {
   }, services && Object.keys(services) && Object.keys(services).length > 0 && /*#__PURE__*/React.createElement(ServiceChipConnect, {
     key: "All",
     all: true,
-    isEnabled: isAllEnabled
+    isSelected: isAllSelected
   }), Object.keys(services).map(function (serviceId) {
     var _a;
 
@@ -12911,7 +12964,8 @@ var ServiceList = function ServiceList(_ref4) {
     return /*#__PURE__*/React.createElement(ServiceChipConnect, {
       key: serviceId,
       service: service,
-      isEnabled: (_a = activeServices[service.serviceUrl]) === null || _a === void 0 ? void 0 : _a.enabled
+      isSelected: (_a = activeServices[service.serviceUrl]) === null || _a === void 0 ? void 0 : _a.enabled,
+      isDisabled: activeServices[service.serviceUrl] === undefined
     });
   })), layerSelectWidth + margin < width && /*#__PURE__*/React.createElement(ChevronRight, {
     className: classes.scrollArrowRight,
@@ -13145,7 +13199,7 @@ var ServiceOptionsButton = function ServiceOptionsButton() {
   }, /*#__PURE__*/React.createElement(ServiceOptionsDialogConnect, null));
 };
 
-var useStyles$l = makeStyles({
+var useStyles$j = makeStyles({
   serviceList: {
     height: '48px'
   },
@@ -13178,7 +13232,7 @@ var LayerSelect = function LayerSelect(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'module' : _ref$source;
-  var classes = useStyles$l();
+  var classes = useStyles$j();
 
   var _React$useState = React.useState(500),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -13240,7 +13294,7 @@ var LayerSelect = function LayerSelect(_ref) {
   })));
 };
 
-var useStyles$k = makeStyles(function (theme) {
+var useStyles$i = makeStyles(function (theme) {
   return createStyles({
     listItem: {
       width: '100%',
@@ -13277,7 +13331,7 @@ var FilterListItem = function FilterListItem(_ref) {
   var keyword = _ref.keyword,
       toggleKeywords = _ref.toggleKeywords,
       enableOnlyOneKeyword = _ref.enableOnlyOneKeyword;
-  var classes = useStyles$k();
+  var classes = useStyles$i();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -13471,7 +13525,7 @@ var KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchC
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$j = makeStyles(function (theme) {
+var useStyles$h = makeStyles(function (theme) {
   return createStyles({
     selectAll: {
       padding: '15px',
@@ -13503,7 +13557,7 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'module' : _ref$source;
-  var classes = useStyles$j();
+  var classes = useStyles$h();
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     title: showTitle ? "Filter Results ".concat(mapId) : 'Filter Results',
     "data-testid": "keywordFilterResults",
@@ -13937,7 +13991,7 @@ var MapControlButton = function MapControlButton(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$i = makeStyles(function () {
+var useStyles$g = makeStyles(function () {
   return {
     container: {
       '& > button': {
@@ -13960,7 +14014,7 @@ var MapControls = function MapControls(_a) {
   var children = _a.children,
       props = __rest(_a, ["children"]);
 
-  var classes = useStyles$i();
+  var classes = useStyles$g();
   return /*#__PURE__*/React.createElement("div", Object.assign({
     className: classes.wrapper
   }, props), /*#__PURE__*/React.createElement(Grid, {
@@ -14233,7 +14287,7 @@ var DimensionSelectButton = function DimensionSelectButton(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, null));
 };
 
-var useStyles$h = makeStyles(function () {
+var useStyles$f = makeStyles(function () {
   return {
     verticalLevelDimensionSelectContainer: {
       height: '320px',
@@ -14270,7 +14324,7 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
       _ref$alertColor = _ref.alertColor,
       alertColor = _ref$alertColor === void 0 ? 'red' : _ref$alertColor,
       onChangeDimensionValue = _ref.onChangeDimensionValue;
-  var classes = useStyles$h();
+  var classes = useStyles$f();
 
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -14852,7 +14906,7 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
   }, "AUTO")))))));
 };
 
-var useStyles$g = makeStyles(function (theme) {
+var useStyles$e = makeStyles(function (theme) {
   return {
     speedButtonDiv: {
       height: '24px',
@@ -14874,7 +14928,7 @@ var useStyles$g = makeStyles(function (theme) {
 var SpeedButton = function SpeedButton(_ref) {
   var animationDelay = _ref.animationDelay,
       setMapAnimationDelay = _ref.setMapAnimationDelay;
-  var classes = useStyles$g();
+  var classes = useStyles$e();
   var sliderClasses = sliderStyles();
 
   var _React$useState = React.useState(false),
@@ -15083,7 +15137,7 @@ var timeStepMarks = [{
   timeStepValue: 5256000,
   text: '10y'
 }];
-var useStyles$f = makeStyles(function (theme) {
+var useStyles$d = makeStyles(function (theme) {
   return {
     timeStepDiv: {
       width: '58px',
@@ -15149,7 +15203,7 @@ var TimeStepButton = function TimeStepButton(_ref) {
       onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {
     return null;
   } : _ref$onToggleTimestep;
-  var classes = useStyles$f();
+  var classes = useStyles$d();
   var sliderClasses = sliderStyles();
 
   var _React$useState = React.useState(false),
@@ -15361,7 +15415,7 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$e = makeStyles({
+var useStyles$c = makeStyles({
   buttonContainerBig: {
     padding: '20px 0px 0px 12px',
     width: '210px'
@@ -15378,7 +15432,7 @@ var TimeSliderButtons = function TimeSliderButtons(_ref) {
       playBtn = _ref.playBtn,
       speedBtn = _ref.speedBtn,
       timeStepBtn = _ref.timeStepBtn;
-  var classes = useStyles$e();
+  var classes = useStyles$c();
   var matches = useMediaQuery('(min-width:600px)');
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "timeSliderButtons"
@@ -16471,7 +16525,7 @@ CanvasComponent.defaultProps = {
   }
 };
 
-var useStyles$d = makeStyles({
+var useStyles$b = makeStyles({
   timeSliderLegend: {
     height: '50px'
   }
@@ -16509,10 +16563,12 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       animationEndTime = _ref.animationEndTime,
       isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
       timeStep = _ref.timeStep,
+      _ref$mapIsActive = _ref.mapIsActive,
+      mapIsActive = _ref$mapIsActive === void 0 ? true : _ref$mapIsActive,
       onSetNewDate = _ref.onSetNewDate,
       onSetCenterTime = _ref.onSetCenterTime,
       onZoom = _ref.onZoom;
-  var classes = useStyles$d();
+  var classes = useStyles$b();
 
   var _useCanvasTarget = useCanvasTarget('mousedown'),
       _useCanvasTarget2 = _slicedToArray(_useCanvasTarget, 2),
@@ -16550,7 +16606,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
   }, [animationStartTime, animationEndTime]);
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === 'Home') {
+      if (event.key === 'Home' && mapIsActive) {
         if (dataStartTime < dataEndTime) {
           if (dataEndTime < currentTime) {
             onSetNewDate(moment.utc(dataEndTime * 1000).toISOString());
@@ -16571,7 +16627,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [timeStep, isTimeSliderHoverOn, currentTime, dataStartTime, dataEndTime, onSetCenterTime, onSetNewDate]);
+  }, [timeStep, isTimeSliderHoverOn, currentTime, dataStartTime, dataEndTime, mapIsActive, onSetCenterTime, onSetNewDate]);
 
   var setSelectedTime = function setSelectedTime(x, width) {
     setNewRoundedTime(x, centerTime, width, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
@@ -16669,7 +16725,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
 var scaleSliderOtherSettings = {
   LEFT_PADDING: '10%'
 };
-var useStyles$c = makeStyles(function (theme) {
+var useStyles$a = makeStyles(function (theme) {
   return {
     Background: {
       backgroundColor: theme.palette.geowebColors.background.surface,
@@ -16815,7 +16871,7 @@ var TimeSliderScaleSlider = function TimeSliderScaleSlider(_ref) {
       secondsPerPx = _ref.secondsPerPx,
       selectedTime = _ref.selectedTime,
       onChangeTimeSliderScale = _ref.onChangeTimeSliderScale;
-  var classes = useStyles$c();
+  var classes = useStyles$a();
   var min = 0;
   var max = marks.length - 1;
   var value = marks.findIndex(function (mark) {
@@ -17075,7 +17131,7 @@ var renderTimeSliderRailWithNeedle = function renderTimeSliderRailWithNeedle(ctx
   drawNewNeedleLabel(ctx, selected, selectedPx, animationStartPx, animationEndPx, scale, theme);
 };
 
-var useStyles$b = makeStyles({
+var useStyles$9 = makeStyles({
   timeSliderRail: {
     '& div': {
       outline: 'none'
@@ -17119,11 +17175,12 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
       isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
       _ref$scale = _ref.scale,
       scale = _ref$scale === void 0 ? Scale.Hour : _ref$scale,
+      mapIsActive = _ref.mapIsActive,
       onSetAnimationStartTime = _ref.onSetAnimationStartTime,
       onSetAnimationEndTime = _ref.onSetAnimationEndTime,
       onSetNewDate = _ref.onSetNewDate,
       onSetCenterTime = _ref.onSetCenterTime;
-  var classes = useStyles$b();
+  var classes = useStyles$9();
   var ZOOM_RATIO = 1.1;
 
   var zoomOut = function zoomOut(relativeX) {
@@ -17296,7 +17353,7 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
     setLocalAnimationEndTime(animationEndTime && moment.utc(animationEndTime).unix());
   }, [animationStartTime, animationEndTime]);
   var handleKeyDown = React.useCallback(function (event) {
-    if (event.ctrlKey && dataStartTime && dataEndTime) {
+    if (event.ctrlKey && dataStartTime && dataEndTime && mapIsActive) {
       switch (event.code) {
         case 'ArrowLeft':
           setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate);
@@ -17307,7 +17364,7 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
           break;
       }
     }
-  }, [curTime, onSetNewDate, timeStep, dataStartTime, dataEndTime]);
+  }, [curTime, onSetNewDate, timeStep, dataStartTime, dataEndTime, mapIsActive]);
   React.useEffect(function () {
     document.addEventListener('keydown', handleKeyDown);
     return function () {
@@ -17392,7 +17449,7 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
   }));
 };
 
-var useStyles$a = makeStyles({
+var useStyles$8 = makeStyles({
   container: {
     display: 'grid',
     gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
@@ -17403,7 +17460,7 @@ var useStyles$a = makeStyles({
   }
 });
 
-var useTimeSlider = function useTimeSlider() {
+var useTimeSlider = function useTimeSlider(mapIsActive) {
   var _React$useState = React.useState(true),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       openTimeSlider = _React$useState2[0],
@@ -17413,7 +17470,7 @@ var useTimeSlider = function useTimeSlider() {
     var handleKeyDown = function handleKeyDown(event) {
       var target = event.target;
 
-      if (target.tagName !== 'INPUT' && event.key === 't') {
+      if (target.tagName !== 'INPUT' && event.key === 't' && mapIsActive) {
         setOpenTimeSlider(!openTimeSlider);
       }
     };
@@ -17422,7 +17479,7 @@ var useTimeSlider = function useTimeSlider() {
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [openTimeSlider]);
+  }, [openTimeSlider, mapIsActive]);
   return openTimeSlider;
 };
 
@@ -17437,9 +17494,11 @@ var TimeSlider = function TimeSlider(_ref) {
   var buttons = _ref.buttons,
       rail = _ref.rail,
       scaleSlider = _ref.scaleSlider,
-      legend = _ref.legend;
-  var styles = useStyles$a();
-  var openTimeSlider = useTimeSlider();
+      legend = _ref.legend,
+      _ref$mapIsActive = _ref.mapIsActive,
+      mapIsActive = _ref$mapIsActive === void 0 ? true : _ref$mapIsActive;
+  var styles = useStyles$8();
+  var openTimeSlider = useTimeSlider(mapIsActive);
   return openTimeSlider ? /*#__PURE__*/React.createElement(Grid, {
     container: true,
     className: styles.container,
@@ -17449,7 +17508,8 @@ var TimeSlider = function TimeSlider(_ref) {
   }, " ", buttons || /*#__PURE__*/React.createElement(TimeSliderButtons, null), " "), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, rail || /*#__PURE__*/React.createElement(TimeSliderRail, Object.assign({}, defaultProps, {
-    selectedTime: defaultProps.selectedTime
+    selectedTime: defaultProps.selectedTime,
+    mapIsActive: mapIsActive
   })), ' '), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     className: styles.scaleSlider
@@ -17462,7 +17522,8 @@ var TimeSlider = function TimeSlider(_ref) {
   }))), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, legend || /*#__PURE__*/React.createElement(TimeSliderLegend, Object.assign({}, defaultProps, {
-    selectedTime: defaultProps.selectedTime.unix()
+    selectedTime: defaultProps.selectedTime.unix(),
+    mapIsActive: mapIsActive
   })), ' ')) : null;
 };
 
@@ -17706,7 +17767,8 @@ var connectRedux$2 = connect(function (store, props) {
     isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId),
     timeValue: getTime(getSynchronizationGroupStore(store), props.sourceId),
     animationStartTime: getAnimationStartTime(store, props.mapId),
-    animationEndTime: getAnimationEndTime(store, props.mapId)
+    animationEndTime: getAnimationEndTime(store, props.mapId),
+    activeWindowId: getActiveWindowId(store)
   };
 }, {
   stopMapAnimation: mapStopAnimation,
@@ -17731,6 +17793,7 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
       isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
       animationStartTime = _ref.animationStartTime,
       animationEndTime = _ref.animationEndTime,
+      activeWindowId = _ref.activeWindowId,
       stopMapAnimation = _ref.stopMapAnimation,
       setTime = _ref.setTime,
       syncGroupAddSource = _ref.syncGroupAddSource,
@@ -17748,6 +17811,7 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
       dataStartTime = _getDataLimitsFromLay2[0],
       dataEndTime = _getDataLimitsFromLay2[1];
 
+  var mapIsActive = mapId === activeWindowId;
   React.useEffect(function () {
     syncGroupAddSource({
       id: sourceId,
@@ -17772,6 +17836,7 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
     animationStartTime: animationStartTime,
     animationEndTime: animationEndTime,
     timeStep: timeStep,
+    mapIsActive: mapIsActive,
     onSetNewDate: function onSetNewDate(newDate) {
       if (isAnimating) {
         stopMapAnimation({
@@ -17827,7 +17892,8 @@ var connectRedux$1 = connect(function (store, props) {
     secondsPerPx: getMapTimeSliderSecondsPerPx(store, props.mapId),
     isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId),
     scale: getMapTimeSliderScale(store, props.mapId),
-    timeValue: getTime(getSynchronizationGroupStore(store), props.sourceId)
+    timeValue: getTime(getSynchronizationGroupStore(store), props.sourceId),
+    activeWindowId: getActiveWindowId(store)
   };
 }, {
   setAnimationStartTime: setAnimationStartTime,
@@ -17852,6 +17918,7 @@ var TimeSliderRailConnectComponent = function TimeSliderRailConnectComponent(_re
       secondsPerPx = _ref.secondsPerPx,
       isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
       scale = _ref.scale,
+      activeWindowId = _ref.activeWindowId,
       setAnimationStartTime = _ref.setAnimationStartTime,
       setAnimationEndTime = _ref.setAnimationEndTime,
       stopMapAnimation = _ref.stopMapAnimation,
@@ -17870,6 +17937,7 @@ var TimeSliderRailConnectComponent = function TimeSliderRailConnectComponent(_re
       dataStartTime = _getDataLimitsFromLay2[0],
       dataEndTime = _getDataLimitsFromLay2[1];
 
+  var mapIsActive = activeWindowId === mapId;
   React.useEffect(function () {
     syncGroupAddSource({
       id: sourceId,
@@ -17923,7 +17991,8 @@ var TimeSliderRailConnectComponent = function TimeSliderRailConnectComponent(_re
         mapId: mapId,
         timeSliderCenterTime: newTime
       });
-    }
+    },
+    mapIsActive: mapIsActive
   });
 };
 
@@ -18030,7 +18099,8 @@ var TimeSliderScaleSliderConnect = connectReduxTimeSliderScaleSlider(TimeSliderS
  * */
 var connectRedux = connect(function (store, props) {
   return {
-    isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId)
+    isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId),
+    activeWindowId: getActiveWindowId(store)
   };
 }, {
   toggleTimeSliderHover: toggleTimeSliderHover
@@ -18040,7 +18110,9 @@ var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
   var sourceId = _ref.sourceId,
       mapId = _ref.mapId,
       isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
-      toggleTimeSliderHover = _ref.toggleTimeSliderHover;
+      toggleTimeSliderHover = _ref.toggleTimeSliderHover,
+      activeWindowId = _ref.activeWindowId;
+  var mapIsActive = mapId === activeWindowId;
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       if (event.ctrlKey && event.altKey && event.key === 'h') {
@@ -18070,7 +18142,8 @@ var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
     legend: /*#__PURE__*/React.createElement(TimeSliderLegendConnect$1, {
       mapId: mapId,
       sourceId: sourceId
-    })
+    }),
+    mapIsActive: mapIsActive
   });
 };
 /**
@@ -18102,7 +18175,7 @@ var TimeSliderConnect = connectRedux(ConnectedTimeSlider);
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$9 = makeStyles({
+var useStyles$7 = makeStyles({
   MapViewLayer: {
     width: '100%',
     padding: '2px',
@@ -18118,8 +18191,9 @@ var useStyles$9 = makeStyles({
 
 var MapViewLayer = function MapViewLayer(props) {
   var id = props.id;
-  var classes = useStyles$9();
+  var classes = useStyles$7();
   return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "mapViewLayer",
     className: classes.MapViewLayer
   }, /*#__PURE__*/React.createElement("div", null, id), /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line react/no-danger
@@ -18542,7 +18616,7 @@ var distance = function distance(a, b) {
   return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y));
 };
 
-var checkHoverVertice = function checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords) {
+var checkHoverVertice = function checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature) {
   var maxDistance = 20;
 
   if (feature.geometry.type === 'Point') {
@@ -18606,6 +18680,12 @@ var checkHoverVertice = function checkHoverVertice(feature, mouseX, mouseY, conv
         var isPointInPoly = turf.booleanPointInPolygon(turf.point(point), turf.polygon(poly));
 
         if (isPointInPoly) {
+          if (ignoreCoordinateIndexInFeature) {
+            return {
+              coordinateIndexInFeature: 0
+            };
+          }
+
           return {
             coordinateIndexInFeature: _polygonIndex
           };
@@ -18668,10 +18748,10 @@ var checkHoverVertice = function checkHoverVertice(feature, mouseX, mouseY, conv
   return null;
 };
 
-var checkHoverFeatures = function checkHoverFeatures(geojson, mouseX, mouseY, convertGeoCoordsToScreenCoords) {
+var checkHoverFeatures = function checkHoverFeatures(geojson, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature) {
   for (var j = 0; j < geojson.features.length; j += 1) {
     var feature = geojson.features[j];
-    var hoverResult = checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords);
+    var hoverResult = checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature);
 
     if (hoverResult != null) {
       return {
@@ -19866,9 +19946,10 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       if (onClickFeature) {
         var mouseX = event.mouseX,
             mouseY = event.mouseY;
+        var ignoreCoordinateIndexInFeature = true;
         var result = checkHoverFeatures(this.geojson, mouseX, mouseY, function (coordinates) {
           return _this4.convertGeoCoordsToScreenCoords(coordinates);
-        });
+        }, ignoreCoordinateIndexInFeature);
 
         if (result) {
           var featureEvent = {
@@ -21795,7 +21876,7 @@ ReactMapView.defaultProps = {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$8 = makeStyles(function () {
+var useStyles$6 = makeStyles(function () {
   return {
     mapTimeContainer: {
       zIndex: 10,
@@ -21822,7 +21903,7 @@ var MapTime = function MapTime(_ref) {
   var dimensions = _ref.dimensions,
       _ref$timeFormat = _ref.timeFormat,
       timeFormat = _ref$timeFormat === void 0 ? defaultTimeFormat : _ref$timeFormat;
-  var classes = useStyles$8();
+  var classes = useStyles$6();
   var timeDimension = getTimeDimension(dimensions);
 
   if (!timeDimension) {
@@ -21855,7 +21936,7 @@ var MapTime = function MapTime(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$7 = makeStyles(function () {
+var useStyles$5 = makeStyles(function () {
   return {
     mapViewContainer: {
       display: 'grid',
@@ -21881,7 +21962,7 @@ var MapView = function MapView(_a) {
       displayTimeInMap = _a$displayTimeInMap === void 0 ? true : _a$displayTimeInMap,
       props = __rest(_a, ["children", "controls", "displayTimeInMap"]);
 
-  var classes = useStyles$7();
+  var classes = useStyles$5();
   var dimensions = props.dimensions;
   var adagucRef = React.useRef(null);
   return /*#__PURE__*/React.createElement("div", {
@@ -22116,7 +22197,7 @@ var MapViewConnect = function MapViewConnect(_a) {
 var defaultCanvasWidth = 150;
 var defaultCanvasHeight = 30; // TODO: remove fontFamily styles after theming is fully implemented
 
-var useStyles$6 = makeStyles(function (theme) {
+var useStyles$4 = makeStyles(function (theme) {
   return {
     legendCanvas: {
       margin: '10px 0px 10px 0px'
@@ -22184,7 +22265,7 @@ var renderLegendGraphic = function renderLegendGraphic(wmImage, ctx, width, heig
 
 var Legend = function Legend(_ref) {
   var layer = _ref.layer;
-  var classes = useStyles$6();
+  var classes = useStyles$4();
   /* Variable to remember the previous image */
 
   var previousLegendImage = useRef(null);
@@ -22339,7 +22420,7 @@ var Legend = function Legend(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$5 = makeStyles(function () {
+var useStyles$3 = makeStyles(function () {
   return {
     legendList: {
       display: 'flex',
@@ -22367,7 +22448,7 @@ var LegendDialog = function LegendDialog(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'app' : _ref$source;
-  var classes = useStyles$5();
+  var classes = useStyles$3();
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     startPosition: {
       right: 20,
@@ -22585,23 +22666,17 @@ var LegendMapButtonConnect = function LegendMapButtonConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$4 = makeStyles(function (theme) {
+
+var titleStyle = function titleStyle(theme) {
   return {
-    mapTitle: {
-      position: 'absolute',
-      padding: '5px',
-      zIndex: 50,
-      color: theme.palette.common.black,
-      whiteSpace: 'nowrap'
-    },
-    mapContainer: {
-      display: 'inline-block',
-      position: 'relative',
-      width: '100%',
-      height: '100%'
-    }
+    position: 'absolute',
+    padding: '5px',
+    zIndex: 50,
+    color: theme.palette.common.black,
+    whiteSpace: 'nowrap'
   };
-});
+};
+
 var defaultBbox = {
   srs: 'EPSG:3857',
   bbox: {
@@ -22611,37 +22686,36 @@ var defaultBbox = {
     top: 11520588.9031
   }
 };
-var ConfigurableConnectedMap = function ConfigurableConnectedMap(_a) {
+var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
   var id = _a.id,
       title = _a.title,
-      className = _a.className,
-      _a$layers = _a.layers,
-      layers = _a$layers === void 0 ? [] : _a$layers,
+      layers = _a.layers,
       _a$baseLayer = _a.baseLayer,
       baseLayer = _a$baseLayer === void 0 ? baseLayerGrey$1 : _a$baseLayer,
       _a$overLayers = _a.overLayers,
       overLayers = _a$overLayers === void 0 ? [overLayer$1] : _a$overLayers,
+      _a$shouldAutoUpdate = _a.shouldAutoUpdate,
+      shouldAutoUpdate = _a$shouldAutoUpdate === void 0 ? false : _a$shouldAutoUpdate,
+      _a$shouldAnimate = _a.shouldAnimate,
+      shouldAnimate = _a$shouldAnimate === void 0 ? false : _a$shouldAnimate,
       _a$bbox = _a.bbox,
       bbox = _a$bbox === void 0 ? defaultBbox.bbox : _a$bbox,
       _a$srs = _a.srs,
       srs = _a$srs === void 0 ? defaultBbox.srs : _a$srs,
+      _a$shouldShowZoomCont = _a.shouldShowZoomControls,
+      shouldShowZoomControls = _a$shouldShowZoomCont === void 0 ? true : _a$shouldShowZoomCont,
+      _a$displayMapPin = _a.displayMapPin,
+      displayMapPin = _a$displayMapPin === void 0 ? false : _a$displayMapPin,
+      _a$showTimeSlider = _a.showTimeSlider,
+      showTimeSlider = _a$showTimeSlider === void 0 ? true : _a$showTimeSlider,
       _a$displayTimeInMap = _a.displayTimeInMap,
       displayTimeInMap = _a$displayTimeInMap === void 0 ? false : _a$displayTimeInMap,
       _a$displayLayerManage = _a.displayLayerManagerButtonInMap,
       displayLayerManagerButtonInMap = _a$displayLayerManage === void 0 ? true : _a$displayLayerManage,
       _a$displayDimensionSe = _a.displayDimensionSelectButtonInMap,
       displayDimensionSelectButtonInMap = _a$displayDimensionSe === void 0 ? true : _a$displayDimensionSe,
-      _a$shouldAutoUpdate = _a.shouldAutoUpdate,
-      shouldAutoUpdate = _a$shouldAutoUpdate === void 0 ? false : _a$shouldAutoUpdate,
-      _a$shouldAnimate = _a.shouldAnimate,
-      shouldAnimate = _a$shouldAnimate === void 0 ? false : _a$shouldAnimate,
-      _a$shouldShowZoomCont = _a.shouldShowZoomControls,
-      shouldShowZoomControls = _a$shouldShowZoomCont === void 0 ? false : _a$shouldShowZoomCont,
-      _a$displayMapPin = _a.displayMapPin,
-      displayMapPin = _a$displayMapPin === void 0 ? false : _a$displayMapPin,
-      props = __rest(_a, ["id", "title", "className", "layers", "baseLayer", "overLayers", "bbox", "srs", "displayTimeInMap", "displayLayerManagerButtonInMap", "displayDimensionSelectButtonInMap", "shouldAutoUpdate", "shouldAnimate", "shouldShowZoomControls", "displayMapPin"]);
+      props = __rest(_a, ["id", "title", "layers", "baseLayer", "overLayers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "displayTimeInMap", "displayLayerManagerButtonInMap", "displayDimensionSelectButtonInMap"]);
 
-  var classes = useStyles$4();
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || generateMapId()).current;
   React__default.useEffect(function () {
@@ -22666,13 +22740,25 @@ var ConfigurableConnectedMap = function ConfigurableConnectedMap(_a) {
       initialProps: initialProps
     })); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: className || classes.mapContainer,
-    "data-testid": "configurableConnectedMap"
+  return /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      overflow: 'hidden'
+    },
+    "data-testid": "ConfigurableMap"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     "data-testid": "mapTitle",
-    className: classes.mapTitle
-  }, title || mapId), /*#__PURE__*/React__default.createElement(MapControls, {
+    sx: titleStyle
+  }, title || mapId), shouldShowZoomControls && /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      position: 'absolute',
+      top: 24
+    }
+  }, /*#__PURE__*/React__default.createElement(ZoomControlConnect, {
+    mapId: id
+  })), /*#__PURE__*/React__default.createElement(MapControls, {
     "data-testid": "mapControls",
     style: {
       top: shouldShowZoomControls ? 120 : 24
@@ -22683,6 +22769,17 @@ var ConfigurableConnectedMap = function ConfigurableConnectedMap(_a) {
     mapId: mapId
   }), displayDimensionSelectButtonInMap && /*#__PURE__*/React__default.createElement(MultiDimensionSelectMapButtonsConnect, {
     mapId: mapId
+  })), showTimeSlider && /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      position: 'absolute',
+      left: '0px',
+      bottom: '0px',
+      zIndex: 1000,
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(TimeSliderConnect, {
+    mapId: id,
+    sourceId: id
   })), /*#__PURE__*/React__default.createElement(MapViewConnect, {
     controls: {},
     displayTimeInMap: displayTimeInMap,
@@ -22708,7 +22805,7 @@ var ConfigurableConnectedMap = function ConfigurableConnectedMap(_a) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$3 = makeStyles(function (theme) {
+var useStyles$2 = makeStyles(function (theme) {
   return {
     box: {
       boxSizing: 'border-box',
@@ -22716,11 +22813,6 @@ var useStyles$3 = makeStyles(function (theme) {
       '& .MapViewComponent': {
         border: "1px solid ".concat(theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled)
       }
-    },
-    zoomControls: {
-      position: 'absolute',
-      top: 24,
-      zIndex: 100
     }
   };
 });
@@ -22732,7 +22824,7 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       showTimeSlider = _ref$showTimeSlider === void 0 ? true : _ref$showTimeSlider,
       _ref$showZoomControls = _ref.showZoomControls,
       showZoomControls = _ref$showZoomControls === void 0 ? true : _ref$showZoomControls;
-  var classes = useStyles$3();
+  var classes = useStyles$2();
   var dispatch = useDispatch();
   var syncGroupAddTarget$1 = React__default.useCallback(function (payload) {
     return dispatch(syncGroupAddTarget(payload));
@@ -22759,11 +22851,7 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       position: 'relative'
     },
     "data-testid": "MultiMapViewSliderConnect"
-  }, showZoomControls && /*#__PURE__*/React__default.createElement("div", {
-    className: classes.zoomControls
-  }, /*#__PURE__*/React__default.createElement(ZoomControlConnect, {
-    mapId: firstMapId
-  })), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
       left: '0px',
@@ -22780,7 +22868,7 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       className: classes.box,
       key: mapId,
       style: mapStyle
-    }, /*#__PURE__*/React__default.createElement(ConfigurableConnectedMap, {
+    }, /*#__PURE__*/React__default.createElement(ConfigurableMapConnect, {
       title: map.title,
       id: mapId,
       layers: map.layers || [],
@@ -22791,7 +22879,8 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       displayTimeInMap: map.displayTimeInMap || false,
       displayLayerManagerButtonInMap: map.displayLayerManagerButtonInMap,
       displayDimensionSelectButtonInMap: map.displayDimensionSelectButtonInMap,
-      shouldShowZoomControls: showZoomControls && mapIndex === 0
+      shouldShowZoomControls: showZoomControls && mapIndex === 0,
+      showTimeSlider: false
     }));
   }));
 };
@@ -22878,100 +22967,6 @@ var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var useStyles$2 = makeStyles(function () {
-  return {
-    zoomControls: {
-      position: 'absolute',
-      top: 24
-    },
-    timeSlider: {
-      position: 'absolute',
-      left: '0px',
-      bottom: '0px',
-      zIndex: 1000,
-      width: '100%'
-    },
-    mapSliderConnect: {
-      height: '100%',
-      position: 'relative',
-      overflow: 'hidden'
-    }
-  };
-});
-var ConfigurableMapWithSliderConnect = function ConfigurableMapWithSliderConnect(_ref) {
-  var id = _ref.id,
-      title = _ref.title,
-      layers = _ref.layers,
-      _ref$baseLayer = _ref.baseLayer,
-      baseLayer = _ref$baseLayer === void 0 ? undefined : _ref$baseLayer,
-      _ref$overLayers = _ref.overLayers,
-      overLayers = _ref$overLayers === void 0 ? undefined : _ref$overLayers,
-      _ref$activeLayerId = _ref.activeLayerId,
-      activeLayerId = _ref$activeLayerId === void 0 ? undefined : _ref$activeLayerId,
-      _ref$shouldAutoUpdate = _ref.shouldAutoUpdate,
-      shouldAutoUpdate = _ref$shouldAutoUpdate === void 0 ? false : _ref$shouldAutoUpdate,
-      _ref$shouldAnimate = _ref.shouldAnimate,
-      shouldAnimate = _ref$shouldAnimate === void 0 ? false : _ref$shouldAnimate,
-      bbox = _ref.bbox,
-      srs = _ref.srs,
-      _ref$shouldShowZoomCo = _ref.shouldShowZoomControls,
-      shouldShowZoomControls = _ref$shouldShowZoomCo === void 0 ? true : _ref$shouldShowZoomCo,
-      _ref$animationPayload = _ref.animationPayload,
-      animationPayload = _ref$animationPayload === void 0 ? undefined : _ref$animationPayload,
-      _ref$displayMapPin = _ref.displayMapPin,
-      displayMapPin = _ref$displayMapPin === void 0 ? false : _ref$displayMapPin,
-      _ref$showTimeSlider = _ref.showTimeSlider,
-      showTimeSlider = _ref$showTimeSlider === void 0 ? true : _ref$showTimeSlider,
-      toggleTimestepAuto = _ref.toggleTimestepAuto,
-      setTimestep = _ref.setTimestep;
-  var classes = useStyles$2();
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classes.mapSliderConnect,
-    "data-testid": "ConfigurableMapWithSliderConnect"
-  }, shouldShowZoomControls && /*#__PURE__*/React__default.createElement("div", {
-    className: classes.zoomControls
-  }, /*#__PURE__*/React__default.createElement(ZoomControlConnect, {
-    mapId: id
-  })), showTimeSlider && /*#__PURE__*/React__default.createElement("div", {
-    className: classes.timeSlider
-  }, /*#__PURE__*/React__default.createElement(TimeSliderConnect, {
-    mapId: id,
-    sourceId: id
-  })), /*#__PURE__*/React__default.createElement(ConfigurableConnectedMap, {
-    id: id,
-    title: title,
-    layers: layers || [],
-    activeLayerId: activeLayerId,
-    baseLayer: baseLayer,
-    overLayers: overLayers,
-    bbox: bbox,
-    srs: srs,
-    shouldAutoUpdate: shouldAutoUpdate,
-    shouldAnimate: shouldAnimate,
-    animationPayload: animationPayload,
-    shouldShowZoomControls: shouldShowZoomControls,
-    displayMapPin: displayMapPin,
-    toggleTimestepAuto: toggleTimestepAuto,
-    setTimestep: setTimestep
-  }));
-};
-
 var useGetLatestReferenceTime = function useGetLatestReferenceTime(inputLayer) {
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -23076,21 +23071,12 @@ var componentsLookUp = function componentsLookUp(_ref) {
       id = _ref.id;
 
   switch (componentType) {
-    case 'ConfigurableMap':
-    case 'ConfigurableMapWithSlider':
+    case 'Map':
       {
-        var mapPreset = initialProps.mapPreset,
-            shouldShowZoomControls = initialProps.shouldShowZoomControls;
-        return /*#__PURE__*/React__default.createElement(ConfigurableMapWithSliderConnect, Object.assign({}, mapPreset, {
+        var mapPreset = initialProps.mapPreset;
+        return /*#__PURE__*/React__default.createElement(ConfigurableMapConnect, Object.assign({}, mapPreset, {
           id: id,
-          bbox: mapPreset && mapPreset.proj && mapPreset.proj.bbox,
-          displayMapPin: mapPreset && mapPreset.displayMapPin,
-          srs: mapPreset && mapPreset.proj && mapPreset.proj.srs,
-          shouldAutoUpdate: mapPreset && mapPreset.shouldAutoUpdate || false,
-          shouldShowZoomControls: shouldShowZoomControls !== undefined ? shouldShowZoomControls : true,
-          shouldAnimate: mapPreset && mapPreset.shouldAnimate || false,
-          animationPayload: mapPreset && mapPreset.animationPayload ? mapPreset.animationPayload : undefined,
-          "data-testid": "coreConfigurableMapWithSlider"
+          "data-testid": "coreConfigurableMapConnect"
         }));
       }
 
@@ -23110,28 +23096,30 @@ var componentsLookUp = function componentsLookUp(_ref) {
         }));
       }
 
-    case 'ConfigurableMultiMapWithSlider':
+    case 'MultiMap':
       {
         var _mapPreset = initialProps.mapPreset,
-            _shouldShowZoomControls = initialProps.shouldShowZoomControls,
+            shouldShowZoomControls = initialProps.shouldShowZoomControls,
             syncGroupsIds = initialProps.syncGroupsIds;
         if (!_mapPreset || _mapPreset.length === 0) return null;
         return /*#__PURE__*/React__default.createElement(MultiMapViewConnect, {
           rows: 2,
           cols: 2,
-          showZoomControls: _shouldShowZoomControls !== undefined ? _shouldShowZoomControls : true,
+          showZoomControls: shouldShowZoomControls,
           maps: _mapPreset.map(function (p, i) {
+            var _a, _b, _c, _d;
+
             return {
               id: "".concat(id, "_").concat(i),
               syncGroupsIds: syncGroupsIds,
-              layers: p.layers || [],
-              activeLayerId: p.activeLayerId || undefined,
-              baseLayer: p.baseLayer || undefined,
-              bbox: _mapPreset[0] && _mapPreset[0].proj && _mapPreset[0].proj.bbox || null,
-              srs: _mapPreset[0] && _mapPreset[0].proj && _mapPreset[0].proj.srs || null
+              layers: p.layers,
+              activeLayerId: p.activeLayerId,
+              baseLayer: p.baseLayer,
+              bbox: (_b = (_a = _mapPreset[0]) === null || _a === void 0 ? void 0 : _a.proj) === null || _b === void 0 ? void 0 : _b.bbox,
+              srs: (_d = (_c = _mapPreset[0]) === null || _c === void 0 ? void 0 : _c.proj) === null || _d === void 0 ? void 0 : _d.srs
             };
           }),
-          "data-testid": "coreConfigurableMultiMapWithSlider"
+          "data-testid": "coreMultiMapViewConnect"
         });
       }
 
@@ -23773,4 +23761,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
   }, "area: ", selectedFeatureProperties.details[0].area));
 };
 
-export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultConfigurations, filterBaseLayers, filterMapLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateServiceId, generateTimeSeriesId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, actions$4 as layerActions, reducer$6 as layerReducer, actions$3 as mapActions, constants as mapConstants, moduleConfig as mapModuleConfig, selectors$1 as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, actions$2 as uiActions, uiModuleConfig, selectors as uiSelectors, types$1 as uiTypes, useStyles$3 as useStyles };
+export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterBaseLayers, filterMapLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateServiceId, generateTimeSeriesId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, actions$4 as layerActions, reducer$6 as layerReducer, actions$3 as mapActions, constants as mapConstants, moduleConfig as mapModuleConfig, selectors$1 as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, actions$2 as uiActions, uiModuleConfig, selectors as uiSelectors, types$1 as uiTypes, useStyles$2 as useStyles };