@opengeoweb/core 2.3.0 → 2.5.0

package/index.esm.js

@@ -6,17 +6,18 @@ import React__default, { useState, Component, useRef, useEffect } from 'react';
 import produce, { produce as produce$1 } from 'immer';
 import { takeLatest, put, select, call, takeEvery } from 'redux-saga/effects';
 import { WMGetServiceFromStore, LayerType as LayerType$1, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer } from '@opengeoweb/webmap';
-import { Tooltip, Select, Grid, InputLabel, IconButton, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, Checkbox, SvgIcon, FormControl, InputAdornment, ListItemSecondaryAction, ListItemIcon, Switch, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
+import { Tooltip, Select, Grid, InputLabel, IconButton, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, SvgIcon, FormControl, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
-import { sliderStyles, CustomSlider, ToggleMenu, ToolContainerDraggable, ToolButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
-import { Cached, Add, Delete, DragIndicator, Close, ChevronLeft, ChevronRight, Link, LinkOff, MoreVert, DeleteForever } from '@mui/icons-material';
+import makeStyles from '@mui/styles/makeStyles';
+import { sliderStyles, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, ToolContainerDraggable, ToolButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
+import { Cached, Add, DragIndicator, Close, ChevronLeft, ChevronRight, Link, LinkOff, MoreVert, DeleteForever } from '@mui/icons-material';
 import { Sortable, ReactSortable } from 'react-sortablejs';
 import createStyles from '@mui/styles/createStyles';
 import withStyles from '@mui/styles/withStyles';
 import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
 import proj4 from 'proj4';
+import * as turf from '@turf/turf';
 import { createStore, DynamicModuleLoader } from 'redux-dynamic-modules';
 import { getSagaExtension } from 'redux-dynamic-modules-saga';
 import { ThemeWrapper, lightTheme } from '@opengeoweb/theme';
@@ -1293,6 +1294,103 @@ var getAvailableBaseLayersForMap = createSelector(layerStore, function (_store,
   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 = 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 = createSelector(getSyncSourceBySourceId, function (store) {
+  return store && store.payloadByType && store.payloadByType[SYNCGROUPS_TYPE_SETTIME] ? store.payloadByType[SYNCGROUPS_TYPE_SETTIME].value : null;
+});
+
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -2361,6 +2459,34 @@ var getBbox = createSelector(getMapById, function (store) {
 var isAnimating = 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 = 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
  *
@@ -2820,6 +2946,7 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
   getSrs: getSrs,
   getBbox: getBbox,
   isAnimating: isAnimating,
+  linkedMapAnimationInfo: linkedMapAnimationInfo,
   getAnimationStartTime: getAnimationStartTime,
   getAnimationEndTime: getAnimationEndTime,
   isAutoUpdating: isAutoUpdating,
@@ -2885,7 +3012,7 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
  * 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,
@@ -3207,55 +3334,6 @@ var types$1 = /*#__PURE__*/Object.freeze({
 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.
@@ -3401,6 +3479,12 @@ var syncGroupClear = function syncGroupClear() {
     type: SYNCGROUPS_CLEAR
   };
 };
+var syncGroupSetViewState = function syncGroupSetViewState(payload) {
+  return {
+    type: SYNCGROUPS_SET_VIEW_STATE,
+    payload: payload
+  };
+};
 
 var actions$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -3411,7 +3495,8 @@ var actions$1 = /*#__PURE__*/Object.freeze({
   syncGroupLinkTarget: syncGroupLinkTarget,
   syncGroupAddGroup: syncGroupAddGroup,
   syncGroupRemoveGroup: syncGroupRemoveGroup,
-  syncGroupClear: syncGroupClear
+  syncGroupClear: syncGroupClear,
+  syncGroupSetViewState: syncGroupSetViewState
 });
 
 /* *
@@ -3481,7 +3566,8 @@ var actions = /*#__PURE__*/Object.freeze({
   syncGroupLinkTarget: syncGroupLinkTarget,
   syncGroupAddGroup: syncGroupAddGroup,
   syncGroupRemoveGroup: syncGroupRemoveGroup,
-  syncGroupClear: syncGroupClear
+  syncGroupClear: syncGroupClear,
+  syncGroupSetViewState: syncGroupSetViewState
 });
 
 /*! *****************************************************************************
@@ -4119,6 +4205,20 @@ var initialState$4 = {
   groups: {
     byId: {},
     allIds: []
+  },
+  viewState: {
+    timeslider: {
+      groups: [],
+      sourcesById: []
+    },
+    zoompane: {
+      groups: [],
+      sourcesById: []
+    },
+    level: {
+      groups: [],
+      sourcesById: []
+    }
   }
 };
 var reducer$4 = function reducer() {
@@ -4338,6 +4438,12 @@ var reducer$4 = function reducer() {
     case SYNCGROUPS_CLEAR:
       return initialState$4;
 
+    case SYNCGROUPS_SET_VIEW_STATE:
+      return produce(state, function (draft) {
+        var viewState = action.payload.viewState;
+        draft.viewState = viewState;
+      });
+
     default:
       return state;
   }
@@ -4449,6 +4555,9 @@ var getTargetGroups = function getTargetGroups(state, payload, actionType) {
   }, []);
   return groups;
 };
+var syncGroupGetViewState = createSelector(syncGroupStore, function (store) {
+  return store.viewState;
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4758,7 +4867,8 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSIns
         id: wmLayer.service,
         name: wmLayer.title,
         service: wmLayer.service,
-        layers: layers
+        layers: layers,
+        isUserAddedService: false
       },
       layerStyle: {
         origin: origin,
@@ -4819,7 +4929,7 @@ var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
     _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
     _marked3$4 = /*#__PURE__*/regeneratorRuntime.mark(layerActionsSaga),
     _marked4$2 = /*#__PURE__*/regeneratorRuntime.mark(addLayerActionsSaga),
-    _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerActionsSaga),
+    _marked5$2 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerActionsSaga),
     _marked6$1 = /*#__PURE__*/regeneratorRuntime.mark(moveLayerActionsSaga),
     _marked7$1 = /*#__PURE__*/regeneratorRuntime.mark(setActiveLayerIdActionsSaga),
     _marked8 = /*#__PURE__*/regeneratorRuntime.mark(mapBaseLayerActionsSaga),
@@ -5001,7 +5111,7 @@ function deleteLayerActionsSaga(_ref5) {
           return _context5.stop();
       }
     }
-  }, _marked5$1);
+  }, _marked5$2);
 }
 function moveLayerActionsSaga(_ref6) {
   var payload, type, targets;
@@ -5165,32 +5275,132 @@ function rootSaga$4() {
   }, _marked9);
 }
 
-var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
-    _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
-    _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
-    _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
-function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
-  var group;
-  return regeneratorRuntime.wrap(function updateSourceValueWhenLinkingComponentToGroupSaga$(_context) {
-    while (1) {
-      switch (_context.prev = _context.next) {
-        case 0:
-          _context.next = 2;
-          return select(getSynchronizationGroup, groupId);
+/* *
+ * 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
+*/
 
-        case 2:
-          group = _context.sent;
+var createSyncGroupViewState = function createSyncGroupViewState(groups, sources) {
+  var initialState = produce(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;
 
-          if (group) {
-            _context.next = 5;
-            break;
-          }
+      var groupType = (_a = groupTypes.find(function (object) {
+        return object.syncType === groups.byId[id].type;
+      })) === null || _a === void 0 ? void 0 : _a.groupType;
 
-          return _context.abrupt("return");
+      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
+    */
 
-        case 5:
-          _context.t0 = group.type;
-          _context.next = _context.t0 === SYNCGROUPS_TYPE_SETTIME ? 8 : _context.t0 === SYNCGROUPS_TYPE_SETBBOX ? 13 : 18;
+    Object.keys(sources.byId).forEach(function (id) {
+      groupTypes.forEach(function (_ref) {
+        var syncType = _ref.syncType,
+            groupType = _ref.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 = createSelector(groups, sources, createSyncGroupViewState);
+
+var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
+    _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
+    _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
+    _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(updateViewStateSaga),
+    _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
+function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
+  var group;
+  return regeneratorRuntime.wrap(function updateSourceValueWhenLinkingComponentToGroupSaga$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return select(getSynchronizationGroup, groupId);
+
+        case 2:
+          group = _context.sent;
+
+          if (group) {
+            _context.next = 5;
+            break;
+          }
+
+          return _context.abrupt("return");
+
+        case 5:
+          _context.t0 = group.type;
+          _context.next = _context.t0 === SYNCGROUPS_TYPE_SETTIME ? 8 : _context.t0 === SYNCGROUPS_TYPE_SETBBOX ? 13 : 18;
           break;
 
         case 8:
@@ -5285,25 +5495,76 @@ function linkGroupTargetSaga(_ref2) {
     }
   }, _marked3$3);
 }
-
-function rootSaga$3() {
-  return regeneratorRuntime.wrap(function rootSaga$(_context4) {
+function updateViewStateSaga() {
+  var viewState;
+  return regeneratorRuntime.wrap(function updateViewStateSaga$(_context4) {
     while (1) {
       switch (_context4.prev = _context4.next) {
         case 0:
           _context4.next = 2;
+          return select(createSyncGroupViewStateSelector);
+
+        case 2:
+          viewState = _context4.sent;
+          _context4.next = 5;
+          return put(syncGroupSetViewState({
+            viewState: viewState
+          }));
+
+        case 5:
+        case "end":
+          return _context4.stop();
+      }
+    }
+  }, _marked4$1);
+}
+
+function rootSaga$3() {
+  return regeneratorRuntime.wrap(function rootSaga$(_context5) {
+    while (1) {
+      switch (_context5.prev = _context5.next) {
+        case 0:
+          _context5.next = 2;
           return takeLatest(SYNCGROUPS_ADD_TARGET, addGroupTargetSaga);
 
         case 2:
-          _context4.next = 4;
+          _context5.next = 4;
           return takeLatest(SYNCGROUPS_TOGGLE_LINK_TARGET, linkGroupTargetSaga);
 
         case 4:
+          _context5.next = 6;
+          return takeLatest(SYNCGROUPS_ADD_GROUP, updateViewStateSaga);
+
+        case 6:
+          _context5.next = 8;
+          return takeLatest(SYNCGROUPS_REMOVE_GROUP, updateViewStateSaga);
+
+        case 8:
+          _context5.next = 10;
+          return takeLatest(SYNCGROUPS_ADD_SOURCE, updateViewStateSaga);
+
+        case 10:
+          _context5.next = 12;
+          return takeLatest(SYNCGROUPS_REMOVE_SOURCE, updateViewStateSaga);
+
+        case 12:
+          _context5.next = 14;
+          return takeLatest(SYNCGROUPS_ADD_TARGET, updateViewStateSaga);
+
+        case 14:
+          _context5.next = 16;
+          return takeLatest(SYNCGROUPS_REMOVE_TARGET, updateViewStateSaga);
+
+        case 16:
+          _context5.next = 18;
+          return takeLatest(SYNCGROUPS_TOGGLE_LINK_TARGET, updateViewStateSaga);
+
+        case 18:
         case "end":
-          return _context4.stop();
+          return _context5.stop();
       }
     }
-  }, _marked4$1);
+  }, _marked5$1);
 }
 
 /* *
@@ -5330,41 +5591,6 @@ var synchronizationGroupConfig = {
   sagas: [rootSaga$4, rootSaga$3]
 };
 
-var useStyles$B = makeStyles(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,
       _a$list = _a.list,
@@ -5390,8 +5616,6 @@ var TooltipSelect = function TooltipSelect(_a) {
       tooltipOpen = _React$useState4[0],
       setTooltipOpen = _React$useState4[1];
 
-  var classes = useStyles$B();
-
   var preventDefault = function preventDefault(event) {
     event.preventDefault();
     event.stopPropagation();
@@ -5456,8 +5680,46 @@ var TooltipSelect = function TooltipSelect(_a) {
     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)));
@@ -5506,7 +5768,7 @@ var types = /*#__PURE__*/Object.freeze({
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   actions: actions$1,
-  constants: constants,
+  constants: constants$1,
   types: types,
   initialState: initialState$4
 });
@@ -6300,7 +6562,20 @@ var reducer$2 = function reducer() {
     case GENERIC_SYNC_SETBBOX:
       {
         return produce$1(state, function (draft) {
-          action.payload.targets.forEach(function (payload) {
+          var _action$payload21 = action.payload,
+              targetsFromAction = _action$payload21.targets,
+              source = _action$payload21.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, _toConsumableArray(targetsFromAction));
+          targets.forEach(function (payload) {
             var targetId = payload.targetId,
                 bbox = payload.bbox,
                 srs = payload.srs;
@@ -6318,9 +6593,9 @@ var reducer$2 = function reducer() {
 
     case WEBMAP_TOGGLE_AUTO_UPDATE:
       {
-        var _action$payload21 = action.payload,
-            _mapId23 = _action$payload21.mapId,
-            shouldAutoUpdate = _action$payload21.shouldAutoUpdate;
+        var _action$payload22 = action.payload,
+            _mapId23 = _action$payload22.mapId,
+            shouldAutoUpdate = _action$payload22.shouldAutoUpdate;
 
         if (!state.byId[_mapId23]) {
           return state;
@@ -6333,9 +6608,9 @@ var reducer$2 = function reducer() {
 
     case WEBMAP_TOGGLE_LOOP:
       {
-        var _action$payload22 = action.payload,
-            _mapId24 = _action$payload22.mapId,
-            shouldLoop = _action$payload22.shouldLoop;
+        var _action$payload23 = action.payload,
+            _mapId24 = _action$payload23.mapId,
+            shouldLoop = _action$payload23.shouldLoop;
 
         if (!state.byId[_mapId24]) {
           return state;
@@ -6348,9 +6623,9 @@ var reducer$2 = function reducer() {
 
     case WEBMAP_TOGGLE_TIMESTEP_AUTO:
       {
-        var _action$payload23 = action.payload,
-            _mapId25 = _action$payload23.mapId,
-            timestepAuto = _action$payload23.timestepAuto;
+        var _action$payload24 = action.payload,
+            _mapId25 = _action$payload24.mapId,
+            timestepAuto = _action$payload24.timestepAuto;
 
         if (!state.byId[_mapId25]) {
           return state;
@@ -6363,9 +6638,9 @@ var reducer$2 = function reducer() {
 
     case WEBMAP_TOGGLE_TIME_SLIDER_HOVER:
       {
-        var _action$payload24 = action.payload,
-            _mapId26 = _action$payload24.mapId,
-            isTimeSliderHoverOn = _action$payload24.isTimeSliderHoverOn;
+        var _action$payload25 = action.payload,
+            _mapId26 = _action$payload25.mapId,
+            isTimeSliderHoverOn = _action$payload25.isTimeSliderHoverOn;
 
         if (!state.byId[_mapId26]) {
           return state;
@@ -6378,9 +6653,9 @@ var reducer$2 = function reducer() {
 
     case WEBMAP_SET_PIN:
       {
-        var _action$payload25 = action.payload,
-            _mapId27 = _action$payload25.mapId,
-            mapPinLocation = _action$payload25.mapPinLocation;
+        var _action$payload26 = action.payload,
+            _mapId27 = _action$payload26.mapId,
+            mapPinLocation = _action$payload26.mapPinLocation;
 
         if (!state.byId[_mapId27]) {
           return state;
@@ -6393,9 +6668,9 @@ var reducer$2 = function reducer() {
 
     case WEBMAP_DISABLE_PIN:
       {
-        var _action$payload26 = action.payload,
-            _mapId28 = _action$payload26.mapId,
-            disableMapPin = _action$payload26.disableMapPin;
+        var _action$payload27 = action.payload,
+            _mapId28 = _action$payload27.mapId,
+            disableMapPin = _action$payload27.disableMapPin;
 
         if (!state.byId[_mapId28]) {
           return state;
@@ -6414,9 +6689,9 @@ var reducer$2 = function reducer() {
          * These targets can be used as payloads in new Layer actions.
          * These actions are here handled via the layer reducer, as it is the same logic
          */
-        var _action$payload27 = action.payload,
-            targets = _action$payload27.targets,
-            source = _action$payload27.source;
+        var _action$payload28 = action.payload,
+            targets = _action$payload28.targets,
+            source = _action$payload28.source;
         return targets.reduce(function (prevState, target) {
           var action = {
             payload: target,
@@ -7244,6 +7519,39 @@ var enableOnlyOneKeyword = function enableOnlyOneKeyword(payload) {
   };
 };
 
+/* *
+ * 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);
+  }
+};
+
 var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
     _marked2 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectServiceRemovedSaga),
     _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
@@ -7291,6 +7599,23 @@ function layerSelectServiceRemovedSaga(capturedAction) {
     }
   }, _marked2);
 }
+function addServiceToLocalStorageSaga(_ref) {
+  var payload = _ref.payload;
+  var id = payload.id,
+      isUserAddedService = payload.isUserAddedService,
+      name = payload.name,
+      service = payload.service;
+  if (!isUserAddedService) return;
+  var localStorageServices = getUserAddedServices();
+  setUserAddedServices({
+    byId: Object.assign(Object.assign({}, localStorageServices.byId), _defineProperty({}, service, {
+      id: id,
+      name: name,
+      service: service
+    })),
+    allIds: _toConsumableArray(new Set([].concat(_toConsumableArray(localStorageServices.allIds || []), [service])))
+  });
+}
 function rootSaga() {
   return regeneratorRuntime.wrap(function rootSaga$(_context3) {
     while (1) {
@@ -7304,6 +7629,10 @@ function rootSaga() {
           return takeEvery(MAP_SERVICES_REMOVE_SERVICE, layerSelectServiceRemovedSaga);
 
         case 4:
+          _context3.next = 6;
+          return takeEvery(MAP_SERVICES_SET_LAYERS, addServiceToLocalStorageSaga);
+
+        case 6:
         case "end":
           return _context3.stop();
       }
@@ -8065,7 +8394,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$A = makeStyles({
+var useStyles$w = makeStyles({
   buttonDiv: {
     position: 'relative'
   },
@@ -8101,7 +8430,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
       handleClose = _ref.handleClose,
       _ref$layerType = _ref.layerType,
       layerType = _ref$layerType === void 0 ? LayerType.mapLayer : _ref$layerType;
-  var classes = useStyles$A();
+  var classes = useStyles$w();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8254,7 +8583,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var styles = {
+var styles$1 = {
   buttonDiv: {
     position: 'relative'
   },
@@ -8306,7 +8635,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
     title: tooltip
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: handleClose,
-    sx: styles.button,
+    sx: styles$1.button,
     disableRipple: true,
     "data-testid": "addLayersButton",
     ref: ref,
@@ -8360,6 +8689,9 @@ var LayerManagerColumnsLarge = makeStyles({
   column6: {
     width: iconButtonSize * 2,
     display: 'inline-flex'
+  },
+  columns35: {
+    width: "calc((100% - ".concat(iconButtonSize * totalButtons, "px) * 0.75)")
   }
 });
 var LayerManagerColumnsSmall = makeStyles({
@@ -8381,6 +8713,9 @@ var LayerManagerColumnsSmall = makeStyles({
   column6: {
     width: iconButtonSize * 2,
     display: 'inline-flex'
+  },
+  columns35: {
+    display: 'none'
   }
 });
 var LayerManagerWidth;
@@ -8465,7 +8800,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$z = makeStyles({
+var useStyles$v = makeStyles({
   row: {
     height: '32px'
   },
@@ -8489,7 +8824,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
-  var classes = useStyles$z();
+  var classes = useStyles$v();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -8566,18 +8901,18 @@ var useTooltipContainerStyles = makeStyles(function (theme) {
         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',
@@ -8697,7 +9032,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Select dimension"), layerDimensions.map(function (dimension) {
+  }, "Dimension"), layerDimensions.map(function (dimension) {
     return /*#__PURE__*/React.createElement(MenuItem, {
       key: dimension.name,
       value: dimension.name
@@ -8723,7 +9058,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Select dimension value. (", valuesToDisplay.length, " options)"), valuesToDisplay.map(function (dimValue) {
+  }, "Dimension value (", valuesToDisplay.length, " options)"), valuesToDisplay.map(function (dimValue) {
     return /*#__PURE__*/React.createElement(MenuItem, {
       key: dimValue,
       value: dimValue
@@ -8731,194 +9066,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
   }))));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var useStyles$y = makeStyles(function (theme) {
-  return createStyles({
-    button: {
-      height: 28,
-      width: 28,
-      borderRadius: 5,
-      marginTop: 2,
-      color: function color(_ref) {
-        var isActive = _ref.isActive,
-            isAccessible = _ref.isAccessible,
-            isEnabled = _ref.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(_ref2) {
-        var isActive = _ref2.isActive;
-        return isActive ? theme.palette.geowebColors.buttons.primary.active.fill : 'inherit';
-      },
-      '&:focus': {
-        backgroundColor: function backgroundColor(_ref3) {
-          var isActive = _ref3.isActive;
-          return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
-        },
-        outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-        borderRadius: 0
-      },
-      '&:hover': {
-        backgroundColor: function backgroundColor(_ref4) {
-          var isActive = _ref4.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 _a$tooltipTitle = _a.tooltipTitle,
-      tooltipTitle = _a$tooltipTitle === void 0 ? '' : _a$tooltipTitle,
-      _a$onClick = _a.onClick,
-      onClick = _a$onClick === void 0 ? function () {} : _a$onClick,
-      _a$isActive = _a.isActive,
-      isActive = _a$isActive === void 0 ? false : _a$isActive,
-      _a$isEnabled = _a.isEnabled,
-      isEnabled = _a$isEnabled === void 0 ? true : _a$isEnabled,
-      icon = _a.icon,
-      testId = _a.testId,
-      _a$isAccessible = _a.isAccessible,
-      isAccessible = _a$isAccessible === void 0 ? false : _a$isAccessible,
-      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.createElement(Tooltip, {
-    title: tooltipTitle,
-    placement: "top",
-    classes: {
-      popper: classes.popper
-    }
-  }, /*#__PURE__*/React.createElement(IconButton, Object.assign({
-    size: "small",
-    onClick: handleClick,
-    "data-testid": testId,
-    className: "".concat(classes.button, " ").concat(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(function (theme) {
-  return createStyles({
-    checkbox: {
-      color: 'inherit',
-      padding: 4,
-      borderRadius: 5,
-      '&.Mui-focusVisible': {
-        backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
-      },
-      '&:hover': {
-        backgroundColor: 'transparent!important'
-      },
-      '&.Mui-checked': {
-        color: 'inherit'
-      }
-    }
-  });
-});
-
-var EnableLayer = function EnableLayer(_ref) {
-  var isEnabled = _ref.isEnabled,
-      title = _ref.title,
-      onChangeEnableLayer = _ref.onChangeEnableLayer;
-  var classes = useStyles$x(isEnabled);
-
-  var onClick = function onClick() {
-    onChangeEnableLayer(!isEnabled);
-  };
-
-  var visibilityIcon = /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
-    width: 24,
-    height: 24,
-    fill: "transparent"
-  }), /*#__PURE__*/React.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.createElement(SvgIcon, {
-    style: {
-      marginTop: 2
-    }
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: 24,
-    height: 24,
-    fill: "transparent"
-  }), /*#__PURE__*/React.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.createElement(LayerManagerButton, {
-    tooltipTitle: title,
-    onClick: onClick,
-    icon: /*#__PURE__*/React.createElement(Checkbox, {
-      className: classes.checkbox,
-      icon: visibilityOffIcon,
-      checkedIcon: visibilityIcon,
-      checked: isEnabled,
-      disableFocusRipple: true,
-      tabIndex: -1
-    }),
-    testId: "enableLayer",
-    isEnabled: isEnabled
-  });
-};
-
-var useStyles$w = makeStyles(function (theme) {
+var useStyles$u = makeStyles(function (theme) {
   return createStyles({
     dropdownEmpty: {
       paddingLeft: 8,
@@ -8968,7 +9116,7 @@ var RenderLayers = function RenderLayers(_ref) {
       layers = _ref$layers === void 0 ? [] : _ref$layers,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$w();
+  var classes = useStyles$u();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
   if (!layers || !layers.length) {
@@ -9014,7 +9162,7 @@ var RenderLayers = function RenderLayers(_ref) {
     requiresCtrlToChange: true
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Select layer"), extendedLayers.map(function (layerFromServiceLayers) {
+  }, "Layer"), extendedLayers.map(function (layerFromServiceLayers) {
     return /*#__PURE__*/React.createElement(MenuItem, {
       key: layerFromServiceLayers.name,
       value: layerFromServiceLayers.name,
@@ -9023,7 +9171,7 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var useStyles$v = makeStyles(function (theme) {
+var useStyles$t = makeStyles(function (theme) {
   return {
     opacityDiv: {
       height: 'calc(100% - 5px)',
@@ -9046,7 +9194,7 @@ var useStyles$v = makeStyles(function (theme) {
       position: 'fixed',
       top: '-5px',
       boxSizing: 'initial',
-      zIndex: 1,
+      zIndex: 2,
       boxShadow: theme.shadows[8]
     }
   };
@@ -9084,7 +9232,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$v();
+  var classes = useStyles$t();
   var sliderClasses = sliderStyles();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
@@ -9288,7 +9436,7 @@ var RenderStyles = function RenderStyles(_ref) {
     requiresCtrlToChange: true
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Select style"), styles.map(function (styleFromlayer) {
+  }, "Style"), styles.map(function (styleFromlayer) {
     return /*#__PURE__*/React.createElement(MenuItem, {
       key: styleFromlayer.name,
       value: styleFromlayer.name
@@ -9312,59 +9460,22 @@ var RenderStyles = function RenderStyles(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$u = makeStyles(function () {
-  return createStyles({
-    icon: {
-      width: 20,
-      height: 20
-    }
-  });
-});
-
-var DeleteButton = function DeleteButton(_ref) {
-  var tooltipTitle = _ref.tooltipTitle,
-      onClickDelete = _ref.onClickDelete,
-      _ref$isEnabled = _ref.isEnabled,
-      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$u();
-  return /*#__PURE__*/React.createElement(LayerManagerButton, {
-    tooltipTitle: tooltipTitle,
-    onClick: onClickDelete,
-    icon: /*#__PURE__*/React.createElement(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(function (theme) {
+var useStyles$s = makeStyles(function (theme) {
   return createStyles({
     svgIcon: {
       fill: function fill(_ref) {
-        var isActive = _ref.isActive;
+        var isActive = _ref.isActive,
+            isEnabled = _ref.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;
       }
     }
   });
@@ -9378,7 +9489,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
       isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
       _ref2$isEnabled = _ref2.isEnabled,
       isEnabled = _ref2$isEnabled === void 0 ? true : _ref2$isEnabled;
-  var classes = useStyles$t({
+  var classes = useStyles$s({
     isActive: isActive,
     isEnabled: isEnabled
   });
@@ -9406,7 +9517,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
     }))));
   };
 
-  return /*#__PURE__*/React.createElement(LayerManagerButton, {
+  return /*#__PURE__*/React.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickActivate,
     icon: /*#__PURE__*/React.createElement(Icon, null),
@@ -9431,7 +9542,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$s = makeStyles(function (theme) {
+var useStyles$r = makeStyles(function (theme) {
   return createStyles({
     row: {
       background: function background(isEnabled) {
@@ -9465,6 +9576,8 @@ var LayerRow = function LayerRow(_ref) {
   } : _ref$onLayerRowClick,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+      _ref$isLayerMissing = _ref.isLayerMissing,
+      isLayerMissing = _ref$isLayerMissing === void 0 ? false : _ref$isLayerMissing,
       onLayerEnable = _ref.onLayerEnable,
       onLayerChangeName = _ref.onLayerChangeName,
       onLayerChangeStyle = _ref.onLayerChangeStyle,
@@ -9482,7 +9595,7 @@ var LayerRow = function LayerRow(_ref) {
       layerActiveLayout = _ref.layerActiveLayout,
       layerManagerWidth = _ref.layerManagerWidth,
       dragHandle = _ref.dragHandle;
-  var classes = useStyles$s(isEnabled);
+  var classes = useStyles$r(isEnabled);
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
   var onClickRow = function onClickRow() {
@@ -9497,7 +9610,7 @@ var LayerRow = function LayerRow(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnSizes.column1
-  }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default.createElement(EnableLayer, {
+  }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default.createElement(EnableButton, {
     isEnabled: layer.enabled,
     title: layer.name,
     onChangeEnableLayer: function onChangeEnableLayer() {
@@ -9520,7 +9633,13 @@ var LayerRow = function LayerRow(_ref) {
         name: name
       });
     }
-  })), /*#__PURE__*/React__default.createElement(Grid, {
+  })), isLayerMissing ? /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    className: "".concat(columnSizes.columns35)
+  }, /*#__PURE__*/React__default.createElement(AlertBanner, {
+    title: "This layer could not be loaded: does not exist on the server.",
+    isCompact: true
+  })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: "".concat(columnSizes.column3)
   }, layerStylesLayout || /*#__PURE__*/React__default.createElement(RenderStyles, {
@@ -9563,10 +9682,10 @@ var LayerRow = function LayerRow(_ref) {
         dimension: dimension
       });
     }
-  })), /*#__PURE__*/React__default.createElement(Grid, {
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: columnSizes.column6
-  }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(DeleteButton, {
+  }, layerDeleteLayout || /*#__PURE__*/React__default.createElement(ManagerDeleteButton, {
     tooltipTitle: "Remove layer",
     onClickDelete: function onClickDelete() {
       onLayerDelete({
@@ -9616,7 +9735,7 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
   var isLayerEnabled = useSelector(function (store) {
     return getLayerEnabled(store, layerId);
   });
-  return /*#__PURE__*/React.createElement(DeleteButton, {
+  return /*#__PURE__*/React.createElement(ManagerDeleteButton, {
     tooltipTitle: "Remove layer",
     onClickDelete: function onClickDelete() {
       layerDelete$1({
@@ -9660,7 +9779,7 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
       enabled: enabled
     }));
   }, [dispatch]);
-  return /*#__PURE__*/React.createElement(EnableLayer, {
+  return /*#__PURE__*/React.createElement(EnableButton, {
     isEnabled: isEnabled,
     title: "Toggle this layer's visibility",
     onChangeEnableLayer: function onChangeEnableLayer(enable) {
@@ -10004,10 +10123,23 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
   var isEnabled = useSelector(function (store) {
     return getLayerEnabled(store, layerId);
   });
+  var layerName = useSelector(function (store) {
+    return getLayerName(store, layerId);
+  });
+  var layerService = useSelector(function (store) {
+    return getLayerService(store, layerId);
+  });
+  var layers = 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.createElement(LayerRow, {
     isEnabled: isEnabled,
     mapId: mapId,
     layerId: layerId,
+    isLayerMissing: isLayerMissing,
     layerEnableLayout: /*#__PURE__*/React.createElement(EnableLayerConnect, {
       layerId: layerId
     }),
@@ -10067,7 +10199,7 @@ var DragHandle = function DragHandle(_ref) {
       _ref$hideTooltip = _ref.hideTooltip,
       hideTooltip = _ref$hideTooltip === void 0 ? false : _ref$hideTooltip;
   var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
-  return /*#__PURE__*/React__default.createElement(LayerManagerButton, {
+  return /*#__PURE__*/React__default.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
     icon: /*#__PURE__*/React__default.createElement(DragIndicator, null),
     testId: "dragHandle".concat(index !== undefined ? "-".concat(index) : ''),
@@ -10089,7 +10221,7 @@ var DragHandle = function DragHandle(_ref) {
   });
 };
 
-var useStyles$r = makeStyles(function () {
+var useStyles$q = makeStyles(function () {
   return {
     layerRows: {
       width: '100%',
@@ -10156,7 +10288,7 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
 
   var isSorting = activeDragIndex !== null;
   var isDragDisabled = layerIds.length === 1;
-  var classes = useStyles$r(isSorting);
+  var classes = useStyles$q(isSorting);
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
@@ -10254,7 +10386,7 @@ var BaseLayers = function BaseLayers(_ref) {
     }
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Select base layer"), availableBaseLayers.map(function (baseLayer) {
+  }, "Base layer"), availableBaseLayers.map(function (baseLayer) {
     return /*#__PURE__*/React.createElement(MenuItem, {
       key: baseLayer.id,
       value: baseLayer.id
@@ -10366,7 +10498,7 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$q = makeStyles({
+var useStyles$p = makeStyles({
   layerRow: {
     width: '100%',
     height: '36px'
@@ -10389,7 +10521,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  var classes = useStyles$q();
+  var classes = useStyles$p();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -10418,7 +10550,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
   })));
 };
 
-var useStyles$p = makeStyles({
+var useStyles$o = makeStyles({
   layerRowContainer: {
     position: 'relative',
     width: '100%',
@@ -10453,7 +10585,7 @@ var LayerManager = function LayerManager(_ref) {
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect,
       _ref$showAddLayersToo = _ref.showAddLayersTooltip,
       showAddLayersTooltip = _ref$showAddLayersToo === void 0 ? true : _ref$showAddLayersToo;
-  var classes = useStyles$p();
+  var classes = useStyles$o();
 
   var _React$useState = React.useState(LayerManagerWidth.lg),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -10860,7 +10992,8 @@ var ServicePopup = function ServicePopup(_ref) {
                   id: serviceUrl,
                   name: serviceName,
                   service: serviceUrl,
-                  layers: serviceLayers
+                  layers: serviceLayers,
+                  isUserAddedService: true
                 });
                 setIsLoading(false);
                 closePopupAndResetState();
@@ -11325,7 +11458,7 @@ var filterLayersFromService = function filterLayersFromService(serviceId, servic
   });
 };
 
-var useStyles$o = makeStyles(function (theme) {
+var useStyles$n = makeStyles(function (theme) {
   return {
     layerRow: {
       background: theme.palette.geowebColors.cards.cardContainer,
@@ -11383,7 +11516,7 @@ var LayerList = function LayerList(_ref) {
       mapLayers = _ref.mapLayers,
       keywordIds = _ref.keywordIds,
       allKeywordsActive = _ref.allKeywordsActive;
-  var classes = useStyles$o();
+  var classes = useStyles$n();
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -11638,7 +11771,7 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
   });
 };
 
-var useStyles$n = makeStyles(function (theme) {
+var useStyles$m = makeStyles(function (theme) {
   return createStyles({
     serviceChips: {
       width: '100%',
@@ -11662,7 +11795,7 @@ var useStyles$n = makeStyles(function (theme) {
       fontSize: '0.875rem'
     },
     scrollArrowLeft: {
-      width: '120px',
+      width: '100px',
       marginBottom: '-12px',
       height: '34px',
       backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), ".concat(theme.palette.geowebColors.background.surfaceApp, " 51%)"),
@@ -11670,7 +11803,10 @@ var useStyles$n = makeStyles(function (theme) {
       marginRight: '-120px',
       "float": 'left',
       zIndex: 1,
-      position: 'relative'
+      position: 'relative',
+      '&:hover': {
+        color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+      }
     },
     serviceList: {
       height: '32px',
@@ -11679,13 +11815,16 @@ var useStyles$n = makeStyles(function (theme) {
       overflow: 'hidden'
     },
     scrollArrowRight: {
-      width: '120px',
+      width: '100px',
       marginBottom: '-12px',
       height: '34px',
       backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), ".concat(theme.palette.geowebColors.background.surfaceApp, " 51%)"),
       right: '0px',
       position: 'fixed',
-      cursor: 'pointer'
+      cursor: 'pointer',
+      '&:hover': {
+        color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+      }
     }
   });
 });
@@ -11713,7 +11852,7 @@ var ServiceList = function ServiceList(_ref4) {
   var ref = React.useRef(null);
   var scrollSpeed = 5;
   var maxWidthValue = ref && ref.current && ref.current.scrollWidth && ref.current.scrollWidth >= layerSelectWidth - margin && ref.current.scrollWidth || layerSelectWidth - 50;
-  var classes = useStyles$n({
+  var classes = useStyles$m({
     margin: margin,
     maxWidthValue: maxWidthValue
   });
@@ -11827,63 +11966,49 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
   });
 };
 
-var useStyles$m = makeStyles(function (theme) {
-  return createStyles({
-    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(_ref) {
   var services = _ref.services,
       mapStoreRemoveService = _ref.mapStoreRemoveService,
       _ref$layers = _ref.layers,
       layers = _ref$layers === void 0 ? [] : _ref$layers;
-  var classes = useStyles$m();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -11907,11 +12032,11 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    className: classes.servicesContainer,
+    sx: styles.servicesContainer,
     "data-testid": "ServiceDialog"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.header
-  }, " Services"), /*#__PURE__*/React.createElement(List, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles.header
+  }, "Services"), /*#__PURE__*/React.createElement(List, {
     disablePadding: true
   }, services.map(function (service) {
     return /*#__PURE__*/React.createElement(ListItem, {
@@ -11938,7 +12063,6 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
       size: "large"
     }, /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
       d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z",
-      fill: classes.iconFill,
       fillRule: "evenodd"
     })))))), /*#__PURE__*/React.createElement(Tooltip, {
       title: "Delete Service"
@@ -11951,18 +12075,17 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
       "data-testid": "removeServiceButton"
     }, /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
       d: "M17.504 8.228c.588 0 1.027.48.973 1.066l-.876 9.64A1.197 1.197 0 0 1 16.434 20H8.41c-.59 0-1.115-.48-1.167-1.066l-.877-9.64a.962.962 0 0 1 .973-1.066zm-2.115 1.228a.82.82 0 0 0-.819.82v7.674a.818.818 0 0 0 1.638 0v-7.675a.819.819 0 0 0-.819-.819zm-2.968 0a.819.819 0 0 0-.819.82v7.674a.818.818 0 1 0 1.638 0v-7.675a.82.82 0 0 0-.82-.819zm-2.968 0a.819.819 0 0 0-.818.82v7.674a.818.818 0 1 0 1.637 0v-7.675a.82.82 0 0 0-.82-.819zM13.432 4c.21 0 .404.168.436.376l.107.758 3.256-.01a1.606 1.606 0 0 1 1.61 1.6l.001.535-12.841.038L6 6.76a1.605 1.605 0 0 1 1.6-1.61l3.262-.008.103-.758a.454.454 0 0 1 .434-.38z",
-      fill: classes.iconFill,
       fillRule: "evenodd"
     }))))))));
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classes.footer
+  })), /*#__PURE__*/React.createElement(Box, {
+    sx: styles.footer
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: openAddService,
     "data-testid": "openAddServiceButton",
-    className: classes.button,
+    sx: styles.button,
     variant: "tertiary",
     startIcon: /*#__PURE__*/React.createElement(SvgIcon, {
-      className: classes.icon
+      sx: styles.icon
     }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
       d: "M13.647 13.647h6.82a1.276 1.276 0 1 0 0-2.552h-6.82v-6.82a1.276 1.276 0 1 0-2.552 0v6.82h-6.82a1.276 1.276 0 1 0 0 2.552h6.82v6.82a1.274 1.274 0 0 0 1.276 1.275c.705 0 1.276-.571 1.276-1.276v-6.82z",
       fillRule: "evenodd"
@@ -12639,7 +12762,8 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
               id: service.id,
               name: service.name,
               service: service.url,
-              layers: layers
+              layers: layers,
+              isUserAddedService: false
             });
           }
         })["catch"](function () {
@@ -14962,13 +15086,15 @@ var isColorIntervalEven = function isColorIntervalEven(scale, timestep) {
   }
 };
 
-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 _theme$palette$geoweb7 = theme.palette.geowebColors.timeSlider,
       timelineTimelineSurface = _theme$palette$geoweb7.timelineTimelineSurface,
       timelineNightTime = _theme$palette$geoweb7.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 _getCustomRoundedStar = getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, colorChangeUnit),
@@ -15067,7 +15193,7 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
   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 _map3 = [0, canvasWidth].map(function (px) {
@@ -15077,7 +15203,14 @@ var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, can
       visibleTimeStart = _map4[0],
       visibleTimeEnd = _map4[1];
 
-  drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, scale);
+  var _map5 = [animationStartTime, animationEndTime].map(function (time) {
+    return timestampToPixel(time, centerTime, canvasWidth, secondsPerPx);
+  }),
+      _map6 = _slicedToArray(_map5, 2),
+      animationStartPx = _map6[0],
+      animationEndPx = _map6[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);
@@ -15498,6 +15631,8 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       currentTime = _ref.currentTime,
       dataStartTime = _ref.dataStartTime,
       dataEndTime = _ref.dataEndTime,
+      animationStartTime = _ref.animationStartTime,
+      animationEndTime = _ref.animationEndTime,
       isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
       timeStep = _ref.timeStep,
       onSetNewDate = _ref.onSetNewDate,
@@ -15525,6 +15660,20 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       isNewSelectionTimeRequested = _React$useState6[0],
       setNewSelectionTimeRequested = _React$useState6[1];
 
+  var _React$useState7 = React.useState(animationStartTime && moment.utc(animationStartTime).unix()),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      localAnimationStartTime = _React$useState8[0],
+      setLocalAnimationStartTime = _React$useState8[1];
+
+  var _React$useState9 = React.useState(animationEndTime && moment.utc(animationEndTime).unix()),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      localAnimationEndTime = _React$useState10[0],
+      setLocalAnimationEndTime = _React$useState10[1];
+
+  React.useEffect(function () {
+    setLocalAnimationStartTime(animationStartTime && moment.utc(animationStartTime).unix());
+    setLocalAnimationEndTime(animationEndTime && moment.utc(animationEndTime).unix());
+  }, [animationStartTime, animationEndTime]);
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === 'Home') {
@@ -15622,7 +15771,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       }
     },
     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);
     }
   }));
 };
@@ -15914,6 +16063,9 @@ var drawPlayerLoopIcon = function drawPlayerLoopIcon(ctx, x, y, theme) {
   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();
 };
 
@@ -16690,10 +16842,10 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
 var animationIntervalDefault = 5;
 var connectRedux$3 = 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,
@@ -16701,19 +16853,19 @@ var connectRedux$3 = connect(function (store, props) {
 });
 var PlayButtonConnect = connectRedux$3(function (_ref) {
   var mapId = _ref.mapId,
-      isAnimating = _ref.isAnimating,
       animationStartTime = _ref.animationStartTime,
       animationEndTime = _ref.animationEndTime,
       isDisabled = _ref.isDisabled,
       timeStep = _ref.timeStep,
+      linkedMapAnimationInfo = _ref.linkedMapAnimationInfo,
       mapStartAnimation = _ref.mapStartAnimation,
       mapStopAnimation = _ref.mapStopAnimation;
   var animationInterval = timeStep || animationIntervalDefault;
 
   var onTogglePlay = function onTogglePlay() {
-    if (isAnimating) {
+    if (linkedMapAnimationInfo.isAnimating) {
       mapStopAnimation({
-        mapId: mapId
+        mapId: linkedMapAnimationInfo.id
       });
     } else {
       mapStartAnimation({
@@ -16726,7 +16878,7 @@ var PlayButtonConnect = connectRedux$3(function (_ref) {
   };
 
   return /*#__PURE__*/React__default.createElement(PlayButton, {
-    isAnimating: isAnimating,
+    isAnimating: linkedMapAnimationInfo.isAnimating,
     isDisabled: isDisabled,
     onTogglePlayButton: function onTogglePlayButton() {
       onTogglePlay();
@@ -16783,52 +16935,6 @@ var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_ref) {
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 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 = 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 = createSelector(getSyncSourceBySourceId, function (store) {
-  return store && store.payloadByType && store.payloadByType[SYNCGROUPS_TYPE_SETTIME] ? store.payloadByType[SYNCGROUPS_TYPE_SETTIME].value : null;
-});
-
 var connectRedux$2 = connect(function (store, props) {
   return {
     layers: getMapLayers(store, props.mapId),
@@ -16840,7 +16946,9 @@ var connectRedux$2 = connect(function (store, props) {
     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,
@@ -16863,6 +16971,8 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
       isAnimating = _ref.isAnimating,
       timeStep = _ref.timeStep,
       isTimeSliderHoverOn = _ref.isTimeSliderHoverOn,
+      animationStartTime = _ref.animationStartTime,
+      animationEndTime = _ref.animationEndTime,
       stopMapAnimation = _ref.stopMapAnimation,
       setTime = _ref.setTime,
       syncGroupAddSource = _ref.syncGroupAddSource,
@@ -16901,6 +17011,8 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
     isTimeSliderHoverOn: isTimeSliderHoverOn,
     dataStartTime: dataStartTime,
     dataEndTime: dataEndTime,
+    animationStartTime: animationStartTime,
+    animationEndTime: animationEndTime,
     timeStep: timeStep,
     onSetNewDate: function onSetNewDate(newDate) {
       if (isAnimating) {
@@ -18188,6 +18300,172 @@ var tileRenderSettings = {
   }
 };
 
+/* *
+ * 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 _featureCoords2 = feature.geometry.coordinates[_polygonIndex];
+
+      if (_featureCoords2 === undefined) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+      /* Get all vertexes */
+
+
+      var poly = [convertGeoCoordsToScreenCoords(_featureCoords2).map(function (coord) {
+        return [coord.x, coord.y];
+      })];
+
+      try {
+        var isPointInPoly = turf.booleanPointInPolygon(turf.point(point), turf.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 _polygonIndex2 = feature.geometry.coordinates.length - 1; _polygonIndex2 >= 0; _polygonIndex2 -= 1) {
+      var _featureCoords3 = feature.geometry.coordinates[_polygonIndex2][0];
+
+      if (_featureCoords3 === undefined) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
+      var _poly = [convertGeoCoordsToScreenCoords(_featureCoords3).map(function (coord) {
+        return [coord.x, coord.y];
+      })];
+
+      try {
+        var _isPointInPoly = turf.booleanPointInPolygon(turf.point(_point), turf.polygon(_poly));
+
+        if (_isPointInPoly) {
+          return {
+            coordinateIndexInFeature: _polygonIndex2
+          };
+        } // eslint-disable-next-line no-empty
+
+      } catch (e) {}
+    }
+  }
+
+  if (feature.geometry.type === 'LineString') {
+    var _featureCoords4 = feature.geometry.coordinates;
+    /* Get all vertexes */
+
+    var _XYCoords2 = convertGeoCoordsToScreenCoords(_featureCoords4);
+    /* Snap to the vertex closer than specified pixels */
+
+
+    for (var j = 0; j < _XYCoords2.length; j += 1) {
+      var coord = _XYCoords2[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;
+};
+
 var Proj4js = proj4; // Cache for for storing and reusing Proj4 instances
 
 var projectorCache = {}; // Ensure that you have a Proj4 object, pulling from the cache if necessary
@@ -18799,9 +19077,12 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "adagucMouseMove",
     value: function adagucMouseMove(event) {
+      var _this2 = this;
+
       var _this$props2 = this.props,
           isInEditMode = _this$props2.isInEditMode,
-          featureNrToEdit = _this$props2.featureNrToEdit;
+          featureNrToEdit = _this$props2.featureNrToEdit,
+          onHoverFeature = _this$props2.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.
@@ -18814,6 +19095,29 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       this.mouseX = mouseX;
       this.mouseY = mouseY;
 
+      if (onHoverFeature) {
+        var handleMouseStoppedTimer = function handleMouseStoppedTimer() {
+          var result = checkHoverFeatures(_this2.geojson, mouseX, mouseY, function (coordinates) {
+            return _this2.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;
       }
@@ -18891,14 +19195,14 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "triggerMouseDownTimer",
     value: function triggerMouseDownTimer(event) {
-      var _this2 = this;
+      var _this3 = this;
 
       if (!this.doubleClickTimer) this.doubleClickTimer = {};
       var mouseX = event.mouseX,
           mouseY = event.mouseY;
 
       var checkTimeOut = function checkTimeOut() {
-        _this2.doubleClickTimer.isRunning = false;
+        _this3.doubleClickTimer.isRunning = false;
       };
       /* Reset the timer */
 
@@ -19333,9 +19637,35 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "adagucMouseUp",
     value: function adagucMouseUp(event) {
-      var isInEditMode = this.props.isInEditMode;
+      var _this4 = this;
+
+      var _this$props10 = this.props,
+          isInEditMode = _this$props10.isInEditMode,
+          onClickFeature = _this$props10.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 _this4.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;
       }
@@ -19369,9 +19699,9 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "cancelEdit",
     value: function cancelEdit(cancelLastPoint) {
-      var _this$props10 = this.props,
-          isInEditMode = _this$props10.isInEditMode,
-          featureNrToEdit = _this$props10.featureNrToEdit;
+      var _this$props11 = this.props,
+          isInEditMode = _this$props11.isInEditMode,
+          featureNrToEdit = _this$props11.featureNrToEdit;
 
       if (isInEditMode === false) {
         return;
@@ -19544,14 +19874,14 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
        just before adagucviewer will flip the back canvas buffer to the front.
        You are free to draw anything you like on the canvas.
       */
-      var _this$props11 = this.props,
-          featureNrToEdit = _this$props11.featureNrToEdit,
-          isInEditMode = _this$props11.isInEditMode,
-          hoverFeatureCallback = _this$props11.hoverFeatureCallback;
+      var _this$props12 = this.props,
+          featureNrToEdit = _this$props12.featureNrToEdit,
+          isInEditMode = _this$props12.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) {
@@ -19744,19 +20074,6 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
           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 */
 
@@ -20034,9 +20351,9 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "drawLine",
     value: function drawLine(ctx, XYCoords, featureIndex, lineStringIndex) {
-      var _this$props12 = this.props,
-          isInEditMode = _this$props12.isInEditMode,
-          featureNrToEdit = _this$props12.featureNrToEdit;
+      var _this$props13 = this.props,
+          isInEditMode = _this$props13.isInEditMode,
+          featureNrToEdit = _this$props13.featureNrToEdit;
       var feature = this.geojson.features[featureIndex];
       if (!feature || !feature.geometry) return;
       if (feature.geometry.type !== 'LineString') return;
@@ -20080,7 +20397,8 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       // 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
 
@@ -20109,9 +20427,9 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "drawPolygon",
     value: function drawPolygon(ctx, XYCoords, featureIndex, polygonIndex) {
-      var _this$props13 = this.props,
-          isInEditMode = _this$props13.isInEditMode,
-          featureNrToEdit = _this$props13.featureNrToEdit;
+      var _this$props14 = this.props,
+          isInEditMode = _this$props14.isInEditMode,
+          featureNrToEdit = _this$props14.featureNrToEdit;
       var feature = this.geojson.features[featureIndex];
       if (!feature || !feature.geometry) return;
       if (feature.geometry.type !== 'Polygon' && feature.geometry.type !== 'MultiPolygon') return;
@@ -20158,6 +20476,7 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       if (test) {
         this.mouseOverPolygonCoordinates = XYCoords;
         this.mouseOverPolygonFeatureIndex = featureIndex;
+        this.mouseOverPolygonIndex = polygonIndex;
       } // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
 
@@ -20312,9 +20631,9 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props14 = this.props,
-          webmapjs = _this$props14.webmapjs,
-          isInDeleteMode = _this$props14.isInDeleteMode;
+      var _this$props15 = this.props,
+          webmapjs = _this$props15.webmapjs,
+          isInDeleteMode = _this$props15.isInDeleteMode;
 
       if (this.disabled === undefined) {
         this.disabled = isInDeleteMode;
@@ -20379,9 +20698,14 @@ var AdagucMapDrawContainer = function AdagucMapDrawContainer(_ref) {
       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) {
@@ -22825,103 +23149,6 @@ var useStyles = makeStyles(function (theme) {
   });
 });
 
-/* *
- * 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(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 (_ref) {
-        var syncType = _ref.syncType,
-            groupType = _ref.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 = createSelector(syncState, createSyncGroupViewState);
-
 var SyncGroupViewer = function SyncGroupViewer(_ref) {
   var onClose = _ref.onClose,
       isOpen = _ref.isOpen,
@@ -22929,7 +23156,10 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
       syncGroupAddTarget = _ref.syncGroupAddTarget,
       syncGroupRemoveTarget = _ref.syncGroupRemoveTarget,
       syncGroupAddGroup = _ref.syncGroupAddGroup,
-      syncGroupRemoveGroup = _ref.syncGroupRemoveGroup;
+      syncGroupRemoveGroup = _ref.syncGroupRemoveGroup,
+      onMouseDown = _ref.onMouseDown,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order;
 
   /*
       _____ Handle Toggle _____
@@ -23030,7 +23260,9 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
     headerSize: "medium",
     isOpen: isOpen,
     onClose: onClose,
-    "data-testid": "syncGroupViewer"
+    "data-testid": "syncGroupViewer",
+    onMouseDown: onMouseDown,
+    order: order
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SyncGroupList, {
     viewStateData: syncGroupViewState.zoompane,
     title: "ZoomPane",
@@ -23086,14 +23318,12 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var SyncGroupViewerConnect = function SyncGroupViewerConnect(_ref) {
-  var onClose = _ref.onClose,
-      isOpen = _ref.isOpen;
+var SyncGroupViewerConnect = function SyncGroupViewerConnect() {
   var dispatch = useDispatch(); // TODO
   // Improve the selector to prevent re-renders
   // For example dusting anination syncgroups should not re-render
 
-  var viewState = useSelector(createSyncGroupViewStateSelector);
+  var viewState = useSelector(syncGroupGetViewState);
   var syncGroupAddGroup$1 = React.useCallback(function (payload) {
     return dispatch(syncGroupAddGroup(payload));
   }, [dispatch]);
@@ -23106,14 +23336,55 @@ var SyncGroupViewerConnect = function SyncGroupViewerConnect(_ref) {
   var syncGroupRemoveTarget$1 = React.useCallback(function (payload) {
     return dispatch(syncGroupRemoveTarget(payload));
   }, [dispatch]);
+  var isOpenInStore = useSelector(function (store) {
+    return getisDialogOpen(store, 'syncGroups');
+  });
+  var onClose = React.useCallback(function () {
+    return dispatch(setToggleOpenDialog({
+      type: 'syncGroups',
+      setOpen: false
+    }));
+  }, [dispatch]);
+  var uiOrder = useSelector(function (store) {
+    return getDialogOrder(store, 'syncGroups');
+  });
+  var uiIsOrderedOnTop = useSelector(function (store) {
+    return getDialogIsOrderedOnTop(store, 'syncGroups');
+  });
+  var registerDialog$1 = React.useCallback(function () {
+    return dispatch(registerDialog({
+      type: 'syncGroups',
+      setOpen: false
+    }));
+  }, [dispatch]);
+  var unregisterDialog$1 = React.useCallback(function () {
+    return dispatch(unregisterDialog({
+      type: 'syncGroups'
+    }));
+  }, [dispatch]);
+  var onOrderDialog = React.useCallback(function () {
+    if (!uiIsOrderedOnTop) {
+      dispatch(orderDialog({
+        type: 'syncGroups'
+      }));
+    }
+  }, [dispatch, uiIsOrderedOnTop]);
+  React.useEffect(function () {
+    registerDialog$1();
+    return function () {
+      unregisterDialog$1();
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/React.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
   });
 };
 
@@ -23305,4 +23576,4 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
   }, children)));
 };
 
-export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmRefTimePreset, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, TooltipSelect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultConfigurations, filterBaseLayers, filterBbox, filterDimensions, filterMapLayers, filterMapPresets, filterNonTimeDimensions, filterServices, filterSrs, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$6 as layerReducer, makeMapPreset, actions$3 as mapActions, constants$1 as mapConstants, moduleConfig as mapModuleConfig, selectors$1 as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, testLayers, actions$2 as uiActions, uiModuleConfig, selectors as uiSelectors, types$1 as uiTypes, useStyles$3 as useStyles };
+export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmRefTimePreset, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, TooltipSelect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultConfigurations, filterBaseLayers, filterBbox, filterDimensions, filterMapLayers, filterMapPresets, filterNonTimeDimensions, filterServices, filterSrs, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$6 as layerReducer, makeMapPreset, actions$3 as mapActions, constants as mapConstants, moduleConfig as mapModuleConfig, selectors$1 as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, testLayers, actions$2 as uiActions, uiModuleConfig, selectors as uiSelectors, types$1 as uiTypes, useStyles$3 as useStyles };