@opengeoweb/core 2.1.3 → 2.1.4

package/{core.esm.js → index.esm.js}

@@ -5,13 +5,15 @@ import React__default, { useState, Component, useRef, useEffect } from 'react';
 import produce, { produce as produce$1 } from 'immer';
 import { takeLatest, put, select, call, takeEvery } from 'redux-saga/effects';
 import { WMGetServiceFromStore, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer } from '@opengeoweb/webmap';
-import { makeStyles, Tooltip, Select, Grid, InputLabel, IconButton, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, createStyles, MenuItem, Checkbox, SvgIcon, ListItemIcon, Menu, FormControl, InputAdornment, withStyles, Switch, ListItemSecondaryAction, Slider, FormControlLabel, Popover, useMediaQuery, useTheme } from '@material-ui/core';
+import { Tooltip, Select, Grid, InputLabel, IconButton, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, Checkbox, SvgIcon, ListItemIcon, Menu, FormControl, ToggleButton, InputAdornment, Switch, ListItemSecondaryAction, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { sliderStyles, CustomSlider, ToolContainerDraggable, useIsMounted } from '@opengeoweb/shared';
 import _, { debounce } from 'lodash';
-import { Cached, Add, MoreVert, FileCopy, Delete, DragIndicator, Close, ChevronLeft, ChevronRight, Link, LinkOff, DeleteForever } from '@material-ui/icons';
+import { Cached, Add, MoreVert, FileCopy, Delete, DragIndicator, Close, ChevronLeft, ChevronRight, Link, LinkOff, DeleteForever } from '@mui/icons-material';
 import { Sortable, ReactSortable } from 'react-sortablejs';
-import { ToggleButton } from '@material-ui/lab';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
 import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
 import proj4 from 'proj4';
@@ -387,7 +389,6 @@ var WEBMAP_LAYER_CHANGE_NAME = 'WEBMAP_LAYER_CHANGE_NAME';
 var WEBMAP_LAYER_CHANGE_STYLE = 'WEBMAP_LAYER_CHANGE_STYLE';
 var WEBMAP_LAYER_CHANGE_DIMENSION = 'WEBMAP_LAYER_CHANGE_DIMENSION';
 var WEBMAP_LAYER_SET_DIMENSIONS = 'WEBMAP_LAYER_SET_DIMENSIONS';
-var WEBMAP_LAYER_SET_STYLES = 'WEBMAP_LAYER_SET_STYLES';
 var WEBMAP_LAYER_CHANGE_ENABLED = 'WEBMAP_LAYER_CHANGE_ENABLED';
 var WEBMAP_LAYER_DELETE = 'WEBMAP_LAYER_DELETE';
 var WEBMAP_LAYER_ERROR = 'WEBMAP_LAYER_ERROR';
@@ -398,6 +399,7 @@ var WEBMAP_SET_BASELAYERS = 'WEBMAP_SET_BASELAYERS';
 var WEBMAP_ADD_BASELAYER = 'WEBMAP_ADD_BASELAYER';
 var WEBMAP_ADD_AVAILABLE_BASELAYER = 'WEBMAP_ADD_AVAILABLE_BASELAYER';
 var WEBMAP_ADD_AVAILABLE_BASELAYERS = 'WEBMAP_ADD_AVAILABLE_BASELAYERS';
+var WEBMAP_UPDATE_LAYER_INFO = 'WEBMAP_UPDATE_LAYER_INFO';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -536,19 +538,6 @@ var layerSetDimensions = function layerSetDimensions(payload) {
     payload: payload
   };
 };
-/**
- * Action layerSetStyles is used automatically after calling the setLayers action. Contents is based on WMS GetCapabilities
- *
- * Example: layerSetStyles({service: someService,  name: 'layerName', styles: styleArray})
- * @param {object} payload consisting of service: string, name: string, styles: Style[]
- */
-
-var layerSetStyles = function layerSetStyles(payload) {
-  return {
-    type: WEBMAP_LAYER_SET_STYLES,
-    payload: payload
-  };
-};
 /**
  * Changes the name of the layer
  *
@@ -644,6 +633,12 @@ var addAvailableBaseLayers = function addAvailableBaseLayers(payload) {
     payload: payload
   };
 };
+var onUpdateLayerInformation = function onUpdateLayerInformation(payload) {
+  return {
+    type: WEBMAP_UPDATE_LAYER_INFO,
+    payload: payload
+  };
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -742,7 +737,6 @@ var actions$3 = /*#__PURE__*/Object.freeze({
   layerChangeEnabled: layerChangeEnabled,
   layerChangeDimension: layerChangeDimension,
   layerSetDimensions: layerSetDimensions,
-  layerSetStyles: layerSetStyles,
   layerChangeName: layerChangeName,
   layerChangeStyle: layerChangeStyle,
   layerDelete: layerDelete,
@@ -750,6 +744,7 @@ var actions$3 = /*#__PURE__*/Object.freeze({
   layerError: layerError,
   addAvailableBaseLayer: addAvailableBaseLayer,
   addAvailableBaseLayers: addAvailableBaseLayers,
+  onUpdateLayerInformation: onUpdateLayerInformation,
   serviceSetLayers: serviceSetLayers
 });
 
@@ -1097,18 +1092,6 @@ var getOverLayers = createSelector(getAllLayers, function (layers) {
     return layer.layerType === LayerType.overLayer;
   });
 });
-/**
- * Gets styles of the passed layer
- *
- * Example: layerStyles = getLayerStyles(store, 'layerId_1')
- * @param {object} store store: object - object from which the layers state will be extracted
- * @param {string} layerId layerId: string - Id of the layer
- * @returns {array} returnType: Style[] - array containing layer styles
- */
-
-var getLayerStyles = createSelector(getLayerById, function (layer) {
-  return layer && layer.styles ? layer.styles : [];
-});
 /**
  * Gets dimensions of the passed layer
  *
@@ -2638,8 +2621,8 @@ var servicesStore = function servicesStore(store) {
  */
 
 
-var getServiceIds = createSelector(servicesStore, function (store) {
-  return store ? store.allIds : [];
+var getServiceIds = createSelector(servicesStore, function (serviceState) {
+  return serviceState ? serviceState.allIds : [];
 });
 /**
  * Gets map services
@@ -2653,20 +2636,75 @@ var getServices = createSelector(servicesStore, function (store) {
   return store ? store.byId : {};
 });
 /**
- * Gets map layers from servicename
+ * Gets the service object by its url
  *
- * Example: layers = getServices(store, 'serviceName')
+ * Example: service = getServiceByName(store, 'serviceName')
  * @param {object} store store: object - Store object
- * @returns {array} returnType: ServiceLayer[]
+ * @returns {Service} returnType: Service
  */
 
-var getServiceLayersByName = function getServiceLayersByName(store, serviceName) {
-  if (store && store.services && store.services.byId && store.services.byId[serviceName] && store.services.byId[serviceName].layers) {
-    return store.services.byId[serviceName].layers;
+var getServiceByName = createSelector([servicesStore, function (state, serviceName) {
+  return serviceName;
+}], function (serviceState, serviceName) {
+  if (serviceState && serviceState.byId && serviceState.byId[serviceName]) {
+    return serviceState.byId[serviceName];
   }
 
   return null;
-};
+});
+/**
+ * Gets the layer from the store using the serviceUrl and layerName
+ *
+ * Example: layers = getLayersFromService(store, 'https://geoservices.knmi.nl/...')
+ * @param {object} store store: object - object from which the layers state will be extracted
+ * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+ * @returns {arrayr} returnType: ServiceLayer[] - All layers within the service object.
+ */
+
+var getLayersFromService$1 = createSelector(getServiceByName, function (service) {
+  return service && service.layers || null;
+});
+/**
+ * Gets the layer from the store using the serviceUrl and layerName
+ *
+ * Example: layer = getLayerFromService(store, 'https://geoservices.knmi.nl/...', 'radar')
+ * @param {object} store store: object - The application store
+ * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+ * @param {string}  layerName layerName: string - Name of the layer in the service
+ * @returns {ServiceLayer} returnType: ServiceLayer - The layer from the service object.
+ */
+
+var getLayerFromService = createSelector(function (store, serviceUrl) {
+  return getLayersFromService$1(store, serviceUrl);
+}, function (store, serviceUrl) {
+  return serviceUrl;
+}, function (store, serviceUrl, layerName) {
+  return layerName;
+}, function (layers, serviceUrl, layerName) {
+  if (!layers) return null;
+  var index = layers.findIndex(function (serviceLayer) {
+    return serviceLayer.name === layerName;
+  });
+
+  if (index === -1) {
+    return null;
+  }
+
+  return layers[index];
+});
+/**
+ * Gets the layers stylelist from the servicestore using the serviceUrl and layerName
+ *
+ * Example: layerStyles = getLayerStyles(store, layerService, layerName);
+ * @param {object} store store: object - store from which the layers state will be extracted
+ * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+ * @param {string}  layerName layerName: string - Name of the layer in the service
+ * @returns {array} returnType: Style[] - array containing layer styles
+ */
+
+var getLayerStyles = createSelector(getLayerFromService, function (layer) {
+  return layer && layer.styles ? layer.styles : [];
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2730,7 +2768,6 @@ var selectors = /*#__PURE__*/Object.freeze({
   getLayers: getLayers,
   getBaseLayers: getBaseLayers,
   getOverLayers: getOverLayers,
-  getLayerStyles: getLayerStyles,
   getLayerDimensions: getLayerDimensions,
   getLayerNonTimeDimensions: getLayerNonTimeDimensions,
   getLayerTimeDimension: getLayerTimeDimension,
@@ -2744,7 +2781,10 @@ var selectors = /*#__PURE__*/Object.freeze({
   getAvailableBaseLayersForMap: getAvailableBaseLayersForMap,
   getServiceIds: getServiceIds,
   getServices: getServices,
-  getServiceLayersByName: getServiceLayersByName
+  getServiceByName: getServiceByName,
+  getLayersFromService: getLayersFromService$1,
+  getLayerFromService: getLayerFromService,
+  getLayerStyles: getLayerStyles
 });
 
 /* *
@@ -2793,7 +2833,6 @@ var constants$1 = /*#__PURE__*/Object.freeze({
   WEBMAP_LAYER_CHANGE_STYLE: WEBMAP_LAYER_CHANGE_STYLE,
   WEBMAP_LAYER_CHANGE_DIMENSION: WEBMAP_LAYER_CHANGE_DIMENSION,
   WEBMAP_LAYER_SET_DIMENSIONS: WEBMAP_LAYER_SET_DIMENSIONS,
-  WEBMAP_LAYER_SET_STYLES: WEBMAP_LAYER_SET_STYLES,
   WEBMAP_LAYER_CHANGE_ENABLED: WEBMAP_LAYER_CHANGE_ENABLED,
   WEBMAP_LAYER_DELETE: WEBMAP_LAYER_DELETE,
   WEBMAP_LAYER_ERROR: WEBMAP_LAYER_ERROR,
@@ -2804,6 +2843,7 @@ var constants$1 = /*#__PURE__*/Object.freeze({
   WEBMAP_ADD_BASELAYER: WEBMAP_ADD_BASELAYER,
   WEBMAP_ADD_AVAILABLE_BASELAYER: WEBMAP_ADD_AVAILABLE_BASELAYER,
   WEBMAP_ADD_AVAILABLE_BASELAYERS: WEBMAP_ADD_AVAILABLE_BASELAYERS,
+  WEBMAP_UPDATE_LAYER_INFO: WEBMAP_UPDATE_LAYER_INFO,
   MAP_SERVICES_SET_LAYERS: MAP_SERVICES_SET_LAYERS
 });
 
@@ -3740,18 +3780,6 @@ var reducer$5 = function reducer() {
         });
       }
 
-    case WEBMAP_LAYER_SET_STYLES:
-      {
-        var _action$payload12 = action.payload,
-            styles = _action$payload12.styles,
-            _layerId9 = _action$payload12.layerId;
-        return produce(state, function (draft) {
-          if (draft.byId[_layerId9]) {
-            draft.byId[_layerId9].styles = styles;
-          }
-        });
-      }
-
     case WEBMAP_ADD_AVAILABLE_BASELAYER:
       {
         var _layer2 = action.payload.layer;
@@ -3783,6 +3811,23 @@ var reducer$5 = function reducer() {
         });
       }
 
+    case WEBMAP_UPDATE_LAYER_INFO:
+      {
+        var _action$payload12 = action.payload,
+            layerStyle = _action$payload12.layerStyle,
+            layerDimensions = _action$payload12.layerDimensions;
+        var layerStyleAction = {
+          payload: layerStyle,
+          type: WEBMAP_LAYER_CHANGE_STYLE
+        };
+        var intermediateState = layerStyle === null ? state : reducer(state, layerStyleAction);
+        var dimensionsAction = {
+          payload: layerDimensions,
+          type: WEBMAP_LAYER_SET_DIMENSIONS
+        };
+        return layerDimensions === null ? intermediateState : reducer(intermediateState, dimensionsAction);
+      }
+
     default:
       return state;
   }
@@ -4478,82 +4523,72 @@ var getMapBaseLayerActionsTargets = function getMapBaseLayerActionsTargets(state
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
 var ORIGIN_REACTMAPVIEWPARSELAYER = 'ReactMapViewParseLayer';
-var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSInstance, mapProperties, onMapUpdateAllDimensions, onLayerChangeStyle, onServiceSetLayers, onLayerSetStyles, onLayerSetDimensions) {
+var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSInstance, mapProperties, onUpdateLayerInformation) {
   var origin = ORIGIN_REACTMAPVIEWPARSELAYER;
   var service = WMGetServiceFromStore(wmLayer.service);
   /* Update list of layers for service */
 
   var done = function done(layers) {
-    onServiceSetLayers && onServiceSetLayers({
-      id: wmLayer.service,
-      name: wmLayer.title,
-      service: wmLayer.service,
-      layers: layers
-    });
-    /* Update style information in services for a layer */
-
-    onLayerSetStyles && onLayerSetStyles({
-      origin: origin,
-      layerId: wmLayer.id,
-      styles: wmLayer.getStyles()
-    });
-    /* Select first style in service for a layer */
-
-    onLayerChangeStyle && onLayerChangeStyle({
-      origin: origin,
-      layerId: wmLayer.ReactWMJSLayerId,
-      style: wmLayer.currentStyle // || wmjsLayer.getStyles().length > 0 ? wmjsLayer.getStyles()[0].Name.value : 'default'
-
-    });
-    /* Trigger update of all map dimensions */
-
-    onMapUpdateAllDimensions && onMapUpdateAllDimensions({
-      origin: origin,
-      mapId: mapId,
-      dimensions: webMapJSInstance.mapdimensions.map(function (_ref) {
-        var name = _ref.name,
-            units = _ref.units,
-            currentValue = _ref.currentValue,
-            synced = _ref.synced;
-        var reactDim = mapProperties.dimensions && mapProperties.dimensions.find(function (dim) {
-          return dim.name === name;
-        });
-        var newDimValue = reactDim && reactDim.currentValue || currentValue;
-        var newDimSynced = reactDim && reactDim.synced || synced;
-        return {
-          name: name,
-          units: units,
-          currentValue: newDimValue,
-          synced: newDimSynced
-        };
-      })
-    });
-    /* Trigger update layer dimensions */
-
-    onLayerSetDimensions && onLayerSetDimensions({
-      origin: origin,
-      layerId: wmLayer.id,
-      dimensions: wmLayer.dimensions.map(function (_ref2) {
-        var name = _ref2.name,
-            units = _ref2.units,
-            currentValue = _ref2.currentValue,
-            dimMinValue = _ref2.dimMinValue,
-            dimMaxValue = _ref2.dimMaxValue,
-            dimTimeInterval = _ref2.dimTimeInterval,
-            values = _ref2.values,
-            synced = _ref2.synced;
-        return {
-          name: name,
-          units: units,
-          currentValue: currentValue,
-          maxValue: dimMaxValue,
-          minValue: dimMinValue,
-          timeInterval: dimTimeInterval,
-          values: values,
-          synced: synced
-        };
-      })
-    });
+    var updateObject = {
+      origin: ORIGIN_REACTMAPVIEWPARSELAYER,
+      serviceLayers: {
+        id: wmLayer.service,
+        name: wmLayer.title,
+        service: wmLayer.service,
+        layers: layers
+      },
+      layerStyle: {
+        origin: origin,
+        layerId: wmLayer.ReactWMJSLayerId,
+        style: wmLayer.currentStyle
+      },
+      mapDimensions: {
+        origin: origin,
+        mapId: mapId,
+        dimensions: webMapJSInstance.mapdimensions.map(function (_ref) {
+          var name = _ref.name,
+              units = _ref.units,
+              currentValue = _ref.currentValue,
+              synced = _ref.synced;
+          var reactDim = mapProperties.dimensions && mapProperties.dimensions.find(function (dim) {
+            return dim.name === name;
+          });
+          var newDimValue = reactDim && reactDim.currentValue || currentValue;
+          var newDimSynced = reactDim && reactDim.synced || synced;
+          return {
+            name: name,
+            units: units,
+            currentValue: newDimValue,
+            synced: newDimSynced
+          };
+        })
+      },
+      layerDimensions: {
+        origin: origin,
+        layerId: wmLayer.id,
+        dimensions: wmLayer.dimensions.map(function (_ref2) {
+          var name = _ref2.name,
+              units = _ref2.units,
+              currentValue = _ref2.currentValue,
+              dimMinValue = _ref2.dimMinValue,
+              dimMaxValue = _ref2.dimMaxValue,
+              dimTimeInterval = _ref2.dimTimeInterval,
+              values = _ref2.values,
+              synced = _ref2.synced;
+          return {
+            name: name,
+            units: units,
+            currentValue: currentValue,
+            maxValue: dimMaxValue,
+            minValue: dimMinValue,
+            timeInterval: dimTimeInterval,
+            values: values,
+            synced: synced
+          };
+        })
+      }
+    };
+    onUpdateLayerInformation && onUpdateLayerInformation(updateObject);
   };
 
   service.getLayerObjectsFlat(done, function () {// do nothing
@@ -4564,7 +4599,7 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSIns
 
 var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
     _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
-    _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(layerActionsSaga),
+    _marked3$4 = /*#__PURE__*/regeneratorRuntime.mark(layerActionsSaga),
     _marked4$2 = /*#__PURE__*/regeneratorRuntime.mark(addLayerActionsSaga),
     _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerActionsSaga),
     _marked6$1 = /*#__PURE__*/regeneratorRuntime.mark(moveLayerActionsSaga),
@@ -4674,7 +4709,7 @@ function layerActionsSaga(_ref3) {
           return _context3.stop();
       }
     }
-  }, _marked3$3);
+  }, _marked3$4);
 }
 function addLayerActionsSaga(_ref4) {
   var payload, type, targets;
@@ -4914,7 +4949,7 @@ function rootSaga$4() {
 
 var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
     _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
-    _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
+    _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
     _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
 function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
   var group;
@@ -5030,7 +5065,7 @@ function linkGroupTargetSaga(_ref2) {
           return _context3.stop();
       }
     }
-  }, _marked3$2);
+  }, _marked3$3);
 }
 
 function rootSaga$3() {
@@ -5122,6 +5157,9 @@ var TooltipSelect = function TooltipSelect(_a) {
       onChangeMouseWheel = _a$onChangeMouseWheel === void 0 ? function () {} : _a$onChangeMouseWheel,
       props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel"]);
 
+  props.disableUnderline;
+      var otherProps = __rest(props, ["disableUnderline"]);
+
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       selectOpen = _React$useState2[0],
@@ -5193,7 +5231,7 @@ var TooltipSelect = function TooltipSelect(_a) {
         paper: classes.select
       }
     }
-  }, props)));
+  }, otherProps)));
 };
 
 /* *
@@ -5478,7 +5516,7 @@ var getDialogSource = createSelector(getDialogDetailsByType, function (details)
 
 var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(registerMapUISaga),
     _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(unregisterUIMapSaga),
-    _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
+    _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
 function registerMapUISaga() {
   var fields, source;
   return regeneratorRuntime.wrap(function registerMapUISaga$(_context) {
@@ -5585,7 +5623,7 @@ function rootSaga$2() {
           return _context3.stop();
       }
     }
-  }, _marked3$1);
+  }, _marked3$2);
 }
 
 /* *
@@ -6258,6 +6296,17 @@ var reducer$2 = function reducer() {
         }, state);
       }
 
+    case WEBMAP_UPDATE_LAYER_INFO:
+      {
+        var mapDimensions = action.payload.mapDimensions;
+        if (mapDimensions === null) return state;
+        var mapAction = {
+          payload: mapDimensions,
+          type: WEBMAP_MAP_UPDATE_ALL_DIMENSIONS
+        };
+        return reducer(state, mapAction);
+      }
+
     default:
       return state;
   }
@@ -6298,6 +6347,17 @@ var reducer$1 = function reducer() {
         if (!draft.allIds.includes(action.payload.service)) draft.allIds.push(action.payload.service);
       });
 
+    case WEBMAP_UPDATE_LAYER_INFO:
+      {
+        var serviceLayers = action.payload.serviceLayers;
+        if (serviceLayers === null) return state;
+        var mapAction = {
+          payload: serviceLayers,
+          type: MAP_SERVICES_SET_LAYERS
+        };
+        return reducer(state, mapAction);
+      }
+
     default:
       return state;
   }
@@ -6305,7 +6365,7 @@ var reducer$1 = function reducer() {
 
 var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
     _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
-    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerSaga),
+    _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerSaga),
     _marked4 = /*#__PURE__*/regeneratorRuntime.mark(updateAnimation),
     _marked5 = /*#__PURE__*/regeneratorRuntime.mark(setLayerDimensionsSaga),
     _marked6 = /*#__PURE__*/regeneratorRuntime.mark(toggleAutoUpdateSaga),
@@ -6408,7 +6468,7 @@ function deleteLayerSaga(_ref3) {
           return _context3.stop();
       }
     }
-  }, _marked3);
+  }, _marked3$1);
 }
 function updateAnimation(mapId, maxValue) {
   var animationStart, animationStartUnix, animationEnd, animationEndUnix, t, deltaT, start, end, isAnimating$1, timeStep;
@@ -6478,66 +6538,76 @@ function updateAnimation(mapId, maxValue) {
   }, _marked4);
 }
 function setLayerDimensionsSaga(_ref4) {
-  var payload, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance;
+  var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance;
   return regeneratorRuntime.wrap(function setLayerDimensionsSaga$(_context5) {
     while (1) {
       switch (_context5.prev = _context5.next) {
         case 0:
           payload = _ref4.payload;
           _context5.prev = 1;
-          dimensions = payload.dimensions, layerId = payload.layerId;
-          _context5.next = 5;
-          return select(getLayerById, layerId);
+          layerDimensions = payload.layerDimensions;
+
+          if (layerDimensions) {
+            _context5.next = 5;
+            break;
+          }
+
+          return _context5.abrupt("return");
 
         case 5:
+          dimensions = layerDimensions.dimensions, layerId = layerDimensions.layerId;
+          _context5.next = 8;
+          return select(getLayerById, layerId);
+
+        case 8:
           layer = _context5.sent;
 
           if (layer) {
-            _context5.next = 8;
+            _context5.next = 11;
             break;
           }
 
           return _context5.abrupt("return");
 
-        case 8:
+        case 11:
           newTimeDimension = dimensions.find(function (dimension) {
             return dimension.name === 'time';
           });
           mapId = layer.mapId;
-          _context5.next = 12;
+          _context5.next = 15;
           return select(getActiveLayerId, mapId);
 
-        case 12:
+        case 15:
           activeLayerId = _context5.sent;
-          _context5.next = 15;
+          _context5.next = 18;
           return select(isAutoUpdating, mapId);
 
-        case 15:
+        case 18:
           shouldAutoUpdate = _context5.sent;
-          _context5.next = 18;
+          _context5.next = 21;
           return select(getLayerTimeDimension, layerId);
 
-        case 18:
+        case 21:
           prevTimeDimension = _context5.sent;
-          _context5.next = 21;
+          _context5.next = 24;
           return select(isAnimating, mapId);
 
-        case 21:
+        case 24:
           isAnimating$1 = _context5.sent;
           webmapInstance = getWMJSMapById(mapId);
 
           if (!(layerId === activeLayerId && // only update the active layer
           shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue)) {
-            _context5.next = 31;
+            _context5.next = 34;
             break;
           }
 
           if (isAnimating$1) {
-            _context5.next = 27;
+            _context5.next = 30;
             break;
           }
 
-          _context5.next = 27;
+          _context5.next = 30;
           return put(layerChangeDimension({
             layerId: layerId,
             origin: 'setLayerDimensionSaga',
@@ -6547,39 +6617,39 @@ function setLayerDimensionsSaga(_ref4) {
             }
           }));
 
-        case 27:
-          _context5.next = 29;
+        case 30:
+          _context5.next = 32;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 29:
-          _context5.next = 34;
+        case 32:
+          _context5.next = 37;
           break;
 
-        case 31:
+        case 34:
           if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue)) {
-            _context5.next = 34;
+            _context5.next = 37;
             break;
           }
 
-          _context5.next = 34;
+          _context5.next = 37;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 34:
-          _context5.next = 39;
+        case 37:
+          _context5.next = 42;
           break;
 
-        case 36:
-          _context5.prev = 36;
+        case 39:
+          _context5.prev = 39;
           _context5.t0 = _context5["catch"](1);
           // eslint-disable-next-line no-console
           console.warn(_context5.t0);
 
-        case 39:
+        case 42:
         case "end":
           return _context5.stop();
       }
     }
-  }, _marked5, null, [[1, 36]]);
+  }, _marked5, null, [[1, 39]]);
 }
 function toggleAutoUpdateSaga(_ref5) {
   var payload, shouldAutoUpdate, mapId, layerId, timeDimension;
@@ -6661,7 +6731,7 @@ function rootSaga$1() {
 
         case 6:
           _context7.next = 8;
-          return takeLatest(WEBMAP_LAYER_SET_DIMENSIONS, setLayerDimensionsSaga);
+          return takeLatest(WEBMAP_UPDATE_LAYER_INFO, setLayerDimensionsSaga);
 
         case 8:
           _context7.next = 10;
@@ -6704,6 +6774,7 @@ var moduleConfig = {
 var initialState = {
   filters: {
     searchFilter: '',
+    activeServices: [],
     keywords: [],
     addedServices: []
   }
@@ -6721,6 +6792,43 @@ var reducer = function reducer() {
         });
       }
 
+    case 'LAYER_SELECT_SET_ACTIVE_SERVICES':
+      {
+        var activeServices = action.payload.activeServices;
+        return produce(state, function (draft) {
+          activeServices.forEach(function (service) {
+            if (draft.filters.activeServices.filter(function (s) {
+              return s.id === service;
+            }).length === 0) draft.filters.activeServices.push({
+              id: service,
+              enabled: true
+            });
+          });
+        });
+      }
+
+    case 'LAYER_SELECT_ENABLE_ACTIVE_SERVICE':
+      {
+        var service = action.payload.service;
+        return produce(state, function (draft) {
+          var index = draft.filters.activeServices.findIndex(function (s) {
+            return s.id === service;
+          });
+          draft.filters.activeServices[index].enabled = true;
+        });
+      }
+
+    case 'LAYER_SELECT_DISABLE_ACTIVE_SERVICE':
+      {
+        var _service = action.payload.service;
+        return produce(state, function (draft) {
+          var index = draft.filters.activeServices.findIndex(function (s) {
+            return s.id === _service;
+          });
+          draft.filters.activeServices[index].enabled = false;
+        });
+      }
+
     case 'LAYER_SELECT_ADD_NEW_KEYWORDS':
       {
         return produce(state, function (draft) {
@@ -6789,6 +6897,9 @@ var reducer = function reducer() {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 var LAYER_SELECT_SET_SEARCH_FILTER = 'LAYER_SELECT_SET_SEARCH_FILTER';
+var LAYER_SELECT_SET_ACTIVE_SERVICES = 'LAYER_SELECT_SET_ACTIVE_SERVICES';
+var LAYER_SELECT_DISABLE_ACTIVE_SERVICE = 'LAYER_SELECT_DISABLE_ACTIVE_SERVICE';
+var LAYER_SELECT_ENABLE_ACTIVE_SERVICE = 'LAYER_SELECT_ENABLE_ACTIVE_SERVICE';
 var LAYER_SELECT_ADD_NEW_KEYWORDS = 'LAYER_SELECT_ADD_NEW_KEYWORDS';
 
 /* *
@@ -6821,6 +6932,45 @@ var setSearchFilter = function setSearchFilter(payload) {
   };
 };
 /**
+ * Sets the given array of string as active services
+ *
+ * Example: setActiveServices({ activeServices: ['service-1', 'service-2'] })
+ * @param {string} payload { activeServices: string[] }
+ */
+
+var setActiveServices = function setActiveServices(payload) {
+  return {
+    type: LAYER_SELECT_SET_ACTIVE_SERVICES,
+    payload: payload
+  };
+};
+/**
+ * Activates given service in the activeServices array
+ *
+ * Example: enableActiveService({ serviceId: 'service-1' })
+ * @param {string} payload { serviceId: string }
+ */
+
+var enableActiveService = function enableActiveService(payload) {
+  return {
+    type: LAYER_SELECT_ENABLE_ACTIVE_SERVICE,
+    payload: payload
+  };
+};
+/**
+ * Disables given service in the activeServices array
+ *
+ * Example: disableActiveService({ serviceId: 'service-1' })
+ * @param {string} payload { serviceId: string }
+ */
+
+var disableActiveService = function disableActiveService(payload) {
+  return {
+    type: LAYER_SELECT_DISABLE_ACTIVE_SERVICE,
+    payload: payload
+  };
+};
+/*
  * Sets the given keywords to Layer Select store
  *
  * Example: addNewKeywords({ keywords: ['keyword1', 'keyword2'] })
@@ -6834,11 +6984,12 @@ var addNewKeywords = function addNewKeywords(payload) {
   };
 };
 
-var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
-    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
-function newServiceAddedSaga(capturedAction) {
+var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSagaUpdateKeywords),
+    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSagaUpdateActiveServices),
+    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
+function newServiceAddedSagaUpdateKeywords(capturedAction) {
   var addedService, serviceName, keywords;
-  return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
+  return regeneratorRuntime.wrap(function newServiceAddedSagaUpdateKeywords$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         case 0:
@@ -6870,21 +7021,48 @@ function newServiceAddedSaga(capturedAction) {
     }
   }, _marked);
 }
-function rootSaga() {
-  return regeneratorRuntime.wrap(function rootSaga$(_context2) {
+function newServiceAddedSagaUpdateActiveServices() {
+  var services;
+  return regeneratorRuntime.wrap(function newServiceAddedSagaUpdateActiveServices$(_context2) {
     while (1) {
       switch (_context2.prev = _context2.next) {
         case 0:
           _context2.next = 2;
-          return takeEvery(MAP_SERVICES_SET_LAYERS, newServiceAddedSaga);
+          return select(getServiceIds);
 
         case 2:
+          services = _context2.sent;
+          _context2.next = 5;
+          return put(setActiveServices({
+            activeServices: services
+          }));
+
+        case 5:
         case "end":
           return _context2.stop();
       }
     }
   }, _marked2);
 }
+function rootSaga() {
+  return regeneratorRuntime.wrap(function rootSaga$(_context3) {
+    while (1) {
+      switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.next = 2;
+          return takeEvery(MAP_SERVICES_SET_LAYERS, newServiceAddedSagaUpdateKeywords);
+
+        case 2:
+          _context3.next = 4;
+          return takeLatest(MAP_SERVICES_SET_LAYERS, newServiceAddedSagaUpdateActiveServices);
+
+        case 4:
+        case "end":
+          return _context3.stop();
+      }
+    }
+  }, _marked3);
+}
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -7028,7 +7206,7 @@ var WMSLayerTreeHeader = function WMSLayerTreeHeader(_ref) {
     container: true,
     direction: "row",
     spacing: 1,
-    justify: "space-between"
+    justifyContent: "space-between"
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React.createElement(InputLabel, {
@@ -7045,7 +7223,8 @@ var WMSLayerTreeHeader = function WMSLayerTreeHeader(_ref) {
     style: {
       padding: 3
     },
-    onClick: onClickReload
+    onClick: onClickReload,
+    size: "large"
   }, /*#__PURE__*/React.createElement(Cached, {
     fontSize: "small"
   })))));
@@ -7582,7 +7761,7 @@ var radarLayer$1 = {
   name: 'RAD_NL25_PCP_CM',
   format: 'image/png',
   enabled: true,
-  style: 'knmiradar/nearest',
+  style: 'radar/nearest',
   id: generateLayerId(),
   layerType: LayerType.mapLayer
 };
@@ -8054,7 +8233,8 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
     fullWidth: true,
     disabled: loading,
     error: urlError !== '',
-    helperText: urlError
+    helperText: urlError,
+    variant: "standard"
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 2,
@@ -8063,7 +8243,8 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
     "data-testid": "add-service",
     onClick: handleAddServiceURL,
     color: "primary",
-    disabled: loading
+    disabled: loading,
+    size: "large"
   }, /*#__PURE__*/React.createElement(Add, null)), loading && /*#__PURE__*/React.createElement(CircularProgress, {
     size: 35,
     className: classes.loadingButton
@@ -8154,7 +8335,8 @@ var AddLayersButton = function AddLayersButton(_ref) {
     className: classes.button,
     disableRipple: true,
     "data-testid": "addLayersButton",
-    ref: ref
+    ref: ref,
+    size: "large"
   }, /*#__PURE__*/React.createElement(Add, null))), /*#__PURE__*/React.createElement(AddLayersPopup, {
     open: open,
     handleClose: handleClose,
@@ -8294,7 +8476,8 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
     className: classes.button,
     id: "layerSelectButton",
     "data-testid": "layerSelectButton",
-    disableRipple: true
+    disableRipple: true,
+    size: "large"
   }, /*#__PURE__*/React.createElement(Add, null)));
 };
 
@@ -8408,6 +8591,12 @@ var useTooltipContainerStyles = makeStyles(function (theme) {
       color: function color(isEnabled) {
         return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultText.rgba : theme.palette.geowebColors.layerManager.tableRowDisabledText.rgba;
       },
+      '& .MuiOutlinedInput-input': {
+        padding: '6px 24px 6px 8px'
+      },
+      '& .MuiOutlinedInput-notchedOutline': {
+        borderColor: 'transparent!important'
+      },
       '&:hover .MuiSelect-select': {
         backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
       },
@@ -8514,7 +8703,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     direction: "row",
-    justify: "flex-start",
+    justifyContent: "flex-start",
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
@@ -8632,6 +8821,9 @@ var useStyles$E = makeStyles(function (theme) {
           return isActive ? theme.palette.geowebColors.buttons.primaryMouseover.fill : theme.palette.geowebColors.layerManager.tableRowMouseover.rgba;
         }
       }
+    },
+    popper: {
+      pointerEvents: 'none'
     }
   });
 });
@@ -8660,7 +8852,10 @@ var LayerManagerButton = function LayerManagerButton(_a) {
 
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltipTitle,
-    placement: "top"
+    placement: "top",
+    classes: {
+      popper: classes.popper
+    }
   }, /*#__PURE__*/React.createElement(IconButton, Object.assign({
     size: "small",
     onClick: handleClick,
@@ -8982,7 +9177,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
     onMouseLeave: onMouseLeave,
     onFocus: onFocus,
     onBlur: onBlur
-  }, /*#__PURE__*/React.createElement("div", null, Math.round(currentOpacity * 100), " %"))), open ? /*#__PURE__*/React.createElement("div", {
+  }, "".concat(Math.round(currentOpacity * 100), "  %"))), open ? /*#__PURE__*/React.createElement("div", {
     className: classes.sliderBackground
   }, /*#__PURE__*/React.createElement("div", {
     className: sliderClasses.sliderHeader
@@ -9672,11 +9867,14 @@ var DimensionSelectConnect = function DimensionSelectConnect(_ref) {
 var RenderStylesConnect = function RenderStylesConnect(_ref) {
   var layerId = _ref.layerId;
   var dispatch = useDispatch();
+  var layerService = useSelector(function (store) {
+    return getLayerService(store, layerId);
+  });
   var layerName = useSelector(function (store) {
     return getLayerName(store, layerId);
   });
   var layerStyles = useSelector(function (store) {
-    return getLayerStyles(store, layerId);
+    return getLayerStyles(store, layerService, layerName);
   });
   var currentLayerStyle = useSelector(function (store) {
     return getLayerStyle(store, layerId);
@@ -9729,7 +9927,7 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
     return getLayerEnabled(store, layerId);
   });
   var layers = useSelector(function (store) {
-    return getServiceLayersByName(store, layerService);
+    return getLayersFromService$1(store, layerService);
   });
   var layerChangeName$1 = React.useCallback(function (_ref2) {
     var layerId = _ref2.layerId,
@@ -9956,6 +10154,7 @@ var useStyles$v = makeStyles(function (theme) {
       '&:hover': {
         backgroundColor: 'inherit'
       },
+      height: 32,
       color: function color(_ref) {
         var isDisabled = _ref.isDisabled;
         return isDisabled ? theme.palette.geowebColors.layerManager.tableRowDefaultIcon.rgba : theme.palette.geowebColors.layerManager.tableRowDisabledIcon.fill;
@@ -10447,7 +10646,8 @@ var useButtonStyles = makeStyles(function (theme) {
         backgroundColor: theme.palette.geowebColors.buttons.disabled.fill,
         '& svg path, svg text': {
           fill: theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
-        }
+        },
+        border: "1px solid ".concat(theme.palette.geowebColors.buttons.disabled.fill)
       },
       '&.Mui-selected': {
         backgroundColor: theme.palette.geowebColors.buttons.primaryActive.fill,
@@ -10469,7 +10669,9 @@ var ToggleIconButton = function ToggleIconButton(_a) {
   var active = _a.active,
       width = _a.width,
       children = _a.children,
-      props = __rest(_a, ["active", "width", "children"]);
+      _a$value = _a.value,
+      value = _a$value === void 0 ? 0 : _a$value,
+      props = __rest(_a, ["active", "width", "children", "value"]);
 
   var classes = useButtonStyles({
     width: width
@@ -10478,7 +10680,7 @@ var ToggleIconButton = function ToggleIconButton(_a) {
     className: classes.button,
     disableRipple: true,
     selected: active,
-    value: 0
+    value: value
   }, props), children);
 };
 
@@ -10554,10 +10756,57 @@ var KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_ref) {
 var layerSelectStore = function layerSelectStore(store) {
   return store && store.layerSelect ? store.layerSelect : null;
 };
+/**
+ * Returns search filter string
+ *
+ * Example getSearchFilter(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: string
+ */
+
 
 var getSearchFilter = createSelector(layerSelectStore, function (store) {
   return store ? store.filters.searchFilter : '';
 });
+/**
+ * Returns active services array
+ *
+ * Example getActiveServices(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: array of active services
+ */
+
+var getActiveServices = createSelector(layerSelectStore, function (store) {
+  var _a;
+
+  return store ? (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices : [];
+});
+/**
+ * Returns all ids of enabled services
+ *
+ * Example getEnabledServiceIds(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: array of service ids that are enabled
+ */
+
+var getEnabledServiceIds = createSelector(layerSelectStore, function (store) {
+  var _a, _b;
+
+  var enabledServices = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.filter(function (service) {
+    return service.enabled;
+  })) !== null && _b !== void 0 ? _b : [];
+  return enabledServices.map(function (service) {
+    return service.id;
+  });
+});
+/**
+ * Returns all keywords
+ *
+ * Example getKeywords(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: array of keyword objects
+ */
+
 var getKeywords = createSelector(layerSelectStore, function (store) {
   return store ? store.filters.keywords : [];
 });
@@ -10593,12 +10842,23 @@ var useStyles$r = makeStyles(function (theme) {
       },
       '&.MuiButton-outlined': {
         color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
+      },
+      color: theme.palette.common.white
+    },
+    cancelButton: {
+      border: "1px solid ".concat(theme.palette.action.disabled),
+      color: theme.palette.text.secondary,
+      '&:hover': {
+        border: "1px solid ".concat(theme.palette.action.disabled)
       }
     },
     container: {
       '& .MuiDialog-paper': {
         backgroundColor: theme.palette.geowebColors.cards.cardContainer
       }
+    },
+    dialogContent: {
+      padding: '8px 24px'
     }
   });
 });
@@ -10630,31 +10890,36 @@ var ServicePopup = function ServicePopup(_ref) {
   var classes = useStyles$r();
   return /*#__PURE__*/React.createElement(Dialog, {
     open: isOpen,
-    disableBackdropClick: true,
     hideBackdrop: hideBackdrop,
     fullWidth: true,
     maxWidth: "xs",
     className: classes.container
   }, /*#__PURE__*/React.createElement(DialogTitle, {
-    className: classes.dialogTitle,
-    disableTypography: true
+    className: classes.dialogTitle
   }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h5"
+    variant: "h5",
+    component: "span"
   }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React.createElement(IconButton, {
     size: "small",
     onClick: closePopup,
     "data-testid": "ClosePopupButtonCross"
-  }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(TextField, {
+  }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, {
+    className: classes.dialogContent
+  }, /*#__PURE__*/React.createElement(TextField, {
     className: classes.textField,
     variant: "filled",
     label: "Service name"
-  })), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(TextField, {
+  })), /*#__PURE__*/React.createElement(DialogContent, {
+    className: classes.dialogContent
+  }, /*#__PURE__*/React.createElement(TextField, {
     className: classes.textField,
     variant: "filled",
     label: "Service URL",
     defaultValue: url,
     id: "service-url"
-  })), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(TextField, {
+  })), /*#__PURE__*/React.createElement(DialogContent, {
+    className: classes.dialogContent
+  }, /*#__PURE__*/React.createElement(TextField, {
     className: classes.textField,
     variant: "filled",
     multiline: true,
@@ -10663,7 +10928,7 @@ var ServicePopup = function ServicePopup(_ref) {
     helperText: "Short description of what this service does"
   })), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
     variant: "outlined",
-    className: classes.button,
+    className: classes.cancelButton,
     onClick: closePopup,
     "data-testid": "ClosePopupButtonCancel"
   }, "cancel"), /*#__PURE__*/React.createElement(Button, {
@@ -10729,7 +10994,8 @@ var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
     edge: "end",
     onClick: function onClick() {
       onClickClear();
-    }
+    },
+    size: "large"
   }, clearIcon));
   if (isURL(localSearchString)) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -10755,7 +11021,8 @@ var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
     placement: "top"
   }, /*#__PURE__*/React__default.createElement(IconButton, {
     className: classes.iconButton,
-    edge: "end"
+    edge: "end",
+    size: "large"
   }, searchIcon));
 };
 
@@ -10882,7 +11149,8 @@ var useStyles$p = makeStyles(function (theme) {
 var LayerList = function LayerList(_ref) {
   var services = _ref.services,
       serviceIds = _ref.serviceIds,
-      layerSelectHeight = _ref.layerSelectHeight;
+      layerSelectHeight = _ref.layerSelectHeight,
+      searchString = _ref.searchString;
   var classes = useStyles$p();
 
   var _React$useState = React.useState(0),
@@ -10890,11 +11158,20 @@ var LayerList = function LayerList(_ref) {
       numberOfLayers = _React$useState2[0],
       setNumberOfLayers = _React$useState2[1];
 
+  var filterLayersFromService = React.useCallback(function (serviceId) {
+    if (searchString === '') {
+      return services[serviceId].layers;
+    }
+
+    return services[serviceId].layers.filter(function (layer) {
+      return searchString === '' || !!layer.name && layer.name.toLowerCase().includes(searchString.toLowerCase()) || !!layer.text && layer.text.toLowerCase().includes(searchString.toLowerCase()) || !!layer["abstract"] && layer["abstract"].toLowerCase().includes(searchString.toLowerCase());
+    });
+  }, [services, searchString]);
   React.useEffect(function () {
     setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
-      return totalNumberOfLayers + services[serviceId].layers.length;
+      return totalNumberOfLayers + filterLayersFromService(serviceId).length;
     }, 0));
-  }, [serviceIds, services]);
+  }, [serviceIds, filterLayersFromService]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "layerList"
   }, /*#__PURE__*/React.createElement("div", {
@@ -10905,7 +11182,7 @@ var LayerList = function LayerList(_ref) {
       overflow: 'auto'
     }
   }, serviceIds.map(function (serviceId) {
-    return services[serviceId].layers.map(function (layer) {
+    return filterLayersFromService(serviceId).map(function (layer) {
       return /*#__PURE__*/React.createElement("div", {
         key: "".concat(serviceId, "-").concat(layer.name),
         className: classes.layerRow,
@@ -10943,16 +11220,20 @@ var LayerList = function LayerList(_ref) {
 
 var LayerListConnect = function LayerListConnect(_ref) {
   var layerSelectHeight = _ref.layerSelectHeight;
-  var allServiceIds = useSelector(function (store) {
-    return getServiceIds(store);
-  });
-  var allServices = useSelector(function (store) {
+  var services = useSelector(function (store) {
     return getServices(store);
   });
+  var enabledServiceIds = useSelector(function (store) {
+    return getEnabledServiceIds(store);
+  });
+  var searchString = useSelector(function (store) {
+    return getSearchFilter(store);
+  });
   return /*#__PURE__*/React.createElement(LayerList, {
-    services: allServices,
-    serviceIds: allServiceIds,
-    layerSelectHeight: layerSelectHeight
+    services: services,
+    serviceIds: enabledServiceIds,
+    layerSelectHeight: layerSelectHeight,
+    searchString: searchString
   });
 };
 
@@ -10979,41 +11260,118 @@ var useStyles$o = makeStyles(function (theme) {
       margin: '0 8px 0 0',
       padding: '5px 12px 7px',
       borderRadius: '20px',
-      border: "solid 1px ".concat(theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat),
-      backgroundColor: theme.palette.geowebColors.buttons.surfaceIconDefault.fill,
-      color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
+      border: function border(_ref) {
+        var isEnabled = _ref.isEnabled;
+        return isEnabled ? "solid 1px ".concat(theme.palette.geowebColors.buttons.primaryActive.fill) : "solid 1px ".concat(theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat);
+      },
+      backgroundColor: function backgroundColor(_ref2) {
+        var isEnabled = _ref2.isEnabled;
+        return isEnabled ? theme.palette.geowebColors.buttons.primaryActive.fill : theme.palette.geowebColors.buttons.surfaceIconDefault.fill;
+      },
+      color: function color(_ref3) {
+        var isEnabled = _ref3.isEnabled;
+        return isEnabled ? theme.palette.geowebColors.typographyAndIcons.buttonIcon : theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat;
+      },
       "float": 'left',
       whiteSpace: 'nowrap',
       '&:hover': {
-        backgroundColor: theme.palette.geowebColors.buttons.flatMouseover.fill,
+        backgroundColor: function backgroundColor(_ref4) {
+          var isEnabled = _ref4.isEnabled;
+          return isEnabled ? theme.palette.geowebColors.buttons.primaryMouseover.fill : theme.palette.geowebColors.buttons.flatMouseover.fill;
+        },
+        border: function border(_ref5) {
+          var isEnabled = _ref5.isEnabled;
+          return isEnabled ? "solid 1px ".concat(theme.palette.geowebColors.buttons.primaryMouseover.fill) : "solid 1px ".concat(theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat);
+        },
         cursor: 'pointer'
       }
     }
   });
 });
 
-var ServiceChip = function ServiceChip(_ref) {
+var ServiceChip = function ServiceChip(_ref6) {
+  var _ref6$all = _ref6.all,
+      all = _ref6$all === void 0 ? false : _ref6$all,
+      service = _ref6.service,
+      isEnabled = _ref6.isEnabled,
+      toggleChip = _ref6.toggleChip;
+  var classes = useStyles$o({
+    isEnabled: isEnabled
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    className: classes.chip,
+    "data-testid": all ? 'serviceChipAll' : 'serviceChip',
+    onClick: function onClick() {
+      return toggleChip(all ? 'all' : service && service.service);
+    },
+    onKeyPress: function onKeyPress() {
+      return toggleChip(all ? 'all' : service && service.service);
+    }
+  }, service ? service.name : 'All');
+};
+
+/* *
+ * 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 ServiceChipConnect = function ServiceChipConnect(_ref) {
   var _ref$all = _ref.all,
       all = _ref$all === void 0 ? false : _ref$all,
-      service = _ref.service;
-  var classes = useStyles$o();
+      service = _ref.service,
+      isEnabled = _ref.isEnabled;
+  var dispatch = useDispatch();
+  var activeServices = useSelector(function (store) {
+    return getActiveServices(store);
+  });
 
-  if (all) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classes.chip,
-      "data-testid": "serviceChipAll"
-    }, "All");
-  }
+  var toggleChip = function toggleChip(service) {
+    var _a;
 
-  if (service && service.name) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classes.chip,
-      "data-testid": "serviceChip"
-    }, service.name);
-  }
+    if (service === 'all') {
+      if (activeServices.every(function (activeService) {
+        return activeService.enabled;
+      })) activeServices.forEach(function (s) {
+        if (s.enabled) dispatch(disableActiveService({
+          service: s.id
+        }));
+      });else activeServices.forEach(function (s) {
+        if (!s.enabled) dispatch(enableActiveService({
+          service: s.id
+        }));
+      });
+    } else if ((_a = activeServices.find(function (activeService) {
+      return activeService.id === service;
+    })) === null || _a === void 0 ? void 0 : _a.enabled) {
+      dispatch(disableActiveService({
+        service: service
+      }));
+    } else {
+      dispatch(enableActiveService({
+        service: service
+      }));
+    }
+  };
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.chip
+  return /*#__PURE__*/React.createElement(ServiceChip, {
+    service: service,
+    all: all,
+    toggleChip: toggleChip,
+    isEnabled: isEnabled
   });
 };
 
@@ -11037,7 +11395,8 @@ var useStyles$n = makeStyles(function (theme) {
       maxWidth: function maxWidth(_ref3) {
         var maxWidthValue = _ref3.maxWidthValue;
         return maxWidthValue;
-      }
+      },
+      fontSize: '0.875rem'
     },
     scrollArrowLeft: {
       width: '120px',
@@ -11070,7 +11429,8 @@ var useStyles$n = makeStyles(function (theme) {
 
 var ServiceList = function ServiceList(_ref4) {
   var layerSelectWidth = _ref4.layerSelectWidth,
-      services = _ref4.services;
+      services = _ref4.services,
+      activeServices = _ref4.activeServices;
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -11098,6 +11458,9 @@ var ServiceList = function ServiceList(_ref4) {
     setWidth(ref.current.scrollWidth + 50);
     setMargin(Math.max(0, Math.min(width - layerSelectWidth, margin)));
   }, [services, layerSelectWidth, width, margin]);
+  var isAllEnabled = activeServices.every(function (activeService) {
+    return activeService.enabled;
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.serviceList,
     "data-testid": "serviceList"
@@ -11108,13 +11471,20 @@ var ServiceList = function ServiceList(_ref4) {
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.serviceChips,
     ref: ref
-  }, services && Object.keys(services) && Object.keys(services).length > 0 && /*#__PURE__*/React.createElement(ServiceChip, {
+  }, services && Object.keys(services) && Object.keys(services).length > 0 && /*#__PURE__*/React.createElement(ServiceChipConnect, {
     key: "All",
-    all: true
+    all: true,
+    isEnabled: isAllEnabled
   }), Object.keys(services).map(function (service) {
-    return /*#__PURE__*/React.createElement(ServiceChip, {
+    var _a;
+
+    var isServiceEnabled = (_a = activeServices.find(function (activeService) {
+      return activeService.id === services[service].service;
+    })) === null || _a === void 0 ? void 0 : _a.enabled;
+    return /*#__PURE__*/React.createElement(ServiceChipConnect, {
       key: services[service].id,
-      service: services[service]
+      service: services[service],
+      isEnabled: isServiceEnabled
     });
   })), layerSelectWidth + margin < width && /*#__PURE__*/React.createElement(ChevronRight, {
     className: classes.scrollArrowRight,
@@ -11145,9 +11515,13 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
   var services = useSelector(function (store) {
     return getServices(store);
   });
+  var activeServices = useSelector(function (store) {
+    return getActiveServices(store);
+  });
   return /*#__PURE__*/React.createElement(ServiceList, {
     layerSelectWidth: layerSelectWidth,
-    services: services
+    services: services,
+    activeServices: activeServices
   });
 };
 
@@ -11391,6 +11765,7 @@ var FilterListItem = function FilterListItem(_ref) {
   }, /*#__PURE__*/React.createElement(ListItemIcon, {
     className: classes.listItemIcon
   }, /*#__PURE__*/React.createElement(Checkbox, {
+    color: "secondary",
     checked: checked,
     onChange: function onChange() {
       return toggleCheckbox(index);
@@ -11407,7 +11782,8 @@ var FilterListItem = function FilterListItem(_ref) {
     size: "small",
     onClick: function onClick() {
       return selectOnlyOne(index);
-    }
+    },
+    "data-testid": "onlyButton"
   }, /*#__PURE__*/React.createElement(Typography, {
     className: classes.onlyByttonText
   }, "ONLY"))) : null));
@@ -11518,26 +11894,27 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
     container: true,
     item: true,
     xs: 12,
-    justify: "space-between",
+    justifyContent: "space-between",
     alignItems: "center",
     className: classes.selectAllContainer
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
     xs: 6,
-    justify: "flex-start",
+    justifyContent: "flex-start",
     alignItems: "center",
     className: classes.selectAll
   }, "Select all"), /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
     xs: 6,
-    justify: "flex-end",
+    justifyContent: "flex-end",
     alignContent: "center",
     className: classes["switch"]
   }, /*#__PURE__*/React.createElement(CustomSwitch, {
     checked: allSelected,
-    onChange: toggleSelectAll
+    onChange: toggleSelectAll,
+    "data-testid": "customSwitch"
   }))), /*#__PURE__*/React.createElement(List, {
     dense: true,
     style: {
@@ -12242,7 +12619,8 @@ var useStyles$h = makeStyles(function () {
       height: '320px',
       margin: '10px',
       marginLeft: '-5px',
-      minWidth: 120
+      minWidth: 120,
+      fontSize: '90%'
     },
     layerName: {
       paddingLeft: '10px',
@@ -12283,11 +12661,10 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
     return null;
   }
 
-  var sortedMarks = _toConsumableArray(marks);
-
-  sortedMarks = sortedMarks.sort(function (a, b) {
+  var sortedMarks = _toConsumableArray(marks).sort(function (a, b) {
     return typeof a.value === 'number' && typeof b.value === 'number' && a.value - b.value;
   });
+
   var adaptedMarks = reverse ? sortedMarks.reverse() : sortedMarks;
   var values = adaptedMarks.map(function (m) {
     return m.value;
@@ -12433,27 +12810,30 @@ var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
   var layerName = wmLayer.getLayerName();
   var marks = marksByDimension(wmsDimension);
   var isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced === true;
+  var tooltipTitle = isLayerDimensionSynced ? 'Click to disconnect layer' : 'Click to connect layer';
+
+  var Icon = function Icon() {
+    return isLayerDimensionSynced ? /*#__PURE__*/React.createElement(Link, {
+      "data-testid": "syncIcon"
+    }) : /*#__PURE__*/React.createElement(LinkOff, {
+      "data-testid": "syncDisIcon"
+    });
+  };
+
   return /*#__PURE__*/React.createElement(Grid, {
     key: layerId,
     item: true,
     xs: "auto"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: tooltipTitle,
+    placement: "top"
   }, /*#__PURE__*/React.createElement(IconButton, {
     "data-testid": "syncButton",
     size: "small",
     onClick: function onClick() {
       return handleSyncChanged(layerId, dimensionName, layerDimension.currentValue, !layerDimension.synced);
     }
-  }, isLayerDimensionSynced ? /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Click to disconnect layer",
-    placement: "top"
-  }, /*#__PURE__*/React.createElement(Link, {
-    "data-testid": "syncIcon"
-  })) : /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Click to connect layer",
-    placement: "top"
-  }, /*#__PURE__*/React.createElement(LinkOff, {
-    "data-testid": "syncDisIcon"
-  }))), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
+  }, /*#__PURE__*/React.createElement(Icon, null))), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
     marks: marks,
     layerName: layerName,
     reverse: dimConfig ? dimConfig.reversed : false,
@@ -12966,6 +13346,10 @@ var SpeedButton = function SpeedButton(_ref) {
   };
 
   var onKeyDown = function onKeyDown(event) {
+    // disable default Slider behavior
+    event.stopPropagation();
+    event.preventDefault(); // custom logic
+
     if (event.key === 'Tab') {
       setOpen(!open);
     }
@@ -13235,6 +13619,10 @@ var TimeStepButton = function TimeStepButton(_ref) {
   };
 
   var onKeyDown = function onKeyDown(event) {
+    // disable default Slider behavior
+    event.stopPropagation();
+    event.preventDefault(); // custom logic
+
     if (event.key === 'Tab') {
       setOpen(!open);
     }
@@ -14759,17 +15147,16 @@ var useStyles$c = makeStyles(function (theme) {
 });
 
 var thumbComponent = function thumbComponent(props) {
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    React.createElement("span", Object.assign({}, props, {
-      "data-testid": "scaleSliderSliderThumb",
-      tabIndex: 0
-    }), /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("polygon", {
-      transform: "translate(6.5 5.5)",
-      points: "6,0 11,5 11,12 0,12 0,5"
-    })))
-  );
+  var children = props.children,
+      other = __rest(props, ["children"]);
+
+  return /*#__PURE__*/React.createElement(SliderThumb, Object.assign({}, other, {
+    "data-testid": "scaleSliderSliderThumb",
+    tabIndex: 0
+  }), children, /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("polygon", {
+    transform: "translate(6.5 5.5)",
+    points: "6,0 11,5 11,12 0,12 0,5"
+  })));
 };
 
 var marks = [{
@@ -14825,9 +15212,14 @@ var GeoWebScaleSlider = withStyles(function (theme) {
     thumb: {
       backgroundColor: 'rgba(0,0,0,0)',
       marginTop: 0,
+      width: 12,
+      height: 12,
       color: theme.palette.geowebColors.timeSlider.timeScalePointer.fill,
       '& svg polygon': {
         filter: theme.palette.geowebColors.timeSlider.timeScaleShadowButtonScale.filter
+      },
+      '&:before': {
+        display: 'none'
       }
     },
     valueLabel: {
@@ -14942,7 +15334,9 @@ var TimeSliderScaleSlider = function TimeSliderScaleSlider(_ref) {
     onChange: onChange,
     onKeyDown: onKeyDown,
     "aria-labelledby": "scale-slider",
-    ThumbComponent: thumbComponent,
+    components: {
+      Thumb: thumbComponent
+    },
     marks: marks,
     track: false
   })));
@@ -18985,6 +19379,7 @@ var getDisplayText = function getDisplayText(currentAdagucTime) {
 };
 
 var ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION';
+var ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO = 'ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO';
 
 var ReactMapView = /*#__PURE__*/function (_React$Component) {
   _inherits(ReactMapView, _React$Component);
@@ -19030,7 +19425,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
         layers.forEach(function (layer) {
           if (layer.enabled !== false) {
-            _this.parseWMJSLayer(layer, true, 'onlydims');
+            _this.parseWMJSLayer(layer, true);
           }
         });
       }, fetchSpeed);
@@ -19042,25 +19437,12 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    _this.parseWMJSLayer = function (wmLayer, forceReload, updateStrategy, child) {
+    _this.parseWMJSLayer = function (wmLayer, forceReload, child) {
       var callback = function callback() {
-        if (updateStrategy === 'all') {
-          var _this$props = _this.props,
-              onMapUpdateAllDimensions = _this$props.onMapUpdateAllDimensions,
-              onLayerChangeStyle = _this$props.onLayerChangeStyle,
-              onLayerSetDimensions = _this$props.onLayerSetDimensions,
-              onServiceSetLayers = _this$props.onServiceSetLayers,
-              onLayerSetStyles = _this$props.onLayerSetStyles,
-              mapId = _this$props.mapId;
-          setServiceMetadata(wmLayer, mapId, _this.adaguc.webMapJS, _this.props, onMapUpdateAllDimensions, onLayerChangeStyle, onServiceSetLayers, onLayerSetStyles, onLayerSetDimensions);
-        }
-
-        if (updateStrategy === 'onlydims') {
-          var _this$props2 = _this.props,
-              _onLayerSetDimensions = _this$props2.onLayerSetDimensions,
-              _mapId = _this$props2.mapId;
-          setServiceMetadata(wmLayer, _mapId, _this.adaguc.webMapJS, _this.props, null, null, null, null, _onLayerSetDimensions);
-        }
+        var _this$props = _this.props,
+            onUpdateLayerInformation = _this$props.onUpdateLayerInformation,
+            mapId = _this$props.mapId;
+        setServiceMetadata(wmLayer, mapId, _this.adaguc.webMapJS, _this.props, onUpdateLayerInformation);
 
         if (child) {
           if (wmLayer.hasError) {
@@ -19073,7 +19455,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         }
       };
 
-      wmLayer.parseLayer(callback, forceReload);
+      wmLayer.parseLayer(callback, forceReload, 'ReactMapView parseWMJSLayer');
     };
 
     _this.state = {
@@ -19096,11 +19478,11 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   _createClass(ReactMapView, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props3 = this.props,
-          onMount = _this$props3.onMount,
-          mapId = _this$props3.mapId,
-          onRegisterAdaguc = _this$props3.onRegisterAdaguc,
-          shouldAutoFetch = _this$props3.shouldAutoFetch;
+      var _this$props2 = this.props,
+          onMount = _this$props2.onMount,
+          mapId = _this$props2.mapId,
+          onRegisterAdaguc = _this$props2.onRegisterAdaguc,
+          shouldAutoFetch = _this$props2.shouldAutoFetch;
       this.checkAdaguc();
       this.checkNewProps(null, this.props);
       window.addEventListener('resize', this.handleWindowResize);
@@ -19122,9 +19504,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props4 = this.props,
-          onUnMount = _this$props4.onUnMount,
-          mapId = _this$props4.mapId;
+      var _this$props3 = this.props,
+          onUnMount = _this$props3.onUnMount,
+          mapId = _this$props3.mapId;
       window.removeEventListener('resize', this.handleWindowResize);
       onUnMount(mapId, this.adaguc.webMapJS);
       this.adaguc.webMapJS.getListener().suspendEvents();
@@ -19132,6 +19514,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
       if (typeof this.adaguc.webMapJS.stopAnimating === 'function') {
         this.adaguc.webMapJS.stopAnimating();
         this.adaguc.webMapJS.destroy();
+        this.adaguc.webMapJSCreated = false;
       }
 
       this.clearRefetchTimer();
@@ -19139,9 +19522,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onDimChangeListener",
     value: function onDimChangeListener() {
-      var _this$props5 = this.props,
-          mapId = _this$props5.mapId,
-          onMapChangeDimension = _this$props5.onMapChangeDimension;
+      var _this$props4 = this.props,
+          mapId = _this$props4.mapId,
+          onMapChangeDimension = _this$props4.onMapChangeDimension;
 
       if (this.adaguc && this.adaguc.webMapJS) {
         var timeDimension = this.adaguc.webMapJS.getDimension('time');
@@ -19163,9 +19546,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     value: function onAfterSetBBoxListener(wmjsMap) {
       var _this2 = this;
 
-      var _this$props6 = this.props,
-          mapId = _this$props6.mapId,
-          onMapZoomEnd = _this$props6.onMapZoomEnd;
+      var _this$props5 = this.props,
+          mapId = _this$props5.mapId,
+          onMapZoomEnd = _this$props5.onMapZoomEnd;
       /* Update the map after 100 ms */
 
       window.setTimeout(function () {
@@ -19330,8 +19713,6 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
           this.adaguc.webMapJS.showLayerInfo = props.showLayerInfo;
         }
       }
-      /* Check children */
-
 
       var children = props.children;
 
@@ -19370,23 +19751,29 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
               wmjsLayers[l].remove();
               /* Trigger update of all map dimensions */
 
-              var onMapUpdateAllDimensions = props.onMapUpdateAllDimensions,
+              var onUpdateLayerInformation = props.onUpdateLayerInformation,
                   mapId = props.mapId;
-              onMapUpdateAllDimensions && onMapUpdateAllDimensions({
-                origin: origin,
-                mapId: mapId,
-                dimensions: _this3.adaguc.webMapJS.mapdimensions.map(function (_ref) {
-                  var name = _ref.name,
-                      units = _ref.units,
-                      currentValue = _ref.currentValue,
-                      synced = _ref.synced;
-                  return {
-                    name: name,
-                    units: units,
-                    currentValue: currentValue,
-                    synced: synced
-                  };
-                })
+              onUpdateLayerInformation && onUpdateLayerInformation({
+                origin: ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO,
+                serviceLayers: null,
+                layerStyle: null,
+                layerDimensions: null,
+                mapDimensions: {
+                  origin: origin,
+                  mapId: mapId,
+                  dimensions: _this3.adaguc.webMapJS.mapdimensions.map(function (_ref) {
+                    var name = _ref.name,
+                        units = _ref.units,
+                        currentValue = _ref.currentValue,
+                        synced = _ref.synced;
+                    return {
+                      name: name,
+                      units: units,
+                      currentValue: currentValue,
+                      synced: synced
+                    };
+                  })
+                }
               });
 
               _this3.checkNewProps(prevProps, props);
@@ -19494,7 +19881,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                   }
 
                   if (!isBaselayer) {
-                    _this3.parseWMJSLayer(newWMLayer, false, 'all', child);
+                    _this3.parseWMJSLayer(newWMLayer, false, child);
                   }
 
                   needsRedraw = true;
@@ -19502,7 +19889,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                   /* Set the name of the ADAGUC WMJSLayer */
                   if (child.props.name !== undefined && wmLayer.name !== child.props.name) {
                     wmLayer.setName(child.props.name).then(function () {
-                      _this3.parseWMJSLayer(wmLayer, false, 'all', child);
+                      _this3.parseWMJSLayer(wmLayer, false, child);
                     });
                     needsRedraw = true;
                   }
@@ -19606,12 +19993,12 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     value: function checkAdaguc() {
       var _this4 = this;
 
-      var _this$props7 = this.props,
-          mapId = _this$props7.mapId,
-          listeners = _this$props7.listeners,
-          srs = _this$props7.srs,
-          bbox = _this$props7.bbox,
-          onMapPinChangeLocation = _this$props7.onMapPinChangeLocation;
+      var _this$props6 = this.props,
+          mapId = _this$props6.mapId,
+          listeners = _this$props6.listeners,
+          srs = _this$props6.srs,
+          bbox = _this$props6.bbox,
+          onMapPinChangeLocation = _this$props6.onMapPinChangeLocation;
 
       if (this.adaguc.webMapJSCreated) {
         return;
@@ -19682,10 +20069,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props8 = this.props,
-          passiveMap = _this$props8.passiveMap,
-          children = _this$props8.children,
-          onClick = _this$props8.onClick;
+      var _this$props7 = this.props,
+          passiveMap = _this$props7.passiveMap,
+          children = _this$props7.children,
+          onClick = _this$props7.onClick;
       var adagucInitialised = this.state.adagucInitialised;
       var featureLayers = getFeatureLayers(children);
       return /*#__PURE__*/React.createElement("div", {
@@ -19774,22 +20161,7 @@ ReactMapView.defaultProps = {
   onMapChangeDimension: function onMapChangeDimension() {
     /* nothing */
   },
-  onMapUpdateAllDimensions: function onMapUpdateAllDimensions() {
-    /* nothing */
-  },
-  onLayerChangeStyle: function onLayerChangeStyle() {
-    /* nothing */
-  },
-  onLayerChangeDimension: function onLayerChangeDimension() {
-    /* nothing */
-  },
-  onLayerSetDimensions: function onLayerSetDimensions() {
-    /* nothing */
-  },
-  onServiceSetLayers: function onServiceSetLayers() {
-    /* nothing */
-  },
-  onLayerSetStyles: function onLayerSetStyles() {
+  onUpdateLayerInformation: function onUpdateLayerInformation() {
     /* nothing */
   },
   onMapZoomEnd: function onMapZoomEnd() {
@@ -19943,6 +20315,7 @@ var MapView = function MapView(_a) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
+var ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION';
 /**
  * Connected component used to display the map and selected layers.
  * Includes options to disable the map controls and legend.
@@ -19991,29 +20364,28 @@ var MapViewConnect = function MapViewConnect(_a) {
     return getPinLocation(store, mapId);
   });
   var dispatch = useDispatch();
+  var map = getWMJSMapById(mapId);
   var mapChangeDimension$1 = React.useCallback(function (mapDimensionPayload) {
-    return dispatch(mapChangeDimension(mapDimensionPayload));
-  }, [dispatch]);
+    if (mapDimensionPayload.dimension) {
+      var dimension = map.getDimension(mapDimensionPayload.dimension.name);
+
+      if (dimension && dimension.currentValue === mapDimensionPayload.dimension.currentValue) {
+        return;
+      }
+    }
+
+    dispatch(mapChangeDimension(mapDimensionPayload));
+  }, [dispatch, map]);
   var setTime$1 = React.useCallback(function (setTimePayload) {
-    return dispatch(setTime(setTimePayload));
-  }, [dispatch]);
-  var layerChangeStyle$1 = React.useCallback(function (payload) {
-    return dispatch(layerChangeStyle(payload));
-  }, [dispatch]);
-  var layerChangeDimension$1 = React.useCallback(function (payload) {
-    return dispatch(layerChangeDimension(payload));
-  }, [dispatch]);
-  var layerSetDimensions$1 = React.useCallback(function (payload) {
-    return dispatch(layerSetDimensions(payload));
-  }, [dispatch]);
-  var mapUpdateAllDimensions = React.useCallback(function (payload) {
-    return dispatch(mapUpdateAllMapDimensions(payload));
-  }, [dispatch]);
-  var serviceSetLayers$1 = React.useCallback(function (payload) {
-    return dispatch(serviceSetLayers(payload));
-  }, [dispatch]);
-  var layerSetStyles$1 = React.useCallback(function (payload) {
-    return dispatch(layerSetStyles(payload));
+    /* Check if the map not already has this value set, otherwise this component will re-render */
+    if (map.getDimension('time').currentValue === setTimePayload.value) {
+      return;
+    }
+
+    dispatch(setTime(setTimePayload));
+  }, [dispatch, map]);
+  var updateLayerInformation = React.useCallback(function (payload) {
+    dispatch(onUpdateLayerInformation(payload));
   }, [dispatch]);
   var registerMap$1 = React.useCallback(function (payload) {
     return dispatch(registerMap(payload));
@@ -20066,33 +20438,14 @@ var MapViewConnect = function MapViewConnect(_a) {
       if (mapDimensionPayload && mapDimensionPayload.dimension && mapDimensionPayload.dimension.name && mapDimensionPayload.dimension.name === 'time') {
         setTime$1({
           sourceId: mapId,
-          origin: "".concat(mapDimensionPayload.origin, "==> MapViewConnect, 184"),
+          origin: "".concat(mapDimensionPayload.origin, "==> ").concat(ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION),
           value: handleMomentISOString(mapDimensionPayload.dimension.currentValue)
         });
       } else {
         mapChangeDimension$1(mapDimensionPayload);
       }
     },
-    onMapUpdateAllDimensions: function onMapUpdateAllDimensions(mapDimensionPayload) {
-      /* Always update all dimensions */
-      mapUpdateAllDimensions(mapDimensionPayload);
-      /* Additionally trigger the setTime action */
-
-      mapDimensionPayload.dimensions.forEach(function (dimension) {
-        if (dimension.name && dimension.name === 'time') {
-          setTime$1({
-            sourceId: mapId,
-            origin: 'MapViewConnect, 220',
-            value: handleMomentISOString(dimension.currentValue)
-          });
-        }
-      });
-    },
-    onLayerChangeStyle: layerChangeStyle$1,
-    onLayerChangeDimension: layerChangeDimension$1,
-    onLayerSetDimensions: layerSetDimensions$1,
-    onServiceSetLayers: serviceSetLayers$1,
-    onLayerSetStyles: layerSetStyles$1,
+    onUpdateLayerInformation: updateLayerInformation,
     onMapPinChangeLocation: mapPinChangeLocation,
     onMapZoomEnd: function onMapZoomEnd(a) {
       genericSetBbox({
@@ -21384,7 +21737,8 @@ var SyncGroupList = function SyncGroupList(_ref) {
         return addNewGroup(groupObject.id);
       } : function () {
         return removeGroup(groupObject.id);
-      }
+      },
+      size: "large"
     }, index === 0 ? /*#__PURE__*/React.createElement(Add, {
       className: classes.iconColor
     }) : /*#__PURE__*/React.createElement(DeleteForever, {