@opengeoweb/core 2.3.0 → 2.5.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  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';
+  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('react-redux'), require('@mui/styles/makeStyles'), 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('@turf/turf'), 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', 'react-redux', '@mui/styles/makeStyles', '@opengeoweb/shared', '@mui/icons-material', 'react-sortablejs', '@mui/styles/createStyles', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', '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.reactRedux, global.makeStyles, global.shared, global.iconsMaterial, global.reactSortablejs, global.createStyles, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga, global.theme));
+})(this, (function (exports, reselect, moment, _, React, produce, effects, webmap, material, reactRedux, makeStyles, shared, iconsMaterial, reactSortablejs, createStyles, withStyles, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga, theme) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,6 +34,7 @@
   var withStyles__default = /*#__PURE__*/_interopDefaultLegacy(withStyles);
   var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
   var proj4__default = /*#__PURE__*/_interopDefaultLegacy(proj4);
+  var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1307,6 +1308,103 @@
     return [];
   }, selectorMemoizationOptions);
 
+  /* *
+   * 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)
+   * */
+
+  /* Action constants for sources */
+  var SYNCGROUPS_ADD_SOURCE = 'SYNCGROUPS_ADD_SOURCE';
+  var SYNCGROUPS_REMOVE_SOURCE = 'SYNCGROUPS_REMOVE_SOURCE';
+  /* Action constants for groups */
+
+  var SYNCGROUPS_TOGGLE_LINK_TARGET = 'SYNCGROUPS_TOGGLE_LINK_TARGET';
+  var SYNCGROUPS_ADD_TARGET = 'SYNCGROUPS_ADD_TARGET';
+  var SYNCGROUPS_REMOVE_TARGET = 'SYNCGROUPS_REMOVE_TARGET';
+  var SYNCGROUPS_ADD_GROUP = 'SYNCGROUPS_ADD_GROUP';
+  var SYNCGROUPS_REMOVE_GROUP = 'SYNCGROUPS_REMOVE_GROUP';
+  var SYNCGROUPS_CLEAR = 'SYNCGROUPS_CLEAR';
+  /* Type constants */
+
+  var SYNCGROUPS_TYPE_SETTIME = 'SYNCGROUPS_TYPE_SETTIME';
+  var SYNCGROUPS_TYPE_SETBBOX = 'SYNCGROUPS_TYPE_SETBBOX';
+  var SYNCGROUPS_TYPE_SETLAYERACTIONS = 'SYNCGROUPS_TYPE_SETLAYERACTIONS';
+  var SYNCGROUPS_SET_VIEW_STATE = 'SYNCGROUPS_SET_VIEW_STATE';
+
+  var constants$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SYNCGROUPS_ADD_SOURCE: SYNCGROUPS_ADD_SOURCE,
+    SYNCGROUPS_REMOVE_SOURCE: SYNCGROUPS_REMOVE_SOURCE,
+    SYNCGROUPS_TOGGLE_LINK_TARGET: SYNCGROUPS_TOGGLE_LINK_TARGET,
+    SYNCGROUPS_ADD_TARGET: SYNCGROUPS_ADD_TARGET,
+    SYNCGROUPS_REMOVE_TARGET: SYNCGROUPS_REMOVE_TARGET,
+    SYNCGROUPS_ADD_GROUP: SYNCGROUPS_ADD_GROUP,
+    SYNCGROUPS_REMOVE_GROUP: SYNCGROUPS_REMOVE_GROUP,
+    SYNCGROUPS_CLEAR: SYNCGROUPS_CLEAR,
+    SYNCGROUPS_TYPE_SETTIME: SYNCGROUPS_TYPE_SETTIME,
+    SYNCGROUPS_TYPE_SETBBOX: SYNCGROUPS_TYPE_SETBBOX,
+    SYNCGROUPS_TYPE_SETLAYERACTIONS: SYNCGROUPS_TYPE_SETLAYERACTIONS,
+    SYNCGROUPS_SET_VIEW_STATE: SYNCGROUPS_SET_VIEW_STATE
+  });
+
+  /* *
+   * 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 synchronizationGroupStore = function synchronizationGroupStore(store) {
+    return store && store.syncronizationGroupStore ? store.syncronizationGroupStore : null;
+  };
+
+  var getSynchronizationGroupStore = reselect.createSelector(synchronizationGroupStore, function (store) {
+    return store;
+  });
+  /**
+   * Returns the synchronization source by id
+   * @param store The app store
+   * @param id The source id to find
+   */
+
+  var getSyncSourceBySourceId = function getSyncSourceBySourceId(state, id) {
+    if (state && state.sources) {
+      var sources = state.sources;
+
+      if (sources.byId[id]) {
+        return sources.byId[id];
+      }
+    }
+
+    return null;
+  };
+
+  var getTime = reselect.createSelector(getSyncSourceBySourceId, function (store) {
+    return store && store.payloadByType && store.payloadByType[SYNCGROUPS_TYPE_SETTIME] ? store.payloadByType[SYNCGROUPS_TYPE_SETTIME].value : null;
+  });
+
   /*! *****************************************************************************
   Copyright (c) Microsoft Corporation.
 
@@ -2248,6 +2346,34 @@
   var isAnimating = reselect.createSelector(getMapById, function (store) {
     return store ? store.isAnimating : false;
   });
+  /**
+   * Gets if any linked map is animating
+   *
+   * Example: linkedMapIsAnimating = linkedMapAnimationInfo(store, 'mapid_1')
+   * @param {object} store store: object - store object
+   * @param {string} mapId mapId: string - Id of the map
+   * @returns {object} returnType: object - object containing isAnimating boolean and id string
+   */
+
+  var linkedMapAnimationInfo = reselect.createSelector(function (store, mapId) {
+    var animationInfo = {
+      isAnimating: isAnimating(store, mapId),
+      id: mapId
+    };
+    getSynchronizationGroupStore(store).groups.allIds.forEach(function (groupId) {
+      if (getSynchronizationGroupStore(store).groups.byId[groupId].targets.byId[animationInfo.id] && getSynchronizationGroupStore(store).groups.byId[groupId].targets.byId[animationInfo.id].linked) {
+        getSynchronizationGroupStore(store).groups.byId[groupId].targets.allIds.forEach(function (id) {
+          if (isAnimating(store, id) === true) {
+            animationInfo.isAnimating = true;
+            animationInfo.id = id;
+          }
+        });
+      }
+    });
+    return animationInfo;
+  }, function (animationInfo) {
+    return animationInfo;
+  });
   /**
    * Gets start time of animation
    *
@@ -2707,6 +2833,7 @@
     getSrs: getSrs,
     getBbox: getBbox,
     isAnimating: isAnimating,
+    linkedMapAnimationInfo: linkedMapAnimationInfo,
     getAnimationStartTime: getAnimationStartTime,
     getAnimationEndTime: getAnimationEndTime,
     isAutoUpdating: isAutoUpdating,
@@ -2772,7 +2899,7 @@
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
 
-  var constants$1 = /*#__PURE__*/Object.freeze({
+  var constants = /*#__PURE__*/Object.freeze({
     __proto__: null,
     WEBMAP_REGISTER_MAP: WEBMAP_REGISTER_MAP,
     WEBMAP_UNREGISTER_MAP: WEBMAP_UNREGISTER_MAP,
@@ -3094,55 +3221,6 @@
   var GENERIC_SETTIME = 'GENERIC_SETTIME';
   var GENERIC_SETBBOX = 'GENERIC_SETBBOX';
 
-  /* *
-   * 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)
-   * */
-
-  /* Action constants for sources */
-  var SYNCGROUPS_ADD_SOURCE = 'SYNCGROUPS_ADD_SOURCE';
-  var SYNCGROUPS_REMOVE_SOURCE = 'SYNCGROUPS_REMOVE_SOURCE';
-  /* Action constants for groups */
-
-  var SYNCGROUPS_TOGGLE_LINK_TARGET = 'SYNCGROUPS_TOGGLE_LINK_TARGET';
-  var SYNCGROUPS_ADD_TARGET = 'SYNCGROUPS_ADD_TARGET';
-  var SYNCGROUPS_REMOVE_TARGET = 'SYNCGROUPS_REMOVE_TARGET';
-  var SYNCGROUPS_ADD_GROUP = 'SYNCGROUPS_ADD_GROUP';
-  var SYNCGROUPS_REMOVE_GROUP = 'SYNCGROUPS_REMOVE_GROUP';
-  var SYNCGROUPS_CLEAR = 'SYNCGROUPS_CLEAR';
-  /* Type constants */
-
-  var SYNCGROUPS_TYPE_SETTIME = 'SYNCGROUPS_TYPE_SETTIME';
-  var SYNCGROUPS_TYPE_SETBBOX = 'SYNCGROUPS_TYPE_SETBBOX';
-  var SYNCGROUPS_TYPE_SETLAYERACTIONS = 'SYNCGROUPS_TYPE_SETLAYERACTIONS';
-
-  var constants = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    SYNCGROUPS_ADD_SOURCE: SYNCGROUPS_ADD_SOURCE,
-    SYNCGROUPS_REMOVE_SOURCE: SYNCGROUPS_REMOVE_SOURCE,
-    SYNCGROUPS_TOGGLE_LINK_TARGET: SYNCGROUPS_TOGGLE_LINK_TARGET,
-    SYNCGROUPS_ADD_TARGET: SYNCGROUPS_ADD_TARGET,
-    SYNCGROUPS_REMOVE_TARGET: SYNCGROUPS_REMOVE_TARGET,
-    SYNCGROUPS_ADD_GROUP: SYNCGROUPS_ADD_GROUP,
-    SYNCGROUPS_REMOVE_GROUP: SYNCGROUPS_REMOVE_GROUP,
-    SYNCGROUPS_CLEAR: SYNCGROUPS_CLEAR,
-    SYNCGROUPS_TYPE_SETTIME: SYNCGROUPS_TYPE_SETTIME,
-    SYNCGROUPS_TYPE_SETBBOX: SYNCGROUPS_TYPE_SETBBOX,
-    SYNCGROUPS_TYPE_SETLAYERACTIONS: SYNCGROUPS_TYPE_SETLAYERACTIONS
-  });
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -3288,6 +3366,12 @@
       type: SYNCGROUPS_CLEAR
     };
   };
+  var syncGroupSetViewState = function syncGroupSetViewState(payload) {
+    return {
+      type: SYNCGROUPS_SET_VIEW_STATE,
+      payload: payload
+    };
+  };
 
   var actions$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -3298,7 +3382,8 @@
     syncGroupLinkTarget: syncGroupLinkTarget,
     syncGroupAddGroup: syncGroupAddGroup,
     syncGroupRemoveGroup: syncGroupRemoveGroup,
-    syncGroupClear: syncGroupClear
+    syncGroupClear: syncGroupClear,
+    syncGroupSetViewState: syncGroupSetViewState
   });
 
   /* *
@@ -3368,7 +3453,8 @@
     syncGroupLinkTarget: syncGroupLinkTarget,
     syncGroupAddGroup: syncGroupAddGroup,
     syncGroupRemoveGroup: syncGroupRemoveGroup,
-    syncGroupClear: syncGroupClear
+    syncGroupClear: syncGroupClear,
+    syncGroupSetViewState: syncGroupSetViewState
   });
 
   /* *
@@ -3984,6 +4070,20 @@
     groups: {
       byId: {},
       allIds: []
+    },
+    viewState: {
+      timeslider: {
+        groups: [],
+        sourcesById: []
+      },
+      zoompane: {
+        groups: [],
+        sourcesById: []
+      },
+      level: {
+        groups: [],
+        sourcesById: []
+      }
     }
   };
   var reducer$4 = function reducer(state, action) {
@@ -4204,6 +4304,12 @@
       case SYNCGROUPS_CLEAR:
         return initialState$4;
 
+      case SYNCGROUPS_SET_VIEW_STATE:
+        return produce__default["default"](state, function (draft) {
+          var viewState = action.payload.viewState;
+          draft.viewState = viewState;
+        });
+
       default:
         return state;
     }
@@ -4317,6 +4423,9 @@
     }, []);
     return groups;
   };
+  var syncGroupGetViewState = reselect.createSelector(syncGroupStore, function (store) {
+    return store.viewState;
+  });
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4625,7 +4734,8 @@
           id: wmLayer.service,
           name: wmLayer.title,
           service: wmLayer.service,
-          layers: layers
+          layers: layers,
+          isUserAddedService: false
         },
         layerStyle: {
           origin: origin,
@@ -5081,6 +5191,105 @@
     });
   }
 
+  /* *
+   * 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 emptyState = {
+    timeslider: {
+      groups: [],
+      sourcesById: []
+    },
+    zoompane: {
+      groups: [],
+      sourcesById: []
+    },
+    level: {
+      groups: [],
+      sourcesById: []
+    }
+  };
+  var groupTypes = [{
+    title: 'Timeslider',
+    syncType: 'SYNCGROUPS_TYPE_SETTIME',
+    groupType: 'timeslider'
+  }, {
+    title: 'Zoompane',
+    syncType: 'SYNCGROUPS_TYPE_SETBBOX',
+    groupType: 'zoompane'
+  }];
+  /*
+      _____ Creates viewState  _____
+        - Runs Each time viewState is created:
+        - Fill arrays inside initialState with objects containing new values from Redux
+  */
+
+  var createSyncGroupViewState = function createSyncGroupViewState(groups, sources) {
+    var initialState = produce__default["default"](emptyState, function (draft) {
+      /*
+        _____ 1. Fill groups _____
+          1. Goes through all groups by ID
+          2. Collects original timeslider or zoompane values into an array
+          3. Sorts and adds selected sources to ViewState based on ID type
+      */
+      Object.keys(groups.byId).forEach(function (id) {
+        var _a;
+
+        var groupType = (_a = groupTypes.find(function (object) {
+          return object.syncType === groups.byId[id].type;
+        })) === null || _a === void 0 ? void 0 : _a.groupType;
+
+        if (groupType) {
+          draft[groupType].groups.push({
+            id: id,
+            selected: groups.byId[id].targets.allIds
+          });
+        }
+      });
+      /*
+        _____ 2. Fill sourcesById _____
+          1. Loop though sources and add source to each group type
+      */
+
+      Object.keys(sources.byId).forEach(function (id) {
+        groupTypes.forEach(function (_a) {
+          var syncType = _a.syncType,
+              groupType = _a.groupType;
+
+          if (sources.byId[id].types.includes(syncType)) {
+            draft[groupType].sourcesById.push({
+              id: id,
+              name: id
+            });
+          }
+        });
+      });
+    });
+    return initialState;
+  };
+
+  var groups = function groups(store) {
+    return store.syncronizationGroupStore.groups;
+  };
+
+  var sources = function sources(store) {
+    return store.syncronizationGroupStore.sources;
+  };
+
+  var createSyncGroupViewStateSelector = reselect.createSelector(groups, sources, createSyncGroupViewState);
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -5230,7 +5439,33 @@
       }
     });
   }
-
+  function updateViewStateSaga() {
+    var viewState;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          return [4
+          /*yield*/
+          , effects.select(createSyncGroupViewStateSelector)];
+
+        case 1:
+          viewState = _a.sent();
+          return [4
+          /*yield*/
+          , effects.put(syncGroupSetViewState({
+            viewState: viewState
+          }))];
+
+        case 2:
+          _a.sent();
+
+          return [2
+          /*return*/
+          ];
+      }
+    });
+  }
+
   function rootSaga$3() {
     return __generator(this, function (_a) {
       switch (_a.label) {
@@ -5249,6 +5484,55 @@
         case 2:
           _a.sent();
 
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_ADD_GROUP, updateViewStateSaga)];
+
+        case 3:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_REMOVE_GROUP, updateViewStateSaga)];
+
+        case 4:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_ADD_SOURCE, updateViewStateSaga)];
+
+        case 5:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_REMOVE_SOURCE, updateViewStateSaga)];
+
+        case 6:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_ADD_TARGET, updateViewStateSaga)];
+
+        case 7:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_REMOVE_TARGET, updateViewStateSaga)];
+
+        case 8:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_TOGGLE_LINK_TARGET, updateViewStateSaga)];
+
+        case 9:
+          _a.sent();
+
           return [2
           /*return*/
           ];
@@ -5296,40 +5580,6 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$B = makeStyles__default["default"](function (theme) {
-    return {
-      select: {
-        '& ul': {
-          backgroundColor: theme.palette.geowebColors.background.surface
-        },
-        '& li': {
-          fontSize: 16,
-          padding: 12,
-          '&:hover': {
-            backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
-          },
-          '&.Mui-selected': {
-            color: theme.palette.common.white,
-            backgroundColor: theme.palette.geowebColors.buttons.primary.active.fill,
-            boxShadow: "none",
-            '&:hover': {
-              color: theme.palette.common.white,
-              backgroundColor: theme.palette.geowebColors.buttons.primary.mouseOver.fill
-            }
-          },
-          '&:after': {
-            background: 'none!important'
-          },
-          // (optional) header
-          '&.Mui-disabled': {
-            fontSize: 12,
-            opacity: 0.67,
-            padding: '0 12px'
-          }
-        }
-      }
-    };
-  });
 
   var TooltipSelect = function TooltipSelect(_a) {
     var tooltip = _a.tooltip,
@@ -5354,8 +5604,6 @@
         tooltipOpen = _g[0],
         setTooltipOpen = _g[1];
 
-    var classes = useStyles$B();
-
     var preventDefault = function preventDefault(event) {
       event.preventDefault();
       event.stopPropagation();
@@ -5420,8 +5668,46 @@
       onBlur: onBlur,
       onWheel: onWheel,
       MenuProps: {
-        classes: {
-          paper: classes.select
+        BackdropProps: {
+          sx: {
+            '&.MuiBackdrop-root': {
+              backgroundColor: 'transparent'
+            }
+          }
+        },
+        sx: {
+          '& ul': {
+            backgroundColor: 'geowebColors.background.surface'
+          },
+          '& li': {
+            fontSize: '16px',
+            padding: '12px',
+            '&:hover': {
+              backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+            },
+            '&.Mui-selected': {
+              color: 'geowebColors.buttons.tool.active.color',
+              backgroundColor: 'geowebColors.buttons.tool.active.fill',
+              boxShadow: "none",
+              '&:hover': {
+                backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
+              },
+              '&:focus': {
+                backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
+              }
+            },
+            '&:after': {
+              background: 'none!important'
+            },
+            '&.Mui-disabled': {
+              fontSize: '12px',
+              opacity: 0.67,
+              padding: '0px 12px',
+              '&.MuiMenuItem-root': {
+                minHeight: '30px!important'
+              }
+            }
+          }
         }
       }
     }, otherProps)));
@@ -5470,7 +5756,7 @@
   var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     actions: actions$1,
-    constants: constants,
+    constants: constants$1,
     types: types,
     initialState: initialState$4
   });
@@ -6332,7 +6618,20 @@
       case GENERIC_SYNC_SETBBOX:
         {
           return produce.produce(state, function (draft) {
-            action.payload.targets.forEach(function (payload) {
+            var _a = action.payload,
+                targetsFromAction = _a.targets,
+                source = _a.source;
+            /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
+
+            var targets = [{
+              targetId: source.payload.sourceId,
+              bbox: source.payload.bbox,
+              srs: source.payload.srs
+            }];
+            /* And then append the targets form the action */
+
+            targets.push.apply(targets, __spreadArray([], __read(targetsFromAction)));
+            targets.forEach(function (payload) {
               var targetId = payload.targetId,
                   bbox = payload.bbox,
                   srs = payload.srs;
@@ -7377,6 +7676,39 @@
     };
   };
 
+  /* *
+   * 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 getUserAddedServices = function getUserAddedServices() {
+    try {
+      return JSON.parse(window.localStorage.getItem('userAddedServices')) || {};
+    } catch (e) {
+      console.error('Unable to read services from localStorage: ', e);
+    }
+
+    return {};
+  };
+  var setUserAddedServices = function setUserAddedServices(services) {
+    try {
+      window.localStorage.setItem('userAddedServices', JSON.stringify(services));
+    } catch (e) {
+      console.error('Unable to write services to localStorage: ', e);
+    }
+  };
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -7441,6 +7773,25 @@
       }
     });
   }
+  function addServiceToLocalStorageSaga(_a) {
+    var _b;
+
+    var payload = _a.payload;
+    var id = payload.id,
+        isUserAddedService = payload.isUserAddedService,
+        name = payload.name,
+        service = payload.service;
+    if (!isUserAddedService) return;
+    var localStorageServices = getUserAddedServices();
+    setUserAddedServices({
+      byId: __assign(__assign({}, localStorageServices.byId), (_b = {}, _b[service] = {
+        id: id,
+        name: name,
+        service: service
+      }, _b)),
+      allIds: __spreadArray([], __read(new Set(__spreadArray(__spreadArray([], __read(localStorageServices.allIds || [])), [service]))))
+    });
+  }
   function rootSaga() {
     return __generator(this, function (_a) {
       switch (_a.label) {
@@ -7459,6 +7810,13 @@
         case 2:
           _a.sent();
 
+          return [4
+          /*yield*/
+          , effects.takeEvery(MAP_SERVICES_SET_LAYERS, addServiceToLocalStorageSaga)];
+
+        case 3:
+          _a.sent();
+
           return [2
           /*return*/
           ];
@@ -8255,7 +8613,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$A = makeStyles__default["default"]({
+  var useStyles$w = makeStyles__default["default"]({
     buttonDiv: {
       position: 'relative'
     },
@@ -8291,7 +8649,7 @@
         handleClose = _a.handleClose,
         _e = _a.layerType,
         layerType = _e === void 0 ? LayerType.mapLayer : _e;
-    var classes = useStyles$A();
+    var classes = useStyles$w();
 
     var _f = __read(React__namespace.useState(''), 2),
         serviceURL = _f[0],
@@ -8455,7 +8813,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var styles = {
+  var styles$1 = {
     buttonDiv: {
       position: 'relative'
     },
@@ -8506,7 +8864,7 @@
       title: tooltip
     }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       onClick: handleClose,
-      sx: styles.button,
+      sx: styles$1.button,
       disableRipple: true,
       "data-testid": "addLayersButton",
       ref: ref,
@@ -8560,6 +8918,9 @@
     column6: {
       width: iconButtonSize * 2,
       display: 'inline-flex'
+    },
+    columns35: {
+      width: "calc((100% - " + iconButtonSize * totalButtons + "px) * 0.75)"
     }
   });
   var LayerManagerColumnsSmall = makeStyles__default["default"]({
@@ -8581,6 +8942,9 @@
     column6: {
       width: iconButtonSize * 2,
       display: 'inline-flex'
+    },
+    columns35: {
+      display: 'none'
     }
   });
   var LayerManagerWidth;
@@ -8665,7 +9029,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$z = makeStyles__default["default"]({
+  var useStyles$v = makeStyles__default["default"]({
     row: {
       height: '32px'
     },
@@ -8689,7 +9053,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _e = _a.layerSelect,
         layerSelect = _e === void 0 ? false : _e;
-    var classes = useStyles$z();
+    var classes = useStyles$v();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -8766,18 +9130,18 @@
           borderColor: 'transparent!important'
         },
         '&:hover .MuiSelect-select': {
-          backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
+          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
         },
         '&.Mui-focused .MuiSelect-select': {
           outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-          backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
+          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
         },
         '&:hover&.MuiButton-root': {
-          backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
+          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
         },
         '&:focus&.MuiButton-root': {
           outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-          backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
+          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
         },
         '& .MuiSvgIcon-root': {
           transition: 'none',
@@ -8892,246 +9256,59 @@
     }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: 12
-    }, /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
-      disableUnderline: true,
-      tooltip: "Select the dimension to adjust, currently it is set to " + activeDimName + " with value " + activeDim.currentValue,
-      inputProps: {
-        SelectDisplayProps: {
-          'data-testid': 'selectDimension'
-        }
-      },
-      className: classes.textContainer,
-      value: activeDimName,
-      list: dimNameList,
-      currentIndex: dimNameCurrentIndex,
-      onChange: onChangeActiveDimensionName,
-      onChangeMouseWheel: function onChangeMouseWheel(e) {
-        return setActiveDimName(e.value);
-      },
-      style: {
-        maxWidth: '50%'
-      }
-    }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
-      disabled: true
-    }, "Select dimension"), layerDimensions.map(function (dimension) {
-      return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
-        key: dimension.name,
-        value: dimension.name
-      }, dimension.name);
-    })), /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
-      disableUnderline: true,
-      tooltip: "Dimension " + activeDimName + " is set to " + activeDim.currentValue + " with units " + activeDim.units,
-      inputProps: {
-        SelectDisplayProps: {
-          'data-testid': 'selectDimensionValue'
-        }
-      },
-      className: classes.textContainer,
-      value: activeDim && activeDim.currentValue,
-      list: dimValueList,
-      currentIndex: dimValueCurrentIndex,
-      onChange: selectDimensionValue,
-      onChangeMouseWheel: function onChangeMouseWheel(e) {
-        return onLayerChangeDimension(activeDim.name, e.value);
-      },
-      style: {
-        maxWidth: '50%'
-      }
-    }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
-      disabled: true
-    }, "Select dimension value. (", valuesToDisplay.length, " options)"), valuesToDisplay.map(function (dimValue) {
-      return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
-        key: dimValue,
-        value: dimValue
-      }, "" + dimValue, /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, "\xA0", /*#__PURE__*/React__namespace.createElement("i", null, "" + activeDim.units)));
-    }))));
-  };
-
-  /* *
-   * 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$y = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      button: {
-        height: 28,
-        width: 28,
-        borderRadius: 5,
-        marginTop: 2,
-        color: function color(_a) {
-          var isActive = _a.isActive,
-              isAccessible = _a.isAccessible,
-              isEnabled = _a.isEnabled;
-
-          if (!isEnabled) {
-            return theme.palette.geowebColors.buttons.flat.disabled.color;
-          }
-
-          if (isAccessible) {
-            return theme.palette.geowebColors.greys.accessible;
-          }
-
-          if (isActive) {
-            return theme.palette.common.white;
-          }
-
-          return theme.palette.geowebColors.buttons.flat["default"].color;
-        },
-        backgroundColor: function backgroundColor(_a) {
-          var isActive = _a.isActive;
-          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.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
-          },
-          outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-          borderRadius: 0
-        },
-        '&:hover': {
-          backgroundColor: function backgroundColor(_a) {
-            var isActive = _a.isActive;
-            return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
-          }
-        }
-      },
-      popper: {
-        pointerEvents: 'none'
-      }
-    });
-  });
-
-  var LayerManagerButton = function LayerManagerButton(_a) {
-    var _b = _a.tooltipTitle,
-        tooltipTitle = _b === void 0 ? '' : _b,
-        _c = _a.onClick,
-        onClick = _c === void 0 ? function () {} : _c,
-        _d = _a.isActive,
-        isActive = _d === void 0 ? false : _d,
-        _e = _a.isEnabled,
-        isEnabled = _e === void 0 ? true : _e,
-        icon = _a.icon,
-        testId = _a.testId,
-        _f = _a.isAccessible,
-        isAccessible = _f === void 0 ? false : _f,
-        className = _a.className,
-        props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "className"]);
-
-    var classes = useStyles$y({
-      isActive: isActive,
-      isEnabled: isEnabled,
-      isAccessible: isAccessible
-    });
-
-    var handleClick = function handleClick(event) {
-      onClick(event);
-    };
-
-    return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-      title: tooltipTitle,
-      placement: "top",
-      classes: {
-        popper: classes.popper
-      }
-    }, /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({
-      size: "small",
-      onClick: handleClick,
-      "data-testid": testId,
-      className: classes.button + " " + className,
-      disableFocusRipple: true
-    }, props), icon));
-  };
-
-  /* *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
-   *
-   *     http://www.apache.org/licenses/LICENSE-2.0
-   *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
-   *
-   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2021 - Finnish Meteorological Institute (FMI)
-   * */
-  var useStyles$x = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      checkbox: {
-        color: 'inherit',
-        padding: 4,
-        borderRadius: 5,
-        '&.Mui-focusVisible': {
-          backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
-        },
-        '&:hover': {
-          backgroundColor: 'transparent!important'
-        },
-        '&.Mui-checked': {
-          color: 'inherit'
+    }, /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
+      disableUnderline: true,
+      tooltip: "Select the dimension to adjust, currently it is set to " + activeDimName + " with value " + activeDim.currentValue,
+      inputProps: {
+        SelectDisplayProps: {
+          'data-testid': 'selectDimension'
         }
+      },
+      className: classes.textContainer,
+      value: activeDimName,
+      list: dimNameList,
+      currentIndex: dimNameCurrentIndex,
+      onChange: onChangeActiveDimensionName,
+      onChangeMouseWheel: function onChangeMouseWheel(e) {
+        return setActiveDimName(e.value);
+      },
+      style: {
+        maxWidth: '50%'
       }
-    });
-  });
-
-  var EnableLayer = function EnableLayer(_a) {
-    var isEnabled = _a.isEnabled,
-        title = _a.title,
-        onChangeEnableLayer = _a.onChangeEnableLayer;
-    var classes = useStyles$x(isEnabled);
-
-    var onClick = function onClick() {
-      onChangeEnableLayer(!isEnabled);
-    };
-
-    var visibilityIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
-      width: 24,
-      height: 24,
-      fill: "transparent"
-    }), /*#__PURE__*/React__namespace.createElement("path", {
-      d: "M14.4980749,15.8618431 C15.8661433,15.0851043 16.779689,13.6936347 16.779689,12.1014551 C16.779689,10.5092755 15.8661433,9.11870594 14.4980749,8.34106705 C17.6257313,9.18620931 19.3529176,11.4300215 19.8092405,12.1014551 C19.3529176,12.7719886 17.6266313,15.0167008 14.4980749,15.8618431 L14.4980749,15.8618431 Z M4.18985949,12.1014551 C4.64618231,11.4300215 6.37336867,9.18710936 9.49922496,8.3419671 C8.13295665,9.11870594 7.21851093,10.5101755 7.21851093,12.1014551 C7.21851093,13.6936347 8.13295665,15.0842042 9.49922496,15.8618431 C6.37336867,15.0167008 4.64618231,12.7728886 4.18985949,12.1014551 L4.18985949,12.1014551 Z M11.99955,13.8583429 C10.9950998,13.8583429 10.180559,13.0717036 10.180559,12.1014551 C10.180559,11.1312066 10.9950998,10.3445672 11.99955,10.3445672 C13.0031002,10.3445672 13.8176409,11.1312066 13.8176409,12.1014551 C13.8176409,13.0717036 13.0031002,13.8583429 11.99955,13.8583429 L11.99955,13.8583429 Z M20.7983899,11.7666383 C20.6813841,11.5713286 17.8696435,7 11.99955,7 C6.12945647,7 3.31681584,11.5713286 3.19980999,11.7666383 L3,12.1014551 L3.19980999,12.4362718 C3.31681584,12.6306815 6.12945647,17.2020101 11.99955,17.2020101 C17.8696435,17.2020101 20.6813841,12.6306815 20.7983899,12.4362718 L21,12.1014551 L20.7983899,11.7666383 Z"
-    }));
-    var visibilityOffIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
+    }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+      disabled: true
+    }, "Dimension"), layerDimensions.map(function (dimension) {
+      return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        key: dimension.name,
+        value: dimension.name
+      }, dimension.name);
+    })), /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
+      disableUnderline: true,
+      tooltip: "Dimension " + activeDimName + " is set to " + activeDim.currentValue + " with units " + activeDim.units,
+      inputProps: {
+        SelectDisplayProps: {
+          'data-testid': 'selectDimensionValue'
+        }
+      },
+      className: classes.textContainer,
+      value: activeDim && activeDim.currentValue,
+      list: dimValueList,
+      currentIndex: dimValueCurrentIndex,
+      onChange: selectDimensionValue,
+      onChangeMouseWheel: function onChangeMouseWheel(e) {
+        return onLayerChangeDimension(activeDim.name, e.value);
+      },
       style: {
-        marginTop: 2
+        maxWidth: '50%'
       }
-    }, /*#__PURE__*/React__namespace.createElement("rect", {
-      width: 24,
-      height: 24,
-      fill: "transparent"
-    }), /*#__PURE__*/React__namespace.createElement("path", {
-      d: "M12 15.309c-.755 0-1.45-.088-2.092-.236l.798-.797c.41.124.844.192 1.294.192 2.453 0 4.442-1.988 4.442-4.44 0-.495-.085-.907-.234-1.255l.03-.03c1.72.906 2.781 2.167 3.218 2.766-.724.992-3.151 3.8-7.456 3.8zm-7.456-3.8c.442-.607 1.522-1.89 3.276-2.796-.166.36-.261.79-.261 1.315 0 1.228.499 2.34 1.305 3.144l-1.102 1.104c-1.72-.906-2.78-2.169-3.218-2.767zm5.646-3.524c.818 0 1.482.665 1.482 1.483 0 .818-.664 1.481-1.482 1.481s-1.482-.663-1.482-1.481c0-.818.664-1.483 1.482-1.483zm10.608 3.19c-.073-.125-1.245-2.026-3.603-3.388l2.009-2.01c.406-.406.406-1.065 0-1.473-.407-.405-1.066-.405-1.473 0l-2.58 2.582c-.93-.295-1.98-.478-3.151-.478-5.87 0-8.681 4.57-8.798 4.766L3 11.51l.202.335c.073.124 1.244 2.025 3.603 3.387l-2.009 2.01c-.406.406-.406 1.065 0 1.472.204.203.47.305.737.305.266 0 .532-.102.736-.305l2.58-2.58c.93.293 1.98.476 3.151.476 5.87 0 8.681-4.57 8.798-4.765l.202-.335-.202-.335z"
-    }));
-    return /*#__PURE__*/React__namespace.createElement(LayerManagerButton, {
-      tooltipTitle: title,
-      onClick: onClick,
-      icon: /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
-        className: classes.checkbox,
-        icon: visibilityOffIcon,
-        checkedIcon: visibilityIcon,
-        checked: isEnabled,
-        disableFocusRipple: true,
-        tabIndex: -1
-      }),
-      testId: "enableLayer",
-      isEnabled: isEnabled
-    });
+    }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+      disabled: true
+    }, "Dimension value (", valuesToDisplay.length, " options)"), valuesToDisplay.map(function (dimValue) {
+      return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        key: dimValue,
+        value: dimValue
+      }, "" + dimValue, /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, "\xA0", /*#__PURE__*/React__namespace.createElement("i", null, "" + activeDim.units)));
+    }))));
   };
 
   /* *
@@ -9150,7 +9327,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$w = makeStyles__default["default"](function (theme) {
+  var useStyles$u = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       dropdownEmpty: {
         paddingLeft: 8,
@@ -9200,7 +9377,7 @@
         layers = _b === void 0 ? [] : _b,
         _c = _a.isEnabled,
         isEnabled = _c === void 0 ? true : _c;
-    var classes = useStyles$w();
+    var classes = useStyles$u();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
     if (!layers || !layers.length) {
@@ -9246,7 +9423,7 @@
       requiresCtrlToChange: true
     }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
-    }, "Select layer"), extendedLayers.map(function (layerFromServiceLayers) {
+    }, "Layer"), extendedLayers.map(function (layerFromServiceLayers) {
       return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: layerFromServiceLayers.name,
         value: layerFromServiceLayers.name,
@@ -9271,7 +9448,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$v = makeStyles__default["default"](function (theme) {
+  var useStyles$t = makeStyles__default["default"](function (theme) {
     return {
       opacityDiv: {
         height: 'calc(100% - 5px)',
@@ -9294,7 +9471,7 @@
         position: 'fixed',
         top: '-5px',
         boxSizing: 'initial',
-        zIndex: 1,
+        zIndex: 2,
         boxShadow: theme.shadows[8]
       }
     };
@@ -9332,7 +9509,7 @@
         onLayerChangeOpacity = _a.onLayerChangeOpacity,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$v();
+    var classes = useStyles$t();
     var sliderClasses = shared.sliderStyles();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
@@ -9534,7 +9711,7 @@
       requiresCtrlToChange: true
     }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
-    }, "Select style"), styles.map(function (styleFromlayer) {
+    }, "Style"), styles.map(function (styleFromlayer) {
       return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: styleFromlayer.name,
         value: styleFromlayer.name
@@ -9558,59 +9735,22 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$u = makeStyles__default["default"](function () {
-    return createStyles__default["default"]({
-      icon: {
-        width: 20,
-        height: 20
-      }
-    });
-  });
-
-  var DeleteButton = function DeleteButton(_a) {
-    var tooltipTitle = _a.tooltipTitle,
-        onClickDelete = _a.onClickDelete,
-        _b = _a.isEnabled,
-        isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$u();
-    return /*#__PURE__*/React__namespace.createElement(LayerManagerButton, {
-      tooltipTitle: tooltipTitle,
-      onClick: onClickDelete,
-      icon: /*#__PURE__*/React__namespace.createElement(iconsMaterial.Delete, {
-        className: classes.icon
-      }),
-      testId: "deleteButton",
-      isEnabled: isEnabled
-    });
-  };
-
-  /* *
-   * 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$t = makeStyles__default["default"](function (theme) {
+  var useStyles$s = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       svgIcon: {
         fill: function fill(_a) {
-          var isActive = _a.isActive;
+          var isActive = _a.isActive,
+              isEnabled = _a.isEnabled;
 
           if (isActive) {
             return theme.palette.common.white;
           }
 
-          return theme.palette.geowebColors.buttons.flat["default"].color;
+          if (isEnabled) {
+            return theme.palette.geowebColors.buttons.flat["default"].color;
+          }
+
+          return theme.palette.geowebColors.buttons.flat.disabled.color;
         }
       }
     });
@@ -9624,7 +9764,7 @@
         isActive = _c === void 0 ? false : _c,
         _d = _a.isEnabled,
         isEnabled = _d === void 0 ? true : _d;
-    var classes = useStyles$t({
+    var classes = useStyles$s({
       isActive: isActive,
       isEnabled: isEnabled
     });
@@ -9652,7 +9792,7 @@
       }))));
     };
 
-    return /*#__PURE__*/React__namespace.createElement(LayerManagerButton, {
+    return /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
       tooltipTitle: tooltipTitle,
       onClick: onClickActivate,
       icon: /*#__PURE__*/React__namespace.createElement(Icon, null),
@@ -9677,7 +9817,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$s = makeStyles__default["default"](function (theme) {
+  var useStyles$r = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       row: {
         background: function background(isEnabled) {
@@ -9711,6 +9851,8 @@
     } : _b,
         _c = _a.isEnabled,
         isEnabled = _c === void 0 ? true : _c,
+        _d = _a.isLayerMissing,
+        isLayerMissing = _d === void 0 ? false : _d,
         onLayerEnable = _a.onLayerEnable,
         onLayerChangeName = _a.onLayerChangeName,
         onLayerChangeStyle = _a.onLayerChangeStyle,
@@ -9729,7 +9871,7 @@
         layerActiveLayout = _a.layerActiveLayout,
         layerManagerWidth = _a.layerManagerWidth,
         dragHandle = _a.dragHandle;
-    var classes = useStyles$s(isEnabled);
+    var classes = useStyles$r(isEnabled);
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
     var onClickRow = function onClickRow() {
@@ -9744,7 +9886,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
       item: true,
       className: columnSizes.column1
-    }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(EnableLayer, {
+    }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.EnableButton, {
       isEnabled: layer.enabled,
       title: layer.name,
       onChangeEnableLayer: function onChangeEnableLayer() {
@@ -9767,7 +9909,13 @@
           name: name
         });
       }
-    })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+    })), isLayerMissing ? /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      item: true,
+      className: "" + columnSizes.columns35
+    }, /*#__PURE__*/React__default["default"].createElement(shared.AlertBanner, {
+      title: "This layer could not be loaded: does not exist on the server.",
+      isCompact: true
+    })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
       item: true,
       className: "" + columnSizes.column3
     }, layerStylesLayout || /*#__PURE__*/React__default["default"].createElement(RenderStyles, {
@@ -9810,10 +9958,10 @@
           dimension: dimension
         });
       }
-    })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+    }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
       item: true,
       className: columnSizes.column6
-    }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(DeleteButton, {
+    }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerDeleteButton, {
       tooltipTitle: "Remove layer",
       onClickDelete: function onClickDelete() {
         onLayerDelete({
@@ -9863,7 +10011,7 @@
     var isLayerEnabled = reactRedux.useSelector(function (store) {
       return getLayerEnabled(store, layerId);
     });
-    return /*#__PURE__*/React__namespace.createElement(DeleteButton, {
+    return /*#__PURE__*/React__namespace.createElement(shared.ManagerDeleteButton, {
       tooltipTitle: "Remove layer",
       onClickDelete: function onClickDelete() {
         layerDelete$1({
@@ -9907,7 +10055,7 @@
         enabled: enabled
       }));
     }, [dispatch]);
-    return /*#__PURE__*/React__namespace.createElement(EnableLayer, {
+    return /*#__PURE__*/React__namespace.createElement(shared.EnableButton, {
       isEnabled: isEnabled,
       title: "Toggle this layer's visibility",
       onChangeEnableLayer: function onChangeEnableLayer(enable) {
@@ -10251,10 +10399,23 @@
     var isEnabled = reactRedux.useSelector(function (store) {
       return getLayerEnabled(store, layerId);
     });
+    var layerName = reactRedux.useSelector(function (store) {
+      return getLayerName(store, layerId);
+    });
+    var layerService = reactRedux.useSelector(function (store) {
+      return getLayerService(store, layerId);
+    });
+    var layers = reactRedux.useSelector(function (store) {
+      return getLayersFromService$1(store, layerService);
+    });
+    var isLayerMissing = layers && layers.length > 0 && !layers.some(function (l) {
+      return l.name === layerName;
+    });
     return /*#__PURE__*/React__namespace.createElement(LayerRow, {
       isEnabled: isEnabled,
       mapId: mapId,
       layerId: layerId,
+      isLayerMissing: isLayerMissing,
       layerEnableLayout: /*#__PURE__*/React__namespace.createElement(EnableLayerConnect, {
         layerId: layerId
       }),
@@ -10314,7 +10475,7 @@
         _d = _a.hideTooltip,
         hideTooltip = _d === void 0 ? false : _d;
     var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
-    return /*#__PURE__*/React__default["default"].createElement(LayerManagerButton, {
+    return /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
       tooltipTitle: tooltipTitle,
       icon: /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null),
       testId: "dragHandle" + (index !== undefined ? "-" + index : ''),
@@ -10352,7 +10513,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$r = makeStyles__default["default"](function () {
+  var useStyles$q = makeStyles__default["default"](function () {
     return {
       layerRows: {
         width: '100%',
@@ -10418,7 +10579,7 @@
 
     var isSorting = activeDragIndex !== null;
     var isDragDisabled = layerIds.length === 1;
-    var classes = useStyles$r(isSorting);
+    var classes = useStyles$q(isSorting);
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       item: true,
@@ -10516,7 +10677,7 @@
       }
     }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
-    }, "Select base layer"), availableBaseLayers.map(function (baseLayer) {
+    }, "Base layer"), availableBaseLayers.map(function (baseLayer) {
       return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: baseLayer.id,
         value: baseLayer.id
@@ -10628,7 +10789,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$q = makeStyles__default["default"]({
+  var useStyles$p = makeStyles__default["default"]({
     layerRow: {
       width: '100%',
       height: '36px'
@@ -10651,7 +10812,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _d = _a.tooltip,
         tooltip = _d === void 0 ? '' : _d;
-    var classes = useStyles$q();
+    var classes = useStyles$p();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -10696,7 +10857,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$p = makeStyles__default["default"]({
+  var useStyles$o = makeStyles__default["default"]({
     layerRowContainer: {
       position: 'relative',
       width: '100%',
@@ -10731,7 +10892,7 @@
         layerSelect = _e === void 0 ? false : _e,
         _f = _a.showAddLayersTooltip,
         showAddLayersTooltip = _f === void 0 ? true : _f;
-    var classes = useStyles$p();
+    var classes = useStyles$o();
 
     var _g = __read(React__namespace.useState(LayerManagerWidth.lg), 2),
         layerManagerWidth = _g[0],
@@ -11152,7 +11313,8 @@
                   id: serviceUrl,
                   name: serviceName,
                   service: serviceUrl,
-                  layers: serviceLayers
+                  layers: serviceLayers,
+                  isUserAddedService: true
                 });
                 setIsLoading(false);
                 closePopupAndResetState();
@@ -11667,7 +11829,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$o = makeStyles__default["default"](function (theme) {
+  var useStyles$n = makeStyles__default["default"](function (theme) {
     return {
       layerRow: {
         background: theme.palette.geowebColors.cards.cardContainer,
@@ -11725,7 +11887,7 @@
         mapLayers = _a.mapLayers,
         keywordIds = _a.keywordIds,
         allKeywordsActive = _a.allKeywordsActive;
-    var classes = useStyles$o();
+    var classes = useStyles$n();
 
     var _b = __read(React__namespace.useState(0), 2),
         numberOfLayers = _b[0],
@@ -11995,7 +12157,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$n = makeStyles__default["default"](function (theme) {
+  var useStyles$m = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       serviceChips: {
         width: '100%',
@@ -12019,7 +12181,7 @@
         fontSize: '0.875rem'
       },
       scrollArrowLeft: {
-        width: '120px',
+        width: '100px',
         marginBottom: '-12px',
         height: '34px',
         backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
@@ -12027,7 +12189,10 @@
         marginRight: '-120px',
         "float": 'left',
         zIndex: 1,
-        position: 'relative'
+        position: 'relative',
+        '&:hover': {
+          color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+        }
       },
       serviceList: {
         height: '32px',
@@ -12036,13 +12201,16 @@
         overflow: 'hidden'
       },
       scrollArrowRight: {
-        width: '120px',
+        width: '100px',
         marginBottom: '-12px',
         height: '34px',
         backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
         right: '0px',
         position: 'fixed',
-        cursor: 'pointer'
+        cursor: 'pointer',
+        '&:hover': {
+          color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+        }
       }
     });
   });
@@ -12067,7 +12235,7 @@
     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$m({
       margin: margin,
       maxWidthValue: maxWidthValue
     });
@@ -12197,63 +12365,49 @@
    * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2022 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$m = 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 styles = {
+    servicesContainer: {
+      width: '300px',
+      maxHeight: '380px',
+      top: '140px',
+      backgroundColor: 'geowebColors.background.surface',
+      boxShadow: 6,
+      overflow: 'auto'
+    },
+    header: {
+      position: 'sticky',
+      top: 0,
+      fontSize: 'default',
+      padding: '12px',
+      backgroundColor: 'geowebColors.background.surface',
+      zIndex: 100
+    },
+    footer: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'sticky',
+      bottom: 0,
+      backgroundColor: 'geowebColors.background.surface',
+      zIndex: 100
+    },
+    button: {
+      margin: '16px',
+      width: '80%',
+      fontSize: '12px',
+      textTransform: 'none'
+    },
+    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$m();
 
     var _c = __read(React__namespace.useState(false), 2),
         addServiceisOpen = _c[0],
@@ -12276,11 +12430,11 @@
     };
 
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Box, {
-      className: classes.servicesContainer,
+      sx: styles.servicesContainer,
       "data-testid": "ServiceDialog"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.header
-    }, " Services"), /*#__PURE__*/React__namespace.createElement(material.List, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: styles.header
+    }, "Services"), /*#__PURE__*/React__namespace.createElement(material.List, {
       disablePadding: true
     }, services.map(function (service) {
       return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
@@ -12307,7 +12461,6 @@
         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"
@@ -12320,18 +12473,17 @@
         "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.Box, {
+      sx: styles.footer
     }, /*#__PURE__*/React__namespace.createElement(material.Button, {
       onClick: openAddService,
       "data-testid": "openAddServiceButton",
-      className: classes.button,
+      sx: styles.button,
       variant: "tertiary",
       startIcon: /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
-        className: classes.icon
+        sx: styles.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"
@@ -13034,7 +13186,8 @@
                 id: service.id,
                 name: service.name,
                 service: service.url,
-                layers: layers
+                layers: layers,
+                isUserAddedService: false
               });
             }
           })["catch"](function () {
@@ -15422,13 +15575,15 @@
     }
   };
 
-  var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, scale) {
+  var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale) {
     var ctx = context;
     var _a = theme.palette.geowebColors.timeSlider,
         timelineTimelineSurface = _a.timelineTimelineSurface,
         timelineNightTime = _a.timelineNightTime;
     ctx.fillStyle = timelineTimelineSurface.fill;
     ctx.fillRect(0, 0, canvasWidth, height);
+    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
+    ctx.fillRect(animationStartPx, 0, Math.max(animationEndPx - animationStartPx, 0), height);
     var colorChangeUnit = getColorChangeTimestepUnit(scale);
 
     var _b = __read(getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, colorChangeUnit), 2),
@@ -15522,7 +15677,7 @@
     drawLeftSideDateText(ctx, theme, dateText, height);
   };
 
-  var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTimeUnix, scale, currentTimeUnix) {
+  var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTimeUnix, scale, currentTimeUnix, animationStartTime, animationEndTime) {
     var ctx = context;
 
     var _a = __read([0, canvasWidth].map(function (px) {
@@ -15531,7 +15686,13 @@
         visibleTimeStart = _a[0],
         visibleTimeEnd = _a[1];
 
-    drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, scale);
+    var _b = __read([animationStartTime, animationEndTime].map(function (time) {
+      return timestampToPixel(time, centerTime, canvasWidth, secondsPerPx);
+    }), 2),
+        animationStartPx = _b[0],
+        animationEndPx = _b[1];
+
+    drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale);
     drawTimeScale(ctx, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, scale, dataScaleToSecondsPerPx);
     drawNeedle(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, selectedTimeUnix);
     drawCurrentTime(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, currentTimeUnix);
@@ -15962,6 +16123,8 @@
         currentTime = _a.currentTime,
         dataStartTime = _a.dataStartTime,
         dataEndTime = _a.dataEndTime,
+        animationStartTime = _a.animationStartTime,
+        animationEndTime = _a.animationEndTime,
         isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
         timeStep = _a.timeStep,
         onSetNewDate = _a.onSetNewDate,
@@ -15985,6 +16148,18 @@
         isNewSelectionTimeRequested = _g[0],
         setNewSelectionTimeRequested = _g[1];
 
+    var _h = __read(React__namespace.useState(animationStartTime && moment__default["default"].utc(animationStartTime).unix()), 2),
+        localAnimationStartTime = _h[0],
+        setLocalAnimationStartTime = _h[1];
+
+    var _j = __read(React__namespace.useState(animationEndTime && moment__default["default"].utc(animationEndTime).unix()), 2),
+        localAnimationEndTime = _j[0],
+        setLocalAnimationEndTime = _j[1];
+
+    React__namespace.useEffect(function () {
+      setLocalAnimationStartTime(animationStartTime && moment__default["default"].utc(animationStartTime).unix());
+      setLocalAnimationEndTime(animationEndTime && moment__default["default"].utc(animationEndTime).unix());
+    }, [animationStartTime, animationEndTime]);
     React__namespace.useEffect(function () {
       var handleKeyDown = function handleKeyDown(event) {
         if (event.key === 'Home') {
@@ -16082,7 +16257,7 @@
         }
       },
       onRenderCanvas: function onRenderCanvas(ctx, width, height) {
-        renderTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime);
+        renderTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime);
       }
     }));
   };
@@ -16374,6 +16549,9 @@
     var svgIconPath = new Path2D('M8.843 1.029c-.56 0-.814.362-.814.699 0 .179.065.36.19.54l3.06 4.34c.065.093.14.171.221.234v8.373c-.082.064-.156.142-.22.234L8.219 19.79c-.125.18-.19.361-.19.54 0 .337.255.699.814.699h6.373c.56 0 .813-.361.813-.7 0-.178-.064-.36-.19-.538l-3.06-4.343c-.08-.112-.174-.204-.278-.273V6.883c.104-.069.199-.16.278-.273l3.06-4.343c.126-.179.19-.36.19-.539 0-.338-.254-.7-.813-.7z');
     ctx.fillStyle = playerTimeMarkers.fill;
     ctx.fill(svgIconPath);
+    ctx.strokeStyle = theme.palette.geowebColors.timeSlider.playerNeedlePlayer.rgba;
+    ctx.lineWidth = 1;
+    ctx.stroke(svgIconPath);
     ctx.restore();
   };
 
@@ -17168,10 +17346,10 @@
   var animationIntervalDefault = 5;
   var connectRedux$3 = reactRedux.connect(function (store, props) {
     return {
-      isAnimating: isAnimating(store, props.mapId),
       animationStartTime: getAnimationStartTime(store, props.mapId),
       animationEndTime: getAnimationEndTime(store, props.mapId),
-      timeStep: getMapTimeStep(store, props.mapId)
+      timeStep: getMapTimeStep(store, props.mapId),
+      linkedMapAnimationInfo: linkedMapAnimationInfo(store, props.mapId)
     };
   }, {
     mapStartAnimation: mapStartAnimation,
@@ -17179,19 +17357,19 @@
   });
   var PlayButtonConnect = connectRedux$3(function (_a) {
     var mapId = _a.mapId,
-        isAnimating = _a.isAnimating,
         animationStartTime = _a.animationStartTime,
         animationEndTime = _a.animationEndTime,
         isDisabled = _a.isDisabled,
         timeStep = _a.timeStep,
+        linkedMapAnimationInfo = _a.linkedMapAnimationInfo,
         mapStartAnimation = _a.mapStartAnimation,
         mapStopAnimation = _a.mapStopAnimation;
     var animationInterval = timeStep || animationIntervalDefault;
 
     var onTogglePlay = function onTogglePlay() {
-      if (isAnimating) {
+      if (linkedMapAnimationInfo.isAnimating) {
         mapStopAnimation({
-          mapId: mapId
+          mapId: linkedMapAnimationInfo.id
         });
       } else {
         mapStartAnimation({
@@ -17204,7 +17382,7 @@
     };
 
     return /*#__PURE__*/React__default["default"].createElement(PlayButton, {
-      isAnimating: isAnimating,
+      isAnimating: linkedMapAnimationInfo.isAnimating,
       isDisabled: isDisabled,
       onTogglePlayButton: function onTogglePlayButton() {
         onTogglePlay();
@@ -17261,52 +17439,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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2020 - Finnish Meteorological Institute (FMI)
-   * */
-
-  var synchronizationGroupStore = function synchronizationGroupStore(store) {
-    return store && store.syncronizationGroupStore ? store.syncronizationGroupStore : null;
-  };
-
-  var getSynchronizationGroupStore = reselect.createSelector(synchronizationGroupStore, function (store) {
-    return store;
-  });
-  /**
-   * Returns the synchronization source by id
-   * @param store The app store
-   * @param id The source id to find
-   */
-
-  var getSyncSourceBySourceId = function getSyncSourceBySourceId(state, id) {
-    if (state && state.sources) {
-      var sources = state.sources;
-
-      if (sources.byId[id]) {
-        return sources.byId[id];
-      }
-    }
-
-    return null;
-  };
-
-  var getTime = reselect.createSelector(getSyncSourceBySourceId, function (store) {
-    return store && store.payloadByType && store.payloadByType[SYNCGROUPS_TYPE_SETTIME] ? store.payloadByType[SYNCGROUPS_TYPE_SETTIME].value : null;
-  });
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -17334,7 +17466,9 @@
       isAnimating: isAnimating(store, props.mapId),
       timeStep: getMapTimeStep(store, props.mapId),
       isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId),
-      timeValue: getTime(getSynchronizationGroupStore(store), props.sourceId)
+      timeValue: getTime(getSynchronizationGroupStore(store), props.sourceId),
+      animationStartTime: getAnimationStartTime(store, props.mapId),
+      animationEndTime: getAnimationEndTime(store, props.mapId)
     };
   }, {
     stopMapAnimation: mapStopAnimation,
@@ -17357,6 +17491,8 @@
         isAnimating = _a.isAnimating,
         timeStep = _a.timeStep,
         isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
+        animationStartTime = _a.animationStartTime,
+        animationEndTime = _a.animationEndTime,
         stopMapAnimation = _a.stopMapAnimation,
         setTime = _a.setTime,
         syncGroupAddSource = _a.syncGroupAddSource,
@@ -17391,6 +17527,8 @@
       isTimeSliderHoverOn: isTimeSliderHoverOn,
       dataStartTime: dataStartTime,
       dataEndTime: dataEndTime,
+      animationStartTime: animationStartTime,
+      animationEndTime: animationEndTime,
       timeStep: timeStep,
       onSetNewDate: function onSetNewDate(newDate) {
         if (isAnimating) {
@@ -18704,6 +18842,171 @@
     }
   };
 
+  /* *
+   * 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)
+   * */
+  /* Function which calculates the distance between two points */
+  // eslint-disable-next-line class-methods-use-this
+
+  var distance = function distance(a, b) {
+    return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y));
+  };
+
+  var checkHoverVertice = function checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords) {
+    var maxDistance = 20;
+
+    if (feature.geometry.type === 'Point') {
+      var featureCoords = feature.geometry.coordinates;
+      /* Get all vertexes */
+
+      var XYCoords = convertGeoCoordsToScreenCoords([featureCoords]);
+
+      if (XYCoords.length > 0 && distance(XYCoords[0], {
+        x: mouseX,
+        y: mouseY
+      }) < maxDistance) {
+        return {
+          coordinateIndexInFeature: 0
+        };
+      }
+    }
+
+    if (feature.geometry.type === 'MultiPoint') {
+      for (var polygonIndex = feature.geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
+        var featureCoords = feature.geometry.coordinates[polygonIndex];
+
+        if (featureCoords === undefined) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+        /* Get all vertexes */
+
+
+        var XYCoords = convertGeoCoordsToScreenCoords([featureCoords]);
+
+        if (XYCoords.length > 0 && distance(XYCoords[0], {
+          x: mouseX,
+          y: mouseY
+        }) < maxDistance) {
+          return {
+            coordinateIndexInFeature: polygonIndex
+          };
+        }
+      }
+    }
+
+    if (feature.geometry.type === 'Polygon') {
+      var point = [mouseX, mouseY];
+
+      for (var polygonIndex = feature.geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
+        var featureCoords = feature.geometry.coordinates[polygonIndex];
+
+        if (featureCoords === undefined) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+        /* Get all vertexes */
+
+
+        var poly = [convertGeoCoordsToScreenCoords(featureCoords).map(function (coord) {
+          return [coord.x, coord.y];
+        })];
+
+        try {
+          var isPointInPoly = turf__namespace.booleanPointInPolygon(turf__namespace.point(point), turf__namespace.polygon(poly));
+
+          if (isPointInPoly) {
+            return {
+              coordinateIndexInFeature: polygonIndex
+            };
+          } // eslint-disable-next-line no-empty
+
+        } catch (e) {}
+      }
+    }
+
+    if (feature.geometry.type === 'MultiPolygon') {
+      var point = [mouseX, mouseY];
+
+      for (var polygonIndex = feature.geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
+        var featureCoords = feature.geometry.coordinates[polygonIndex][0];
+
+        if (featureCoords === undefined) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+
+        var poly = [convertGeoCoordsToScreenCoords(featureCoords).map(function (coord) {
+          return [coord.x, coord.y];
+        })];
+
+        try {
+          var isPointInPoly = turf__namespace.booleanPointInPolygon(turf__namespace.point(point), turf__namespace.polygon(poly));
+
+          if (isPointInPoly) {
+            return {
+              coordinateIndexInFeature: polygonIndex
+            };
+          } // eslint-disable-next-line no-empty
+
+        } catch (e) {}
+      }
+    }
+
+    if (feature.geometry.type === 'LineString') {
+      var featureCoords = feature.geometry.coordinates;
+      /* Get all vertexes */
+
+      var XYCoords = convertGeoCoordsToScreenCoords(featureCoords);
+      /* Snap to the vertex closer than specified pixels */
+
+      for (var j = 0; j < XYCoords.length; j += 1) {
+        var coord = XYCoords[j];
+
+        if (distance(coord, {
+          x: mouseX,
+          y: mouseY
+        }) < maxDistance) {
+          return {
+            coordinateIndexInFeature: j
+          };
+        }
+      }
+    }
+
+    return null;
+  };
+
+  var checkHoverFeatures = function checkHoverFeatures(geojson, mouseX, mouseY, convertGeoCoordsToScreenCoords) {
+    for (var j = 0; j < geojson.features.length; j += 1) {
+      var feature = geojson.features[j];
+      var hoverResult = checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords);
+
+      if (hoverResult != null) {
+        return {
+          coordinateIndexInFeature: hoverResult.coordinateIndexInFeature,
+          featureIndex: j,
+          feature: feature
+        };
+      }
+    }
+
+    return null;
+  };
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -19314,9 +19617,12 @@
     };
 
     AdagucMapDraw.prototype.adagucMouseMove = function (event) {
+      var _this = this;
+
       var _a = this.props,
           isInEditMode = _a.isInEditMode,
-          featureNrToEdit = _a.featureNrToEdit;
+          featureNrToEdit = _a.featureNrToEdit,
+          onHoverFeature = _a.onHoverFeature;
       if (event && event.rightButton === true) return;
       /* adagucMouseMove is an event callback function which is triggered when the mouse moves over the map
         This event is only triggered if the map is in hover state.
@@ -19329,6 +19635,29 @@
       this.mouseX = mouseX;
       this.mouseY = mouseY;
 
+      if (onHoverFeature) {
+        var handleMouseStoppedTimer = function handleMouseStoppedTimer() {
+          var result = checkHoverFeatures(_this.geojson, mouseX, mouseY, function (coordinates) {
+            return _this.convertGeoCoordsToScreenCoords(coordinates);
+          });
+
+          if (result) {
+            var featureEvent = {
+              coordinateIndexInFeature: result.coordinateIndexInFeature,
+              featureIndex: result.featureIndex,
+              mouseX: mouseX,
+              mouseY: mouseY,
+              isInEditMode: isInEditMode,
+              feature: result.feature
+            };
+            onHoverFeature(featureEvent);
+          }
+        };
+
+        window.clearTimeout(this.mouseStoppedTimer);
+        this.mouseStoppedTimer = window.setTimeout(handleMouseStoppedTimer, 20);
+      }
+
       if (isInEditMode === false) {
         return;
       }
@@ -19829,9 +20158,35 @@
     };
 
     AdagucMapDraw.prototype.adagucMouseUp = function (event) {
-      var isInEditMode = this.props.isInEditMode;
+      var _this = this;
+
+      var _a = this.props,
+          isInEditMode = _a.isInEditMode,
+          onClickFeature = _a.onClickFeature;
       if (event && event.rightButton === true) return;
 
+      if (onClickFeature) {
+        var mouseX = event.mouseX,
+            mouseY = event.mouseY;
+        var result = checkHoverFeatures(this.geojson, mouseX, mouseY, function (coordinates) {
+          return _this.convertGeoCoordsToScreenCoords(coordinates);
+        });
+
+        if (result) {
+          var featureEvent = {
+            coordinateIndexInFeature: result.coordinateIndexInFeature,
+            featureIndex: result.featureIndex,
+            mouseX: mouseX,
+            mouseY: mouseY,
+            isInEditMode: isInEditMode,
+            feature: result.feature
+          };
+          onClickFeature(featureEvent);
+        } else {
+          onClickFeature(null);
+        }
+      }
+
       if (isInEditMode === false) {
         return;
       }
@@ -20037,12 +20392,12 @@
       */
       var _a = this.props,
           featureNrToEdit = _a.featureNrToEdit,
-          isInEditMode = _a.isInEditMode,
-          hoverFeatureCallback = _a.hoverFeatureCallback;
+          isInEditMode = _a.isInEditMode;
       if (!this.geojson || !this.geojson.features || !this.geojson.features.length) return;
       this.textPositions = [];
       this.mouseOverPolygonCoordinates = [];
       this.mouseOverPolygonFeatureIndex = -1;
+      this.mouseOverPolygonIndex = -1;
       /* Current selected feature from GeoJSON */
 
       for (var featureIndex = 0; featureIndex < this.geojson.features.length; featureIndex += 1) {
@@ -20229,19 +20584,6 @@
           ctx.globalAlpha = 1;
           ctx.stroke();
         }
-      } // if (isInEditMode === true &&
-      //   this.mouseOverPolygonFeatureIndex === this.props.featureNrToEdit &&
-
-
-      if (hoverFeatureCallback) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        hoverFeatureCallback({
-          polygonIndex: this.mouseOverPolygonFeatureIndex,
-          featureIndex: this.mouseOverPolygonFeatureIndex,
-          mouseX: this.mouseX,
-          mouseY: this.mouseY
-        });
       }
       /* Draw labels */
 
@@ -20556,7 +20898,8 @@
       // if (test) {
 
       this.mouseOverPolygonCoordinates = 0;
-      this.mouseOverPolygonFeatureIndex = 0; // }
+      this.mouseOverPolygonFeatureIndex = 0;
+      this.mouseOverPolygonIndex = 0; // }
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
 
@@ -20633,6 +20976,7 @@
       if (test) {
         this.mouseOverPolygonCoordinates = XYCoords;
         this.mouseOverPolygonFeatureIndex = featureIndex;
+        this.mouseOverPolygonIndex = polygonIndex;
       } // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
 
@@ -20848,9 +21192,14 @@
         isInDeleteMode: layer.isInDeleteMode,
         drawMode: layer.drawMode,
         webmapjs: webMapJS,
-        hoverFeatureCallback: function hoverFeatureCallback(hoverInfo) {
-          if (layer.hoverFeatureCallback) {
-            layer.hoverFeatureCallback(hoverInfo);
+        onHoverFeature: function onHoverFeature(hoverInfo) {
+          if (layer.onHoverFeature) {
+            layer.onHoverFeature(hoverInfo);
+          }
+        },
+        onClickFeature: function onClickFeature(hoverInfo) {
+          if (layer.onClickFeature) {
+            layer.onClickFeature(hoverInfo);
           }
         },
         updateGeojson: function updateGeojson(geojson) {
@@ -23324,103 +23673,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 emptyState = {
-    timeslider: {
-      groups: [],
-      sourcesById: []
-    },
-    zoompane: {
-      groups: [],
-      sourcesById: []
-    },
-    level: {
-      groups: [],
-      sourcesById: []
-    }
-  };
-  var groupTypes = [{
-    title: 'Timeslider',
-    syncType: 'SYNCGROUPS_TYPE_SETTIME',
-    groupType: 'timeslider'
-  }, {
-    title: 'Zoompane',
-    syncType: 'SYNCGROUPS_TYPE_SETBBOX',
-    groupType: 'zoompane'
-  }];
-  /*
-      _____ Creates viewState  _____
-        - Runs Each time viewState is created:
-        - Fill arrays inside initialState with objects containing new values from Redux
-  */
-
-  var createSyncGroupViewState = function createSyncGroupViewState(syncState) {
-    var initialState = produce__default["default"](emptyState, function (draft) {
-      /*
-        _____ 1. Fill groups _____
-          1. Goes through all groups by ID
-          2. Collects original timeslider or zoompane values into an array
-          3. Sorts and adds selected sources to ViewState based on ID type
-      */
-      Object.keys(syncState.groups.byId).forEach(function (id) {
-        var _a;
-
-        var groupType = (_a = groupTypes.find(function (object) {
-          return object.syncType === syncState.groups.byId[id].type;
-        })) === null || _a === void 0 ? void 0 : _a.groupType;
-
-        if (groupType) {
-          draft[groupType].groups.push({
-            id: id,
-            selected: syncState.groups.byId[id].targets.allIds
-          });
-        }
-      });
-      /*
-        _____ 2. Fill sourcesById _____
-          1. Loop though sources and add source to each group type
-      */
-
-      Object.keys(syncState.sources.byId).forEach(function (id) {
-        groupTypes.forEach(function (_a) {
-          var syncType = _a.syncType,
-              groupType = _a.groupType;
-
-          if (syncState.sources.byId[id].types.includes(syncType)) {
-            draft[groupType].sourcesById.push({
-              id: id,
-              name: id
-            });
-          }
-        });
-      });
-    });
-    return initialState;
-  }; // TODO
-  // Improve selector to reduce unnecessary re-rendering
-  // https://gitlab.com/opengeoweb/opengeoweb/-/issues/1333
-
-  var syncState = function syncState(store) {
-    return store.syncronizationGroupStore;
-  };
-
-  var createSyncGroupViewStateSelector = reselect.createSelector(syncState, createSyncGroupViewState);
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -23444,7 +23696,10 @@
         syncGroupAddTarget = _a.syncGroupAddTarget,
         syncGroupRemoveTarget = _a.syncGroupRemoveTarget,
         syncGroupAddGroup = _a.syncGroupAddGroup,
-        syncGroupRemoveGroup = _a.syncGroupRemoveGroup;
+        syncGroupRemoveGroup = _a.syncGroupRemoveGroup,
+        onMouseDown = _a.onMouseDown,
+        _b = _a.order,
+        order = _b === void 0 ? 0 : _b;
     /*
         _____ Handle Toggle _____
           - Handles checking, unchecking and toggling between in groups
@@ -23549,7 +23804,9 @@
       headerSize: "medium",
       isOpen: isOpen,
       onClose: onClose,
-      "data-testid": "syncGroupViewer"
+      "data-testid": "syncGroupViewer",
+      onMouseDown: onMouseDown,
+      order: order
     }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(SyncGroupList, {
       viewStateData: syncGroupViewState.zoompane,
       title: "ZoomPane",
@@ -23605,14 +23862,12 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var SyncGroupViewerConnect = function SyncGroupViewerConnect(_a) {
-    var onClose = _a.onClose,
-        isOpen = _a.isOpen;
+  var SyncGroupViewerConnect = function SyncGroupViewerConnect() {
     var dispatch = reactRedux.useDispatch(); // TODO
     // Improve the selector to prevent re-renders
     // For example dusting anination syncgroups should not re-render
 
-    var viewState = reactRedux.useSelector(createSyncGroupViewStateSelector);
+    var viewState = reactRedux.useSelector(syncGroupGetViewState);
     var syncGroupAddGroup$1 = React__namespace.useCallback(function (payload) {
       return dispatch(syncGroupAddGroup(payload));
     }, [dispatch]);
@@ -23625,14 +23880,55 @@
     var syncGroupRemoveTarget$1 = React__namespace.useCallback(function (payload) {
       return dispatch(syncGroupRemoveTarget(payload));
     }, [dispatch]);
+    var isOpenInStore = reactRedux.useSelector(function (store) {
+      return getisDialogOpen(store, 'syncGroups');
+    });
+    var onClose = React__namespace.useCallback(function () {
+      return dispatch(setToggleOpenDialog({
+        type: 'syncGroups',
+        setOpen: false
+      }));
+    }, [dispatch]);
+    var uiOrder = reactRedux.useSelector(function (store) {
+      return getDialogOrder(store, 'syncGroups');
+    });
+    var uiIsOrderedOnTop = reactRedux.useSelector(function (store) {
+      return getDialogIsOrderedOnTop(store, 'syncGroups');
+    });
+    var registerDialog$1 = React__namespace.useCallback(function () {
+      return dispatch(registerDialog({
+        type: 'syncGroups',
+        setOpen: false
+      }));
+    }, [dispatch]);
+    var unregisterDialog$1 = React__namespace.useCallback(function () {
+      return dispatch(unregisterDialog({
+        type: 'syncGroups'
+      }));
+    }, [dispatch]);
+    var onOrderDialog = React__namespace.useCallback(function () {
+      if (!uiIsOrderedOnTop) {
+        dispatch(orderDialog({
+          type: 'syncGroups'
+        }));
+      }
+    }, [dispatch, uiIsOrderedOnTop]);
+    React__namespace.useEffect(function () {
+      registerDialog$1();
+      return function () {
+        unregisterDialog$1();
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     return /*#__PURE__*/React__namespace.createElement(SyncGroupViewer, {
       onClose: onClose,
-      isOpen: isOpen,
+      isOpen: isOpenInStore,
       syncGroupViewState: viewState,
       syncGroupAddTarget: syncGroupAddTarget$1,
       syncGroupRemoveTarget: syncGroupRemoveTarget$1,
       syncGroupAddGroup: syncGroupAddGroup$1,
-      syncGroupRemoveGroup: syncGroupRemoveGroup$1
+      syncGroupRemoveGroup: syncGroupRemoveGroup$1,
+      order: uiOrder,
+      onMouseDown: onOrderDialog
     });
   };
 
@@ -23877,7 +24173,7 @@
   exports.layerReducer = reducer$6;
   exports.makeMapPreset = makeMapPreset;
   exports.mapActions = actions$3;
-  exports.mapConstants = constants$1;
+  exports.mapConstants = constants;
   exports.mapModuleConfig = moduleConfig;
   exports.mapSelectors = selectors$1;
   exports.mapTypes = types$2;