@opengeoweb/core 2.7.0 → 2.8.0

package/index.umd.js

@@ -3061,6 +3061,7 @@
   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");
@@ -3143,6 +3144,19 @@
       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,
@@ -3150,7 +3164,8 @@
     unregisterDialog: unregisterDialog,
     setActiveMapIdForDialog: setActiveMapIdForDialog,
     setToggleOpenDialog: setToggleOpenDialog,
-    orderDialog: orderDialog
+    orderDialog: orderDialog,
+    setActiveWindowId: setActiveWindowId
   });
 
   /* *
@@ -3266,6 +3281,19 @@
 
     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,
@@ -3274,7 +3302,8 @@
     getDialogMapId: getDialogMapId,
     getDialogOrder: getDialogOrder,
     getDialogIsOrderedOnTop: getDialogIsOrderedOnTop,
-    getDialogSource: getDialogSource
+    getDialogSource: getDialogSource,
+    getActiveWindowId: getActiveWindowId
   });
 
   /* *
@@ -5776,7 +5805,8 @@
   };
   var initialState$3 = {
     order: [],
-    dialogs: {}
+    dialogs: {},
+    activeWindowId: undefined
   };
   var reducer$3 = function reducer(state, action) {
     if (state === void 0) {
@@ -5870,6 +5900,14 @@
           });
         }
 
+      case UI_SET_ACTIVE_WINDOW_ID:
+        {
+          var activeWindowId_1 = action.payload.activeWindowId;
+          return produce.produce(state, function (draft) {
+            draft.activeWindowId = activeWindowId_1;
+          });
+        }
+
       default:
         return state;
     }
@@ -8136,7 +8174,7 @@
     });
   }
   function setMapPresetSaga(_a) {
-    var mapId, initialProps, mapPreset, layers, _b, baseLayer, _c, overLayers, activeLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto$1, setTimestep, mapLayers, _d, layersNewIds, activeLayerNewId, newActiveLayerId, baseLayers, duration;
+    var mapId, initialProps, mapPreset, layers, _b, baseLayer, _c, overLayers, activeLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto$1, setTimestep, mapLayers, _d, layersNewIds, activeLayerNewId, newActiveLayerId, baseLayers, duration, error_3;
 
     var payload = _a.payload;
     return __generator(this, function (_e) {
@@ -8331,7 +8369,8 @@
           , 22];
 
         case 21:
-          _e.sent();
+          error_3 = _e.sent();
+          console.error(error_3);
           return [3
           /*break*/
           , 22];
@@ -8384,7 +8423,7 @@
 
           return [4
           /*yield*/
-          , effects.takeLatest(WEBMAP_SET_MAPPRESET, setMapPresetSaga)];
+          , effects.takeEvery(WEBMAP_SET_MAPPRESET, setMapPresetSaga)];
 
         case 6:
           _a.sent();
@@ -9621,7 +9660,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$u = makeStyles__default["default"]({
+  var useStyles$s = makeStyles__default["default"]({
     buttonDiv: {
       position: 'relative'
     },
@@ -9657,7 +9696,7 @@
         handleClose = _a.handleClose,
         _e = _a.layerType,
         layerType = _e === void 0 ? LayerType.mapLayer : _e;
-    var classes = useStyles$u();
+    var classes = useStyles$s();
 
     var _f = __read(React__namespace.useState(''), 2),
         serviceURL = _f[0],
@@ -10037,7 +10076,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$t = makeStyles__default["default"]({
+  var useStyles$r = makeStyles__default["default"]({
     row: {
       height: '32px'
     },
@@ -10061,7 +10100,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _e = _a.layerSelect,
         layerSelect = _e === void 0 ? false : _e;
-    var classes = useStyles$t();
+    var classes = useStyles$r();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -10142,6 +10181,16 @@
         setActiveDimName(layerDimensions.length ? layerDimensions[0].name : '');
       }
     }, [layerDimensions, activeDimName]);
+    React__namespace.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() {
@@ -10275,7 +10324,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$s = makeStyles__default["default"](function (theme) {
+  var useStyles$q = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       dropdownEmpty: {
         paddingLeft: 8,
@@ -10325,7 +10374,7 @@
         layers = _b === void 0 ? [] : _b,
         _c = _a.isEnabled,
         isEnabled = _c === void 0 ? true : _c;
-    var classes = useStyles$s();
+    var classes = useStyles$q();
 
     if (!layers || !layers.length) {
       return /*#__PURE__*/React__namespace.createElement("div", {
@@ -10407,7 +10456,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$r = makeStyles__default["default"](function (theme) {
+  var useStyles$p = makeStyles__default["default"](function (theme) {
     return {
       opacityDiv: {
         height: 'calc(100% - 5px)',
@@ -10468,7 +10517,7 @@
         onLayerChangeOpacity = _a.onLayerChangeOpacity,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$r();
+    var classes = useStyles$p();
     var sliderClasses = shared.sliderStyles();
 
     var _c = __read(React__namespace.useState(false), 2),
@@ -10676,7 +10725,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$q = makeStyles__default["default"](function (theme) {
+  var useStyles$o = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       svgIcon: {
         fill: function fill(_a) {
@@ -10705,7 +10754,7 @@
         isActive = _c === void 0 ? false : _c,
         _d = _a.isEnabled,
         isEnabled = _d === void 0 ? true : _d;
-    var classes = useStyles$q({
+    var classes = useStyles$o({
       isActive: isActive,
       isEnabled: isEnabled
     });
@@ -10758,7 +10807,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$p = makeStyles__default["default"](function (theme) {
+  var useStyles$n = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       row: {
         background: function background(isEnabled) {
@@ -10812,7 +10861,7 @@
         layerActiveLayout = _a.layerActiveLayout,
         layerManagerWidth = _a.layerManagerWidth,
         dragHandle = _a.dragHandle;
-    var classes = useStyles$p(isEnabled);
+    var classes = useStyles$n(isEnabled);
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
     var onClickRow = function onClickRow() {
@@ -11454,7 +11503,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$o = makeStyles__default["default"](function () {
+  var useStyles$m = makeStyles__default["default"](function () {
     return {
       layerRows: {
         width: '100%',
@@ -11525,7 +11574,7 @@
 
     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) {
@@ -11770,7 +11819,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$n = makeStyles__default["default"]({
+  var useStyles$l = makeStyles__default["default"]({
     layerRow: {
       width: '100%',
       height: '36px'
@@ -11793,7 +11842,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _d = _a.tooltip,
         tooltip = _d === void 0 ? '' : _d;
-    var classes = useStyles$n();
+    var classes = useStyles$l();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -13113,11 +13162,12 @@
     var _b = _a.all,
         all = _b === void 0 ? false : _b,
         service = _a.service,
-        isEnabled = _a.isEnabled,
+        isSelected = _a.isSelected,
+        isDisabled = _a.isDisabled,
         toggleChip = _a.toggleChip;
     return /*#__PURE__*/React__namespace.createElement(shared.CustomToggleButton, {
       variant: "boxed",
-      selected: isEnabled,
+      selected: isSelected,
       tabIndex: 0,
       "data-testid": all ? 'serviceChipAll' : 'serviceChip',
       onClick: function onClick() {
@@ -13126,6 +13176,7 @@
       onKeyPress: function onKeyPress() {
         return toggleChip(all ? 'all' : service && service.serviceUrl);
       },
+      disabled: isDisabled,
       sx: style
     }, service ? service.name : 'All');
   };
@@ -13151,7 +13202,8 @@
     var _b = _a.all,
         all = _b === void 0 ? false : _b,
         service = _a.service,
-        isEnabled = _a.isEnabled;
+        isSelected = _a.isSelected,
+        isDisabled = _a.isDisabled;
     var dispatch = reactRedux.useDispatch();
     var activeServices = reactRedux.useSelector(function (store) {
       return getActiveServices(store);
@@ -13159,7 +13211,7 @@
 
     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,
@@ -13174,7 +13226,7 @@
             }));
           });
         }
-      } else if (isEnabled) {
+      } else if (isSelected) {
         dispatch(disableActiveService({
           serviceUrl: service,
           keywords: activeServices[service].keywordsPerService
@@ -13191,7 +13243,8 @@
       service: service,
       all: all,
       toggleChip: toggleChip,
-      isEnabled: isEnabled
+      isSelected: isSelected,
+      isDisabled: isDisabled
     });
   };
 
@@ -13211,7 +13264,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$m = makeStyles__default["default"](function (theme) {
+  var useStyles$k = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       serviceChips: {
         width: '100%',
@@ -13289,7 +13342,7 @@
     var ref = React__namespace.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
     });
@@ -13336,7 +13389,7 @@
         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__namespace.createElement("div", {
@@ -13354,7 +13407,7 @@
     }, services && Object.keys(services) && Object.keys(services).length > 0 && /*#__PURE__*/React__namespace.createElement(ServiceChipConnect, {
       key: "All",
       all: true,
-      isEnabled: isAllEnabled
+      isSelected: isAllSelected
     }), Object.keys(services).map(function (serviceId) {
       var _a;
 
@@ -13362,7 +13415,8 @@
       return /*#__PURE__*/React__namespace.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__namespace.createElement(iconsMaterial.ChevronRight, {
       className: classes.scrollArrowRight,
@@ -13627,7 +13681,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$l = makeStyles__default["default"]({
+  var useStyles$j = makeStyles__default["default"]({
     serviceList: {
       height: '48px'
     },
@@ -13660,7 +13714,7 @@
         order = _d === void 0 ? 0 : _d,
         _e = _a.source,
         source = _e === void 0 ? 'module' : _e;
-    var classes = useStyles$l();
+    var classes = useStyles$j();
 
     var _f = __read(React__namespace.useState(500), 2),
         height = _f[0],
@@ -13736,7 +13790,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$k = makeStyles__default["default"](function (theme) {
+  var useStyles$i = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       listItem: {
         width: '100%',
@@ -13773,7 +13827,7 @@
     var keyword = _a.keyword,
         toggleKeywords = _a.toggleKeywords,
         enableOnlyOneKeyword = _a.enableOnlyOneKeyword;
-    var classes = useStyles$k();
+    var classes = useStyles$i();
 
     var _b = __read(React__namespace.useState(false), 2),
         hovering = _b[0],
@@ -13966,7 +14020,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$j = makeStyles__default["default"](function (theme) {
+  var useStyles$h = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       selectAll: {
         padding: '15px',
@@ -13998,7 +14052,7 @@
         order = _d === void 0 ? 0 : _d,
         _e = _a.source,
         source = _e === void 0 ? 'module' : _e;
-    var classes = useStyles$j();
+    var classes = useStyles$h();
     return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
       title: showTitle ? "Filter Results " + mapId : 'Filter Results',
       "data-testid": "keywordFilterResults",
@@ -14429,7 +14483,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$i = makeStyles__default["default"](function () {
+  var useStyles$g = makeStyles__default["default"](function () {
     return {
       container: {
         '& > button': {
@@ -14452,7 +14506,7 @@
     var children = _a.children,
         props = __rest(_a, ["children"]);
 
-    var classes = useStyles$i();
+    var classes = useStyles$g();
     return /*#__PURE__*/React__namespace.createElement("div", __assign({
       className: classes.wrapper
     }, props), /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -14725,7 +14779,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$h = makeStyles__default["default"](function () {
+  var useStyles$f = makeStyles__default["default"](function () {
     return {
       verticalLevelDimensionSelectContainer: {
         height: '320px',
@@ -14762,7 +14816,7 @@
         _f = _a.alertColor,
         alertColor = _f === void 0 ? 'red' : _f,
         onChangeDimensionValue = _a.onChangeDimensionValue;
-    var classes = useStyles$h();
+    var classes = useStyles$f();
 
     var _g = __read(React.useState(0), 2),
         currentIndex = _g[0],
@@ -15358,7 +15412,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$g = makeStyles__default["default"](function (theme) {
+  var useStyles$e = makeStyles__default["default"](function (theme) {
     return {
       speedButtonDiv: {
         height: '24px',
@@ -15380,7 +15434,7 @@
   var SpeedButton = function SpeedButton(_a) {
     var animationDelay = _a.animationDelay,
         setMapAnimationDelay = _a.setMapAnimationDelay;
-    var classes = useStyles$g();
+    var classes = useStyles$e();
     var sliderClasses = shared.sliderStyles();
 
     var _b = __read(React__namespace.useState(false), 2),
@@ -15604,7 +15658,7 @@
     timeStepValue: 5256000,
     text: '10y'
   }];
-  var useStyles$f = makeStyles__default["default"](function (theme) {
+  var useStyles$d = makeStyles__default["default"](function (theme) {
     return {
       timeStepDiv: {
         width: '58px',
@@ -15670,7 +15724,7 @@
         onToggleTimestepAuto = _d === void 0 ? function () {
       return null;
     } : _d;
-    var classes = useStyles$f();
+    var classes = useStyles$d();
     var sliderClasses = shared.sliderStyles();
 
     var _e = __read(React__namespace.useState(false), 2),
@@ -15896,7 +15950,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$e = makeStyles__default["default"]({
+  var useStyles$c = makeStyles__default["default"]({
     buttonContainerBig: {
       padding: '20px 0px 0px 12px',
       width: '210px'
@@ -15913,7 +15967,7 @@
         playBtn = _a.playBtn,
         speedBtn = _a.speedBtn,
         timeStepBtn = _a.timeStepBtn;
-    var classes = useStyles$e();
+    var classes = useStyles$c();
     var matches = material.useMediaQuery('(min-width:600px)');
     return /*#__PURE__*/React__namespace.createElement("div", {
       "data-testid": "timeSliderButtons"
@@ -17031,7 +17085,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$d = makeStyles__default["default"]({
+  var useStyles$b = makeStyles__default["default"]({
     timeSliderLegend: {
       height: '50px'
     }
@@ -17069,34 +17123,36 @@
         animationEndTime = _a.animationEndTime,
         isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
         timeStep = _a.timeStep,
+        _d = _a.mapIsActive,
+        mapIsActive = _d === void 0 ? true : _d,
         onSetNewDate = _a.onSetNewDate,
         onSetCenterTime = _a.onSetCenterTime,
         onZoom = _a.onZoom;
-    var classes = useStyles$d();
+    var classes = useStyles$b();
 
-    var _d = __read(useCanvasTarget('mousedown'), 2),
-        isAllowedCanvasNodePointed = _d[0],
-        node = _d[1];
-
-    var _e = __read(React__namespace.useState(false), 2),
-        isDragged = _e[0],
-        setDragged = _e[1];
+    var _e = __read(useCanvasTarget('mousedown'), 2),
+        isAllowedCanvasNodePointed = _e[0],
+        node = _e[1];
 
     var _f = __read(React__namespace.useState(false), 2),
-        isReleased = _f[0],
-        setReleased = _f[1];
+        isDragged = _f[0],
+        setDragged = _f[1];
 
     var _g = __read(React__namespace.useState(false), 2),
-        isNewSelectionTimeRequested = _g[0],
-        setNewSelectionTimeRequested = _g[1];
+        isReleased = _g[0],
+        setReleased = _g[1];
+
+    var _h = __read(React__namespace.useState(false), 2),
+        isNewSelectionTimeRequested = _h[0],
+        setNewSelectionTimeRequested = _h[1];
 
-    var _h = __read(React__namespace.useState(animationStartTime && moment__default["default"].utc(animationStartTime).unix()), 2),
-        localAnimationStartTime = _h[0],
-        setLocalAnimationStartTime = _h[1];
+    var _j = __read(React__namespace.useState(animationStartTime && moment__default["default"].utc(animationStartTime).unix()), 2),
+        localAnimationStartTime = _j[0],
+        setLocalAnimationStartTime = _j[1];
 
-    var _j = __read(React__namespace.useState(animationEndTime && moment__default["default"].utc(animationEndTime).unix()), 2),
-        localAnimationEndTime = _j[0],
-        setLocalAnimationEndTime = _j[1];
+    var _k = __read(React__namespace.useState(animationEndTime && moment__default["default"].utc(animationEndTime).unix()), 2),
+        localAnimationEndTime = _k[0],
+        setLocalAnimationEndTime = _k[1];
 
     React__namespace.useEffect(function () {
       setLocalAnimationStartTime(animationStartTime && moment__default["default"].utc(animationStartTime).unix());
@@ -17104,7 +17160,7 @@
     }, [animationStartTime, animationEndTime]);
     React__namespace.useEffect(function () {
       var handleKeyDown = function handleKeyDown(event) {
-        if (event.key === 'Home') {
+        if (event.key === 'Home' && mapIsActive) {
           if (dataStartTime < dataEndTime) {
             if (dataEndTime < currentTime) {
               onSetNewDate(moment__default["default"].utc(dataEndTime * 1000).toISOString());
@@ -17125,7 +17181,7 @@
       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);
@@ -17223,7 +17279,7 @@
   var scaleSliderOtherSettings = {
     LEFT_PADDING: '10%'
   };
-  var useStyles$c = makeStyles__default["default"](function (theme) {
+  var useStyles$a = makeStyles__default["default"](function (theme) {
     return {
       Background: {
         backgroundColor: theme.palette.geowebColors.background.surface,
@@ -17369,7 +17425,7 @@
         secondsPerPx = _a.secondsPerPx,
         selectedTime = _a.selectedTime,
         onChangeTimeSliderScale = _a.onChangeTimeSliderScale;
-    var classes = useStyles$c();
+    var classes = useStyles$a();
     var min = 0;
     var max = marks.length - 1;
     var value = marks.findIndex(function (mark) {
@@ -17644,7 +17700,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$b = makeStyles__default["default"]({
+  var useStyles$9 = makeStyles__default["default"]({
     timeSliderRail: {
       '& div': {
         outline: 'none'
@@ -17688,11 +17744,12 @@
         isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
         _d = _a.scale,
         scale = _d === void 0 ? Scale.Hour : _d,
+        mapIsActive = _a.mapIsActive,
         onSetAnimationStartTime = _a.onSetAnimationStartTime,
         onSetAnimationEndTime = _a.onSetAnimationEndTime,
         onSetNewDate = _a.onSetNewDate,
         onSetCenterTime = _a.onSetCenterTime;
-    var classes = useStyles$b();
+    var classes = useStyles$9();
     var ZOOM_RATIO = 1.1;
 
     var zoomOut = function zoomOut(relativeX) {
@@ -17856,7 +17913,7 @@
       setLocalAnimationEndTime(animationEndTime && moment__default["default"].utc(animationEndTime).unix());
     }, [animationStartTime, animationEndTime]);
     var handleKeyDown = React__namespace.useCallback(function (event) {
-      if (event.ctrlKey && dataStartTime && dataEndTime) {
+      if (event.ctrlKey && dataStartTime && dataEndTime && mapIsActive) {
         switch (event.code) {
           case 'ArrowLeft':
             setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate);
@@ -17867,7 +17924,7 @@
             break;
         }
       }
-    }, [curTime, onSetNewDate, timeStep, dataStartTime, dataEndTime]);
+    }, [curTime, onSetNewDate, timeStep, dataStartTime, dataEndTime, mapIsActive]);
     React__namespace.useEffect(function () {
       document.addEventListener('keydown', handleKeyDown);
       return function () {
@@ -17965,7 +18022,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$a = makeStyles__default["default"]({
+  var useStyles$8 = makeStyles__default["default"]({
     container: {
       display: 'grid',
       gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
@@ -17976,7 +18033,7 @@
     }
   });
 
-  var useTimeSlider = function useTimeSlider() {
+  var useTimeSlider = function useTimeSlider(mapIsActive) {
     var _a = __read(React__namespace.useState(true), 2),
         openTimeSlider = _a[0],
         setOpenTimeSlider = _a[1];
@@ -17985,7 +18042,7 @@
       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);
         }
       };
@@ -17994,7 +18051,7 @@
       return function () {
         document.removeEventListener('keydown', handleKeyDown);
       };
-    }, [openTimeSlider]);
+    }, [openTimeSlider, mapIsActive]);
     return openTimeSlider;
   };
 
@@ -18009,9 +18066,11 @@
     var buttons = _a.buttons,
         rail = _a.rail,
         scaleSlider = _a.scaleSlider,
-        legend = _a.legend;
-    var styles = useStyles$a();
-    var openTimeSlider = useTimeSlider();
+        legend = _a.legend,
+        _b = _a.mapIsActive,
+        mapIsActive = _b === void 0 ? true : _b;
+    var styles = useStyles$8();
+    var openTimeSlider = useTimeSlider(mapIsActive);
     return openTimeSlider ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       className: styles.container,
@@ -18021,7 +18080,8 @@
     }, " ", buttons || /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, null), " "), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
     }, rail || /*#__PURE__*/React__namespace.createElement(TimeSliderRail, __assign({}, defaultProps, {
-      selectedTime: defaultProps.selectedTime
+      selectedTime: defaultProps.selectedTime,
+      mapIsActive: mapIsActive
     })), ' '), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       className: styles.scaleSlider
@@ -18034,7 +18094,8 @@
     }))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
     }, legend || /*#__PURE__*/React__namespace.createElement(TimeSliderLegend, __assign({}, defaultProps, {
-      selectedTime: defaultProps.selectedTime.unix()
+      selectedTime: defaultProps.selectedTime.unix(),
+      mapIsActive: mapIsActive
     })), ' ')) : null;
   };
 
@@ -18294,7 +18355,8 @@
       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,
@@ -18319,6 +18381,7 @@
         isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
         animationStartTime = _a.animationStartTime,
         animationEndTime = _a.animationEndTime,
+        activeWindowId = _a.activeWindowId,
         stopMapAnimation = _a.stopMapAnimation,
         setTime = _a.setTime,
         syncGroupAddSource = _a.syncGroupAddSource,
@@ -18332,6 +18395,7 @@
         dataStartTime = _b[0],
         dataEndTime = _b[1];
 
+    var mapIsActive = mapId === activeWindowId;
     React__namespace.useEffect(function () {
       syncGroupAddSource({
         id: sourceId,
@@ -18356,6 +18420,7 @@
       animationStartTime: animationStartTime,
       animationEndTime: animationEndTime,
       timeStep: timeStep,
+      mapIsActive: mapIsActive,
       onSetNewDate: function onSetNewDate(newDate) {
         if (isAnimating) {
           stopMapAnimation({
@@ -18427,7 +18492,8 @@
       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,
@@ -18452,6 +18518,7 @@
         secondsPerPx = _a.secondsPerPx,
         isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
         scale = _a.scale,
+        activeWindowId = _a.activeWindowId,
         setAnimationStartTime = _a.setAnimationStartTime,
         setAnimationEndTime = _a.setAnimationEndTime,
         stopMapAnimation = _a.stopMapAnimation,
@@ -18466,6 +18533,7 @@
         dataStartTime = _b[0],
         dataEndTime = _b[1];
 
+    var mapIsActive = activeWindowId === mapId;
     React__namespace.useEffect(function () {
       syncGroupAddSource({
         id: sourceId,
@@ -18519,7 +18587,8 @@
           mapId: mapId,
           timeSliderCenterTime: newTime
         });
-      }
+      },
+      mapIsActive: mapIsActive
     });
   };
 
@@ -18624,7 +18693,8 @@
    * */
   var connectRedux = reactRedux.connect(function (store, props) {
     return {
-      isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId)
+      isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId),
+      activeWindowId: getActiveWindowId(store)
     };
   }, {
     toggleTimeSliderHover: toggleTimeSliderHover
@@ -18634,7 +18704,9 @@
     var sourceId = _a.sourceId,
         mapId = _a.mapId,
         isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
-        toggleTimeSliderHover = _a.toggleTimeSliderHover;
+        toggleTimeSliderHover = _a.toggleTimeSliderHover,
+        activeWindowId = _a.activeWindowId;
+    var mapIsActive = mapId === activeWindowId;
     React__namespace.useEffect(function () {
       var handleKeyDown = function handleKeyDown(event) {
         if (event.ctrlKey && event.altKey && event.key === 'h') {
@@ -18664,7 +18736,8 @@
       legend: /*#__PURE__*/React__namespace.createElement(TimeSliderLegendConnect$1, {
         mapId: mapId,
         sourceId: sourceId
-      })
+      }),
+      mapIsActive: mapIsActive
     });
   };
   /**
@@ -18696,7 +18769,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$9 = makeStyles__default["default"]({
+  var useStyles$7 = makeStyles__default["default"]({
     MapViewLayer: {
       width: '100%',
       padding: '2px',
@@ -18712,8 +18785,9 @@
 
   var MapViewLayer = function MapViewLayer(props) {
     var id = props.id;
-    var classes = useStyles$9();
+    var classes = useStyles$7();
     return /*#__PURE__*/React__namespace.createElement("div", {
+      "data-testid": "mapViewLayer",
       className: classes.MapViewLayer
     }, /*#__PURE__*/React__namespace.createElement("div", null, id), /*#__PURE__*/React__namespace.createElement("div", {
       // eslint-disable-next-line react/no-danger
@@ -19136,7 +19210,7 @@
     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') {
@@ -19200,6 +19274,12 @@
           var isPointInPoly = turf__namespace.booleanPointInPolygon(turf__namespace.point(point), turf__namespace.polygon(poly));
 
           if (isPointInPoly) {
+            if (ignoreCoordinateIndexInFeature) {
+              return {
+                coordinateIndexInFeature: 0
+              };
+            }
+
             return {
               coordinateIndexInFeature: polygonIndex
             };
@@ -19261,10 +19341,10 @@
     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 {
@@ -20439,9 +20519,10 @@
       if (onClickFeature) {
         var mouseX = event.mouseX,
             mouseY = event.mouseY;
+        var ignoreCoordinateIndexInFeature = true;
         var result = checkHoverFeatures(this.geojson, mouseX, mouseY, function (coordinates) {
           return _this.convertGeoCoordsToScreenCoords(coordinates);
-        });
+        }, ignoreCoordinateIndexInFeature);
 
         if (result) {
           var featureEvent = {
@@ -22304,7 +22385,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$8 = makeStyles__default["default"](function () {
+  var useStyles$6 = makeStyles__default["default"](function () {
     return {
       mapTimeContainer: {
         zIndex: 10,
@@ -22331,7 +22412,7 @@
     var dimensions = _a.dimensions,
         _b = _a.timeFormat,
         timeFormat = _b === void 0 ? defaultTimeFormat : _b;
-    var classes = useStyles$8();
+    var classes = useStyles$6();
     var timeDimension = getTimeDimension(dimensions);
 
     if (!timeDimension) {
@@ -22364,7 +22445,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$7 = makeStyles__default["default"](function () {
+  var useStyles$5 = makeStyles__default["default"](function () {
     return {
       mapViewContainer: {
         display: 'grid',
@@ -22391,7 +22472,7 @@
         // rest props
     props = __rest(_a, ["children", "controls", "displayTimeInMap"]);
 
-    var classes = useStyles$7();
+    var classes = useStyles$5();
     var dimensions = props.dimensions;
     var adagucRef = React__namespace.useRef(null);
     return /*#__PURE__*/React__namespace.createElement("div", {
@@ -22642,7 +22723,7 @@
   var defaultCanvasWidth = 150;
   var defaultCanvasHeight = 30; // TODO: remove fontFamily styles after theming is fully implemented
 
-  var useStyles$6 = makeStyles__default["default"](function (theme) {
+  var useStyles$4 = makeStyles__default["default"](function (theme) {
     return {
       legendCanvas: {
         margin: '10px 0px 10px 0px'
@@ -22710,7 +22791,7 @@
 
   var Legend = function Legend(_a) {
     var layer = _a.layer;
-    var classes = useStyles$6();
+    var classes = useStyles$4();
     /* Variable to remember the previous image */
 
     var previousLegendImage = React.useRef(null);
@@ -22862,7 +22943,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$5 = makeStyles__default["default"](function () {
+  var useStyles$3 = makeStyles__default["default"](function () {
     return {
       legendList: {
         display: 'flex',
@@ -22890,7 +22971,7 @@
         order = _d === void 0 ? 0 : _d,
         _e = _a.source,
         source = _e === void 0 ? 'app' : _e;
-    var classes = useStyles$5();
+    var classes = useStyles$3();
     return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
       startPosition: {
         right: 20,
@@ -23108,23 +23189,17 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$4 = makeStyles__default["default"](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: {
@@ -23134,37 +23209,36 @@
       top: 11520588.9031
     }
   };
-  var ConfigurableConnectedMap = function ConfigurableConnectedMap(_a) {
+  var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     var id = _a.id,
         title = _a.title,
-        className = _a.className,
-        _b = _a.layers,
-        layers = _b === void 0 ? [] : _b,
-        _c = _a.baseLayer,
-        baseLayer = _c === void 0 ? baseLayerGrey$1 : _c,
-        _d = _a.overLayers,
-        overLayers = _d === void 0 ? [overLayer$1] : _d,
-        _e = _a.bbox,
-        bbox = _e === void 0 ? defaultBbox.bbox : _e,
-        _f = _a.srs,
-        srs = _f === void 0 ? defaultBbox.srs : _f,
-        _g = _a.displayTimeInMap,
-        displayTimeInMap = _g === void 0 ? false : _g,
-        _h = _a.displayLayerManagerButtonInMap,
-        displayLayerManagerButtonInMap = _h === void 0 ? true : _h,
-        _j = _a.displayDimensionSelectButtonInMap,
-        displayDimensionSelectButtonInMap = _j === void 0 ? true : _j,
-        _k = _a.shouldAutoUpdate,
-        shouldAutoUpdate = _k === void 0 ? false : _k,
-        _l = _a.shouldAnimate,
-        shouldAnimate = _l === void 0 ? false : _l,
-        _m = _a.shouldShowZoomControls,
-        shouldShowZoomControls = _m === void 0 ? false : _m,
-        _o = _a.displayMapPin,
-        displayMapPin = _o === void 0 ? false : _o,
-        props = __rest(_a, ["id", "title", "className", "layers", "baseLayer", "overLayers", "bbox", "srs", "displayTimeInMap", "displayLayerManagerButtonInMap", "displayDimensionSelectButtonInMap", "shouldAutoUpdate", "shouldAnimate", "shouldShowZoomControls", "displayMapPin"]);
+        layers = _a.layers,
+        _b = _a.baseLayer,
+        baseLayer = _b === void 0 ? baseLayerGrey$1 : _b,
+        _c = _a.overLayers,
+        overLayers = _c === void 0 ? [overLayer$1] : _c,
+        _d = _a.shouldAutoUpdate,
+        shouldAutoUpdate = _d === void 0 ? false : _d,
+        _e = _a.shouldAnimate,
+        shouldAnimate = _e === void 0 ? false : _e,
+        _f = _a.bbox,
+        bbox = _f === void 0 ? defaultBbox.bbox : _f,
+        _g = _a.srs,
+        srs = _g === void 0 ? defaultBbox.srs : _g,
+        _h = _a.shouldShowZoomControls,
+        shouldShowZoomControls = _h === void 0 ? true : _h,
+        _j = _a.displayMapPin,
+        displayMapPin = _j === void 0 ? false : _j,
+        _k = _a.showTimeSlider,
+        showTimeSlider = _k === void 0 ? true : _k,
+        _l = _a.displayTimeInMap,
+        displayTimeInMap = _l === void 0 ? false : _l,
+        _m = _a.displayLayerManagerButtonInMap,
+        displayLayerManagerButtonInMap = _m === void 0 ? true : _m,
+        _o = _a.displayDimensionSelectButtonInMap,
+        displayDimensionSelectButtonInMap = _o === void 0 ? true : _o,
+        props = __rest(_a, ["id", "title", "layers", "baseLayer", "overLayers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "displayTimeInMap", "displayLayerManagerButtonInMap", "displayDimensionSelectButtonInMap"]);
 
-    var classes = useStyles$4();
     var dispatch = reactRedux.useDispatch();
     var mapId = React__default["default"].useRef(id || generateMapId()).current;
     React__default["default"].useEffect(function () {
@@ -23190,13 +23264,25 @@
         initialProps: initialProps
       })); // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: className || classes.mapContainer,
-      "data-testid": "configurableConnectedMap"
+    return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      sx: {
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        overflow: 'hidden'
+      },
+      "data-testid": "ConfigurableMap"
     }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
       "data-testid": "mapTitle",
-      className: classes.mapTitle
-    }, title || mapId), /*#__PURE__*/React__default["default"].createElement(MapControls, {
+      sx: titleStyle
+    }, title || mapId), shouldShowZoomControls && /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      sx: {
+        position: 'absolute',
+        top: 24
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ZoomControlConnect, {
+      mapId: id
+    })), /*#__PURE__*/React__default["default"].createElement(MapControls, {
       "data-testid": "mapControls",
       style: {
         top: shouldShowZoomControls ? 120 : 24
@@ -23207,6 +23293,17 @@
       mapId: mapId
     }), displayDimensionSelectButtonInMap && /*#__PURE__*/React__default["default"].createElement(MultiDimensionSelectMapButtonsConnect, {
       mapId: mapId
+    })), showTimeSlider && /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      sx: {
+        position: 'absolute',
+        left: '0px',
+        bottom: '0px',
+        zIndex: 1000,
+        width: '100%'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(TimeSliderConnect, {
+      mapId: id,
+      sourceId: id
     })), /*#__PURE__*/React__default["default"].createElement(MapViewConnect, {
       controls: {},
       displayTimeInMap: displayTimeInMap,
@@ -23232,7 +23329,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$3 = makeStyles__default["default"](function (theme) {
+  var useStyles$2 = makeStyles__default["default"](function (theme) {
     return {
       box: {
         boxSizing: 'border-box',
@@ -23240,11 +23337,6 @@
         '& .MapViewComponent': {
           border: "1px solid " + theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
         }
-      },
-      zoomControls: {
-        position: 'absolute',
-        top: 24,
-        zIndex: 100
       }
     };
   });
@@ -23256,7 +23348,7 @@
         showTimeSlider = _b === void 0 ? true : _b,
         _c = _a.showZoomControls,
         showZoomControls = _c === void 0 ? true : _c;
-    var classes = useStyles$3();
+    var classes = useStyles$2();
     var dispatch = reactRedux.useDispatch();
     var syncGroupAddTarget$1 = React__default["default"].useCallback(function (payload) {
       return dispatch(syncGroupAddTarget(payload));
@@ -23283,11 +23375,7 @@
         position: 'relative'
       },
       "data-testid": "MultiMapViewSliderConnect"
-    }, showZoomControls && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classes.zoomControls
-    }, /*#__PURE__*/React__default["default"].createElement(ZoomControlConnect, {
-      mapId: firstMapId
-    })), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         position: 'absolute',
         left: '0px',
@@ -23304,7 +23392,7 @@
         className: classes.box,
         key: mapId,
         style: mapStyle
-      }, /*#__PURE__*/React__default["default"].createElement(ConfigurableConnectedMap, {
+      }, /*#__PURE__*/React__default["default"].createElement(ConfigurableMapConnect, {
         title: map.title,
         id: mapId,
         layers: map.layers || [],
@@ -23315,7 +23403,8 @@
         displayTimeInMap: map.displayTimeInMap || false,
         displayLayerManagerButtonInMap: map.displayLayerManagerButtonInMap,
         displayDimensionSelectButtonInMap: map.displayDimensionSelectButtonInMap,
-        shouldShowZoomControls: showZoomControls && mapIndex === 0
+        shouldShowZoomControls: showZoomControls && mapIndex === 0,
+        showTimeSlider: false
       }));
     }));
   };
@@ -23418,100 +23507,6 @@
     });
   };
 
-  /* *
-   * 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__default["default"](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(_a) {
-    var id = _a.id,
-        title = _a.title,
-        layers = _a.layers,
-        _b = _a.baseLayer,
-        baseLayer = _b === void 0 ? undefined : _b,
-        _c = _a.overLayers,
-        overLayers = _c === void 0 ? undefined : _c,
-        _d = _a.activeLayerId,
-        activeLayerId = _d === void 0 ? undefined : _d,
-        _e = _a.shouldAutoUpdate,
-        shouldAutoUpdate = _e === void 0 ? false : _e,
-        _f = _a.shouldAnimate,
-        shouldAnimate = _f === void 0 ? false : _f,
-        bbox = _a.bbox,
-        srs = _a.srs,
-        _g = _a.shouldShowZoomControls,
-        shouldShowZoomControls = _g === void 0 ? true : _g,
-        _h = _a.animationPayload,
-        animationPayload = _h === void 0 ? undefined : _h,
-        _j = _a.displayMapPin,
-        displayMapPin = _j === void 0 ? false : _j,
-        _k = _a.showTimeSlider,
-        showTimeSlider = _k === void 0 ? true : _k,
-        toggleTimestepAuto = _a.toggleTimestepAuto,
-        setTimestep = _a.setTimestep;
-    var classes = useStyles$2();
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classes.mapSliderConnect,
-      "data-testid": "ConfigurableMapWithSliderConnect"
-    }, shouldShowZoomControls && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classes.zoomControls
-    }, /*#__PURE__*/React__default["default"].createElement(ZoomControlConnect, {
-      mapId: id
-    })), showTimeSlider && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classes.timeSlider
-    }, /*#__PURE__*/React__default["default"].createElement(TimeSliderConnect, {
-      mapId: id,
-      sourceId: id
-    })), /*#__PURE__*/React__default["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
-    }));
-  };
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -23632,22 +23627,12 @@
         id = _a.id;
 
     switch (componentType) {
-      case 'ConfigurableMap':
-      case 'ConfigurableMapWithSlider':
+      case 'Map':
         {
-          var _b = initialProps,
-              mapPreset = _b.mapPreset,
-              shouldShowZoomControls = _b.shouldShowZoomControls;
-          return /*#__PURE__*/React__default["default"].createElement(ConfigurableMapWithSliderConnect, __assign({}, mapPreset, {
+          var mapPreset = initialProps.mapPreset;
+          return /*#__PURE__*/React__default["default"].createElement(ConfigurableMapConnect, __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"
           }));
         }
 
@@ -23667,29 +23652,31 @@
           }));
         }
 
-      case 'ConfigurableMultiMapWithSlider':
+      case 'MultiMap':
         {
-          var _c = initialProps,
-              mapPreset_1 = _c.mapPreset,
-              shouldShowZoomControls = _c.shouldShowZoomControls,
-              syncGroupsIds_1 = _c.syncGroupsIds;
+          var _b = initialProps,
+              mapPreset_1 = _b.mapPreset,
+              shouldShowZoomControls = _b.shouldShowZoomControls,
+              syncGroupsIds_1 = _b.syncGroupsIds;
           if (!mapPreset_1 || mapPreset_1.length === 0) return null;
           return /*#__PURE__*/React__default["default"].createElement(MultiMapViewConnect, {
             rows: 2,
             cols: 2,
-            showZoomControls: shouldShowZoomControls !== undefined ? shouldShowZoomControls : true,
+            showZoomControls: shouldShowZoomControls,
             maps: mapPreset_1.map(function (p, i) {
+              var _a, _b, _c, _d;
+
               return {
                 id: id + "_" + i,
                 syncGroupsIds: syncGroupsIds_1,
-                layers: p.layers || [],
-                activeLayerId: p.activeLayerId || undefined,
-                baseLayer: p.baseLayer || undefined,
-                bbox: mapPreset_1[0] && mapPreset_1[0].proj && mapPreset_1[0].proj.bbox || null,
-                srs: mapPreset_1[0] && mapPreset_1[0].proj && mapPreset_1[0].proj.srs || null
+                layers: p.layers,
+                activeLayerId: p.activeLayerId,
+                baseLayer: p.baseLayer,
+                bbox: (_b = (_a = mapPreset_1[0]) === null || _a === void 0 ? void 0 : _a.proj) === null || _b === void 0 ? void 0 : _b.bbox,
+                srs: (_d = (_c = mapPreset_1[0]) === null || _c === void 0 ? void 0 : _c.proj) === null || _d === void 0 ? void 0 : _d.srs
               };
             }),
-            "data-testid": "coreConfigurableMultiMapWithSlider"
+            "data-testid": "coreMultiMapViewConnect"
           });
         }
 
@@ -24351,8 +24338,7 @@
     }, "area: ", selectedFeatureProperties.details[0].area));
   };
 
-  exports.ConfigurableConnectedMap = ConfigurableConnectedMap;
-  exports.ConfigurableMapWithSliderConnect = ConfigurableMapWithSliderConnect;
+  exports.ConfigurableMapConnect = ConfigurableMapConnect;
   exports.CoreThemeProvider = CoreThemeProvider;
   exports.CoreThemeStoreProvider = CoreThemeStoreProvider;
   exports.HarmonieTempAndPrecipPreset = HarmonieTempAndPrecipPreset;
@@ -24379,6 +24365,7 @@
   exports.componentsLookUp = componentsLookUp;
   exports.coreModuleConfig = coreModuleConfig;
   exports.dateFormat = dateFormat;
+  exports.defaultBbox = defaultBbox;
   exports.defaultConfigurations = defaultConfigurations;
   exports.filterBaseLayers = filterBaseLayers;
   exports.filterMapLayers = filterMapLayers;
@@ -24420,7 +24407,7 @@
   exports.uiModuleConfig = uiModuleConfig;
   exports.uiSelectors = selectors;
   exports.uiTypes = types$1;
-  exports.useStyles = useStyles$3;
+  exports.useStyles = useStyles$2;
 
   Object.defineProperty(exports, '__esModule', { value: true });