@opengeoweb/core 4.2.0 → 4.3.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@opengeoweb/webmap', 'react-sortablejs', '@opengeoweb/form-fields', 'react-hook-form', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.webmap, global.reactSortablejs, global.formFields, global.reactHookForm, global.reactWindow, global.Box, global.Typography, global.Grid, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, webmap, reactSortablejs, formFields, reactHookForm, reactWindow, Box, Typography, Grid, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@mui/material/Tooltip'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', '@opengeoweb/form-fields', 'react-hook-form', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@mui/material/Tooltip', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.webmap, global.reactSortablejs, global.Sortable, global.formFields, global.reactHookForm, global.reactWindow, global.Box, global.Typography, global.Grid, global.Tooltip, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
+})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, webmap, reactSortablejs, Sortable, formFields, reactHookForm, reactWindow, Box, Typography, Grid, Tooltip, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,9 +29,11 @@
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+    var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
     var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
     var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
     var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+    var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
     var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
     var proj4__default = /*#__PURE__*/_interopDefaultLegacy(proj4);
     var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
@@ -437,6 +439,7 @@
         get LayerActionOrigin () { return LayerActionOrigin; }
     });
 
+    var millisecondsInSecond = 1000;
     var defaultAnimationDelayAtStart = 250;
     var defaultDelay = 1000; // [ms]
 
@@ -567,50 +570,6 @@
        */
       [2147483647, 0]);
     };
-    var getNextTimeStepvalue = function getNextTimeStepvalue(value, max) {
-      var newValue = value + 1;
-      return newValue > max ? max : newValue;
-    };
-    var getPreviousTimeStepvalue = function getPreviousTimeStepvalue(value, min) {
-      var newValue = value - 1;
-      return newValue < min ? min : newValue;
-    };
-    var getValueFromKeyboardEvent = function getValueFromKeyboardEvent(event, value, min, max, supportFourDirectionNavigation) {
-      if (supportFourDirectionNavigation === void 0) {
-        supportFourDirectionNavigation = false;
-      }
-
-      if (!supportFourDirectionNavigation) {
-        if (event.ctrlKey || event.metaKey) {
-          switch (event.key) {
-            case 'ArrowDown':
-              return getPreviousTimeStepvalue(value, min);
-
-            case 'ArrowUp':
-              return getNextTimeStepvalue(value, max);
-
-            default:
-              return null;
-          }
-        }
-      } else {
-        // currently supportFourDirectionNavigation (left/right/up/down) is only used in horizontal slider TimeSliderScaleSlider
-        switch (event.key) {
-          case 'ArrowDown':
-          case 'ArrowLeft':
-            return getPreviousTimeStepvalue(value, min);
-
-          case 'ArrowUp':
-          case 'ArrowRight':
-            return getNextTimeStepvalue(value, max);
-
-          default:
-            return null;
-        }
-      }
-
-      return null;
-    };
     var getTimeStepFromDataInterval = function getTimeStepFromDataInterval(timeInterval) {
       switch (timeInterval.isRegularInterval) {
         case false:
@@ -768,6 +727,25 @@
     var getAutoMoveAreaWidth = function getAutoMoveAreaWidth(scale) {
       return (scale === Scale.Year ? needleGeom.largeWidth : needleGeom.smallWidth) / 2 + AUTO_MOVE_AREA_PADDING;
     };
+    /** Reusable business logic for how to handle events that set time to now (closest).
+     * Used in NowButton and TimeSliderLegend.
+     */
+
+    var handleSetNowEvent = function handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime) {
+      if (dataStartTime < dataEndTime) {
+        if (dataEndTime < currentTime) {
+          onSetNewDate(moment__default["default"].utc(dataEndTime * millisecondsInSecond).toISOString());
+          onSetCenterTime(dataEndTime);
+        } else if (dataStartTime > currentTime) {
+          onSetNewDate(moment__default["default"].utc(dataStartTime * millisecondsInSecond).toISOString());
+          onSetCenterTime(dataStartTime);
+        } else {
+          var closestToCurrent = roundWithTimeStep(currentTime, timeStep);
+          onSetNewDate(moment__default["default"].utc(closestToCurrent * millisecondsInSecond).toISOString());
+          onSetCenterTime(closestToCurrent);
+        }
+      }
+    };
 
     var createMap = function createMap(_a) {
       var id = _a.id,
@@ -1697,6 +1675,9 @@
         resultEqualityCheck: _.isEqual
       }
     };
+    var isUserAddedService = function isUserAddedService(scope) {
+      return scope === 'user';
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1818,25 +1799,6 @@
     var getLayerStyles$1 = toolkit.createSelector(getLayerFromService, function (layer) {
       return layer && layer.styles ? layer.styles : [];
     }, selectorMemoizationOptions);
-    /**
-     * Gets services and maps them into an array
-     *
-     * Example: services = getServices(store)
-     * @param {object} store store: object - Store object
-     * @returns {array} returnType: [] - array containing services
-     */
-
-    toolkit.createSelector(servicesStore, function (store) {
-      var services = store ? store.byId : {};
-      var arrayOfServiceObjects = Object.keys(services).map(function (key) {
-        return {
-          name: services[key].name,
-          serviceUrl: services[key].serviceUrl,
-          isUserAddedService: services[key].isUserAddedService
-        };
-      });
-      return arrayOfServiceObjects;
-    }, selectorMemoizationOptions);
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2941,7 +2903,7 @@
      *
      * Example: getDialogDetailsByType(store, 'legend')
      * @param {object} store store object from which the ui state wll be extracted
-     * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+     * @param {string} dialogType type of the dialog
      * @returns {array} [string, boolean] first element gives the active map id, second element whether the dialog is open
      */
 
@@ -2956,7 +2918,7 @@
      * For a given ui component: gets wether the dialog is open or closed
      *
      * @param {object} store store object from which the ui state wll be extracted
-     * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+     * @param {string} dialogType type of the dialog
      * @returns {boolean} returnType: boolean
      */
 
@@ -2971,7 +2933,7 @@
      *For a given ui component: gets the active map Id
      *
      * @param {object} store store object from which the ui state wll be extracted
-     * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+     * @param {string} dialogType type of the dialog
      * @returns {string} returnType: string - the active map id
      */
 
@@ -2986,7 +2948,7 @@
      *For a given ui component: gets the order of visible dialog
      *
      * @param {object} store store object from which the ui state wll be extracted
-     * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
+     * @param {DialogType} dialogType type of the dialog
      * @returns {number} the higher the order number the higher the zIndex
      */
 
@@ -3012,7 +2974,7 @@
      *For a given ui component: returns if ordered on top
      *
      * @param {object} store store object from which the ui state wll be extracted
-     * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
+     * @param {DialogType} dialogType type of the dialog
      * @returns {boolean}
      */
 
@@ -4276,6 +4238,25 @@
         getMapPresetError: getMapPresetError
     });
 
+    var DialogTypes;
+
+    (function (DialogTypes) {
+      DialogTypes["LayerInfo"] = "layerInfo";
+      DialogTypes["SyncGroups"] = "syncGroups";
+      DialogTypes["TimeSeriesSelect"] = "timeSeriesSelect";
+      DialogTypes["TimeSeriesManager"] = "timeSeriesManager";
+      DialogTypes["KeywordFilter"] = "keywordFilter";
+      DialogTypes["DimensionSelectEnsembleMember"] = "dimensionSelect-ensemble_member";
+      DialogTypes["DimensionSelectElevation"] = "dimensionSelect-elevation";
+      DialogTypes["LayerManager"] = "layerManager";
+      DialogTypes["LayerSelect"] = "layerSelect";
+    })(DialogTypes || (DialogTypes = {}));
+
+    var types = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        get DialogTypes () { return DialogTypes; }
+    });
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -4315,7 +4296,7 @@
     };
     var slice$1 = toolkit.createSlice({
       initialState: initialState$1,
-      name: 'layerSelect',
+      name: DialogTypes.LayerSelect,
       reducers: {
         setSearchFilter: function setSearchFilter(draft, action) {
           var filterText = action.payload.filterText;
@@ -4332,7 +4313,7 @@
               serviceUrl = _a.serviceUrl,
               _abstract = _a["abstract"],
               keywords = _a.keywords,
-              isUserAddedService = _a.isUserAddedService,
+              scope = _a.scope,
               groups = _a.groups;
 
           if (!draft.filters.activeServices.byId[serviceId]) {
@@ -4372,7 +4353,7 @@
             serviceId: serviceId,
             enabled: draft.allServicesEnabled,
             filterIds: filterIds,
-            isUserAddedService: isUserAddedService,
+            scope: scope,
             serviceName: serviceName,
             serviceUrl: serviceUrl,
             "abstract": _abstract
@@ -4477,6 +4458,61 @@
     var reducer$1 = slice$1.reducer;
     var layerSelectActions = slice$1.actions;
 
+    /* *
+     * 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 filterLayersFromService = function filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString) {
+      var mapStoreService = services[serviceId];
+      if (!mapStoreService) return [];
+
+      if (searchString === '' && allFiltersActive) {
+        return mapStoreService.layers.filter(function (layer) {
+          return layer.leaf;
+        });
+      }
+
+      var searchStringArray = searchString.split(' ');
+      return mapStoreService.layers.filter(function (layer) {
+        return searchStringArray.every(function (search) {
+          var _a, _b, _c;
+
+          var searchLowercase = search.toLowerCase();
+          var layerFilterIds = layer.path.map(function (group) {
+            return "groups-" + group;
+          }).concat(layer.keywords.map(function (keyword) {
+            return "keywords-" + keyword;
+          }));
+          var isFilterInLayer = (layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (id) {
+            return filterIds.includes(id);
+          })) || allFiltersActive;
+          var isSearchTextInLayerFilter = layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (filterId) {
+            return filterId.toLowerCase().includes(searchLowercase);
+          });
+          var isSearchTextInLayerName = (_a = layer.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLowercase);
+          var isSearchTextInLayerText = (_b = layer.text) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchLowercase);
+          var isSearchTextInLayerAbstract = (_c = layer["abstract"]) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchLowercase);
+          var isSearchTextInServiceName = mapStoreService.name.toLowerCase().includes(searchLowercase);
+          var isSearchTextInLayer = isSearchTextInLayerName || isSearchTextInLayerText || isSearchTextInLayerAbstract || isSearchTextInLayerFilter || isSearchTextInServiceName;
+          return isFilterInLayer && isSearchTextInLayer;
+        });
+      }).filter(function (layer) {
+        return layer.leaf;
+      });
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -4635,6 +4671,22 @@
     var getActiveLayerInfo = toolkit.createSelector(layerSelectStore, function (store) {
       return store === null || store === void 0 ? void 0 : store.activeLayerInfo;
     });
+    /**
+     * Returns a filtered active layer object based on the given filter settings
+     * Example: layerSelectSelectors.getFilteredLayers(store, filteredSettings);
+     * @param {object} store store: object - object from which the service state will be extracted
+     * @returns {array} returnType: ActiveLayerObject - an array of all filtered activelayers
+     */
+
+    var getFilteredLayers = toolkit.createSelector([getEnabledServiceIds, getServices, getCheckedFilterIds, isAllFiltersChecked, getSearchFilter], function (enabledServiceIds, servicesStore, checkedFilterIds, allFiltersActive, searchFilter) {
+      return enabledServiceIds.reduce(function (layerList, serviceId) {
+        return layerList.concat(filterLayersFromService(serviceId, servicesStore, checkedFilterIds, allFiltersActive, searchFilter).map(function (layer) {
+          return __assign(__assign({}, layer), {
+            serviceName: serviceId
+          });
+        }));
+      }, []);
+    }, selectorMemoizationOptions);
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4708,17 +4760,6 @@
       return currentMessages.length > 0 ? currentMessages[0] : undefined;
     });
 
-    var DialogTypes;
-
-    (function (DialogTypes) {
-      DialogTypes["LayerInfo"] = "layerInfo";
-    })(DialogTypes || (DialogTypes = {}));
-
-    var types = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        get DialogTypes () { return DialogTypes; }
-    });
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -6056,9 +6097,7 @@
       var isAnimating = _a.isAnimating,
           isDisabled = _a.isDisabled,
           _b = _a.onTogglePlayButton,
-          onTogglePlayButton = _b === void 0 ? function () {
-        return null;
-      } : _b;
+          onTogglePlayButton = _b === void 0 ? function () {} : _b;
 
       var onTogglePlay = function onTogglePlay() {
         onTogglePlayButton();
@@ -7177,6 +7216,84 @@
       return CanvasComponent;
     }(React.Component);
 
+    /* *
+     * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var LegendLayout = function LegendLayout(_a) {
+      var title = _a.title,
+          name = _a.name,
+          dimensions = _a.dimensions,
+          children = _a.children,
+          height = _a.height,
+          width = _a.width,
+          minWidth = _a.minWidth;
+      return /*#__PURE__*/React__default["default"].createElement(material.Paper, {
+        "data-testid": "legend",
+        sx: {
+          padding: '10px',
+          border: '1px solid grey',
+          backgroundColor: '#FFF',
+          overflow: 'hidden',
+          marginBottom: 0.5
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        "data-testid": "legend-title"
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: {
+          fontFamily: 'Roboto, Helvetica, Arial',
+          fontSize: '10px',
+          minWidth: '100%',
+          wordWrap: 'break-word',
+          color: 'common.black',
+          whiteSpace: 'nowrap'
+        },
+        variant: "h3"
+      }, title)), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: title || 'loading',
+        placement: "top"
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          margin: '10px 0px 10px 0px',
+          height: height + "px",
+          width: width + "px"
+        }
+      }, children)), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        "data-testid": "legend-info",
+        sx: __assign({
+          fontFamily: 'Roboto, Helvetica, Arial',
+          fontSize: 10,
+          color: 'common.black',
+          overflowX: 'hidden',
+          wordWrap: 'break-word',
+          whiteSpace: 'nowrap'
+        }, minWidth && {
+          minWidth: minWidth + "px"
+        })
+      }, dimensions && dimensions.map(function (dim) {
+        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+          key: name + dim.name
+        }, dim.name === 'time' ? "" + dim.currentValue : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+          style: {
+            fontWeight: 500
+          }
+        }, dim.name, ":"), dim.currentValue, " ", dim.units));
+      })));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -7271,46 +7388,20 @@
       like a title and the WMS legendgraphic url */
 
       var wmLayer = getWMLayerById(layer.id);
-      return /*#__PURE__*/React__default["default"].createElement(material.Paper, {
-        "data-testid": "legend",
-        sx: {
-          padding: '10px',
-          border: '1px solid grey',
-          display: 'inline-block',
-          backgroundColor: '#FFF',
-          overflow: 'hidden',
-          marginBottom: 0.5
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
-        "data-testid": "legend-title",
-        style: {
-          maxWidth: canvasContainerWidth
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        sx: {
-          fontFamily: 'Roboto, Helvetica, Arial',
-          fontSize: '10px',
-          minWidth: defaultCanvasWidth + "px",
-          wordWrap: 'break-word',
-          color: 'common.black'
-        },
-        variant: "h3"
-      }, wmLayer && wmLayer.title)), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
-        title: wmLayer && wmLayer.title || 'loading',
-        placement: "top"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
-        sx: {
-          margin: '10px 0px 10px 0px',
-          height: canvasContainerHeight + "px",
-          width: canvasContainerWidth + "px"
-        }
+      return /*#__PURE__*/React__default["default"].createElement(LegendLayout, {
+        title: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title,
+        name: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.name,
+        dimensions: layer === null || layer === void 0 ? void 0 : layer.dimensions,
+        height: canvasContainerHeight,
+        width: canvasContainerWidth,
+        minWidth: defaultCanvasWidth
       }, /*#__PURE__*/React__default["default"].createElement(CanvasComponent, {
         redrawInterval: 500,
         onRenderCanvas: function onRenderCanvas(ctx, width, height) {
           /*
-            Check if the wmLayer is available, this happens when the WMS GetCapabilities is loaded and parsed.
-            Note that we cannot use the wmLayer variable above, as this one could contain a non initialized WMJSLayer.
-           */
+                Check if the wmLayer is available, this happens when the WMS GetCapabilities is loaded and parsed.
+                Note that we cannot use the wmLayer variable above, as this one could contain a non initialized WMJSLayer.
+               */
           var legendWmLayer = getWMLayerById(layer.id);
           var legendUrl = webmap.getLegendGraphicURLForLayer(legendWmLayer);
           var image = webmap.legendImageStore.getImage(legendUrl);
@@ -7359,26 +7450,7 @@
             renderLegendGraphic(previousLegendImage.current, ctx, imageWidth, imageHeight);
           }
         }
-      }))), /*#__PURE__*/React__default["default"].createElement(material.Box, {
-        "data-testid": "legend-info",
-        sx: {
-          fontFamily: 'Roboto, Helvetica, Arial',
-          fontSize: 10,
-          color: 'common.black',
-          overflowX: 'hidden',
-          minWidth: defaultCanvasWidth + "px",
-          wordWrap: 'break-word',
-          maxWidth: canvasContainerWidth + "px"
-        }
-      }, layer.dimensions && layer.dimensions.map(function (dim) {
-        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
-          key: layer.name + dim.name
-        }, dim.name === 'time' ? "" + dim.currentValue : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Box, {
-          style: {
-            fontWeight: 500
-          }
-        }, dim.name, ":"), dim.currentValue, " ", dim.units));
-      })));
+      }));
     };
 
     /* *
@@ -7630,8 +7702,8 @@
         switch (_b.label) {
           case 0:
             mapId = payload.mapId, start = payload.start, end = payload.end, interval = payload.interval, timeList = payload.timeList;
-            roundedStart = roundWithTimeStep(start && moment__default["default"].utc(start).unix(), interval, 'ceil');
-            roundedEnd = roundWithTimeStep(end && moment__default["default"].utc(end).unix(), interval, 'floor');
+            roundedStart = roundWithTimeStep(Number(start && moment__default["default"].utc(start).unix()), interval, 'ceil');
+            roundedEnd = roundWithTimeStep(Number(end && moment__default["default"].utc(end).unix()), interval, 'floor');
             return [4
             /*yield*/
             , timeList || generateTimeList(moment__default["default"].utc(roundedStart * 1000), moment__default["default"].utc(roundedEnd * 1000), interval)];
@@ -8483,7 +8555,7 @@
                 service = _c[1];
 
             return __assign(__assign({}, userServices), isNoIdService(service) ? (_b = {}, _b[serviceUrl] = __assign(__assign({}, service), {
-              isUserAddedService: true
+              scope: 'user'
             }), _b) : {});
           }, {});
         }
@@ -8523,13 +8595,13 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     function newServiceAddedSaga(capturedAction) {
-      var addedService, id, serviceUrl, name, isUserAddedService, _abstract, keywords, groups;
+      var addedService, id, serviceUrl, name, scope, _abstract, keywords, groups;
 
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
             addedService = capturedAction.payload;
-            id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, isUserAddedService = addedService.isUserAddedService, _abstract = addedService["abstract"];
+            id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, scope = addedService.scope, _abstract = addedService["abstract"];
             keywords = addedService.layers.reduce(function (keywords, layer) {
               var _a;
 
@@ -8555,7 +8627,7 @@
               serviceName: name,
               serviceUrl: serviceUrl,
               keywords: keywords,
-              isUserAddedService: isUserAddedService,
+              scope: scope,
               groups: groups,
               "abstract": _abstract
             }))];
@@ -8628,11 +8700,11 @@
       var _b;
 
       var payload = _a.payload;
-      var isUserAddedService = payload.isUserAddedService,
+      var scope = payload.scope,
           name = payload.name,
           serviceUrl = payload.serviceUrl,
           _abstract2 = payload["abstract"];
-      if (!isUserAddedService) return;
+      if (!isUserAddedService(scope)) return;
       var localStorageServices = getUserAddedServices();
       setUserAddedServices(__assign(__assign({}, localStorageServices), (_b = {}, _b[serviceUrl] = {
         name: name,
@@ -9818,14 +9890,14 @@
           source = _b === void 0 ? 'app' : _b;
       var dispatch = reactRedux.useDispatch();
       var currentActiveMapId = reactRedux.useSelector(function (store) {
-        return getDialogMapId(store, 'layerSelect');
+        return getDialogMapId(store, DialogTypes.LayerSelect);
       });
       var isOpenInStore = reactRedux.useSelector(function (store) {
-        return getisDialogOpen(store, 'layerSelect');
+        return getisDialogOpen(store, DialogTypes.LayerSelect);
       });
       var openLayerSelectDialog = React__namespace.useCallback(function () {
         dispatch(uiActions.setActiveMapIdForDialog({
-          type: 'layerSelect',
+          type: DialogTypes.LayerSelect,
           mapId: mapId,
           setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
           source: source
@@ -11288,7 +11360,7 @@
       var onStart = React__namespace.useCallback(function (_a) {
         var oldIndex = _a.oldIndex;
         setActiveDragIndex(oldIndex);
-        reactSortablejs.Sortable.ghost.style.opacity = '1';
+        Sortable__default["default"].ghost.style.opacity = '1';
       }, []);
       var onEnd = React__namespace.useCallback(function () {
         if (activeDragIndex !== null) {
@@ -11786,14 +11858,14 @@
           source = _b === void 0 ? 'app' : _b;
       var dispatch = reactRedux.useDispatch();
       var currentActiveMapId = reactRedux.useSelector(function (store) {
-        return getDialogMapId(store, 'keywordFilter');
+        return getDialogMapId(store, DialogTypes.KeywordFilter);
       });
       var isOpenInStore = reactRedux.useSelector(function (store) {
-        return getisDialogOpen(store, 'keywordFilter');
+        return getisDialogOpen(store, DialogTypes.KeywordFilter);
       });
       var openFilterResultsDialog = React__namespace.useCallback(function () {
         dispatch(uiActions.setActiveMapIdForDialog({
-          type: 'keywordFilter',
+          type: DialogTypes.KeywordFilter,
           mapId: mapId,
           setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
           source: source
@@ -12145,7 +12217,7 @@
                     serviceUrl: formValues.serviceUrl,
                     "abstract": formValues.serviceAbstracts,
                     layers: serviceLayers,
-                    isUserAddedService: true
+                    scope: 'user'
                   });
                   setIsLoading(false);
                   showSnackbar(getSuccesMessage(formValues.serviceName));
@@ -12301,8 +12373,8 @@
           })
         },
         disabled: isServiceUrlDisabled || isLoading,
+        isReadOnly: isShowPopup,
         InputProps: {
-          readOnly: isShowPopup,
           disableUnderline: isShowPopup,
           endAdornment: isShowPopup && /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
             position: "end"
@@ -12325,8 +12397,8 @@
           }
         },
         disabled: isShowPopup || isLoading,
+        isReadOnly: isShowPopup,
         InputProps: {
-          readOnly: isShowPopup,
           disableUnderline: isShowPopup
         },
         sx: style$1.textField,
@@ -12337,9 +12409,8 @@
         name: fields.serviceAbstracts.name,
         label: fields.serviceAbstracts.label,
         disabled: isShowPopup || isLoading,
-        rules: {},
+        isReadOnly: isShowPopup,
         InputProps: {
-          readOnly: isShowPopup,
           disableUnderline: isShowPopup
         },
         helperText: !isShowPopup && 'Short description of what this service does',
@@ -12585,63 +12656,8 @@
      * 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 filterLayersFromService = function filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString) {
-      var mapStoreService = services[serviceId];
-      if (!mapStoreService) return [];
-
-      if (searchString === '' && allFiltersActive) {
-        return mapStoreService.layers.filter(function (layer) {
-          return layer.leaf;
-        });
-      }
-
-      var searchStringArray = searchString.split(' ');
-      return mapStoreService.layers.filter(function (layer) {
-        return searchStringArray.every(function (search) {
-          var _a, _b, _c;
-
-          var searchLowercase = search.toLowerCase();
-          var layerFilterIds = layer.path.map(function (group) {
-            return "group-" + group;
-          }).concat(layer.keywords.map(function (keyword) {
-            return "keyword-" + keyword;
-          }));
-          var isFilterInLayer = (layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (id) {
-            return filterIds.includes(id);
-          })) || allFiltersActive;
-          var isSearchTextInLayerFilter = layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (filterId) {
-            return filterId.toLowerCase().includes(searchLowercase);
-          });
-          var isSearchTextInLayerName = (_a = layer.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLowercase);
-          var isSearchTextInLayerText = (_b = layer.text) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchLowercase);
-          var isSearchTextInLayerAbstract = (_c = layer["abstract"]) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchLowercase);
-          var isSearchTextInServiceName = mapStoreService.name.toLowerCase().includes(searchLowercase);
-          var isSearchTextInLayer = isSearchTextInLayerName || isSearchTextInLayerText || isSearchTextInLayerAbstract || isSearchTextInLayerFilter || isSearchTextInServiceName;
-          return isFilterInLayer && isSearchTextInLayer;
-        });
-      }).filter(function (layer) {
-        return layer.leaf;
-      });
-    };
-
-    /* *
-     * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
     var LayerAddRemoveButton = function LayerAddRemoveButton(_a) {
@@ -12764,12 +12780,11 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var textStyle$1 = {
+    var textStyle = {
       lineHeight: '20px',
       letterSpacing: '0.25px'
     };
-
-    var textStyleWithMargin = __assign(__assign({}, textStyle$1), {
+    var textStyleWithMargin = __assign(__assign({}, textStyle), {
       marginBottom: 1
     });
 
@@ -12778,7 +12793,7 @@
           value = _a.value;
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         variant: "subtitle2",
-        sx: textStyle$1
+        sx: textStyle
       }, label), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         variant: "body2",
         sx: textStyleWithMargin
@@ -12801,10 +12816,6 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var textStyle = {
-      lineHeight: '20px',
-      letterSpacing: '0.25px'
-    };
 
     var valueStyle = __assign(__assign({}, textStyle), {
       overflowWrap: 'break-word'
@@ -12816,12 +12827,15 @@
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         variant: "subtitle2",
         sx: textStyle
-      }, label), /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
+      }, label), list.length === 0 ? /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+        variant: "body2",
+        sx: textStyleWithMargin
+      }, "-") : /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
         container: true,
         direction: "column"
       }, list.map(function (item) {
         return /*#__PURE__*/React__default["default"].createElement("div", {
-          key: item.name
+          key: item.label
         }, /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
           item: true,
           container: true,
@@ -12834,7 +12848,7 @@
         }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
           variant: "body2",
           sx: textStyle
-        }, item.name, ":"))), /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
+        }, item.label, ":"))), /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
           item: true,
           container: true,
           direction: "row",
@@ -12849,6 +12863,41 @@
       })));
     };
 
+    /* *
+     * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var LayerInfoLegend = function LayerInfoLegend(_a) {
+      var title = _a.title,
+          name = _a.name,
+          dimensions = _a.dimensions,
+          legendURL = _a.legendURL;
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+        variant: "subtitle2",
+        sx: textStyleWithMargin
+      }, "Legend"), /*#__PURE__*/React__default["default"].createElement(LegendLayout, {
+        title: title,
+        name: name,
+        dimensions: dimensions
+      }, legendURL ? /*#__PURE__*/React__default["default"].createElement("img", {
+        alt: title,
+        src: legendURL
+      }) : '-'));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -12880,22 +12929,19 @@
 
       return styles.join(', ');
     };
-    var getDimensionValue = function getDimensionValue(name, layer, breakAt, includeUnit) {
-      var _a;
-
-      if (includeUnit === void 0) {
-        includeUnit = false;
-      }
-
-      var dimension = (_a = layer.dimensions) === null || _a === void 0 ? void 0 : _a.find(function (dimension) {
-        return dimension.name.toLowerCase() === name;
+    var getDimensionValue = function getDimensionValue(name, dimensions) {
+      var dimension = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dimension) {
+        return dimension.name.toLowerCase() === name.toLowerCase();
       });
 
-      if (!dimension) {
-        return '-';
+      if (!dimension || !dimension.currentValue) {
+        return null;
       }
 
-      var dimValue = dimension === null || dimension === void 0 ? void 0 : dimension.currentValue.split(breakAt).join(breakAt + " ");
+      var dimName = dimension.name.toLowerCase();
+      var breakAt = dimName === 'time' ? '/' : ',';
+      var includeUnit = dimName !== 'time' && dimName !== 'reference_time';
+      var dimValue = dimension.currentValue.split(breakAt).join(breakAt + " ");
 
       if (includeUnit) {
         return dimValue + " " + dimension.units;
@@ -12906,6 +12952,64 @@
     var getLayerBbox = function getLayerBbox(layer) {
       return layer.geographicBoundingBox ? "west " + layer.geographicBoundingBox.west + ", east " + layer.geographicBoundingBox.east + ", north " + layer.geographicBoundingBox.north + ", south " + layer.geographicBoundingBox.south : '-';
     };
+    var getDimensionIcon$1 = function getDimensionIcon(name, dimensions) {
+      var dimension = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dimension) {
+        return dimension.name.toLowerCase() === name.toLowerCase();
+      });
+
+      if (!dimension) {
+        return null;
+      }
+
+      switch (dimension.name.toLowerCase()) {
+        case 'time':
+          return /*#__PURE__*/React__default["default"].createElement(theme.DimensionsTime, null);
+
+        case 'reference_time':
+          return /*#__PURE__*/React__default["default"].createElement(theme.DimensionsRefTime, null);
+
+        case 'elevation':
+          return /*#__PURE__*/React__default["default"].createElement(theme.DimensionsElevation, null);
+
+        default:
+          return /*#__PURE__*/React__default["default"].createElement(theme.DimensionsOther, null);
+      }
+    };
+    var getDimensionLabel = function getDimensionLabel(name) {
+      var dimName = name.toLowerCase().split('_').join(' ');
+      return dimName.charAt(0).toUpperCase() + dimName.slice(1);
+    };
+    var getDimensionsList = function getDimensionsList(dimensions) {
+      var result = [];
+      dimensions === null || dimensions === void 0 ? void 0 : dimensions.forEach(function (_a) {
+        var name = _a.name;
+        var value = getDimensionValue(name, dimensions);
+
+        if (!value) {
+          return;
+        }
+
+        var icon = getDimensionIcon$1(name, dimensions);
+        var label = getDimensionLabel(name);
+        result.push({
+          label: label,
+          value: value,
+          icon: icon
+        });
+      }); // sort alphabetically so other dimensions are sorted
+
+      result.sort(function (a, b) {
+        return a.label.localeCompare(b.label);
+      }); // sort by fixed order
+
+      var preferredOrder = ['Time', 'Reference time', 'Elevation']; // using reverse ordering to make sure the other dimensions come last
+
+      preferredOrder.reverse();
+      result.sort(function (a, b) {
+        return preferredOrder.indexOf(b.label) - preferredOrder.indexOf(a.label);
+      });
+      return result;
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -12939,9 +13043,7 @@
           dialogHeight = _a.dialogHeight;
       var styles = getLayerStyles(layer);
       var bbox = getLayerBbox(layer);
-      var timeValue = getDimensionValue('time', layer, '/');
-      var refTimeValue = getDimensionValue('reference_time', layer, ',');
-      var elevationValue = getDimensionValue('elevation', layer, ',', true);
+      var dimensions = getDimensionsList(layer.dimensions);
       return /*#__PURE__*/React__default["default"].createElement(shared.ToolContainerDraggable, {
         onClose: onClose,
         headerSize: "xs",
@@ -12976,23 +13078,7 @@
         value: layer["abstract"] || '-'
       }), /*#__PURE__*/React__default["default"].createElement(LayerInfoList, {
         label: "Dimensions",
-        list: [{
-          name: 'Time',
-          value: timeValue,
-          icon: /*#__PURE__*/React__default["default"].createElement(theme.DimensionsTime, null)
-        }, {
-          name: 'Reference Time',
-          value: refTimeValue,
-          icon: /*#__PURE__*/React__default["default"].createElement(theme.DimensionsRefTime, null)
-        }, {
-          name: 'Elevation',
-          value: elevationValue,
-          icon: /*#__PURE__*/React__default["default"].createElement(theme.DimensionsElevation, null)
-        }, {
-          name: 'Other dimensions',
-          value: '-',
-          icon: /*#__PURE__*/React__default["default"].createElement(theme.DimensionsOther, null)
-        }]
+        list: dimensions
       }), /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
         label: "Styles",
         value: styles
@@ -13005,9 +13091,152 @@
       }), /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
         label: "Keywords",
         value: ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.join(', ')) || '-'
+      }), /*#__PURE__*/React__default["default"].createElement(LayerInfoLegend, {
+        title: layer.text,
+        name: layer.name,
+        dimensions: layer.dimensions,
+        legendURL: layer.styles && layer.styles.length && layer.styles[0].legendURL
       })));
     };
 
+    /* *
+     * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var LayerListDimensions = function LayerListDimensions(_a) {
+      var dimensions = _a.dimensions;
+
+      if (!dimensions || !dimensions.length) {
+        return null;
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, dimensions.map(function (dimension) {
+        return /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
+          key: dimension.label,
+          title: dimension.label + ": " + dimension.value
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
+          style: {
+            marginRight: 4
+          }
+        }, dimension.icon));
+      }));
+    };
+
+    /* *
+     * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var buttonLarge = 80;
+    var buttonSmall = 60;
+    var layerSelectColumnsLarge = {
+      column1: {
+        width: 112
+      },
+      column2: {
+        marginTop: '6px',
+        width: "calc(100% - 112px)",
+        height: '36px',
+        paddingLeft: '20px'
+      },
+      column3: {
+        height: '12px'
+      },
+      column4: {
+        height: '24px'
+      },
+      column5: {
+        height: '24px',
+        width: 140
+      },
+      column6: {
+        height: '24px',
+        width: "calc(100% - 140px)"
+      },
+      column7: {
+        height: '48px',
+        width: buttonLarge,
+        marginRight: 1,
+        marginLeft: 2
+      },
+      column8: {
+        width: "calc(100% - " + buttonLarge + "px - 24px)"
+      },
+      column9: {
+        width: "calc(" + buttonLarge + "px + 24px)"
+      }
+    };
+    var layerSelectColumnsSmall = {
+      column1: {
+        width: '100%'
+      },
+      column2: {
+        marginTop: '4px',
+        width: "calc(100% - 20px)"
+      },
+      column3: {
+        height: '12px'
+      },
+      column4: {
+        height: '48px'
+      },
+      column5: {
+        height: '24px',
+        width: '100%'
+      },
+      column6: {
+        height: '24px',
+        width: '100%'
+      },
+      column7: {
+        height: '48px',
+        width: buttonSmall,
+        marginRight: 0,
+        marginLeft: 1
+      },
+      column8: {
+        width: "calc(100% - " + buttonSmall + "px - 8px)"
+      },
+      column9: {
+        width: "calc(" + buttonSmall + "px + 8px)"
+      }
+    };
+    var breakpoint = 500;
+    var widthToColumns = function widthToColumns(width) {
+      if (width <= breakpoint) return layerSelectColumnsSmall;
+      return layerSelectColumnsLarge;
+    };
+    var rowHeightLarge = 68;
+    var rowHeightSmall = 136;
+    var widthToRowHeight = function widthToRowHeight(width) {
+      if (width <= breakpoint) return rowHeightSmall;
+      return rowHeightLarge;
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -13028,11 +13257,12 @@
       fontSize: '10px',
       textOverflow: 'ellipsis',
       overflow: 'hidden',
-      whiteSpace: 'nowrap'
+      whiteSpace: 'nowrap',
+      lineHeight: 1
     };
 
     var LayerListRow = function LayerListRow(_a) {
-      var _b, _c, _d;
+      var _b;
 
       var layer = _a.layer,
           layerIndex = _a.layerIndex,
@@ -13040,28 +13270,29 @@
           addLayer = _a.addLayer,
           deleteLayer = _a.deleteLayer,
           mapLayers = _a.mapLayers,
-          mapId = _a.mapId;
+          mapId = _a.mapId,
+          layerSelectWidth = _a.layerSelectWidth;
+      var rowHeight = widthToRowHeight(layerSelectWidth);
+      var columns = widthToColumns(layerSelectWidth);
+      var dimensions = getDimensionsList(layer.dimensions);
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         "data-testid": "layerListLayerRow",
         container: true,
-        item: true,
-        xs: 12,
         justifyContent: "center",
         alignItems: "center",
         sx: {
           backgroundColor: 'geowebColors.cards.cardContainer',
           padding: '8px',
           marginBottom: '4px',
-          height: '68px',
+          height: rowHeight,
           border: 'solid 1px',
           borderColor: 'geowebColors.cards.cardContainerBorder'
         }
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         item: true,
-        xs: 10
+        sx: columns.column8
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
         item: true,
         xs: 12
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
@@ -13070,25 +13301,19 @@
           height: '14px',
           lineHeight: '14px',
           fontWeight: 500,
-          WebkitLineClamp: 1,
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical',
           textOverflow: 'ellipsis',
           overflow: 'hidden'
         }
       }, layer.text)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
         item: true,
-        xs: 4,
-        direction: "column"
+        container: true,
+        direction: "column",
+        sx: columns.column1
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
           fontSize: '12px',
           height: '18px',
           lineHeight: '18px',
-          WebkitLineClamp: 1,
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical',
           textOverflow: 'ellipsis',
           overflow: 'hidden'
         }
@@ -13096,44 +13321,41 @@
         layer: layer,
         mapId: mapId,
         serviceName: service.name
-      })), layer["abstract"] || ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.length) || layer.path.length ? /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        sx: columns.column2
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        sx: columns.column3
+      }, layer["abstract"] && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         "data-testid": "layerAbstract",
+        sx: layerInfoStyle
+      }, layer["abstract"])), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
         container: true,
+        sx: columns.column4
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 8,
-        sx: {
-          height: '45px',
-          paddingLeft: '20px',
-          WebkitLineClamp: 2,
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical'
-        }
-      }, layer["abstract"] && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        sx: __assign(__assign({}, layerInfoStyle), {
-          height: 15
-        })
-      }, layer["abstract"]), layer.path.length > 0 && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        sx: __assign(__assign({}, layerInfoStyle), {
-          height: ((_c = layer.keywords) === null || _c === void 0 ? void 0 : _c.length) ? 15 : 30
-        })
-      }, "Groups: ", layer.path.join(' / ')), ((_d = layer.keywords) === null || _d === void 0 ? void 0 : _d.length) > 0 && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        sx: __assign(__assign({}, layerInfoStyle), {
-          height: layer.path.length ? 15 : 30
-        })
+        sx: columns.column5
+      }, /*#__PURE__*/React__default["default"].createElement(LayerListDimensions, {
+        dimensions: dimensions
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        sx: columns.column6
+      }, layer.path.length > 0 && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: layerInfoStyle
+      }, "Groups: ", layer.path.join(' / ')), ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.length) > 0 && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: layerInfoStyle
       }, "Keywords:", ' ', layer.keywords.slice().sort(function (a, b) {
         return a.localeCompare(b);
-      }).join(', '))) : null), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }).join(', ')))))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         item: true,
-        xs: 2,
+        sx: columns.column9,
         justifyContent: "flex-end",
         alignItems: "center"
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
-        sx: {
-          width: '80px',
-          height: '48px',
-          marginRight: '8px'
-        }
+        sx: columns.column7
       }, /*#__PURE__*/React__default["default"].createElement(LayerAddRemoveButton, {
         layer: layer,
         layerIndex: layerIndex,
@@ -13163,38 +13385,17 @@
 
     var LayerList = function LayerList(_a) {
       var services = _a.services,
-          serviceIds = _a.serviceIds,
+          filteredLayers = _a.filteredLayers,
           layerSelectHeight = _a.layerSelectHeight,
           serviceListHeight = _a.serviceListHeight,
+          layerSelectWidth = _a.layerSelectWidth,
           addLayer = _a.addLayer,
           deleteLayer = _a.deleteLayer,
-          searchString = _a.searchString,
           mapLayers = _a.mapLayers,
-          filterIds = _a.filterIds,
-          allFiltersActive = _a.allFiltersActive,
           mapId = _a.mapId;
+      var rowMargin = 4;
+      var rowHeight = widthToRowHeight(layerSelectWidth);
       var layerSelectFilterHeight = 155 + serviceListHeight;
-
-      var _b = __read(React__namespace.useState(0), 2),
-          numberOfLayers = _b[0],
-          setNumberOfLayers = _b[1];
-
-      var _c = __read(React__namespace.useState([]), 2),
-          layersFilteredFromService = _c[0],
-          setLayersFilteredFromService = _c[1];
-
-      React__namespace.useEffect(function () {
-        setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
-          return totalNumberOfLayers + filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString).length;
-        }, 0));
-        setLayersFilteredFromService(serviceIds.reduce(function (layerList, serviceId) {
-          return layerList.concat(filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString).map(function (layer) {
-            return __assign(__assign({}, layer), {
-              serviceId: serviceId
-            });
-          }));
-        }, []));
-      }, [serviceIds, filterIds, services, searchString, allFiltersActive]);
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "layerList"
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
@@ -13202,24 +13403,27 @@
           marginBottom: '4px',
           fontSize: '12px'
         }
-      }, numberOfLayers, " results"), /*#__PURE__*/React__namespace.createElement(reactWindow.FixedSizeList, {
+      }, filteredLayers.length, " results"), /*#__PURE__*/React__namespace.createElement(reactWindow.FixedSizeList, {
         height: layerSelectHeight - layerSelectFilterHeight,
-        itemCount: numberOfLayers,
-        itemSize: 72
+        itemCount: filteredLayers.length,
+        itemSize: rowHeight + rowMargin
       }, function (_a) {
         var index = _a.index,
             style = _a.style;
+        var filter = filteredLayers[index];
+        var service = services[filter.serviceName];
         return /*#__PURE__*/React__namespace.createElement("div", {
           style: style,
-          key: layersFilteredFromService[index].name
-        }, services[layersFilteredFromService[index].serviceId] && /*#__PURE__*/React__namespace.createElement(LayerListRow, {
-          layer: layersFilteredFromService[index],
+          key: filter.name
+        }, service && /*#__PURE__*/React__namespace.createElement(LayerListRow, {
+          layer: filter,
           layerIndex: index,
-          service: services[layersFilteredFromService[index].serviceId],
+          service: service,
           addLayer: addLayer,
           deleteLayer: deleteLayer,
           mapLayers: mapLayers,
-          mapId: mapId
+          mapId: mapId,
+          layerSelectWidth: layerSelectWidth
         }));
       }));
     };
@@ -13244,14 +13448,12 @@
     var LayerListConnect = function LayerListConnect(_a) {
       var mapId = _a.mapId,
           layerSelectHeight = _a.layerSelectHeight,
-          serviceListHeight = _a.serviceListHeight;
+          serviceListHeight = _a.serviceListHeight,
+          layerSelectWidth = _a.layerSelectWidth;
+      var dispatch = reactRedux.useDispatch();
       var services = reactRedux.useSelector(function (store) {
         return getServices(store);
       });
-      var dispatch = reactRedux.useDispatch();
-      var enabledServiceIds = reactRedux.useSelector(function (store) {
-        return getEnabledServiceIds(store);
-      });
       var mapLayers = reactRedux.useSelector(function (store) {
         return getMapLayers(store, mapId);
       });
@@ -13266,7 +13468,6 @@
           layerType: webmap.LayerType.mapLayer
         };
         addMapLayer({
-          mapId: mapId,
           layerId: layer.id,
           layer: layer,
           origin: LayerActionOrigin.layerManager
@@ -13294,25 +13495,17 @@
           origin: LayerActionOrigin.layerManager
         }));
       }, [dispatch, mapId]);
-      var checkedFilterIds = reactRedux.useSelector(function (store) {
-        return getCheckedFilterIds(store);
-      });
-      var allFiltersActive = reactRedux.useSelector(function (store) {
-        return isAllFiltersChecked(store);
-      });
-      var searchString = reactRedux.useSelector(function (store) {
-        return getSearchFilter(store);
+      var filteredLayers = reactRedux.useSelector(function (store) {
+        return getFilteredLayers(store);
       });
       return /*#__PURE__*/React__namespace.createElement(LayerList, {
+        filteredLayers: filteredLayers,
         services: services,
-        serviceIds: enabledServiceIds,
         layerSelectHeight: layerSelectHeight,
         serviceListHeight: serviceListHeight,
+        layerSelectWidth: layerSelectWidth,
         addLayer: addLayer,
         deleteLayer: deleteLayer,
-        filterIds: checkedFilterIds,
-        allFiltersActive: allFiltersActive,
-        searchString: searchString,
         mapLayers: mapLayers,
         mapId: mapId
       });
@@ -13336,13 +13529,13 @@
      * */
     var style = {
       borderRadius: '20px!important',
-      marginRight: '8px',
+      marginRight: '4px',
       whiteSpace: 'nowrap',
-      height: '32px!important',
+      height: '24px!important',
       padding: '5px 12px!important',
       textTransform: 'none!important',
       fontWeight: 'normal',
-      marginBottom: '5px'
+      marginBottom: '4px'
     };
 
     var ServiceChip = function ServiceChip(_a) {
@@ -13530,9 +13723,9 @@
           display: 'block',
           alignItems: 'center',
           "float": 'left',
-          paddingLeft: '40px',
-          paddingRight: '30px',
-          marginBottom: '5px',
+          paddingLeft: '48px',
+          paddingRight: '40px',
+          marginBottom: '8px',
           fontSize: '0.875rem'
         },
         ref: ref
@@ -13706,8 +13899,9 @@
         var _a = services[serviceId],
             serviceUrl = _a.serviceUrl,
             serviceName = _a.serviceName,
-            isUserAddedService = _a.isUserAddedService;
+            scope = _a.scope;
         var serviceHasActiveLayers = checkIfServiceHasActiveLayers(serviceUrl);
+        var userAddedService = isUserAddedService(scope);
         return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
           key: serviceUrl
         }, /*#__PURE__*/React__namespace.createElement(material.ListItemText, {
@@ -13730,7 +13924,7 @@
         }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
           item: true,
           xs: 6
-        }, isUserAddedService ? /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        }, userAddedService ? /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
           title: "Edit Service"
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
           "aria-label": "edit service",
@@ -13761,7 +13955,7 @@
         }, /*#__PURE__*/React__namespace.createElement(theme.Visibility, null))))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
           item: true,
           xs: 6
-        }, isUserAddedService && /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        }, userAddedService && /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
           title: serviceHasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service',
           "data-testid": "removeServiceTooltip"
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
@@ -13893,20 +14087,25 @@
           _d = _a.order,
           order = _d === void 0 ? 0 : _d,
           _e = _a.source,
-          source = _e === void 0 ? 'module' : _e;
+          source = _e === void 0 ? 'module' : _e,
+          _f = _a.startSize,
+          startSize = _f === void 0 ? {
+        width: 750,
+        height: 500
+      } : _f;
       var initialServiceListHeight = 37;
 
-      var _f = __read(React__namespace.useState(500), 2),
-          height = _f[0],
-          setHeight = _f[1];
+      var _g = __read(React__namespace.useState(startSize.height), 2),
+          height = _g[0],
+          setHeight = _g[1];
 
-      var _g = __read(React__namespace.useState(750), 2),
-          width = _g[0],
-          setWidth = _g[1];
+      var _h = __read(React__namespace.useState(startSize.width), 2),
+          width = _h[0],
+          setWidth = _h[1];
 
-      var _h = __read(React__namespace.useState(initialServiceListHeight), 2),
-          serviceListHeight = _h[0],
-          setServiceListHeight = _h[1];
+      var _j = __read(React__namespace.useState(initialServiceListHeight), 2),
+          serviceListHeight = _j[0],
+          setServiceListHeight = _j[1];
 
       var onChangeSize = function onChangeSize(_a) {
         var height = _a.height,
@@ -13927,7 +14126,7 @@
           width: width,
           height: height
         },
-        minWidth: 390,
+        minWidth: 320,
         minHeight: 126,
         startPosition: {
           top: 150,
@@ -13944,13 +14143,13 @@
         source: source
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
-          padding: '6px'
+          padding: '4px 16px 0 16px'
         }
       }, /*#__PURE__*/React__namespace.createElement(SearchFieldConnect, null)), /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
           "float": 'left',
           position: 'absolute',
-          margin: '12px 0 0 8px',
+          margin: '8px 8px 0 16px',
           zIndex: 2
         }
       }, /*#__PURE__*/React__namespace.createElement(KeywordFilterButtonConnect, {
@@ -13958,7 +14157,7 @@
       })), /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
           position: 'absolute',
-          margin: '12px 0 0 calc(100% - 36px)',
+          margin: '8px 0 0 calc(100% - 40px)',
           zIndex: 2
         }
       }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsButton, {
@@ -13967,12 +14166,13 @@
         setHeight: handleHeightChange
       })), /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
-          padding: '0 8px'
+          padding: '0 16px'
         }
       }, /*#__PURE__*/React__namespace.createElement(LayerListConnect, {
         mapId: mapId,
         layerSelectHeight: height,
-        serviceListHeight: serviceListHeight
+        serviceListHeight: serviceListHeight,
+        layerSelectWidth: width
       })));
     };
 
@@ -14396,7 +14596,7 @@
     var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_a) {
       var bounds = _a.bounds;
 
-      var _b = useSetupDialog('keywordFilter'),
+      var _b = useSetupDialog(DialogTypes.KeywordFilter),
           dialogOrder = _b.dialogOrder,
           onCloseDialog = _b.onCloseDialog,
           setDialogOrder = _b.setDialogOrder,
@@ -14483,10 +14683,10 @@
           _b = _a.showTitle,
           showTitle = _b === void 0 ? false : _b;
       var mapId = reactRedux.useSelector(function (store) {
-        return getDialogMapId(store, 'layerSelect');
+        return getDialogMapId(store, DialogTypes.LayerSelect);
       });
 
-      var _c = useSetupDialog('layerSelect'),
+      var _c = useSetupDialog(DialogTypes.LayerSelect),
           dialogOrder = _c.dialogOrder,
           isDialogOpen = _c.isDialogOpen,
           onCloseDialog = _c.onCloseDialog,
@@ -14534,11 +14734,6 @@
       var serviceSetLayers = React__namespace.useCallback(function (payload) {
         dispatch(serviceActions.serviceSetLayers(payload));
       }, [dispatch]);
-
-      var checkIfUserAddedService = function checkIfUserAddedService(service) {
-        return !!service.isUserAddedService;
-      };
-
       React__namespace.useEffect(function () {
         if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
           mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
@@ -14550,7 +14745,7 @@
                   name: service.name,
                   serviceUrl: service.url,
                   layers: layers,
-                  isUserAddedService: checkIfUserAddedService(service),
+                  scope: service.scope ? service.scope : 'system',
                   // first try to load the user abstract, otherwise the service abstract
                   "abstract": service["abstract"] || wmService["abstract"]
                 });
@@ -14587,7 +14782,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var dialogType = 'layerManager';
+    var dialogType = DialogTypes.LayerManager;
     /**
      * Layer Managerconnected to the store displaying the layers forthe active map Id
      * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
@@ -14748,7 +14943,7 @@
       }, [mapId]);
 
       var onZoomIn = function onZoomIn() {
-        return adagucRef.current.zoomIn();
+        return adagucRef.current.zoomIn(undefined);
       };
 
       var onZoomOut = function onZoomOut() {
@@ -14835,14 +15030,14 @@
           source = _b === void 0 ? 'app' : _b;
       var dispatch = reactRedux.useDispatch();
       var currentActiveMapId = reactRedux.useSelector(function (store) {
-        return getDialogMapId(store, 'layerManager');
+        return getDialogMapId(store, DialogTypes.LayerManager);
       });
       var isOpenInStore = reactRedux.useSelector(function (store) {
-        return getisDialogOpen(store, 'layerManager');
+        return getisDialogOpen(store, DialogTypes.LayerManager);
       });
       var openLayerManagerDialog = React__namespace.useCallback(function () {
         dispatch(uiActions.setActiveMapIdForDialog({
-          type: 'layerManager',
+          type: DialogTypes.LayerManager,
           mapId: mapId,
           setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
           source: source
@@ -14973,7 +15168,7 @@
       }
 
       var sortedMarks = __spreadArray([], __read(marks)).sort(function (a, b) {
-        return typeof a.value === 'number' && typeof b.value === 'number' && a.value - b.value;
+        return Number(typeof a.value === 'number' && typeof b.value === 'number' && a.value - b.value);
       });
 
       var adaptedMarks = reverse ? sortedMarks.reverse() : sortedMarks;
@@ -15460,9 +15655,7 @@
 
     var AutoUpdateButton = function AutoUpdateButton(_a) {
       var _b = _a.toggleAutoUpdate,
-          toggleAutoUpdate = _b === void 0 ? function () {
-        return null;
-      } : _b,
+          toggleAutoUpdate = _b === void 0 ? function () {} : _b,
           _c = _a.isAutoUpdating,
           isAutoUpdating = _c === void 0 ? false : _c,
           _d = _a.disabled,
@@ -15749,9 +15942,7 @@
           timeDimension = _a.timeDimension,
           onChangeTimeStep = _a.onChangeTimeStep,
           _d = _a.onToggleTimestepAuto,
-          onToggleTimestepAuto = _d === void 0 ? function () {
-        return null;
-      } : _d,
+          onToggleTimestepAuto = _d === void 0 ? function () {} : _d,
           _e = _a.isOpenByDefault,
           isOpenByDefault = _e === void 0 ? false : _e;
       var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
@@ -15782,6 +15973,129 @@
       });
     };
 
+    /* *
+     * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var marks = [{
+      label: '5 min',
+      value: Scale.Minutes5,
+      text: '5m'
+    }, {
+      label: '1 h',
+      value: Scale.Hour,
+      text: '1h'
+    }, {
+      label: '3 h',
+      value: Scale.Hours3,
+      text: '3h'
+    }, {
+      label: '6 h',
+      value: Scale.Hours6,
+      text: '6h'
+    }, {
+      label: 'day',
+      value: Scale.Day,
+      text: 'd'
+    }, {
+      label: 'week',
+      value: Scale.Week,
+      text: 'w'
+    }, {
+      label: 'month',
+      value: Scale.Month,
+      text: 'm'
+    }, {
+      label: 'year',
+      value: Scale.Year,
+      text: 'y'
+    }, {
+      label: 'data',
+      value: Scale.DataScale,
+      text: 'data'
+    }].sort(function (a, b) {
+      return b.value - a.value;
+    });
+    var TimeScaleButton = function TimeScaleButton(_a) {
+      var layers = _a.layers,
+          _b = _a.timeSliderScale,
+          timeSliderScale = _b === void 0 ? Scale.Hour : _b,
+          centerTime = _a.centerTime,
+          secondsPerPx = _a.secondsPerPx,
+          selectedTime = _a.selectedTime,
+          onChangeTimeSliderScale = _a.onChangeTimeSliderScale;
+
+      var onChangeSliderValue = function onChangeSliderValue(mark) {
+        var newSliderValue = mark.value;
+        var newValue = newSliderValue ? Math.round(newSliderValue) : 0;
+        var newScale = marks.find(function (el) {
+          return el.value === newValue;
+        }).value;
+        var scaleToSecPerPx = newScale === Scale.DataScale ? getScaleToSecondsPerPxForDataScale(layers) : scaleToSecondsPerPx[newScale];
+        var newCenterTime = getNewCenterOfFixedPointZoom(selectedTime, secondsPerPx, scaleToSecPerPx, centerTime);
+        onChangeTimeSliderScale(newScale, newCenterTime, scaleToSecPerPx);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(TimeSliderMenu, {
+        handleMenuItemClick: onChangeSliderValue,
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Clock, null),
+        marks: marks,
+        title: "Time scale",
+        value: timeSliderScale
+      });
+    };
+
+    /* *
+     * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var title = 'Now';
+
+    var NowButton = function NowButton(_a) {
+      var _b = _a.onSetNow,
+          onSetNow = _b === void 0 ? function () {
+        return null;
+      } : _b,
+          _c = _a.disabled,
+          disabled = _c === void 0 ? false : _c;
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: title,
+        "data-testid": "nowButtonTooltip"
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        disabled: disabled,
+        onClick: function onClick() {
+          return onSetNow();
+        },
+        "aria-label": "now"
+      }, /*#__PURE__*/React__namespace.createElement(theme.Now, {
+        "data-testid": "now-svg"
+      }))));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -15810,9 +16124,11 @@
     });
 
     var OptionsMenuButton = function OptionsMenuButton(_a) {
-      var autoUpdateBtn = _a.autoUpdateBtn,
+      var nowBtn = _a.nowBtn,
+          autoUpdateBtn = _a.autoUpdateBtn,
           speedBtn = _a.speedBtn,
-          timeStepBtn = _a.timeStepBtn;
+          timeStepBtn = _a.timeStepBtn,
+          timeScaleBtn = _a.timeScaleBtn;
 
       var _b = __read(React__namespace.useState(null), 2),
           anchorEl = _b[0],
@@ -15834,10 +16150,9 @@
       }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
         onClick: onClickButton,
         "data-testid": "optionsMenuButton",
-        active: open
-      }, /*#__PURE__*/React__namespace.createElement(theme.Options, {
-        "data-testid": "optionsIcon"
-      })))), /*#__PURE__*/React__namespace.createElement(OptionsPopOver, {
+        active: open,
+        "aria-label": "animation options"
+      }, /*#__PURE__*/React__namespace.createElement(theme.Options, null)))), /*#__PURE__*/React__namespace.createElement(OptionsPopOver, {
         id: id,
         open: open,
         "data-testid": "optionsMenuPopOver",
@@ -15857,19 +16172,27 @@
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         xs: "auto"
+      }, nowBtn || /*#__PURE__*/React__namespace.createElement(NowButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        item: true,
+        xs: "auto"
+      }, timeScaleBtn || /*#__PURE__*/React__namespace.createElement(TimeScaleButton, {
+        centerTime: 0,
+        onChangeTimeSliderScale: function onChangeTimeSliderScale() {},
+        secondsPerPx: 0,
+        selectedTime: 0,
+        timeSliderScale: 0
+      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        item: true,
+        xs: "auto"
       }, timeStepBtn || /*#__PURE__*/React__namespace.createElement(TimeStepButton, {
         timeStep: 0,
-        onChangeTimeStep: function onChangeTimeStep() {
-          return null;
-        }
+        onChangeTimeStep: function onChangeTimeStep() {}
       })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         xs: "auto"
       }, speedBtn || /*#__PURE__*/React__namespace.createElement(SpeedButton, {
         animationDelay: defaultAnimationDelayAtStart,
-        setMapAnimationDelay: function setMapAnimationDelay() {
-          return null;
-        }
+        setMapAnimationDelay: function setMapAnimationDelay() {}
       })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         xs: "auto"
@@ -15900,10 +16223,7 @@
         "data-testid": "timeSliderButtons"
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
-        spacing: 2,
-        sx: {
-          padding: '20px 0px 0px 16px'
-        }
+        spacing: 2
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, optionsMenuBtn || /*#__PURE__*/React__namespace.createElement(OptionsMenuButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -16687,19 +17007,7 @@
       React__namespace.useEffect(function () {
         var handleKeyDown = function handleKeyDown(event) {
           if (event.key === 'Home' && mapIsActive) {
-            if (dataStartTime < dataEndTime) {
-              if (dataEndTime < currentTime) {
-                onSetNewDate(moment__default["default"].utc(dataEndTime * 1000).toISOString());
-                onSetCenterTime(dataEndTime);
-              } else if (dataStartTime > currentTime) {
-                onSetNewDate(moment__default["default"].utc(dataStartTime * 1000).toISOString());
-                onSetCenterTime(dataStartTime);
-              } else {
-                var closestToCurrent = roundWithTimeStep(currentTime, timeStep);
-                onSetNewDate(moment__default["default"].utc(closestToCurrent * 1000).toISOString());
-                onSetCenterTime(closestToCurrent);
-              }
-            }
+            handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
           }
         };
 
@@ -16731,7 +17039,7 @@
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "timeSliderLegend",
         sx: {
-          height: '50px'
+          height: TIME_SLIDER_LEGEND_HEIGHT + "px"
         }
       }, /*#__PURE__*/React__namespace.createElement(CanvasComponent, {
         ref: node,
@@ -16771,249 +17079,25 @@
         },
         onMouseUp: function onMouseUp() {
           setReleased(true);
-          setNewSelectionTimeRequested(false);
-        },
-        onCanvasClick: function onCanvasClick(x, y, width) {
-          var isCanvasArea = x >= 0 && x < width;
-
-          if (isCanvasArea) {
-            if (isReleased && !isDragged) {
-              setSelectedTime(x, width);
-            }
-          }
-        },
-        onRenderCanvas: function onRenderCanvas(ctx, width, height) {
-          renderTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime);
-        }
-      }));
-    };
-
-    /* *
-     * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
-     * */
-    var scaleSliderOtherSettings = {
-      LEFT_PADDING: '10%'
-    };
-
-    var thumbComponent = function thumbComponent(props) {
-      var children = props.children,
-          other = __rest(props, ["children"]);
-
-      return /*#__PURE__*/React__namespace.createElement(material.SliderThumb, __assign({}, other, {
-        "data-testid": "scaleSliderSliderThumb",
-        tabIndex: 0
-      }), children, /*#__PURE__*/React__namespace.createElement(theme.SliderThumb, null));
-    };
-
-    var marks = [{
-      text: '5 min scale',
-      paddingLeft: '2px',
-      value: Scale.Minutes5
-    }, {
-      text: '1 h scale',
-      paddingLeft: '25px',
-      value: Scale.Hour
-    }, {
-      text: '3 h scale',
-      paddingLeft: '45px',
-      value: Scale.Hours3
-    }, {
-      text: '6 h scale',
-      paddingLeft: '65px',
-      value: Scale.Hours6
-    }, {
-      text: 'day scale',
-      paddingLeft: '80px',
-      value: Scale.Day
-    }, {
-      text: 'week scale',
-      paddingLeft: '92px',
-      value: Scale.Week
-    }, {
-      text: 'month scale',
-      paddingLeft: '107px',
-      value: Scale.Month
-    }, {
-      text: 'year scale',
-      paddingLeft: '130px',
-      value: Scale.Year
-    }, {
-      text: 'data scale',
-      paddingLeft: '140px',
-      value: Scale.DataScale
-    }];
-
-    var valueLabelFormat = function valueLabelFormat(value) {
-      var valueNew = value.toString();
-      return valueNew;
-    };
-
-    var GeoWebScaleSlider = material.styled(material.Slider)(function (_a) {
-      var theme = _a.theme;
-      return {
-        '&.MuiSlider-root': {
-          height: 4,
-          width: 167,
-          margin: "0 0 18px " + scaleSliderOtherSettings.LEFT_PADDING
-        },
-        '& .MuiSlider-thumb': {
-          backgroundColor: 'rgba(0,0,0,0)',
-          marginTop: 0,
-          width: 12,
-          height: 12,
-          color: theme.palette.geowebColors.timeSlider.timeScalePointer.fill,
-          '& svg polygon': {
-            filter: theme.palette.geowebColors.timeSlider.timeScaleShadowButtonScale.filter
-          },
-          '&:before': {
-            display: 'none'
-          }
-        },
-        '& .MuiSlider-valueLabel': {
-          left: '20px'
-        },
-        '& .MuiSlider-rail': {
-          color: theme.palette.geowebColors.timeSlider.timeScaleHorizontalScale.fill,
-          height: 4,
-          width: 170,
-          borderRadius: 4.5,
-          opacity: theme.palette.geowebColors.timeSlider.timeScaleHorizontalScale.opacity
-        },
-        '& .MuiSlider-mark': {
-          backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicators.fill,
-          height: 6,
-          width: 2,
-          marginTop: -9,
-          '&.MuiSlider-markActive': {
-            backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicatorsActive.fill,
-            height: 6,
-            width: 2,
-            marginTop: -9
-          }
-        },
-        '@media (max-width: 585px)': {
-          '&.MuiSlider-root': {
-            width: 110
-          },
-          '& .MuiSlider-rail': {
-            width: 110
-          }
-        },
-        '@media (max-width: 395px)': {
-          '&.MuiSlider-root': {
-            width: 60
-          },
-          '& .MuiSlider-rail': {
-            width: 60
-          }
-        }
-      };
-    });
-    var RAIL_GUTTER_OFFSET = 0.4;
-
-    var TimeSliderScaleSlider = function TimeSliderScaleSlider(_a) {
-      var layers = _a.layers,
-          _b = _a.timeSliderScale,
-          timeSliderScale = _b === void 0 ? Scale.Hour : _b,
-          centerTime = _a.centerTime,
-          secondsPerPx = _a.secondsPerPx,
-          selectedTime = _a.selectedTime,
-          onChangeTimeSliderScale = _a.onChangeTimeSliderScale;
-      var min = 0;
-      var max = marks.length - 1;
-      var value = marks.findIndex(function (mark) {
-        return mark.value === timeSliderScale;
-      });
-
-      var onChangeSliderValue = function onChangeSliderValue(newSliderValue) {
-        var newValue = newSliderValue ? Math.round(newSliderValue) : 0;
-        var newScale = marks.find(function (el) {
-          return el.value === newValue;
-        }).value;
-        var scaleToSecPerPx = newScale === Scale.DataScale ? getScaleToSecondsPerPxForDataScale(layers) : scaleToSecondsPerPx[newScale];
-        var newCenterTime = getNewCenterOfFixedPointZoom(selectedTime, secondsPerPx, scaleToSecPerPx, centerTime);
-        onChangeTimeSliderScale(newScale, newCenterTime, scaleToSecPerPx);
-      };
-
-      var onChange = function onChange(event, value) {
-        if (event.type !== 'keydown') {
-          onChangeSliderValue(value);
-        }
-      };
-
-      var onKeyDown = function onKeyDown(event) {
-        // disable default Slider behavior
-        event.preventDefault();
-        event.stopPropagation(); // custom logic
-
-        var newValue = getValueFromKeyboardEvent(event, value, min, max, true);
-
-        if (newValue !== null) {
-          onChangeSliderValue(newValue);
-        }
-      };
-
-      var _c = marks.find(function (mark) {
-        return mark.value === value;
-      }),
-          paddingLeft = _c.paddingLeft,
-          text = _c.text;
-
-      var scaleTextPadding = {
-        paddingLeft: paddingLeft
-      };
-      return /*#__PURE__*/React__namespace.createElement(material.Box, {
-        "data-testid": "scaleSlider",
-        sx: {
-          backgroundColor: 'geowebColors.background.surface',
-          width: '229px',
-          height: '40px',
-          paddingTop: '4px',
-          paddingBottom: '7px',
-          boxSizing: 'content-box'
-        }
-      }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        "data-testid": "scaleSliderText",
-        sx: {
-          width: '67px',
-          height: '15px',
-          padding: '0px 10px 0 8px',
-          color: 'geowebColors.typographyAndIcons.text',
-          font: '12px Roboto'
+          setNewSelectionTimeRequested(false);
         },
-        style: scaleTextPadding
-      }, text)), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(GeoWebScaleSlider, {
-        "data-testid": "scaleSliderSlider",
-        defaultValue: Scale.Hour,
-        value: value,
-        min: min - RAIL_GUTTER_OFFSET,
-        step: 1,
-        max: max + RAIL_GUTTER_OFFSET,
-        getAriaValueText: valueLabelFormat,
-        onChange: onChange,
-        onKeyDown: onKeyDown,
-        "aria-labelledby": "scale-slider",
-        components: {
-          Thumb: thumbComponent
+        onCanvasClick: function onCanvasClick(x, y, width) {
+          var isCanvasArea = x >= 0 && x < width;
+
+          if (isCanvasArea) {
+            if (isReleased && !isDragged) {
+              setSelectedTime(x, width);
+            }
+          }
         },
-        marks: marks,
-        track: false
-      })));
+        onRenderCanvas: function onRenderCanvas(ctx, width, height) {
+          renderTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime);
+        }
+      }));
     };
 
+    var TIME_SLIDER_LEGEND_HEIGHT = 50;
+
     /* eslint-disable no-param-reassign */
 
     var drawRoundedRectangle = function drawRoundedRectangle(ctx, x, y, width, height, cornerRadius, theme) {
@@ -17277,11 +17361,11 @@
 
       var curTime = selectedTime !== undefined ? selectedTime.toISOString() : moment__default["default"].utc().toISOString();
 
-      var _e = __read(React__namespace.useState(animationStartTime && moment__default["default"].utc(animationStartTime).unix()), 2),
+      var _e = __read(React__namespace.useState(animationStartTime ? moment__default["default"].utc(animationStartTime).unix() : undefined), 2),
           localAnimationStartTime = _e[0],
           setLocalAnimationStartTime = _e[1];
 
-      var _f = __read(React__namespace.useState(animationEndTime && moment__default["default"].utc(animationEndTime).unix()), 2),
+      var _f = __read(React__namespace.useState(animationEndTime ? moment__default["default"].utc(animationEndTime).unix() : undefined), 2),
           localAnimationEndTime = _f[0],
           setLocalAnimationEndTime = _f[1];
 
@@ -17416,8 +17500,8 @@
       };
 
       React__namespace.useEffect(function () {
-        setLocalAnimationStartTime(animationStartTime && moment__default["default"].utc(animationStartTime).unix());
-        setLocalAnimationEndTime(animationEndTime && moment__default["default"].utc(animationEndTime).unix());
+        setLocalAnimationStartTime(animationStartTime ? moment__default["default"].utc(animationStartTime).unix() : undefined);
+        setLocalAnimationEndTime(animationEndTime ? moment__default["default"].utc(animationEndTime).unix() : undefined);
       }, [animationStartTime, animationEndTime]);
       var handleKeyDown = React__namespace.useCallback(function (event) {
         if (event.ctrlKey && dataStartTime && dataEndTime && mapIsActive) {
@@ -17565,7 +17649,6 @@
     var TimeSlider = function TimeSlider(_a) {
       var buttons = _a.buttons,
           rail = _a.rail,
-          scaleSlider = _a.scaleSlider,
           legend = _a.legend,
           _b = _a.mapIsActive,
           mapIsActive = _b === void 0 ? true : _b,
@@ -17576,15 +17659,15 @@
       useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
       return isVisible ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
-        "data-testid": "timeSlider",
         sx: {
           display: 'grid',
           gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
           gridTemplateRows: '50px'
-        }
+        },
+        "data-testid": "timeSlider"
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
-      }, " ", buttons || /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, null), " "), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, rail || /*#__PURE__*/React__namespace.createElement(TimeSliderRail, __assign({}, defaultProps, {
         selectedTime: defaultProps.selectedTime,
@@ -17593,14 +17676,11 @@
         item: true,
         sx: {
           height: '50px'
-        }
-      }, scaleSlider || /*#__PURE__*/React__namespace.createElement(TimeSliderScaleSlider, __assign({}, defaultProps, {
-        selectedTime: defaultProps.selectedTime.unix(),
-        timeSliderScale: Scale.Hour,
-        onChangeTimeSliderScale: function onChangeTimeSliderScale() {
-          return null;
-        }
-      }))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        },
+        container: true,
+        alignItems: "center",
+        justifyContent: "center"
+      }, buttons || /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, legend || /*#__PURE__*/React__namespace.createElement(TimeSliderLegend, __assign({}, defaultProps, {
         selectedTime: defaultProps.selectedTime.unix(),
@@ -17750,6 +17830,136 @@
       });
     };
 
+    /* *
+     * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * */
+    var TimeScaleButtonConnect = function TimeScaleButtonConnect(_a) {
+      var mapId = _a.mapId;
+      var layers = reactRedux.useSelector(function (store) {
+        return getMapLayers(store, mapId);
+      });
+      var timeSliderScale = reactRedux.useSelector(function (store) {
+        return getMapTimeSliderScale(store, mapId);
+      });
+      var centerTime = reactRedux.useSelector(function (store) {
+        return getMapTimeSliderCenterTime(store, mapId);
+      });
+      var secondsPerPx = reactRedux.useSelector(function (store) {
+        return getMapTimeSliderSecondsPerPx(store, mapId);
+      });
+      var dimensions = reactRedux.useSelector(function (store) {
+        return getMapDimensions(store, mapId);
+      });
+      var dispatch = reactRedux.useDispatch();
+
+      var onSetTimeSliderScale = function onSetTimeSliderScale(scale, newCenterTime, scaleToSecPerPx) {
+        if (scale === Scale.DataScale) {
+          dispatch(mapActions$1.setTimeSliderDataScaleToSecondsPerPx({
+            mapId: mapId,
+            timeSliderDataScaleToSecondsPerPx: scaleToSecPerPx
+          }));
+        }
+
+        dispatch(mapActions$1.setTimeSliderScale({
+          mapId: mapId,
+          timeSliderScale: scale
+        }));
+        dispatch(mapActions$1.setTimeSliderCenterTime({
+          mapId: mapId,
+          timeSliderCenterTime: newCenterTime
+        }));
+      };
+
+      var selectedTime = getTimeBounds(dimensions).selectedTime;
+      return /*#__PURE__*/React__namespace.createElement(TimeScaleButton, {
+        layers: layers,
+        timeSliderScale: timeSliderScale,
+        onChangeTimeSliderScale: onSetTimeSliderScale,
+        secondsPerPx: secondsPerPx,
+        centerTime: centerTime,
+        selectedTime: selectedTime
+      });
+    };
+
+    /* *
+     * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var NowButtonConnect = function NowButtonConnect(_a) {
+      var sourceId = _a.sourceId,
+          mapId = _a.mapId,
+          isDisabled = _a.isDisabled;
+      var dispatch = reactRedux.useDispatch();
+      var currentTime = moment__default["default"].utc().unix();
+      var timeStep = reactRedux.useSelector(function (store) {
+        return getMapTimeStep(store, mapId);
+      });
+
+      var _b = __read(getDataLimitsFromLayers(reactRedux.useSelector(function (store) {
+        return getMapLayers(store, mapId);
+      })), 2),
+          dataStartTime = _b[0],
+          dataEndTime = _b[1];
+
+      var isAnimating$1 = reactRedux.useSelector(function (store) {
+        return isAnimating(store, mapId);
+      });
+
+      var onSetNewDate = function onSetNewDate(newDate) {
+        if (isAnimating$1) {
+          dispatch(mapActions$1.mapStopAnimation({
+            mapId: mapId
+          }));
+        }
+
+        dispatch(genericActions.setTime({
+          sourceId: sourceId,
+          origin: 'NowButtonConnect, 140',
+          value: handleMomentISOString(newDate)
+        }));
+      };
+
+      var onSetCenterTime = function onSetCenterTime(newTime) {
+        dispatch(mapActions$1.setTimeSliderCenterTime({
+          mapId: mapId,
+          timeSliderCenterTime: newTime
+        }));
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(NowButton, {
+        disabled: isDisabled,
+        onSetNow: function onSetNow() {
+          return handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
+        }
+      });
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -17776,8 +17986,13 @@
      */
 
     var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_a) {
-      var mapId = _a.mapId;
+      var sourceId = _a.sourceId,
+          mapId = _a.mapId;
       return /*#__PURE__*/React__namespace.createElement(OptionsMenuButton, {
+        nowBtn: /*#__PURE__*/React__namespace.createElement(NowButtonConnect, {
+          mapId: mapId,
+          sourceId: sourceId
+        }),
         autoUpdateBtn: /*#__PURE__*/React__namespace.createElement(AutoUpdateButtonConnect, {
           mapId: mapId
         }),
@@ -17786,6 +18001,9 @@
         }),
         timeStepBtn: /*#__PURE__*/React__namespace.createElement(TimeStepButtonComponent, {
           mapId: mapId
+        }),
+        timeScaleBtn: /*#__PURE__*/React__namespace.createElement(TimeScaleButtonConnect, {
+          mapId: mapId
         })
       });
     };
@@ -17816,10 +18034,12 @@
      */
 
     var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_a) {
-      var mapId = _a.mapId;
+      var sourceId = _a.sourceId,
+          mapId = _a.mapId;
       return /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, {
         optionsMenuBtn: /*#__PURE__*/React__namespace.createElement(OptionsMenuButtonConnect, {
-          mapId: mapId
+          mapId: mapId,
+          sourceId: sourceId
         }),
         playBtn: /*#__PURE__*/React__namespace.createElement(PlayButtonConnect, {
           mapId: mapId
@@ -18095,87 +18315,6 @@
 
     var TimeSliderRailConnect = connectRedux$1(TimeSliderRailConnectComponent);
 
-    /* *
-     * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
-     * */
-    var connectReduxTimeSliderScaleSlider = reactRedux.connect(function (store, props) {
-      return {
-        layers: getMapLayers(store, props.mapId),
-        timeSliderScale: getMapTimeSliderScale(store, props.mapId),
-        centerTime: getMapTimeSliderCenterTime(store, props.mapId),
-        secondsPerPx: getMapTimeSliderSecondsPerPx(store, props.mapId),
-        dimensions: getMapDimensions(store, props.mapId)
-      };
-    }, {
-      mapSetTimeSliderScale: mapActions$1.setTimeSliderScale,
-      mapSetTimeSliderDataScaleToSecondsPerPx: mapActions$1.setTimeSliderDataScaleToSecondsPerPx,
-      mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime
-    });
-
-    var TimeSliderScaleSliderComponent = function TimeSliderScaleSliderComponent(_a) {
-      var timeSliderScale = _a.timeSliderScale,
-          mapId = _a.mapId,
-          layers = _a.layers,
-          centerTime = _a.centerTime,
-          secondsPerPx = _a.secondsPerPx,
-          dimensions = _a.dimensions,
-          mapSetTimeSliderScale = _a.mapSetTimeSliderScale,
-          mapSetTimeSliderDataScaleToSecondsPerPx = _a.mapSetTimeSliderDataScaleToSecondsPerPx,
-          mapSetTimeSliderCenterTime = _a.mapSetTimeSliderCenterTime;
-
-      var onSetTimeSliderScale = function onSetTimeSliderScale(scale, newCenterTime, scaleToSecPerPx) {
-        if (scale === Scale.DataScale) {
-          mapSetTimeSliderDataScaleToSecondsPerPx({
-            mapId: mapId,
-            timeSliderDataScaleToSecondsPerPx: scaleToSecPerPx
-          });
-        }
-
-        mapSetTimeSliderScale({
-          mapId: mapId,
-          timeSliderScale: scale
-        });
-        mapSetTimeSliderCenterTime({
-          mapId: mapId,
-          timeSliderCenterTime: newCenterTime
-        });
-      };
-
-      var selectedTime = getTimeBounds(dimensions).selectedTime;
-      return /*#__PURE__*/React__namespace.createElement(TimeSliderScaleSlider, {
-        layers: layers,
-        timeSliderScale: timeSliderScale,
-        onChangeTimeSliderScale: onSetTimeSliderScale,
-        secondsPerPx: secondsPerPx,
-        centerTime: centerTime,
-        selectedTime: selectedTime
-      });
-    };
-    /**
-     * TimeSliderScaleSlider component connected to the store displaying a scale slider of the time slider
-     *
-     * Expects the following props:
-     * @param {string} mapId mapId: string - Id of the map
-     * @example
-     * ``` <TimeSliderScaleSliderConnect mapId={mapId} />```
-     */
-
-
-    var TimeSliderScaleSliderConnect = connectReduxTimeSliderScaleSlider(TimeSliderScaleSliderComponent);
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -18243,15 +18382,13 @@
 
       return /*#__PURE__*/React__namespace.createElement(TimeSlider, {
         buttons: /*#__PURE__*/React__namespace.createElement(TimeSliderButtonsConnect, {
-          mapId: mapId
+          mapId: mapId,
+          sourceId: sourceId
         }),
         rail: /*#__PURE__*/React__namespace.createElement(TimeSliderRailConnect, {
           mapId: mapId,
           sourceId: sourceId
         }),
-        scaleSlider: /*#__PURE__*/React__namespace.createElement(TimeSliderScaleSliderConnect, {
-          mapId: mapId
-        }),
         legend: /*#__PURE__*/React__namespace.createElement(TimeSliderLegendConnect$1, {
           mapId: mapId,
           sourceId: sourceId
@@ -18744,7 +18881,7 @@
             id: service.id,
             serviceUrl: wmLayer.service,
             layers: layers,
-            isUserAddedService: false
+            scope: 'system'
           },
           layerStyle: {
             origin: origin,
@@ -19452,7 +19589,7 @@
         }
 
         if (!featureCoords) {
-          return;
+          return undefined;
         }
 
         var vertexSelected = mouseDown === true && this.mouseIsOverVertexNr !== VERTEX.NONE;
@@ -19476,6 +19613,8 @@
 
           return false;
         }
+
+        return undefined;
       };
 
       AdagucMapDraw.prototype.hoverVertex = function (feature, mouseX, mouseY) {
@@ -19590,7 +19729,7 @@
             isInEditMode = _a.isInEditMode,
             featureNrToEdit = _a.featureNrToEdit,
             onHoverFeature = _a.onHoverFeature;
-        if (event && event.rightButton === true) return;
+        if (event && event.rightButton === true) return undefined;
         /* adagucMouseMove is an event callback function which is triggered when the mouse moves over the map
           This event is only triggered if the map is in hover state.
           E.g. when the map is dragging/panning, this event is not triggerd
@@ -19631,11 +19770,11 @@
         }
 
         if (isInEditMode === false) {
-          return;
+          return undefined;
         }
 
         var feature = this.geojson.features[featureNrToEdit];
-        if (!feature) return;
+        if (!feature) return undefined;
         var webmapjs = this.props.webmapjs;
         this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
           x: mouseX,
@@ -19701,6 +19840,8 @@
           /* False means that this component will take over entire controll.
             True means that it is still possible to pan and drag the map while editing */
         }
+
+        return undefined;
       };
       /* Returns true if double click is detected */
 
@@ -19994,6 +20135,8 @@
             return false;
           }
         }
+
+        return undefined;
       };
 
       AdagucMapDraw.prototype.addPointToLineStringFeature = function (event) {
@@ -20762,7 +20905,7 @@
           /* After the image is loaded the canvas will be redrawn and drawIcon will be triggered again
           via the beforecanvasdisplay listener. */
 
-          return;
+          return undefined;
         }
 
         if (image.isLoaded()) {
@@ -20775,6 +20918,8 @@
             ctx.strokeRect(parseInt(_coord.x, 10) - imageWidth / 2, parseInt(_coord.y, 10) - imageHeight / 2, imageWidth, imageHeight);
           }
         }
+
+        return undefined;
       };
 
       AdagucMapDraw.prototype.drawMarker = function (ctx, _coord, selected, middle, isInEditMode, featureProperties) {
@@ -21979,12 +22124,8 @@
         shouldAutoFetch: true,
         displayMapPin: false,
         disableMapPin: false,
-        onMount: function onMount() {
-          return null;
-        },
-        onUnMount: function onUnMount() {
-          return null;
-        },
+        onMount: function onMount() {},
+        onUnMount: function onUnMount() {},
         onMapChangeDimension: function onMapChangeDimension() {
           /* nothing */
         },
@@ -22096,7 +22237,7 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(ZoomControls, {
         onZoomIn: function onZoomIn() {
-          return adagucRef.current.zoomIn();
+          return adagucRef.current.zoomIn(undefined);
         },
         onZoomOut: function onZoomOut() {
           return adagucRef.current.zoomOut();
@@ -22165,10 +22306,10 @@
         return (touches === null || touches === void 0 ? void 0 : touches.length) === 2;
       };
 
-      var isValidMap = React__namespace.useCallback(function (map, event) {
+      var isCanvasElement = React__namespace.useCallback(function (event) {
         var target = event.target;
-        return map && target.tagName !== 'INPUT' && mapIsActive;
-      }, [mapIsActive]);
+        return target.tagName === 'CANVAS';
+      }, []);
 
       var distance = function distance(x1, y1, x2, y2) {
         var dx = x1 - x2;
@@ -22176,9 +22317,32 @@
         return Math.sqrt(dx * dx + dy * dy);
       };
 
+      var isMatchingWebMapNumbers = function isMatchingWebMapNumbers(firstStr, secondStr) {
+        // Returns true if the same web map (id) number were encountered in both given strings, false otherwise.
+        var webMapNumberBaseFormat = 'WebMapJSMapNo_';
+
+        if (!firstStr.includes(webMapNumberBaseFormat) || !secondStr.includes(webMapNumberBaseFormat)) {
+          return false;
+        }
+
+        var numberMatcher = /\d+/;
+        var firstNumber = firstStr.match(numberMatcher)[0];
+        var secondNumber = secondStr.match(numberMatcher)[0];
+        return Boolean(firstNumber && secondNumber && firstNumber === secondNumber);
+      };
+
+      var isTouchInsideTargetElement = function isTouchInsideTargetElement(elem, touchX, touchY) {
+        var _a = elem.getBoundingClientRect(),
+            left = _a.left,
+            top = _a.top,
+            width = _a.width,
+            height = _a.height;
+
+        var leftMarginWidth = 0.02 * document.body.getBoundingClientRect().width;
+        return touchY > window.scrollY + top && touchY < window.scrollY + top + height - TIME_SLIDER_LEGEND_HEIGHT && touchX > window.scrollX + left + leftMarginWidth && touchX < window.scrollX + left + width;
+      };
+
       var handleStart = React__namespace.useCallback(function (event) {
-        var map = getWMJSMapById(mapId);
-        if (!isValidMap(map, event)) return;
         var targetTouches = event.targetTouches;
         var firstTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(0);
         setFirstTouchX(firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientX);
@@ -22189,10 +22353,31 @@
           setSecondTouchX(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientX);
           setSecondTouchY(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientY);
         }
-      }, [isValidMap, mapId]);
+      }, []);
       var handleMove = React__namespace.useCallback(function (event) {
         var map = getWMJSMapById(mapId);
-        if (!isValidMap(map, event)) return;
+        var targetElem = event.target;
+
+        if (!isCanvasElement(event)) {
+          // Elements other than canvas elements are not allowed to be zoomed/panned
+          return;
+        }
+
+        var targetMapId = map.getId();
+        var targetElemId = targetElem.parentElement.id;
+
+        if (!isMatchingWebMapNumbers(targetMapId, targetElemId)) {
+          // Current map (given by map id) was not coupled to the canvas element user touched.
+          // This web map id number comparison is of importance when dealing with multi-window presentations.
+          return;
+        }
+
+        if (!isTouchInsideTargetElement(targetElem, firstTouchX, firstTouchY)) {
+          // A user touch outside the current canvas element will be rejected
+          return;
+        } // Start zooming/panning by touch
+
+
         event.preventDefault();
         var targetTouches = event.targetTouches;
         var firstTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(0);
@@ -22234,7 +22419,7 @@
             setPrevDist(dist);
           }
         }
-      }, [firstTouchX, firstTouchY, isValidMap, mapId, prevDist, secondTouchX, secondTouchY]);
+      }, [mapId, isCanvasElement, firstTouchX, firstTouchY, secondTouchX, secondTouchY, prevDist]);
       var handleEnd = React__namespace.useCallback(function () {}, []);
       React__namespace.useEffect(function () {
         document.addEventListener('touchstart', handleStart, {
@@ -22483,7 +22668,7 @@
         },
         srs: srs,
         bbox: bbox,
-        mapPinLocation: displayMapPin && mapPinLocation,
+        mapPinLocation: displayMapPin ? mapPinLocation : undefined,
         dimensions: mapDimensions,
         activeLayerId: activeLayerId,
         animationDelay: animationDelay,
@@ -22704,7 +22889,7 @@
 
         if (shouldShowLayerManager !== undefined) {
           dispatch(uiActions.setActiveMapIdForDialog({
-            type: 'layerManager',
+            type: DialogTypes.LayerManager,
             mapId: mapId,
             setOpen: shouldShowLayerManager,
             source: 'app'
@@ -23497,7 +23682,7 @@
         dispatch(actions.syncGroupRemoveTarget(payload));
       }, [dispatch]);
 
-      var _a = useSetupDialog('syncGroups'),
+      var _a = useSetupDialog(DialogTypes.SyncGroups),
           dialogOrder = _a.dialogOrder,
           isDialogOpen = _a.isDialogOpen,
           onCloseDialog = _a.onCloseDialog,