@opengeoweb/core 2.2.0 → 2.2.1

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('reselect'), require('lodash'), require('moment'), require('react'), require('immer'), require('redux-saga/effects'), require('@opengeoweb/webmap'), require('@mui/material'), require('@mui/styles/makeStyles'), require('react-redux'), require('@opengeoweb/shared'), require('@mui/icons-material'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga'), require('@opengeoweb/theme')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'reselect', 'lodash', 'moment', 'react', 'immer', 'redux-saga/effects', '@opengeoweb/webmap', '@mui/material', '@mui/styles/makeStyles', 'react-redux', '@opengeoweb/shared', '@mui/icons-material', 'react-sortablejs', '@mui/styles/createStyles', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', 'redux-dynamic-modules', 'redux-dynamic-modules-saga', '@opengeoweb/theme'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.reselect, global._, global.moment, global.React, global.produce, global.effects, global.webmap, global.material, global.makeStyles, global.reactRedux, global.shared, global.iconsMaterial, global.reactSortablejs, global.createStyles, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.reduxDynamicModules, global.reduxDynamicModulesSaga, global.theme));
-})(this, (function (exports, reselect, _, moment, React, produce, effects, webmap, material, makeStyles, reactRedux, shared, iconsMaterial, reactSortablejs, createStyles, withStyles, throttleDebounce, cloneDeep, proj4, reduxDynamicModules, reduxDynamicModulesSaga, theme) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('reselect'), require('moment'), require('lodash'), require('react'), require('immer'), require('redux-saga/effects'), require('@opengeoweb/webmap'), require('@mui/material'), require('@mui/styles/makeStyles'), require('react-redux'), require('@opengeoweb/shared'), require('@mui/icons-material'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga'), require('@opengeoweb/theme')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'reselect', 'moment', 'lodash', 'react', 'immer', 'redux-saga/effects', '@opengeoweb/webmap', '@mui/material', '@mui/styles/makeStyles', 'react-redux', '@opengeoweb/shared', '@mui/icons-material', 'react-sortablejs', '@mui/styles/createStyles', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', 'redux-dynamic-modules', 'redux-dynamic-modules-saga', '@opengeoweb/theme'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.reselect, global.moment, global._, global.React, global.produce, global.effects, global.webmap, global.material, global.makeStyles, global.reactRedux, global.shared, global.iconsMaterial, global.reactSortablejs, global.createStyles, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.reduxDynamicModules, global.reduxDynamicModulesSaga, global.theme));
+})(this, (function (exports, reselect, moment, _, React, produce, effects, webmap, material, makeStyles, reactRedux, shared, iconsMaterial, reactSortablejs, createStyles, withStyles, throttleDebounce, cloneDeep, proj4, reduxDynamicModules, reduxDynamicModulesSaga, theme) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,8 +24,8 @@
     return Object.freeze(n);
   }
 
-  var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+  var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var produce__default = /*#__PURE__*/_interopDefaultLegacy(produce);
@@ -671,6 +671,7 @@
    * 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");
@@ -701,6 +702,19 @@
       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");
@@ -759,7 +773,8 @@
     addAvailableBaseLayer: addAvailableBaseLayer,
     addAvailableBaseLayers: addAvailableBaseLayers,
     onUpdateLayerInformation: onUpdateLayerInformation,
-    serviceSetLayers: serviceSetLayers
+    serviceSetLayers: serviceSetLayers,
+    mapStoreRemoveService: mapStoreRemoveService
   });
 
   /* *
@@ -792,6 +807,29 @@
     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.
@@ -1037,7 +1075,7 @@
 
   var getLayersById = reselect.createSelector(layerStore, function (store) {
     return store ? store.byId : null;
-  });
+  }, selectorMemoizationOptions);
   /**
    * Retrieves all layerIds
    *
@@ -1048,7 +1086,7 @@
 
   var getLayersIds = reselect.createSelector(layerStore, function (store) {
     return store ? store.allIds : [];
-  });
+  }, selectorMemoizationOptions);
   /**
    * Retrieves all layers (including base layers and overlayers)
    *
@@ -1061,7 +1099,7 @@
     return ids.map(function (layerId) {
       return layers[layerId];
     });
-  });
+  }, selectorMemoizationOptions);
   /**
    * Retrieves all layers that aren't base layers and aren't overlayers
    *
@@ -1074,7 +1112,7 @@
     return layers.filter(function (layer) {
       return layer.layerType !== LayerType.baseLayer && layer.layerType !== LayerType.overLayer;
     });
-  });
+  }, selectorMemoizationOptions);
   /**
    * Retrieves all baselayers
    *
@@ -1087,7 +1125,7 @@
     return layers.filter(function (layer) {
       return layer.layerType === LayerType.baseLayer;
     });
-  });
+  }, selectorMemoizationOptions);
   /**
    * Retrieves all overLayers
    *
@@ -1100,7 +1138,7 @@
     return layers.filter(function (layer) {
       return layer.layerType === LayerType.overLayer;
     });
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets dimensions of the passed layer
    *
@@ -1112,7 +1150,7 @@
 
   var getLayerDimensions = reselect.createSelector(getLayerById, function (layer) {
     return layer && layer.dimensions ? layer.dimensions : [];
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets dimensions of the passed layer, excluding the time dimension
    *
@@ -1124,21 +1162,21 @@
 
   var getLayerNonTimeDimensions = reselect.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 = reselect.createSelector(getLayerDimensions, function (dimensions) {
     return dimensions && dimensions.length ? dimensions.find(function (dimension) {
       return dimension.name === 'time';
-    }) : [];
-  });
+    }) : {};
+  }, selectorMemoizationOptions);
   /**
    * Gets specified dimension of the passed layer
    *
@@ -1155,7 +1193,7 @@
     return dimensions && dimensions.length ? dimensions.find(function (dimension) {
       return dimension.name === dimensionName;
     }) : {};
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets opacity of the passed layer
    *
@@ -1237,9 +1275,11 @@
    * @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_1 = store.layers.availableBaseLayers;
+  var getAvailableBaseLayersForMap = reselect.createSelector(layerStore, function (_store, _mapId) {
+    return _mapId;
+  }, function (layerStore, mapId) {
+    if (layerStore && layerStore.availableBaseLayers) {
+      var availableBaseLayers_1 = layerStore.availableBaseLayers;
       return availableBaseLayers_1.allIds.reduce(function (list, layerId) {
         if (availableBaseLayers_1.byId[layerId].mapId === mapId) {
           return list.concat(availableBaseLayers_1.byId[layerId]);
@@ -1250,7 +1290,7 @@
     }
 
     return [];
-  };
+  }, selectorMemoizationOptions);
 
   /*! *****************************************************************************
   Copyright (c) Microsoft Corporation.
@@ -1306,6 +1346,16 @@
       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());
+      });
+  }
+
   function __generator(thisArg, body) {
       var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
       return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
@@ -1964,14 +2014,6 @@
    * 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
    *
@@ -2011,19 +2053,17 @@
    * @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 = reselect.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 = reselect.createSelector(getFirstMap, function (map) {
@@ -2034,7 +2074,7 @@
    *
    * @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 = reselect.createSelector(function (store, mapId) {
@@ -2057,7 +2097,7 @@
 
   var getLayerIds = reselect.createSelector(getMapById, function (store) {
     return store ? store.mapLayers : [];
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets all layer states for a map
    *
@@ -2083,7 +2123,7 @@
 
   var getMapBaseLayersIds = reselect.createSelector(getMapById, function (store) {
     return store ? store.baseLayers : [];
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets all baselayers for a map
    *
@@ -2109,7 +2149,7 @@
 
   var getMapOverLayersIds = reselect.createSelector(getMapById, function (store) {
     return store ? store.overLayers : [];
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets all overLayers for a map
    *
@@ -2135,7 +2175,7 @@
 
   var getMapDimensions = reselect.createSelector(getMapById, function (store) {
     return store ? store.dimensions : [];
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets the map dimension requested
    *
@@ -2156,7 +2196,7 @@
     }
 
     return undefined;
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets map srs
    *
@@ -2180,7 +2220,7 @@
 
   var getBbox = reselect.createSelector(getMapById, function (store) {
     return store ? store.bbox : {};
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets if map is animating
    *
@@ -2270,7 +2310,7 @@
    * 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 = reselect.createSelector(getMapById, function (store) {
@@ -2282,7 +2322,7 @@
    * 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 = reselect.createSelector(getMapById, function (store) {
@@ -2294,7 +2334,7 @@
    * 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 = reselect.createSelector(getMapById, function (store) {
@@ -2306,7 +2346,7 @@
    * 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 = reselect.createSelector(getMapById, function (store) {
@@ -2318,7 +2358,7 @@
    * 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 = reselect.createSelector(getMapById, function (store) {
@@ -2369,14 +2409,14 @@
    * 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 = reselect.createSelector(function (store) {
     return store && store.webmap ? store.webmap : null;
   }, function (_store, layerId) {
     return layerId;
-  }, findMapIdFromLayerId);
+  }, findMapIdFromLayerId, selectorMemoizationOptions);
   /**
    * Returns the layerId for given layerName
    *
@@ -2384,7 +2424,7 @@
    * @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 = reselect.createSelector(getMapLayers, function (_store, _mapId, layerName) {
@@ -2399,7 +2439,7 @@
     }
 
     return null;
-  });
+  }, selectorMemoizationOptions);
   /**
    * Returns the layerIndex in the map for given layerId
    *
@@ -2416,7 +2456,7 @@
     return layers.findIndex(function (layer) {
       return layer.id === layerId;
     });
-  });
+  }, selectorMemoizationOptions);
   /**
    * Returns the Layer in the map for given layerIndex
    *
@@ -2435,7 +2475,7 @@
     }
 
     return null;
-  });
+  }, selectorMemoizationOptions);
   /**
    * Returns name of all unique dimensions present in all maps
    *
@@ -2458,7 +2498,7 @@
       }, list);
       return uniqueMapDims;
     }, []);
-  });
+  }, selectorMemoizationOptions);
   /**
    * Returns the mapPinLocation for the current map
    *
@@ -2470,7 +2510,7 @@
 
   var getPinLocation = reselect.createSelector(getMapById, function (store) {
     return store ? store.mapPinLocation : undefined;
-  });
+  }, selectorMemoizationOptions);
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2503,7 +2543,7 @@
 
   var getServiceIds = reselect.createSelector(servicesStore, function (serviceState) {
     return serviceState ? serviceState.allIds : [];
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets map services
    *
@@ -2514,7 +2554,7 @@
 
   var getServices = reselect.createSelector(servicesStore, function (store) {
     return store ? store.byId : {};
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets the service object by its url
    *
@@ -2531,19 +2571,19 @@
     }
 
     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 = reselect.createSelector(getServiceByName, function (service) {
     return service && service.layers || null;
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets the layer from the store using the serviceUrl and layerName
    *
@@ -2571,7 +2611,7 @@
     }
 
     return layers[index];
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets the layers stylelist from the servicestore using the serviceUrl and layerName
    *
@@ -2584,7 +2624,26 @@
 
   var getLayerStyles = reselect.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 = reselect.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");
@@ -2664,7 +2723,8 @@
     getServiceByName: getServiceByName,
     getLayersFromService: getLayersFromService$1,
     getLayerFromService: getLayerFromService,
-    getLayerStyles: getLayerStyles
+    getLayerStyles: getLayerStyles,
+    getServicesInArray: getServicesInArray
   });
 
   /* *
@@ -2724,7 +2784,8 @@
     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
   });
 
   /* *
@@ -3837,6 +3898,11 @@
             return;
           }
 
+          if (!targetId) {
+            console.warn("SYNCGROUPS_ADD_TARGET: targetId is not defined.");
+            return;
+          }
+
           if (draft.groups.byId[groupId].targets.allIds.includes(targetId)) {
             return;
           }
@@ -5091,11 +5157,11 @@
           },
           '&.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': {
@@ -5213,9 +5279,11 @@
    * 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
   });
 
   /* *
@@ -5419,7 +5487,7 @@
    *
    * @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 = reselect.createSelector(getDialogDetailsByType, function (details) {
@@ -5434,7 +5502,7 @@
    *
    * @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 = reselect.createSelector(getDialogDetailsByType, function (details) {
@@ -6390,6 +6458,16 @@
           return reducer(state, mapAction);
         }
 
+      case MAP_SERVICES_REMOVE_SERVICE:
+        return produce__default["default"](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;
     }
@@ -6882,7 +6960,10 @@
         byId: {},
         allIds: []
       },
-      keywords: []
+      keywords: {
+        byId: {},
+        allIds: []
+      }
     }
   };
   var reducer = function reducer(state, action) {
@@ -6910,30 +6991,22 @@
             if (!draft.filters.activeServices.byId[serviceUrl_1]) {
               draft.filters.activeServices.byId[serviceUrl_1] = {};
 
-              var _loop_1 = function _loop_1(keyword) {
-                var foundKeyword = draft.filters.keywords.find(function (object) {
-                  return object.id === keyword;
-                });
-
-                if (foundKeyword) {
-                  foundKeyword.amount += 1;
-                  foundKeyword.amountVisible += 1;
-                } else {
-                  var newKeywordObject = {
-                    id: keyword,
-                    amount: 1,
-                    amountVisible: 1,
-                    checked: true
-                  };
-                  draft.filters.keywords.push(newKeywordObject);
-                }
-              };
-
               try {
                 for (var keywords_2 = __values(keywords_1), keywords_2_1 = keywords_2.next(); !keywords_2_1.done; keywords_2_1 = keywords_2.next()) {
                   var keyword = keywords_2_1.value;
 
-                  _loop_1(keyword);
+                  if (!draft.filters.keywords.byId[keyword]) {
+                    draft.filters.keywords.byId[keyword] = {
+                      id: keyword,
+                      amount: 1,
+                      amountVisible: 1,
+                      checked: true
+                    };
+                    draft.filters.keywords.allIds.push(keyword);
+                  } else {
+                    draft.filters.keywords.byId[keyword].amount += 1;
+                    draft.filters.keywords.byId[keyword].amountVisible += 1;
+                  }
                 }
               } catch (e_1_1) {
                 e_1 = {
@@ -6955,31 +7028,37 @@
           });
         }
 
-      case 'LAYER_SELECT_ENABLE_ACTIVE_SERVICE':
+      case 'LAYER_SELECT_SERVICE_REMOVED':
         {
-          var _b = action.payload,
-              serviceUrl_2 = _b.serviceUrl,
-              keywords_3 = _b.keywords;
           return produce__default["default"](state, function (draft) {
             var e_2, _a;
 
-            draft.filters.activeServices.byId[serviceUrl_2].enabled = true;
+            var serviceUrl = action.payload.serviceUrl; // 1. Find a service that is to be removed
 
-            var _loop_2 = function _loop_2(keyword) {
-              var foundObject = draft.filters.keywords.find(function (object) {
-                return object.id === keyword;
-              });
+            var foundService = draft.filters.activeServices.byId[serviceUrl];
+
+            var _loop_1 = function _loop_1(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;
+                });
               }
             };
 
             try {
-              for (var keywords_4 = __values(keywords_3), keywords_4_1 = keywords_4.next(); !keywords_4_1.done; keywords_4_1 = keywords_4.next()) {
-                var keyword = keywords_4_1.value;
+              // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
+              for (var _b = __values(foundService.keywordsPerService), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var keyword = _c.value;
 
-                _loop_2(keyword);
+                _loop_1(keyword);
               }
             } catch (e_2_1) {
               e_2 = {
@@ -6987,10 +7066,45 @@
               };
             } finally {
               try {
-                if (keywords_4_1 && !keywords_4_1.done && (_a = keywords_4["return"])) _a.call(keywords_4);
+                if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
               } finally {
                 if (e_2) throw e_2.error;
               }
+            } // Finally remove object from activeServices, so if the service is added again later on, new object and keywords will be re-added
+
+
+            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 _b = action.payload,
+              serviceUrl_2 = _b.serviceUrl,
+              keywords_3 = _b.keywords;
+          return produce__default["default"](state, function (draft) {
+            var e_3, _a;
+
+            draft.filters.activeServices.byId[serviceUrl_2].enabled = true;
+
+            try {
+              for (var keywords_4 = __values(keywords_3), keywords_4_1 = keywords_4.next(); !keywords_4_1.done; keywords_4_1 = keywords_4.next()) {
+                var keyword = keywords_4_1.value;
+                draft.filters.keywords.byId[keyword].amountVisible += 1;
+              }
+            } catch (e_3_1) {
+              e_3 = {
+                error: e_3_1
+              };
+            } finally {
+              try {
+                if (keywords_4_1 && !keywords_4_1.done && (_a = keywords_4["return"])) _a.call(keywords_4);
+              } finally {
+                if (e_3) throw e_3.error;
+              }
             }
           });
         }
@@ -7001,45 +7115,63 @@
               serviceUrl_3 = _c.serviceUrl,
               keywords_5 = _c.keywords;
           return produce__default["default"](state, function (draft) {
-            var e_3, _a;
+            var e_4, _a;
 
             draft.filters.activeServices.byId[serviceUrl_3].enabled = false;
 
-            var _loop_3 = function _loop_3(keyword) {
-              var foundObject = draft.filters.keywords.find(function (object) {
-                return object.id === keyword;
-              });
-
-              if (foundObject && foundObject.amountVisible > 0) {
-                foundObject.amountVisible -= 1;
-              }
-            };
-
             try {
               for (var keywords_6 = __values(keywords_5), keywords_6_1 = keywords_6.next(); !keywords_6_1.done; keywords_6_1 = keywords_6.next()) {
                 var keyword = keywords_6_1.value;
-
-                _loop_3(keyword);
+                draft.filters.keywords.byId[keyword].amountVisible -= 1;
               }
-            } catch (e_3_1) {
-              e_3 = {
-                error: e_3_1
+            } catch (e_4_1) {
+              e_4 = {
+                error: e_4_1
               };
             } finally {
               try {
                 if (keywords_6_1 && !keywords_6_1.done && (_a = keywords_6["return"])) _a.call(keywords_6);
               } finally {
-                if (e_3) throw e_3.error;
+                if (e_4) throw e_4.error;
               }
             }
           });
         }
 
-      case 'LAYER_SELECT_UPDATE_KEYWORDS':
+      case 'LAYER_SELECT_TOGGLE_KEYWORDS':
         {
           return produce__default["default"](state, function (draft) {
+            var e_5, _a;
+
             var keywords = action.payload.keywords;
-            draft.filters.keywords = keywords;
+
+            try {
+              for (var keywords_7 = __values(keywords), keywords_7_1 = keywords_7.next(); !keywords_7_1.done; keywords_7_1 = keywords_7.next()) {
+                var keyword = keywords_7_1.value;
+                draft.filters.keywords.byId[keyword].checked = !draft.filters.keywords.byId[keyword].checked;
+              }
+            } catch (e_5_1) {
+              e_5 = {
+                error: e_5_1
+              };
+            } finally {
+              try {
+                if (keywords_7_1 && !keywords_7_1.done && (_a = keywords_7["return"])) _a.call(keywords_7);
+              } finally {
+                if (e_5) throw e_5.error;
+              }
+            }
+          });
+        }
+
+      case 'LAYER_SELECT_ENABLE_ONLY_ONE_KEYWORD':
+        {
+          return produce__default["default"](state, function (draft) {
+            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;
           });
         }
 
@@ -7068,7 +7200,9 @@
   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");
@@ -7138,9 +7272,42 @@
       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
     };
   };
@@ -7187,6 +7354,28 @@
       }
     });
   }
+  function layerSelectServiceRemovedSaga(capturedAction) {
+    var removedService, serviceUrl;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          removedService = capturedAction.payload;
+          serviceUrl = removedService.serviceUrl;
+          return [4
+          /*yield*/
+          , effects.put(layerSelectServiceRemoved({
+            serviceUrl: serviceUrl
+          }))];
+
+        case 1:
+          _a.sent();
+
+          return [2
+          /*return*/
+          ];
+      }
+    });
+  }
   function rootSaga() {
     return __generator(this, function (_a) {
       switch (_a.label) {
@@ -7198,6 +7387,13 @@
         case 1:
           _a.sent();
 
+          return [4
+          /*yield*/
+          , effects.takeEvery(MAP_SERVICES_REMOVE_SERVICE, layerSelectServiceRemovedSaga)];
+
+        case 2:
+          _a.sent();
+
           return [2
           /*return*/
           ];
@@ -7276,7 +7472,8 @@
       path: nodesToRecur.path || [],
       children: [],
       keywords: nodesToRecur.keywords || [],
-      "abstract": nodesToRecur["abstract"] || ''
+      "abstract": nodesToRecur["abstract"] || '',
+      styles: nodesToRecur.styles || []
     };
 
     if (nodesToRecur.children) {
@@ -7693,132 +7890,288 @@
    * 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 parseBoolean = function parseBoolean(value) {
+    return ['true', 'false', true, false].includes(value) && JSON.parse(value);
   };
-  var MetNorwayService = {
-    name: 'MetNorwayService',
-    url: 'https://wms-e1.geoweb.met.no/wms?',
-    id: 'MetNorwayService'
+
+  var isBaseLayer = function isBaseLayer(layer) {
+    return ['baseLayer'].includes(layer.layerType);
   };
-  var FMIopenwms = {
-    name: 'FMIopenwms',
-    url: 'https://openwms.fmi.fi/geoserver/wms?',
-    id: 'FMIopenwms'
+
+  var isMapLayer = function isMapLayer(layer) {
+    return ['mapLayer'].includes(layer.layerType);
   };
-  var DWDObservations = {
-    name: 'DWDObservations',
-    url: 'https://maps.dwd.de/geoserver/dwd/Wetter_Beobachtungen/ows?',
-    id: 'DWDObservations'
+
+  var isOverLayer = function isOverLayer(layer) {
+    return ['overLayer'].includes(layer.layerType);
   };
-  var DWDWarnings = {
-    name: 'DWDWarnings',
-    url: 'https://maps.dwd.de/geoserver/dwd/Warnungen_Gemeinden_vereinigt/ows?',
-    id: 'DWDWarnings'
+
+  var isValidService = function isValidService(service) {
+    return Object.prototype.hasOwnProperty.call(service, 'url');
   };
-  var DWDWXProdukt = {
-    name: 'DWDWXProdukt',
-    url: 'https://maps.dwd.de/geoserver/dwd/WX-Produkt/ows?',
-    id: 'DWDWXProdukt'
+
+  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 EUMETSAT = {
-    name: 'EUMETSAT',
-    url: 'https://view.eumetsat.int/geoserver/wms?',
-    id: 'EUMETSAT'
+
+  var isValidSrs = function isValidSrs(srs) {
+    var isValid = srs.includes('EPSG');
+    return isValid;
   };
-  var eumetviewEUMETSAT = {
-    name: 'eumetviewEUMETSAT',
-    url: 'https://eumetview.eumetsat.int/geoserv/wms?',
-    id: 'eumetviewEUMETSAT'
+
+  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 ECMWFPublicService = {
-    name: 'ECMWF',
-    url: 'https://apps.ecmwf.int/wms/?token=public',
-    id: 'ecmwf'
+
+  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 MeteoCanada = {
-    name: 'Meteo Canada',
-    url: 'https://geo.weather.gc.ca/geomet/?lang=en&',
-    id: '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
   };
 
-  var publicServices = /*#__PURE__*/Object.freeze({
+  /* *
+   * 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 _a$1 = filterMapPresets(initialPreset),
+      services = _a$1.services,
+      baseServices = _a$1.baseServices,
+      baseLayers = _a$1.baseLayers;
+
+  var availableDefaultBaseLayers = baseLayers;
+  var preloadedDefaultBaseServices = baseServices;
+  var preloadedDefaultMapServices = services;
+
+  var defaultConfigurations = /*#__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
+    availableDefaultBaseLayers: availableDefaultBaseLayers,
+    preloadedDefaultBaseServices: preloadedDefaultBaseServices,
+    preloadedDefaultMapServices: preloadedDefaultMapServices
   });
 
   /* *
@@ -7837,468 +8190,43 @@
    * 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 useStyles$H = makeStyles__default["default"]({
+    buttonDiv: {
+      position: 'relative'
+    },
+    loadingButton: {
+      position: 'absolute',
+      top: 7,
+      left: 7,
+      zIndex: 1
+    },
+    button: {
+      width: '24px',
+      height: '24px',
+      margin: '6px 0px 0px 10px'
+    }
+  });
 
-  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 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 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 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
-  });
-
-  /* *
-   * 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$H = makeStyles__default["default"]({
-    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 AddLayersPopup = function AddLayersPopup(_a) {
-    var onClickService = _a.onClickService,
-        onRenderTree = _a.onRenderTree,
-        _b = _a.highlightedLayers,
-        highlightedLayers = _b === void 0 ? [] : _b,
-        _c = _a.preloadedServices,
-        preloadedServices = _c === void 0 ? preloadedDefaultMapServices : _c,
-        _d = _a.open,
-        open = _d === void 0 ? false : _d,
-        handleClose = _a.handleClose,
-        _e = _a.layerType,
-        layerType = _e === void 0 ? LayerType.mapLayer : _e;
-    var classes = useStyles$H();
+  var AddLayersPopup = function AddLayersPopup(_a) {
+    var onClickService = _a.onClickService,
+        onRenderTree = _a.onRenderTree,
+        _b = _a.highlightedLayers,
+        highlightedLayers = _b === void 0 ? [] : _b,
+        _c = _a.preloadedServices,
+        preloadedServices = _c === void 0 ? preloadedDefaultMapServices : _c,
+        _d = _a.open,
+        open = _d === void 0 ? false : _d,
+        handleClose = _a.handleClose,
+        _e = _a.layerType,
+        layerType = _e === void 0 ? LayerType.mapLayer : _e;
+    var classes = useStyles$H();
 
     var _f = __read(React__namespace.useState(''), 2),
         serviceURL = _f[0],
@@ -9007,12 +8935,12 @@
         },
         backgroundColor: function backgroundColor(_a) {
           var isActive = _a.isActive;
-          return isActive ? theme.palette.geowebColors.buttons.primaryActive.fill : 'inherit';
+          return isActive ? theme.palette.geowebColors.buttons.primary.active.fill : 'inherit';
         },
         '&:focus': {
           backgroundColor: function backgroundColor(_a) {
             var isActive = _a.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
@@ -9020,7 +8948,7 @@
         '&:hover': {
           backgroundColor: function backgroundColor(_a) {
             var isActive = _a.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;
           }
         }
       },
@@ -10886,63 +10814,61 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useButtonStyles = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      button: {
-        height: '24px',
-        width: function width(_a) {
-          var width = _a.width;
-          return width ? 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 " + 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 _b = _a.variant,
+        variant = _b === void 0 ? 'primary' : _b,
+        _c = _a.value,
+        value = _c === void 0 ? 0 : _c,
+        props = __rest(_a, ["variant", "value"]);
+
+    return /*#__PURE__*/React__namespace.createElement(material.ToggleButton, __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,
+        _b = _a.width,
+        width = _b === void 0 ? '24px' : _b,
+        _c = _a.height,
+        height = _c === void 0 ? '24px' : _c,
         children = _a.children,
-        _b = _a.value,
-        value = _b === void 0 ? 0 : _b,
-        props = __rest(_a, ["active", "width", "children", "value"]);
-
-    var classes = useButtonStyles({
-      width: width
-    });
-    return /*#__PURE__*/React__namespace.createElement(material.ToggleButton, __assign({
-      className: classes.button,
+        _d = _a.value,
+        value = _d === void 0 ? 0 : _d,
+        _e = _a.sx,
+        sx = _e === void 0 ? {} : _e,
+        props = __rest(_a, ["active", "width", "height", "children", "value", "sx"]);
+
+    return /*#__PURE__*/React__namespace.createElement(CustomToggleButton, __assign({
+      variant: "tool",
       disableRipple: true,
       selected: active,
-      value: value
+      value: value,
+      sx: __assign({
+        width: width + "!important",
+        height: height + "!important",
+        textTransform: 'none!important',
+        padding: '11px!important'
+      }, sx)
     }, props), children);
   };
 
@@ -10982,18 +10908,18 @@
         source: source
       }));
     }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
-    return /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
+    return /*#__PURE__*/React__namespace.createElement(ToolButton, {
       onClick: openFilterResultsDialog,
       active: isOpenInStore,
       id: "keywordFilterButton",
       "data-testid": "keywordFilterButton",
-      disableRipple: true
+      disableRipple: true,
+      variant: "tool"
     }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg"
     }, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.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"
     }))));
   };
@@ -11035,14 +10961,14 @@
    *
    * 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 = reselect.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
    *
@@ -11064,18 +10990,73 @@
 
       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 ids of checked keywords
+   *
+   * Example getCheckedKeywordIds(store);
+   * @param {object} store store: object - store object
+   * @returns {array} returnType: array of keyword ids that are checked
+   */
+
+  var getCheckedKeywordIds = reselect.createSelector(layerSelectStore, function (store) {
+    var _a, _b;
+
+    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
+   *
+   * Example getAllKeywordIds(store);
+   * @param {object} store store: object - store object
+   * @returns {array} returnType: array of all keyword ids
+   */
+
+  var getAllKeywordIds = reselect.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 all keywords
+   * Returns if all keywords are checked
    *
-   * Example getKeywords(store);
+   * Example isAllKeywordsChecked(store);
    * @param {object} store store: object - store object
-   * @returns {array} returnType: array of keyword objects
+   * @returns {array} returnType: boolean if all keywords are checked
    */
 
-  var getKeywords = reselect.createSelector(layerSelectStore, function (store) {
-    return store ? store.filters.keywords : [];
+  var isAllKeywordsChecked = reselect.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
+   *
+   * 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 : {};
+  };
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -11093,7 +11074,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var style = {
+  var style$1 = {
     dialogTitle: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -11144,68 +11125,347 @@
   };
 
   var ServicePopup = function ServicePopup(_a) {
+    var _b, _c;
+
     var servicePopupVariant = _a.servicePopupVariant,
-        _b = _a.hideBackdrop,
-        hideBackdrop = _b === void 0 ? false : _b,
+        _d = _a.hideBackdrop,
+        hideBackdrop = _d === void 0 ? false : _d,
         isOpen = _a.isOpen,
         closePopup = _a.closePopup,
-        _c = _a.url,
-        url = _c === void 0 ? '' : _c;
+        url = _a.url,
+        services = _a.services,
+        serviceSetLayers = _a.serviceSetLayers;
+
+    var _e = __read(React__namespace.useState(servicePopupVariant !== 'edit' || services === undefined ? '' : (_b = services[url]) === null || _b === void 0 ? void 0 : _b.name), 2),
+        serviceName = _e[0],
+        setServiceName = _e[1];
+
+    var _f = __read(React__namespace.useState(servicePopupVariant === 'add' || url === undefined ? '' : url), 2),
+        serviceUrl = _f[0],
+        setServiceUrl = _f[1];
+
+    var _g = __read(React__namespace.useState(servicePopupVariant !== 'edit' || services === undefined ? '' : (_c = services[url]) === null || _c === void 0 ? void 0 : _c["abstract"]), 2),
+        _abstract = _g[0],
+        setAbstract = _g[1];
+
+    var _h = __read(React__namespace.useState(false), 2),
+        disableButton = _h[0],
+        setDisableButton = _h[1];
+
+    var _j = __read(React__namespace.useState(false), 2),
+        isLoading = _j[0],
+        setIsLoading = _j[1];
+
+    var _k = __read(React__namespace.useState(false), 2),
+        serviceNameHasError = _k[0],
+        setServiceNameHasError = _k[1];
+
+    var _l = __read(React__namespace.useState(''), 2),
+        serviceNameHelperText = _l[0],
+        setServiceNameHelperText = _l[1];
+
+    var _m = __read(React__namespace.useState(false), 2),
+        serviceUrlHasError = _m[0],
+        setServiceUrlHasError = _m[1];
+
+    var _o = __read(React__namespace.useState(''), 2),
+        serviceUrlHelperText = _o[0],
+        setServiceUrlHelperText = _o[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, function () {
+        var layers, serviceLayers, _a, _b, object;
+
+        var e_1, _c;
+
+        return __generator(this, function (_d) {
+          switch (_d.label) {
+            case 0:
+              setServiceUrlHasError(false);
+              if (!validateServiceUrl(serviceUrl)) return [3
+              /*break*/
+              , 4];
+              setIsLoading(true);
+              _d.label = 1;
+
+            case 1:
+              _d.trys.push([1, 3,, 4]);
+
+              return [4
+              /*yield*/
+              , getLayersFromService(serviceUrl)];
+
+            case 2:
+              layers = _d.sent();
+
+              if (layers.children) {
+                serviceLayers = [];
+
+                try {
+                  for (_a = __values(layers.children), _b = _a.next(); !_b.done; _b = _a.next()) {
+                    object = _b.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 (e_1_1) {
+                  e_1 = {
+                    error: e_1_1
+                  };
+                } finally {
+                  try {
+                    if (_b && !_b.done && (_c = _a["return"])) _c.call(_a);
+                  } finally {
+                    if (e_1) throw e_1.error;
+                  }
+                }
+
+                serviceSetLayers({
+                  id: serviceUrl,
+                  name: serviceName,
+                  service: serviceUrl,
+                  layers: serviceLayers
+                });
+                setIsLoading(false);
+                closePopupAndResetState();
+              }
+
+              return [3
+              /*break*/
+              , 4];
+
+            case 3:
+              _d.sent();
+              setIsLoading(false);
+              setServiceUrlHasError(true);
+              setServiceUrlHelperText('Error: Download failed. Check the URL.');
+              return [3
+              /*break*/
+              , 4];
+
+            case 4:
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
+    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__namespace.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__namespace.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__namespace.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__namespace.createElement(material.Dialog, {
       open: isOpen,
       hideBackdrop: hideBackdrop,
       fullWidth: true,
       maxWidth: "xs",
-      sx: style.container
+      "data-testid": "servicePopup",
+      sx: style$1.container
     }, /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
-      sx: style.dialogTitle
+      sx: style$1.dialogTitle
     }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
       variant: "h5",
       component: "span"
     }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       size: "small",
-      onClick: closePopup,
-      "data-testid": "ClosePopupButtonCross",
-      sx: style.closeBtn
+      onClick: closePopupAndResetState,
+      "data-testid": "closePopupButtonCross",
+      sx: style$1.closeBtn
     }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Close, null))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
-      sx: style.dialogContent
+      sx: style$1.dialogContent
     }, /*#__PURE__*/React__namespace.createElement(material.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__namespace.createElement(material.DialogContent, {
-      sx: style.dialogContent
+      sx: style$1.dialogContent
     }, /*#__PURE__*/React__namespace.createElement(material.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__namespace.createElement(material.DialogContent, {
-      sx: style.dialogContent
+      sx: style$1.dialogContent
     }, /*#__PURE__*/React__namespace.createElement(material.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__namespace.createElement(material.DialogActions, {
-      sx: style.footerContent
+      sx: style$1.footerContent
     }, /*#__PURE__*/React__namespace.createElement(material.Button, {
+      onClick: closePopupAndResetState,
+      "data-testid": "closePopupButtonCancel",
       variant: "tertiary",
-      onClick: closePopup,
-      "data-testid": "ClosePopupButtonCancel",
       sx: {
         width: '117px'
       }
-    }, "cancel"), /*#__PURE__*/React__namespace.createElement(material.Button, {
+    }, "cancel"), !isLoading ? /*#__PURE__*/React__namespace.createElement(material.Button, {
+      variant: "primary",
+      disabled: disableButton,
+      onClick: addNewService,
+      "data-testid": "saveServiceButton",
       sx: {
         width: '117px',
         marginLeft: '16px!important'
-      },
-      variant: "primary"
-    }, "save")));
+      }
+    }, "save") : /*#__PURE__*/React__namespace.createElement(material.Box, {
+      "data-testid": "loadingIndicator",
+      sx: {
+        width: '117px',
+        height: '40px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginLeft: '16px!important'
+      }
+    }, /*#__PURE__*/React__namespace.createElement(material.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(_a) {
+    var servicePopupVariant = _a.servicePopupVariant,
+        hideBackdrop = _a.hideBackdrop,
+        isOpen = _a.isOpen,
+        closePopup = _a.closePopup,
+        url = _a.url;
+    var dispatch = reactRedux.useDispatch();
+    var services = reactRedux.useSelector(function (store) {
+      return getServices(store);
+    });
+    var serviceSetLayers$1 = React__default["default"].useCallback(function (payload) {
+      dispatch(serviceSetLayers(payload));
+    }, [dispatch]);
+    return /*#__PURE__*/React__default["default"].createElement(ServicePopup, {
+      servicePopupVariant: servicePopupVariant,
+      hideBackdrop: hideBackdrop,
+      isOpen: isOpen,
+      closePopup: closePopup,
+      url: url,
+      services: services,
+      serviceSetLayers: serviceSetLayers$1
+    });
   };
 
   /* *
@@ -11231,11 +11491,6 @@
     return {
       iconButton: {
         color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
-      },
-      saveButton: {
-        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
-        textTransform: 'none',
-        border: "1px solid " + theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
       }
     };
   });
@@ -11271,6 +11526,12 @@
         setPopupOpen = _b[1];
 
     var classes = useStyles$q();
+    React__default["default"].useEffect(function () {
+      if (isPopupOpen === false) {
+        onClickClear();
+      } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    }, [isPopupOpen]);
     var ClearButton = /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
       title: "Clear",
       placement: "top"
@@ -11287,12 +11548,11 @@
         marginRight: '15px'
       }
     }, ClearButton), /*#__PURE__*/React__default["default"].createElement(material.Button, {
-      variant: "outlined",
+      variant: "tertiary",
       onClick: function onClick() {
         return setPopupOpen(true);
-      },
-      className: classes.saveButton
-    }, "Save"), /*#__PURE__*/React__default["default"].createElement(ServicePopup, {
+      }
+    }, "Save"), /*#__PURE__*/React__default["default"].createElement(ServicePopupConnect, {
       servicePopupVariant: "save",
       isOpen: isPopupOpen,
       closePopup: function closePopup() {
@@ -11420,17 +11680,7 @@
    * 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;
@@ -11442,11 +11692,9 @@
       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) {
@@ -11518,7 +11766,8 @@
         serviceIds = _a.serviceIds,
         layerSelectHeight = _a.layerSelectHeight,
         searchString = _a.searchString,
-        keywords = _a.keywords;
+        keywordIds = _a.keywordIds,
+        allKeywordsActive = _a.allKeywordsActive;
     var classes = useStyles$p();
 
     var _b = __read(React__namespace.useState(0), 2),
@@ -11527,9 +11776,9 @@
 
     React__namespace.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__namespace.createElement("div", {
       "data-testid": "layerList"
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -11540,7 +11789,7 @@
         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__namespace.createElement("div", {
           key: serviceId + "-" + layer.name,
           className: classes.layerRow,
@@ -11584,8 +11833,11 @@
     var enabledServiceIds = reactRedux.useSelector(function (store) {
       return getEnabledServiceIds(store);
     });
-    var keywords = reactRedux.useSelector(function (store) {
-      return getKeywords(store);
+    var checkedKeywordIds = reactRedux.useSelector(function (store) {
+      return getCheckedKeywordIds(store);
+    });
+    var allKeywordsActive = reactRedux.useSelector(function (store) {
+      return isAllKeywordsChecked(store);
     });
     var searchString = reactRedux.useSelector(function (store) {
       return getSearchFilter(store);
@@ -11594,7 +11846,8 @@
       services: services,
       serviceIds: enabledServiceIds,
       layerSelectHeight: layerSelectHeight,
-      keywords: keywords,
+      keywordIds: checkedKeywordIds,
+      allKeywordsActive: allKeywordsActive,
       searchString: searchString
     });
   };
@@ -11615,41 +11868,15 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$o = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      chip: {
-        height: '32px',
-        margin: '0 8px 0 0',
-        padding: '5px 12px 7px',
-        borderRadius: '20px',
-        border: function border(_a) {
-          var isEnabled = _a.isEnabled;
-          return isEnabled ? "solid 1px " + theme.palette.geowebColors.buttons.primaryActive.fill : "solid 1px " + theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat;
-        },
-        backgroundColor: function backgroundColor(_a) {
-          var isEnabled = _a.isEnabled;
-          return isEnabled ? theme.palette.geowebColors.buttons.primaryActive.fill : theme.palette.geowebColors.buttons.surfaceIconDefault.fill;
-        },
-        color: function color(_a) {
-          var isEnabled = _a.isEnabled;
-          return isEnabled ? theme.palette.geowebColors.typographyAndIcons.buttonIcon : theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat;
-        },
-        "float": 'left',
-        whiteSpace: 'nowrap',
-        '&:hover': {
-          backgroundColor: function backgroundColor(_a) {
-            var isEnabled = _a.isEnabled;
-            return isEnabled ? theme.palette.geowebColors.buttons.primaryMouseover.fill : theme.palette.geowebColors.buttons.flatMouseover.fill;
-          },
-          border: function border(_a) {
-            var isEnabled = _a.isEnabled;
-            return isEnabled ? "solid 1px " + theme.palette.geowebColors.buttons.primaryMouseover.fill : "solid 1px " + 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(_a) {
     var _b = _a.all,
@@ -11657,20 +11884,18 @@
         service = _a.service,
         isEnabled = _a.isEnabled,
         toggleChip = _a.toggleChip;
-    var classes = useStyles$o({
-      isEnabled: isEnabled
-    });
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      role: "button",
+    return /*#__PURE__*/React__namespace.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');
   };
 
@@ -11755,7 +11980,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$n = makeStyles__default["default"](function (theme) {
+  var useStyles$o = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       serviceChips: {
         width: '100%',
@@ -11820,31 +12045,71 @@
         width = _c[0],
         setWidth = _c[1];
 
+    var _d = __read(React__namespace.useState(null), 2),
+        intervalId = _d[0],
+        setIntervalId = _d[1];
+
     var ref = React__namespace.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__namespace.useCallback(function () {
-      setMargin(Math.max(0, margin - 100));
-    }, [margin]);
-    var onRightArrowClick = React__namespace.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__namespace.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__namespace.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__namespace.createElement("div", {
       className: classes.serviceList,
-      "data-testid": "serviceList"
+      "data-testid": "serviceList",
+      onWheel: onMouseWheelScroll
     }, margin !== 0 && /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronLeft, {
       className: classes.scrollArrowLeft,
-      onClick: onLeftArrowClick,
+      onMouseDown: onLeftChevronPressed,
+      onMouseUp: onChevronMouseUp,
       "data-testid": "leftScrollArrow"
     }), /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.serviceChips,
@@ -11863,7 +12128,8 @@
       });
     })), layerSelectWidth + margin < width && /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronRight, {
       className: classes.scrollArrowRight,
-      onClick: onRightArrowClick,
+      onMouseDown: onRightChevronPressed,
+      onMouseUp: onChevronMouseUp,
       "data-testid": "rightScrollArrow"
     }));
   };
@@ -11900,6 +12166,202 @@
     });
   };
 
+  /* *
+   * 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 useStyles$n = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
+      servicesContainer: {
+        width: '300px',
+        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(_a) {
+    var services = _a.services,
+        mapStoreRemoveService = _a.mapStoreRemoveService,
+        _b = _a.layers,
+        layers = _b === void 0 ? [] : _b;
+    var classes = useStyles$n();
+
+    var _c = __read(React__namespace.useState(false), 2),
+        addServiceisOpen = _c[0],
+        setAddServiceIsOpen = _c[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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Box, {
+      className: classes.servicesContainer,
+      "data-testid": "ServiceDialog"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: classes.header
+    }, " Services"), /*#__PURE__*/React__namespace.createElement(material.List, {
+      disablePadding: true
+    }, services.map(function (service) {
+      return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
+        key: service.name
+      }, /*#__PURE__*/React__namespace.createElement(material.ListItemText, {
+        style: {
+          fontSize: '16px'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
+        noWrap: true,
+        style: {
+          textOverflow: 'ellipsis',
+          paddingRight: '60px'
+        }
+      }, service.name)), /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, {
+        style: {
+          marginRight: '-10px'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: "Edit Service"
+      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        "data-testid": "openEditServiceButton",
+        size: "large"
+      }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.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__namespace.createElement(material.Tooltip, {
+        title: "Delete Service"
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        size: "large",
+        disabled: isDisabled(service.service),
+        onClick: function onClick() {
+          return mapStoreRemoveService(service.service);
+        },
+        "data-testid": "removeServiceButton"
+      }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+      className: classes.footer
+    }, /*#__PURE__*/React__namespace.createElement(material.Button, {
+      onClick: openAddService,
+      "data-testid": "openAddServiceButton",
+      className: classes.button,
+      variant: "tertiary",
+      startIcon: /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
+        className: classes.icon
+      }, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.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__namespace.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 = reactRedux.useDispatch();
+    var allLayers = reactRedux.useSelector(function (store) {
+      return getAllLayers(store);
+    });
+    var mapStoreRemoveService$1 = React__namespace.useCallback(function (serviceUrl) {
+      dispatch(mapStoreRemoveService({
+        serviceUrl: serviceUrl
+      }));
+    }, [dispatch]);
+    var arrayOfServices = reactRedux.useSelector(function (store) {
+      return getServicesInArray(store);
+    });
+    return /*#__PURE__*/React__namespace.createElement(ServiceOptionsDialog, {
+      services: arrayOfServices,
+      layers: allLayers,
+      mapStoreRemoveService: mapStoreRemoveService$1
+    });
+  };
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -11919,8 +12381,6 @@
   var useStyles$m = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       servicesContainer: {
-        width: '300px',
-        height: '380px',
         position: 'fixed',
         top: '140px',
         right: '-72px',
@@ -11945,23 +12405,21 @@
       setContainerOpen(!containerOpen);
     };
 
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
       onClick: toggleContainer,
       active: containerOpen,
-      "data-testid": "serviceOptionsButton"
+      "data-testid": "serviceOptionsButton",
+      variant: "tool"
     }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg"
     }, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.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__namespace.createElement(material.Box, {
       className: classes.servicesContainer,
-      "data-testid": "container"
-    }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
-      className: classes.servicesText
-    }, "Services")) : null);
+      "data-testid": "ServiceOptionsDialogContainer"
+    }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsDialogConnect, null)) : null);
   };
 
   /* *
@@ -12072,40 +12530,6 @@
     })));
   };
 
-  /* *
-   * 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__default["default"](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'
-      }
-    };
-  })(material.Switch);
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -12156,56 +12580,184 @@
   });
 
   var FilterListItem = function FilterListItem(_a) {
-    var index = _a.index,
-        text = _a.text,
-        checked = _a.checked,
-        toggleCheckbox = _a.toggleCheckbox,
-        selectOnlyOne = _a.selectOnlyOne;
+    var keyword = _a.keyword,
+        toggleKeywords = _a.toggleKeywords,
+        enableOnlyOneKeyword = _a.enableOnlyOneKeyword;
     var classes = useStyles$k();
 
-    var _b = __read(React__namespace.useState(false), 2),
-        hovering = _b[0],
-        setHovering = _b[1];
+    var _b = __read(React__namespace.useState(false), 2),
+        hovering = _b[0],
+        setHovering = _b[1];
+
+    var handleMouseOver = React__namespace.useCallback(function () {
+      setHovering(true);
+    }, []);
+    var handleMouseLeave = React__namespace.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__namespace.createElement("div", {
+        onMouseOver: handleMouseOver,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleMouseOver,
+        onBlur: handleMouseLeave,
+        "data-testid": "filterResultListItem"
+      }, /*#__PURE__*/React__namespace.createElement(material.ListItem, {
+        className: classes.listItem
+      }, /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, {
+        className: classes.listItemIcon
+      }, /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
+        color: "secondary",
+        checked: keyword.checked,
+        onChange: function onChange() {
+          return toggleCheckbox(keyword.id);
+        },
+        className: classes.checkbox
+      })), /*#__PURE__*/React__namespace.createElement(material.Typography, {
+        variant: "body2",
+        className: classes.listItemText
+      }, keyword.id), hovering ? /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        style: {
+          backgroundColor: 'transparent'
+        },
+        edge: "end",
+        size: "small",
+        onClick: function onClick() {
+          return selectOnlyOne(keyword.id);
+        },
+        "data-testid": "onlyButton"
+      }, /*#__PURE__*/React__namespace.createElement(material.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(_a) {
+    var keyword = _a.keyword;
+    var dispatch = reactRedux.useDispatch();
+    var toggleKeywords$1 = React__namespace.useCallback(function (keywords) {
+      dispatch(toggleKeywords({
+        keywords: keywords
+      }));
+    }, [dispatch]);
+    var enableOnlyOneKeyword$1 = React__namespace.useCallback(function (keyword) {
+      dispatch(enableOnlyOneKeyword({
+        keyword: keyword
+      }));
+    }, [dispatch]);
+    var keywordObject = reactRedux.useSelector(function (store) {
+      return getKeywordObjectById(store, keyword);
+    });
+    return /*#__PURE__*/React__namespace.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__default["default"](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'
+      }
+    };
+  })(material.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 handleMouseOver = React__namespace.useCallback(function () {
-      setHovering(true);
-    }, []);
-    var handleMouseLeave = React__namespace.useCallback(function () {
-      setHovering(false);
-    }, []);
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      onMouseOver: handleMouseOver,
-      onMouseLeave: handleMouseLeave,
-      onFocus: handleMouseOver,
-      onBlur: handleMouseLeave,
-      "data-testid": "filterResultListItem"
-    }, /*#__PURE__*/React__namespace.createElement(material.ListItem, {
-      className: classes.listItem
-    }, /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, {
-      className: classes.listItemIcon
-    }, /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
-      color: "secondary",
-      checked: checked,
-      onChange: function onChange() {
-        return toggleCheckbox(index);
-      },
-      className: classes.checkbox
-    })), /*#__PURE__*/React__namespace.createElement(material.Typography, {
-      variant: "body2",
-      className: classes.listItemText
-    }, text), hovering ? /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
-      style: {
-        backgroundColor: 'transparent'
-      },
-      edge: "end",
-      size: "small",
-      onClick: function onClick() {
-        return selectOnlyOne(index);
-      },
-      "data-testid": "onlyButton"
-    }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
-      className: classes.onlyByttonText
-    }, "ONLY"))) : null));
+  var KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchConnect() {
+    var dispatch = reactRedux.useDispatch();
+    var allKeywordsActive = reactRedux.useSelector(function (store) {
+      return isAllKeywordsChecked(store);
+    });
+    var allKeywordIds = reactRedux.useSelector(function (store) {
+      return getAllKeywordIds(store);
+    });
+    var checkedKeywordIds = reactRedux.useSelector(function (store) {
+      return getCheckedKeywordIds(store);
+    });
+    var toggleKeywords$1 = React__namespace.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__namespace.createElement(CustomSwitch, {
+      checked: allKeywordsActive,
+      onChange: toggleKeywords$1,
+      "data-testid": "customSwitch"
+    });
   };
 
   /* *
@@ -12243,7 +12795,7 @@
   });
 
   var KeywordFilterResults = function KeywordFilterResults(_a) {
-    var keywordObjects = _a.keywordObjects,
+    var allKeywordIds = _a.allKeywordIds,
         mapId = _a.mapId,
         bounds = _a.bounds,
         _b = _a.onClose,
@@ -12255,52 +12807,8 @@
         _d = _a.order,
         order = _d === void 0 ? 0 : _d,
         _e = _a.source,
-        source = _e === void 0 ? 'module' : _e,
-        updateKeywords = _a.updateKeywords;
+        source = _e === void 0 ? 'module' : _e;
     var classes = useStyles$j();
-
-    var _f = __read(React__namespace.useState(true), 2),
-        allSelected = _f[0],
-        setAllSelected = _f[1];
-
-    var toggleSelectAll = function toggleSelectAll() {
-      var editedKeywords = keywordObjects.map(function (object) {
-        return __assign(__assign({}, object), {
-          checked: !allSelected
-        });
-      });
-      setAllSelected(!allSelected);
-      updateKeywords(editedKeywords);
-    };
-
-    var toggleCheckbox = function toggleCheckbox(listIndex) {
-      var editedKeywords = keywordObjects.map(function (object, index) {
-        return listIndex === index ? __assign(__assign({}, object), {
-          checked: !object.checked
-        }) : object;
-      });
-      updateKeywords(editedKeywords);
-    };
-
-    var selectOnlyOne = function selectOnlyOne(listIndex) {
-      var editedKeywords = keywordObjects.map(function (object, index) {
-        return listIndex === index ? __assign(__assign({}, object), {
-          checked: true
-        }) : __assign(__assign({}, object), {
-          checked: false
-        });
-      });
-      updateKeywords(editedKeywords);
-    }; // If even one checkbox is unchecked, switch toggleAll off
-    // If all checkboxes becomes checked, switch toggleAll on
-
-
-    React__namespace.useEffect(function () {
-      var checked = keywordObjects.every(function (object) {
-        return object.checked === true;
-      });
-      setAllSelected(checked);
-    }, [keywordObjects]);
     return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
       title: showTitle ? "Filter Results " + mapId : 'Filter Results',
       "data-testid": "keywordFilterResults",
@@ -12338,27 +12846,15 @@
       justifyContent: "flex-end",
       alignContent: "center",
       className: classes["switch"]
-    }, /*#__PURE__*/React__namespace.createElement(CustomSwitch, {
-      checked: allSelected,
-      onChange: toggleSelectAll,
-      "data-testid": "customSwitch"
-    }))), /*#__PURE__*/React__namespace.createElement(material.List, {
+    }, /*#__PURE__*/React__namespace.createElement(KeywordFilterSelectAllSwitchConnect, null))), /*#__PURE__*/React__namespace.createElement(material.List, {
       dense: true,
       style: {
         padding: '0px'
       }
-    }, keywordObjects.map(function (_a, index) {
-      var id = _a.id,
-          checked = _a.checked,
-          amountVisible = _a.amountVisible;
-      if (amountVisible === 0) return null;
-      return /*#__PURE__*/React__namespace.createElement(FilterListItem, {
-        key: id + "-" + index,
-        index: index,
-        text: id,
-        checked: checked,
-        toggleCheckbox: toggleCheckbox,
-        selectOnlyOne: selectOnlyOne
+    }, allKeywordIds.map(function (keywordId) {
+      return /*#__PURE__*/React__namespace.createElement(KeywordFilterResultsListItemConnect, {
+        key: keywordId,
+        keyword: keywordId
       });
     })));
   };
@@ -12408,12 +12904,7 @@
     });
     var uiIsOrderedOnTop = reactRedux.useSelector(function (store) {
       return getDialogIsOrderedOnTop(store, 'keywordFilter');
-    });
-    var updateKeywords$1 = React__namespace.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__namespace.useEffect(function () {
       if (mapId !== '' && !isMapPresent) {
@@ -12445,11 +12936,11 @@
         unregisterDialog$1();
       }; // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var keywords = reactRedux.useSelector(function (store) {
-      return getKeywords(store);
+    var allKeywordIds = reactRedux.useSelector(function (store) {
+      return getAllKeywordIds(store);
     });
     return /*#__PURE__*/React__namespace.createElement(KeywordFilterResults, {
-      keywordObjects: keywords,
+      allKeywordIds: allKeywordIds,
       mapId: mapId,
       bounds: bounds,
       isOpen: isOpenInStore,
@@ -12457,8 +12948,7 @@
       showTitle: showTitle,
       onMouseDown: onOrderDialog,
       order: uiOrder,
-      source: uiSource,
-      updateKeywords: updateKeywords$1
+      source: uiSource
     });
   };
 
@@ -12708,7 +13198,6 @@
    * 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,
@@ -12720,14 +13209,10 @@
         isActive = _c === void 0 ? false : _c,
         props = __rest(_a, ["onClick", "children", "title", "placement", "isActive"]);
 
-    var classes = useButtonStyles({
-      width: width
-    });
-    return /*#__PURE__*/React__namespace.createElement(ToggleIconButton, __assign({
+    return /*#__PURE__*/React__namespace.createElement(ToolButton, __assign({
       onClick: onClick,
       active: isActive
     }, props), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-      className: classes.button,
       placement: placement,
       title: title
     }, children));
@@ -13635,7 +14120,7 @@
       title: autoUpdateButton.title
     }, /*#__PURE__*/React__namespace.createElement("span", {
       "data-testid": "autoUpdateButtonTooltip"
-    }, /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
+    }, /*#__PURE__*/React__namespace.createElement(ToolButton, {
       active: isAutoUpdating,
       disabled: disabled,
       onClick: function onClick() {
@@ -13699,7 +14184,7 @@
     var loopButtonPath = isLooping ? svgLoopOffPath : svgLoopPath;
     return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: loopButtonPath.title
-    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
+    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
       onClick: function onClick() {
         return onToggleLoop();
       },
@@ -13811,7 +14296,7 @@
       className: classes.speedButtonDiv
     }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: "Speed"
-    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
+    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
       onClick: onClickButton,
       active: true,
       "data-testid": "speedButton"
@@ -14103,11 +14588,11 @@
       className: classes.timeStepDiv
     }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: "Time step"
-    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
+    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
       active: true,
       onClick: onClickButton,
       "data-testid": "timeStepButton",
-      width: 58
+      width: "58px"
     }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.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"
@@ -14209,7 +14694,7 @@
     var id = open ? 'simple-popover' : undefined;
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: "Options"
-    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
+    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
       onClick: onClickButton,
       "data-testid": "optionsMenuButton",
       active: open
@@ -14298,7 +14783,7 @@
     var playButtonPath = isAnimating ? pausePath : playPath;
     return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: playButtonPath.title
-    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
+    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
       onClick: onTogglePlay,
       disabled: isDisabled,
       "data-testid": "playButton",
@@ -17147,17 +17632,232 @@
       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 = reactRedux.connect(function (store, props) {
+    return {
+      isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId)
+    };
+  }, {
+    toggleTimeSliderHover: toggleTimeSliderHover
+  });
+
+  var ConnectedTimeSlider = function ConnectedTimeSlider(_a) {
+    var sourceId = _a.sourceId,
+        mapId = _a.mapId,
+        isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
+        toggleTimeSliderHover = _a.toggleTimeSliderHover;
+    React__namespace.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__namespace.createElement(TimeSlider, {
+      buttons: /*#__PURE__*/React__namespace.createElement(TimeSliderButtonsConnect, {
+        mapId: mapId
+      }),
+      rail: /*#__PURE__*/React__namespace.createElement(TimeSliderRailConnect, {
+        mapId: mapId,
+        sourceId: sourceId
+      }),
+      scaleSlider: /*#__PURE__*/React__namespace.createElement(TimeSliderScaleSliderConnect, {
+        mapId: mapId
+      }),
+      legend: /*#__PURE__*/React__namespace.createElement(TimeSliderLegendConnect$1, {
+        mapId: mapId,
+        sourceId: sourceId
+      })
+    });
+  };
+  /**
+   * 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");
@@ -17172,66 +17872,390 @@
    * 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 = reactRedux.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(_a) {
-    var sourceId = _a.sourceId,
-        mapId = _a.mapId,
-        isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
-        toggleTimeSliderHover = _a.toggleTimeSliderHover;
-    React__namespace.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__namespace.createElement(TimeSlider, {
-      buttons: /*#__PURE__*/React__namespace.createElement(TimeSliderButtonsConnect, {
-        mapId: mapId
-      }),
-      rail: /*#__PURE__*/React__namespace.createElement(TimeSliderRailConnect, {
-        mapId: mapId,
-        sourceId: sourceId
-      }),
-      scaleSlider: /*#__PURE__*/React__namespace.createElement(TimeSliderScaleSliderConnect, {
-        mapId: mapId
-      }),
-      legend: /*#__PURE__*/React__namespace.createElement(TimeSliderLegendConnect$1, {
-        mapId: mapId,
-        sourceId: sourceId
-      })
-    });
   };
-  /**
-   * 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");
@@ -21505,10 +22529,10 @@
   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(_a) {
@@ -21600,6 +22624,14 @@
             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
 
@@ -21662,93 +22694,35 @@
       }
     };
   });
-
-  var makeIndexedMapId = function makeIndexedMapId(baseId, mapNo) {
-    return baseId + "_" + mapNo;
-  };
-
   var MultiMapViewConnect = function MultiMapViewConnect(_a) {
     var maps = _a.maps,
         rows = _a.rows,
         cols = _a.cols,
-        _b = _a.syncArea,
-        syncArea = _b === void 0 ? true : _b,
-        _c = _a.syncTime,
-        syncTime = _c === void 0 ? true : _c,
-        _d = _a.showTimeSlider,
-        showTimeSlider = _d === void 0 ? true : _d,
-        _e = _a.showZoomControls,
-        showZoomControls = _e === void 0 ? true : _e;
-    var id = React__default["default"].useRef(generateMapId()).current;
+        _b = _a.showTimeSlider,
+        showTimeSlider = _b === void 0 ? true : _b,
+        _c = _a.showZoomControls,
+        showZoomControls = _c === void 0 ? true : _c;
     var classes = useStyles$3();
     var dispatch = reactRedux.useDispatch();
-    var syncGroupAddGroup$1 = React__default["default"].useCallback(function (payload) {
-      return dispatch(syncGroupAddGroup(payload));
-    }, [dispatch]);
     var syncGroupAddTarget$1 = React__default["default"].useCallback(function (payload) {
       return dispatch(syncGroupAddTarget(payload));
     }, [dispatch]);
     React__default["default"].useEffect(function () {
-      /* Add sync groups */
-      syncGroupAddGroup$1({
-        groupId: "Time_" + id,
-        title: "Time group for " + id,
-        type: SYNCGROUPS_TYPE_SETTIME
-      });
-      syncGroupAddGroup$1({
-        groupId: "Area_" + id,
-        title: "Area group for " + id,
-        type: SYNCGROUPS_TYPE_SETBBOX
-      });
-      /* Add this target to the group for area and time */
-
-      syncGroupAddTarget$1({
-        groupId: "Time_" + id,
-        targetId: id,
-        linked: syncTime
-      });
-      syncGroupAddTarget$1({
-        groupId: "Area_" + 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_" + id,
-          targetId: makeIndexedMapId(id, mapIndex),
-          linked: syncTime
-        });
-        syncGroupAddTarget$1({
-          groupId: "Area_" + 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 " + 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: Math.round(100 / cols) + "%",
       height: Math.round(100 / rows) + "%"
     };
-    var firstMapId = makeIndexedMapId(id, 0);
+    var firstMapId = maps[0].id;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         height: '100%',
@@ -21768,10 +22742,10 @@
         width: '100%'
       }
     }, showTimeSlider && /*#__PURE__*/React__default["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["default"].createElement("div", {
         className: classes.box,
         key: mapId,
@@ -21827,9 +22801,11 @@
   /* 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__default["default"].utc(referenceTime).add(timeIncrement, 'h').format('YYYY-MM-DDTHH:mm:ss[Z]');
     return {
+      id: uniqueId,
+      syncGroupsIds: syncGroupsIds,
       title: "FC +" + timeIncrement,
       displayTimeInMap: true,
       bbox: {
@@ -21852,14 +22828,13 @@
         });
       }),
       displayLayerManagerButtonInMap: displayLayerManagerButtonInMap,
-      displayDimensionSelectButtonInMap: displayDimensionSelectButtonInMap,
-      layerSyncGroupId: layerSyncGroupId
+      displayDimensionSelectButtonInMap: displayDimensionSelectButtonInMap
     };
   };
   var HarmRefTimePreset = function HarmRefTimePreset(_a) {
     var _b = _a.layers,
         layers = _b === void 0 ? [harmoniePressure, harmonieWindFlags, harmoniePrecipitation] : _b,
-        layerSyncGroupId = _a.layerSyncGroupId;
+        syncGroupsIds = _a.syncGroupsIds;
     /* Get latest reference time for this layer */
 
     var latestReferenceTime = useGetLatestReferenceTime(layers[0]);
@@ -21870,7 +22845,7 @@
     /* Add the layers with the different map times */
 
     var maps = timeIncrements.map(function (increment, index) {
-      return makeMapPreset(increment, "harm_precip" + increment, latestReferenceTime, layers, layerSyncGroupId, index === 0 || !layerSyncGroupId, index === 0 || !layerSyncGroupId);
+      return makeMapPreset(increment, "harm_precip" + increment, latestReferenceTime, layers, syncGroupsIds, index === 0 || !syncGroupsIds, index === 0 || !syncGroupsIds);
     });
     return /*#__PURE__*/React__namespace.createElement(MultiMapViewConnect, {
       rows: 3,
@@ -21926,13 +22901,21 @@
     var layers = _a.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__namespace.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 " + ("" + referenceTime.substring(8, 13).replace('T', ' / ')),
+        bbox: {
+          left: -450651.2255879827,
+          bottom: 6490531.093143953,
+          right: 1428345.8183648037,
+          top: 7438773.776232235
+        },
+        srs: 'EPSG:3857',
         layers: [__assign(__assign({}, layer), {
           id: uniqueId,
           dimensions: [{
@@ -21940,9 +22923,9 @@
             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 */
@@ -21953,14 +22936,14 @@
 
     var mapsTemperature = __spreadArray([], __read(Array(nCols))).map(function (_, index) {
       var refTime = referenceTimes[referenceTimes.length - nCols + index];
-      return makeMapPreset(refTime, "harm_air" + index, layers.toprow, layers.toprowGroup, index);
+      return makeMapPreset(refTime, "harm_air" + index, layers.topRow, layers.topRowSyncGroups, index);
     });
     /* Add the harmonie precipitation layers with the different referencetimes */
 
 
     var mapsPrecipitation = __spreadArray([], __read(Array(nCols))).map(function (_, index) {
       var refTime = referenceTimes[referenceTimes.length - nCols + index];
-      return makeMapPreset(refTime, "harm_precip" + index, layers.bottomrow, layers.bottomrowGroup, index);
+      return makeMapPreset(refTime, "harm_precip" + index, layers.bottomRow, layers.bottomRowSyncGroups, index);
     });
 
     var maps = mapsTemperature.concat(mapsPrecipitation);
@@ -22113,10 +23096,10 @@
         {
           var _c = initialProps,
               layers = _c.layers,
-              layerSyncGroupId = _c.layerSyncGroupId;
+              syncGroupsIds = _c.syncGroupsIds;
           return /*#__PURE__*/React__default["default"].createElement(HarmRefTimePreset, {
             layers: layers || [],
-            layerSyncGroupId: layerSyncGroupId,
+            syncGroupsIds: syncGroupsIds,
             "data-testid": "coreHarmonieRefTimePreset"
           });
         }
@@ -22125,7 +23108,8 @@
         {
           var _d = initialProps,
               mapPreset_1 = _d.mapPreset,
-              shouldShowZoomControls = _d.shouldShowZoomControls;
+              shouldShowZoomControls = _d.shouldShowZoomControls,
+              syncGroupsIds_1 = _d.syncGroupsIds;
           if (!mapPreset_1 || mapPreset_1.length === 0) return null;
           return /*#__PURE__*/React__default["default"].createElement(MultiMapViewConnect, {
             rows: 2,
@@ -22134,6 +23118,7 @@
             maps: mapPreset_1.map(function (p, i) {
               return {
                 id: id + "_" + i,
+                syncGroupsIds: syncGroupsIds_1,
                 layers: p.layers || [],
                 activeLayerId: p.activeLayerId || undefined,
                 baseLayer: p.baseLayer || undefined,
@@ -22528,9 +23513,7 @@
       });
     };
 
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      "data-testid": "syncGroupViewer"
-    }, /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
+    return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
       title: "Sync",
       startSize: {
         width: 349,
@@ -22538,7 +23521,8 @@
       },
       headerSize: "medium",
       isOpen: isOpen,
-      onClose: onClose
+      onClose: onClose,
+      "data-testid": "syncGroupViewer"
     }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(SyncGroupList, {
       viewStateData: syncGroupViewState.zoompane,
       title: "ZoomPane",
@@ -22575,7 +23559,7 @@
       removeGroup: function removeGroup(groupId) {
         return _removeGroup('level', groupId);
       }
-    }))));
+    })));
   };
 
   /* *
@@ -22843,11 +23827,19 @@
   exports.coreModuleConfig = coreModuleConfig;
   exports.dateFormat = dateFormat;
   exports.defaultConfigurations = defaultConfigurations;
+  exports.filterBaseLayers = filterBaseLayers;
+  exports.filterBbox = filterBbox;
+  exports.filterDimensions = filterDimensions;
+  exports.filterMapLayers = filterMapLayers;
+  exports.filterMapPresets = filterMapPresets;
   exports.filterNonTimeDimensions = filterNonTimeDimensions;
+  exports.filterServices = filterServices;
+  exports.filterSrs = filterSrs;
   exports.generateLayerId = generateLayerId;
   exports.generateMapId = generateMapId;
   exports.generateTimesliderId = generateTimesliderId;
   exports.getFirstTimeStepForLayerId = getFirstTimeStepForLayerId;
+  exports.getInitialPresets = getInitialPresets;
   exports.getLastTimeStepForLayerId = getLastTimeStepForLayerId;
   exports.getNextTimeStepForLayerId = getNextTimeStepForLayerId;
   exports.getPreviousTimeStepForLayerId = getPreviousTimeStepForLayerId;