@opengeoweb/core 2.2.0 → 2.2.1

package/index.esm.js

@@ -1,12 +1,12 @@
 import { createSelector } from 'reselect';
-import _, { isEqual, debounce } from 'lodash';
 import moment from 'moment';
+import _, { isEqual, debounce } from 'lodash';
 import * as React from 'react';
 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 { 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 { 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, ListItemSecondaryAction, Switch, 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';
@@ -657,6 +657,7 @@ var onUpdateLayerInformation = function onUpdateLayerInformation(payload) {
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
 var MAP_SERVICES_SET_LAYERS = 'MAP_SERVICES_SET_LAYERS';
+var MAP_SERVICES_REMOVE_SERVICE = 'MAP_SERVICES_REMOVE_SERVICE';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -687,6 +688,19 @@ var serviceSetLayers = function serviceSetLayers(payload) {
     payload: payload
   };
 };
+/**
+ * Action mapStoreRemoveService is used in ServiceOptionsDialogConnect after clicking the remove button. Action layerSelectServiceRemoved is used automatically after calling the mapStoreRemoveService action
+ *
+ * Example: mapStoreRemoveService({serviceUrl: someService})
+ * @param {object} payload consisting of  serviceUrl: string
+ */
+
+var mapStoreRemoveService = function mapStoreRemoveService(payload) {
+  return {
+    type: MAP_SERVICES_REMOVE_SERVICE,
+    payload: payload
+  };
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -745,7 +759,8 @@ var actions$3 = /*#__PURE__*/Object.freeze({
   addAvailableBaseLayer: addAvailableBaseLayer,
   addAvailableBaseLayers: addAvailableBaseLayers,
   onUpdateLayerInformation: onUpdateLayerInformation,
-  serviceSetLayers: serviceSetLayers
+  serviceSetLayers: serviceSetLayers,
+  mapStoreRemoveService: mapStoreRemoveService
 });
 
 /* *
@@ -778,6 +793,29 @@ var Scale;
   Scale[Scale["DataScale"] = 8] = "DataScale";
 })(Scale || (Scale = {}));
 
+/* *
+ * 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 selectorMemoizationOptions = {
+  memoizeOptions: {
+    maxSize: 1000,
+    resultEqualityCheck: isEqual
+  }
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1023,7 +1061,7 @@ var getLayerById = function getLayerById(store, layerId) {
 
 var getLayersById = createSelector(layerStore, function (store) {
   return store ? store.byId : null;
-});
+}, selectorMemoizationOptions);
 /**
  * Retrieves all layerIds
  *
@@ -1034,7 +1072,7 @@ var getLayersById = createSelector(layerStore, function (store) {
 
 var getLayersIds = createSelector(layerStore, function (store) {
   return store ? store.allIds : [];
-});
+}, selectorMemoizationOptions);
 /**
  * Retrieves all layers (including base layers and overlayers)
  *
@@ -1047,7 +1085,7 @@ var getAllLayers = createSelector(getLayersIds, getLayersById, function (ids, la
   return ids.map(function (layerId) {
     return layers[layerId];
   });
-});
+}, selectorMemoizationOptions);
 /**
  * Retrieves all layers that aren't base layers and aren't overlayers
  *
@@ -1060,7 +1098,7 @@ var getLayers = createSelector(getAllLayers, function (layers) {
   return layers.filter(function (layer) {
     return layer.layerType !== LayerType.baseLayer && layer.layerType !== LayerType.overLayer;
   });
-});
+}, selectorMemoizationOptions);
 /**
  * Retrieves all baselayers
  *
@@ -1073,7 +1111,7 @@ var getBaseLayers = createSelector(getAllLayers, function (layers) {
   return layers.filter(function (layer) {
     return layer.layerType === LayerType.baseLayer;
   });
-});
+}, selectorMemoizationOptions);
 /**
  * Retrieves all overLayers
  *
@@ -1086,7 +1124,7 @@ var getOverLayers = createSelector(getAllLayers, function (layers) {
   return layers.filter(function (layer) {
     return layer.layerType === LayerType.overLayer;
   });
-});
+}, selectorMemoizationOptions);
 /**
  * Gets dimensions of the passed layer
  *
@@ -1098,7 +1136,7 @@ var getOverLayers = createSelector(getAllLayers, function (layers) {
 
 var getLayerDimensions = createSelector(getLayerById, function (layer) {
   return layer && layer.dimensions ? layer.dimensions : [];
-});
+}, selectorMemoizationOptions);
 /**
  * Gets dimensions of the passed layer, excluding the time dimension
  *
@@ -1110,21 +1148,21 @@ var getLayerDimensions = createSelector(getLayerById, function (layer) {
 
 var getLayerNonTimeDimensions = createSelector(getLayerDimensions, function (dimensions) {
   return filterNonTimeDimensions(dimensions);
-});
+}, selectorMemoizationOptions);
 /**
  * Gets time dimension of the passed layer
  *
  * Example: timeDimension = getLayerTimeDimension(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: object - object of layer time dimension
+ * @returns {object} returnType: object - object of layer time dimension
  */
 
 var getLayerTimeDimension = createSelector(getLayerDimensions, function (dimensions) {
   return dimensions && dimensions.length ? dimensions.find(function (dimension) {
     return dimension.name === 'time';
-  }) : [];
-});
+  }) : {};
+}, selectorMemoizationOptions);
 /**
  * Gets specified dimension of the passed layer
  *
@@ -1141,7 +1179,7 @@ var getLayerDimension = createSelector(getLayerDimensions, function (_store, _la
   return dimensions && dimensions.length ? dimensions.find(function (dimension) {
     return dimension.name === dimensionName;
   }) : {};
-});
+}, selectorMemoizationOptions);
 /**
  * Gets opacity of the passed layer
  *
@@ -1223,9 +1261,11 @@ var getLayerStatus = createSelector(getLayerById, function (layer) {
  * @returns {array} returnType: array - array containing all available base layers
  */
 
-var getAvailableBaseLayersForMap = function getAvailableBaseLayersForMap(store, mapId) {
-  if (store && store.layers && store.layers.availableBaseLayers) {
-    var availableBaseLayers = store.layers.availableBaseLayers;
+var getAvailableBaseLayersForMap = createSelector(layerStore, function (_store, _mapId) {
+  return _mapId;
+}, function (layerStore, mapId) {
+  if (layerStore && layerStore.availableBaseLayers) {
+    var availableBaseLayers = layerStore.availableBaseLayers;
     return availableBaseLayers.allIds.reduce(function (list, layerId) {
       if (availableBaseLayers.byId[layerId].mapId === mapId) {
         return list.concat(availableBaseLayers.byId[layerId]);
@@ -1236,7 +1276,7 @@ var getAvailableBaseLayersForMap = function getAvailableBaseLayersForMap(store,
   }
 
   return [];
-};
+}, selectorMemoizationOptions);
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -2087,14 +2127,6 @@ var utils = /*#__PURE__*/Object.freeze({
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-/* TODO:, move this to a right place https://gitlab.com/opengeoweb/opengeoweb/-/issues/1802 */
-
-var selectorMemoizationOptions = {
-  memoizeOptions: {
-    maxSize: 1000,
-    resultEqualityCheck: isEqual
-  }
-};
 /**
  * Gets the map state by mapId
  *
@@ -2134,19 +2166,17 @@ var getAllMapIds = function getAllMapIds(store) {
  * @returns {object} object containing map state (isAnimating, bbox, baseLayers, layers etc.)
  */
 
-var getFirstMap = function getFirstMap(store) {
-  if (store && store.webmap && store.webmap.allIds[0]) {
-    return store.webmap.byId[store.webmap.allIds[0]];
-  }
-
-  return null;
-};
+var getFirstMap = createSelector(getAllMapIds, function (store) {
+  return store && store.webmap && store.webmap.byId ? store.webmap.byId : {};
+}, function (allMapIds, mapsById) {
+  return allMapIds[0] && mapsById[allMapIds[0]] ? mapsById[allMapIds[0]] : null;
+}, selectorMemoizationOptions);
 /**
  * Gets the id of first map in store
  *
  * Example: getFirstMapId(store)
- * @param {object} store store object from which the map state wll be extracted
- * @returns {object} map id
+ * @param {object} store store: object from which the map state wll be extracted
+ * @returns {string} returnType:string - map id
  */
 
 var getFirstMapId = createSelector(getFirstMap, function (map) {
@@ -2157,7 +2187,7 @@ var getFirstMapId = createSelector(getFirstMap, function (map) {
  *
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
- * @returns {array} returnType:true if map is present
+ * @returns {boolean} returnType:boolean - true if map is present
  */
 
 var getIsMapPresent = createSelector(function (store, mapId) {
@@ -2180,7 +2210,7 @@ var getIsMapPresent = createSelector(function (store, mapId) {
 
 var getLayerIds = createSelector(getMapById, function (store) {
   return store ? store.mapLayers : [];
-});
+}, selectorMemoizationOptions);
 /**
  * Gets all layer states for a map
  *
@@ -2206,7 +2236,7 @@ var getMapLayers = createSelector(getLayerIds, getLayersById, function (layerIds
 
 var getMapBaseLayersIds = createSelector(getMapById, function (store) {
   return store ? store.baseLayers : [];
-});
+}, selectorMemoizationOptions);
 /**
  * Gets all baselayers for a map
  *
@@ -2232,7 +2262,7 @@ var getMapBaseLayers = createSelector(getMapBaseLayersIds, getLayersById, functi
 
 var getMapOverLayersIds = createSelector(getMapById, function (store) {
   return store ? store.overLayers : [];
-});
+}, selectorMemoizationOptions);
 /**
  * Gets all overLayers for a map
  *
@@ -2258,7 +2288,7 @@ var getMapOverLayers = createSelector(getMapOverLayersIds, getLayersById, functi
 
 var getMapDimensions = createSelector(getMapById, function (store) {
   return store ? store.dimensions : [];
-});
+}, selectorMemoizationOptions);
 /**
  * Gets the map dimension requested
  *
@@ -2279,7 +2309,7 @@ var getMapDimension = createSelector(getMapById, function (_store, _mapId, dimen
   }
 
   return undefined;
-});
+}, selectorMemoizationOptions);
 /**
  * Gets map srs
  *
@@ -2303,7 +2333,7 @@ var getSrs = createSelector(getMapById, function (store) {
 
 var getBbox = createSelector(getMapById, function (store) {
   return store ? store.bbox : {};
-});
+}, selectorMemoizationOptions);
 /**
  * Gets if map is animating
  *
@@ -2393,7 +2423,7 @@ var getMapTimeSliderScale = createSelector(getMapById, function (store) {
  * Example: timeStep = getTimeStep(store, 'mapid_1')
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
- * @returns {object} returnType: number - time step as a number
+ * @returns {number} returnType: number - time step as a number
  */
 
 var getMapTimeStep = createSelector(getMapById, function (store) {
@@ -2405,7 +2435,7 @@ var getMapTimeStep = createSelector(getMapById, function (store) {
  * Example: speed = getSpeed(store, 'mapid_1')
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
- * @returns {object} returnType: number - speed as a number
+ * @returns {number} returnType: number - speed as a number
  */
 
 var getMapAnimationDelay = createSelector(getMapById, function (store) {
@@ -2417,7 +2447,7 @@ var getMapAnimationDelay = createSelector(getMapById, function (store) {
  * Example: centerTime = getCenterTime(store, 'mapid_1')
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
- * @returns {object} returnType: number - center time as a unix timestamp
+ * @returns {number} returnType: number - center time as a unix timestamp
  */
 
 var getMapTimeSliderCenterTime = createSelector(getMapById, function (store) {
@@ -2429,7 +2459,7 @@ var getMapTimeSliderCenterTime = createSelector(getMapById, function (store) {
  * Example: secondsPerPx = getSecondsPerPx(store, 'mapid_1')
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
- * @returns {object} returnType: number - the number of seconds per pixel
+ * @returns {number} returnType: number - the number of seconds per pixel
  */
 
 var getMapTimeSliderSecondsPerPx = createSelector(getMapById, function (store) {
@@ -2441,7 +2471,7 @@ var getMapTimeSliderSecondsPerPx = createSelector(getMapById, function (store) {
  * Example: dataScaleToSecondsPerPx = getMapTimeSliderDataScaleToSecondsPerPx(store, 'mapid_1')
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
- * @returns {object} returnType: number - the number of scaleto seconds pixel
+ * @returns {number} returnType: number - the number of scaleto seconds pixel
  */
 
 var getMapTimeSliderDataScaleToSecondsPerPx = createSelector(getMapById, function (store) {
@@ -2492,14 +2522,14 @@ var getIsLayerActiveLayer = createSelector(getActiveLayerId, function (_store, _
  * Example const mapId = getMapIdFromLayerId(store 'layerId-A');
  * @param {object} store store: object - store object
  * @param {string} layerId layerId: string - Id of the layer
- * @returns {string} returnType: the mapId, or null if not found
+ * @returns {string} returnType: string - the mapId, or null if not found
  */
 
 var getMapIdFromLayerId = createSelector(function (store) {
   return store && store.webmap ? store.webmap : null;
 }, function (_store, layerId) {
   return layerId;
-}, findMapIdFromLayerId);
+}, findMapIdFromLayerId, selectorMemoizationOptions);
 /**
  * Returns the layerId for given layerName
  *
@@ -2507,7 +2537,7 @@ var getMapIdFromLayerId = createSelector(function (store) {
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
  * @param {string} layerId layerId: string - Id of the layer
- * @returns {string} returnType: the layerId, or null if not found
+ * @returns {string} returnType: string - the layerId, or null if not found
  */
 
 var getLayerIdByLayerName = createSelector(getMapLayers, function (_store, _mapId, layerName) {
@@ -2522,7 +2552,7 @@ var getLayerIdByLayerName = createSelector(getMapLayers, function (_store, _mapI
   }
 
   return null;
-});
+}, selectorMemoizationOptions);
 /**
  * Returns the layerIndex in the map for given layerId
  *
@@ -2539,7 +2569,7 @@ var getLayerIndexByLayerId = createSelector(getMapLayers, function (_store, _map
   return layers.findIndex(function (layer) {
     return layer.id === layerId;
   });
-});
+}, selectorMemoizationOptions);
 /**
  * Returns the Layer in the map for given layerIndex
  *
@@ -2558,7 +2588,7 @@ var getLayerByLayerIndex = createSelector(getMapLayers, function (_store, _mapId
   }
 
   return null;
-});
+}, selectorMemoizationOptions);
 /**
  * Returns name of all unique dimensions present in all maps
  *
@@ -2581,7 +2611,7 @@ var getAllUniqueDimensions = createSelector(getAllMapIds, function (store) {
     }, list);
     return uniqueMapDims;
   }, []);
-});
+}, selectorMemoizationOptions);
 /**
  * Returns the mapPinLocation for the current map
  *
@@ -2593,7 +2623,7 @@ var getAllUniqueDimensions = createSelector(getAllMapIds, function (store) {
 
 var getPinLocation = createSelector(getMapById, function (store) {
   return store ? store.mapPinLocation : undefined;
-});
+}, selectorMemoizationOptions);
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2626,7 +2656,7 @@ var servicesStore = function servicesStore(store) {
 
 var getServiceIds = createSelector(servicesStore, function (serviceState) {
   return serviceState ? serviceState.allIds : [];
-});
+}, selectorMemoizationOptions);
 /**
  * Gets map services
  *
@@ -2637,7 +2667,7 @@ var getServiceIds = createSelector(servicesStore, function (serviceState) {
 
 var getServices = createSelector(servicesStore, function (store) {
   return store ? store.byId : {};
-});
+}, selectorMemoizationOptions);
 /**
  * Gets the service object by its url
  *
@@ -2654,19 +2684,19 @@ var getServiceByName = createSelector([servicesStore, function (state, serviceNa
   }
 
   return null;
-});
+}, selectorMemoizationOptions);
 /**
  * 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.
+ * @returns {array} returnType: ServiceLayer[] - All layers within the service object.
  */
 
 var getLayersFromService$1 = createSelector(getServiceByName, function (service) {
   return service && service.layers || null;
-});
+}, selectorMemoizationOptions);
 /**
  * Gets the layer from the store using the serviceUrl and layerName
  *
@@ -2694,7 +2724,7 @@ var getLayerFromService = createSelector(function (store, serviceUrl) {
   }
 
   return layers[index];
-});
+}, selectorMemoizationOptions);
 /**
  * Gets the layers stylelist from the servicestore using the serviceUrl and layerName
  *
@@ -2707,7 +2737,26 @@ var getLayerFromService = createSelector(function (store, serviceUrl) {
 
 var getLayerStyles = createSelector(getLayerFromService, function (layer) {
   return layer && layer.styles ? layer.styles : [];
-});
+}, selectorMemoizationOptions);
+/**
+ * Gets services and maps them into an array
+ *
+ * Example: services = getServices(store)
+ * @param {object} store store: object - Store object
+ * @returns {array} returnType: [] - array containing services
+ */
+
+var getServicesInArray = createSelector(servicesStore, function (store) {
+  var services = store ? store.byId : {};
+  var arrayOfServiceObjects = Object.keys(services).map(function (key) {
+    return {
+      id: services[key].id,
+      name: services[key].name,
+      service: services[key].service
+    };
+  });
+  return arrayOfServiceObjects;
+}, selectorMemoizationOptions);
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2787,7 +2836,8 @@ var selectors = /*#__PURE__*/Object.freeze({
   getServiceByName: getServiceByName,
   getLayersFromService: getLayersFromService$1,
   getLayerFromService: getLayerFromService,
-  getLayerStyles: getLayerStyles
+  getLayerStyles: getLayerStyles,
+  getServicesInArray: getServicesInArray
 });
 
 /* *
@@ -2847,7 +2897,8 @@ var constants$1 = /*#__PURE__*/Object.freeze({
   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
+  MAP_SERVICES_SET_LAYERS: MAP_SERVICES_SET_LAYERS,
+  MAP_SERVICES_REMOVE_SERVICE: MAP_SERVICES_REMOVE_SERVICE
 });
 
 /* *
@@ -3305,6 +3356,16 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
 }
 
 /* *
@@ -3971,6 +4032,11 @@ var reducer$4 = function reducer() {
           return;
         }
 
+        if (!targetId) {
+          console.warn("SYNCGROUPS_ADD_TARGET: targetId is not defined.");
+          return;
+        }
+
         if (draft.groups.byId[groupId].targets.allIds.includes(targetId)) {
           return;
         }
@@ -4598,7 +4664,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),
@@ -4708,7 +4774,7 @@ function layerActionsSaga(_ref3) {
           return _context3.stop();
       }
     }
-  }, _marked3$3);
+  }, _marked3$4);
 }
 function addLayerActionsSaga(_ref4) {
   var payload, type, targets;
@@ -4948,7 +5014,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;
@@ -5064,7 +5130,7 @@ function linkGroupTargetSaga(_ref2) {
           return _context3.stop();
       }
     }
-  }, _marked3$2);
+  }, _marked3$3);
 }
 
 function rootSaga$3() {
@@ -5125,11 +5191,11 @@ var useStyles$I = makeStyles(function (theme) {
         },
         '&.Mui-selected': {
           color: theme.palette.common.white,
-          backgroundColor: theme.palette.geowebColors.buttons.primaryActive.fill,
+          backgroundColor: theme.palette.geowebColors.buttons.primary.active.fill,
           boxShadow: "none",
           '&:hover': {
             color: theme.palette.common.white,
-            backgroundColor: theme.palette.geowebColors.buttons.primaryMouseover.fill
+            backgroundColor: theme.palette.geowebColors.buttons.primary.mouseOver.fill
           }
         },
         '&:after': {
@@ -5249,9 +5315,11 @@ var TooltipSelect = function TooltipSelect(_a) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
+var SyncGroupTypeList = [SYNCGROUPS_TYPE_SETBBOX, SYNCGROUPS_TYPE_SETTIME];
 
 var types = /*#__PURE__*/Object.freeze({
-  __proto__: null
+  __proto__: null,
+  SyncGroupTypeList: SyncGroupTypeList
 });
 
 /* *
@@ -5436,7 +5504,7 @@ var getDialogDetailsByType = function getDialogDetailsByType(store, dialogType)
  *
  * @param {object} store store object from which the ui state wll be extracted
  * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
- * @returns {array} [string, boolean] first element gives the active map id, second element whether the dialog is open
+ * @returns {boolean} returnType: boolean
  */
 
 var getisDialogOpen = createSelector(getDialogDetailsByType, function (details) {
@@ -5451,7 +5519,7 @@ var getisDialogOpen = createSelector(getDialogDetailsByType, function (details)
  *
  * @param {object} store store object from which the ui state wll be extracted
  * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
- * @returns {array} [string, boolean] first element gives the active map id, second element whether the dialog is open
+ * @returns {string} returnType: string - the active map id
  */
 
 var getDialogMapId = createSelector(getDialogDetailsByType, function (details) {
@@ -5515,7 +5583,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) {
@@ -5622,7 +5690,7 @@ function rootSaga$2() {
           return _context3.stop();
       }
     }
-  }, _marked3$1);
+  }, _marked3$2);
 }
 
 /* *
@@ -6357,6 +6425,16 @@ var reducer$1 = function reducer() {
         return reducer(state, mapAction);
       }
 
+    case MAP_SERVICES_REMOVE_SERVICE:
+      return produce(state, function (draft) {
+        if (draft.byId[action.payload.serviceUrl]) {
+          draft.allIds = draft.allIds.filter(function (id) {
+            return id !== action.payload.serviceUrl;
+          });
+          delete draft.byId[action.payload.serviceUrl];
+        }
+      });
+
     default:
       return state;
   }
@@ -6364,7 +6442,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),
@@ -6467,7 +6545,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;
@@ -6777,7 +6855,10 @@ var initialState = {
       byId: {},
       allIds: []
     },
-    keywords: []
+    keywords: {
+      byId: {},
+      allIds: []
+    }
   }
 };
 var reducer = function reducer() {
@@ -6806,28 +6887,21 @@ var reducer = function reducer() {
                 _step;
 
             try {
-              var _loop = function _loop() {
+              for (_iterator.s(); !(_step = _iterator.n()).done;) {
                 var keyword = _step.value;
-                var foundKeyword = draft.filters.keywords.find(function (object) {
-                  return object.id === keyword;
-                });
 
-                if (foundKeyword) {
-                  foundKeyword.amount += 1;
-                  foundKeyword.amountVisible += 1;
-                } else {
-                  var newKeywordObject = {
+                if (!draft.filters.keywords.byId[keyword]) {
+                  draft.filters.keywords.byId[keyword] = {
                     id: keyword,
                     amount: 1,
                     amountVisible: 1,
                     checked: true
                   };
-                  draft.filters.keywords.push(newKeywordObject);
+                  draft.filters.keywords.allIds.push(keyword);
+                } else {
+                  draft.filters.keywords.byId[keyword].amount += 1;
+                  draft.filters.keywords.byId[keyword].amountVisible += 1;
                 }
-              };
-
-              for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                _loop();
               }
             } catch (err) {
               _iterator.e(err);
@@ -6843,37 +6917,72 @@ var reducer = function reducer() {
         });
       }
 
-    case 'LAYER_SELECT_ENABLE_ACTIVE_SERVICE':
+    case 'LAYER_SELECT_SERVICE_REMOVED':
       {
-        var _action$payload2 = action.payload,
-            _serviceUrl = _action$payload2.serviceUrl,
-            _keywords = _action$payload2.keywords;
         return produce(state, function (draft) {
-          draft.filters.activeServices.byId[_serviceUrl].enabled = true;
+          var serviceUrl = action.payload.serviceUrl; // 1. Find a service that is to be removed
 
-          var _iterator2 = _createForOfIteratorHelper(_keywords),
+          var foundService = draft.filters.activeServices.byId[serviceUrl]; // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
+
+          var _iterator2 = _createForOfIteratorHelper(foundService.keywordsPerService),
               _step2;
 
           try {
-            var _loop2 = function _loop2() {
+            var _loop = function _loop() {
               var keyword = _step2.value;
-              var foundObject = draft.filters.keywords.find(function (object) {
-                return object.id === keyword;
-              });
+              var foundObject = draft.filters.keywords.byId[keyword];
 
-              if (foundObject) {
-                foundObject.amountVisible += 1;
+              if (foundObject && foundObject.amount) {
+                foundObject.amount -= 1;
+                foundObject.amountVisible -= 1;
+              }
+
+              if (foundObject && foundObject.amount === 0) {
+                delete draft.filters.keywords.byId[keyword];
+                draft.filters.keywords.allIds = draft.filters.keywords.allIds.filter(function (id) {
+                  return id !== keyword;
+                });
               }
             };
 
             for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-              _loop2();
-            }
+              _loop();
+            } // Finally remove object from activeServices, so if the service is added again later on, new object and keywords will be re-added
+
           } catch (err) {
             _iterator2.e(err);
           } finally {
             _iterator2.f();
           }
+
+          delete draft.filters.activeServices.byId[serviceUrl];
+          draft.filters.activeServices.allIds = draft.filters.activeServices.allIds.filter(function (id) {
+            return id !== serviceUrl;
+          });
+        });
+      }
+
+    case 'LAYER_SELECT_ENABLE_ACTIVE_SERVICE':
+      {
+        var _action$payload2 = action.payload,
+            _serviceUrl = _action$payload2.serviceUrl,
+            _keywords = _action$payload2.keywords;
+        return produce(state, function (draft) {
+          draft.filters.activeServices.byId[_serviceUrl].enabled = true;
+
+          var _iterator3 = _createForOfIteratorHelper(_keywords),
+              _step3;
+
+          try {
+            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+              var keyword = _step3.value;
+              draft.filters.keywords.byId[keyword].amountVisible += 1;
+            }
+          } catch (err) {
+            _iterator3.e(err);
+          } finally {
+            _iterator3.f();
+          }
         });
       }
 
@@ -6885,37 +6994,51 @@ var reducer = function reducer() {
         return produce(state, function (draft) {
           draft.filters.activeServices.byId[_serviceUrl2].enabled = false;
 
-          var _iterator3 = _createForOfIteratorHelper(_keywords2),
-              _step3;
+          var _iterator4 = _createForOfIteratorHelper(_keywords2),
+              _step4;
 
           try {
-            var _loop3 = function _loop3() {
-              var keyword = _step3.value;
-              var foundObject = draft.filters.keywords.find(function (object) {
-                return object.id === keyword;
-              });
+            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+              var keyword = _step4.value;
+              draft.filters.keywords.byId[keyword].amountVisible -= 1;
+            }
+          } catch (err) {
+            _iterator4.e(err);
+          } finally {
+            _iterator4.f();
+          }
+        });
+      }
 
-              if (foundObject && foundObject.amountVisible > 0) {
-                foundObject.amountVisible -= 1;
-              }
-            };
+    case 'LAYER_SELECT_TOGGLE_KEYWORDS':
+      {
+        return produce(state, function (draft) {
+          var keywords = action.payload.keywords;
 
-            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-              _loop3();
+          var _iterator5 = _createForOfIteratorHelper(keywords),
+              _step5;
+
+          try {
+            for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+              var keyword = _step5.value;
+              draft.filters.keywords.byId[keyword].checked = !draft.filters.keywords.byId[keyword].checked;
             }
           } catch (err) {
-            _iterator3.e(err);
+            _iterator5.e(err);
           } finally {
-            _iterator3.f();
+            _iterator5.f();
           }
         });
       }
 
-    case 'LAYER_SELECT_UPDATE_KEYWORDS':
+    case 'LAYER_SELECT_ENABLE_ONLY_ONE_KEYWORD':
       {
         return produce(state, function (draft) {
-          var keywords = action.payload.keywords;
-          draft.filters.keywords = keywords;
+          var keyword = action.payload.keyword;
+          draft.filters.keywords.allIds.forEach(function (id) {
+            draft.filters.keywords.byId[id].checked = false;
+          });
+          draft.filters.keywords.byId[keyword].checked = true;
         });
       }
 
@@ -6944,7 +7067,9 @@ var LAYER_SELECT_SET_SEARCH_FILTER = 'LAYER_SELECT_SET_SEARCH_FILTER';
 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_KEYWORDS_AND_ACTIVE_SERVICES = 'LAYER_SELECT_ADD_KEYWORDS_AND_ACTIVE_SERVICES';
-var LAYER_SELECT_UPDATE_KEYWORDS = 'LAYER_SELECT_UPDATE_KEYWORDS';
+var LAYER_SELECT_SERVICE_REMOVED = 'LAYER_SELECT_SERVICE_REMOVED';
+var LAYER_SELECT_TOGGLE_KEYWORDS = 'LAYER_SELECT_TOGGLE_KEYWORDS';
+var LAYER_SELECT_ENABLE_ONLY_ONE_KEYWORD = 'LAYER_SELECT_ENABLE_ONLY_ONE_KEYWORD';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -7014,15 +7139,49 @@ var addKeywordsAndActiveServices = function addKeywordsAndActiveServices(payload
     payload: payload
   };
 };
-var updateKeywords = function updateKeywords(payload) {
+/*
+ * Removes the given service from Layer Select store
+ *
+ * Example: layerSelectServiceRemoved({ serviceUrl: 'https://service.wms' })
+ * @param {string} payload {serviceUrl: string}
+ */
+
+var layerSelectServiceRemoved = function layerSelectServiceRemoved(payload) {
+  return {
+    type: LAYER_SELECT_SERVICE_REMOVED,
+    payload: payload
+  };
+};
+/*
+ * Toggles keywords listed
+ *
+ * Example: toggleKeywords({ keywords: ['keyword1', 'keyword2'] })
+ * @param {string[]} payload { keywords: string[] }
+ */
+
+var toggleKeywords = function toggleKeywords(payload) {
+  return {
+    type: LAYER_SELECT_TOGGLE_KEYWORDS,
+    payload: payload
+  };
+};
+/*
+ * Enables only one keyword and disables all other
+ *
+ * Example: toggleKeywords({ keyword: 'keyword1' })
+ * @param {string} payload { keyword: string }
+ */
+
+var enableOnlyOneKeyword = function enableOnlyOneKeyword(payload) {
   return {
-    type: LAYER_SELECT_UPDATE_KEYWORDS,
+    type: LAYER_SELECT_ENABLE_ONLY_ONE_KEYWORD,
     payload: payload
   };
 };
 
 var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
-    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
+    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectServiceRemovedSaga),
+    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
 function newServiceAddedSaga(capturedAction) {
   var addedService, service, keywords;
   return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
@@ -7047,21 +7206,45 @@ function newServiceAddedSaga(capturedAction) {
     }
   }, _marked);
 }
-function rootSaga() {
-  return regeneratorRuntime.wrap(function rootSaga$(_context2) {
+function layerSelectServiceRemovedSaga(capturedAction) {
+  var removedService, serviceUrl;
+  return regeneratorRuntime.wrap(function layerSelectServiceRemovedSaga$(_context2) {
     while (1) {
       switch (_context2.prev = _context2.next) {
         case 0:
-          _context2.next = 2;
-          return takeEvery(MAP_SERVICES_SET_LAYERS, newServiceAddedSaga);
+          removedService = capturedAction.payload;
+          serviceUrl = removedService.serviceUrl;
+          _context2.next = 4;
+          return put(layerSelectServiceRemoved({
+            serviceUrl: serviceUrl
+          }));
 
-        case 2:
+        case 4:
         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, newServiceAddedSaga);
+
+        case 2:
+          _context3.next = 4;
+          return takeEvery(MAP_SERVICES_REMOVE_SERVICE, layerSelectServiceRemovedSaga);
+
+        case 4:
+        case "end":
+          return _context3.stop();
+      }
+    }
+  }, _marked3);
+}
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -7134,7 +7317,8 @@ var recurseNodes = function recurseNodes(nodesToRecur) {
     path: nodesToRecur.path || [],
     children: [],
     keywords: nodesToRecur.keywords || [],
-    "abstract": nodesToRecur["abstract"] || ''
+    "abstract": nodesToRecur["abstract"] || '',
+    styles: nodesToRecur.styles || []
   };
 
   if (nodesToRecur.children) {
@@ -7532,133 +7716,256 @@ var WMSServerList = function WMSServerList(_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 DWD = {
-  name: 'DWD',
-  url: 'https://maps.dwd.de/geoserver/ows?',
-  id: 'dwd'
-};
-var nationaalgeoregister = {
-  name: 'nationaalgeoregister.nl',
-  url: 'https://geodata.nationaalgeoregister.nl/cbsgebiedsindelingen/wms?request=GetCapabilities&service=wms',
-  id: 'nationaalgeoregister'
-};
-var KNMImsgcpp = {
-  name: 'KNMImsgcpp',
-  url: 'https://adaguc-server-msg-cpp-portal.pmc.knmi.cloud/wms?DATASET=msgrt&',
-  id: 'msgcpp-ogc-realtime'
-};
-var HeiGit = {
-  name: 'HeiGit',
-  url: 'https://maps.heigit.org/osm-wms/service',
-  id: 'HeiGit-osm-wms'
-};
-var ArcGisCanvas = {
-  name: 'ArcGisCanvas',
-  url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/',
-  id: 'ArcGisCanvas'
-};
-var KNMIgeoservicesBaselayers = {
-  name: 'KNMIgeoservicesBaselayers',
-  url: 'https://geoservices.knmi.nl/wms?DATASET=baselayers&',
-  id: 'KNMIgeoservicesBaselayers'
-};
-var KNMIgeoservicesRadar = {
-  name: 'KNMIgeoservicesRadar',
-  url: 'https://geoservices.knmi.nl/wms?dataset=RADAR&',
-  id: 'KNMIgeoservicesRadar'
-};
-var KNMIgeoservicesObs = {
-  name: 'KNMIgeoservicesObs',
-  url: 'https://geoservices.knmi.nl/adagucserver?dataset=OBS&service=WMS&',
-  id: 'KNMIgeoservicesObs'
-};
-var KNMIgeoservicesKlimaatAtlas = {
-  name: 'KNMIgeoservicesKlimaatAtlas',
-  url: 'https://geoservices.knmi.nl/wms?DATASET=gsie-dataset&SERVICE=WMS&',
-  id: 'KNMIgeoservicesKlimaatAtlas'
-};
-var KNMIgeoservicesHarmonie = {
-  name: 'KNMIgeoservicesHarmonie',
-  url: 'https://geoservices.knmi.nl/wms?DATASET=HARM_N25&',
-  id: 'KNMIgeoservicesKliKNMIgeoservicesHarmoniemaatAtlas'
-};
-var KNMIgeoservicesHarmonieMLService = {
-  name: 'KNMI Harmonie ML',
-  url: 'https://geoservices.knmi.nl/wms?DATASET=HARM_N25_ML&SERVICE=WMS&',
-  id: 'harmonieML'
-};
-var MetNorwayService = {
-  name: 'MetNorwayService',
-  url: 'https://wms-e1.geoweb.met.no/wms?',
-  id: 'MetNorwayService'
+
+var parseBoolean = function parseBoolean(value) {
+  return ['true', 'false', true, false].includes(value) && JSON.parse(value);
 };
-var FMIopenwms = {
-  name: 'FMIopenwms',
-  url: 'https://openwms.fmi.fi/geoserver/wms?',
-  id: 'FMIopenwms'
+
+var isBaseLayer = function isBaseLayer(layer) {
+  return ['baseLayer'].includes(layer.layerType);
 };
-var DWDObservations = {
-  name: 'DWDObservations',
-  url: 'https://maps.dwd.de/geoserver/dwd/Wetter_Beobachtungen/ows?',
-  id: 'DWDObservations'
+
+var isMapLayer = function isMapLayer(layer) {
+  return ['mapLayer'].includes(layer.layerType);
 };
-var DWDWarnings = {
-  name: 'DWDWarnings',
-  url: 'https://maps.dwd.de/geoserver/dwd/Warnungen_Gemeinden_vereinigt/ows?',
-  id: 'DWDWarnings'
+
+var isOverLayer = function isOverLayer(layer) {
+  return ['overLayer'].includes(layer.layerType);
 };
-var DWDWXProdukt = {
-  name: 'DWDWXProdukt',
-  url: 'https://maps.dwd.de/geoserver/dwd/WX-Produkt/ows?',
-  id: 'DWDWXProdukt'
+
+var isValidService = function isValidService(service) {
+  return Object.prototype.hasOwnProperty.call(service, 'url');
 };
-var EUMETSAT = {
-  name: 'EUMETSAT',
-  url: 'https://view.eumetsat.int/geoserver/wms?',
-  id: 'EUMETSAT'
+
+var isValidBbox = function isValidBbox(bbox) {
+  var isFiniteNumber = Number.isFinite(bbox.bottom) && Number.isFinite(bbox.left) && Number.isFinite(bbox.right) && Number.isFinite(bbox.top);
+  return isFiniteNumber;
 };
-var eumetviewEUMETSAT = {
-  name: 'eumetviewEUMETSAT',
-  url: 'https://eumetview.eumetsat.int/geoserv/wms?',
-  id: 'eumetviewEUMETSAT'
+
+var isValidSrs = function isValidSrs(srs) {
+  var isValid = srs.includes('EPSG');
+  return isValid;
 };
-var ECMWFPublicService = {
-  name: 'ECMWF',
-  url: 'https://apps.ecmwf.int/wms/?token=public',
-  id: 'ecmwf'
+
+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 MeteoCanada = {
-  name: 'Meteo Canada',
-  url: 'https://geo.weather.gc.ca/geomet/?lang=en&',
-  id: 'MeteoCanada'
+
+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;
 };
 
-var publicServices = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  DWD: DWD,
-  nationaalgeoregister: nationaalgeoregister,
-  KNMImsgcpp: KNMImsgcpp,
-  HeiGit: HeiGit,
-  ArcGisCanvas: ArcGisCanvas,
-  KNMIgeoservicesBaselayers: KNMIgeoservicesBaselayers,
-  KNMIgeoservicesRadar: KNMIgeoservicesRadar,
-  KNMIgeoservicesObs: KNMIgeoservicesObs,
-  KNMIgeoservicesKlimaatAtlas: KNMIgeoservicesKlimaatAtlas,
-  KNMIgeoservicesHarmonie: KNMIgeoservicesHarmonie,
-  KNMIgeoservicesHarmonieMLService: KNMIgeoservicesHarmonieMLService,
-  MetNorwayService: MetNorwayService,
-  FMIopenwms: FMIopenwms,
-  DWDObservations: DWDObservations,
-  DWDWarnings: DWDWarnings,
-  DWDWXProdukt: DWDWXProdukt,
-  EUMETSAT: EUMETSAT,
-  eumetviewEUMETSAT: eumetviewEUMETSAT,
-  ECMWFPublicService: ECMWFPublicService,
-  MeteoCanada: MeteoCanada
-});
+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 filterServices = function filterServices(presetArray) {
+  var hasServices = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
+  var validServices = hasServices ? presetArray.filter(function (preset) {
+    return isValidService(preset);
+  }) : null;
+  var hasValidServices = validServices && validServices.length > 0;
+  var services = hasValidServices ? validServices : undefined;
+  return services;
+};
+var filterBbox = function filterBbox(presetBbox) {
+  var hasAllValues = presetBbox && presetBbox.bottom && presetBbox.left && presetBbox.right && presetBbox.top;
+  var bbox = hasAllValues && isValidBbox(presetBbox) ? presetBbox : undefined;
+  return bbox;
+};
+var filterSrs = function filterSrs(presetSrs) {
+  var isValid = presetSrs && isValidSrs(presetSrs);
+  var srs = isValid ? presetSrs : undefined;
+  return srs;
+};
+var filterDimensions = function filterDimensions(mapLayers) {
+  var layerDimensions = mapLayers.reduce(function (mapLayerList, layer) {
+    if (layer.dimensions && layer.dimensions.length > 0 && layer.id) {
+      var dimensions = layer.dimensions.map(function (dimension) {
+        return {
+          dimension: dimension,
+          layerId: layer.id
+        };
+      });
+      return mapLayerList.concat(dimensions);
+    }
+
+    return mapLayerList;
+  }, []);
+  return layerDimensions.length > 0 ? layerDimensions : undefined;
+};
+var filterMapPresets = function filterMapPresets(presets) {
+  var preset = presets && presets.preset;
+  var filteredBbox = preset && preset.bbox ? filterBbox(preset.bbox) : undefined;
+  var filteredSrs = preset && preset.srs ? filterSrs(preset.srs) : undefined;
+  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 presetType = preset && preset.presetType ? preset.presetType : undefined;
+  var presetId = preset && preset.presetId ? preset.presetId : undefined;
+  var presetName = preset && preset.presetName ? preset.presetName : undefined;
+  var activeLayerId = preset && preset.activeLayerId ? preset.activeLayerId : undefined;
+  var layerDimensions = filteredMapLayers ? filterDimensions(filteredMapLayers) : undefined;
+  var filteredPreset = {
+    presetType: presetType,
+    presetId: presetId,
+    presetName: presetName,
+    bbox: filteredBbox,
+    services: filterredServices,
+    baseServices: baseServices,
+    srs: filteredSrs,
+    baseLayers: filteredBaseLayers,
+    mapLayers: filteredMapLayers,
+    activeLayerId: activeLayerId,
+    layerDimensions: layerDimensions
+  };
+  return filteredPreset;
+};
+var getInitialPresets = function getInitialPresets(mapPresets, defaultInitialPresets) {
+  var filteredPresets = mapPresets ? filterMapPresets(mapPresets) : null;
+  var initialPresets = filteredPresets || filterMapPresets(defaultInitialPresets);
+  return initialPresets;
+};
+
+var preset = {
+	presetType: "mapPreset",
+	presetId: "mapPreset-1",
+	presetName: "Layer manager preset",
+	services: [
+		{
+			name: "KNMIgeoservicesRadar",
+			url: "https://geoservices.knmi.nl/wms?dataset=RADAR&",
+			id: "KNMIgeoservicesRadar"
+		},
+		{
+			name: "MetNorwayService",
+			url: "https://wms-e1.geoweb.met.no/wms?",
+			id: "MetNorwayService"
+		},
+		{
+			name: "FMIopenwms",
+			url: "https://openwms.fmi.fi/geoserver/wms?",
+			id: "FMIopenwms"
+		},
+		{
+			name: "ECMWF",
+			url: "https://apps.ecmwf.int/wms/?token=public",
+			id: "ecmwf"
+		},
+		{
+			name: "KNMIgeoservicesHarmonie",
+			url: "https://geoservices.knmi.nl/wms?DATASET=HARM_N25&",
+			id: "KNMIgeoservicesKliKNMIgeoservicesHarmoniemaatAtlas"
+		},
+		{
+			name: "KNMI Harmonie ML",
+			url: "https://geoservices.knmi.nl/wms?DATASET=HARM_N25_ML&SERVICE=WMS&",
+			id: "harmonieML"
+		},
+		{
+			name: "KNMIgeoservicesObs",
+			url: "https://geoservices.knmi.nl/adagucserver?dataset=OBS&service=WMS&",
+			id: "KNMIgeoservicesObs"
+		},
+		{
+			name: "DWD",
+			url: "https://maps.dwd.de/geoserver/ows?",
+			id: "dwd"
+		}
+	],
+	baseServices: [
+		{
+			name: "KNMIgeoservicesBaselayers",
+			url: "https://geoservices.knmi.nl/wms?DATASET=baselayers&",
+			id: "KNMIgeoservicesBaselayers"
+		},
+		{
+			name: "DWD",
+			url: "https://maps.dwd.de/geoserver/ows?",
+			id: "dwd"
+		}
+	],
+	layers: [
+		{
+			id: "layerid_2",
+			name: "WorldMap_Light_Grey_Canvas",
+			type: "twms",
+			layerType: "baseLayer"
+		},
+		{
+			service: "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/",
+			id: "layerid_3",
+			name: "arcGisCanvas",
+			type: "twms",
+			enabled: "true",
+			layerType: "baseLayer"
+		},
+		{
+			id: "base-layer-2",
+			name: "OpenStreetMap_NL",
+			type: "twms",
+			layerType: "baseLayer",
+			enabled: "true"
+		},
+		{
+			service: "https://maps.heigit.org/osm-wms/service",
+			id: "layerid_5",
+			name: "osm_auto:all",
+			layerType: "baseLayer"
+		}
+	]
+};
+var initialPreset = {
+	preset: preset
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -7676,437 +7983,45 @@ var publicServices = /*#__PURE__*/Object.freeze({
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var baseLayer$1 = {
-  name: 'arcGisSat',
-  title: 'arcGisSat',
-  type: 'twms',
-  layerType: LayerType.baseLayer,
-  enabled: true,
-  id: generateLayerId()
-}; // Base Layers List
 
-var baseLayerGrey$1 = {
-  id: generateLayerId(),
-  name: 'WorldMap_Light_Grey_Canvas',
-  type: 'twms',
-  layerType: LayerType.baseLayer
-};
-var baseLayerOpenStreetMapNL$1 = {
-  id: 'base-layer-2',
-  name: 'OpenStreetMap_NL',
-  type: 'twms',
-  layerType: LayerType.baseLayer,
-  enabled: true
-};
-var baseLayerArcGisCanvas$1 = {
-  service: ArcGisCanvas.url,
-  id: generateLayerId(),
-  name: 'arcGisCanvas',
-  type: 'twms',
-  enabled: true,
-  layerType: LayerType.baseLayer
-};
-var baseLayerWorldMap$1 = {
-  id: generateLayerId(),
-  name: 'WorldMap',
-  type: 'twms',
-  layerType: LayerType.baseLayer,
-  enabled: true
-};
-var baseLayerHeiGit = {
-  service: HeiGit.url,
-  id: generateLayerId(),
-  name: 'osm_auto:all',
-  layerType: LayerType.baseLayer
-}; // Over Layers List
+var _filterMapPresets = filterMapPresets(initialPreset),
+    services = _filterMapPresets.services,
+    baseServices = _filterMapPresets.baseServices,
+    baseLayers = _filterMapPresets.baseLayers;
 
-var overLayer$1 = {
-  service: KNMIgeoservicesBaselayers.url,
-  name: 'countryborders',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.overLayer
-}; // KNMI msgcpp List
+var availableDefaultBaseLayers = baseLayers;
+var preloadedDefaultBaseServices = baseServices;
+var preloadedDefaultMapServices = services;
 
-var msgCppLayer = {
-  // doesn't work with https
-  service: KNMImsgcpp.url,
-  name: 'lwe_precipitation_rate',
-  format: 'image/png',
-  enabled: true,
-  style: 'precip-transparent/nearest',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-}; // Nederlandse Nationaal Georegister Layers list
+var defaultConfigurations = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  availableDefaultBaseLayers: availableDefaultBaseLayers,
+  preloadedDefaultBaseServices: preloadedDefaultBaseServices,
+  preloadedDefaultMapServices: preloadedDefaultMapServices
+});
 
-var veiligheidsRegiosGebiedsIndelingenLabels = {
-  service: nationaalgeoregister.url,
-  name: 'cbsgebiedsindelingen:cbs_veiligheidsregio_2020_labelpoint',
-  style: 'CBS_Label',
-  enabled: false,
-  layerType: LayerType.mapLayer
-};
-var veiligheidsRegiosGebiedsIndelingen = {
-  service: nationaalgeoregister.url,
-  name: 'cbsgebiedsindelingen:cbs_veiligheidsregio_2020_gegeneraliseerd',
-  style: 'CBS_Gebiedsindeling',
-  enabled: false,
-  layerType: LayerType.mapLayer
-}; // KNMI Geoservices Layers List
+var useStyles$H = makeStyles({
+  buttonDiv: {
+    position: 'relative'
+  },
+  loadingButton: {
+    position: 'absolute',
+    top: 7,
+    left: 7,
+    zIndex: 1
+  },
+  button: {
+    width: '24px',
+    height: '24px',
+    margin: '6px 0px 0px 10px'
+  }
+});
 
-var radarLayer$1 = {
-  service: KNMIgeoservicesRadar.url,
-  name: 'RAD_NL25_PCP_CM',
-  format: 'image/png',
-  enabled: true,
-  style: 'radar/nearest',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var radarLayerWithError = {
-  service: KNMIgeoservicesRadar.url,
-  name: 'radarLayer',
-  format: 'image/png',
-  enabled: true,
-  style: 'knmiradar/nearest',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsAirTemperature = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/ta',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsWind = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/wind',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsAirPressureAtSeaLevel = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/pp',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsRelativeHumidity = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/rh',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsGlobalSolarRadiation = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/qg',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsPrecipitationIntensityPWS = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/pg',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var harmonieRelativeHumidityPl = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'relative_humidity__at_pl',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmonieWindPl = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'wind__at_pl',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmonieAirTemperature = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'air_temperature__at_2m',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmoniePrecipitation = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'precipitation_flux',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmoniePressure = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'air_pressure_at_sea_level',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmonieWindFlags = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'wind__at_10m',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var klimaatAtlasTG3 = {
-  service: KNMIgeoservicesKlimaatAtlas.url,
-  name: 'TG3',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-}; // DWD Layers List
-
-var dwdWarningLayer = {
-  service: DWDWarnings.url,
-  name: 'Warnungen_Gemeinden_vereinigt',
-  format: 'image/png',
-  // style: 'warnungen_gemeinden_vereinigt_event_seamless_param',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var dwdRadarLayer = {
-  service: DWDWXProdukt.url,
-  name: 'WX-Produkt',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-}; // this needs authentication to work
-
-var dwdObservationsWetterLayer = {
-  service: DWDObservations.url,
-  name: 'Wetter_Beobachtungen',
-  style: 'Wetter_Symbole',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer // headers: [{ name: 'Authorization', value: 'Basic ...' }]
-
-};
-var dwdObservationsWetterLayerWithHeader = {
-  service: DWDObservations.url,
-  name: 'Wetter_Beobachtungen',
-  style: 'Wetter_Symbole',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer,
-  headers: [{
-    name: 'authorization',
-    value: 'Basic aW50cmFuZXQtdXNlcjpDQnMjMTEh'
-  }]
-}; // this needs authentication to work
-
-var dwdObservationsWindLayer = {
-  service: DWDObservations.url,
-  name: 'Wetter_Beobachtungen',
-  style: 'Wetter_Wind',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-}; // FMI open wms Layers List
-
-var FMITemp = {
-  service: FMIopenwms.url,
-  name: 'temperature-forecast',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-}; // Met Norway Layers List
-
-var MetNoTemp = {
-  service: MetNorwayService.url,
-  name: 'thredds_meps_latest_wind',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var metNorwayWind1 = {
-  service: MetNorwayService.url,
-  name: 'thredds_meps_latest_wind',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var metNorwayWind2 = {
-  service: MetNorwayService.url,
-  name: 'thredds_aromearctic_extracted_t',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var metNorwayWind3 = {
-  service: MetNorwayService.url,
-  name: 'thredds_nk800_temperature',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var metNorwayLatestT = {
-  service: MetNorwayService.url,
-  name: 'thredds_meps_latest_t',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var metNorwaySalinaty = {
-  service: MetNorwayService.url,
-  name: 'thredds_barents_2_5km_1h_salinity',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgFesEUMETSAT = {
-  service: EUMETSAT.url,
-  name: 'msg_fes:rgb_eview',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgNaturalenhncdEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_naturalenhncd',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgAshEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_ash',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgCthEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_cth',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgFogEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_fog',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgNaturalEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_natural',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-
-var publicLayers = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  baseLayer: baseLayer$1,
-  baseLayerGrey: baseLayerGrey$1,
-  baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL$1,
-  baseLayerArcGisCanvas: baseLayerArcGisCanvas$1,
-  baseLayerWorldMap: baseLayerWorldMap$1,
-  baseLayerHeiGit: baseLayerHeiGit,
-  overLayer: overLayer$1,
-  msgCppLayer: msgCppLayer,
-  veiligheidsRegiosGebiedsIndelingenLabels: veiligheidsRegiosGebiedsIndelingenLabels,
-  veiligheidsRegiosGebiedsIndelingen: veiligheidsRegiosGebiedsIndelingen,
-  radarLayer: radarLayer$1,
-  radarLayerWithError: radarLayerWithError,
-  obsAirTemperature: obsAirTemperature,
-  obsWind: obsWind,
-  obsAirPressureAtSeaLevel: obsAirPressureAtSeaLevel,
-  obsRelativeHumidity: obsRelativeHumidity,
-  obsGlobalSolarRadiation: obsGlobalSolarRadiation,
-  obsPrecipitationIntensityPWS: obsPrecipitationIntensityPWS,
-  harmonieRelativeHumidityPl: harmonieRelativeHumidityPl,
-  harmonieWindPl: harmonieWindPl,
-  harmonieAirTemperature: harmonieAirTemperature,
-  harmoniePrecipitation: harmoniePrecipitation,
-  harmoniePressure: harmoniePressure,
-  harmonieWindFlags: harmonieWindFlags,
-  klimaatAtlasTG3: klimaatAtlasTG3,
-  dwdWarningLayer: dwdWarningLayer,
-  dwdRadarLayer: dwdRadarLayer,
-  dwdObservationsWetterLayer: dwdObservationsWetterLayer,
-  dwdObservationsWetterLayerWithHeader: dwdObservationsWetterLayerWithHeader,
-  dwdObservationsWindLayer: dwdObservationsWindLayer,
-  FMITemp: FMITemp,
-  MetNoTemp: MetNoTemp,
-  metNorwayWind1: metNorwayWind1,
-  metNorwayWind2: metNorwayWind2,
-  metNorwayWind3: metNorwayWind3,
-  metNorwayLatestT: metNorwayLatestT,
-  metNorwaySalinaty: metNorwaySalinaty,
-  msgFesEUMETSAT: msgFesEUMETSAT,
-  msgNaturalenhncdEUMETSAT: msgNaturalenhncdEUMETSAT,
-  msgAshEUMETSAT: msgAshEUMETSAT,
-  msgCthEUMETSAT: msgCthEUMETSAT,
-  msgFogEUMETSAT: msgFogEUMETSAT,
-  msgNaturalEUMETSAT: msgNaturalEUMETSAT
-});
-
-/* *
- * 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 availableDefaultBaseLayers = [baseLayerGrey$1, baseLayerArcGisCanvas$1, baseLayerOpenStreetMapNL$1, baseLayerHeiGit];
-var preloadedDefaultBaseServices = [KNMIgeoservicesBaselayers, DWD];
-var preloadedDefaultMapServices = [KNMIgeoservicesRadar, MetNorwayService, FMIopenwms, ECMWFPublicService, KNMIgeoservicesHarmonie, KNMIgeoservicesHarmonieMLService, KNMIgeoservicesObs, DWD];
-
-var defaultConfigurations = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  availableDefaultBaseLayers: availableDefaultBaseLayers,
-  preloadedDefaultBaseServices: preloadedDefaultBaseServices,
-  preloadedDefaultMapServices: preloadedDefaultMapServices
-});
-
-var useStyles$H = 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*$/;
-  if (!matcher.test(url)) return false;
-  return true;
+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*$/;
+  if (!matcher.test(url)) return false;
+  return true;
 };
 
 var AddLayersPopup = function AddLayersPopup(_ref) {
@@ -8804,12 +8719,12 @@ var useStyles$D = makeStyles(function (theme) {
       },
       backgroundColor: function backgroundColor(_ref2) {
         var isActive = _ref2.isActive;
-        return isActive ? theme.palette.geowebColors.buttons.primaryActive.fill : 'inherit';
+        return isActive ? theme.palette.geowebColors.buttons.primary.active.fill : 'inherit';
       },
       '&:focus': {
         backgroundColor: function backgroundColor(_ref3) {
           var isActive = _ref3.isActive;
-          return isActive ? theme.palette.geowebColors.buttons.primaryMouseover.fill : theme.palette.geowebColors.layerManager.tableRowMouseover.rgba;
+          return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.layerManager.tableRowMouseover.rgba;
         },
         outline: theme.palette.geowebColors.buttons.focusDefault.outline,
         borderRadius: 0
@@ -8817,7 +8732,7 @@ var useStyles$D = makeStyles(function (theme) {
       '&:hover': {
         backgroundColor: function backgroundColor(_ref4) {
           var isActive = _ref4.isActive;
-          return isActive ? theme.palette.geowebColors.buttons.primaryMouseover.fill : theme.palette.geowebColors.layerManager.tableRowMouseover.rgba;
+          return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.layerManager.tableRowMouseover.rgba;
         }
       }
     },
@@ -10623,63 +10538,61 @@ var LayerManager = function LayerManager(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useButtonStyles = makeStyles(function (theme) {
-  return createStyles({
-    button: {
-      height: '24px',
-      width: function width(_ref) {
-        var _width = _ref.width;
-        return _width ? "".concat(_width, "px") : '24px';
-      },
-      border: 0,
-      backgroundColor: theme.palette.geowebColors.buttons.surfaceIconDefault.fill,
-      borderRadius: '4.5px',
-      textTransform: 'none',
-      '& svg path, svg text': {
-        fill: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
-      },
-      '&:hover': {
-        backgroundColor: theme.palette.geowebColors.buttons.flatMouseover.fill
-      },
-      '&:disabled': {
-        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,
-        '&:hover': {
-          backgroundColor: theme.palette.geowebColors.buttons.primaryMouseover.fill
-        },
-        '& svg': {
-          backgroundColor: 'transparent'
-        },
-        '& svg path, svg text': {
-          fill: theme.palette.geowebColors.typographyAndIcons.buttonIcon
-        }
-      }
-    }
-  });
-});
 
-var ToggleIconButton = function ToggleIconButton(_a) {
+var CustomToggleButton = function CustomToggleButton(_a) {
+  var _a$variant = _a.variant,
+      variant = _a$variant === void 0 ? 'primary' : _a$variant,
+      _a$value = _a.value,
+      value = _a$value === void 0 ? 0 : _a$value,
+      props = __rest(_a, ["variant", "value"]);
+
+  return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({
+    className: variant,
+    value: value
+  }, 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+
+var ToolButton = function ToolButton(_a) {
   var active = _a.active,
-      width = _a.width,
+      _a$width = _a.width,
+      width = _a$width === void 0 ? '24px' : _a$width,
+      _a$height = _a.height,
+      height = _a$height === void 0 ? '24px' : _a$height,
       children = _a.children,
       _a$value = _a.value,
       value = _a$value === void 0 ? 0 : _a$value,
-      props = __rest(_a, ["active", "width", "children", "value"]);
+      _a$sx = _a.sx,
+      sx = _a$sx === void 0 ? {} : _a$sx,
+      props = __rest(_a, ["active", "width", "height", "children", "value", "sx"]);
 
-  var classes = useButtonStyles({
-    width: width
-  });
-  return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({
-    className: classes.button,
+  return /*#__PURE__*/React.createElement(CustomToggleButton, Object.assign({
+    variant: "tool",
     disableRipple: true,
     selected: active,
-    value: value
+    value: value,
+    sx: Object.assign({
+      width: "".concat(width, "!important"),
+      height: "".concat(height, "!important"),
+      textTransform: 'none!important',
+      padding: '11px!important'
+    }, sx)
   }, props), children);
 };
 
@@ -10719,18 +10632,18 @@ var KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_ref) {
       source: source
     }));
   }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
-  return /*#__PURE__*/React.createElement(ToggleIconButton, {
+  return /*#__PURE__*/React.createElement(ToolButton, {
     onClick: openFilterResultsDialog,
     active: isOpenInStore,
     id: "keywordFilterButton",
     "data-testid": "keywordFilterButton",
-    disableRipple: true
+    disableRipple: true,
+    variant: "tool"
   }, /*#__PURE__*/React.createElement(SvgIcon, {
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
     d: "M14.155 12.567c1.362 0 2.523.848 2.992 2.043h1.895a1.173 1.173 0 0 1 0 2.346h-1.895A3.213 3.213 0 0 1 14.155 19a3.213 3.213 0 0 1-2.992-2.044h-5.99a1.172 1.172 0 1 1 0-2.346h5.99a3.214 3.214 0 0 1 2.992-2.043zm0 1.755a1.461 1.461 0 1 0 0 2.922 1.461 1.461 0 0 0 0-2.922zM10.06 5c1.362 0 2.524.848 2.992 2.044h5.99a1.173 1.173 0 1 1 0 2.344h-5.99a3.214 3.214 0 0 1-2.992 2.044 3.216 3.216 0 0 1-2.992-2.044H5.173a1.172 1.172 0 1 1 0-2.344h1.895A3.216 3.216 0 0 1 10.06 5zm0 1.754a1.461 1.461 0 1 0 0 2.922 1.461 1.461 0 0 0 0-2.922z",
-    fill: "#FFF",
     fillRule: "evenodd"
   }))));
 };
@@ -10772,14 +10685,14 @@ var getSearchFilter = createSelector(layerSelectStore, function (store) {
  *
  * Example getActiveServices(store);
  * @param {object} store store: object - store object
- * @returns {array} returnType: array of active services
+ * @returns {object} returnType: object 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.byId : {};
-});
+}, selectorMemoizationOptions);
 /**
  * Returns all ids of enabled services
  *
@@ -10801,36 +10714,75 @@ var getEnabledServiceIds = createSelector(layerSelectStore, function (store) {
 
     return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId[service].id;
   });
-});
+}, selectorMemoizationOptions);
 /**
- * Returns all keywords
+ * Returns all ids of checked keywords
  *
- * Example getKeywords(store);
+ * Example getCheckedKeywordIds(store);
  * @param {object} store store: object - store object
- * @returns {array} returnType: array of keyword objects
+ * @returns {array} returnType: array of keyword ids that are checked
  */
 
-var getKeywords = createSelector(layerSelectStore, function (store) {
-  return store ? store.filters.keywords : [];
-});
+var getCheckedKeywordIds = createSelector(layerSelectStore, function (store) {
+  var _a, _b;
 
-/* *
- * 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
+  var checkedKeywords = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.keywords.allIds.filter(function (keyword) {
+    var _a;
+
+    return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.keywords.byId[keyword].checked;
+  })) !== null && _b !== void 0 ? _b : [];
+  return checkedKeywords.map(function (keyword) {
+    var _a;
+
+    return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.keywords.byId[keyword].id;
+  });
+}, selectorMemoizationOptions);
+/**
+ * Returns ids of all keywords
  *
- *     http://www.apache.org/licenses/LICENSE-2.0
+ * Example getAllKeywordIds(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: array of all keyword ids
+ */
+
+var getAllKeywordIds = createSelector(layerSelectStore, function (store) {
+  var _a, _b;
+
+  return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.keywords.allIds) !== null && _b !== void 0 ? _b : [];
+}, selectorMemoizationOptions);
+/**
+ * Returns if all keywords are checked
  *
- * 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.
+ * Example isAllKeywordsChecked(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: boolean if all keywords are checked
+ */
+
+var isAllKeywordsChecked = createSelector(layerSelectStore, function (store) {
+  var _a, _b;
+
+  return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.keywords) === null || _b === void 0 ? void 0 : _b.allIds.every(function (keyword) {
+    var _a, _b;
+
+    return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.keywords) === null || _b === void 0 ? void 0 : _b.byId[keyword].checked;
+  });
+});
+/**
+ * Gets a KeywordObject by its id
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var style = {
+ * Example: keywordObject = getKeywordObjectById(store, 'keywordId')
+ * @param {object} store object from which the keyword state will be extracted
+ * @param {string} keywordId Id of the keyword
+ * @returns {object} object containing keyword information (id, amount, amountVisible, checked)
+ */
+
+var getKeywordObjectById = function getKeywordObjectById(store, keywordId) {
+  var _a, _b, _c, _d;
+
+  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 : {};
+};
+
+var style$1 = {
   dialogTitle: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -10886,63 +10838,340 @@ var ServicePopup = function ServicePopup(_ref) {
       hideBackdrop = _ref$hideBackdrop === void 0 ? false : _ref$hideBackdrop,
       isOpen = _ref.isOpen,
       closePopup = _ref.closePopup,
-      _ref$url = _ref.url,
-      url = _ref$url === void 0 ? '' : _ref$url;
+      url = _ref.url,
+      services = _ref.services,
+      serviceSetLayers = _ref.serviceSetLayers;
+
+  var _a, _b;
+
+  var _React$useState = React.useState(servicePopupVariant !== 'edit' || services === undefined ? '' : (_a = services[url]) === null || _a === void 0 ? void 0 : _a.name),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      serviceName = _React$useState2[0],
+      setServiceName = _React$useState2[1];
+
+  var _React$useState3 = React.useState(servicePopupVariant === 'add' || url === undefined ? '' : url),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      serviceUrl = _React$useState4[0],
+      setServiceUrl = _React$useState4[1];
+
+  var _React$useState5 = React.useState(servicePopupVariant !== 'edit' || services === undefined ? '' : (_b = services[url]) === null || _b === void 0 ? void 0 : _b["abstract"]),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      _abstract = _React$useState6[0],
+      setAbstract = _React$useState6[1];
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      disableButton = _React$useState8[0],
+      setDisableButton = _React$useState8[1];
+
+  var _React$useState9 = React.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      isLoading = _React$useState10[0],
+      setIsLoading = _React$useState10[1];
+
+  var _React$useState11 = React.useState(false),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      serviceNameHasError = _React$useState12[0],
+      setServiceNameHasError = _React$useState12[1];
+
+  var _React$useState13 = React.useState(''),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      serviceNameHelperText = _React$useState14[0],
+      setServiceNameHelperText = _React$useState14[1];
+
+  var _React$useState15 = React.useState(false),
+      _React$useState16 = _slicedToArray(_React$useState15, 2),
+      serviceUrlHasError = _React$useState16[0],
+      setServiceUrlHasError = _React$useState16[1];
+
+  var _React$useState17 = React.useState(''),
+      _React$useState18 = _slicedToArray(_React$useState17, 2),
+      serviceUrlHelperText = _React$useState18[0],
+      setServiceUrlHelperText = _React$useState18[1];
+
+  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*$/;
+    if (!matcher.test(url)) return false;
+    return true;
+  };
+
+  var addNewService = function addNewService() {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var layers, serviceLayers, _iterator, _step, object;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setServiceUrlHasError(false);
+
+              if (!validateServiceUrl(serviceUrl)) {
+                _context.next = 15;
+                break;
+              }
+
+              setIsLoading(true);
+              _context.prev = 3;
+              _context.next = 6;
+              return getLayersFromService(serviceUrl);
+
+            case 6:
+              layers = _context.sent;
+
+              if (layers.children) {
+                serviceLayers = [];
+                _iterator = _createForOfIteratorHelper(layers.children);
+
+                try {
+                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                    object = _step.value;
+                    serviceLayers.push({
+                      name: object.name,
+                      text: object.title,
+                      leaf: object.leaf,
+                      path: object.path,
+                      keywords: object.keywords ? object.keywords : [],
+                      "abstract": object["abstract"] ? object["abstract"] : '',
+                      styles: object.styles ? object.styles : []
+                    });
+                  }
+                } catch (err) {
+                  _iterator.e(err);
+                } finally {
+                  _iterator.f();
+                }
+
+                serviceSetLayers({
+                  id: serviceUrl,
+                  name: serviceName,
+                  service: serviceUrl,
+                  layers: serviceLayers
+                });
+                setIsLoading(false);
+                closePopupAndResetState();
+              }
+
+              _context.next = 15;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](3);
+              setIsLoading(false);
+              setServiceUrlHasError(true);
+              setServiceUrlHelperText('Error: Download failed. Check the URL.');
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[3, 10]]);
+    }));
+  };
+
+  var ServiceNameInRedux = function ServiceNameInRedux() {
+    if (servicePopupVariant === 'add' || servicePopupVariant === 'save') {
+      for (var service in services) {
+        if (services && services[service].name.toLowerCase() === serviceName.toLowerCase()) return true;
+      }
+
+      return false;
+    }
+
+    return false;
+  };
+
+  var UrlInRedux = function UrlInRedux() {
+    if (servicePopupVariant === 'add' || servicePopupVariant === 'save') {
+      if (services && services[serviceUrl]) {
+        return true;
+      }
+
+      return false;
+    }
+
+    return false;
+  }; // Check serviceName
+
+
+  React.useEffect(function () {
+    setServiceNameHelperText('');
+
+    if (ServiceNameInRedux()) {
+      setServiceNameHasError(true);
+      setServiceNameHelperText('Error: This name already exists. Choose another name.');
+    } else {
+      setServiceNameHasError(false);
+      setServiceNameHelperText('');
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [serviceName]); // Check Url
+
+  React.useEffect(function () {
+    setServiceUrlHelperText('');
+
+    if (serviceUrl.length > 0 && !validateServiceUrl(serviceUrl)) {
+      setServiceUrlHasError(true);
+      setServiceUrlHelperText('Error: Not a valid URL.');
+    } else if (UrlInRedux()) {
+      setServiceUrlHasError(true);
+      setServiceUrlHelperText('Error: URL already exists.');
+    } else {
+      setServiceUrlHasError(false);
+      setServiceNameHelperText('');
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [serviceUrl]); // Check if all fields are valid
+
+  React.useEffect(function () {
+    if (!serviceNameHasError && !serviceUrlHasError && validateServiceUrl(serviceUrl) && serviceName.length > 0) {
+      setDisableButton(false);
+    } else setDisableButton(true);
+  }, [serviceNameHasError, serviceUrlHasError, serviceName, serviceUrl]);
+
+  var closePopupAndResetState = function closePopupAndResetState() {
+    setServiceName('');
+    setServiceUrl('');
+    setAbstract('');
+    closePopup();
+  };
+
   return /*#__PURE__*/React.createElement(Dialog, {
     open: isOpen,
     hideBackdrop: hideBackdrop,
     fullWidth: true,
     maxWidth: "xs",
-    sx: style.container
+    "data-testid": "servicePopup",
+    sx: style$1.container
   }, /*#__PURE__*/React.createElement(DialogTitle, {
-    sx: style.dialogTitle
+    sx: style$1.dialogTitle
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h5",
     component: "span"
   }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React.createElement(IconButton, {
     size: "small",
-    onClick: closePopup,
-    "data-testid": "ClosePopupButtonCross",
-    sx: style.closeBtn
+    onClick: closePopupAndResetState,
+    "data-testid": "closePopupButtonCross",
+    sx: style$1.closeBtn
   }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, {
-    sx: style.dialogContent
+    sx: style$1.dialogContent
   }, /*#__PURE__*/React.createElement(TextField, {
-    sx: style.textField,
+    sx: style$1.textField,
     variant: "filled",
-    label: "Service name"
+    label: "Service name",
+    onChange: function onChange(event) {
+      return setServiceName(event.target.value);
+    },
+    value: serviceName,
+    inputProps: {
+      'data-testid': 'serviceNameTextField'
+    },
+    error: serviceNameHasError,
+    helperText: serviceNameHelperText
   })), /*#__PURE__*/React.createElement(DialogContent, {
-    sx: style.dialogContent
+    sx: style$1.dialogContent
   }, /*#__PURE__*/React.createElement(TextField, {
-    sx: style.textField,
+    sx: style$1.textField,
     variant: "filled",
     label: "Service URL",
-    defaultValue: url,
-    id: "service-url"
+    onChange: function onChange(event) {
+      return setServiceUrl(event.target.value);
+    },
+    value: serviceUrl,
+    id: "service-url",
+    inputProps: {
+      'data-testid': 'serviceUrlTextField'
+    },
+    error: serviceUrlHasError,
+    helperText: serviceUrlHelperText
   })), /*#__PURE__*/React.createElement(DialogContent, {
-    sx: style.dialogContent
+    sx: style$1.dialogContent
   }, /*#__PURE__*/React.createElement(TextField, {
-    sx: style.textField,
+    sx: style$1.textField,
     variant: "filled",
     multiline: true,
     rows: 4,
     label: "Abstracts",
-    helperText: "Short description of what this service does"
+    helperText: "Short description of what this service does",
+    onChange: function onChange(event) {
+      return setAbstract(event.target.value);
+    },
+    value: _abstract,
+    "data-testid": "abstractTextField"
   })), /*#__PURE__*/React.createElement(DialogActions, {
-    sx: style.footerContent
+    sx: style$1.footerContent
   }, /*#__PURE__*/React.createElement(Button, {
+    onClick: closePopupAndResetState,
+    "data-testid": "closePopupButtonCancel",
     variant: "tertiary",
-    onClick: closePopup,
-    "data-testid": "ClosePopupButtonCancel",
     sx: {
       width: '117px'
     }
-  }, "cancel"), /*#__PURE__*/React.createElement(Button, {
+  }, "cancel"), !isLoading ? /*#__PURE__*/React.createElement(Button, {
+    variant: "primary",
+    disabled: disableButton,
+    onClick: addNewService,
+    "data-testid": "saveServiceButton",
     sx: {
       width: '117px',
       marginLeft: '16px!important'
-    },
-    variant: "primary"
-  }, "save")));
+    }
+  }, "save") : /*#__PURE__*/React.createElement(Box, {
+    "data-testid": "loadingIndicator",
+    sx: {
+      width: '117px',
+      height: '40px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginLeft: '16px!important'
+    }
+  }, /*#__PURE__*/React.createElement(CircularProgress, {
+    size: 35
+  }))));
+};
+
+/* *
+ * 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 ServicePopupConnect = function ServicePopupConnect(_ref) {
+  var servicePopupVariant = _ref.servicePopupVariant,
+      hideBackdrop = _ref.hideBackdrop,
+      isOpen = _ref.isOpen,
+      closePopup = _ref.closePopup,
+      url = _ref.url;
+  var dispatch = useDispatch();
+  var services = useSelector(function (store) {
+    return getServices(store);
+  });
+  var serviceSetLayers$1 = React__default.useCallback(function (payload) {
+    dispatch(serviceSetLayers(payload));
+  }, [dispatch]);
+  return /*#__PURE__*/React__default.createElement(ServicePopup, {
+    servicePopupVariant: servicePopupVariant,
+    hideBackdrop: hideBackdrop,
+    isOpen: isOpen,
+    closePopup: closePopup,
+    url: url,
+    services: services,
+    serviceSetLayers: serviceSetLayers$1
+  });
 };
 
 var isURL = function isURL(string) {
@@ -10952,11 +11181,6 @@ var useStyles$q = makeStyles(function (theme) {
   return {
     iconButton: {
       color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
-    },
-    saveButton: {
-      color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
-      textTransform: 'none',
-      border: "1px solid ".concat(theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat)
     }
   };
 });
@@ -10993,6 +11217,12 @@ var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
       setPopupOpen = _React$useState2[1];
 
   var classes = useStyles$q();
+  React__default.useEffect(function () {
+    if (isPopupOpen === false) {
+      onClickClear();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [isPopupOpen]);
   var ClearButton = /*#__PURE__*/React__default.createElement(Tooltip, {
     title: "Clear",
     placement: "top"
@@ -11009,12 +11239,11 @@ var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
       marginRight: '15px'
     }
   }, ClearButton), /*#__PURE__*/React__default.createElement(Button, {
-    variant: "outlined",
+    variant: "tertiary",
     onClick: function onClick() {
       return setPopupOpen(true);
-    },
-    className: classes.saveButton
-  }, "Save"), /*#__PURE__*/React__default.createElement(ServicePopup, {
+    }
+  }, "Save"), /*#__PURE__*/React__default.createElement(ServicePopupConnect, {
     servicePopupVariant: "save",
     isOpen: isPopupOpen,
     closePopup: function closePopup() {
@@ -11126,17 +11355,7 @@ var SearchFieldConnect = function SearchFieldConnect() {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var filterLayersFromService = function filterLayersFromService(serviceId, services, keywords, searchString) {
-  var activeKeywords = keywords.filter(function (keyword) {
-    return keyword.checked;
-  });
-  var keywordList = activeKeywords.map(function (keyword) {
-    return keyword.id;
-  });
-  var allKeywordsActive = keywords.every(function (keyword) {
-    return keyword.checked;
-  });
-
+var filterLayersFromService = function filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString) {
   if (searchString === '' && allKeywordsActive) {
     return services[serviceId].layers.filter(function (layer) {
       return layer.leaf;
@@ -11148,11 +11367,9 @@ var filterLayersFromService = function filterLayersFromService(serviceId, servic
     return searchStringArray.every(function (search) {
       var layerPathAndKeywords = layer.path.concat(layer.keywords);
       return (!!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
-        return !keywordList.includes(keyword);
+        return !keywordIds.includes(keyword);
       }) || allKeywordsActive) && (!!layer.name && layer.name.toLowerCase().includes(search.toLowerCase()) || !!layer.text && layer.text.toLowerCase().includes(search.toLowerCase()) || !!layer["abstract"] && layer["abstract"].toLowerCase().includes(search.toLowerCase()) || !!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
         return !keyword.toLowerCase().includes(search.toLowerCase());
-      }) || !!layer.path && !layer.path.every(function (group) {
-        return !group.toLowerCase().includes(search.toLowerCase());
       }) || services[serviceId].name.toLowerCase().includes(search.toLowerCase()));
     });
   }).filter(function (layer) {
@@ -11208,7 +11425,8 @@ var LayerList = function LayerList(_ref) {
       serviceIds = _ref.serviceIds,
       layerSelectHeight = _ref.layerSelectHeight,
       searchString = _ref.searchString,
-      keywords = _ref.keywords;
+      keywordIds = _ref.keywordIds,
+      allKeywordsActive = _ref.allKeywordsActive;
   var classes = useStyles$p();
 
   var _React$useState = React.useState(0),
@@ -11218,9 +11436,9 @@ var LayerList = function LayerList(_ref) {
 
   React.useEffect(function () {
     setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
-      return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywords, searchString).length;
+      return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).length;
     }, 0));
-  }, [serviceIds, keywords, services, searchString]);
+  }, [serviceIds, keywordIds, services, searchString, allKeywordsActive]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "layerList"
   }, /*#__PURE__*/React.createElement("div", {
@@ -11231,7 +11449,7 @@ var LayerList = function LayerList(_ref) {
       overflow: 'auto'
     }
   }, serviceIds.map(function (serviceId) {
-    return filterLayersFromService(serviceId, services, keywords, searchString).map(function (layer) {
+    return filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer) {
       return /*#__PURE__*/React.createElement("div", {
         key: "".concat(serviceId, "-").concat(layer.name),
         className: classes.layerRow,
@@ -11275,8 +11493,11 @@ var LayerListConnect = function LayerListConnect(_ref) {
   var enabledServiceIds = useSelector(function (store) {
     return getEnabledServiceIds(store);
   });
-  var keywords = useSelector(function (store) {
-    return getKeywords(store);
+  var checkedKeywordIds = useSelector(function (store) {
+    return getCheckedKeywordIds(store);
+  });
+  var allKeywordsActive = useSelector(function (store) {
+    return isAllKeywordsChecked(store);
   });
   var searchString = useSelector(function (store) {
     return getSearchFilter(store);
@@ -11285,7 +11506,8 @@ var LayerListConnect = function LayerListConnect(_ref) {
     services: services,
     serviceIds: enabledServiceIds,
     layerSelectHeight: layerSelectHeight,
-    keywords: keywords,
+    keywordIds: checkedKeywordIds,
+    allKeywordsActive: allKeywordsActive,
     searchString: searchString
   });
 };
@@ -11306,62 +11528,34 @@ var LayerListConnect = function LayerListConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$o = makeStyles(function (theme) {
-  return createStyles({
-    chip: {
-      height: '32px',
-      margin: '0 8px 0 0',
-      padding: '5px 12px 7px',
-      borderRadius: '20px',
-      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: 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 style = {
+  borderRadius: '20px!important',
+  marginRight: '8px',
+  whiteSpace: 'nowrap',
+  height: '32px!important',
+  padding: '5px 12px!important',
+  textTransform: 'none!important',
+  fontWeight: 'normal'
+};
 
-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",
+var ServiceChip = function ServiceChip(_ref) {
+  var _ref$all = _ref.all,
+      all = _ref$all === void 0 ? false : _ref$all,
+      service = _ref.service,
+      isEnabled = _ref.isEnabled,
+      toggleChip = _ref.toggleChip;
+  return /*#__PURE__*/React.createElement(CustomToggleButton, {
+    variant: "boxed",
+    selected: isEnabled,
     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);
-    }
+    },
+    sx: style
   }, service ? service.name : 'All');
 };
 
@@ -11430,7 +11624,7 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
   });
 };
 
-var useStyles$n = makeStyles(function (theme) {
+var useStyles$o = makeStyles(function (theme) {
   return createStyles({
     serviceChips: {
       width: '100%',
@@ -11497,31 +11691,72 @@ var ServiceList = function ServiceList(_ref4) {
       width = _React$useState4[0],
       setWidth = _React$useState4[1];
 
+  var _React$useState5 = React.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      intervalId = _React$useState6[0],
+      setIntervalId = _React$useState6[1];
+
   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$n({
+  var classes = useStyles$o({
     margin: margin,
     maxWidthValue: maxWidthValue
   });
-  var onLeftArrowClick = React.useCallback(function () {
-    setMargin(Math.max(0, margin - 100));
-  }, [margin]);
-  var onRightArrowClick = React.useCallback(function () {
-    setMargin(Math.min(width - layerSelectWidth, margin + 100));
-  }, [margin, layerSelectWidth, width]);
+
+  var onMouseWheelScroll = function onMouseWheelScroll(e) {
+    var delta = e.deltaY;
+    var scrollSpeed = 0.1;
+    if (delta > 0) setMargin(Math.min(Math.max(margin + scrollSpeed * delta, 0), width - layerSelectWidth));else setMargin(Math.min(Math.max(margin + scrollSpeed * delta, 0), width - layerSelectWidth));
+  };
+
+  var onLeftChevronPressed = function onLeftChevronPressed() {
+    setMargin(function (prevMargin) {
+      return Math.max(prevMargin - scrollSpeed, 0);
+    });
+    setIntervalId(setInterval(function () {
+      setMargin(function (prevMargin) {
+        return Math.max(prevMargin - scrollSpeed, 0);
+      });
+    }, 20));
+  };
+
+  var onRightChevronPressed = React.useCallback(function () {
+    setMargin(function (prevMargin) {
+      return Math.min(prevMargin + scrollSpeed, width - layerSelectWidth);
+    });
+    setIntervalId(setInterval(function () {
+      setMargin(function (prevMargin) {
+        return Math.min(prevMargin + scrollSpeed, width - layerSelectWidth);
+      });
+    }, 20));
+  }, [width, layerSelectWidth]);
+
+  var onChevronMouseUp = function onChevronMouseUp() {
+    clearInterval(intervalId);
+    setIntervalId(null);
+  };
+
   React.useEffect(function () {
     setWidth(ref.current.scrollWidth + 50);
     setMargin(Math.max(0, Math.min(width - layerSelectWidth, margin)));
-  }, [services, layerSelectWidth, width, margin]);
+
+    if ((margin === 0 || layerSelectWidth + margin === width) && intervalId != null) {
+      clearInterval(intervalId);
+      setIntervalId(null);
+    }
+  }, [services, layerSelectWidth, width, margin, intervalId]);
   var isAllEnabled = Object.values(activeServices).every(function (activeService) {
     return activeService.enabled;
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.serviceList,
-    "data-testid": "serviceList"
+    "data-testid": "serviceList",
+    onWheel: onMouseWheelScroll
   }, margin !== 0 && /*#__PURE__*/React.createElement(ChevronLeft, {
     className: classes.scrollArrowLeft,
-    onClick: onLeftArrowClick,
+    onMouseDown: onLeftChevronPressed,
+    onMouseUp: onChevronMouseUp,
     "data-testid": "leftScrollArrow"
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.serviceChips,
@@ -11540,7 +11775,8 @@ var ServiceList = function ServiceList(_ref4) {
     });
   })), layerSelectWidth + margin < width && /*#__PURE__*/React.createElement(ChevronRight, {
     className: classes.scrollArrowRight,
-    onClick: onRightArrowClick,
+    onMouseDown: onRightChevronPressed,
+    onMouseUp: onChevronMouseUp,
     "data-testid": "rightScrollArrow"
   }));
 };
@@ -11577,11 +11813,190 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
   });
 };
 
-var useStyles$m = makeStyles(function (theme) {
+var useStyles$n = makeStyles(function (theme) {
   return createStyles({
     servicesContainer: {
       width: '300px',
-      height: '380px',
+      maxHeight: '380px',
+      top: '140px',
+      backgroundColor: theme.palette.geowebColors.background.surface,
+      boxShadow: theme.shadows[6],
+      overflow: 'auto'
+    },
+    header: {
+      position: 'sticky',
+      top: 0,
+      fontSize: theme.typography.fontSize,
+      padding: '12px',
+      backgroundColor: theme.palette.geowebColors.background.surface,
+      zIndex: 100
+    },
+    footer: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'sticky',
+      bottom: 0,
+      backgroundColor: theme.palette.geowebColors.background.surface,
+      zIndex: 100
+    },
+    iconFill: {
+      color: theme.palette.geowebColors.typographyAndIcons.icon
+    },
+    button: {
+      margin: '16px',
+      width: '80%',
+      fontSize: '12px',
+      textTransform: 'none'
+    },
+    text: {
+      paddingTop: '3px',
+      fontSize: '12px',
+      fontFamily: theme.typography.fontFamily,
+      fontWeight: theme.typography.fontWeightRegular,
+      textTransform: 'none',
+      color: '#575f7a'
+    },
+    icon: {
+      width: '24px',
+      height: '24px'
+    }
+  });
+});
+
+var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
+  var services = _ref.services,
+      mapStoreRemoveService = _ref.mapStoreRemoveService,
+      _ref$layers = _ref.layers,
+      layers = _ref$layers === void 0 ? [] : _ref$layers;
+  var classes = useStyles$n();
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      addServiceisOpen = _React$useState2[0],
+      setAddServiceIsOpen = _React$useState2[1];
+
+  var openAddService = function openAddService() {
+    setAddServiceIsOpen(true);
+  };
+
+  var closePopup = function closePopup() {
+    setAddServiceIsOpen(false);
+  };
+
+  var isDisabled = function isDisabled(service) {
+    return layers.some(function (layer) {
+      return layer.service && layer.service.includes(service);
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: classes.servicesContainer,
+    "data-testid": "ServiceDialog"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.header
+  }, " Services"), /*#__PURE__*/React.createElement(List, {
+    disablePadding: true
+  }, services.map(function (service) {
+    return /*#__PURE__*/React.createElement(ListItem, {
+      key: service.name
+    }, /*#__PURE__*/React.createElement(ListItemText, {
+      style: {
+        fontSize: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(Typography, {
+      noWrap: true,
+      style: {
+        textOverflow: 'ellipsis',
+        paddingRight: '60px'
+      }
+    }, service.name)), /*#__PURE__*/React.createElement(ListItemSecondaryAction, {
+      style: {
+        marginRight: '-10px'
+      }
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      title: "Edit Service"
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      "data-testid": "openEditServiceButton",
+      size: "large"
+    }, /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+      d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z",
+      fill: classes.iconFill,
+      fillRule: "evenodd"
+    }))))), /*#__PURE__*/React.createElement(Tooltip, {
+      title: "Delete Service"
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
+      size: "large",
+      disabled: isDisabled(service.service),
+      onClick: function onClick() {
+        return mapStoreRemoveService(service.service);
+      },
+      "data-testid": "removeServiceButton"
+    }, /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+      d: "M17.504 8.228c.588 0 1.027.48.973 1.066l-.876 9.64A1.197 1.197 0 0 1 16.434 20H8.41c-.59 0-1.115-.48-1.167-1.066l-.877-9.64a.962.962 0 0 1 .973-1.066zm-2.115 1.228a.82.82 0 0 0-.819.82v7.674a.818.818 0 0 0 1.638 0v-7.675a.819.819 0 0 0-.819-.819zm-2.968 0a.819.819 0 0 0-.819.82v7.674a.818.818 0 1 0 1.638 0v-7.675a.82.82 0 0 0-.82-.819zm-2.968 0a.819.819 0 0 0-.818.82v7.674a.818.818 0 1 0 1.637 0v-7.675a.82.82 0 0 0-.82-.819zM13.432 4c.21 0 .404.168.436.376l.107.758 3.256-.01a1.606 1.606 0 0 1 1.61 1.6l.001.535-12.841.038L6 6.76a1.605 1.605 0 0 1 1.6-1.61l3.262-.008.103-.758a.454.454 0 0 1 .434-.38z",
+      fill: classes.iconFill,
+      fillRule: "evenodd"
+    }))))))));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classes.footer
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: openAddService,
+    "data-testid": "openAddServiceButton",
+    className: classes.button,
+    variant: "tertiary",
+    startIcon: /*#__PURE__*/React.createElement(SvgIcon, {
+      className: classes.icon
+    }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+      d: "M13.647 13.647h6.82a1.276 1.276 0 1 0 0-2.552h-6.82v-6.82a1.276 1.276 0 1 0-2.552 0v6.82h-6.82a1.276 1.276 0 1 0 0 2.552h6.82v6.82a1.274 1.274 0 0 0 1.276 1.275c.705 0 1.276-.571 1.276-1.276v-6.82z",
+      fillRule: "evenodd"
+    })))
+  }, "Add a new service"))), addServiceisOpen && /*#__PURE__*/React.createElement(ServicePopupConnect, {
+    servicePopupVariant: "add",
+    isOpen: addServiceisOpen,
+    closePopup: closePopup
+  }));
+};
+
+/* *
+ * 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 ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect() {
+  var dispatch = useDispatch();
+  var allLayers = useSelector(function (store) {
+    return getAllLayers(store);
+  });
+  var mapStoreRemoveService$1 = React.useCallback(function (serviceUrl) {
+    dispatch(mapStoreRemoveService({
+      serviceUrl: serviceUrl
+    }));
+  }, [dispatch]);
+  var arrayOfServices = useSelector(function (store) {
+    return getServicesInArray(store);
+  });
+  return /*#__PURE__*/React.createElement(ServiceOptionsDialog, {
+    services: arrayOfServices,
+    layers: allLayers,
+    mapStoreRemoveService: mapStoreRemoveService$1
+  });
+};
+
+var useStyles$m = makeStyles(function (theme) {
+  return createStyles({
+    servicesContainer: {
       position: 'fixed',
       top: '140px',
       right: '-72px',
@@ -11607,23 +12022,21 @@ var ServiceOptionsButton = function ServiceOptionsButton() {
     setContainerOpen(!containerOpen);
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToggleIconButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolButton, {
     onClick: toggleContainer,
     active: containerOpen,
-    "data-testid": "serviceOptionsButton"
+    "data-testid": "serviceOptionsButton",
+    variant: "tool"
   }, /*#__PURE__*/React.createElement(SvgIcon, {
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
     d: "M12 16c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0-2c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm0-6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z",
-    fill: "#FFF",
     fillRule: "evenodd"
   })))), containerOpen ? /*#__PURE__*/React.createElement(Box, {
     className: classes.servicesContainer,
-    "data-testid": "container"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: classes.servicesText
-  }, "Services")) : null);
+    "data-testid": "ServiceOptionsDialogContainer"
+  }, /*#__PURE__*/React.createElement(ServiceOptionsDialogConnect, null)) : null);
 };
 
 var useStyles$l = makeStyles({
@@ -11720,40 +12133,6 @@ var LayerSelect = function LayerSelect(_ref) {
   })));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var CustomSwitch = withStyles(function (theme) {
-  return {
-    switchBase: {
-      '&$checked': {
-        color: theme.palette.geowebColors.customSlider.thumb
-      },
-      '&$checked + $track': {
-        backgroundColor: theme.palette.geowebColors.buttons.primary["default"].fill
-      }
-    },
-    checked: {},
-    track: {
-      backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
-      opacity: '1 !important'
-    }
-  };
-})(Switch);
-
 var useStyles$k = makeStyles(function (theme) {
   return createStyles({
     listItem: {
@@ -11788,11 +12167,9 @@ var useStyles$k = makeStyles(function (theme) {
 });
 
 var FilterListItem = function FilterListItem(_ref) {
-  var index = _ref.index,
-      text = _ref.text,
-      checked = _ref.checked,
-      toggleCheckbox = _ref.toggleCheckbox,
-      selectOnlyOne = _ref.selectOnlyOne;
+  var keyword = _ref.keyword,
+      toggleKeywords = _ref.toggleKeywords,
+      enableOnlyOneKeyword = _ref.enableOnlyOneKeyword;
   var classes = useStyles$k();
 
   var _React$useState = React.useState(false),
@@ -11800,47 +12177,193 @@ var FilterListItem = function FilterListItem(_ref) {
       hovering = _React$useState2[0],
       setHovering = _React$useState2[1];
 
-  var handleMouseOver = React.useCallback(function () {
-    setHovering(true);
-  }, []);
-  var handleMouseLeave = React.useCallback(function () {
-    setHovering(false);
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    onMouseOver: handleMouseOver,
-    onMouseLeave: handleMouseLeave,
-    onFocus: handleMouseOver,
-    onBlur: handleMouseLeave,
-    "data-testid": "filterResultListItem"
-  }, /*#__PURE__*/React.createElement(ListItem, {
-    className: classes.listItem
-  }, /*#__PURE__*/React.createElement(ListItemIcon, {
-    className: classes.listItemIcon
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    color: "secondary",
-    checked: checked,
-    onChange: function onChange() {
-      return toggleCheckbox(index);
-    },
-    className: classes.checkbox
-  })), /*#__PURE__*/React.createElement(Typography, {
-    variant: "body2",
-    className: classes.listItemText
-  }, text), hovering ? /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(IconButton, {
-    style: {
-      backgroundColor: 'transparent'
-    },
-    edge: "end",
-    size: "small",
-    onClick: function onClick() {
-      return selectOnlyOne(index);
-    },
-    "data-testid": "onlyButton"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: classes.onlyByttonText
-  }, "ONLY"))) : null));
+  var handleMouseOver = React.useCallback(function () {
+    setHovering(true);
+  }, []);
+  var handleMouseLeave = React.useCallback(function () {
+    setHovering(false);
+  }, []);
+
+  var selectOnlyOne = function selectOnlyOne(keyword) {
+    enableOnlyOneKeyword(keyword);
+  };
+
+  var toggleCheckbox = function toggleCheckbox(keyword) {
+    toggleKeywords([keyword]);
+  };
+
+  if (keyword.amountVisible !== 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      onMouseOver: handleMouseOver,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleMouseOver,
+      onBlur: handleMouseLeave,
+      "data-testid": "filterResultListItem"
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      className: classes.listItem
+    }, /*#__PURE__*/React.createElement(ListItemIcon, {
+      className: classes.listItemIcon
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      color: "secondary",
+      checked: keyword.checked,
+      onChange: function onChange() {
+        return toggleCheckbox(keyword.id);
+      },
+      className: classes.checkbox
+    })), /*#__PURE__*/React.createElement(Typography, {
+      variant: "body2",
+      className: classes.listItemText
+    }, keyword.id), hovering ? /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(IconButton, {
+      style: {
+        backgroundColor: 'transparent'
+      },
+      edge: "end",
+      size: "small",
+      onClick: function onClick() {
+        return selectOnlyOne(keyword.id);
+      },
+      "data-testid": "onlyButton"
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: classes.onlyByttonText
+    }, "ONLY"))) : null));
+  }
+
+  return null;
+};
+
+/* *
+ * 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 KeywordFilterResultsListItemConnect = function KeywordFilterResultsListItemConnect(_ref) {
+  var keyword = _ref.keyword;
+  var dispatch = useDispatch();
+  var toggleKeywords$1 = React.useCallback(function (keywords) {
+    dispatch(toggleKeywords({
+      keywords: keywords
+    }));
+  }, [dispatch]);
+  var enableOnlyOneKeyword$1 = React.useCallback(function (keyword) {
+    dispatch(enableOnlyOneKeyword({
+      keyword: keyword
+    }));
+  }, [dispatch]);
+  var keywordObject = useSelector(function (store) {
+    return getKeywordObjectById(store, keyword);
+  });
+  return /*#__PURE__*/React.createElement(FilterListItem, {
+    keyword: keywordObject,
+    toggleKeywords: toggleKeywords$1,
+    enableOnlyOneKeyword: enableOnlyOneKeyword$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 CustomSwitch = withStyles(function (theme) {
+  return {
+    switchBase: {
+      '&$checked': {
+        color: theme.palette.geowebColors.customSlider.thumb
+      },
+      '&$checked + $track': {
+        backgroundColor: theme.palette.geowebColors.buttons.primary["default"].fill
+      }
+    },
+    checked: {},
+    track: {
+      backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
+      opacity: '1 !important'
+    }
+  };
+})(Switch);
+
+/* *
+ * 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 KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchConnect() {
+  var dispatch = useDispatch();
+  var allKeywordsActive = useSelector(function (store) {
+    return isAllKeywordsChecked(store);
+  });
+  var allKeywordIds = useSelector(function (store) {
+    return getAllKeywordIds(store);
+  });
+  var checkedKeywordIds = useSelector(function (store) {
+    return getCheckedKeywordIds(store);
+  });
+  var toggleKeywords$1 = React.useCallback(function () {
+    var keywords = allKeywordsActive ? checkedKeywordIds : allKeywordIds.filter(function (id) {
+      return !checkedKeywordIds.includes(id);
+    });
+    dispatch(toggleKeywords({
+      keywords: keywords
+    }));
+  }, [allKeywordIds, allKeywordsActive, checkedKeywordIds, dispatch]);
+  return /*#__PURE__*/React.createElement(CustomSwitch, {
+    checked: allKeywordsActive,
+    onChange: toggleKeywords$1,
+    "data-testid": "customSwitch"
+  });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
 var useStyles$j = makeStyles(function (theme) {
   return createStyles({
     selectAll: {
@@ -11860,7 +12383,7 @@ var useStyles$j = makeStyles(function (theme) {
 });
 
 var KeywordFilterResults = function KeywordFilterResults(_ref) {
-  var keywordObjects = _ref.keywordObjects,
+  var allKeywordIds = _ref.allKeywordIds,
       mapId = _ref.mapId,
       bounds = _ref.bounds,
       _ref$onClose = _ref.onClose,
@@ -11872,53 +12395,8 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
       _ref$order = _ref.order,
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
-      source = _ref$source === void 0 ? 'module' : _ref$source,
-      updateKeywords = _ref.updateKeywords;
+      source = _ref$source === void 0 ? 'module' : _ref$source;
   var classes = useStyles$j();
-
-  var _React$useState = React.useState(true),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      allSelected = _React$useState2[0],
-      setAllSelected = _React$useState2[1];
-
-  var toggleSelectAll = function toggleSelectAll() {
-    var editedKeywords = keywordObjects.map(function (object) {
-      return Object.assign(Object.assign({}, object), {
-        checked: !allSelected
-      });
-    });
-    setAllSelected(!allSelected);
-    updateKeywords(editedKeywords);
-  };
-
-  var toggleCheckbox = function toggleCheckbox(listIndex) {
-    var editedKeywords = keywordObjects.map(function (object, index) {
-      return listIndex === index ? Object.assign(Object.assign({}, object), {
-        checked: !object.checked
-      }) : object;
-    });
-    updateKeywords(editedKeywords);
-  };
-
-  var selectOnlyOne = function selectOnlyOne(listIndex) {
-    var editedKeywords = keywordObjects.map(function (object, index) {
-      return listIndex === index ? Object.assign(Object.assign({}, object), {
-        checked: true
-      }) : Object.assign(Object.assign({}, object), {
-        checked: false
-      });
-    });
-    updateKeywords(editedKeywords);
-  }; // If even one checkbox is unchecked, switch toggleAll off
-  // If all checkboxes becomes checked, switch toggleAll on
-
-
-  React.useEffect(function () {
-    var checked = keywordObjects.every(function (object) {
-      return object.checked === true;
-    });
-    setAllSelected(checked);
-  }, [keywordObjects]);
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     title: showTitle ? "Filter Results ".concat(mapId) : 'Filter Results',
     "data-testid": "keywordFilterResults",
@@ -11956,27 +12434,15 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
     justifyContent: "flex-end",
     alignContent: "center",
     className: classes["switch"]
-  }, /*#__PURE__*/React.createElement(CustomSwitch, {
-    checked: allSelected,
-    onChange: toggleSelectAll,
-    "data-testid": "customSwitch"
-  }))), /*#__PURE__*/React.createElement(List, {
+  }, /*#__PURE__*/React.createElement(KeywordFilterSelectAllSwitchConnect, null))), /*#__PURE__*/React.createElement(List, {
     dense: true,
     style: {
       padding: '0px'
     }
-  }, keywordObjects.map(function (_ref2, index) {
-    var id = _ref2.id,
-        checked = _ref2.checked,
-        amountVisible = _ref2.amountVisible;
-    if (amountVisible === 0) return null;
-    return /*#__PURE__*/React.createElement(FilterListItem, {
-      key: "".concat(id, "-").concat(index),
-      index: index,
-      text: id,
-      checked: checked,
-      toggleCheckbox: toggleCheckbox,
-      selectOnlyOne: selectOnlyOne
+  }, allKeywordIds.map(function (keywordId) {
+    return /*#__PURE__*/React.createElement(KeywordFilterResultsListItemConnect, {
+      key: keywordId,
+      keyword: keywordId
     });
   })));
 };
@@ -12026,12 +12492,7 @@ var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
   });
   var uiIsOrderedOnTop = useSelector(function (store) {
     return getDialogIsOrderedOnTop(store, 'keywordFilter');
-  });
-  var updateKeywords$1 = React.useCallback(function (keywords) {
-    dispatch(updateKeywords({
-      keywords: keywords
-    }));
-  }, [dispatch]); // Check to ensure the currently active map is still present on screen - if not, close the dialog
+  }); // Check to ensure the currently active map is still present on screen - if not, close the dialog
 
   React.useEffect(function () {
     if (mapId !== '' && !isMapPresent) {
@@ -12063,11 +12524,11 @@ var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
       unregisterDialog$1();
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var keywords = useSelector(function (store) {
-    return getKeywords(store);
+  var allKeywordIds = useSelector(function (store) {
+    return getAllKeywordIds(store);
   });
   return /*#__PURE__*/React.createElement(KeywordFilterResults, {
-    keywordObjects: keywords,
+    allKeywordIds: allKeywordIds,
     mapId: mapId,
     bounds: bounds,
     isOpen: isOpenInStore,
@@ -12075,8 +12536,7 @@ var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
     showTitle: showTitle,
     onMouseDown: onOrderDialog,
     order: uiOrder,
-    source: uiSource,
-    updateKeywords: updateKeywords$1
+    source: uiSource
   });
 };
 
@@ -12329,7 +12789,6 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var width = 24;
 
 var MapControlButton = function MapControlButton(_a) {
   var onClick = _a.onClick,
@@ -12341,14 +12800,10 @@ var MapControlButton = function MapControlButton(_a) {
       isActive = _a$isActive === void 0 ? false : _a$isActive,
       props = __rest(_a, ["onClick", "children", "title", "placement", "isActive"]);
 
-  var classes = useButtonStyles({
-    width: width
-  });
-  return /*#__PURE__*/React.createElement(ToggleIconButton, Object.assign({
+  return /*#__PURE__*/React.createElement(ToolButton, Object.assign({
     onClick: onClick,
     active: isActive
   }, props), /*#__PURE__*/React.createElement(Tooltip, {
-    className: classes.button,
     placement: placement,
     title: title
   }, children));
@@ -13258,7 +13713,7 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
     title: autoUpdateButton.title
   }, /*#__PURE__*/React.createElement("span", {
     "data-testid": "autoUpdateButtonTooltip"
-  }, /*#__PURE__*/React.createElement(ToggleIconButton, {
+  }, /*#__PURE__*/React.createElement(ToolButton, {
     active: isAutoUpdating,
     disabled: disabled,
     onClick: function onClick() {
@@ -13322,7 +13777,7 @@ var LoopButton = function LoopButton(_ref) {
   var loopButtonPath = isLooping ? svgLoopOffPath : svgLoopPath;
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: loopButtonPath.title
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToggleIconButton, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
     onClick: function onClick() {
       return onToggleLoop();
     },
@@ -13419,7 +13874,7 @@ var SpeedButton = function SpeedButton(_ref) {
     className: classes.speedButtonDiv
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: "Speed"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToggleIconButton, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
     onClick: onClickButton,
     active: true,
     "data-testid": "speedButton"
@@ -13696,11 +14151,11 @@ var TimeStepButton = function TimeStepButton(_ref) {
     className: classes.timeStepDiv
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: "Time step"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToggleIconButton, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
     active: true,
     onClick: onClickButton,
     "data-testid": "timeStepButton",
-    width: 58
+    width: "58px"
   }, /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("path", {
     id: "lvnl598lea",
     d: "M12.1 5.86c.247 0 .5.089.745.267l6.008 4.316c.368.265.58.65.58 1.057 0 .408-.211.793-.581 1.058l-6.005 4.316c-.248.177-.5.267-.747.267-.466 0-.967-.36-.967-1.147v-3.016l-5.419 3.896c-.207.148-.417.234-.624.26l-.124.007c-.465 0-.966-.36-.966-1.147V7.006c0-.787.5-1.147.966-1.147.247 0 .5.09.746.268l5.421 3.894V7.006c0-.735.436-1.097.873-1.142z"
@@ -13787,7 +14242,7 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
   var id = open ? 'simple-popover' : undefined;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
     title: "Options"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToggleIconButton, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
     onClick: onClickButton,
     "data-testid": "optionsMenuButton",
     active: open
@@ -13876,7 +14331,7 @@ var PlayButton = function PlayButton(_ref) {
   var playButtonPath = isAnimating ? pausePath : playPath;
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: playButtonPath.title
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToggleIconButton, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
     onClick: onTogglePlay,
     disabled: isDisabled,
     "data-testid": "playButton",
@@ -16663,17 +17118,232 @@ var TimeSliderScaleSliderComponent = function TimeSliderScaleSliderComponent(_re
     selectedTime: selectedTime
   });
 };
-/**
- * TimeSliderScaleSlider component connected to the store displaying a scale slider of the time slider
- *
- * Expects the following props:
- * @param {string} mapId mapId: string - Id of the map
- * @example
- * ``` <TimeSliderScaleSliderConnect mapId={mapId} />```
- */
-
+/**
+ * TimeSliderScaleSlider component connected to the store displaying a scale slider of the time slider
+ *
+ * Expects the following props:
+ * @param {string} mapId mapId: string - Id of the map
+ * @example
+ * ``` <TimeSliderScaleSliderConnect mapId={mapId} />```
+ */
+
+
+var TimeSliderScaleSliderConnect = connectReduxTimeSliderScaleSlider(TimeSliderScaleSliderComponent);
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * */
+var connectRedux = connect(function (store, props) {
+  return {
+    isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId)
+  };
+}, {
+  toggleTimeSliderHover: toggleTimeSliderHover
+});
+
+var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
+  var sourceId = _ref.sourceId,
+      mapId = _ref.mapId,
+      isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
+      toggleTimeSliderHover = _ref.toggleTimeSliderHover;
+  React.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.ctrlKey && event.altKey && event.key === 'h') {
+        toggleTimeSliderHover({
+          mapId: mapId,
+          isTimeSliderHoverOn: !isTimeSliderHoverOn
+        });
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [mapId, isTimeSliderHoverOn, toggleTimeSliderHover]);
+  return /*#__PURE__*/React.createElement(TimeSlider, {
+    buttons: /*#__PURE__*/React.createElement(TimeSliderButtonsConnect, {
+      mapId: mapId
+    }),
+    rail: /*#__PURE__*/React.createElement(TimeSliderRailConnect, {
+      mapId: mapId,
+      sourceId: sourceId
+    }),
+    scaleSlider: /*#__PURE__*/React.createElement(TimeSliderScaleSliderConnect, {
+      mapId: mapId
+    }),
+    legend: /*#__PURE__*/React.createElement(TimeSliderLegendConnect$1, {
+      mapId: mapId,
+      sourceId: sourceId
+    })
+  });
+};
+/**
+ * TimeSlider component with components connected to the store displaying the time slider
+ *
+ * Expects the following props:
+ * @param {string} mapId mapId: string - Id of the map
+ * @param {string} sourceId sourceId: string - Source Id of the timeslider
+ * @example
+ * ``` <TimeSliderConnect sourceId="timeslider-1" mapId={mapId} />```
+ */
+
+
+var TimeSliderConnect = connectRedux(ConnectedTimeSlider);
+
+/* *
+ * 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 DWD = {
+  name: 'DWD',
+  url: 'https://maps.dwd.de/geoserver/ows?',
+  id: 'dwd'
+};
+var nationaalgeoregister = {
+  name: 'nationaalgeoregister.nl',
+  url: 'https://geodata.nationaalgeoregister.nl/cbsgebiedsindelingen/wms?request=GetCapabilities&service=wms',
+  id: 'nationaalgeoregister'
+};
+var KNMImsgcpp = {
+  name: 'KNMImsgcpp',
+  url: 'https://adaguc-server-msg-cpp-portal.pmc.knmi.cloud/wms?DATASET=msgrt&',
+  id: 'msgcpp-ogc-realtime'
+};
+var HeiGit = {
+  name: 'HeiGit',
+  url: 'https://maps.heigit.org/osm-wms/service',
+  id: 'HeiGit-osm-wms'
+};
+var ArcGisCanvas = {
+  name: 'ArcGisCanvas',
+  url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/',
+  id: 'ArcGisCanvas'
+};
+var KNMIgeoservicesBaselayers = {
+  name: 'KNMIgeoservicesBaselayers',
+  url: 'https://geoservices.knmi.nl/wms?DATASET=baselayers&',
+  id: 'KNMIgeoservicesBaselayers'
+};
+var KNMIgeoservicesRadar = {
+  name: 'KNMIgeoservicesRadar',
+  url: 'https://geoservices.knmi.nl/wms?dataset=RADAR&',
+  id: 'KNMIgeoservicesRadar'
+};
+var KNMIgeoservicesObs = {
+  name: 'KNMIgeoservicesObs',
+  url: 'https://geoservices.knmi.nl/adagucserver?dataset=OBS&service=WMS&',
+  id: 'KNMIgeoservicesObs'
+};
+var KNMIgeoservicesKlimaatAtlas = {
+  name: 'KNMIgeoservicesKlimaatAtlas',
+  url: 'https://geoservices.knmi.nl/wms?DATASET=gsie-dataset&SERVICE=WMS&',
+  id: 'KNMIgeoservicesKlimaatAtlas'
+};
+var KNMIgeoservicesHarmonie = {
+  name: 'KNMIgeoservicesHarmonie',
+  url: 'https://geoservices.knmi.nl/wms?DATASET=HARM_N25&',
+  id: 'KNMIgeoservicesKliKNMIgeoservicesHarmoniemaatAtlas'
+};
+var KNMIgeoservicesHarmonieMLService = {
+  name: 'KNMI Harmonie ML',
+  url: 'https://geoservices.knmi.nl/wms?DATASET=HARM_N25_ML&SERVICE=WMS&',
+  id: 'harmonieML'
+};
+var MetNorwayService = {
+  name: 'MetNorwayService',
+  url: 'https://wms-e1.geoweb.met.no/wms?',
+  id: 'MetNorwayService'
+};
+var FMIopenwms = {
+  name: 'FMIopenwms',
+  url: 'https://openwms.fmi.fi/geoserver/wms?',
+  id: 'FMIopenwms'
+};
+var DWDObservations = {
+  name: 'DWDObservations',
+  url: 'https://maps.dwd.de/geoserver/dwd/Wetter_Beobachtungen/ows?',
+  id: 'DWDObservations'
+};
+var DWDWarnings = {
+  name: 'DWDWarnings',
+  url: 'https://maps.dwd.de/geoserver/dwd/Warnungen_Gemeinden_vereinigt/ows?',
+  id: 'DWDWarnings'
+};
+var DWDWXProdukt = {
+  name: 'DWDWXProdukt',
+  url: 'https://maps.dwd.de/geoserver/dwd/WX-Produkt/ows?',
+  id: 'DWDWXProdukt'
+};
+var EUMETSAT = {
+  name: 'EUMETSAT',
+  url: 'https://view.eumetsat.int/geoserver/wms?',
+  id: 'EUMETSAT'
+};
+var eumetviewEUMETSAT = {
+  name: 'eumetviewEUMETSAT',
+  url: 'https://eumetview.eumetsat.int/geoserv/wms?',
+  id: 'eumetviewEUMETSAT'
+};
+var ECMWFPublicService = {
+  name: 'ECMWF',
+  url: 'https://apps.ecmwf.int/wms/?token=public',
+  id: 'ecmwf'
+};
+var MeteoCanada = {
+  name: 'Meteo Canada',
+  url: 'https://geo.weather.gc.ca/geomet/?lang=en&',
+  id: 'MeteoCanada'
+};
 
-var TimeSliderScaleSliderConnect = connectReduxTimeSliderScaleSlider(TimeSliderScaleSliderComponent);
+var publicServices = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  DWD: DWD,
+  nationaalgeoregister: nationaalgeoregister,
+  KNMImsgcpp: KNMImsgcpp,
+  HeiGit: HeiGit,
+  ArcGisCanvas: ArcGisCanvas,
+  KNMIgeoservicesBaselayers: KNMIgeoservicesBaselayers,
+  KNMIgeoservicesRadar: KNMIgeoservicesRadar,
+  KNMIgeoservicesObs: KNMIgeoservicesObs,
+  KNMIgeoservicesKlimaatAtlas: KNMIgeoservicesKlimaatAtlas,
+  KNMIgeoservicesHarmonie: KNMIgeoservicesHarmonie,
+  KNMIgeoservicesHarmonieMLService: KNMIgeoservicesHarmonieMLService,
+  MetNorwayService: MetNorwayService,
+  FMIopenwms: FMIopenwms,
+  DWDObservations: DWDObservations,
+  DWDWarnings: DWDWarnings,
+  DWDWXProdukt: DWDWXProdukt,
+  EUMETSAT: EUMETSAT,
+  eumetviewEUMETSAT: eumetviewEUMETSAT,
+  ECMWFPublicService: ECMWFPublicService,
+  MeteoCanada: MeteoCanada
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -16688,66 +17358,390 @@ var TimeSliderScaleSliderConnect = connectReduxTimeSliderScaleSlider(TimeSliderS
  * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var connectRedux = connect(function (store, props) {
-  return {
-    isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId)
-  };
-}, {
-  toggleTimeSliderHover: toggleTimeSliderHover
-});
+var baseLayer$1 = {
+  name: 'arcGisSat',
+  title: 'arcGisSat',
+  type: 'twms',
+  layerType: LayerType.baseLayer,
+  enabled: true,
+  id: generateLayerId()
+}; // Base Layers List
+
+var baseLayerGrey$1 = {
+  id: generateLayerId(),
+  name: 'WorldMap_Light_Grey_Canvas',
+  type: 'twms',
+  layerType: LayerType.baseLayer
+};
+var baseLayerOpenStreetMapNL$1 = {
+  id: 'base-layer-2',
+  name: 'OpenStreetMap_NL',
+  type: 'twms',
+  layerType: LayerType.baseLayer,
+  enabled: true
+};
+var baseLayerArcGisCanvas$1 = {
+  service: ArcGisCanvas.url,
+  id: generateLayerId(),
+  name: 'arcGisCanvas',
+  type: 'twms',
+  enabled: true,
+  layerType: LayerType.baseLayer
+};
+var baseLayerWorldMap$1 = {
+  id: generateLayerId(),
+  name: 'WorldMap',
+  type: 'twms',
+  layerType: LayerType.baseLayer,
+  enabled: true
+};
+var baseLayerHeiGit = {
+  service: HeiGit.url,
+  id: generateLayerId(),
+  name: 'osm_auto:all',
+  layerType: LayerType.baseLayer
+}; // Over Layers List
+
+var overLayer$1 = {
+  service: KNMIgeoservicesBaselayers.url,
+  name: 'countryborders',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.overLayer
+}; // KNMI msgcpp List
+
+var msgCppLayer = {
+  // doesn't work with https
+  service: KNMImsgcpp.url,
+  name: 'lwe_precipitation_rate',
+  format: 'image/png',
+  enabled: true,
+  style: 'precip-transparent/nearest',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+}; // Nederlandse Nationaal Georegister Layers list
+
+var veiligheidsRegiosGebiedsIndelingenLabels = {
+  service: nationaalgeoregister.url,
+  name: 'cbsgebiedsindelingen:cbs_veiligheidsregio_2020_labelpoint',
+  style: 'CBS_Label',
+  enabled: false,
+  layerType: LayerType.mapLayer
+};
+var veiligheidsRegiosGebiedsIndelingen = {
+  service: nationaalgeoregister.url,
+  name: 'cbsgebiedsindelingen:cbs_veiligheidsregio_2020_gegeneraliseerd',
+  style: 'CBS_Gebiedsindeling',
+  enabled: false,
+  layerType: LayerType.mapLayer
+}; // KNMI Geoservices Layers List
+
+var radarLayer$1 = {
+  service: KNMIgeoservicesRadar.url,
+  name: 'RAD_NL25_PCP_CM',
+  format: 'image/png',
+  enabled: true,
+  style: 'radar/nearest',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var radarLayerWithError = {
+  service: KNMIgeoservicesRadar.url,
+  name: 'radarLayer',
+  format: 'image/png',
+  enabled: true,
+  style: 'knmiradar/nearest',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var obsAirTemperature = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/ta',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var obsWind = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/wind',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var obsAirPressureAtSeaLevel = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/pp',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var obsRelativeHumidity = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/rh',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var obsGlobalSolarRadiation = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/qg',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var obsPrecipitationIntensityPWS = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/pg',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var harmonieRelativeHumidityPl = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'relative_humidity__at_pl',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+var harmonieWindPl = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'wind__at_pl',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+var harmonieAirTemperature = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'air_temperature__at_2m',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+var harmoniePrecipitation = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'precipitation_flux',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+var harmoniePressure = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'air_pressure_at_sea_level',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+var harmonieWindFlags = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'wind__at_10m',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var klimaatAtlasTG3 = {
+  service: KNMIgeoservicesKlimaatAtlas.url,
+  name: 'TG3',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+}; // DWD Layers List
+
+var dwdWarningLayer = {
+  service: DWDWarnings.url,
+  name: 'Warnungen_Gemeinden_vereinigt',
+  format: 'image/png',
+  // style: 'warnungen_gemeinden_vereinigt_event_seamless_param',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var dwdRadarLayer = {
+  service: DWDWXProdukt.url,
+  name: 'WX-Produkt',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+}; // this needs authentication to work
 
-var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
-  var sourceId = _ref.sourceId,
-      mapId = _ref.mapId,
-      isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
-      toggleTimeSliderHover = _ref.toggleTimeSliderHover;
-  React.useEffect(function () {
-    var handleKeyDown = function handleKeyDown(event) {
-      if (event.ctrlKey && event.altKey && event.key === 'h') {
-        toggleTimeSliderHover({
-          mapId: mapId,
-          isTimeSliderHoverOn: !isTimeSliderHoverOn
-        });
-      }
-    };
+var dwdObservationsWetterLayer = {
+  service: DWDObservations.url,
+  name: 'Wetter_Beobachtungen',
+  style: 'Wetter_Symbole',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer // headers: [{ name: 'Authorization', value: 'Basic ...' }]
 
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [mapId, isTimeSliderHoverOn, toggleTimeSliderHover]);
-  return /*#__PURE__*/React.createElement(TimeSlider, {
-    buttons: /*#__PURE__*/React.createElement(TimeSliderButtonsConnect, {
-      mapId: mapId
-    }),
-    rail: /*#__PURE__*/React.createElement(TimeSliderRailConnect, {
-      mapId: mapId,
-      sourceId: sourceId
-    }),
-    scaleSlider: /*#__PURE__*/React.createElement(TimeSliderScaleSliderConnect, {
-      mapId: mapId
-    }),
-    legend: /*#__PURE__*/React.createElement(TimeSliderLegendConnect$1, {
-      mapId: mapId,
-      sourceId: sourceId
-    })
-  });
 };
-/**
- * TimeSlider component with components connected to the store displaying the time slider
- *
- * Expects the following props:
- * @param {string} mapId mapId: string - Id of the map
- * @param {string} sourceId sourceId: string - Source Id of the timeslider
- * @example
- * ``` <TimeSliderConnect sourceId="timeslider-1" mapId={mapId} />```
- */
+var dwdObservationsWetterLayerWithHeader = {
+  service: DWDObservations.url,
+  name: 'Wetter_Beobachtungen',
+  style: 'Wetter_Symbole',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer,
+  headers: [{
+    name: 'authorization',
+    value: 'Basic aW50cmFuZXQtdXNlcjpDQnMjMTEh'
+  }]
+}; // this needs authentication to work
 
+var dwdObservationsWindLayer = {
+  service: DWDObservations.url,
+  name: 'Wetter_Beobachtungen',
+  style: 'Wetter_Wind',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+}; // FMI open wms Layers List
 
-var TimeSliderConnect = connectRedux(ConnectedTimeSlider);
+var FMITemp = {
+  service: FMIopenwms.url,
+  name: 'temperature-forecast',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+}; // Met Norway Layers List
+
+var MetNoTemp = {
+  service: MetNorwayService.url,
+  name: 'thredds_meps_latest_wind',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var metNorwayWind1 = {
+  service: MetNorwayService.url,
+  name: 'thredds_meps_latest_wind',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var metNorwayWind2 = {
+  service: MetNorwayService.url,
+  name: 'thredds_aromearctic_extracted_t',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var metNorwayWind3 = {
+  service: MetNorwayService.url,
+  name: 'thredds_nk800_temperature',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var metNorwayLatestT = {
+  service: MetNorwayService.url,
+  name: 'thredds_meps_latest_t',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var metNorwaySalinaty = {
+  service: MetNorwayService.url,
+  name: 'thredds_barents_2_5km_1h_salinity',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var msgFesEUMETSAT = {
+  service: EUMETSAT.url,
+  name: 'msg_fes:rgb_eview',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var msgNaturalenhncdEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_naturalenhncd',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var msgAshEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_ash',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var msgCthEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_cth',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var msgFogEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_fog',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var msgNaturalEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_natural',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+
+var publicLayers = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  baseLayer: baseLayer$1,
+  baseLayerGrey: baseLayerGrey$1,
+  baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL$1,
+  baseLayerArcGisCanvas: baseLayerArcGisCanvas$1,
+  baseLayerWorldMap: baseLayerWorldMap$1,
+  baseLayerHeiGit: baseLayerHeiGit,
+  overLayer: overLayer$1,
+  msgCppLayer: msgCppLayer,
+  veiligheidsRegiosGebiedsIndelingenLabels: veiligheidsRegiosGebiedsIndelingenLabels,
+  veiligheidsRegiosGebiedsIndelingen: veiligheidsRegiosGebiedsIndelingen,
+  radarLayer: radarLayer$1,
+  radarLayerWithError: radarLayerWithError,
+  obsAirTemperature: obsAirTemperature,
+  obsWind: obsWind,
+  obsAirPressureAtSeaLevel: obsAirPressureAtSeaLevel,
+  obsRelativeHumidity: obsRelativeHumidity,
+  obsGlobalSolarRadiation: obsGlobalSolarRadiation,
+  obsPrecipitationIntensityPWS: obsPrecipitationIntensityPWS,
+  harmonieRelativeHumidityPl: harmonieRelativeHumidityPl,
+  harmonieWindPl: harmonieWindPl,
+  harmonieAirTemperature: harmonieAirTemperature,
+  harmoniePrecipitation: harmoniePrecipitation,
+  harmoniePressure: harmoniePressure,
+  harmonieWindFlags: harmonieWindFlags,
+  klimaatAtlasTG3: klimaatAtlasTG3,
+  dwdWarningLayer: dwdWarningLayer,
+  dwdRadarLayer: dwdRadarLayer,
+  dwdObservationsWetterLayer: dwdObservationsWetterLayer,
+  dwdObservationsWetterLayerWithHeader: dwdObservationsWetterLayerWithHeader,
+  dwdObservationsWindLayer: dwdObservationsWindLayer,
+  FMITemp: FMITemp,
+  MetNoTemp: MetNoTemp,
+  metNorwayWind1: metNorwayWind1,
+  metNorwayWind2: metNorwayWind2,
+  metNorwayWind3: metNorwayWind3,
+  metNorwayLatestT: metNorwayLatestT,
+  metNorwaySalinaty: metNorwaySalinaty,
+  msgFesEUMETSAT: msgFesEUMETSAT,
+  msgNaturalenhncdEUMETSAT: msgNaturalenhncdEUMETSAT,
+  msgAshEUMETSAT: msgAshEUMETSAT,
+  msgCthEUMETSAT: msgCthEUMETSAT,
+  msgFogEUMETSAT: msgFogEUMETSAT,
+  msgNaturalEUMETSAT: msgNaturalEUMETSAT
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -21059,10 +22053,10 @@ var useStyles$4 = makeStyles(function (theme) {
 var defaultBbox = {
   srs: 'EPSG:3857',
   bbox: {
-    left: -450651.2255879827,
-    bottom: 6490531.093143953,
-    right: 1428345.8183648037,
-    top: 7438773.776232235
+    left: 58703.6377,
+    bottom: 6408480.4514,
+    right: 3967387.5161,
+    top: 11520588.9031
   }
 };
 var ConfigurableConnectedMap = function ConfigurableConnectedMap(_ref) {
@@ -21152,6 +22146,14 @@ var ConfigurableConnectedMap = function ConfigurableConnectedMap(_ref) {
           mapId: mapId,
           animationDelay: getSpeedDelay(animationPayload.speed)
         }));
+      } // If animation interval set, set the timestep auto property to false
+
+
+      if (animationPayload && animationPayload.interval) {
+        dispatch(toggleTimestepAuto({
+          mapId: mapId,
+          timestepAuto: false
+        }));
       }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
@@ -21214,93 +22216,35 @@ var useStyles$3 = makeStyles(function (theme) {
     }
   };
 });
-
-var makeIndexedMapId = function makeIndexedMapId(baseId, mapNo) {
-  return "".concat(baseId, "_").concat(mapNo);
-};
-
 var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
   var maps = _ref.maps,
       rows = _ref.rows,
       cols = _ref.cols,
-      _ref$syncArea = _ref.syncArea,
-      syncArea = _ref$syncArea === void 0 ? true : _ref$syncArea,
-      _ref$syncTime = _ref.syncTime,
-      syncTime = _ref$syncTime === void 0 ? true : _ref$syncTime,
       _ref$showTimeSlider = _ref.showTimeSlider,
       showTimeSlider = _ref$showTimeSlider === void 0 ? true : _ref$showTimeSlider,
       _ref$showZoomControls = _ref.showZoomControls,
       showZoomControls = _ref$showZoomControls === void 0 ? true : _ref$showZoomControls;
-  var id = React__default.useRef(generateMapId()).current;
   var classes = useStyles$3();
   var dispatch = useDispatch();
-  var syncGroupAddGroup$1 = React__default.useCallback(function (payload) {
-    return dispatch(syncGroupAddGroup(payload));
-  }, [dispatch]);
   var syncGroupAddTarget$1 = React__default.useCallback(function (payload) {
     return dispatch(syncGroupAddTarget(payload));
   }, [dispatch]);
   React__default.useEffect(function () {
-    /* Add sync groups */
-    syncGroupAddGroup$1({
-      groupId: "Time_".concat(id),
-      title: "Time group for ".concat(id),
-      type: SYNCGROUPS_TYPE_SETTIME
-    });
-    syncGroupAddGroup$1({
-      groupId: "Area_".concat(id),
-      title: "Area group for ".concat(id),
-      type: SYNCGROUPS_TYPE_SETBBOX
-    });
-    /* Add this target to the group for area and time */
-
-    syncGroupAddTarget$1({
-      groupId: "Time_".concat(id),
-      targetId: id,
-      linked: syncTime
-    });
-    syncGroupAddTarget$1({
-      groupId: "Area_".concat(id),
-      targetId: id,
-      linked: syncArea
-    });
-    /* Also add all tiles to the syncgroup for area and time */
-
-    maps.forEach(function (map, mapIndex) {
-      syncGroupAddTarget$1({
-        groupId: "Time_".concat(id),
-        targetId: makeIndexedMapId(id, mapIndex),
-        linked: syncTime
-      });
-      syncGroupAddTarget$1({
-        groupId: "Area_".concat(id),
-        targetId: makeIndexedMapId(id, mapIndex),
-        linked: syncArea
-      });
-      /* Layer sync groups */
-
-      var layerSyncGroup = map.layerSyncGroupId;
-
-      if (layerSyncGroup) {
-        /* Always add the group, it does not harm if it is already defined previousely */
-        syncGroupAddGroup$1({
-          groupId: layerSyncGroup,
-          title: "Layer group for ".concat(id),
-          type: SYNCGROUPS_TYPE_SETLAYERACTIONS
-        });
+    maps.forEach(function (map) {
+      map.syncGroupsIds && map.syncGroupsIds.forEach(function (syncGroupsId) {
         syncGroupAddTarget$1({
-          groupId: layerSyncGroup,
-          targetId: makeIndexedMapId(id, mapIndex),
+          groupId: syncGroupsId,
+          targetId: map.id,
           linked: true
         });
-      }
+      });
     });
-  }, [id, maps, syncArea, syncGroupAddGroup$1, syncGroupAddTarget$1, syncTime]);
+  }, [maps, syncGroupAddTarget$1]);
   var mapStyle = {
     width: "".concat(Math.round(100 / cols), "%"),
     height: "".concat(Math.round(100 / rows), "%")
   };
-  var firstMapId = makeIndexedMapId(id, 0);
+  var firstMapId = maps[0].id;
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       height: '100%',
@@ -21320,10 +22264,10 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       width: '100%'
     }
   }, showTimeSlider && /*#__PURE__*/React__default.createElement(TimeSliderConnect, {
-    sourceId: id,
+    sourceId: firstMapId,
     mapId: firstMapId
   })), maps.map(function (map, mapIndex) {
-    var mapId = makeIndexedMapId(id, mapIndex);
+    var mapId = map.id;
     return /*#__PURE__*/React__default.createElement("div", {
       className: classes.box,
       key: mapId,
@@ -21363,9 +22307,11 @@ var useGetLatestReferenceTime = function useGetLatestReferenceTime(inputLayer) {
 /* Helper to make a map layer preset */
 
 
-var makeMapPreset = function makeMapPreset(timeIncrement, uniqueId, referenceTime, layers, layerSyncGroupId, displayLayerManagerButtonInMap, displayDimensionSelectButtonInMap) {
+var makeMapPreset = function makeMapPreset(timeIncrement, uniqueId, referenceTime, layers, syncGroupsIds, displayLayerManagerButtonInMap, displayDimensionSelectButtonInMap) {
   var mapTime = moment.utc(referenceTime).add(timeIncrement, 'h').format('YYYY-MM-DDTHH:mm:ss[Z]');
   return {
+    id: uniqueId,
+    syncGroupsIds: syncGroupsIds,
     title: "FC +".concat(timeIncrement),
     displayTimeInMap: true,
     bbox: {
@@ -21388,14 +22334,13 @@ var makeMapPreset = function makeMapPreset(timeIncrement, uniqueId, referenceTim
       });
     }),
     displayLayerManagerButtonInMap: displayLayerManagerButtonInMap,
-    displayDimensionSelectButtonInMap: displayDimensionSelectButtonInMap,
-    layerSyncGroupId: layerSyncGroupId
+    displayDimensionSelectButtonInMap: displayDimensionSelectButtonInMap
   };
 };
 var HarmRefTimePreset = function HarmRefTimePreset(_ref) {
   var _ref$layers = _ref.layers,
       layers = _ref$layers === void 0 ? [harmoniePressure, harmonieWindFlags, harmoniePrecipitation] : _ref$layers,
-      layerSyncGroupId = _ref.layerSyncGroupId;
+      syncGroupsIds = _ref.syncGroupsIds;
 
   /* Get latest reference time for this layer */
   var latestReferenceTime = useGetLatestReferenceTime(layers[0]);
@@ -21406,7 +22351,7 @@ var HarmRefTimePreset = function HarmRefTimePreset(_ref) {
   /* Add the layers with the different map times */
 
   var maps = timeIncrements.map(function (increment, index) {
-    return makeMapPreset(increment, "harm_precip".concat(increment), latestReferenceTime, layers, layerSyncGroupId, index === 0 || !layerSyncGroupId, index === 0 || !layerSyncGroupId);
+    return makeMapPreset(increment, "harm_precip".concat(increment), latestReferenceTime, layers, syncGroupsIds, index === 0 || !syncGroupsIds, index === 0 || !syncGroupsIds);
   });
   return /*#__PURE__*/React.createElement(MultiMapViewConnect, {
     rows: 3,
@@ -21446,13 +22391,21 @@ var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
   var layers = _ref.layers;
 
   /* Get all the reference times for this layer */
-  var referenceTimes = useGetReferenceTimes(layers.toprow);
+  var referenceTimes = useGetReferenceTimes(layers.topRow);
   if (referenceTimes.length === 0) return /*#__PURE__*/React.createElement("div", null, "Loading...");
   /* Helper to make a map layer prest */
 
-  var makeMapPreset = function makeMapPreset(referenceTime, uniqueId, layer, layerSyncGroupId, col) {
+  var makeMapPreset = function makeMapPreset(referenceTime, uniqueId, layer, syncGroupsIds, col) {
     return {
+      id: uniqueId,
       title: "Harmonie run ".concat("".concat(referenceTime.substring(8, 13).replace('T', ' / '))),
+      bbox: {
+        left: -450651.2255879827,
+        bottom: 6490531.093143953,
+        right: 1428345.8183648037,
+        top: 7438773.776232235
+      },
+      srs: 'EPSG:3857',
       layers: [Object.assign(Object.assign({}, layer), {
         id: uniqueId,
         dimensions: [{
@@ -21460,9 +22413,9 @@ var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
           currentValue: referenceTime
         }]
       })],
-      layerSyncGroupId: layerSyncGroupId,
-      displayLayerManagerButtonInMap: col === 0 || !layerSyncGroupId,
-      displayDimensionSelectButtonInMap: col === 0 || !layerSyncGroupId
+      syncGroupsIds: syncGroupsIds,
+      displayLayerManagerButtonInMap: col === 0 || !syncGroupsIds,
+      displayDimensionSelectButtonInMap: col === 0 || !syncGroupsIds
     };
   };
   /* Make the preset */
@@ -21473,14 +22426,14 @@ var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
 
   var mapsTemperature = _toConsumableArray(Array(nCols)).map(function (_, index) {
     var refTime = referenceTimes[referenceTimes.length - nCols + index];
-    return makeMapPreset(refTime, "harm_air".concat(index), layers.toprow, layers.toprowGroup, index);
+    return makeMapPreset(refTime, "harm_air".concat(index), layers.topRow, layers.topRowSyncGroups, index);
   });
   /* Add the harmonie precipitation layers with the different referencetimes */
 
 
   var mapsPrecipitation = _toConsumableArray(Array(nCols)).map(function (_, index) {
     var refTime = referenceTimes[referenceTimes.length - nCols + index];
-    return makeMapPreset(refTime, "harm_precip".concat(index), layers.bottomrow, layers.bottomrowGroup, index);
+    return makeMapPreset(refTime, "harm_precip".concat(index), layers.bottomRow, layers.bottomRowSyncGroups, index);
   });
 
   var maps = mapsTemperature.concat(mapsPrecipitation);
@@ -21631,10 +22584,10 @@ var componentsLookUp = function componentsLookUp(_ref) {
     case 'HarmRefTimePreset':
       {
         var _layers = initialProps.layers,
-            layerSyncGroupId = initialProps.layerSyncGroupId;
+            syncGroupsIds = initialProps.syncGroupsIds;
         return /*#__PURE__*/React__default.createElement(HarmRefTimePreset, {
           layers: _layers || [],
-          layerSyncGroupId: layerSyncGroupId,
+          syncGroupsIds: syncGroupsIds,
           "data-testid": "coreHarmonieRefTimePreset"
         });
       }
@@ -21642,7 +22595,8 @@ var componentsLookUp = function componentsLookUp(_ref) {
     case 'ConfigurableMultiMapWithSlider':
       {
         var _mapPreset = initialProps.mapPreset,
-            _shouldShowZoomControls = initialProps.shouldShowZoomControls;
+            _shouldShowZoomControls = initialProps.shouldShowZoomControls,
+            _syncGroupsIds = initialProps.syncGroupsIds;
         if (!_mapPreset || _mapPreset.length === 0) return null;
         return /*#__PURE__*/React__default.createElement(MultiMapViewConnect, {
           rows: 2,
@@ -21651,6 +22605,7 @@ var componentsLookUp = function componentsLookUp(_ref) {
           maps: _mapPreset.map(function (p, i) {
             return {
               id: "".concat(id, "_").concat(i),
+              syncGroupsIds: _syncGroupsIds,
               layers: p.layers || [],
               activeLayerId: p.activeLayerId || undefined,
               baseLayer: p.baseLayer || undefined,
@@ -22025,9 +22980,7 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
     });
   };
 
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "syncGroupViewer"
-  }, /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     title: "Sync",
     startSize: {
       width: 349,
@@ -22035,7 +22988,8 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
     },
     headerSize: "medium",
     isOpen: isOpen,
-    onClose: onClose
+    onClose: onClose,
+    "data-testid": "syncGroupViewer"
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SyncGroupList, {
     viewStateData: syncGroupViewState.zoompane,
     title: "ZoomPane",
@@ -22072,7 +23026,7 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
     removeGroup: function removeGroup(groupId) {
       return _removeGroup('level', groupId);
     }
-  }))));
+  })));
 };
 
 /* *
@@ -22310,4 +23264,4 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
   }, children)));
 };
 
-export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmRefTimePreset, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, TooltipSelect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultConfigurations, filterNonTimeDimensions, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$6 as layerReducer, makeMapPreset, actions$3 as mapActions, constants$1 as mapConstants, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, testLayers, actions$2 as uiActions, types$1 as uiTypes, useStyles$3 as useStyles };
+export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmRefTimePreset, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, TooltipSelect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultConfigurations, filterBaseLayers, filterBbox, filterDimensions, filterMapLayers, filterMapPresets, filterNonTimeDimensions, filterServices, filterSrs, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$6 as layerReducer, makeMapPreset, actions$3 as mapActions, constants$1 as mapConstants, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, testLayers, actions$2 as uiActions, types$1 as uiTypes, useStyles$3 as useStyles };