@opengeoweb/core 4.2.0 → 4.3.0

package/index.esm.js

@@ -6,17 +6,19 @@ import React__default, { Component, useRef, useState, useEffect, useCallback } f
 import _, { isEqual, debounce, groupBy, throttle, range } from 'lodash';
 import { takeLatest, put, select, call, all, takeEvery, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
-import { Tooltip, Paper, Box, Typography, Grid, InputLabel, IconButton, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, FormControl, LinearProgress, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, styled, Slider, Menu, Popover, useTheme, SliderThumb, Snackbar } from '@mui/material';
+import { Tooltip, Paper, Box, Typography, Grid, InputLabel, IconButton, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, FormControl, LinearProgress, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, styled, Slider, Menu, Popover, useTheme, Snackbar } from '@mui/material';
 import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, calculateDialogSizeAndPosition, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
-import { Pause, Play, Cached, Add, Copy, Flag, DragHandle as DragHandle$1, Filter, Search, Clear, Close, Info, DimensionsTime, DimensionsRefTime, DimensionsElevation, DimensionsOther, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Options, SliderThumb as SliderThumb$1, List as List$1, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { Pause, Play, Cached, Add, Copy, Flag, DragHandle as DragHandle$1, Filter, Search, Clear, Close, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Options, List as List$1, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
-import { Sortable, ReactSortable } from 'react-sortablejs';
+import { ReactSortable } from 'react-sortablejs';
+import Sortable from 'sortablejs';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
 import { useFormContext } from 'react-hook-form';
 import { FixedSizeList } from 'react-window';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 import Grid$1 from '@mui/material/Grid';
+import Tooltip$1 from '@mui/material/Tooltip';
 import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
 import proj4 from 'proj4';
@@ -592,6 +594,7 @@ var types$2 = /*#__PURE__*/Object.freeze({
   get LayerActionOrigin () { return LayerActionOrigin; }
 });
 
+var millisecondsInSecond = 1000;
 var defaultAnimationDelayAtStart = 250;
 var defaultDelay = 1000; // [ms]
 
@@ -722,48 +725,6 @@ var getDataLimitsFromLayers = function getDataLimitsFromLayers(layers) {
    */
   [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) {
-  var supportFourDirectionNavigation = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 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:
@@ -920,6 +881,25 @@ var AUTO_MOVE_AREA_PADDING = 1;
 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.utc(dataEndTime * millisecondsInSecond).toISOString());
+      onSetCenterTime(dataEndTime);
+    } else if (dataStartTime > currentTime) {
+      onSetNewDate(moment.utc(dataStartTime * millisecondsInSecond).toISOString());
+      onSetCenterTime(dataStartTime);
+    } else {
+      var closestToCurrent = roundWithTimeStep(currentTime, timeStep);
+      onSetNewDate(moment.utc(closestToCurrent * millisecondsInSecond).toISOString());
+      onSetCenterTime(closestToCurrent);
+    }
+  }
+};
 
 var createMap = function createMap(_ref) {
   var id = _ref.id,
@@ -1833,6 +1813,9 @@ var selectorMemoizationOptions = {
     resultEqualityCheck: isEqual
   }
 };
+var isUserAddedService = function isUserAddedService(scope) {
+  return scope === 'user';
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1954,25 +1937,6 @@ var getLayerFromService = createSelector(function (store, serviceUrl) {
 var getLayerStyles$1 = 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
- */
-
-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);
 
 var moveToTop = function moveToTop(list, element) {
   var filteredList = list.filter(function (item) {
@@ -3043,7 +3007,7 @@ var getUiStore = function getUiStore(store) {
  *
  * 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
  */
 
@@ -3058,7 +3022,7 @@ var getDialogDetailsByType = function getDialogDetailsByType(store, dialogType)
  * 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
  */
 
@@ -3073,7 +3037,7 @@ var getisDialogOpen = createSelector(getDialogDetailsByType, function (details)
  *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
  */
 
@@ -3088,7 +3052,7 @@ var getDialogMapId = createSelector(getDialogDetailsByType, function (details) {
  *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
  */
 
@@ -3114,7 +3078,7 @@ var getDialogOrder = createSelector(function (store, dialogType) {
  *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}
  */
 
@@ -4361,6 +4325,25 @@ var selectors = /*#__PURE__*/Object.freeze({
   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; }
+});
+
 var initialState$1 = {
   filters: {
     searchFilter: '',
@@ -4384,7 +4367,7 @@ var initialState$1 = {
 };
 var slice$1 = createSlice({
   initialState: initialState$1,
-  name: 'layerSelect',
+  name: DialogTypes.LayerSelect,
   reducers: {
     setSearchFilter: function setSearchFilter(draft, action) {
       var filterText = action.payload.filterText;
@@ -4401,7 +4384,7 @@ var slice$1 = createSlice({
           serviceUrl = _action$payload.serviceUrl,
           _abstract = _action$payload["abstract"],
           keywords = _action$payload.keywords,
-          isUserAddedService = _action$payload.isUserAddedService,
+          scope = _action$payload.scope,
           groups = _action$payload.groups;
 
       if (!draft.filters.activeServices.byId[serviceId]) {
@@ -4441,7 +4424,7 @@ var slice$1 = createSlice({
         serviceId: serviceId,
         enabled: draft.allServicesEnabled,
         filterIds: filterIds,
-        isUserAddedService: isUserAddedService,
+        scope: scope,
         serviceName: serviceName,
         serviceUrl: serviceUrl,
         "abstract": _abstract
@@ -4536,6 +4519,61 @@ var slice$1 = createSlice({
 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-".concat(group);
+      }).concat(layer.keywords.map(function (keyword) {
+        return "keywords-".concat(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.
@@ -4694,6 +4732,22 @@ var isAllFiltersChecked = createSelector(layerSelectStore, function (store) {
 var getActiveLayerInfo = 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 = 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 Object.assign(Object.assign({}, layer), {
+        serviceName: serviceId
+      });
+    }));
+  }, []);
+}, selectorMemoizationOptions);
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4769,17 +4823,6 @@ var getFirstSnackbarMessage = createSelector(getCurrentSnackbarMessages, functio
   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.
@@ -5978,9 +6021,7 @@ var PlayButton = function PlayButton(_ref) {
   var isAnimating = _ref.isAnimating,
       isDisabled = _ref.isDisabled,
       _ref$onTogglePlayButt = _ref.onTogglePlayButton,
-      onTogglePlayButton = _ref$onTogglePlayButt === void 0 ? function () {
-    return null;
-  } : _ref$onTogglePlayButt;
+      onTogglePlayButton = _ref$onTogglePlayButt === void 0 ? function () {} : _ref$onTogglePlayButt;
 
   var onTogglePlay = function onTogglePlay() {
     onTogglePlayButton();
@@ -7099,6 +7140,84 @@ CanvasComponent.defaultProps = {
   }
 };
 
+/* *
+ * 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(_ref) {
+  var title = _ref.title,
+      name = _ref.name,
+      dimensions = _ref.dimensions,
+      children = _ref.children,
+      height = _ref.height,
+      width = _ref.width,
+      minWidth = _ref.minWidth;
+  return /*#__PURE__*/React__default.createElement(Paper, {
+    "data-testid": "legend",
+    sx: {
+      padding: '10px',
+      border: '1px solid grey',
+      backgroundColor: '#FFF',
+      overflow: 'hidden',
+      marginBottom: 0.5
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    "data-testid": "legend-title"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    sx: {
+      fontFamily: 'Roboto, Helvetica, Arial',
+      fontSize: '10px',
+      minWidth: '100%',
+      wordWrap: 'break-word',
+      color: 'common.black',
+      whiteSpace: 'nowrap'
+    },
+    variant: "h3"
+  }, title)), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: title || 'loading',
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      margin: '10px 0px 10px 0px',
+      height: "".concat(height, "px"),
+      width: "".concat(width, "px")
+    }
+  }, children)), /*#__PURE__*/React__default.createElement(Box, {
+    "data-testid": "legend-info",
+    sx: Object.assign({
+      fontFamily: 'Roboto, Helvetica, Arial',
+      fontSize: 10,
+      color: 'common.black',
+      overflowX: 'hidden',
+      wordWrap: 'break-word',
+      whiteSpace: 'nowrap'
+    }, minWidth && {
+      minWidth: "".concat(minWidth, "px")
+    })
+  }, dimensions && dimensions.map(function (dim) {
+    return /*#__PURE__*/React__default.createElement(Box, {
+      key: name + dim.name
+    }, dim.name === 'time' ? "".concat(dim.currentValue) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+      style: {
+        fontWeight: 500
+      }
+    }, dim.name, ":"), dim.currentValue, " ", dim.units));
+  })));
+};
+
 var defaultCanvasWidth = 150;
 var defaultCanvasHeight = 30;
 /**
@@ -7180,46 +7299,20 @@ var Legend = function Legend(_ref) {
   like a title and the WMS legendgraphic url */
 
   var wmLayer = getWMLayerById(layer.id);
-  return /*#__PURE__*/React__default.createElement(Paper, {
-    "data-testid": "legend",
-    sx: {
-      padding: '10px',
-      border: '1px solid grey',
-      display: 'inline-block',
-      backgroundColor: '#FFF',
-      overflow: 'hidden',
-      marginBottom: 0.5
-    }
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    "data-testid": "legend-title",
-    style: {
-      maxWidth: canvasContainerWidth
-    }
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    sx: {
-      fontFamily: 'Roboto, Helvetica, Arial',
-      fontSize: '10px',
-      minWidth: "".concat(defaultCanvasWidth, "px"),
-      wordWrap: 'break-word',
-      color: 'common.black'
-    },
-    variant: "h3"
-  }, wmLayer && wmLayer.title)), /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: wmLayer && wmLayer.title || 'loading',
-    placement: "top"
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      margin: '10px 0px 10px 0px',
-      height: "".concat(canvasContainerHeight, "px"),
-      width: "".concat(canvasContainerWidth, "px")
-    }
+  return /*#__PURE__*/React__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.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 = getLegendGraphicURLForLayer(legendWmLayer);
       var image = legendImageStore.getImage(legendUrl);
@@ -7268,26 +7361,7 @@ var Legend = function Legend(_ref) {
         renderLegendGraphic(previousLegendImage.current, ctx, imageWidth, imageHeight);
       }
     }
-  }))), /*#__PURE__*/React__default.createElement(Box, {
-    "data-testid": "legend-info",
-    sx: {
-      fontFamily: 'Roboto, Helvetica, Arial',
-      fontSize: 10,
-      color: 'common.black',
-      overflowX: 'hidden',
-      minWidth: "".concat(defaultCanvasWidth, "px"),
-      wordWrap: 'break-word',
-      maxWidth: "".concat(canvasContainerWidth, "px")
-    }
-  }, layer.dimensions && layer.dimensions.map(function (dim) {
-    return /*#__PURE__*/React__default.createElement(Box, {
-      key: layer.name + dim.name
-    }, dim.name === 'time' ? "".concat(dim.currentValue) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
-      style: {
-        fontWeight: 500
-      }
-    }, dim.name, ":"), dim.currentValue, " ", dim.units));
-  })));
+  }));
 };
 
 /* *
@@ -7519,8 +7593,8 @@ function startAnimationSaga(_ref) {
         case 0:
           payload = _ref.payload;
           mapId = payload.mapId, start = payload.start, end = payload.end, interval = payload.interval, timeList = payload.timeList;
-          roundedStart = roundWithTimeStep(start && moment.utc(start).unix(), interval, 'ceil');
-          roundedEnd = roundWithTimeStep(end && moment.utc(end).unix(), interval, 'floor');
+          roundedStart = roundWithTimeStep(Number(start && moment.utc(start).unix()), interval, 'ceil');
+          roundedEnd = roundWithTimeStep(Number(end && moment.utc(end).unix()), interval, 'floor');
           _context.next = 6;
           return timeList || generateTimeList(moment.utc(roundedStart * 1000), moment.utc(roundedEnd * 1000), interval);
 
@@ -8256,7 +8330,7 @@ var getUserAddedServices = function getUserAddedServices() {
             service = _ref2[1];
 
         return Object.assign(Object.assign({}, userServices), isNoIdService(service) ? _defineProperty({}, serviceUrl, Object.assign(Object.assign({}, service), {
-          isUserAddedService: true
+          scope: 'user'
         })) : {});
       }, {});
     }
@@ -8283,14 +8357,14 @@ var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
     _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectRemoveServiceSaga),
     _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
 function newServiceAddedSaga(capturedAction) {
-  var addedService, id, serviceUrl, name, isUserAddedService, _abstract, keywords, groups;
+  var addedService, id, serviceUrl, name, scope, _abstract, keywords, groups;
 
   return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         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;
 
@@ -8315,7 +8389,7 @@ function newServiceAddedSaga(capturedAction) {
             serviceName: name,
             serviceUrl: serviceUrl,
             keywords: keywords,
-            isUserAddedService: isUserAddedService,
+            scope: scope,
             groups: groups,
             "abstract": _abstract
           }));
@@ -8378,11 +8452,11 @@ function layerSelectRemoveServiceSaga(capturedAction) {
 }
 function addServiceToLocalStorageSaga(_ref3) {
   var payload = _ref3.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(Object.assign(Object.assign({}, localStorageServices), _defineProperty({}, serviceUrl, {
     name: name,
@@ -9463,14 +9537,14 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
       source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
   var currentActiveMapId = useSelector(function (store) {
-    return getDialogMapId(store, 'layerSelect');
+    return getDialogMapId(store, DialogTypes.LayerSelect);
   });
   var isOpenInStore = useSelector(function (store) {
-    return getisDialogOpen(store, 'layerSelect');
+    return getisDialogOpen(store, DialogTypes.LayerSelect);
   });
   var openLayerSelectDialog = React.useCallback(function () {
     dispatch(uiActions.setActiveMapIdForDialog({
-      type: 'layerSelect',
+      type: DialogTypes.LayerSelect,
       mapId: mapId,
       setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
       source: source
@@ -11354,14 +11428,14 @@ var KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_ref) {
       source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
   var currentActiveMapId = useSelector(function (store) {
-    return getDialogMapId(store, 'keywordFilter');
+    return getDialogMapId(store, DialogTypes.KeywordFilter);
   });
   var isOpenInStore = useSelector(function (store) {
-    return getisDialogOpen(store, 'keywordFilter');
+    return getisDialogOpen(store, DialogTypes.KeywordFilter);
   });
   var openFilterResultsDialog = React.useCallback(function () {
     dispatch(uiActions.setActiveMapIdForDialog({
-      type: 'keywordFilter',
+      type: DialogTypes.KeywordFilter,
       mapId: mapId,
       setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
       source: source
@@ -11678,7 +11752,7 @@ var ServicePopup = function ServicePopup(_ref2) {
                   serviceUrl: formValues.serviceUrl,
                   "abstract": formValues.serviceAbstracts,
                   layers: serviceLayers,
-                  isUserAddedService: true
+                  scope: 'user'
                 });
                 setIsLoading(false);
                 showSnackbar(getSuccesMessage(formValues.serviceName));
@@ -11831,8 +11905,8 @@ var ServicePopup = function ServicePopup(_ref2) {
       })
     },
     disabled: isServiceUrlDisabled || isLoading,
+    isReadOnly: isShowPopup,
     InputProps: {
-      readOnly: isShowPopup,
       disableUnderline: isShowPopup,
       endAdornment: isShowPopup && /*#__PURE__*/React.createElement(InputAdornment, {
         position: "end"
@@ -11855,8 +11929,8 @@ var ServicePopup = function ServicePopup(_ref2) {
       }
     },
     disabled: isShowPopup || isLoading,
+    isReadOnly: isShowPopup,
     InputProps: {
-      readOnly: isShowPopup,
       disableUnderline: isShowPopup
     },
     sx: style$1.textField,
@@ -11867,9 +11941,8 @@ var ServicePopup = function ServicePopup(_ref2) {
     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',
@@ -12101,63 +12174,8 @@ var SearchFieldConnect = function SearchFieldConnect() {
  * 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-".concat(group);
-      }).concat(layer.keywords.map(function (keyword) {
-        return "keyword-".concat(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(_ref) {
@@ -12280,11 +12298,11 @@ var LayerInfoButtonConnect = function LayerInfoButtonConnect(_ref) {
  * 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 = Object.assign(Object.assign({}, textStyle$1), {
+var textStyleWithMargin = Object.assign(Object.assign({}, textStyle), {
   marginBottom: 1
 });
 
@@ -12293,7 +12311,7 @@ var LayerInfoText = function LayerInfoText(_ref) {
       value = _ref.value;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "subtitle2",
-    sx: textStyle$1
+    sx: textStyle
   }, label), /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "body2",
     sx: textStyleWithMargin
@@ -12316,10 +12334,6 @@ var LayerInfoText = function LayerInfoText(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var textStyle = {
-  lineHeight: '20px',
-  letterSpacing: '0.25px'
-};
 var valueStyle = Object.assign(Object.assign({}, textStyle), {
   overflowWrap: 'break-word'
 });
@@ -12330,12 +12344,15 @@ var LayerInfoList = function LayerInfoList(_ref) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "subtitle2",
     sx: textStyle
-  }, label), /*#__PURE__*/React__default.createElement(Grid$1, {
+  }, label), list.length === 0 ? /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "body2",
+    sx: textStyleWithMargin
+  }, "-") : /*#__PURE__*/React__default.createElement(Grid$1, {
     container: true,
     direction: "column"
   }, list.map(function (item) {
     return /*#__PURE__*/React__default.createElement("div", {
-      key: item.name
+      key: item.label
     }, /*#__PURE__*/React__default.createElement(Grid$1, {
       item: true,
       container: true,
@@ -12348,7 +12365,7 @@ var LayerInfoList = function LayerInfoList(_ref) {
     }, /*#__PURE__*/React__default.createElement(Typography$1, {
       variant: "body2",
       sx: textStyle
-    }, item.name, ":"))), /*#__PURE__*/React__default.createElement(Grid$1, {
+    }, item.label, ":"))), /*#__PURE__*/React__default.createElement(Grid$1, {
       item: true,
       container: true,
       direction: "row",
@@ -12363,6 +12380,41 @@ var LayerInfoList = function LayerInfoList(_ref) {
   })));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var LayerInfoLegend = function LayerInfoLegend(_ref) {
+  var title = _ref.title,
+      name = _ref.name,
+      dimensions = _ref.dimensions,
+      legendURL = _ref.legendURL;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "subtitle2",
+    sx: textStyleWithMargin
+  }, "Legend"), /*#__PURE__*/React__default.createElement(LegendLayout, {
+    title: title,
+    name: name,
+    dimensions: dimensions
+  }, legendURL ? /*#__PURE__*/React__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.
@@ -12394,20 +12446,19 @@ var getLayerStyles = function getLayerStyles(layer) {
 
   return styles.join(', ');
 };
-var getDimensionValue = function getDimensionValue(name, layer, breakAt) {
-  var includeUnit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-
-  var _a;
-
-  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("".concat(breakAt, " "));
+  var dimName = dimension.name.toLowerCase();
+  var breakAt = dimName === 'time' ? '/' : ',';
+  var includeUnit = dimName !== 'time' && dimName !== 'reference_time';
+  var dimValue = dimension.currentValue.split(breakAt).join("".concat(breakAt, " "));
 
   if (includeUnit) {
     return "".concat(dimValue, " ").concat(dimension.units);
@@ -12418,6 +12469,64 @@ var getDimensionValue = function getDimensionValue(name, layer, breakAt) {
 var getLayerBbox = function getLayerBbox(layer) {
   return layer.geographicBoundingBox ? "west ".concat(layer.geographicBoundingBox.west, ", east ").concat(layer.geographicBoundingBox.east, ", north ").concat(layer.geographicBoundingBox.north, ", south ").concat(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.createElement(DimensionsTime, null);
+
+    case 'reference_time':
+      return /*#__PURE__*/React__default.createElement(DimensionsRefTime, null);
+
+    case 'elevation':
+      return /*#__PURE__*/React__default.createElement(DimensionsElevation, null);
+
+    default:
+      return /*#__PURE__*/React__default.createElement(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 (_ref) {
+    var name = _ref.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");
@@ -12452,9 +12561,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
 
   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.createElement(ToolContainerDraggable, {
     onClose: onClose,
     headerSize: "xs",
@@ -12489,23 +12596,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
     value: layer["abstract"] || '-'
   }), /*#__PURE__*/React__default.createElement(LayerInfoList, {
     label: "Dimensions",
-    list: [{
-      name: 'Time',
-      value: timeValue,
-      icon: /*#__PURE__*/React__default.createElement(DimensionsTime, null)
-    }, {
-      name: 'Reference Time',
-      value: refTimeValue,
-      icon: /*#__PURE__*/React__default.createElement(DimensionsRefTime, null)
-    }, {
-      name: 'Elevation',
-      value: elevationValue,
-      icon: /*#__PURE__*/React__default.createElement(DimensionsElevation, null)
-    }, {
-      name: 'Other dimensions',
-      value: '-',
-      icon: /*#__PURE__*/React__default.createElement(DimensionsOther, null)
-    }]
+    list: dimensions
   }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
     label: "Styles",
     value: styles
@@ -12518,9 +12609,152 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
   }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
     label: "Keywords",
     value: ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.join(', ')) || '-'
+  }), /*#__PURE__*/React__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(_ref) {
+  var dimensions = _ref.dimensions;
+
+  if (!dimensions || !dimensions.length) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dimensions.map(function (dimension) {
+    return /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      key: dimension.label,
+      title: "".concat(dimension.label, ": ").concat(dimension.value)
+    }, /*#__PURE__*/React__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% - ".concat(buttonLarge, "px - 24px)")
+  },
+  column9: {
+    width: "calc(".concat(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% - ".concat(buttonSmall, "px - 8px)")
+  },
+  column9: {
+    width: "calc(".concat(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.
@@ -12541,7 +12775,8 @@ var layerInfoStyle = {
   fontSize: '10px',
   textOverflow: 'ellipsis',
   overflow: 'hidden',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  lineHeight: 1
 };
 
 var LayerListRow = function LayerListRow(_ref) {
@@ -12551,31 +12786,32 @@ var LayerListRow = function LayerListRow(_ref) {
       addLayer = _ref.addLayer,
       deleteLayer = _ref.deleteLayer,
       mapLayers = _ref.mapLayers,
-      mapId = _ref.mapId;
+      mapId = _ref.mapId,
+      layerSelectWidth = _ref.layerSelectWidth;
 
-  var _a, _b, _c;
+  var _a;
 
+  var rowHeight = widthToRowHeight(layerSelectWidth);
+  var columns = widthToColumns(layerSelectWidth);
+  var dimensions = getDimensionsList(layer.dimensions);
   return /*#__PURE__*/React__default.createElement(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.createElement(Grid, {
     container: true,
     item: true,
-    xs: 10
+    sx: columns.column8
   }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
     item: true,
     xs: 12
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -12584,25 +12820,19 @@ var LayerListRow = function LayerListRow(_ref) {
       height: '14px',
       lineHeight: '14px',
       fontWeight: 500,
-      WebkitLineClamp: 1,
-      display: '-webkit-box',
-      WebkitBoxOrient: 'vertical',
       textOverflow: 'ellipsis',
       overflow: 'hidden'
     }
   }, layer.text)), /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
     item: true,
-    xs: 4,
-    direction: "column"
+    container: true,
+    direction: "column",
+    sx: columns.column1
   }, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       fontSize: '12px',
       height: '18px',
       lineHeight: '18px',
-      WebkitLineClamp: 1,
-      display: '-webkit-box',
-      WebkitBoxOrient: 'vertical',
       textOverflow: 'ellipsis',
       overflow: 'hidden'
     }
@@ -12610,44 +12840,41 @@ var LayerListRow = function LayerListRow(_ref) {
     layer: layer,
     mapId: mapId,
     serviceName: service.name
-  })), layer["abstract"] || ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.length) || layer.path.length ? /*#__PURE__*/React__default.createElement(Grid, {
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    sx: columns.column2
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    sx: columns.column3
+  }, layer["abstract"] && /*#__PURE__*/React__default.createElement(Typography, {
     "data-testid": "layerAbstract",
+    sx: layerInfoStyle
+  }, layer["abstract"])), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
     container: true,
+    sx: columns.column4
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 8,
-    sx: {
-      height: '45px',
-      paddingLeft: '20px',
-      WebkitLineClamp: 2,
-      display: '-webkit-box',
-      WebkitBoxOrient: 'vertical'
-    }
-  }, layer["abstract"] && /*#__PURE__*/React__default.createElement(Typography, {
-    sx: Object.assign(Object.assign({}, layerInfoStyle), {
-      height: 15
-    })
-  }, layer["abstract"]), layer.path.length > 0 && /*#__PURE__*/React__default.createElement(Typography, {
-    sx: Object.assign(Object.assign({}, layerInfoStyle), {
-      height: ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.length) ? 15 : 30
-    })
-  }, "Groups: ", layer.path.join(' / ')), ((_c = layer.keywords) === null || _c === void 0 ? void 0 : _c.length) > 0 && /*#__PURE__*/React__default.createElement(Typography, {
-    sx: Object.assign(Object.assign({}, layerInfoStyle), {
-      height: layer.path.length ? 15 : 30
-    })
+    sx: columns.column5
+  }, /*#__PURE__*/React__default.createElement(LayerListDimensions, {
+    dimensions: dimensions
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    sx: columns.column6
+  }, layer.path.length > 0 && /*#__PURE__*/React__default.createElement(Typography, {
+    sx: layerInfoStyle
+  }, "Groups: ", layer.path.join(' / ')), ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.length) > 0 && /*#__PURE__*/React__default.createElement(Typography, {
+    sx: layerInfoStyle
   }, "Keywords:", ' ', layer.keywords.slice().sort(function (a, b) {
     return a.localeCompare(b);
-  }).join(', '))) : null), /*#__PURE__*/React__default.createElement(Grid, {
+  }).join(', ')))))), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
-    xs: 2,
+    sx: columns.column9,
     justifyContent: "flex-end",
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      width: '80px',
-      height: '48px',
-      marginRight: '8px'
-    }
+    sx: columns.column7
   }, /*#__PURE__*/React__default.createElement(LayerAddRemoveButton, {
     layer: layer,
     layerIndex: layerIndex,
@@ -12658,42 +12885,36 @@ var LayerListRow = function LayerListRow(_ref) {
   }))));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
 var LayerList = function LayerList(_ref) {
   var services = _ref.services,
-      serviceIds = _ref.serviceIds,
+      filteredLayers = _ref.filteredLayers,
       layerSelectHeight = _ref.layerSelectHeight,
       serviceListHeight = _ref.serviceListHeight,
+      layerSelectWidth = _ref.layerSelectWidth,
       addLayer = _ref.addLayer,
       deleteLayer = _ref.deleteLayer,
-      searchString = _ref.searchString,
       mapLayers = _ref.mapLayers,
-      filterIds = _ref.filterIds,
-      allFiltersActive = _ref.allFiltersActive,
       mapId = _ref.mapId;
+  var rowMargin = 4;
+  var rowHeight = widthToRowHeight(layerSelectWidth);
   var layerSelectFilterHeight = 155 + serviceListHeight;
-
-  var _React$useState = React.useState(0),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      numberOfLayers = _React$useState2[0],
-      setNumberOfLayers = _React$useState2[1];
-
-  var _React$useState3 = React.useState([]),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      layersFilteredFromService = _React$useState4[0],
-      setLayersFilteredFromService = _React$useState4[1];
-
-  React.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 Object.assign(Object.assign({}, layer), {
-          serviceId: serviceId
-        });
-      }));
-    }, []));
-  }, [serviceIds, filterIds, services, searchString, allFiltersActive]);
   return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "layerList"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -12701,24 +12922,27 @@ var LayerList = function LayerList(_ref) {
       marginBottom: '4px',
       fontSize: '12px'
     }
-  }, numberOfLayers, " results"), /*#__PURE__*/React.createElement(FixedSizeList, {
+  }, filteredLayers.length, " results"), /*#__PURE__*/React.createElement(FixedSizeList, {
     height: layerSelectHeight - layerSelectFilterHeight,
-    itemCount: numberOfLayers,
-    itemSize: 72
+    itemCount: filteredLayers.length,
+    itemSize: rowHeight + rowMargin
   }, function (_ref2) {
     var index = _ref2.index,
         style = _ref2.style;
+    var filter = filteredLayers[index];
+    var service = services[filter.serviceName];
     return /*#__PURE__*/React.createElement("div", {
       style: style,
-      key: layersFilteredFromService[index].name
-    }, services[layersFilteredFromService[index].serviceId] && /*#__PURE__*/React.createElement(LayerListRow, {
-      layer: layersFilteredFromService[index],
+      key: filter.name
+    }, service && /*#__PURE__*/React.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
     }));
   }));
 };
@@ -12743,14 +12967,12 @@ var LayerList = function LayerList(_ref) {
 var LayerListConnect = function LayerListConnect(_ref) {
   var mapId = _ref.mapId,
       layerSelectHeight = _ref.layerSelectHeight,
-      serviceListHeight = _ref.serviceListHeight;
+      serviceListHeight = _ref.serviceListHeight,
+      layerSelectWidth = _ref.layerSelectWidth;
+  var dispatch = useDispatch();
   var services = useSelector(function (store) {
     return getServices(store);
   });
-  var dispatch = useDispatch();
-  var enabledServiceIds = useSelector(function (store) {
-    return getEnabledServiceIds(store);
-  });
   var mapLayers = useSelector(function (store) {
     return getMapLayers(store, mapId);
   });
@@ -12765,7 +12987,6 @@ var LayerListConnect = function LayerListConnect(_ref) {
       layerType: LayerType$1.mapLayer
     };
     addMapLayer({
-      mapId: mapId,
       layerId: layer.id,
       layer: layer,
       origin: LayerActionOrigin.layerManager
@@ -12793,25 +13014,17 @@ var LayerListConnect = function LayerListConnect(_ref) {
       origin: LayerActionOrigin.layerManager
     }));
   }, [dispatch, mapId]);
-  var checkedFilterIds = useSelector(function (store) {
-    return getCheckedFilterIds(store);
-  });
-  var allFiltersActive = useSelector(function (store) {
-    return isAllFiltersChecked(store);
-  });
-  var searchString = useSelector(function (store) {
-    return getSearchFilter(store);
+  var filteredLayers = useSelector(function (store) {
+    return getFilteredLayers(store);
   });
   return /*#__PURE__*/React.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
   });
@@ -12835,13 +13048,13 @@ var LayerListConnect = function LayerListConnect(_ref) {
  * */
 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(_ref) {
@@ -12996,9 +13209,9 @@ var ServiceList = function ServiceList(_ref) {
       display: 'block',
       alignItems: 'center',
       "float": 'left',
-      paddingLeft: '40px',
-      paddingRight: '30px',
-      marginBottom: '5px',
+      paddingLeft: '48px',
+      paddingRight: '40px',
+      marginBottom: '8px',
       fontSize: '0.875rem'
     },
     ref: ref
@@ -13154,8 +13367,9 @@ var Rows = function Rows(_ref2) {
     var _services$serviceId = services[serviceId],
         serviceUrl = _services$serviceId.serviceUrl,
         serviceName = _services$serviceId.serviceName,
-        isUserAddedService = _services$serviceId.isUserAddedService;
+        scope = _services$serviceId.scope;
     var serviceHasActiveLayers = checkIfServiceHasActiveLayers(serviceUrl);
+    var userAddedService = isUserAddedService(scope);
     return /*#__PURE__*/React.createElement(ListItem, {
       key: serviceUrl
     }, /*#__PURE__*/React.createElement(ListItemText, {
@@ -13178,7 +13392,7 @@ var Rows = function Rows(_ref2) {
     }, /*#__PURE__*/React.createElement(Grid, {
       item: true,
       xs: 6
-    }, isUserAddedService ? /*#__PURE__*/React.createElement(Tooltip, {
+    }, userAddedService ? /*#__PURE__*/React.createElement(Tooltip, {
       title: "Edit Service"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": "edit service",
@@ -13209,7 +13423,7 @@ var Rows = function Rows(_ref2) {
     }, /*#__PURE__*/React.createElement(Visibility, null))))), /*#__PURE__*/React.createElement(Grid, {
       item: true,
       xs: 6
-    }, isUserAddedService && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Tooltip, {
+    }, userAddedService && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Tooltip, {
       title: serviceHasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service',
       "data-testid": "removeServiceTooltip"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
@@ -13308,15 +13522,20 @@ var LayerSelect = function LayerSelect(_ref) {
       _ref$order = _ref.order,
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
-      source = _ref$source === void 0 ? 'module' : _ref$source;
+      source = _ref$source === void 0 ? 'module' : _ref$source,
+      _ref$startSize = _ref.startSize,
+      startSize = _ref$startSize === void 0 ? {
+    width: 750,
+    height: 500
+  } : _ref$startSize;
   var initialServiceListHeight = 37;
 
-  var _React$useState = React.useState(500),
+  var _React$useState = React.useState(startSize.height),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       height = _React$useState2[0],
       setHeight = _React$useState2[1];
 
-  var _React$useState3 = React.useState(750),
+  var _React$useState3 = React.useState(startSize.width),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       width = _React$useState4[0],
       setWidth = _React$useState4[1];
@@ -13345,7 +13564,7 @@ var LayerSelect = function LayerSelect(_ref) {
       width: width,
       height: height
     },
-    minWidth: 390,
+    minWidth: 320,
     minHeight: 126,
     startPosition: {
       top: 150,
@@ -13362,13 +13581,13 @@ var LayerSelect = function LayerSelect(_ref) {
     source: source
   }, /*#__PURE__*/React.createElement(Box, {
     sx: {
-      padding: '6px'
+      padding: '4px 16px 0 16px'
     }
   }, /*#__PURE__*/React.createElement(SearchFieldConnect, null)), /*#__PURE__*/React.createElement(Box, {
     sx: {
       "float": 'left',
       position: 'absolute',
-      margin: '12px 0 0 8px',
+      margin: '8px 8px 0 16px',
       zIndex: 2
     }
   }, /*#__PURE__*/React.createElement(KeywordFilterButtonConnect, {
@@ -13376,7 +13595,7 @@ var LayerSelect = function LayerSelect(_ref) {
   })), /*#__PURE__*/React.createElement(Box, {
     sx: {
       position: 'absolute',
-      margin: '12px 0 0 calc(100% - 36px)',
+      margin: '8px 0 0 calc(100% - 40px)',
       zIndex: 2
     }
   }, /*#__PURE__*/React.createElement(ServiceOptionsButton, {
@@ -13385,12 +13604,13 @@ var LayerSelect = function LayerSelect(_ref) {
     setHeight: handleHeightChange
   })), /*#__PURE__*/React.createElement(Box, {
     sx: {
-      padding: '0 8px'
+      padding: '0 16px'
     }
   }, /*#__PURE__*/React.createElement(LayerListConnect, {
     mapId: mapId,
     layerSelectHeight: height,
-    serviceListHeight: serviceListHeight
+    serviceListHeight: serviceListHeight,
+    layerSelectWidth: width
   })));
 };
 
@@ -13783,7 +14003,7 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
 var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
   var bounds = _ref.bounds;
 
-  var _useSetupDialog = useSetupDialog('keywordFilter'),
+  var _useSetupDialog = useSetupDialog(DialogTypes.KeywordFilter),
       dialogOrder = _useSetupDialog.dialogOrder,
       onCloseDialog = _useSetupDialog.onCloseDialog,
       setDialogOrder = _useSetupDialog.setDialogOrder,
@@ -13870,10 +14090,10 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
       _ref$showTitle = _ref.showTitle,
       showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle;
   var mapId = useSelector(function (store) {
-    return getDialogMapId(store, 'layerSelect');
+    return getDialogMapId(store, DialogTypes.LayerSelect);
   });
 
-  var _useSetupDialog = useSetupDialog('layerSelect'),
+  var _useSetupDialog = useSetupDialog(DialogTypes.LayerSelect),
       dialogOrder = _useSetupDialog.dialogOrder,
       isDialogOpen = _useSetupDialog.isDialogOpen,
       onCloseDialog = _useSetupDialog.onCloseDialog,
@@ -13905,11 +14125,6 @@ var useFetchServices = function useFetchServices(dialogType) {
   var serviceSetLayers = React.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(payload));
   }, [dispatch]);
-
-  var checkIfUserAddedService = function checkIfUserAddedService(service) {
-    return !!service.isUserAddedService;
-  };
-
   React.useEffect(function () {
     if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
       mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
@@ -13921,7 +14136,7 @@ var useFetchServices = function useFetchServices(dialogType) {
               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"]
             });
@@ -13956,7 +14171,7 @@ var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices
  * 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
@@ -14117,7 +14332,7 @@ var ZoomControlConnect = function ZoomControlConnect(_ref) {
   }, [mapId]);
 
   var onZoomIn = function onZoomIn() {
-    return adagucRef.current.zoomIn();
+    return adagucRef.current.zoomIn(undefined);
   };
 
   var onZoomOut = function onZoomOut() {
@@ -14204,14 +14419,14 @@ var LayerManagerMapButtonConnect = function LayerManagerMapButtonConnect(_ref) {
       source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
   var currentActiveMapId = useSelector(function (store) {
-    return getDialogMapId(store, 'layerManager');
+    return getDialogMapId(store, DialogTypes.LayerManager);
   });
   var isOpenInStore = useSelector(function (store) {
-    return getisDialogOpen(store, 'layerManager');
+    return getisDialogOpen(store, DialogTypes.LayerManager);
   });
   var openLayerManagerDialog = React.useCallback(function () {
     dispatch(uiActions.setActiveMapIdForDialog({
-      type: 'layerManager',
+      type: DialogTypes.LayerManager,
       mapId: mapId,
       setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
       source: source
@@ -14327,7 +14542,7 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
   }
 
   var sortedMarks = _toConsumableArray(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;
@@ -14815,9 +15030,7 @@ var titleOff = 'Auto update off';
 
 var AutoUpdateButton = function AutoUpdateButton(_ref) {
   var _ref$toggleAutoUpdate = _ref.toggleAutoUpdate,
-      toggleAutoUpdate = _ref$toggleAutoUpdate === void 0 ? function () {
-    return null;
-  } : _ref$toggleAutoUpdate,
+      toggleAutoUpdate = _ref$toggleAutoUpdate === void 0 ? function () {} : _ref$toggleAutoUpdate,
       _ref$isAutoUpdating = _ref.isAutoUpdating,
       isAutoUpdating = _ref$isAutoUpdating === void 0 ? false : _ref$isAutoUpdating,
       _ref$disabled = _ref.disabled,
@@ -15074,9 +15287,7 @@ var TimeStepButton = function TimeStepButton(_ref) {
       timeDimension = _ref.timeDimension,
       onChangeTimeStep = _ref.onChangeTimeStep,
       _ref$onToggleTimestep = _ref.onToggleTimestepAuto,
-      onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {
-    return null;
-  } : _ref$onToggleTimestep,
+      onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {} : _ref$onToggleTimestep,
       _ref$isOpenByDefault = _ref.isOpenByDefault,
       isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
   var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
@@ -15107,6 +15318,129 @@ var TimeStepButton = function TimeStepButton(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 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(_ref) {
+  var layers = _ref.layers,
+      _ref$timeSliderScale = _ref.timeSliderScale,
+      timeSliderScale = _ref$timeSliderScale === void 0 ? Scale.Hour : _ref$timeSliderScale,
+      centerTime = _ref.centerTime,
+      secondsPerPx = _ref.secondsPerPx,
+      selectedTime = _ref.selectedTime,
+      onChangeTimeSliderScale = _ref.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.createElement(TimeSliderMenu, {
+    handleMenuItemClick: onChangeSliderValue,
+    icon: /*#__PURE__*/React.createElement(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(_ref) {
+  var _ref$onSetNow = _ref.onSetNow,
+      onSetNow = _ref$onSetNow === void 0 ? function () {
+    return null;
+  } : _ref$onSetNow,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: title,
+    "data-testid": "nowButtonTooltip"
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+    disabled: disabled,
+    onClick: function onClick() {
+      return onSetNow();
+    },
+    "aria-label": "now"
+  }, /*#__PURE__*/React.createElement(Now, {
+    "data-testid": "now-svg"
+  }))));
+};
+
 var OptionsPopOver = styled(Popover)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -15119,9 +15453,11 @@ var OptionsPopOver = styled(Popover)(function (_ref) {
 });
 
 var OptionsMenuButton = function OptionsMenuButton(_ref2) {
-  var autoUpdateBtn = _ref2.autoUpdateBtn,
+  var nowBtn = _ref2.nowBtn,
+      autoUpdateBtn = _ref2.autoUpdateBtn,
       speedBtn = _ref2.speedBtn,
-      timeStepBtn = _ref2.timeStepBtn;
+      timeStepBtn = _ref2.timeStepBtn,
+      timeScaleBtn = _ref2.timeScaleBtn;
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -15144,10 +15480,9 @@ var OptionsMenuButton = function OptionsMenuButton(_ref2) {
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
     onClick: onClickButton,
     "data-testid": "optionsMenuButton",
-    active: open
-  }, /*#__PURE__*/React.createElement(Options, {
-    "data-testid": "optionsIcon"
-  })))), /*#__PURE__*/React.createElement(OptionsPopOver, {
+    active: open,
+    "aria-label": "animation options"
+  }, /*#__PURE__*/React.createElement(Options, null)))), /*#__PURE__*/React.createElement(OptionsPopOver, {
     id: id,
     open: open,
     "data-testid": "optionsMenuPopOver",
@@ -15167,19 +15502,27 @@ var OptionsMenuButton = function OptionsMenuButton(_ref2) {
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: "auto"
+  }, nowBtn || /*#__PURE__*/React.createElement(NowButton, null)), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: "auto"
+  }, timeScaleBtn || /*#__PURE__*/React.createElement(TimeScaleButton, {
+    centerTime: 0,
+    onChangeTimeSliderScale: function onChangeTimeSliderScale() {},
+    secondsPerPx: 0,
+    selectedTime: 0,
+    timeSliderScale: 0
+  })), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: "auto"
   }, timeStepBtn || /*#__PURE__*/React.createElement(TimeStepButton, {
     timeStep: 0,
-    onChangeTimeStep: function onChangeTimeStep() {
-      return null;
-    }
+    onChangeTimeStep: function onChangeTimeStep() {}
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: "auto"
   }, speedBtn || /*#__PURE__*/React.createElement(SpeedButton, {
     animationDelay: defaultAnimationDelayAtStart,
-    setMapAnimationDelay: function setMapAnimationDelay() {
-      return null;
-    }
+    setMapAnimationDelay: function setMapAnimationDelay() {}
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: "auto"
@@ -15210,10 +15553,7 @@ var TimeSliderButtons = function TimeSliderButtons(_ref) {
     "data-testid": "timeSliderButtons"
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
-    spacing: 2,
-    sx: {
-      padding: '20px 0px 0px 16px'
-    }
+    spacing: 2
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, optionsMenuBtn || /*#__PURE__*/React.createElement(OptionsMenuButton, null)), /*#__PURE__*/React.createElement(Grid, {
@@ -15971,19 +16311,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === 'Home' && mapIsActive) {
-        if (dataStartTime < dataEndTime) {
-          if (dataEndTime < currentTime) {
-            onSetNewDate(moment.utc(dataEndTime * 1000).toISOString());
-            onSetCenterTime(dataEndTime);
-          } else if (dataStartTime > currentTime) {
-            onSetNewDate(moment.utc(dataStartTime * 1000).toISOString());
-            onSetCenterTime(dataStartTime);
-          } else {
-            var closestToCurrent = roundWithTimeStep(currentTime, timeStep);
-            onSetNewDate(moment.utc(closestToCurrent * 1000).toISOString());
-            onSetCenterTime(closestToCurrent);
-          }
-        }
+        handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
       }
     };
 
@@ -16015,7 +16343,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "timeSliderLegend",
     sx: {
-      height: '50px'
+      height: "".concat(TIME_SLIDER_LEGEND_HEIGHT, "px")
     }
   }, /*#__PURE__*/React.createElement(CanvasComponent, {
     ref: node,
@@ -16040,264 +16368,40 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
         }
       }
     },
-    onWheel: function onWheel(_ref2) {
-      var deltaY = _ref2.deltaY,
-          deltaX = _ref2.deltaX,
-          canvasWidth = _ref2.canvasWidth,
-          mouseX = _ref2.mouseX;
-      zoom(deltaY, deltaX, canvasWidth, mouseX);
-    },
-    onMouseDown: function onMouseDown(x, y, width) {
-      setDragged(false);
-      setReleased(false);
-      var selectedTimeX = timestampToPixel(selectedTime, centerTime, width, secondsPerPx);
-      setNewSelectionTimeRequested(Math.abs(x - selectedTimeX) < NEEDLE_HANDLE_WIDTH);
-    },
-    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.createElement(SliderThumb, Object.assign({}, other, {
-    "data-testid": "scaleSliderSliderThumb",
-    tabIndex: 0
-  }), children, /*#__PURE__*/React.createElement(SliderThumb$1, 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 = styled(Slider)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    '&.MuiSlider-root': {
-      height: 4,
-      width: 167,
-      margin: "0 0 18px ".concat(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(_ref2) {
-  var layers = _ref2.layers,
-      _ref2$timeSliderScale = _ref2.timeSliderScale,
-      timeSliderScale = _ref2$timeSliderScale === void 0 ? Scale.Hour : _ref2$timeSliderScale,
-      centerTime = _ref2.centerTime,
-      secondsPerPx = _ref2.secondsPerPx,
-      selectedTime = _ref2.selectedTime,
-      onChangeTimeSliderScale = _ref2.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 _marks$find = marks.find(function (mark) {
-    return mark.value === value;
-  }),
-      paddingLeft = _marks$find.paddingLeft,
-      text = _marks$find.text;
-
-  var scaleTextPadding = {
-    paddingLeft: paddingLeft
-  };
-  return /*#__PURE__*/React.createElement(Box, {
-    "data-testid": "scaleSlider",
-    sx: {
-      backgroundColor: 'geowebColors.background.surface',
-      width: '229px',
-      height: '40px',
-      paddingTop: '4px',
-      paddingBottom: '7px',
-      boxSizing: 'content-box'
-    }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Box, {
-    "data-testid": "scaleSliderText",
-    sx: {
-      width: '67px',
-      height: '15px',
-      padding: '0px 10px 0 8px',
-      color: 'geowebColors.typographyAndIcons.text',
-      font: '12px Roboto'
-    },
-    style: scaleTextPadding
-  }, text)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.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
+    onWheel: function onWheel(_ref2) {
+      var deltaY = _ref2.deltaY,
+          deltaX = _ref2.deltaX,
+          canvasWidth = _ref2.canvasWidth,
+          mouseX = _ref2.mouseX;
+      zoom(deltaY, deltaX, canvasWidth, mouseX);
     },
-    marks: marks,
-    track: false
-  })));
+    onMouseDown: function onMouseDown(x, y, width) {
+      setDragged(false);
+      setReleased(false);
+      var selectedTimeX = timestampToPixel(selectedTime, centerTime, width, secondsPerPx);
+      setNewSelectionTimeRequested(Math.abs(x - selectedTimeX) < NEEDLE_HANDLE_WIDTH);
+    },
+    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);
+    }
+  }));
 };
 
+var TIME_SLIDER_LEGEND_HEIGHT = 50;
+
 /* eslint-disable no-param-reassign */
 
 var drawRoundedRectangle = function drawRoundedRectangle(ctx, x, y, width, height, cornerRadius, theme) {
@@ -16545,12 +16649,12 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
 
   var curTime = selectedTime !== undefined ? selectedTime.toISOString() : moment.utc().toISOString();
 
-  var _React$useState = React.useState(animationStartTime && moment.utc(animationStartTime).unix()),
+  var _React$useState = React.useState(animationStartTime ? moment.utc(animationStartTime).unix() : undefined),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       localAnimationStartTime = _React$useState2[0],
       setLocalAnimationStartTime = _React$useState2[1];
 
-  var _React$useState3 = React.useState(animationEndTime && moment.utc(animationEndTime).unix()),
+  var _React$useState3 = React.useState(animationEndTime ? moment.utc(animationEndTime).unix() : undefined),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       localAnimationEndTime = _React$useState4[0],
       setLocalAnimationEndTime = _React$useState4[1];
@@ -16693,8 +16797,8 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
   };
 
   React.useEffect(function () {
-    setLocalAnimationStartTime(animationStartTime && moment.utc(animationStartTime).unix());
-    setLocalAnimationEndTime(animationEndTime && moment.utc(animationEndTime).unix());
+    setLocalAnimationStartTime(animationStartTime ? moment.utc(animationStartTime).unix() : undefined);
+    setLocalAnimationEndTime(animationEndTime ? moment.utc(animationEndTime).unix() : undefined);
   }, [animationStartTime, animationEndTime]);
   var handleKeyDown = React.useCallback(function (event) {
     if (event.ctrlKey && dataStartTime && dataEndTime && mapIsActive) {
@@ -16845,7 +16949,6 @@ var defaultProps = {
 var TimeSlider = function TimeSlider(_ref) {
   var buttons = _ref.buttons,
       rail = _ref.rail,
-      scaleSlider = _ref.scaleSlider,
       legend = _ref.legend,
       _ref$mapIsActive = _ref.mapIsActive,
       mapIsActive = _ref$mapIsActive === void 0 ? true : _ref$mapIsActive,
@@ -16856,15 +16959,15 @@ var TimeSlider = function TimeSlider(_ref) {
   useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
   return isVisible ? /*#__PURE__*/React.createElement(Grid, {
     container: true,
-    "data-testid": "timeSlider",
     sx: {
       display: 'grid',
       gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
       gridTemplateRows: '50px'
-    }
+    },
+    "data-testid": "timeSlider"
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true
-  }, " ", buttons || /*#__PURE__*/React.createElement(TimeSliderButtons, null), " "), /*#__PURE__*/React.createElement(Grid, {
+  }), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, rail || /*#__PURE__*/React.createElement(TimeSliderRail, Object.assign({}, defaultProps, {
     selectedTime: defaultProps.selectedTime,
@@ -16873,14 +16976,11 @@ var TimeSlider = function TimeSlider(_ref) {
     item: true,
     sx: {
       height: '50px'
-    }
-  }, scaleSlider || /*#__PURE__*/React.createElement(TimeSliderScaleSlider, Object.assign({}, defaultProps, {
-    selectedTime: defaultProps.selectedTime.unix(),
-    timeSliderScale: Scale.Hour,
-    onChangeTimeSliderScale: function onChangeTimeSliderScale() {
-      return null;
-    }
-  }))), /*#__PURE__*/React.createElement(Grid, {
+    },
+    container: true,
+    alignItems: "center",
+    justifyContent: "center"
+  }, buttons || /*#__PURE__*/React.createElement(TimeSliderButtons, null)), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, legend || /*#__PURE__*/React.createElement(TimeSliderLegend, Object.assign({}, defaultProps, {
     selectedTime: defaultProps.selectedTime.unix(),
@@ -17030,6 +17130,122 @@ var TimeStepButtonComponent = function TimeStepButtonComponent(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * */
+var TimeScaleButtonConnect = function TimeScaleButtonConnect(_ref) {
+  var mapId = _ref.mapId;
+  var layers = useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  });
+  var timeSliderScale = useSelector(function (store) {
+    return getMapTimeSliderScale(store, mapId);
+  });
+  var centerTime = useSelector(function (store) {
+    return getMapTimeSliderCenterTime(store, mapId);
+  });
+  var secondsPerPx = useSelector(function (store) {
+    return getMapTimeSliderSecondsPerPx(store, mapId);
+  });
+  var dimensions = useSelector(function (store) {
+    return getMapDimensions(store, mapId);
+  });
+  var dispatch = 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 _getTimeBounds = getTimeBounds(dimensions),
+      selectedTime = _getTimeBounds.selectedTime;
+
+  return /*#__PURE__*/React.createElement(TimeScaleButton, {
+    layers: layers,
+    timeSliderScale: timeSliderScale,
+    onChangeTimeSliderScale: onSetTimeSliderScale,
+    secondsPerPx: secondsPerPx,
+    centerTime: centerTime,
+    selectedTime: selectedTime
+  });
+};
+
+var NowButtonConnect = function NowButtonConnect(_ref) {
+  var sourceId = _ref.sourceId,
+      mapId = _ref.mapId,
+      isDisabled = _ref.isDisabled;
+  var dispatch = useDispatch();
+  var currentTime = moment.utc().unix();
+  var timeStep = useSelector(function (store) {
+    return getMapTimeStep(store, mapId);
+  });
+
+  var _getDataLimitsFromLay = getDataLimitsFromLayers(useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  })),
+      _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
+      dataStartTime = _getDataLimitsFromLay2[0],
+      dataEndTime = _getDataLimitsFromLay2[1];
+
+  var isAnimating$1 = 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.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.
@@ -17056,8 +17272,13 @@ var TimeStepButtonComponent = function TimeStepButtonComponent(_ref) {
  */
 
 var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
-  var mapId = _ref.mapId;
+  var sourceId = _ref.sourceId,
+      mapId = _ref.mapId;
   return /*#__PURE__*/React.createElement(OptionsMenuButton, {
+    nowBtn: /*#__PURE__*/React.createElement(NowButtonConnect, {
+      mapId: mapId,
+      sourceId: sourceId
+    }),
     autoUpdateBtn: /*#__PURE__*/React.createElement(AutoUpdateButtonConnect, {
       mapId: mapId
     }),
@@ -17066,6 +17287,9 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
     }),
     timeStepBtn: /*#__PURE__*/React.createElement(TimeStepButtonComponent, {
       mapId: mapId
+    }),
+    timeScaleBtn: /*#__PURE__*/React.createElement(TimeScaleButtonConnect, {
+      mapId: mapId
     })
   });
 };
@@ -17096,10 +17320,12 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
  */
 
 var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_ref) {
-  var mapId = _ref.mapId;
+  var sourceId = _ref.sourceId,
+      mapId = _ref.mapId;
   return /*#__PURE__*/React.createElement(TimeSliderButtons, {
     optionsMenuBtn: /*#__PURE__*/React.createElement(OptionsMenuButtonConnect, {
-      mapId: mapId
+      mapId: mapId,
+      sourceId: sourceId
     }),
     playBtn: /*#__PURE__*/React.createElement(PlayButtonConnect, {
       mapId: mapId
@@ -17351,89 +17577,6 @@ var TimeSliderRailConnectComponent = function TimeSliderRailConnectComponent(_re
 
 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 = 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(_ref) {
-  var timeSliderScale = _ref.timeSliderScale,
-      mapId = _ref.mapId,
-      layers = _ref.layers,
-      centerTime = _ref.centerTime,
-      secondsPerPx = _ref.secondsPerPx,
-      dimensions = _ref.dimensions,
-      mapSetTimeSliderScale = _ref.mapSetTimeSliderScale,
-      mapSetTimeSliderDataScaleToSecondsPerPx = _ref.mapSetTimeSliderDataScaleToSecondsPerPx,
-      mapSetTimeSliderCenterTime = _ref.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 _getTimeBounds = getTimeBounds(dimensions),
-      selectedTime = _getTimeBounds.selectedTime;
-
-  return /*#__PURE__*/React.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.
@@ -17501,15 +17644,13 @@ var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
 
   return /*#__PURE__*/React.createElement(TimeSlider, {
     buttons: /*#__PURE__*/React.createElement(TimeSliderButtonsConnect, {
-      mapId: mapId
+      mapId: mapId,
+      sourceId: sourceId
     }),
     rail: /*#__PURE__*/React.createElement(TimeSliderRailConnect, {
       mapId: mapId,
       sourceId: sourceId
     }),
-    scaleSlider: /*#__PURE__*/React.createElement(TimeSliderScaleSliderConnect, {
-      mapId: mapId
-    }),
     legend: /*#__PURE__*/React.createElement(TimeSliderLegendConnect$1, {
       mapId: mapId,
       sourceId: sourceId
@@ -18000,7 +18141,7 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSIns
         id: service.id,
         serviceUrl: wmLayer.service,
         layers: layers,
-        isUserAddedService: false
+        scope: 'system'
       },
       layerStyle: {
         origin: origin,
@@ -18706,7 +18847,7 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (!featureCoords) {
-        return;
+        return undefined;
       }
 
       var vertexSelected = mouseDown === true && this.mouseIsOverVertexNr !== VERTEX.NONE;
@@ -18730,6 +18871,8 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
 
         return false;
       }
+
+      return undefined;
     }
   }, {
     key: "hoverVertex",
@@ -18848,7 +18991,7 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
           isInEditMode = _this$props2.isInEditMode,
           featureNrToEdit = _this$props2.featureNrToEdit,
           onHoverFeature = _this$props2.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
@@ -18889,11 +19032,11 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       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,
@@ -18959,6 +19102,8 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
         /* 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 */
 
@@ -19266,6 +19411,8 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
           return false;
         }
       }
+
+      return undefined;
     }
   }, {
     key: "addPointToLineStringFeature",
@@ -20057,7 +20204,7 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
         /* 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()) {
@@ -20070,6 +20217,8 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
           ctx.strokeRect(parseInt(_coord.x, 10) - imageWidth / 2, parseInt(_coord.y, 10) - imageHeight / 2, imageWidth, imageHeight);
         }
       }
+
+      return undefined;
     }
   }, {
     key: "drawMarker",
@@ -21322,12 +21471,8 @@ ReactMapView.defaultProps = {
   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 */
   },
@@ -21436,7 +21581,7 @@ var MapView = function MapView(_a) {
     }
   }, /*#__PURE__*/React.createElement(ZoomControls, {
     onZoomIn: function onZoomIn() {
-      return adagucRef.current.zoomIn();
+      return adagucRef.current.zoomIn(undefined);
     },
     onZoomOut: function onZoomOut() {
       return adagucRef.current.zoomOut();
@@ -21494,10 +21639,10 @@ var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
     return (touches === null || touches === void 0 ? void 0 : touches.length) === 2;
   };
 
-  var isValidMap = React.useCallback(function (map, event) {
+  var isCanvasElement = React.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;
@@ -21505,9 +21650,32 @@ var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
     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 _elem$getBoundingClie = elem.getBoundingClientRect(),
+        left = _elem$getBoundingClie.left,
+        top = _elem$getBoundingClie.top,
+        width = _elem$getBoundingClie.width,
+        height = _elem$getBoundingClie.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.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);
@@ -21518,10 +21686,31 @@ var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
       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.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);
@@ -21564,7 +21753,7 @@ var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
         setPrevDist(_dist);
       }
     }
-  }, [firstTouchX, firstTouchY, isValidMap, mapId, prevDist, secondTouchX, secondTouchY]);
+  }, [mapId, isCanvasElement, firstTouchX, firstTouchY, secondTouchX, secondTouchY, prevDist]);
   var handleEnd = React.useCallback(function () {}, []);
   React.useEffect(function () {
     document.addEventListener('touchstart', handleStart, {
@@ -21813,7 +22002,7 @@ var MapViewConnect = function MapViewConnect(_a) {
     },
     srs: srs,
     bbox: bbox,
-    mapPinLocation: displayMapPin && mapPinLocation,
+    mapPinLocation: displayMapPin ? mapPinLocation : undefined,
     dimensions: mapDimensions,
     activeLayerId: activeLayerId,
     animationDelay: animationDelay,
@@ -22015,7 +22204,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
 
     if (shouldShowLayerManager !== undefined) {
       dispatch(uiActions.setActiveMapIdForDialog({
-        type: 'layerManager',
+        type: DialogTypes.LayerManager,
         mapId: mapId,
         setOpen: shouldShowLayerManager,
         source: 'app'
@@ -22755,7 +22944,7 @@ var SyncGroupViewerConnect = function SyncGroupViewerConnect() {
     dispatch(actions.syncGroupRemoveTarget(payload));
   }, [dispatch]);
 
-  var _useSetupDialog = useSetupDialog('syncGroups'),
+  var _useSetupDialog = useSetupDialog(DialogTypes.SyncGroups),
       dialogOrder = _useSetupDialog.dialogOrder,
       isDialogOpen = _useSetupDialog.isDialogOpen,
       onCloseDialog = _useSetupDialog.onCloseDialog,