@opengeoweb/core 3.0.0 → 4.1.0

package/index.esm.js

@@ -1,20 +1,17 @@
-import { createAction, createSlice, createSelector } from '@reduxjs/toolkit';
+import { createAction, createSlice, createSelector, createEntityAdapter } from '@reduxjs/toolkit';
 import produce$1, { current, produce } from 'immer';
 import moment from 'moment';
 import * as React from 'react';
 import React__default, { Component, useRef, useState, useEffect } from 'react';
 import _, { isEqual, debounce, throttle, range } from 'lodash';
-import { takeLatest, put, select, call, all, takeEvery } from 'redux-saga/effects';
+import { takeLatest, put, select, call, all, takeEvery, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
-import { Tooltip, Paper, Typography, Grid, InputLabel, IconButton, Box, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, FormControl, LinearProgress, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } 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, SliderThumb, Snackbar } from '@mui/material';
 import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
 import { Pause, Play, Cached, Add, Copy, Flag, DragHandle as DragHandle$1, Filter, Close, Search, Clear, ChevronLeft, ChevronRight, Edit, Delete, Home, Minus, Layers, Equalizer, Sort, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, FastForward, Options, SliderThumb as SliderThumb$1, List as List$1, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
-import makeStyles from '@mui/styles/makeStyles';
 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 createStyles from '@mui/styles/createStyles';
 import { FixedSizeList } from 'react-window';
-import withStyles from '@mui/styles/withStyles';
 import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
 import proj4 from 'proj4';
@@ -1440,7 +1437,7 @@ var createLayer = function createLayer(_a) {
     status: status
   });
 };
-var initialState$5 = {
+var initialState$6 = {
   byId: {},
   allIds: [],
   availableBaseLayers: {
@@ -1448,8 +1445,8 @@ var initialState$5 = {
     allIds: []
   }
 };
-var slice$5 = createSlice({
-  initialState: initialState$5,
+var slice$6 = createSlice({
+  initialState: initialState$6,
   name: 'layerReducer',
   reducers: {
     addLayer: function addLayer(draft, action) {
@@ -1683,9 +1680,9 @@ var slice$5 = createSlice({
           layerDimensions = _action$payload11.layerDimensions;
       var layerStyleAction = layerActions.layerChangeStyle(layerStyle);
       var state = current(draft);
-      var intermediateState = layerStyle === null ? state : reducer$5(state, layerStyleAction);
+      var intermediateState = layerStyle === null ? state : reducer$6(state, layerStyleAction);
       var dimensionsAction = layerActions.layerSetDimensions(layerDimensions);
-      var newState = layerDimensions === null ? intermediateState : reducer$5(intermediateState, dimensionsAction);
+      var newState = layerDimensions === null ? intermediateState : reducer$6(intermediateState, dimensionsAction);
       return newState;
     }
   },
@@ -1730,7 +1727,7 @@ var slice$5 = createSlice({
         };
         /* Handle the Layer action with the same logic, using the same reducer */
 
-        return reducer$5(prevState, action);
+        return reducer$6(prevState, action);
       }, state);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -1750,8 +1747,8 @@ var slice$5 = createSlice({
     });
   }
 });
-var reducer$5 = slice$5.reducer;
-var layerActions = slice$5.actions;
+var reducer$6 = slice$6.reducer;
+var layerActions = slice$6.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1769,12 +1766,12 @@ var layerActions = slice$5.actions;
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var initialState$4 = {
+var initialState$5 = {
   byId: {},
   allIds: []
 };
-var slice$4 = createSlice({
-  initialState: initialState$4,
+var slice$5 = createSlice({
+  initialState: initialState$5,
   name: 'serviceReducer',
   reducers: {
     serviceSetLayers: function serviceSetLayers(draft, action) {
@@ -1801,13 +1798,13 @@ var slice$4 = createSlice({
       var serviceLayers = action.payload.serviceLayers;
       if (serviceLayers === null) return draft;
       var mapAction = serviceActions.serviceSetLayers(serviceLayers);
-      var newState = reducer$4(draft, mapAction);
+      var newState = reducer$5(draft, mapAction);
       return newState;
     });
   }
 });
-var reducer$4 = slice$4.reducer;
-var serviceActions = slice$4.actions;
+var reducer$5 = slice$5.reducer;
+var serviceActions = slice$5.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1992,13 +1989,13 @@ var createUIDialogElement = function createUIDialogElement(_ref) {
     source: source
   };
 };
-var initialState$3 = {
+var initialState$4 = {
   order: [],
   dialogs: {},
   activeWindowId: undefined
 };
-var slice$3 = createSlice({
-  initialState: initialState$3,
+var slice$4 = createSlice({
+  initialState: initialState$4,
   name: 'uiReducer',
   reducers: {
     registerDialog: function registerDialog(draft, action) {
@@ -2075,8 +2072,8 @@ var slice$3 = createSlice({
     }
   }
 });
-var reducer$3 = slice$3.reducer;
-var uiActions = slice$3.actions;
+var reducer$4 = slice$4.reducer;
+var uiActions = slice$4.actions;
 
 var addBaseLayer = layerActions.addBaseLayer,
     addLayer$1 = layerActions.addLayer,
@@ -2127,12 +2124,12 @@ var createLayersWithIds = function createLayersWithIds(state, layers) {
   });
 };
 
-var initialState$2 = {
+var initialState$3 = {
   byId: {},
   allIds: []
 };
-var slice$2 = createSlice({
-  initialState: initialState$2,
+var slice$3 = createSlice({
+  initialState: initialState$3,
   name: 'mapReducer',
   reducers: {
     registerMap: function registerMap(draft, action) {
@@ -2698,13 +2695,13 @@ var slice$2 = createSlice({
         };
         /* Handle the Layer action with the same logic, using the same reducer */
 
-        return reducer$2(prevState, action);
+        return reducer$3(prevState, action);
       }, draft);
     }).addCase(onUpdateLayerInformation, function (draft, action) {
       var mapDimensions = action.payload.mapDimensions;
       if (mapDimensions === null) return draft;
       var mapAction = mapActions$1.mapUpdateAllMapDimensions(mapDimensions);
-      return reducer$2(draft, mapAction);
+      return reducer$3(draft, mapAction);
     }).addCase(mapChangeDimension, function (draft, action) {
       var _action$payload36 = action.payload,
           mapId = _action$payload36.mapId,
@@ -2743,11 +2740,11 @@ var slice$2 = createSlice({
     });
   }
 });
-var mapActions$1 = Object.assign(Object.assign({}, slice$2.actions), {
+var mapActions$1 = Object.assign(Object.assign({}, slice$3.actions), {
   setMapPreset: setMapPreset,
   mapChangeDimension: mapChangeDimension
 });
-var reducer$2 = slice$2.reducer;
+var reducer$3 = slice$3.reducer;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3244,7 +3241,7 @@ var removeInPlace = function removeInPlace(inDraftArray, condition) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var initialState$1 = {
+var initialState$2 = {
   sources: {
     byId: {},
     allIds: []
@@ -3268,8 +3265,8 @@ var initialState$1 = {
     }
   }
 };
-var slice$1 = createSlice({
-  initialState: initialState$1,
+var slice$2 = createSlice({
+  initialState: initialState$2,
   name: 'synchronizationGroupsReducer',
   reducers: {
     syncGroupAddSource: function syncGroupAddSource(draft, action) {
@@ -3413,7 +3410,7 @@ var slice$1 = createSlice({
       });
     },
     syncGroupClear: function syncGroupClear() {
-      return initialState$1;
+      return initialState$2;
     },
     syncGroupSetViewState: function syncGroupSetViewState(draft, action) {
       var viewState = action.payload.viewState;
@@ -3485,7 +3482,7 @@ var setBboxOrTimeSync = function setBboxOrTimeSync(state, action) {
   });
 };
 
-var _slice$actions = slice$1.actions,
+var _slice$actions = slice$2.actions,
     syncGroupAddGroup = _slice$actions.syncGroupAddGroup,
     syncGroupAddSource = _slice$actions.syncGroupAddSource,
     syncGroupAddTarget = _slice$actions.syncGroupAddTarget;
@@ -3495,8 +3492,8 @@ var _slice$actions = slice$1.actions,
     syncGroupRemoveSource = _slice$actions.syncGroupRemoveSource,
     syncGroupRemoveTarget = _slice$actions.syncGroupRemoveTarget,
     syncGroupSetViewState = _slice$actions.syncGroupSetViewState;
-var actions = slice$1.actions,
-    reducer$1 = slice$1.reducer;
+var actions = slice$2.actions,
+    reducer$2 = slice$2.reducer;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3553,7 +3550,7 @@ var index = /*#__PURE__*/Object.freeze({
   actions: actions,
   constants: constants,
   types: types$1,
-  initialState: initialState$1
+  initialState: initialState$2
 });
 
 /* *
@@ -4359,7 +4356,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getMapPresetError: getMapPresetError
 });
 
-var initialState = {
+var initialState$1 = {
   filters: {
     searchFilter: '',
     activeServices: {
@@ -4372,8 +4369,8 @@ var initialState = {
     }
   }
 };
-var slice = createSlice({
-  initialState: initialState,
+var slice$1 = createSlice({
+  initialState: initialState$1,
   name: 'layerSelect',
   reducers: {
     setSearchFilter: function setSearchFilter(draft, action) {
@@ -4532,8 +4529,8 @@ var slice = createSlice({
     }
   }
 });
-var reducer = slice.reducer;
-var layerSelectActions = slice.actions;
+var reducer$1 = slice$1.reducer;
+var layerSelectActions = slice$1.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4665,6 +4662,80 @@ var getKeywordObjectById = function getKeywordObjectById(store, keywordId) {
   return (_d = (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.keywords) === null || _c === void 0 ? void 0 : _c.byId[keywordId]) !== null && _d !== void 0 ? _d : {};
 };
 
+/* *
+ * 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 snackbarAdapter = createEntityAdapter();
+var initialState = snackbarAdapter.getInitialState();
+var slice = createSlice({
+  initialState: initialState,
+  name: 'snackbar',
+  reducers: {
+    // To open the snackbar call this action
+    // eslint-disable-next-line no-unused-vars
+    openSnackbar: function openSnackbar(draft, action) {},
+    // triggerOpenSnackbarBySaga is triggered by the saga to open the snackbar after the current snackbars have all been closed
+    // DO NOT CALL THIS ACTION DIRECTLY!
+    triggerOpenSnackbarBySaga: function triggerOpenSnackbarBySaga(draft, action) {
+      var snackbarContent = action.payload.snackbarContent; // Ensure we have an id before proceeding
+
+      if (snackbarContent.id === undefined) {
+        return;
+      }
+
+      snackbarAdapter.setOne(draft, snackbarContent);
+    },
+    closeSnackbar: function closeSnackbar(draft) {
+      snackbarAdapter.removeAll(draft);
+    }
+  }
+});
+var reducer = slice.reducer;
+var snackbarActions = slice.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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var _snackbarAdapter$getS = snackbarAdapter.getSelectors(function (state) {
+  var _a;
+
+  return (_a = state === null || state === void 0 ? void 0 : state.snackbar) !== null && _a !== void 0 ? _a : {
+    entities: {},
+    ids: []
+  };
+}),
+    getCurrentSnackbarMessages = _snackbarAdapter$getS.selectAll;
+var getFirstSnackbarMessage = createSelector(getCurrentSnackbarMessages, function (currentMessages) {
+  return currentMessages.length > 0 ? currentMessages[0] : undefined;
+});
+
 var types = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
@@ -4996,15 +5067,15 @@ var getMapBaseLayerActionsTargets = function getMapBaseLayerActionsTargets(state
   });
 };
 
-var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
-    _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
+var _marked$5 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
+    _marked2$5 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
     _marked3$4 = /*#__PURE__*/regeneratorRuntime.mark(layerActionsSaga),
     _marked4$2 = /*#__PURE__*/regeneratorRuntime.mark(addLayerActionsSaga),
     _marked5$2 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerActionsSaga),
     _marked6$1 = /*#__PURE__*/regeneratorRuntime.mark(moveLayerActionsSaga),
     _marked7$1 = /*#__PURE__*/regeneratorRuntime.mark(setActiveLayerIdActionsSaga),
     _marked8$1 = /*#__PURE__*/regeneratorRuntime.mark(mapBaseLayerActionsSaga),
-    _marked9$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$4);
+    _marked9$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$5);
 var setBaseLayers = layerActions.setBaseLayers,
     addLayer = layerActions.addLayer,
     layerChangeDimension = layerActions.layerChangeDimension,
@@ -5052,7 +5123,7 @@ function setTimeSaga(_ref) {
           return _context.stop();
       }
     }
-  }, _marked$4);
+  }, _marked$5);
 }
 function setBBoxSaga(_ref2) {
   var payload, targets, groups;
@@ -5079,7 +5150,7 @@ function setBBoxSaga(_ref2) {
           return _context2.stop();
       }
     }
-  }, _marked2$4);
+  }, _marked2$5);
 }
 function layerActionsSaga(_ref3) {
   var payload, type, targets;
@@ -5294,7 +5365,7 @@ function mapBaseLayerActionsSaga(_ref8) {
     }
   }, _marked8$1);
 }
-function rootSaga$4() {
+function rootSaga$5() {
   return regeneratorRuntime.wrap(function rootSaga$(_context9) {
     while (1) {
       switch (_context9.prev = _context9.next) {
@@ -5453,11 +5524,11 @@ var sources = function sources(store) {
 
 var createSyncGroupViewStateSelector = createSelector(groups, sources, createSyncGroupViewState);
 
-var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
-    _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
+var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
+    _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
     _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
     _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(updateViewStateSaga),
-    _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
+    _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$4);
 function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
   var group;
   return regeneratorRuntime.wrap(function updateSourceValueWhenLinkingComponentToGroupSaga$(_context) {
@@ -5524,7 +5595,7 @@ function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdat
           return _context.stop();
       }
     }
-  }, _marked$3);
+  }, _marked$4);
 }
 function addGroupTargetSaga(_ref) {
   var payload, groupId, linked, targetToUpdate;
@@ -5548,7 +5619,7 @@ function addGroupTargetSaga(_ref) {
           return _context2.stop();
       }
     }
-  }, _marked2$3);
+  }, _marked2$4);
 }
 function linkGroupTargetSaga(_ref2) {
   var payload, groupId, linked, targetToUpdate;
@@ -5598,7 +5669,7 @@ function updateViewStateSaga() {
   }, _marked4$1);
 }
 
-function rootSaga$3() {
+function rootSaga$4() {
   return regeneratorRuntime.wrap(function rootSaga$(_context5) {
     while (1) {
       switch (_context5.prev = _context5.next) {
@@ -5665,14 +5736,14 @@ function rootSaga$3() {
 var synchronizationGroupConfig = {
   id: 'syncronizationGroupStore-module',
   reducerMap: {
-    syncronizationGroupStore: reducer$1
+    syncronizationGroupStore: reducer$2
   },
-  sagas: [rootSaga$4, rootSaga$3]
+  sagas: [rootSaga$5, rootSaga$4]
 };
 
-var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(registerMapUISaga),
-    _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(unregisterUIMapSaga),
-    _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
+var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(registerMapUISaga),
+    _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(unregisterUIMapSaga),
+    _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
 function registerMapUISaga() {
   var fields, source;
   return regeneratorRuntime.wrap(function registerMapUISaga$(_context) {
@@ -5708,7 +5779,7 @@ function registerMapUISaga() {
           return _context.stop();
       }
     }
-  }, _marked$2);
+  }, _marked$3);
 }
 function unregisterUIMapSaga() {
   var fields, activeUI;
@@ -5760,9 +5831,9 @@ function unregisterUIMapSaga() {
           return _context2.stop();
       }
     }
-  }, _marked2$2);
+  }, _marked2$3);
 }
-function rootSaga$2() {
+function rootSaga$3() {
   return regeneratorRuntime.wrap(function rootSaga$(_context3) {
     while (1) {
       switch (_context3.prev = _context3.next) {
@@ -5801,9 +5872,9 @@ function rootSaga$2() {
 var uiModuleConfig = {
   id: 'ui-module',
   reducerMap: {
-    ui: reducer$3
+    ui: reducer$4
   },
-  sagas: [rootSaga$2]
+  sagas: [rootSaga$3]
 };
 
 /* *
@@ -5971,100 +6042,51 @@ var PlayButtonConnect = connectRedux$6(function (_ref) {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
-var parseBoolean = function parseBoolean(value) {
-  return ['true', 'false', true, false].includes(value) && JSON.parse(value);
-};
-
-var isBaseLayer = function isBaseLayer(layer) {
-  return ['baseLayer'].includes(layer.layerType);
-};
-
-var isMapLayer = function isMapLayer(layer) {
-  return ['mapLayer'].includes(layer.layerType);
-};
-
-var isOverLayer = function isOverLayer(layer) {
-  return ['overLayer'].includes(layer.layerType);
-};
-
 var isValidService = function isValidService(service) {
   return Object.prototype.hasOwnProperty.call(service, 'url');
 };
 
-var parseLayerType = function parseLayerType(layer, defaultValue) {
-  if (isBaseLayer(layer)) {
-    return LayerType.baseLayer;
-  }
-
-  if (isMapLayer(layer)) {
-    return LayerType.mapLayer;
-  }
-
-  if (isOverLayer(layer)) {
-    return LayerType.overLayer;
-  }
-
-  return defaultValue;
+var parseBoolean = function parseBoolean(value) {
+  return typeof value === 'boolean' ? value : value === 'true';
 };
-
 var parseLayer = function parseLayer(layer) {
-  var lr = JSON.parse(JSON.stringify(layer)); // Cloning used here to achieve object immutability
-
-  if (!lr.id) {
-    lr.id = generateLayerId();
-  }
-
-  if (lr.layerType) {
-    lr.layerType = parseLayerType(lr, null);
-  }
-
-  if (lr.enabled) {
-    lr.enabled = parseBoolean(lr.enabled);
-  }
-
-  return lr;
+  return Object.assign(Object.assign(Object.assign({}, layer), !layer.id && {
+    id: generateLayerId()
+  }), layer.enabled && {
+    enabled: parseBoolean(layer.enabled)
+  });
 };
 
-var filterBaseLayers = function filterBaseLayers(presetArray) {
-  var hasLayers = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
-  var filteredBaseLayers = hasLayers ? presetArray.filter(function (preset) {
-    return isBaseLayer(preset);
-  }).map(function (filteredPresetLayer) {
-    return parseLayer(filteredPresetLayer);
-  }) : null;
-  var hasBaseLayers = filteredBaseLayers && filteredBaseLayers.length > 0;
-  var baseLayers = hasBaseLayers ? filteredBaseLayers : undefined;
-  return baseLayers;
-};
-var filterMapLayers = function filterMapLayers(presetArray) {
-  var hasLayers = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
-  var filteredMapLayers = hasLayers ? presetArray.filter(function (preset) {
-    return isMapLayer(preset);
-  }).map(function (filteredPresetLayer) {
-    return parseLayer(filteredPresetLayer);
-  }) : null;
-  var hasMapLayers = filteredMapLayers && filteredMapLayers.length > 0;
-  var mapLayers = hasMapLayers ? filteredMapLayers : undefined;
-  return mapLayers;
+var createEmtpyFilteredList = function createEmtpyFilteredList(existingList) {
+  return {
+    mapLayers: existingList,
+    baseLayers: existingList,
+    overLayers: existingList
+  };
 };
+
 var filterLayers = function filterLayers() {
   var layers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var layerParser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (layer) {
+    return layer;
+  };
   return layers.reduce(function (layers, layer) {
     var mapLayers = layers.mapLayers,
         baseLayers = layers.baseLayers,
         overLayers = layers.overLayers;
+    var parsedLayer = layerParser(layer);
 
     if (layer.layerType === LayerType.baseLayer) {
       return {
         mapLayers: mapLayers,
-        baseLayers: baseLayers.concat(layer),
+        baseLayers: baseLayers.concat(parsedLayer),
         overLayers: overLayers
       };
     }
 
     if (layer.layerType === LayerType.mapLayer) {
       return {
-        mapLayers: mapLayers.concat(layer),
+        mapLayers: mapLayers.concat(parsedLayer),
         baseLayers: baseLayers,
         overLayers: overLayers
       };
@@ -6074,16 +6096,12 @@ var filterLayers = function filterLayers() {
       return {
         mapLayers: mapLayers,
         baseLayers: baseLayers,
-        overLayers: overLayers.concat(layer)
+        overLayers: overLayers.concat(parsedLayer)
       };
     }
 
     return layers;
-  }, {
-    mapLayers: [],
-    baseLayers: [],
-    overLayers: []
-  });
+  }, createEmtpyFilteredList([]));
 };
 var filterServices = function filterServices(presetArray) {
   var hasServices = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
@@ -6094,21 +6112,28 @@ var filterServices = function filterServices(presetArray) {
   var services = hasValidServices ? validServices : undefined;
   return services;
 };
-var filterMapPresets = function filterMapPresets(presets) {
-  var preset = presets && presets.preset;
-  var filterredServices = preset && preset.services ? filterServices(preset.services) : undefined;
-  var baseServices = preset && preset.baseServices ? filterServices(preset.baseServices) : undefined;
-  var filteredBaseLayers = preset && preset.layers ? filterBaseLayers(preset.layers) : undefined;
-  var filteredMapLayers = preset && preset.layers ? filterMapLayers(preset.layers) : undefined;
+var filterMapPresets = function filterMapPresets(initialAppPreset) {
+  var preset = initialAppPreset && initialAppPreset.preset || {};
+  var layers = preset.layers,
+      services = preset.services,
+      baseServices = preset.baseServices;
+
+  var _ref = layers ? filterLayers(layers, parseLayer) : createEmtpyFilteredList(undefined),
+      baseLayers = _ref.baseLayers,
+      mapLayers = _ref.mapLayers;
+
+  var filterredServices = services ? filterServices(services) : undefined;
+  var filteredBaseServices = baseServices ? filterServices(baseServices) : undefined;
   var filteredPreset = {
     services: filterredServices,
-    baseServices: baseServices,
-    baseLayers: filteredBaseLayers,
-    mapLayers: filteredMapLayers
+    baseServices: filteredBaseServices,
+    baseLayers: baseLayers,
+    mapLayers: mapLayers
   };
   return filteredPreset;
-};
-var getInitialPresets = function getInitialPresets(mapPreset, defaultInitialPresets) {
+}; // loads the initialPresets.json
+
+var getInitialAppPresets = function getInitialAppPresets(mapPreset, defaultInitialPresets) {
   var filteredPresets = mapPreset ? filterMapPresets(mapPreset) : null;
   var initialPresets = filteredPresets || filterMapPresets(defaultInitialPresets);
   return initialPresets;
@@ -7035,43 +7060,7 @@ CanvasComponent.defaultProps = {
 };
 
 var defaultCanvasWidth = 150;
-var defaultCanvasHeight = 30; // TODO: remove fontFamily styles after theming is fully implemented
-
-var useStyles$s = makeStyles(function (theme) {
-  return {
-    legendCanvas: {
-      margin: '10px 0px 10px 0px'
-    },
-    noLegendTitle: {
-      fontSize: '12px',
-      fontFamily: 'Roboto, Helvetica, Arial',
-      color: 'red'
-    },
-    legendComponent: {
-      padding: 10,
-      border: '1px solid grey',
-      display: 'inline-block',
-      backgroundColor: '#FFF',
-      overflow: 'hidden',
-      marginBottom: 4
-    },
-    legendTitle: {
-      fontFamily: 'Roboto, Helvetica, Arial',
-      fontSize: '10px',
-      minWidth: defaultCanvasWidth,
-      wordWrap: 'break-word',
-      color: theme.palette.common.black
-    },
-    legendInfo: {
-      fontFamily: 'Roboto, Helvetica, Arial',
-      fontSize: 10,
-      color: theme.palette.common.black,
-      overflowX: 'hidden',
-      minWidth: defaultCanvasWidth,
-      wordWrap: 'break-word'
-    }
-  };
-});
+var defaultCanvasHeight = 30;
 /**
  * Renders a legendgraphic image based on a WMImage.
  *
@@ -7105,9 +7094,8 @@ var renderLegendGraphic = function renderLegendGraphic(wmImage, ctx, width, heig
 
 var Legend = function Legend(_ref) {
   var layer = _ref.layer;
-  var classes = useStyles$s();
-  /* Variable to remember the previous image */
 
+  /* Variable to remember the previous image */
   var previousLegendImage = useRef(null);
   /* Function to force rerender of this component when legend image loads */
 
@@ -7154,23 +7142,36 @@ var Legend = function Legend(_ref) {
   var wmLayer = getWMLayerById(layer.id);
   return /*#__PURE__*/React__default.createElement(Paper, {
     "data-testid": "legend",
-    className: classes.legendComponent
-  }, /*#__PURE__*/React__default.createElement("div", {
+    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, {
-    className: classes.legendTitle,
+    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("div", {
-    className: classes.legendCanvas,
-    style: {
-      height: canvasContainerHeight,
-      width: canvasContainerWidth
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      margin: '10px 0px 10px 0px',
+      height: "".concat(canvasContainerHeight, "px"),
+      width: "".concat(canvasContainerWidth, "px")
     }
   }, /*#__PURE__*/React__default.createElement(CanvasComponent, {
     redrawInterval: 500,
@@ -7227,16 +7228,21 @@ var Legend = function Legend(_ref) {
         renderLegendGraphic(previousLegendImage.current, ctx, imageWidth, imageHeight);
       }
     }
-  }))), /*#__PURE__*/React__default.createElement("div", {
+  }))), /*#__PURE__*/React__default.createElement(Box, {
     "data-testid": "legend-info",
-    className: classes.legendInfo,
-    style: {
-      maxWidth: canvasContainerWidth
+    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("div", {
+    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("div", {
+    }, dim.name === 'time' ? "".concat(dim.currentValue) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
       style: {
         fontWeight: 500
       }
@@ -7257,23 +7263,9 @@ var Legend = function Legend(_ref) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$r = makeStyles(function () {
-  return {
-    legendList: {
-      display: 'flex',
-      flexDirection: 'column',
-      '&>div:last-child': {
-        marginBottom: 0
-      }
-    },
-    legendContainer: {
-      padding: 4
-    }
-  };
-});
 
 var LegendDialog = function LegendDialog(_ref) {
   var layers = _ref.layers,
@@ -7288,7 +7280,6 @@ var LegendDialog = function LegendDialog(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'app' : _ref$source;
-  var classes = useStyles$r();
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     startPosition: {
       right: 20,
@@ -7305,11 +7296,19 @@ var LegendDialog = function LegendDialog(_ref) {
     onMouseDown: onMouseDown,
     order: order,
     source: source
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.legendContainer
-  }, layers && layers.length > 0 ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      padding: 0.5
+    }
+  }, layers && layers.length > 0 ? /*#__PURE__*/React.createElement(Box, {
     "data-testid": "LegendList",
-    className: classes.legendList
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      '&>div:last-child': {
+        marginBottom: 0
+      }
+    }
   }, layers.map(function (layer) {
     return /*#__PURE__*/React.createElement(Legend, {
       key: layer.id,
@@ -7436,8 +7435,8 @@ var LegendConnect = function LegendConnect(_a) {
   }, props));
 };
 
-var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
-    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
+var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
+    _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
     _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerSaga),
     _marked4 = /*#__PURE__*/regeneratorRuntime.mark(updateAnimation),
     _marked5 = /*#__PURE__*/regeneratorRuntime.mark(setLayerDimensionsSaga),
@@ -7445,7 +7444,7 @@ var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
     _marked7 = /*#__PURE__*/regeneratorRuntime.mark(handleBaseLayersSaga),
     _marked8 = /*#__PURE__*/regeneratorRuntime.mark(setMapPresetSaga),
     _marked9 = /*#__PURE__*/regeneratorRuntime.mark(checkMapPresetForChangesSaga),
-    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
+    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
 
 var generateTimeList = function generateTimeList(start, end, interval) {
   var timeList = [];
@@ -7495,7 +7494,7 @@ function startAnimationSaga(_ref) {
           return _context.stop();
       }
     }
-  }, _marked$1);
+  }, _marked$2);
 }
 function stopAnimationSaga(_ref2) {
   var payload, mapId;
@@ -7513,7 +7512,7 @@ function stopAnimationSaga(_ref2) {
           return _context2.stop();
       }
     }
-  }, _marked2$1);
+  }, _marked2$2);
 }
 function deleteLayerSaga(_ref3) {
   var payload, mapId, layers;
@@ -8121,7 +8120,7 @@ function checkMapPresetForChangesSaga(action) {
     }
   }, _marked9);
 }
-function rootSaga$1() {
+function rootSaga$2() {
   return regeneratorRuntime.wrap(function rootSaga$(_context10) {
     while (1) {
       switch (_context10.prev = _context10.next) {
@@ -8182,11 +8181,11 @@ function rootSaga$1() {
 var moduleConfig = {
   id: 'webmap-module',
   reducerMap: {
-    webmap: reducer$2,
-    services: reducer$4,
-    layers: reducer$5
+    webmap: reducer$3,
+    services: reducer$5,
+    layers: reducer$6
   },
-  sagas: [rootSaga$1]
+  sagas: [rootSaga$2]
 };
 
 /* *
@@ -8206,13 +8205,13 @@ var moduleConfig = {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
-  return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byId, preset) {
-    return Object.assign(Object.assign({}, byId), _defineProperty({}, preset.id, preset));
+  return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byUrl, preset) {
+    return Object.assign(Object.assign({}, byUrl), _defineProperty({}, preset.url, preset));
   }, {})), userAddedServices));
 };
-var isService = function isService(param) {
+var isNoIdService = function isNoIdService(param) {
   var serviceParam = param;
-  return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.id) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url), serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.isUserAddedService);
+  return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url));
 };
 
 var getUserAddedServices = function getUserAddedServices() {
@@ -8221,19 +8220,14 @@ var getUserAddedServices = function getUserAddedServices() {
     var parsedData = JSON.parse(storedString);
 
     if (parsedData && _typeof(parsedData) === 'object') {
-      Object.values(parsedData).forEach(function (value) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (value.hasOwnProperty('url') && value.hasOwnProperty('id')) {
-          var service = value;
-          service.isUserAddedService = true;
-        }
-      });
       return Object.entries(parsedData).reduce(function (userServices, _ref) {
         var _ref2 = _slicedToArray(_ref, 2),
             serviceUrl = _ref2[0],
             service = _ref2[1];
 
-        return Object.assign(Object.assign({}, userServices), isService(service) ? _defineProperty({}, serviceUrl, service) : {});
+        return Object.assign(Object.assign({}, userServices), isNoIdService(service) ? _defineProperty({}, serviceUrl, Object.assign(Object.assign({}, service), {
+          isUserAddedService: true
+        })) : {});
       }, {});
     }
   } catch (e) {
@@ -8250,9 +8244,9 @@ var setUserAddedServices = function setUserAddedServices(services) {
   }
 };
 
-var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
-    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectServiceRemovedSaga),
-    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
+var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
+    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectServiceRemovedSaga),
+    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
 function newServiceAddedSaga(capturedAction) {
   var addedService, id, serviceUrl, name, isUserAddedService, keywords;
   return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
@@ -8278,7 +8272,7 @@ function newServiceAddedSaga(capturedAction) {
           return _context.stop();
       }
     }
-  }, _marked);
+  }, _marked$1);
 }
 function layerSelectServiceRemovedSaga(capturedAction) {
   var removedService, serviceId;
@@ -8298,7 +8292,7 @@ function layerSelectServiceRemovedSaga(capturedAction) {
           return _context2.stop();
       }
     }
-  }, _marked2);
+  }, _marked2$1);
 }
 function addServiceToLocalStorageSaga(_ref) {
   var payload = _ref.payload;
@@ -8308,7 +8302,6 @@ function addServiceToLocalStorageSaga(_ref) {
   if (!isUserAddedService) return;
   var localStorageServices = getUserAddedServices();
   setUserAddedServices(Object.assign(Object.assign({}, localStorageServices), _defineProperty({}, serviceUrl, {
-    id: serviceUrl,
     name: name,
     url: serviceUrl
   })));
@@ -8322,7 +8315,7 @@ function removeServiceFromLocalStorageSaga(_ref2) {
   delete updatedServices[serviceUrl];
   setUserAddedServices(updatedServices);
 }
-function rootSaga() {
+function rootSaga$1() {
   return regeneratorRuntime.wrap(function rootSaga$(_context3) {
     while (1) {
       switch (_context3.prev = _context3.next) {
@@ -8369,28 +8362,129 @@ function rootSaga() {
 var layerSelectConfig = {
   id: 'layerSelect-module',
   reducerMap: {
-    layerSelect: reducer
+    layerSelect: reducer$1
   },
-  sagas: [rootSaga]
+  sagas: [rootSaga$1]
 };
 
-/* *
- * 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 coreModuleConfig = [moduleConfig, synchronizationGroupConfig, uiModuleConfig, layerSelectConfig];
+var _marked = /*#__PURE__*/regeneratorRuntime.mark(openSnackbarSaga),
+    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
+var hideTime = 4000;
+function openSnackbarSaga(capturedAction) {
+  var snackbarMessage, currentSnackbarMessages, id, currentSnackbarMessagesOpen;
+  return regeneratorRuntime.wrap(function openSnackbarSaga$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          snackbarMessage = capturedAction.payload.message;
+          _context.next = 3;
+          return select(getCurrentSnackbarMessages);
+
+        case 3:
+          currentSnackbarMessages = _context.sent;
+
+          if (!currentSnackbarMessages.length) {
+            _context.next = 7;
+            break;
+          }
+
+          _context.next = 7;
+          return put(snackbarActions.closeSnackbar());
+
+        case 7:
+          // Generate a unique id
+          id = "snackbar".concat(Date.now().toString());
+          _context.next = 10;
+          return put(snackbarActions.triggerOpenSnackbarBySaga({
+            snackbarContent: {
+              message: snackbarMessage,
+              id: id
+            }
+          }));
+
+        case 10:
+          _context.next = 12;
+          return delay(hideTime);
+
+        case 12:
+          _context.next = 14;
+          return select(getCurrentSnackbarMessages);
+
+        case 14:
+          currentSnackbarMessagesOpen = _context.sent;
+
+          if (!currentSnackbarMessagesOpen.length) {
+            _context.next = 18;
+            break;
+          }
+
+          _context.next = 18;
+          return put(snackbarActions.closeSnackbar());
+
+        case 18:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _marked);
+}
+function rootSaga() {
+  return regeneratorRuntime.wrap(function rootSaga$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return takeLatest(snackbarActions.openSnackbar.type, openSnackbarSaga);
+
+        case 2:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _marked2);
+}
+
+/* *
+ * 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 snackbarModuleConfig = {
+  id: 'snackbar-module',
+  reducerMap: {
+    snackbar: reducer
+  },
+  sagas: [rootSaga]
+};
+
+/* *
+ * 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 coreModuleConfig = [moduleConfig, synchronizationGroupConfig, uiModuleConfig, layerSelectConfig, snackbarModuleConfig];
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -8918,23 +9012,6 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$q = makeStyles({
-  buttonDiv: {
-    position: 'relative'
-  },
-  loadingButton: {
-    position: 'absolute',
-    top: 7,
-    left: 7,
-    zIndex: 1
-  },
-  button: {
-    width: '24px',
-    height: '24px',
-    margin: '6px 0px 0px 10px'
-  }
-});
-
 var validateServiceUrl = function validateServiceUrl(url) {
   if (url === '' || url === null || typeof url === 'undefined') return false;
   var matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
@@ -8951,7 +9028,6 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
       handleClose = _ref.handleClose,
       _ref$layerType = _ref.layerType,
       layerType = _ref$layerType === void 0 ? LayerType.mapLayer : _ref$layerType;
-  var classes = useStyles$q();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9073,7 +9149,9 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 2,
-    className: classes.buttonDiv
+    sx: {
+      position: 'relative'
+    }
   }, /*#__PURE__*/React.createElement(IconButton, {
     "data-testid": "add-service",
     onClick: handleAddServiceURL,
@@ -9081,7 +9159,12 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
     size: "large"
   }, /*#__PURE__*/React.createElement(Add, null)), loading && /*#__PURE__*/React.createElement(CircularProgress, {
     size: 35,
-    className: classes.loadingButton
+    sx: {
+      position: 'absolute',
+      top: '7px',
+      left: '7px',
+      zIndex: 1
+    }
   })))), /*#__PURE__*/React.createElement(Box, {
     m: 2
   }, /*#__PURE__*/React.createElement(Grid, {
@@ -9109,7 +9192,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var styles$2 = {
+var styles$4 = {
   buttonDiv: {
     position: 'relative'
   },
@@ -9172,7 +9255,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
     onBlur: onBlurTooltip
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: handleClose,
-    sx: styles$2.button,
+    sx: styles$4.button,
     disableRipple: true,
     "data-testid": "addLayersButton",
     ref: ref,
@@ -9199,12 +9282,12 @@ var AddLayersButton = function AddLayersButton(_ref) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var iconButtonSize = 30;
 var totalButtons = 5;
-var LayerManagerColumnsLarge = makeStyles({
+var LayerManagerColumnsLarge = {
   column1: {
     width: iconButtonSize * 3,
     display: 'flex'
@@ -9228,8 +9311,8 @@ var LayerManagerColumnsLarge = makeStyles({
   columns35: {
     width: "calc((100% - ".concat(iconButtonSize * totalButtons, "px) * 0.75)")
   }
-});
-var LayerManagerColumnsSmall = makeStyles({
+};
+var LayerManagerColumnsSmall = {
   column1: {
     width: iconButtonSize * 3
   },
@@ -9252,7 +9335,7 @@ var LayerManagerColumnsSmall = makeStyles({
   columns35: {
     display: 'none'
   }
-});
+};
 var LayerManagerWidth;
 
 (function (LayerManagerWidth) {
@@ -9332,10 +9415,10 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$p = makeStyles({
+var styles$3 = {
   row: {
     height: '32px'
   },
@@ -9346,7 +9429,7 @@ var useStyles$p = makeStyles({
     fontFamily: 'Roboto',
     opacity: 0.67
   }
-});
+};
 
 var DescriptionRow = function DescriptionRow(_ref) {
   var mapId = _ref.mapId,
@@ -9359,16 +9442,15 @@ var DescriptionRow = function DescriptionRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
-  var classes = useStyles$p();
-  var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
+  var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall : LayerManagerColumnsLarge;
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
     "data-testid": "descriptionRow",
-    className: classes.row
+    sx: styles$3.row
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    className: columnSizes.column1
+    sx: columnSizes.column1
   }, /*#__PURE__*/React.createElement(AddLayersButton, {
     preloadedServices: preloadedServices,
     tooltip: tooltip,
@@ -9383,23 +9465,23 @@ var DescriptionRow = function DescriptionRow(_ref) {
   }), layerSelect && /*#__PURE__*/React.createElement(LayerSelectButtonConnect, {
     mapId: mapId
   })), /*#__PURE__*/React.createElement(Grid, {
-    className: columnSizes.column2
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.text
+    sx: columnSizes.column2
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles$3.text
   }, "Layer")), /*#__PURE__*/React.createElement(Grid, {
-    className: columnSizes.column3
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.text
+    sx: columnSizes.column3
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles$3.text
   }, "Style")), /*#__PURE__*/React.createElement(Grid, {
-    className: columnSizes.column4
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.text
+    sx: columnSizes.column4
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles$3.text
   }, "Opacity")), /*#__PURE__*/React.createElement(Grid, {
-    className: columnSizes.column5
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.text
+    sx: columnSizes.column5
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles$3.text
   }, "Dimensions")), /*#__PURE__*/React.createElement(Grid, {
-    className: columnSizes.column6
+    sx: columnSizes.column6
   }));
 };
 
@@ -9551,22 +9633,6 @@ var DimensionSelect = function DimensionSelect(_ref) {
   }))));
 };
 
-var useStyles$o = makeStyles(function (theme) {
-  return createStyles({
-    dropdownEmpty: {
-      paddingLeft: 8,
-      height: 32,
-      display: 'inline-flex',
-      alignItems: 'center'
-    },
-    emptyText: {
-      fontSize: theme.palette.geowebColors.layerManager.tableRowDefaultText.fontSize,
-      color: theme.palette.geowebColors.layerManager.tableRowDefaultText.rgba,
-      fontWeight: 500
-    }
-  });
-});
-
 var getRenderLayersValues = function getRenderLayersValues(layerName, layers) {
   var serviceLayer = layers.find(function (l) {
     return l.name === layerName;
@@ -9604,14 +9670,21 @@ var RenderLayers = function RenderLayers(_ref) {
 
   var _a;
 
-  var classes = useStyles$o();
-
   if (!layers || !layers.length) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classes.dropdownEmpty
+    return /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        paddingLeft: 1,
+        height: '32px',
+        display: 'inline-flex',
+        alignItems: 'center'
+      }
     }, /*#__PURE__*/React.createElement(Typography, {
       variant: "body1",
-      className: classes.emptyText
+      sx: {
+        fontSize: 'geowebColors.layerManager.tableRowDefaultText.fontSize',
+        color: 'geowebColors.layerManager.tableRowDefaultText.rgba',
+        fontWeight: 500
+      }
     }, "No service available"));
   }
 
@@ -9670,34 +9743,6 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var useStyles$n = makeStyles(function (theme) {
-  return {
-    opacityDiv: {
-      height: 'calc(100% - 5px)',
-      width: '100%',
-      position: 'relative',
-      top: '2px'
-    },
-    opacityButton: {
-      height: '100%',
-      width: '100%',
-      borderRadius: '0',
-      minWidth: '49px'
-    },
-    sliderBackground: {
-      padding: '0 0 60px 0',
-      marginLeft: '60px',
-      backgroundColor: theme.palette.geowebColors.background.surface,
-      width: '82px',
-      height: '248px',
-      position: 'fixed',
-      top: '-5px',
-      boxSizing: 'initial',
-      zIndex: 2,
-      boxShadow: theme.shadows[8]
-    }
-  };
-});
 var marks$1 = [{
   value: 0,
   label: '0 %'
@@ -9730,7 +9775,6 @@ var OpacitySelect = function OpacitySelect(_ref) {
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$n();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9775,10 +9819,15 @@ var OpacitySelect = function OpacitySelect(_ref) {
     setTooltipOpen(false);
   }, []);
   var currentOpacityText = "".concat(Math.round(currentOpacity * 100), "  %");
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.opacityDiv,
+  return /*#__PURE__*/React.createElement(Box, {
     onWheel: onWheel,
-    "data-testid": "scrollOpacity"
+    "data-testid": "scrollOpacity",
+    sx: {
+      height: 'calc(100% - 5px)',
+      width: '100%',
+      position: 'relative',
+      top: '2px'
+    }
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: "Opacity: ".concat(currentOpacityText),
     sx: tooltipContainerStyles(isEnabled),
@@ -9786,16 +9835,32 @@ var OpacitySelect = function OpacitySelect(_ref) {
     open: tooltipOpen
   }, /*#__PURE__*/React.createElement(Button, {
     tabIndex: 0,
-    className: classes.opacityButton,
     onClick: onClickButton,
     "data-testid": "selectOpacity",
     disableRipple: true,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onFocus: onFocus,
-    onBlur: onBlur
-  }, currentOpacityText)), open ? /*#__PURE__*/React.createElement("div", {
-    className: classes.sliderBackground
+    onBlur: onBlur,
+    style: {
+      height: '100%',
+      width: '100%',
+      borderRadius: '0',
+      minWidth: '49px'
+    }
+  }, currentOpacityText)), open ? /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      padding: '0 0 60px 0',
+      marginLeft: '60px',
+      backgroundColor: 'geowebColors.background.surface',
+      width: '82px',
+      height: '248px',
+      position: 'fixed',
+      top: '-5px',
+      boxSizing: 'initial',
+      zIndex: 2,
+      boxShadow: 8
+    }
   }, /*#__PURE__*/React.createElement(Box, {
     sx: sliderHeaderStyle
   }, "Opacity"), /*#__PURE__*/React.createElement(CustomSlider, {
@@ -9946,44 +10011,37 @@ var RenderStyles = function RenderStyles(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$m = makeStyles(function (theme) {
-  return createStyles({
-    svgIcon: {
-      fill: function fill(_ref) {
-        var isActive = _ref.isActive,
-            isEnabled = _ref.isEnabled;
-
-        if (isActive) {
-          return theme.palette.common.white;
-        }
 
-        if (isEnabled) {
-          return theme.palette.geowebColors.buttons.flat["default"].color;
-        }
+var makeIconStyle = function makeIconStyle(isActive, isEnabled) {
+  return {
+    color: function color() {
+      if (isActive) {
+        return 'common.white';
+      }
 
-        return theme.palette.geowebColors.buttons.flat.disabled.color;
+      if (isEnabled) {
+        return 'geowebColors.buttons.flat.default.color';
       }
+
+      return 'geowebColors.buttons.flat.disabled.color';
     }
-  });
-});
+  };
+};
 
-var ActivateLayer = function ActivateLayer(_ref2) {
-  var _ref2$tooltipTitle = _ref2.tooltipTitle,
-      tooltipTitle = _ref2$tooltipTitle === void 0 ? 'Leading layer' : _ref2$tooltipTitle,
-      onClickActivate = _ref2.onClickActivate,
-      _ref2$isActive = _ref2.isActive,
-      isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
-      _ref2$isEnabled = _ref2.isEnabled,
-      isEnabled = _ref2$isEnabled === void 0 ? true : _ref2$isEnabled;
-  var classes = useStyles$m({
-    isActive: isActive,
-    isEnabled: isEnabled
-  });
+var ActivateLayer = function ActivateLayer(_ref) {
+  var _ref$tooltipTitle = _ref.tooltipTitle,
+      tooltipTitle = _ref$tooltipTitle === void 0 ? 'Leading layer' : _ref$tooltipTitle,
+      onClickActivate = _ref.onClickActivate,
+      _ref$isActive = _ref.isActive,
+      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+      _ref$isEnabled = _ref.isEnabled,
+      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+  var iconStyle = makeIconStyle(isActive, isEnabled);
   return /*#__PURE__*/React.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickActivate,
     icon: /*#__PURE__*/React.createElement(Flag, {
-      className: classes.svgIcon
+      sx: iconStyle
     }),
     testId: "activateLayerButton",
     isActive: isActive
@@ -10003,31 +10061,9 @@ var ActivateLayer = function ActivateLayer(_ref2) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$l = makeStyles(function (theme) {
-  return createStyles({
-    row: {
-      background: function background(isEnabled) {
-        return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultCardContainer.fill : theme.palette.geowebColors.layerManager.tableRowDisabledCardContainer.fill;
-      },
-      border: function border(isEnabled) {
-        return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultCardContainer.border : theme.palette.geowebColors.layerManager.tableRowDisabledCardContainer.border;
-      },
-      borderRadius: theme.shape.borderRadius,
-      marginBottom: 4,
-      height: 34,
-      '&.sortable-drag': {
-        boxShadow: theme.shadows[4] // elevation_06
-
-      },
-      '&.sortable-ghost': {
-        opacity: 0.5
-      }
-    }
-  });
-});
 
 var LayerRow = function LayerRow(_ref) {
   var layerId = _ref.layerId,
@@ -10059,21 +10095,33 @@ var LayerRow = function LayerRow(_ref) {
       layerActiveLayout = _ref.layerActiveLayout,
       layerManagerWidth = _ref.layerManagerWidth,
       dragHandle = _ref.dragHandle;
-  var classes = useStyles$l(isEnabled);
-  var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
+  var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall : LayerManagerColumnsLarge;
 
   var onClickRow = function onClickRow() {
     return onLayerRowClick(layerId);
   };
 
   return /*#__PURE__*/React__default.createElement(Grid, {
-    className: classes.row,
     item: true,
     container: true,
-    "data-testid": "layerRow-".concat(layerId)
+    "data-testid": "layerRow-".concat(layerId),
+    sx: {
+      backgroundColor: isEnabled ? 'geowebColors.layerManager.tableRowDefaultCardContainer.fill' : 'geowebColors.layerManager.tableRowDisabledCardContainer.fill',
+      border: 1,
+      borderColor: isEnabled ? 'geowebColors.layerManager.tableRowDefaultCardContainer.borderColor' : 'geowebColors.layerManager.tableRowDisabledCardContainer.borderColor',
+      borderRadius: 1,
+      marginBottom: 0.5,
+      height: '34px',
+      '&.sortable-drag': {
+        boxShadow: 4
+      },
+      '&.sortable-ghost': {
+        opacity: 0.5
+      }
+    }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: columnSizes.column1
+    sx: columnSizes.column1
   }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default.createElement(EnableButton, {
     isEnabled: layer.enabled,
     title: layer.name,
@@ -10087,7 +10135,7 @@ var LayerRow = function LayerRow(_ref) {
     onClickActivate: onClickRow
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.column2)
+    sx: columnSizes.column2
   }, layerServicesLayout || /*#__PURE__*/React__default.createElement(RenderLayers, {
     layerName: layer.name,
     layers: services && layer.service && services[layer.service] && services[layer.service].layers || [],
@@ -10099,13 +10147,13 @@ var LayerRow = function LayerRow(_ref) {
     }
   })), isLayerMissing ? /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.columns35)
+    sx: columnSizes.columns35
   }, /*#__PURE__*/React__default.createElement(AlertBanner, {
     title: "This layer could not be loaded: does not exist on the server.",
     isCompact: true
   })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.column3)
+    sx: columnSizes.column3
   }, layerStylesLayout || /*#__PURE__*/React__default.createElement(RenderStyles, {
     layerStyles: layer.styles,
     currentLayerStyle: layer.style,
@@ -10117,7 +10165,7 @@ var LayerRow = function LayerRow(_ref) {
     }
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.column4)
+    sx: columnSizes.column4
   }, layerOpacityLayout || /*#__PURE__*/React__default.createElement(OpacitySelect, {
     currentOpacity: layer.opacity,
     onLayerChangeOpacity: function onLayerChangeOpacity(_opacity) {
@@ -10128,7 +10176,7 @@ var LayerRow = function LayerRow(_ref) {
     }
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.column5)
+    sx: columnSizes.column5
   }, layerDimensionLayout || /*#__PURE__*/React__default.createElement(DimensionSelect, {
     layerId: layerId,
     layerDimensions: filterNonTimeDimensions(layer.dimensions),
@@ -10146,7 +10194,7 @@ var LayerRow = function LayerRow(_ref) {
     }
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: columnSizes.column6
+    sx: columnSizes.column6
   }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(ManagerDeleteButton, {
     tooltipTitle: "Delete",
     onClickDelete: function onClickDelete() {
@@ -10701,22 +10749,6 @@ var DragHandle = function DragHandle(_ref) {
   });
 };
 
-var useStyles$k = makeStyles(function () {
-  return {
-    layerRows: {
-      width: '100%',
-      maxHeight: 'calc(100% - 10px)',
-      overflow: 'auto'
-    },
-    sortableRow: {
-      width: '100%',
-      cursor: function cursor(isSorting) {
-        return isSorting ? 'grabbing' : 'inherit';
-      }
-    }
-  };
-});
-
 var LayerContainerRow = function LayerContainerRow(_ref) {
   var mapId = _ref.mapId,
       layerManagerWidth = _ref.layerManagerWidth;
@@ -10774,7 +10806,6 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
 
   var isSorting = activeDragIndex !== null;
   var isDragDisabled = layerIds.length === 1;
-  var classes = useStyles$k(isSorting);
 
   var keyPressedTrue = function keyPressedTrue(event) {
     if (event.ctrlKey || event.metaKey) {
@@ -10814,8 +10845,12 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
-    className: classes.layerRows,
-    "data-testid": "layerContainerRow"
+    "data-testid": "layerContainerRow",
+    sx: {
+      width: '100%',
+      maxHeight: 'calc(100% - 10px)',
+      overflow: 'auto'
+    }
   }, /*#__PURE__*/React.createElement(ReactSortable, {
     tag: "div",
     list: layerIds.map(function (layerId) {
@@ -10830,9 +10865,12 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
     direction: "vertical",
     // hover props
     forceFallback: true,
-    className: classes.sortableRow,
     onStart: onStart,
-    onEnd: onEnd
+    onEnd: onEnd,
+    style: {
+      width: '100%',
+      cursor: isSorting ? 'grabbing' : 'inherit'
+    }
   }, layerIds.map(function (layerId, index) {
     return /*#__PURE__*/React.createElement(LayerRowConnect, {
       mapId: mapId,
@@ -11034,22 +11072,9 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$j = makeStyles({
-  layerRow: {
-    width: '100%',
-    height: '36px'
-  },
-  icon: {
-    width: '24px',
-    height: '24px'
-  },
-  addBaseLayers: {
-    marginTop: '-2px'
-  }
-});
 
 var BaseLayerRow = function BaseLayerRow(_ref) {
   var mapId = _ref.mapId,
@@ -11060,16 +11085,20 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  var classes = useStyles$j();
-  var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
+  var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall : LayerManagerColumnsLarge;
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
-    className: classes.layerRow,
-    "data-testid": "baseLayerRow"
+    "data-testid": "baseLayerRow",
+    sx: {
+      width: '100%',
+      height: '36px'
+    }
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.column1, " ").concat(classes.addBaseLayers)
+    sx: Object.assign(Object.assign({}, columnSizes.column1), {
+      marginTop: '-2px'
+    })
   }, /*#__PURE__*/React.createElement(AddLayersButton, {
     preloadedServices: preloadedServices,
     tooltip: tooltip,
@@ -11082,14 +11111,14 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
     }
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    className: "".concat(columnSizes.column2)
+    sx: columnSizes.column2
   }, /*#__PURE__*/React.createElement(BaseLayersConnect, {
     mapId: mapId,
     preloadedAvailableBaseLayers: preloadedAvailableBaseLayers
   })));
 };
 
-var styles$1 = {
+var styles$2 = {
   layerRowContainer: {
     position: 'relative',
     width: '100%',
@@ -11162,7 +11191,7 @@ var LayerManager = function LayerManager(_ref) {
     source: source,
     leftComponent: leftComponent
   }, /*#__PURE__*/React.createElement(Box, {
-    sx: styles$1.layerManagerContainer
+    sx: styles$2.layerManagerContainer
   }, isLoading && /*#__PURE__*/React.createElement(LinearProgress, {
     "data-testid": "loading-bar",
     color: "secondary",
@@ -11180,7 +11209,7 @@ var LayerManager = function LayerManager(_ref) {
   }), /*#__PURE__*/React.createElement(Grid, {
     container: true,
     "data-testid": "layerManagerRowContainer",
-    sx: styles$1.layerRowContainer
+    sx: styles$2.layerRowContainer
   }, /*#__PURE__*/React.createElement(DescriptionRow, {
     mapId: mapId,
     tooltip: showAddLayersTooltip ? 'Add layers' : '',
@@ -12256,73 +12285,9 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
   });
 };
 
-var useStyles$i = makeStyles(function (theme) {
-  return createStyles({
-    serviceChips: {
-      width: '100%',
-      display: 'inline-flex',
-      alignItems: 'center',
-      overflowX: 'visible',
-      "float": 'left',
-      paddingLeft: '40px',
-      marginRight: function marginRight(_ref) {
-        var margin = _ref.margin;
-        return margin;
-      },
-      marginLeft: function marginLeft(_ref2) {
-        var margin = _ref2.margin;
-        return -margin;
-      },
-      maxWidth: function maxWidth(_ref3) {
-        var maxWidthValue = _ref3.maxWidthValue;
-        return maxWidthValue;
-      },
-      fontSize: '0.875rem'
-    },
-    scrollArrowLeft: {
-      width: '100px',
-      marginBottom: '-12px',
-      height: '34px',
-      backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), ".concat(theme.palette.geowebColors.background.surfaceApp, " 51%)"),
-      cursor: 'pointer',
-      marginRight: '-120px',
-      paddingTop: '6px',
-      paddingBottom: '6px',
-      "float": 'left',
-      zIndex: 1,
-      position: 'relative',
-      color: theme.palette.geowebColors.buttons.tertiary["default"].color,
-      '&:hover': {
-        color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
-      }
-    },
-    serviceList: {
-      height: '32px',
-      marginTop: '8px',
-      width: '100%',
-      overflow: 'hidden'
-    },
-    scrollArrowRight: {
-      width: '100px',
-      marginBottom: '-12px',
-      height: '34px',
-      paddingTop: '6px',
-      paddingBottom: '6px',
-      backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), ".concat(theme.palette.geowebColors.background.surfaceApp, " 51%)"),
-      right: '0px',
-      position: 'fixed',
-      cursor: 'pointer',
-      color: theme.palette.geowebColors.buttons.tertiary["default"].color,
-      '&:hover': {
-        color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
-      }
-    }
-  });
-});
-
-var ServiceList = function ServiceList(_ref4) {
-  var layerSelectWidth = _ref4.layerSelectWidth,
-      activeServices = _ref4.activeServices;
+var ServiceList = function ServiceList(_ref) {
+  var layerSelectWidth = _ref.layerSelectWidth,
+      activeServices = _ref.activeServices;
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -12342,10 +12307,6 @@ var ServiceList = function ServiceList(_ref4) {
   var ref = React.useRef(null);
   var scrollSpeed = 5;
   var maxWidthValue = ref && ref.current && ref.current.scrollWidth && ref.current.scrollWidth >= layerSelectWidth - margin && ref.current.scrollWidth || layerSelectWidth - 50;
-  var classes = useStyles$i({
-    margin: margin,
-    maxWidthValue: maxWidthValue
-  });
 
   var onMouseWheelScroll = function onMouseWheelScroll(e) {
     var delta = e.deltaY;
@@ -12392,17 +12353,52 @@ var ServiceList = function ServiceList(_ref4) {
   var isAllSelected = Object.values(activeServices).every(function (activeService) {
     return activeService.enabled;
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.serviceList,
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      height: '32px',
+      marginTop: '8px',
+      width: '100%',
+      overflow: 'hidden'
+    },
     "data-testid": "serviceList",
     onWheel: onMouseWheelScroll
   }, margin !== 0 && /*#__PURE__*/React.createElement(ChevronLeft, {
-    className: classes.scrollArrowLeft,
     onMouseDown: onLeftChevronPressed,
     onMouseUp: onChevronMouseUp,
-    "data-testid": "leftScrollArrow"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classes.serviceChips,
+    "data-testid": "leftScrollArrow",
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    sx: function sx(theme) {
+      return {
+        width: '100px',
+        marginBottom: '-12px',
+        height: '34px',
+        backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), ".concat(theme.palette.geowebColors.background.surfaceApp, " 51%)"),
+        cursor: 'pointer',
+        marginRight: '-120px',
+        paddingTop: '6px',
+        paddingBottom: '6px',
+        "float": 'left',
+        zIndex: 1,
+        position: 'relative',
+        color: 'geowebColors.buttons.tertiary.default.color',
+        '&:hover': {
+          color: 'geowebColors.buttons.tertiary.activeMouseOver.color'
+        }
+      };
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '100%',
+      display: 'inline-flex',
+      alignItems: 'center',
+      overflowX: 'visible',
+      "float": 'left',
+      paddingLeft: '40px',
+      marginRight: "".concat(margin, "px"),
+      marginLeft: "".concat(-margin, "px"),
+      maxWidth: maxWidthValue,
+      fontSize: '0.875rem'
+    },
     ref: ref
   }, activeServices && Object.keys(activeServices) && Object.keys(activeServices).length > 0 && /*#__PURE__*/React.createElement(ServiceChipConnect, {
     key: "All",
@@ -12419,8 +12415,26 @@ var ServiceList = function ServiceList(_ref4) {
       isSelected: (_a = activeServices[serviceId]) === null || _a === void 0 ? void 0 : _a.enabled,
       isDisabled: activeServices[serviceId] === undefined
     });
-  })), layerSelectWidth + margin < width && /*#__PURE__*/React.createElement(ChevronRight, {
-    className: classes.scrollArrowRight,
+  })), layerSelectWidth + margin < width && /*#__PURE__*/React.createElement(ChevronRight // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  , {
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    sx: function sx(theme) {
+      return {
+        width: '100px',
+        marginBottom: '-12px',
+        height: '34px',
+        paddingTop: '6px',
+        paddingBottom: '6px',
+        backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), ".concat(theme.palette.geowebColors.background.surfaceApp, " 51%)"),
+        right: '0px',
+        position: 'fixed',
+        cursor: 'pointer',
+        color: 'geowebColors.buttons.tertiary.default.color',
+        '&:hover': {
+          color: 'geowebColors.buttons.tertiary.activeMouseOver.color'
+        }
+      };
+    },
     onMouseDown: onRightChevronPressed,
     onMouseUp: onChevronMouseUp,
     "data-testid": "rightScrollArrow"
@@ -12455,7 +12469,7 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
   });
 };
 
-var styles = {
+var styles$1 = {
   servicesContainer: {
     width: '300px',
     maxHeight: '380px',
@@ -12521,10 +12535,10 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    sx: styles.servicesContainer,
+    sx: styles$1.servicesContainer,
     "data-testid": "ServiceDialog"
   }, /*#__PURE__*/React.createElement(Box, {
-    sx: styles.header
+    sx: styles$1.header
   }, "Services"), /*#__PURE__*/React.createElement(List, {
     disablePadding: true
   }, Object.keys(services).map(function (serviceId) {
@@ -12570,11 +12584,11 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
       "data-testid": "removeServiceButton"
     }, /*#__PURE__*/React.createElement(Delete, null))))));
   })), /*#__PURE__*/React.createElement(Box, {
-    sx: styles.footer
+    sx: styles$1.footer
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: openAddService,
     "data-testid": "openAddServiceButton",
-    sx: styles.button,
+    sx: styles$1.button,
     variant: "tertiary",
     startIcon: /*#__PURE__*/React.createElement(Add, null)
   }, "Add a new service"))), addServiceIsOpen && /*#__PURE__*/React.createElement(ServicePopupConnect, {
@@ -12648,26 +12662,6 @@ var ServiceOptionsButton = function ServiceOptionsButton() {
   }, /*#__PURE__*/React.createElement(ServiceOptionsDialogConnect, null));
 };
 
-var useStyles$h = makeStyles({
-  serviceList: {
-    height: '48px'
-  },
-  keywordFilterButton: {
-    "float": 'left',
-    position: 'absolute',
-    margin: '12px 0 0 8px',
-    zIndex: 2
-  },
-  serviceOptionsButton: {
-    position: 'absolute',
-    margin: '12px 0 0 calc(100% - 36px)',
-    zIndex: 2
-  },
-  layerSelectContainer: {
-    padding: '0 8px'
-  }
-});
-
 var LayerSelect = function LayerSelect(_ref) {
   var mapId = _ref.mapId,
       bounds = _ref.bounds,
@@ -12681,7 +12675,6 @@ var LayerSelect = function LayerSelect(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'module' : _ref$source;
-  var classes = useStyles$h();
 
   var _React$useState = React.useState(500),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -12721,66 +12714,45 @@ var LayerSelect = function LayerSelect(_ref) {
     onMouseDown: onMouseDown,
     order: order,
     source: source
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
       padding: '6px'
     }
-  }, /*#__PURE__*/React.createElement(SearchFieldConnect, null)), /*#__PURE__*/React.createElement("div", {
-    className: classes.keywordFilterButton
+  }, /*#__PURE__*/React.createElement(SearchFieldConnect, null)), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      "float": 'left',
+      position: 'absolute',
+      margin: '12px 0 0 8px',
+      zIndex: 2
+    }
   }, /*#__PURE__*/React.createElement(KeywordFilterButtonConnect, {
     mapId: mapId
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classes.serviceOptionsButton
-  }, /*#__PURE__*/React.createElement(ServiceOptionsButton, null)), /*#__PURE__*/React.createElement("div", {
-    className: classes.serviceList
+  })), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: 'absolute',
+      margin: '12px 0 0 calc(100% - 36px)',
+      zIndex: 2
+    }
+  }, /*#__PURE__*/React.createElement(ServiceOptionsButton, null)), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      height: '48px'
+    }
   }, /*#__PURE__*/React.createElement(ServiceListConnect, {
     layerSelectWidth: width
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classes.layerSelectContainer
+  })), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      padding: '0 8px'
+    }
   }, /*#__PURE__*/React.createElement(LayerListConnect, {
     mapId: mapId,
     layerSelectHeight: height
   })));
 };
 
-var useStyles$g = makeStyles(function (theme) {
-  return createStyles({
-    listItem: {
-      width: '100%',
-      minWidth: '300px',
-      padding: '0px',
-      paddingLeft: '10px',
-      paddingRight: '50px',
-      fontSize: '12px'
-    },
-    onlyByttonText: {
-      color: theme.palette.geowebColors.buttons.primary["default"].fill,
-      fontSize: '14px',
-      fontWeight: 500
-    },
-    checkbox: {
-      paddingTop: '6px',
-      paddingBottom: '7px',
-      '&&:hover': {
-        backgroundColor: 'transparent'
-      }
-    },
-    listItemIcon: {
-      minWidth: '42px'
-    },
-    listItemText: {
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden'
-    }
-  });
-});
-
 var FilterListItem = function FilterListItem(_ref) {
   var keyword = _ref.keyword,
       toggleKeywords = _ref.toggleKeywords,
       enableOnlyOneKeyword = _ref.enableOnlyOneKeyword;
-  var classes = useStyles$g();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -12810,19 +12782,38 @@ var FilterListItem = function FilterListItem(_ref) {
       onBlur: handleMouseLeave,
       "data-testid": "filterResultListItem"
     }, /*#__PURE__*/React.createElement(ListItem, {
-      className: classes.listItem
+      sx: {
+        width: '100%',
+        minWidth: '300px',
+        padding: '0px',
+        paddingLeft: '10px',
+        paddingRight: '50px',
+        fontSize: '12px'
+      }
     }, /*#__PURE__*/React.createElement(ListItemIcon, {
-      className: classes.listItemIcon
+      sx: {
+        minWidth: '42px'
+      }
     }, /*#__PURE__*/React.createElement(Checkbox, {
       color: "secondary",
       checked: keyword.checked,
       onChange: function onChange() {
         return toggleCheckbox(keyword.id);
       },
-      className: classes.checkbox
+      sx: {
+        paddingTop: '6px',
+        paddingBottom: '7px',
+        '&&:hover': {
+          backgroundColor: 'transparent'
+        }
+      }
     })), /*#__PURE__*/React.createElement(Typography, {
       variant: "body2",
-      className: classes.listItemText
+      sx: {
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden'
+      }
     }, keyword.id), hovering ? /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(IconButton, {
       style: {
         backgroundColor: 'transparent'
@@ -12834,7 +12825,11 @@ var FilterListItem = function FilterListItem(_ref) {
       },
       "data-testid": "onlyButton"
     }, /*#__PURE__*/React.createElement(Typography, {
-      className: classes.onlyByttonText
+      sx: {
+        color: 'geowebColors.buttons.primary.default.fill',
+        fontSize: '14px',
+        fontWeight: 500
+      }
     }, "ONLY"))) : null));
   }
 
@@ -12937,26 +12932,9 @@ var KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchC
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$f = makeStyles(function (theme) {
-  return createStyles({
-    selectAll: {
-      padding: '15px',
-      paddingLeft: '20px'
-    },
-    "switch": {
-      padding: '15px'
-    },
-    selectAllContainer: {
-      backgroundColor: theme.palette.background.paper,
-      position: 'sticky',
-      top: 0,
-      zIndex: 100
-    }
-  });
-});
 
 var KeywordFilterResults = function KeywordFilterResults(_ref) {
   var allKeywordIds = _ref.allKeywordIds,
@@ -12972,7 +12950,6 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'module' : _ref$source;
-  var classes = useStyles$f();
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     title: showTitle ? "Filter Results ".concat(mapId) : 'Filter Results',
     "data-testid": "keywordFilterResults",
@@ -12995,21 +12972,31 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
     xs: 12,
     justifyContent: "space-between",
     alignItems: "center",
-    className: classes.selectAllContainer
+    sx: {
+      backgroundColor: 'background.paper',
+      position: 'sticky',
+      top: 0,
+      zIndex: 100
+    }
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
     xs: 6,
     justifyContent: "flex-start",
     alignItems: "center",
-    className: classes.selectAll
+    sx: {
+      padding: '15px',
+      paddingLeft: '20px'
+    }
   }, "Select all"), /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
     xs: 6,
     justifyContent: "flex-end",
     alignContent: "center",
-    className: classes["switch"]
+    sx: {
+      padding: '15px'
+    }
   }, /*#__PURE__*/React.createElement(KeywordFilterSelectAllSwitchConnect, null))), /*#__PURE__*/React.createElement(List, {
     dense: true,
     style: {
@@ -13399,15 +13386,10 @@ var MapControlButton = function MapControlButton(_a) {
   return /*#__PURE__*/React.createElement(Tooltip, {
     placement: placement,
     title: title
-  }, /*#__PURE__*/React.createElement(Box, {
-    component: "span",
-    sx: {
-      marginBottom: '8px'
-    }
   }, /*#__PURE__*/React.createElement(ToolButton, Object.assign({
     onClick: onClick,
     active: isActive
-  }, props), children)));
+  }, props), children));
 };
 
 /* *
@@ -13509,37 +13491,30 @@ var ZoomControlConnect = function ZoomControlConnect(_ref) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$e = makeStyles(function () {
-  return {
-    container: {
-      '& > button': {
-        marginBottom: 8
-      }
-    },
-    wrapper: {
+
+var MapControls = function MapControls(_a) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return /*#__PURE__*/React.createElement(Box, Object.assign({
+    sx: {
       position: 'absolute',
       overflow: 'visible',
       display: 'block',
       left: 0,
-      margin: 8,
+      margin: 1,
       zIndex: 50,
-      top: 96
+      top: '96px'
     }
-  };
-});
-
-var MapControls = function MapControls(_a) {
-  var children = _a.children,
-      props = __rest(_a, ["children"]);
-
-  var classes = useStyles$e();
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classes.wrapper
   }, props), /*#__PURE__*/React.createElement(Grid, {
-    className: classes.container,
+    sx: {
+      '& > button': {
+        marginBottom: 1
+      }
+    },
     container: true,
     direction: "column"
   }, children));
@@ -13658,28 +13633,13 @@ var DimensionSelectButton = function DimensionSelectButton(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, null));
 };
 
-var useStyles$d = makeStyles(function () {
+var SmallFontSlider = styled(Slider)(function () {
   return {
-    verticalLevelDimensionSelectContainer: {
-      height: '320px',
-      margin: '10px',
-      marginLeft: '-5px',
-      minWidth: 120,
-      fontSize: '90%'
-    },
-    layerName: {
-      paddingLeft: '10px',
-      maxWidth: 130,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
+    '& .MuiSlider-markLabel': {
+      fontSize: '80%'
     }
   };
 });
-var SmallFontSlider = withStyles({
-  markLabel: {
-    fontSize: '80%'
-  }
-})(Slider);
 
 var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
   var marks = _ref.marks,
@@ -13695,7 +13655,6 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
       _ref$alertColor = _ref.alertColor,
       alertColor = _ref$alertColor === void 0 ? 'red' : _ref$alertColor,
       onChangeDimensionValue = _ref.onChangeDimensionValue;
-  var classes = useStyles$d();
 
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -13724,9 +13683,15 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
   var sliderValue = managedValue !== null ? values.findIndex(function (v) {
     return v === managedValue;
   }) : currentIndex;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classes.verticalLevelDimensionSelectContainer,
-    "data-testid": "slider-dimensionSelect"
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    "data-testid": "slider-dimensionSelect",
+    sx: {
+      height: '320px',
+      margin: '10px',
+      marginLeft: '-5px',
+      minWidth: 120,
+      fontSize: '90%'
+    }
   }, /*#__PURE__*/React.createElement(Box, {
     component: "span",
     m: 1
@@ -13751,7 +13716,12 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
     title: layerName
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "body2",
-    className: classes.layerName
+    sx: {
+      paddingLeft: '10px',
+      maxWidth: 130,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
   }, layerName)));
 };
 
@@ -14226,6 +14196,8 @@ var MultiMapMultiDimensionSelectConnect = function MultiMapMultiDimensionSelectC
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
+var titleOn = 'Auto update on';
+var titleOff = 'Auto update off';
 
 var AutoUpdateButton = function AutoUpdateButton(_ref) {
   var _ref$toggleAutoUpdate = _ref.toggleAutoUpdate,
@@ -14237,10 +14209,9 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return /*#__PURE__*/React.createElement(Tooltip, {
-    title: isAutoUpdating ? 'Auto update on' : 'Auto update off'
-  }, /*#__PURE__*/React.createElement("span", {
+    title: isAutoUpdating ? titleOn : titleOff,
     "data-testid": "autoUpdateButtonTooltip"
-  }, /*#__PURE__*/React.createElement(ToolButton, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
     active: isAutoUpdating,
     disabled: disabled,
     onClick: function onClick() {
@@ -14254,29 +14225,11 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
   }))));
 };
 
-var useStyles$c = makeStyles(function (theme) {
-  return {
-    speedButtonDiv: {
-      height: '24px',
-      width: '24px',
-      position: 'relative'
-    },
-    sliderBackground: {
-      padding: '0 0 60px 0',
-      backgroundColor: theme.palette.geowebColors.background.surface,
-      width: '95px',
-      height: '150px',
-      position: 'absolute',
-      bottom: '34px',
-      left: '-18px'
-    }
-  };
-});
+var speedTooltipTitle = 'Speed';
 
 var SpeedButton = function SpeedButton(_ref) {
   var animationDelay = _ref.animationDelay,
       setMapAnimationDelay = _ref.setMapAnimationDelay;
-  var classes = useStyles$c();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -14329,18 +14282,29 @@ var SpeedButton = function SpeedButton(_ref) {
   };
 
   var text = marks[currentValue].text;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.speedButtonDiv
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      height: '24px',
+      width: '24px',
+      position: 'relative'
+    }
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Speed"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+    title: speedTooltipTitle
+  }, /*#__PURE__*/React.createElement(ToolButton, {
     onClick: onClickButton,
     active: true,
     "data-testid": "speedButton"
   }, /*#__PURE__*/React.createElement(TextIcon, {
     text: text
-  })))), open ? /*#__PURE__*/React.createElement("div", {
-    className: classes.sliderBackground
+  }))), open ? /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      padding: '0 0 60px 0',
+      backgroundColor: 'geowebColors.background.surface',
+      width: '95px',
+      height: '150px',
+      position: 'absolute',
+      bottom: '35px'
+    }
   }, /*#__PURE__*/React.createElement(Box, {
     sx: sliderHeaderStyle
   }, "Speed"), /*#__PURE__*/React.createElement(CustomSlider, {
@@ -14363,12 +14327,6 @@ var SpeedButton = function SpeedButton(_ref) {
   })) : null);
 };
 
-var timestepAutoSwitchActive = {
-  title: 'Timestep Auto on'
-};
-var timestepAutoSwitchInactive = {
-  title: 'Timestep Auto off'
-};
 var timeStepMarks = [{
   value: 1,
   label: '1 min',
@@ -14475,34 +14433,7 @@ var timeStepMarks = [{
   timeStepValue: 5256000,
   text: '10y'
 }];
-var useStyles$b = makeStyles(function (theme) {
-  return {
-    timeStepDiv: {
-      width: '58px',
-      height: '24px',
-      position: 'relative'
-    },
-    sliderBackground: {
-      backgroundColor: theme.palette.geowebColors.background.surface,
-      width: '110px',
-      height: '350px',
-      padding: '0 0 83px 0',
-      position: 'absolute',
-      bottom: '34px'
-    },
-    timestepAutoText: {
-      fontFamily: 'Roboto-Black, Roboto',
-      fontSize: 12,
-      color: theme.palette.geowebColors.typographyAndIcons.text
-    },
-    timestepAutoTextOff: {
-      fontFamily: 'Roboto-Black, Roboto',
-      fontSize: 12,
-      color: theme.palette.geowebColors.typographyAndIcons.text
-    },
-    disabled: {}
-  };
-});
+var timeStepTitle = 'Time step';
 
 var TimeStepButton = function TimeStepButton(_ref) {
   var timeStep = _ref.timeStep,
@@ -14515,131 +14446,109 @@ var TimeStepButton = function TimeStepButton(_ref) {
       _ref$onToggleTimestep = _ref.onToggleTimestepAuto,
       onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {
     return null;
-  } : _ref$onToggleTimestep;
-  var classes = useStyles$b();
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      open = _React$useState2[0],
-      setOpen = _React$useState2[1];
-
-  var onClickButton = function onClickButton() {
-    setOpen(!open);
-  };
-
-  var timestepAutoSwitch = !isTimestepAuto ? timestepAutoSwitchInactive : timestepAutoSwitchActive;
-  var timestepAutoTextStyle = !isTimestepAuto ? classes.timestepAutoText : classes.timestepAutoTextOff;
-  var disabledSlider = disabled || isTimestepAuto;
+  } : _ref$onToggleTimestep,
+      _ref$isOpenByDefault = _ref.isOpenByDefault,
+      isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
   var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
   var currentMark = timeStepMarks.find(function (mark) {
     return mark.timeStepValue === timeStep;
   });
-  var value = currentMark && currentMark.value ? currentMark.value : 0;
-  var min = timeStepMarks[0].value;
-  var max = timeStepMarks[timeStepMarks.length - 1].value;
+  React__default.useEffect(function () {
+    if (isTimestepAuto) {
+      onChangeTimeStep(timeStepFromLayer);
+    }
+  }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
 
-  var getTimeStepValue = function getTimeStepValue(value) {
-    return timeStepMarks[Math.round(value - 1)].timeStepValue;
-  };
-
-  var onChangeSlider = function onChangeSlider(event, value) {
-    var newValue = getTimeStepValue(value);
-
-    if (event.type !== 'keydown') {
-      onChangeTimeStep(newValue, MapActionOrigin.map);
-    }
-  };
-
-  var onKeyDown = function onKeyDown(event) {
-    // disable default Slider behavior
-    event.stopPropagation();
-    event.preventDefault(); // custom logic
-
-    if (event.key === 'Tab') {
-      setOpen(!open);
-    }
+  var _React$useState = React__default.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      anchorRef = _React$useState2[0],
+      setAnchorRef = _React$useState2[1];
 
-    var newValue = getValueFromKeyboardEvent(event, value, min, max);
+  var _React$useState3 = React__default.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      open = _React$useState4[0],
+      setOpen = _React$useState4[1];
 
-    if (newValue !== null) {
-      onChangeTimeStep(getTimeStepValue(newValue), MapActionOrigin.map);
+  React__default.useEffect(function () {
+    if (anchorRef && isOpenByDefault) {
+      setOpen(true);
     }
-  };
-
-  React.useEffect(function () {
-    if (isTimestepAuto) {
-      onChangeTimeStep(timeStepFromLayer);
+  }, [anchorRef, isOpenByDefault]);
+  return /*#__PURE__*/React__default.createElement(Box, {
+    onKeyDown: function onKeyDown(event) {
+      event.stopPropagation();
     }
-  }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.timeStepDiv
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Time step"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: timeStepTitle
+  }, /*#__PURE__*/React__default.createElement(ToolButton, {
+    onClick: function onClick() {
+      setOpen(true);
+    },
+    ref: setAnchorRef,
     active: true,
-    onClick: onClickButton,
-    "data-testid": "timeStepButton",
     width: "58px"
-  }, /*#__PURE__*/React.createElement(FastForward, null), /*#__PURE__*/React.createElement(TextIcon, {
-    text: currentMark && currentMark.text || '',
-    "data-testid": "timeStepButtonText"
-  })))), open ? /*#__PURE__*/React.createElement("div", {
-    className: classes.sliderBackground
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: sliderHeaderStyle
-  }, "Time step"), /*#__PURE__*/React.createElement(CustomSlider, {
-    "data-testid": "timeStepButtonSlider",
-    orientation: "vertical",
-    value: value,
-    step: null,
-    min: min,
-    max: max,
-    marks: timeStepMarks,
-    disabled: disabledSlider,
-    onChange: onChangeSlider,
-    onKeyDown: onKeyDown,
-    shouldAutoFocus: true
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    title: timestepAutoSwitch.title
-  }, /*#__PURE__*/React.createElement("span", {
-    "data-testid": "timestepAutoSwitchTooltip"
-  }, /*#__PURE__*/React.createElement(FormControlLabel, {
-    control: /*#__PURE__*/React.createElement(Switch, {
-      checked: isTimestepAuto,
-      onChange: function onChange() {
-        return onToggleTimestepAuto();
-      },
-      disabled: disabled,
-      id: "timestepAutoSwitch",
-      disableRipple: true,
+  }, /*#__PURE__*/React__default.createElement(FastForward, null), /*#__PURE__*/React__default.createElement(TextIcon, {
+    text: currentMark === null || currentMark === void 0 ? void 0 : currentMark.text
+  }))), /*#__PURE__*/React__default.createElement(Menu, {
+    anchorEl: anchorRef,
+    open: open,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    BackdropProps: {
       sx: {
-        marginLeft: '18px'
+        backgroundColor: 'transparent'
       }
-    }),
-    label: "Auto",
-    labelPlacement: "end",
-    classes: {
-      label: timestepAutoTextStyle
+    },
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    },
+    transformOrigin: {
+      vertical: 'bottom',
+      horizontal: 'center'
     }
-  })))) : null);
+  }, timeStepMarks.sort(function (a, b) {
+    return b.timeStepValue - a.timeStepValue;
+  }).map(function (time) {
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
+      onClick: function onClick() {
+        if (isTimestepAuto) {
+          onToggleTimestepAuto();
+        }
+
+        onChangeTimeStep(time.timeStepValue, MapActionOrigin.map);
+        setOpen(false);
+      },
+      key: time.timeStepValue,
+      selected: (currentMark === null || currentMark === void 0 ? void 0 : currentMark.timeStepValue) === time.timeStepValue,
+      disabled: disabled
+    }, time.label);
+  }), /*#__PURE__*/React__default.createElement(MenuItem, {
+    onClick: function onClick() {
+      onToggleTimestepAuto();
+      setOpen(false);
+    },
+    selected: isTimestepAuto,
+    disabled: disabled
+  }, "Auto")));
 };
 
-var OptionsPopOver = withStyles(function (theme) {
+var OptionsPopOver = styled(Popover)(function (_ref) {
+  var theme = _ref.theme;
   return {
-    paper: {
-      height: '24px',
-      padding: '8px',
-      borderRadius: '0',
+    '& .MuiPaper-root': {
+      padding: '5px',
       overflow: 'visible',
       backgroundColor: theme.palette.geowebColors.background.surface
     }
   };
-})(Popover);
+});
 
-var OptionsMenuButton = function OptionsMenuButton(_ref) {
-  var autoUpdateBtn = _ref.autoUpdateBtn,
-      speedBtn = _ref.speedBtn,
-      timeStepBtn = _ref.timeStepBtn;
+var OptionsMenuButton = function OptionsMenuButton(_ref2) {
+  var autoUpdateBtn = _ref2.autoUpdateBtn,
+      speedBtn = _ref2.speedBtn,
+      timeStepBtn = _ref2.timeStepBtn;
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -14657,7 +14566,8 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
   var open = Boolean(anchorEl);
   var id = open ? 'simple-popover' : undefined;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Options"
+    title: "Animation options",
+    placement: "bottom"
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
     onClick: onClickButton,
     "data-testid": "optionsMenuButton",
@@ -14671,7 +14581,7 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
     anchorEl: anchorEl,
     onClose: handleClose,
     anchorOrigin: {
-      vertical: 'top',
+      vertical: -5,
       horizontal: 'left'
     },
     transformOrigin: {
@@ -14719,53 +14629,18 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$a = makeStyles({
-  buttonContainerBig: {
-    padding: '20px 0px 0px 12px',
-    width: '210px'
-  },
-  buttonContainerSmall: {
-    padding: '20px 0px 0px 12px',
-    width: '80px'
-  }
-});
 
 var TimeSliderButtons = function TimeSliderButtons(_ref) {
-  var autoUpdateBtn = _ref.autoUpdateBtn,
-      optionsMenuBtn = _ref.optionsMenuBtn,
-      playBtn = _ref.playBtn,
-      speedBtn = _ref.speedBtn,
-      timeStepBtn = _ref.timeStepBtn;
-  var classes = useStyles$a();
-  var matches = useMediaQuery('(min-width:600px)');
+  var optionsMenuBtn = _ref.optionsMenuBtn,
+      playBtn = _ref.playBtn;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "timeSliderButtons"
-  }, matches ? /*#__PURE__*/React.createElement(Grid, {
+  }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     spacing: 2,
-    className: classes.buttonContainerBig
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, timeStepBtn || /*#__PURE__*/React.createElement(TimeStepButton, {
-    timeStep: 5,
-    onChangeTimeStep: function onChangeTimeStep() {
-      return null;
-    }
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, speedBtn || /*#__PURE__*/React.createElement(SpeedButton, {
-    animationDelay: defaultAnimationDelayAtStart,
-    setMapAnimationDelay: function setMapAnimationDelay() {
-      return null;
+    sx: {
+      padding: '20px 0px 0px 16px'
     }
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, autoUpdateBtn || /*#__PURE__*/React.createElement(AutoUpdateButton, null)), /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, playBtn || /*#__PURE__*/React.createElement(PlayButton, null))) : /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    spacing: 1,
-    className: classes.buttonContainerSmall
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, optionsMenuBtn || /*#__PURE__*/React.createElement(OptionsMenuButton, null)), /*#__PURE__*/React.createElement(Grid, {
@@ -15448,12 +15323,6 @@ var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, can
   drawCurrentTime(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, currentTimeUnix);
 };
 
-var useStyles$9 = makeStyles({
-  timeSliderLegend: {
-    height: '50px'
-  }
-});
-
 var getNextSecondsPerPxValue = function getNextSecondsPerPxValue(direction, oldSecondsPerPx, dataScaleToSecondsPerPx) {
   var fullSecondsPerPxValues = secondsPerPxValues(dataScaleToSecondsPerPx);
   var ind = fullSecondsPerPxValues.indexOf(oldSecondsPerPx);
@@ -15491,7 +15360,6 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       onSetNewDate = _ref.onSetNewDate,
       onSetCenterTime = _ref.onSetCenterTime,
       onZoom = _ref.onZoom;
-  var classes = useStyles$9();
 
   var _useCanvasTarget = useCanvasTarget('mousedown'),
       _useCanvasTarget2 = _slicedToArray(_useCanvasTarget, 2),
@@ -15571,9 +15439,11 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     throttledZoom(newSecondsPerPx, newCenterTime);
   };
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.timeSliderLegend,
-    "data-testid": "timeSliderLegend"
+  return /*#__PURE__*/React.createElement(Box, {
+    "data-testid": "timeSliderLegend",
+    sx: {
+      height: '50px'
+    }
   }, /*#__PURE__*/React.createElement(CanvasComponent, {
     ref: node,
     onMouseMove: function onMouseMove(x, y, event, width) {
@@ -15642,31 +15512,12 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var scaleSliderOtherSettings = {
   LEFT_PADDING: '10%'
 };
-var useStyles$8 = makeStyles(function (theme) {
-  return {
-    Background: {
-      backgroundColor: theme.palette.geowebColors.background.surface,
-      width: '229px',
-      height: '40px',
-      paddingTop: '4px',
-      paddingBottom: '7px',
-      boxSizing: 'content-box'
-    },
-    ScaleText: {
-      width: '67px',
-      height: '15px',
-      padding: '0px 10px 0 8px',
-      color: theme.palette.geowebColors.typographyAndIcons.text,
-      font: "".concat(theme.palette.geowebColors.timeSlider.timeScaleText.fontSize, "px Roboto")
-    }
-  };
-});
 
 var thumbComponent = function thumbComponent(props) {
   var children = props.children,
@@ -15721,14 +15572,15 @@ var valueLabelFormat = function valueLabelFormat(value) {
   return valueNew;
 };
 
-var GeoWebScaleSlider = withStyles(function (theme) {
+var GeoWebScaleSlider = styled(Slider)(function (_ref) {
+  var theme = _ref.theme;
   return {
-    root: {
+    '&.MuiSlider-root': {
       height: 4,
       width: 167,
       margin: "0 0 18px ".concat(scaleSliderOtherSettings.LEFT_PADDING)
     },
-    thumb: {
+    '& .MuiSlider-thumb': {
       backgroundColor: 'rgba(0,0,0,0)',
       marginTop: 0,
       width: 12,
@@ -15741,57 +15593,56 @@ var GeoWebScaleSlider = withStyles(function (theme) {
         display: 'none'
       }
     },
-    valueLabel: {
+    '& .MuiSlider-valueLabel': {
       left: '20px'
     },
-    rail: {
+    '& .MuiSlider-rail': {
       color: theme.palette.geowebColors.timeSlider.timeScaleHorizontalScale.fill,
       height: 4,
       width: 170,
       borderRadius: 4.5,
       opacity: theme.palette.geowebColors.timeSlider.timeScaleHorizontalScale.opacity
     },
-    mark: {
+    '& .MuiSlider-mark': {
       backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicators.fill,
       height: 6,
       width: 2,
-      marginTop: -9
-    },
-    markActive: {
-      backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicatorsActive.fill,
-      height: 6,
-      width: 2,
-      marginTop: -9
+      marginTop: -9,
+      '&.MuiSlider-markActive': {
+        backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicatorsActive.fill,
+        height: 6,
+        width: 2,
+        marginTop: -9
+      }
     },
     '@media (max-width: 585px)': {
-      root: {
+      '&.MuiSlider-root': {
         width: 110
       },
-      rail: {
+      '& .MuiSlider-rail': {
         width: 110
       }
     },
     '@media (max-width: 395px)': {
-      root: {
+      '&.MuiSlider-root': {
         width: 60
       },
-      rail: {
+      '& .MuiSlider-rail': {
         width: 60
       }
     }
   };
-})(Slider);
+});
 var RAIL_GUTTER_OFFSET = 0.4;
 
-var TimeSliderScaleSlider = function TimeSliderScaleSlider(_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 classes = useStyles$8();
+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) {
@@ -15835,12 +15686,25 @@ var TimeSliderScaleSlider = function TimeSliderScaleSlider(_ref) {
   var scaleTextPadding = {
     paddingLeft: paddingLeft
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.Background,
-    "data-testid": "scaleSlider"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  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",
-    className: classes.ScaleText,
+    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",
@@ -16051,18 +15915,6 @@ var renderTimeSliderRailWithNeedle = function renderTimeSliderRailWithNeedle(ctx
   drawNewNeedleLabel(ctx, selected, selectedPx, animationStartPx, animationEndPx, scale, theme);
 };
 
-var useStyles$7 = makeStyles({
-  timeSliderRail: {
-    '& div': {
-      outline: 'none'
-    },
-    height: '45px',
-    '& canvas': {
-      display: 'block'
-    }
-  }
-});
-
 var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
   var prevTimeStep = moment.utc(curTime).subtract(timeStep, 'm').toISOString();
   if (!prevTimeStep) return;
@@ -16100,7 +15952,6 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
       onSetAnimationEndTime = _ref.onSetAnimationEndTime,
       onSetNewDate = _ref.onSetNewDate,
       onSetCenterTime = _ref.onSetCenterTime;
-  var classes = useStyles$7();
   var ZOOM_RATIO = 1.1;
 
   var zoomOut = function zoomOut(relativeX) {
@@ -16319,12 +16170,20 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
 
   }, [selectedTimeUnix]);
   var theme = useTheme();
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.timeSliderRail,
+  return /*#__PURE__*/React.createElement(Box, {
     style: {
       cursor: cursorStyle
     },
-    "data-testid": "timeSliderRail"
+    "data-testid": "timeSliderRail",
+    sx: {
+      '& div': {
+        outline: 'none'
+      },
+      height: '45px',
+      '& canvas': {
+        display: 'block'
+      }
+    }
   }, /*#__PURE__*/React.createElement(CanvasComponent, {
     ref: node,
     onMouseDown: onMouseDown,
@@ -16382,19 +16241,9 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$6 = makeStyles({
-  container: {
-    display: 'grid',
-    gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
-    gridTemplateRows: '50px'
-  },
-  scaleSlider: {
-    height: '50px'
-  }
-});
 
 var useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider) {
   React.useEffect(function () {
@@ -16431,12 +16280,15 @@ var TimeSlider = function TimeSlider(_ref) {
       isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
       _ref$onToggleTimeSlid = _ref.onToggleTimeSlider,
       onToggleTimeSlider = _ref$onToggleTimeSlid === void 0 ? function () {} : _ref$onToggleTimeSlid;
-  var styles = useStyles$6();
   useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
   return isVisible ? /*#__PURE__*/React.createElement(Grid, {
     container: true,
-    className: styles.container,
-    "data-testid": "timeSlider"
+    "data-testid": "timeSlider",
+    sx: {
+      display: 'grid',
+      gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
+      gridTemplateRows: '50px'
+    }
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, " ", buttons || /*#__PURE__*/React.createElement(TimeSliderButtons, null), " "), /*#__PURE__*/React.createElement(Grid, {
@@ -16446,7 +16298,9 @@ var TimeSlider = function TimeSlider(_ref) {
     mapIsActive: mapIsActive
   })), ' '), /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    className: styles.scaleSlider
+    sx: {
+      height: '50px'
+    }
   }, scaleSlider || /*#__PURE__*/React.createElement(TimeSliderScaleSlider, Object.assign({}, defaultProps, {
     selectedTime: defaultProps.selectedTime.unix(),
     timeSliderScale: Scale.Hour,
@@ -16675,20 +16529,11 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
 var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_ref) {
   var mapId = _ref.mapId;
   return /*#__PURE__*/React.createElement(TimeSliderButtons, {
-    autoUpdateBtn: /*#__PURE__*/React.createElement(AutoUpdateButtonConnect, {
-      mapId: mapId
-    }),
     optionsMenuBtn: /*#__PURE__*/React.createElement(OptionsMenuButtonConnect, {
       mapId: mapId
     }),
     playBtn: /*#__PURE__*/React.createElement(PlayButtonConnect, {
       mapId: mapId
-    }),
-    speedBtn: /*#__PURE__*/React.createElement(SpeedButtonConnect, {
-      mapId: mapId
-    }),
-    timeStepBtn: /*#__PURE__*/React.createElement(TimeStepButtonComponent, {
-      mapId: mapId
     })
   });
 };
@@ -17131,29 +16976,25 @@ var TimeSliderConnect = connectRedux(ConnectedTimeSlider);
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$5 = makeStyles({
-  MapViewLayer: {
-    width: '100%',
-    padding: '2px',
-    margin: 0,
-    wordWrap: 'break-word',
-    border: '1px solid rgba(0, 0, 0, 0.5)',
-    lineHeight: '14px',
-    fontSize: '10px',
-    background: 'rgba(255, 255, 255, 0.5)',
-    display: 'none'
-  }
-});
 
 var MapViewLayer = function MapViewLayer(props) {
   var id = props.id;
-  var classes = useStyles$5();
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "mapViewLayer",
-    className: classes.MapViewLayer
+    sx: {
+      width: '100%',
+      padding: '2px',
+      margin: 0,
+      wordWrap: 'break-word',
+      border: '1px solid rgba(0, 0, 0, 0.5)',
+      lineHeight: '14px',
+      fontSize: '10px',
+      background: 'rgba(255, 255, 255, 0.5)',
+      display: 'none'
+    }
   }, /*#__PURE__*/React.createElement("div", null, id), /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
@@ -18451,12 +18292,12 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
 
       if (onHoverFeature) {
         var handleMouseStoppedTimer = function handleMouseStoppedTimer() {
-          var result = checkHoverFeatures(_this2.geojson, mouseX, mouseY, function (coordinates) {
+          var result = checkHoverFeatures(_this2.geojson, _this2.mouseX, _this2.mouseY, function (coordinates) {
             return _this2.convertGeoCoordsToScreenCoords(coordinates);
           });
 
           if (result) {
-            var featureEvent = {
+            _this2.featureEvent = {
               coordinateIndexInFeature: result.coordinateIndexInFeature,
               featureIndex: result.featureIndex,
               mouseX: mouseX,
@@ -18464,8 +18305,13 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
               isInEditMode: isInEditMode,
               feature: result.feature
             };
-            onHoverFeature(featureEvent);
+            onHoverFeature(_this2.featureEvent);
+          } else {
+            _this2.featureEvent = undefined;
           }
+
+          var webmapjs = _this2.props.webmapjs;
+          webmapjs && webmapjs.draw('AdagucMapDraw::onHoverFeature');
         };
 
         window.clearTimeout(this.mouseStoppedTimer);
@@ -19614,6 +19460,7 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       var drawMarkerByDefault = !featureProperties || !featureProperties.imageURL || !featureProperties.drawFunction;
 
       if (featureProperties.drawFunction) {
+        var isHovered = this.featureEvent && this.featureEvent.feature === feature;
         featureProperties.drawFunction({
           context: ctx,
           featureIndex: featureIndex,
@@ -19623,7 +19470,8 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
           isInEditMode: isInEditMode,
           feature: feature,
           mouseX: this.mouseX,
-          mouseY: this.mouseY
+          mouseY: this.mouseY,
+          isHovered: isHovered
         });
       } else if (drawStyledMarker || drawMarkerByDefault) {
         this.drawMarker(ctx, _coord, selected, middle, isInEditMode, featureProperties);
@@ -20934,22 +20782,9 @@ ReactMapView.defaultProps = {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$4 = makeStyles(function () {
-  return {
-    mapTimeContainer: {
-      zIndex: 10,
-      justifySelf: 'center',
-      bottom: 12,
-      position: 'absolute'
-    },
-    mapTimeText: {
-      fontWeight: 500
-    }
-  };
-});
 var getTimeDimension = function getTimeDimension(dimensions) {
   return dimensions.find(function (dimension) {
     return dimension.name === 'time' && dimension.currentValue !== undefined;
@@ -20964,7 +20799,6 @@ var MapTime = function MapTime(_ref) {
   var dimensions = _ref.dimensions,
       _ref$timeFormat = _ref.timeFormat,
       timeFormat = _ref$timeFormat === void 0 ? defaultTimeFormat : _ref$timeFormat;
-  var classes = useStyles$4();
   var timeDimension = getTimeDimension(dimensions);
 
   if (!timeDimension) {
@@ -20972,12 +20806,19 @@ var MapTime = function MapTime(_ref) {
   }
 
   var mapTime = formatTime(timeDimension.currentValue, timeFormat);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "map-time",
-    className: classes.mapTimeContainer
+    sx: {
+      zIndex: 10,
+      justifySelf: 'center',
+      bottom: '12px',
+      position: 'absolute'
+    }
   }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Typography, {
     variant: "caption",
-    className: classes.mapTimeText
+    sx: {
+      fontWeight: 500
+    }
   }, mapTime)));
 };
 
@@ -20994,24 +20835,9 @@ var MapTime = function MapTime(_ref) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$3 = makeStyles(function () {
-  return {
-    mapViewContainer: {
-      display: 'grid',
-      width: '100%',
-      height: '100%',
-      position: 'relative',
-      overflow: 'hidden'
-    },
-    mapView: {
-      gridColumnStart: 1,
-      gridRowStart: 1
-    }
-  };
-});
 
 var MapView = function MapView(_a) {
   var children = _a.children,
@@ -21023,11 +20849,16 @@ var MapView = function MapView(_a) {
       displayTimeInMap = _a$displayTimeInMap === void 0 ? true : _a$displayTimeInMap,
       props = __rest(_a, ["children", "controls", "displayTimeInMap"]);
 
-  var classes = useStyles$3();
   var dimensions = props.dimensions;
   var adagucRef = React.useRef(null);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.mapViewContainer
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'grid',
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      overflow: 'hidden'
+    }
   }, controls && controls.zoomControls && /*#__PURE__*/React.createElement(MapControls, {
     style: {
       top: 0,
@@ -21043,8 +20874,11 @@ var MapView = function MapView(_a) {
     onZoomReset: function onZoomReset() {
       return adagucRef.current.zoomToLayer(adagucRef.current.getActiveLayer());
     }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classes.mapView
+  })), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      gridColumnStart: 1,
+      gridRowStart: 1
+    }
   }, /*#__PURE__*/React.createElement(ReactMapView, Object.assign({}, props, {
     onRegisterAdaguc: function onRegisterAdaguc(adaguc) {
       adagucRef.current = adaguc;
@@ -21056,13 +20890,214 @@ var MapView = function MapView(_a) {
   }));
 };
 
-/* *
- * 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
- *
+var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
+  var _React$useState = React.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      firstTouchX = _React$useState2[0],
+      setFirstTouchX = _React$useState2[1];
+
+  var _React$useState3 = React.useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      firstTouchY = _React$useState4[0],
+      setFirstTouchY = _React$useState4[1];
+
+  var _React$useState5 = React.useState(0),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      secondTouchX = _React$useState6[0],
+      setSecondTouchX = _React$useState6[1];
+
+  var _React$useState7 = React.useState(0),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      secondTouchY = _React$useState8[0],
+      setSecondTouchY = _React$useState8[1];
+
+  var _React$useState9 = React.useState(0),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      prevDist = _React$useState10[0],
+      setPrevDist = _React$useState10[1];
+
+  var isPanning = function isPanning(touches) {
+    return (touches === null || touches === void 0 ? void 0 : touches.length) === 1;
+  };
+
+  var isZooming = function isZooming(touches) {
+    return (touches === null || touches === void 0 ? void 0 : touches.length) === 2;
+  };
+
+  var isValidMap = React.useCallback(function (map, event) {
+    var target = event.target;
+    return map && target.tagName !== 'INPUT' && mapIsActive;
+  }, [mapIsActive]);
+
+  var distance = function distance(x1, y1, x2, y2) {
+    var dx = x1 - x2;
+    var dy = y1 - y2;
+    return Math.sqrt(dx * dx + dy * dy);
+  };
+
+  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);
+    setFirstTouchY(firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientY);
+
+    if (isZooming(targetTouches)) {
+      var secondTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(1);
+      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;
+    event.preventDefault();
+    var targetTouches = event.targetTouches;
+    var firstTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(0);
+    var firstX = firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientX;
+    var firstY = firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientY;
+    var elemWidth = firstTouch.target.clientWidth;
+    var elemHeight = firstTouch.target.clientHeight;
+    var distanceEps = TOUCH_PAN_STEP_PERCENTAGE * Math.min(elemWidth, elemHeight);
+
+    if (isPanning(targetTouches)) {
+      // Pan with a one-point touch
+      var dist = distance(firstTouchX, firstTouchY, firstX, firstY);
+
+      if (dist > distanceEps) {
+        var distX = firstX - firstTouchX;
+        var distY = firstY - firstTouchY;
+        var unitDirX = distX / dist;
+        var unitDirY = -distY / dist;
+        setFirstTouchX(firstX);
+        setFirstTouchY(firstY);
+        map.mapPanPercentage(unitDirX * TOUCH_PAN_STEP_PERCENTAGE, unitDirY * TOUCH_PAN_STEP_PERCENTAGE);
+      }
+    } else if (isZooming(targetTouches)) {
+      // Zoom with a two-point "pinch" touch
+      setFirstTouchX(firstX);
+      setFirstTouchY(firstY);
+      var secondTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(1);
+      setSecondTouchX(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientX);
+      setSecondTouchY(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientY);
+
+      var _dist = distance(firstTouchX, firstTouchY, secondTouchX, secondTouchY);
+
+      if (Math.abs(_dist - prevDist) > distanceEps) {
+        if (_dist < prevDist) {
+          map.zoomOut();
+        } else if (_dist > prevDist) {
+          map.zoomIn(1);
+        }
+
+        setPrevDist(_dist);
+      }
+    }
+  }, [firstTouchX, firstTouchY, isValidMap, mapId, prevDist, secondTouchX, secondTouchY]);
+  var handleEnd = React.useCallback(function () {}, []);
+  React.useEffect(function () {
+    document.addEventListener('touchstart', handleStart, {
+      passive: false
+    });
+    document.addEventListener('touchmove', handleMove, {
+      passive: false
+    });
+    document.addEventListener('touchend', handleEnd, {
+      passive: false
+    });
+    return function () {
+      document.removeEventListener('touchstart', handleStart);
+      document.removeEventListener('touchmove', handleMove);
+      document.removeEventListener('touchend', handleEnd);
+    };
+  }, [firstTouchX, firstTouchY, secondTouchX, secondTouchY, mapId, mapIsActive, prevDist, handleStart, handleMove, handleEnd]);
+};
+var TOUCH_PAN_STEP_PERCENTAGE = 0.02;
+
+/* *
+ * 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 useKeyboardZoomAndPan = function useKeyboardZoomAndPan(mapIsActive, mapId) {
+  React.useEffect(function () {
+    var keysPressedDown = {};
+
+    var handleKeyPress = function handleKeyPress(event) {
+      var target = event.target;
+      var map = getWMJSMapById(mapId);
+
+      if (map && target.tagName !== 'INPUT' && mapIsActive) {
+        var key = event.key,
+            type = event.type;
+        keysPressedDown[key] = type === 'keydown';
+
+        if (keysPressedDown['+']) {
+          map.zoomIn(1);
+        } else if (keysPressedDown['-']) {
+          map.zoomOut();
+        }
+
+        var arrowRight = keysPressedDown['ArrowRight'];
+        var arrowLeft = keysPressedDown['ArrowLeft'];
+        var arrowUp = keysPressedDown['ArrowUp'];
+        var arrowDown = keysPressedDown['ArrowDown'];
+        var control = keysPressedDown['Control'];
+
+        if (!control && (arrowRight || arrowLeft || arrowUp || arrowDown)) {
+          var x = 0;
+          var y = 0;
+
+          if (arrowRight) {
+            x -= PAN_STEP_PERCENTAGE;
+          }
+
+          if (arrowLeft) {
+            x += PAN_STEP_PERCENTAGE;
+          }
+
+          if (arrowUp) {
+            y -= PAN_STEP_PERCENTAGE;
+          }
+
+          if (arrowDown) {
+            y += PAN_STEP_PERCENTAGE;
+          }
+
+          map.mapPanPercentage(x, y);
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyPress);
+    document.addEventListener('keyup', handleKeyPress);
+    return function () {
+      document.removeEventListener('keydown', handleKeyPress);
+      document.removeEventListener('keyup', handleKeyPress);
+    };
+  }, [mapIsActive, mapId]);
+};
+var PAN_STEP_PERCENTAGE = 0.02;
+
+/* *
+ * 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.
@@ -21172,7 +21207,14 @@ var MapViewConnect = function MapViewConnect(_a) {
   var setSelectedFeature = React.useCallback(function (payload) {
     dispatch(mapActions$1.setSelectedFeature(payload));
   }, [dispatch]);
-  useKeyboardZoomAndPan(mapId);
+  var activeWindowId = useSelector(getActiveWindowId);
+
+  var isActiveWindowId = function isActiveWindowId() {
+    return activeWindowId === mapId;
+  };
+
+  useKeyboardZoomAndPan(isActiveWindowId(), mapId);
+  useTouchZoomPan(isActiveWindowId(), mapId);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       height: '100%'
@@ -21268,69 +21310,6 @@ var MapViewConnect = function MapViewConnect(_a) {
   }), children));
 };
 
-var useKeyboardZoomAndPan = function useKeyboardZoomAndPan(mapId) {
-  var activeWindowId = useSelector(getActiveWindowId);
-  var mapIsActive = activeWindowId === mapId;
-  React.useEffect(function () {
-    var keysPressedDown = {};
-
-    var handleKeyPress = function handleKeyPress(event) {
-      var target = event.target;
-      var map = getWMJSMapById(mapId);
-
-      if (map && target.tagName !== 'INPUT' && mapIsActive) {
-        var key = event.key,
-            type = event.type;
-        keysPressedDown[key] = type === 'keydown';
-
-        if (keysPressedDown['+']) {
-          map.zoomIn(1);
-        } else if (keysPressedDown['-']) {
-          map.zoomOut();
-        }
-
-        var arrowRight = keysPressedDown['ArrowRight'];
-        var arrowLeft = keysPressedDown['ArrowLeft'];
-        var arrowUp = keysPressedDown['ArrowUp'];
-        var arrowDown = keysPressedDown['ArrowDown'];
-        var control = keysPressedDown['Control'];
-
-        if (!control && (arrowRight || arrowLeft || arrowUp || arrowDown)) {
-          var x = 0;
-          var y = 0;
-
-          if (arrowRight) {
-            x -= PAN_STEP_PERCENTAGE;
-          }
-
-          if (arrowLeft) {
-            x += PAN_STEP_PERCENTAGE;
-          }
-
-          if (arrowUp) {
-            y -= PAN_STEP_PERCENTAGE;
-          }
-
-          if (arrowDown) {
-            y += PAN_STEP_PERCENTAGE;
-          }
-
-          map.mapPanPercentage(x, y);
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyPress);
-    document.addEventListener('keyup', handleKeyPress);
-    return function () {
-      document.removeEventListener('keydown', handleKeyPress);
-      document.removeEventListener('keyup', handleKeyPress);
-    };
-  }, [mapIsActive, mapId]);
-};
-
-var PAN_STEP_PERCENTAGE = 0.02;
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21531,20 +21510,20 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$2 = makeStyles(function (theme) {
+
+var mapBoxStyle = function mapBoxStyle(theme) {
   return {
-    box: {
-      boxSizing: 'border-box',
-      "float": 'left',
-      '& .MapViewComponent': {
-        border: "1px solid ".concat(theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled)
-      }
+    boxSizing: 'border-box',
+    "float": 'left',
+    '& .MapViewComponent': {
+      border: "1px solid ".concat(theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled)
     }
   };
-});
+};
+
 var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
   var maps = _ref.maps,
       rows = _ref.rows,
@@ -21555,7 +21534,6 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       showZoomControls = _ref$showZoomControls === void 0 ? true : _ref$showZoomControls,
       _ref$multiLegend = _ref.multiLegend,
       multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
-  var classes = useStyles$2();
   var dispatch = useDispatch();
   var syncGroupAddTarget = React__default.useCallback(function (payload) {
     dispatch(genericActions.syncGroupAddTarget(payload));
@@ -21600,10 +21578,10 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
     multiLegend: multiLegend
   }), maps.map(function (map, mapIndex) {
     var mapId = map.id;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classes.box,
+    return /*#__PURE__*/React__default.createElement(Box, {
       key: mapId,
-      style: mapStyle
+      style: mapStyle,
+      sx: mapBoxStyle
     }, /*#__PURE__*/React__default.createElement(ConfigurableMapConnect, {
       title: map.title,
       id: mapId,
@@ -21892,18 +21870,32 @@ var componentsLookUp = function componentsLookUp(_ref) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
+var styles = {
+  listItem: {
+    width: '80%',
+    borderRadius: '5px'
+  },
+  isActive: {
+    color: 'geowebColors.typographyAndIcons.icon'
+  },
+  checkboxIsActive: {
+    color: 'geowebColors.typographyAndIcons.iconLinkActive'
+  },
+  isDisabled: {
+    color: 'geowebColors.typographyAndIcons.iconLinkDisabled'
+  }
+};
 var SyncGroupListItem = function SyncGroupListItem(_ref) {
   var viewStateData = _ref.viewStateData,
       groupId = _ref.groupId,
       selected = _ref.selected,
       sourcesById = _ref.sourcesById,
       handleToggle = _ref.handleToggle;
-  var classes = useStyles$1();
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.listItem
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: styles.listItem
   }, sourcesById.map(function (source) {
     var isChecked = selected.includes(source.id); // Check if checkbox is checked in another group
 
@@ -21917,7 +21909,7 @@ var SyncGroupListItem = function SyncGroupListItem(_ref) {
       onClick: function onClick() {
         return handleToggle(source.id);
       },
-      className: classes.listItem
+      sx: styles.listItem
     }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Checkbox, {
       edge: "start",
       checked: isChecked,
@@ -21926,30 +21918,13 @@ var SyncGroupListItem = function SyncGroupListItem(_ref) {
       inputProps: {
         'aria-labelledby': source.name
       },
-      className: isNotCheckedElseWhere ? classes.checkboxIsActive : classes.isDisabled,
+      sx: isNotCheckedElseWhere ? styles.checkboxIsActive : styles.isDisabled,
       color: "default"
     })), /*#__PURE__*/React.createElement(Typography, {
-      className: isNotCheckedElseWhere ? classes.isActive : classes.isDisabled
+      sx: isNotCheckedElseWhere ? styles.isActive : styles.isDisabled
     }, source.name));
   }));
 };
-var useStyles$1 = makeStyles(function (theme) {
-  return createStyles({
-    listItem: {
-      width: '80%',
-      borderRadius: '5px'
-    },
-    isActive: {
-      color: theme.palette.geowebColors.typographyAndIcons.icon
-    },
-    checkboxIsActive: {
-      color: theme.palette.geowebColors.typographyAndIcons.iconLinkActive
-    },
-    isDisabled: {
-      color: theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
-    }
-  });
-});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -21964,8 +21939,8 @@ var useStyles$1 = makeStyles(function (theme) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var SyncGroupList = function SyncGroupList(_ref) {
   var viewStateData = _ref.viewStateData,
@@ -21973,15 +21948,26 @@ var SyncGroupList = function SyncGroupList(_ref) {
       _handleToggle = _ref.handleToggle,
       addNewGroup = _ref.addNewGroup,
       removeGroup = _ref.removeGroup;
-  var classes = useStyles();
   return /*#__PURE__*/React.createElement(List, {
     disablePadding: true
   }, viewStateData.groups.map(function (groupObject, index) {
     return /*#__PURE__*/React.createElement(Box, {
       key: groupObject.id,
-      className: index === 0 ? null : classes.childListItem
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.syncGroupHeader
+      sx: Object.assign({}, index !== 0 && {
+        backgroundColor: 'geowebColors.syncGroups.drawerOpen.fill',
+        boxShadow: 'inset 0px 7px 7px -7px, inset 0px -7px 7px -7px',
+        color: '#000000'
+      })
+    }, /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        color: 'geowebColors.typographyAndIcons.text',
+        paddingLeft: '15px',
+        paddingTop: '10px'
+      }
     }, /*#__PURE__*/React.createElement(Typography, null, title), /*#__PURE__*/React.createElement(Tooltip, {
       title: index === 0 ? 'Add new group to list' : 'Remove group from list'
     }, /*#__PURE__*/React.createElement(IconButton, {
@@ -22006,24 +21992,6 @@ var SyncGroupList = function SyncGroupList(_ref) {
     }));
   }));
 };
-var useStyles = makeStyles(function (theme) {
-  return createStyles({
-    syncGroupHeader: {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      color: theme.palette.geowebColors.typographyAndIcons.text,
-      paddingLeft: '15px',
-      paddingTop: '10px'
-    },
-    childListItem: {
-      backgroundColor: theme.palette.geowebColors.syncGroups.drawerOpen.fill,
-      boxShadow: 'inset 0px 7px 7px -7px, inset 0px -7px 7px -7px',
-      color: '#000000'
-    }
-  });
-});
 
 var SyncGroupViewer = function SyncGroupViewer(_ref) {
   var onClose = _ref.onClose,
@@ -22452,6 +22420,90 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
   }, children)));
 };
 
+/* *
+ * 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 SnackbarWrapper = function SnackbarWrapper(_a) {
+  var children = _a.children,
+      isOpen = _a.isOpen,
+      onCloseSnackbar = _a.onCloseSnackbar,
+      id = _a.id,
+      props = __rest(_a, ["children", "isOpen", "onCloseSnackbar", "id"]);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(Snackbar, Object.assign({
+    "data-testid": "snackbarComponent",
+    open: isOpen,
+    onClose: onCloseSnackbar,
+    autoHideDuration: null,
+    key: id,
+    ClickAwayListenerProps: {
+      mouseEvent: false
+    },
+    action: /*#__PURE__*/React.createElement(IconButton, {
+      "aria-label": "close",
+      "data-testid": "snackbarCloseButton",
+      onClick: onCloseSnackbar,
+      sx: {
+        color: 'geowebColors.snackbar.action',
+        '&:hover': {
+          backgroundColor: 'geowebColors.snackbar.actionHover.rgba'
+        }
+      }
+    }, /*#__PURE__*/React.createElement(Close, null))
+  }, props)));
+};
+
+/* *
+ * 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 SnackbarWrapperConnect = function SnackbarWrapperConnect(_a) {
+  var props = __rest(_a, []);
+
+  var dispatch = useDispatch();
+
+  var onCloseSnackbar = function onCloseSnackbar() {
+    dispatch(snackbarActions.closeSnackbar());
+  };
+
+  var currentSnackbarMessage = useSelector(function (store) {
+    return getFirstSnackbarMessage(store);
+  });
+  return /*#__PURE__*/React.createElement(DynamicModuleLoader, {
+    modules: [snackbarModuleConfig]
+  }, /*#__PURE__*/React.createElement(SnackbarWrapper, Object.assign({
+    isOpen: !!currentSnackbarMessage,
+    onCloseSnackbar: onCloseSnackbar,
+    message: currentSnackbarMessage ? currentSnackbarMessage.message : '',
+    id: currentSnackbarMessage ? currentSnackbarMessage.id : ''
+  }, props)));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22469,7 +22521,9 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var MapWarningProperties = function MapWarningProperties(_ref) {
-  var selectedFeatureProperties = _ref.selectedFeatureProperties;
+  var selectedFeatureProperties = _ref.selectedFeatureProperties,
+      languageIndex = _ref.languageIndex;
+  var language = languageIndex || 0;
   return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "map-warning-properties",
     style: {
@@ -22488,13 +22542,13 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
     "data-testid": "map-warning-properties-title"
   }, selectedFeatureProperties.areaDesc), selectedFeatureProperties.areaDesc && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "event: ", selectedFeatureProperties.languages[2].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default.createElement("pre", {
+  }, "event: ", selectedFeatureProperties.languages[language].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
   }, "Sent:", ' ', moment.utc(selectedFeatureProperties.onset).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.expires && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Expires:", ' ', moment.utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[2].senderName && /*#__PURE__*/React__default.createElement("pre", {
+  }, "Expires:", ' ', moment.utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[language].senderName && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Sender: ", selectedFeatureProperties.languages[2].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default.createElement("pre", {
+  }, "Sender: ", selectedFeatureProperties.languages[language].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
   }, "Identifier: ", selectedFeatureProperties.identifier));
 };
@@ -22517,4 +22571,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
  * */
 var mapActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions$1), serviceActions);
 
-export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterBaseLayers, filterLayers, filterMapLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$5 as layerReducer, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, useStyles$2 as useStyles };
+export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$6 as layerReducer, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerWMJSMap, registerWMLayer, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes };