@opengeoweb/core 2.14.0 → 4.0.0

package/index.esm.js

@@ -1,18 +1,19 @@
-import { createAction, createSlice, createSelector } from '@reduxjs/toolkit';
+import { createAction, createSlice, createSelector, createEntityAdapter } from '@reduxjs/toolkit';
 import produce$1, { current, produce } from 'immer';
 import moment from 'moment';
 import * as React from 'react';
 import React__default, { Component, useRef, useState, useEffect } from 'react';
 import _, { isEqual, debounce, throttle, range } from 'lodash';
-import { takeLatest, put, select, call, all, takeEvery } from 'redux-saga/effects';
+import { takeLatest, put, select, call, all, takeEvery, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { Tooltip, Paper, Typography, Grid, InputLabel, IconButton, Box, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, FormControl, LinearProgress, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
-import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, sliderStyles, tooltipContainerStyles, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
+import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
 import { Pause, Play, Cached, Add, Copy, Flag, DragHandle as DragHandle$1, Filter, Close, Search, Clear, ChevronLeft, ChevronRight, Edit, Delete, Home, Minus, Layers, Equalizer, Sort, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, FastForward, Options, SliderThumb as SliderThumb$1, List as List$1, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import makeStyles from '@mui/styles/makeStyles';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { Sortable, ReactSortable } from 'react-sortablejs';
 import createStyles from '@mui/styles/createStyles';
+import { FixedSizeList } from 'react-window';
 import withStyles from '@mui/styles/withStyles';
 import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
@@ -971,6 +972,8 @@ var createMap = function createMap(_ref) {
       activeMapPresetId = _ref$activeMapPresetI === void 0 ? null : _ref$activeMapPresetI,
       _ref$displayMapPin = _ref.displayMapPin,
       displayMapPin = _ref$displayMapPin === void 0 ? false : _ref$displayMapPin,
+      _ref$disableMapPin = _ref.disableMapPin,
+      disableMapPin = _ref$disableMapPin === void 0 ? false : _ref$disableMapPin,
       _ref$shouldShowZoomCo = _ref.shouldShowZoomControls,
       shouldShowZoomControls = _ref$shouldShowZoomCo === void 0 ? true : _ref$shouldShowZoomCo;
   return {
@@ -998,6 +1001,7 @@ var createMap = function createMap(_ref) {
     isTimeSliderVisible: isTimeSliderVisible,
     activeMapPresetId: activeMapPresetId,
     displayMapPin: displayMapPin,
+    disableMapPin: disableMapPin,
     shouldShowZoomControls: shouldShowZoomControls
   };
 };
@@ -1436,7 +1440,7 @@ var createLayer = function createLayer(_a) {
     status: status
   });
 };
-var initialState$5 = {
+var initialState$6 = {
   byId: {},
   allIds: [],
   availableBaseLayers: {
@@ -1444,8 +1448,8 @@ var initialState$5 = {
     allIds: []
   }
 };
-var slice$5 = createSlice({
-  initialState: initialState$5,
+var slice$6 = createSlice({
+  initialState: initialState$6,
   name: 'layerReducer',
   reducers: {
     addLayer: function addLayer(draft, action) {
@@ -1662,15 +1666,26 @@ var slice$5 = createSlice({
         draft.availableBaseLayers.allIds.push(layer.id);
       });
     },
+    setAvailableBaseLayers: function setAvailableBaseLayers(draft, action) {
+      var layers = action.payload.layers;
+      draft.availableBaseLayers.byId = {};
+      draft.availableBaseLayers.allIds = []; // add new available baselayers
+
+      layers.forEach(function (layer) {
+        if (layer.layerType !== LayerType.baseLayer || !layer.mapId) return;
+        draft.availableBaseLayers.byId[layer.id] = createLayer(Object.assign({}, layer));
+        draft.availableBaseLayers.allIds.push(layer.id);
+      });
+    },
     onUpdateLayerInformation: function onUpdateLayerInformation(draft, action) {
       var _action$payload11 = action.payload,
           layerStyle = _action$payload11.layerStyle,
           layerDimensions = _action$payload11.layerDimensions;
       var layerStyleAction = layerActions.layerChangeStyle(layerStyle);
       var state = current(draft);
-      var intermediateState = layerStyle === null ? state : reducer$5(state, layerStyleAction);
+      var intermediateState = layerStyle === null ? state : reducer$6(state, layerStyleAction);
       var dimensionsAction = layerActions.layerSetDimensions(layerDimensions);
-      var newState = layerDimensions === null ? intermediateState : reducer$5(intermediateState, dimensionsAction);
+      var newState = layerDimensions === null ? intermediateState : reducer$6(intermediateState, dimensionsAction);
       return newState;
     }
   },
@@ -1715,7 +1730,7 @@ var slice$5 = createSlice({
         };
         /* Handle the Layer action with the same logic, using the same reducer */
 
-        return reducer$5(prevState, action);
+        return reducer$6(prevState, action);
       }, state);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -1735,8 +1750,8 @@ var slice$5 = createSlice({
     });
   }
 });
-var reducer$5 = slice$5.reducer;
-var layerActions = slice$5.actions;
+var reducer$6 = slice$6.reducer;
+var layerActions = slice$6.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1754,12 +1769,12 @@ var layerActions = slice$5.actions;
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var initialState$4 = {
+var initialState$5 = {
   byId: {},
   allIds: []
 };
-var slice$4 = createSlice({
-  initialState: initialState$4,
+var slice$5 = createSlice({
+  initialState: initialState$5,
   name: 'serviceReducer',
   reducers: {
     serviceSetLayers: function serviceSetLayers(draft, action) {
@@ -1786,13 +1801,13 @@ var slice$4 = createSlice({
       var serviceLayers = action.payload.serviceLayers;
       if (serviceLayers === null) return draft;
       var mapAction = serviceActions.serviceSetLayers(serviceLayers);
-      var newState = reducer$4(draft, mapAction);
+      var newState = reducer$5(draft, mapAction);
       return newState;
     });
   }
 });
-var reducer$4 = slice$4.reducer;
-var serviceActions = slice$4.actions;
+var reducer$5 = slice$5.reducer;
+var serviceActions = slice$5.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1945,12 +1960,13 @@ var getLayerStyles = createSelector(getLayerFromService, function (layer) {
  * @returns {array} returnType: [] - array containing services
  */
 
-var getServicesInArray = createSelector(servicesStore, function (store) {
+createSelector(servicesStore, function (store) {
   var services = store ? store.byId : {};
   var arrayOfServiceObjects = Object.keys(services).map(function (key) {
     return {
       name: services[key].name,
-      serviceUrl: services[key].serviceUrl
+      serviceUrl: services[key].serviceUrl,
+      isUserAddedService: services[key].isUserAddedService
     };
   });
   return arrayOfServiceObjects;
@@ -1976,13 +1992,13 @@ var createUIDialogElement = function createUIDialogElement(_ref) {
     source: source
   };
 };
-var initialState$3 = {
+var initialState$4 = {
   order: [],
   dialogs: {},
   activeWindowId: undefined
 };
-var slice$3 = createSlice({
-  initialState: initialState$3,
+var slice$4 = createSlice({
+  initialState: initialState$4,
   name: 'uiReducer',
   reducers: {
     registerDialog: function registerDialog(draft, action) {
@@ -2059,8 +2075,8 @@ var slice$3 = createSlice({
     }
   }
 });
-var reducer$3 = slice$3.reducer;
-var uiActions = slice$3.actions;
+var reducer$4 = slice$4.reducer;
+var uiActions = slice$4.actions;
 
 var addBaseLayer = layerActions.addBaseLayer,
     addLayer$1 = layerActions.addLayer,
@@ -2111,12 +2127,12 @@ var createLayersWithIds = function createLayersWithIds(state, layers) {
   });
 };
 
-var initialState$2 = {
+var initialState$3 = {
   byId: {},
   allIds: []
 };
-var slice$2 = createSlice({
-  initialState: initialState$2,
+var slice$3 = createSlice({
+  initialState: initialState$3,
   name: 'mapReducer',
   reducers: {
     registerMap: function registerMap(draft, action) {
@@ -2682,13 +2698,13 @@ var slice$2 = createSlice({
         };
         /* Handle the Layer action with the same logic, using the same reducer */
 
-        return reducer$2(prevState, action);
+        return reducer$3(prevState, action);
       }, draft);
     }).addCase(onUpdateLayerInformation, function (draft, action) {
       var mapDimensions = action.payload.mapDimensions;
       if (mapDimensions === null) return draft;
       var mapAction = mapActions$1.mapUpdateAllMapDimensions(mapDimensions);
-      return reducer$2(draft, mapAction);
+      return reducer$3(draft, mapAction);
     }).addCase(mapChangeDimension, function (draft, action) {
       var _action$payload36 = action.payload,
           mapId = _action$payload36.mapId,
@@ -2727,11 +2743,11 @@ var slice$2 = createSlice({
     });
   }
 });
-var mapActions$1 = Object.assign(Object.assign({}, slice$2.actions), {
+var mapActions$1 = Object.assign(Object.assign({}, slice$3.actions), {
   setMapPreset: setMapPreset,
   mapChangeDimension: mapChangeDimension
 });
-var reducer$2 = slice$2.reducer;
+var reducer$3 = slice$3.reducer;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3228,7 +3244,7 @@ var removeInPlace = function removeInPlace(inDraftArray, condition) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var initialState$1 = {
+var initialState$2 = {
   sources: {
     byId: {},
     allIds: []
@@ -3252,8 +3268,8 @@ var initialState$1 = {
     }
   }
 };
-var slice$1 = createSlice({
-  initialState: initialState$1,
+var slice$2 = createSlice({
+  initialState: initialState$2,
   name: 'synchronizationGroupsReducer',
   reducers: {
     syncGroupAddSource: function syncGroupAddSource(draft, action) {
@@ -3397,7 +3413,7 @@ var slice$1 = createSlice({
       });
     },
     syncGroupClear: function syncGroupClear() {
-      return initialState$1;
+      return initialState$2;
     },
     syncGroupSetViewState: function syncGroupSetViewState(draft, action) {
       var viewState = action.payload.viewState;
@@ -3469,7 +3485,7 @@ var setBboxOrTimeSync = function setBboxOrTimeSync(state, action) {
   });
 };
 
-var _slice$actions = slice$1.actions,
+var _slice$actions = slice$2.actions,
     syncGroupAddGroup = _slice$actions.syncGroupAddGroup,
     syncGroupAddSource = _slice$actions.syncGroupAddSource,
     syncGroupAddTarget = _slice$actions.syncGroupAddTarget;
@@ -3479,8 +3495,8 @@ var _slice$actions = slice$1.actions,
     syncGroupRemoveSource = _slice$actions.syncGroupRemoveSource,
     syncGroupRemoveTarget = _slice$actions.syncGroupRemoveTarget,
     syncGroupSetViewState = _slice$actions.syncGroupSetViewState;
-var actions = slice$1.actions,
-    reducer$1 = slice$1.reducer;
+var actions = slice$2.actions,
+    reducer$2 = slice$2.reducer;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3537,7 +3553,7 @@ var index = /*#__PURE__*/Object.freeze({
   actions: actions,
   constants: constants,
   types: types$1,
-  initialState: initialState$1
+  initialState: initialState$2
 });
 
 /* *
@@ -4150,11 +4166,11 @@ var getPinLocation = createSelector(getMapById, function (store) {
  * Example getDisableMapPin(store);
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
- * @returns {boolean} returnType: boolean or undefined
+ * @returns {boolean} returnType: boolean
  */
 
 var getDisableMapPin = createSelector(getMapById, function (store) {
-  return store ? store.disableMapPin : undefined;
+  return store ? store.disableMapPin : false;
 });
 /**
  * Returns the diplay map pin boolean for the current map
@@ -4343,7 +4359,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getMapPresetError: getMapPresetError
 });
 
-var initialState = {
+var initialState$1 = {
   filters: {
     searchFilter: '',
     activeServices: {
@@ -4356,8 +4372,8 @@ var initialState = {
     }
   }
 };
-var slice = createSlice({
-  initialState: initialState,
+var slice$1 = createSlice({
+  initialState: initialState$1,
   name: 'layerSelect',
   reducers: {
     setSearchFilter: function setSearchFilter(draft, action) {
@@ -4369,7 +4385,8 @@ var slice = createSlice({
           serviceId = _action$payload.serviceId,
           serviceName = _action$payload.serviceName,
           serviceUrl = _action$payload.serviceUrl,
-          keywords = _action$payload.keywords;
+          keywords = _action$payload.keywords,
+          isUserAddedService = _action$payload.isUserAddedService;
 
       if (!draft.filters.activeServices.byId[serviceId]) {
         draft.filters.activeServices.byId[serviceId] = {};
@@ -4404,6 +4421,7 @@ var slice = createSlice({
       draft.filters.activeServices.byId[serviceId].serviceName = serviceName;
       draft.filters.activeServices.byId[serviceId].serviceUrl = serviceUrl;
       draft.filters.activeServices.byId[serviceId].enabled = true;
+      draft.filters.activeServices.byId[serviceId].isUserAddedService = isUserAddedService;
       draft.filters.activeServices.byId[serviceId].keywordsPerService = keywords;
       if (!draft.filters.activeServices.allIds.includes(serviceId)) draft.filters.activeServices.allIds.push(serviceId);
     },
@@ -4514,8 +4532,8 @@ var slice = createSlice({
     }
   }
 });
-var reducer = slice.reducer;
-var layerSelectActions = slice.actions;
+var reducer$1 = slice$1.reducer;
+var layerSelectActions = slice$1.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4647,6 +4665,80 @@ var getKeywordObjectById = function getKeywordObjectById(store, keywordId) {
   return (_d = (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.keywords) === null || _c === void 0 ? void 0 : _c.byId[keywordId]) !== null && _d !== void 0 ? _d : {};
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * 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 snackbarAdapter = createEntityAdapter();
+var initialState = snackbarAdapter.getInitialState();
+var slice = createSlice({
+  initialState: initialState,
+  name: 'snackbar',
+  reducers: {
+    // To open the snackbar call this action
+    // eslint-disable-next-line no-unused-vars
+    openSnackbar: function openSnackbar(draft, action) {},
+    // triggerOpenSnackbarBySaga is triggered by the saga to open the snackbar after the current snackbars have all been closed
+    // DO NOT CALL THIS ACTION DIRECTLY!
+    triggerOpenSnackbarBySaga: function triggerOpenSnackbarBySaga(draft, action) {
+      var snackbarContent = action.payload.snackbarContent; // Ensure we have an id before proceeding
+
+      if (snackbarContent.id === undefined) {
+        return;
+      }
+
+      snackbarAdapter.setOne(draft, snackbarContent);
+    },
+    closeSnackbar: function closeSnackbar(draft) {
+      snackbarAdapter.removeAll(draft);
+    }
+  }
+});
+var reducer = slice.reducer;
+var snackbarActions = slice.actions;
+
+/* *
+ * 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 _snackbarAdapter$getS = snackbarAdapter.getSelectors(function (state) {
+  var _a;
+
+  return (_a = state === null || state === void 0 ? void 0 : state.snackbar) !== null && _a !== void 0 ? _a : {
+    entities: {},
+    ids: []
+  };
+}),
+    getCurrentSnackbarMessages = _snackbarAdapter$getS.selectAll;
+createSelector(getCurrentSnackbarMessages, function (currentMessages) {
+  return currentMessages.length > 0 ? currentMessages[0] : undefined;
+});
+
 var types = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
@@ -4978,15 +5070,15 @@ var getMapBaseLayerActionsTargets = function getMapBaseLayerActionsTargets(state
   });
 };
 
-var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
-    _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
+var _marked$5 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
+    _marked2$5 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
     _marked3$4 = /*#__PURE__*/regeneratorRuntime.mark(layerActionsSaga),
     _marked4$2 = /*#__PURE__*/regeneratorRuntime.mark(addLayerActionsSaga),
     _marked5$2 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerActionsSaga),
     _marked6$1 = /*#__PURE__*/regeneratorRuntime.mark(moveLayerActionsSaga),
     _marked7$1 = /*#__PURE__*/regeneratorRuntime.mark(setActiveLayerIdActionsSaga),
     _marked8$1 = /*#__PURE__*/regeneratorRuntime.mark(mapBaseLayerActionsSaga),
-    _marked9$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$4);
+    _marked9$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$5);
 var setBaseLayers = layerActions.setBaseLayers,
     addLayer = layerActions.addLayer,
     layerChangeDimension = layerActions.layerChangeDimension,
@@ -5034,7 +5126,7 @@ function setTimeSaga(_ref) {
           return _context.stop();
       }
     }
-  }, _marked$4);
+  }, _marked$5);
 }
 function setBBoxSaga(_ref2) {
   var payload, targets, groups;
@@ -5061,7 +5153,7 @@ function setBBoxSaga(_ref2) {
           return _context2.stop();
       }
     }
-  }, _marked2$4);
+  }, _marked2$5);
 }
 function layerActionsSaga(_ref3) {
   var payload, type, targets;
@@ -5276,7 +5368,7 @@ function mapBaseLayerActionsSaga(_ref8) {
     }
   }, _marked8$1);
 }
-function rootSaga$4() {
+function rootSaga$5() {
   return regeneratorRuntime.wrap(function rootSaga$(_context9) {
     while (1) {
       switch (_context9.prev = _context9.next) {
@@ -5435,11 +5527,11 @@ var sources = function sources(store) {
 
 var createSyncGroupViewStateSelector = createSelector(groups, sources, createSyncGroupViewState);
 
-var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
-    _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
+var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
+    _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
     _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
     _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(updateViewStateSaga),
-    _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
+    _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$4);
 function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
   var group;
   return regeneratorRuntime.wrap(function updateSourceValueWhenLinkingComponentToGroupSaga$(_context) {
@@ -5506,7 +5598,7 @@ function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdat
           return _context.stop();
       }
     }
-  }, _marked$3);
+  }, _marked$4);
 }
 function addGroupTargetSaga(_ref) {
   var payload, groupId, linked, targetToUpdate;
@@ -5530,7 +5622,7 @@ function addGroupTargetSaga(_ref) {
           return _context2.stop();
       }
     }
-  }, _marked2$3);
+  }, _marked2$4);
 }
 function linkGroupTargetSaga(_ref2) {
   var payload, groupId, linked, targetToUpdate;
@@ -5580,7 +5672,7 @@ function updateViewStateSaga() {
   }, _marked4$1);
 }
 
-function rootSaga$3() {
+function rootSaga$4() {
   return regeneratorRuntime.wrap(function rootSaga$(_context5) {
     while (1) {
       switch (_context5.prev = _context5.next) {
@@ -5647,14 +5739,14 @@ function rootSaga$3() {
 var synchronizationGroupConfig = {
   id: 'syncronizationGroupStore-module',
   reducerMap: {
-    syncronizationGroupStore: reducer$1
+    syncronizationGroupStore: reducer$2
   },
-  sagas: [rootSaga$4, rootSaga$3]
+  sagas: [rootSaga$5, rootSaga$4]
 };
 
-var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(registerMapUISaga),
-    _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(unregisterUIMapSaga),
-    _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
+var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(registerMapUISaga),
+    _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(unregisterUIMapSaga),
+    _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
 function registerMapUISaga() {
   var fields, source;
   return regeneratorRuntime.wrap(function registerMapUISaga$(_context) {
@@ -5690,7 +5782,7 @@ function registerMapUISaga() {
           return _context.stop();
       }
     }
-  }, _marked$2);
+  }, _marked$3);
 }
 function unregisterUIMapSaga() {
   var fields, activeUI;
@@ -5742,9 +5834,9 @@ function unregisterUIMapSaga() {
           return _context2.stop();
       }
     }
-  }, _marked2$2);
+  }, _marked2$3);
 }
-function rootSaga$2() {
+function rootSaga$3() {
   return regeneratorRuntime.wrap(function rootSaga$(_context3) {
     while (1) {
       switch (_context3.prev = _context3.next) {
@@ -5783,9 +5875,9 @@ function rootSaga$2() {
 var uiModuleConfig = {
   id: 'ui-module',
   reducerMap: {
-    ui: reducer$3
+    ui: reducer$4
   },
-  sagas: [rootSaga$2]
+  sagas: [rootSaga$3]
 };
 
 /* *
@@ -5953,100 +6045,51 @@ var PlayButtonConnect = connectRedux$6(function (_ref) {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
-var parseBoolean = function parseBoolean(value) {
-  return ['true', 'false', true, false].includes(value) && JSON.parse(value);
-};
-
-var isBaseLayer = function isBaseLayer(layer) {
-  return ['baseLayer'].includes(layer.layerType);
-};
-
-var isMapLayer = function isMapLayer(layer) {
-  return ['mapLayer'].includes(layer.layerType);
-};
-
-var isOverLayer = function isOverLayer(layer) {
-  return ['overLayer'].includes(layer.layerType);
-};
-
 var isValidService = function isValidService(service) {
   return Object.prototype.hasOwnProperty.call(service, 'url');
 };
 
-var parseLayerType = function parseLayerType(layer, defaultValue) {
-  if (isBaseLayer(layer)) {
-    return LayerType.baseLayer;
-  }
-
-  if (isMapLayer(layer)) {
-    return LayerType.mapLayer;
-  }
-
-  if (isOverLayer(layer)) {
-    return LayerType.overLayer;
-  }
-
-  return defaultValue;
+var parseBoolean = function parseBoolean(value) {
+  return typeof value === 'boolean' ? value : value === 'true';
 };
-
 var parseLayer = function parseLayer(layer) {
-  var lr = JSON.parse(JSON.stringify(layer)); // Cloning used here to achieve object immutability
-
-  if (!lr.id) {
-    lr.id = generateLayerId();
-  }
-
-  if (lr.layerType) {
-    lr.layerType = parseLayerType(lr, null);
-  }
-
-  if (lr.enabled) {
-    lr.enabled = parseBoolean(lr.enabled);
-  }
-
-  return lr;
+  return Object.assign(Object.assign(Object.assign({}, layer), !layer.id && {
+    id: generateLayerId()
+  }), layer.enabled && {
+    enabled: parseBoolean(layer.enabled)
+  });
 };
 
-var filterBaseLayers = function filterBaseLayers(presetArray) {
-  var hasLayers = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
-  var filteredBaseLayers = hasLayers ? presetArray.filter(function (preset) {
-    return isBaseLayer(preset);
-  }).map(function (filteredPresetLayer) {
-    return parseLayer(filteredPresetLayer);
-  }) : null;
-  var hasBaseLayers = filteredBaseLayers && filteredBaseLayers.length > 0;
-  var baseLayers = hasBaseLayers ? filteredBaseLayers : undefined;
-  return baseLayers;
-};
-var filterMapLayers = function filterMapLayers(presetArray) {
-  var hasLayers = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
-  var filteredMapLayers = hasLayers ? presetArray.filter(function (preset) {
-    return isMapLayer(preset);
-  }).map(function (filteredPresetLayer) {
-    return parseLayer(filteredPresetLayer);
-  }) : null;
-  var hasMapLayers = filteredMapLayers && filteredMapLayers.length > 0;
-  var mapLayers = hasMapLayers ? filteredMapLayers : undefined;
-  return mapLayers;
+var createEmtpyFilteredList = function createEmtpyFilteredList(existingList) {
+  return {
+    mapLayers: existingList,
+    baseLayers: existingList,
+    overLayers: existingList
+  };
 };
+
 var filterLayers = function filterLayers() {
   var layers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var layerParser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (layer) {
+    return layer;
+  };
   return layers.reduce(function (layers, layer) {
     var mapLayers = layers.mapLayers,
         baseLayers = layers.baseLayers,
         overLayers = layers.overLayers;
+    var parsedLayer = layerParser(layer);
 
     if (layer.layerType === LayerType.baseLayer) {
       return {
         mapLayers: mapLayers,
-        baseLayers: baseLayers.concat(layer),
+        baseLayers: baseLayers.concat(parsedLayer),
         overLayers: overLayers
       };
     }
 
     if (layer.layerType === LayerType.mapLayer) {
       return {
-        mapLayers: mapLayers.concat(layer),
+        mapLayers: mapLayers.concat(parsedLayer),
         baseLayers: baseLayers,
         overLayers: overLayers
       };
@@ -6056,16 +6099,12 @@ var filterLayers = function filterLayers() {
       return {
         mapLayers: mapLayers,
         baseLayers: baseLayers,
-        overLayers: overLayers.concat(layer)
+        overLayers: overLayers.concat(parsedLayer)
       };
     }
 
     return layers;
-  }, {
-    mapLayers: [],
-    baseLayers: [],
-    overLayers: []
-  });
+  }, createEmtpyFilteredList([]));
 };
 var filterServices = function filterServices(presetArray) {
   var hasServices = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
@@ -6076,21 +6115,28 @@ var filterServices = function filterServices(presetArray) {
   var services = hasValidServices ? validServices : undefined;
   return services;
 };
-var filterMapPresets = function filterMapPresets(presets) {
-  var preset = presets && presets.preset;
-  var filterredServices = preset && preset.services ? filterServices(preset.services) : undefined;
-  var baseServices = preset && preset.baseServices ? filterServices(preset.baseServices) : undefined;
-  var filteredBaseLayers = preset && preset.layers ? filterBaseLayers(preset.layers) : undefined;
-  var filteredMapLayers = preset && preset.layers ? filterMapLayers(preset.layers) : undefined;
+var filterMapPresets = function filterMapPresets(initialAppPreset) {
+  var preset = initialAppPreset && initialAppPreset.preset || {};
+  var layers = preset.layers,
+      services = preset.services,
+      baseServices = preset.baseServices;
+
+  var _ref = layers ? filterLayers(layers, parseLayer) : createEmtpyFilteredList(undefined),
+      baseLayers = _ref.baseLayers,
+      mapLayers = _ref.mapLayers;
+
+  var filterredServices = services ? filterServices(services) : undefined;
+  var filteredBaseServices = baseServices ? filterServices(baseServices) : undefined;
   var filteredPreset = {
     services: filterredServices,
-    baseServices: baseServices,
-    baseLayers: filteredBaseLayers,
-    mapLayers: filteredMapLayers
+    baseServices: filteredBaseServices,
+    baseLayers: baseLayers,
+    mapLayers: mapLayers
   };
   return filteredPreset;
-};
-var getInitialPresets = function getInitialPresets(mapPreset, defaultInitialPresets) {
+}; // loads the initialPresets.json
+
+var getInitialAppPresets = function getInitialAppPresets(mapPreset, defaultInitialPresets) {
   var filteredPresets = mapPreset ? filterMapPresets(mapPreset) : null;
   var initialPresets = filteredPresets || filterMapPresets(defaultInitialPresets);
   return initialPresets;
@@ -7019,7 +7065,7 @@ CanvasComponent.defaultProps = {
 var defaultCanvasWidth = 150;
 var defaultCanvasHeight = 30; // TODO: remove fontFamily styles after theming is fully implemented
 
-var useStyles$s = makeStyles(function (theme) {
+var useStyles$r = makeStyles(function (theme) {
   return {
     legendCanvas: {
       margin: '10px 0px 10px 0px'
@@ -7087,7 +7133,7 @@ var renderLegendGraphic = function renderLegendGraphic(wmImage, ctx, width, heig
 
 var Legend = function Legend(_ref) {
   var layer = _ref.layer;
-  var classes = useStyles$s();
+  var classes = useStyles$r();
   /* Variable to remember the previous image */
 
   var previousLegendImage = useRef(null);
@@ -7242,7 +7288,7 @@ var Legend = function Legend(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$r = makeStyles(function () {
+var useStyles$q = makeStyles(function () {
   return {
     legendList: {
       display: 'flex',
@@ -7270,7 +7316,7 @@ var LegendDialog = function LegendDialog(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'app' : _ref$source;
-  var classes = useStyles$r();
+  var classes = useStyles$q();
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     startPosition: {
       right: 20,
@@ -7307,7 +7353,7 @@ var LegendDialog = function LegendDialog(_ref) {
   }, "No layers")));
 };
 
-var IS_LEGEND_OPEN_BY_DEFAULT = true;
+var IS_LEGEND_OPEN_BY_DEFAULT = false;
 
 var LegendConnectComponent = function LegendConnectComponent(_ref) {
   var _ref$showMapId = _ref.showMapId,
@@ -7418,8 +7464,8 @@ var LegendConnect = function LegendConnect(_a) {
   }, props));
 };
 
-var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
-    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
+var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
+    _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
     _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerSaga),
     _marked4 = /*#__PURE__*/regeneratorRuntime.mark(updateAnimation),
     _marked5 = /*#__PURE__*/regeneratorRuntime.mark(setLayerDimensionsSaga),
@@ -7427,7 +7473,7 @@ var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
     _marked7 = /*#__PURE__*/regeneratorRuntime.mark(handleBaseLayersSaga),
     _marked8 = /*#__PURE__*/regeneratorRuntime.mark(setMapPresetSaga),
     _marked9 = /*#__PURE__*/regeneratorRuntime.mark(checkMapPresetForChangesSaga),
-    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
+    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
 
 var generateTimeList = function generateTimeList(start, end, interval) {
   var timeList = [];
@@ -7477,7 +7523,7 @@ function startAnimationSaga(_ref) {
           return _context.stop();
       }
     }
-  }, _marked$1);
+  }, _marked$2);
 }
 function stopAnimationSaga(_ref2) {
   var payload, mapId;
@@ -7495,7 +7541,7 @@ function stopAnimationSaga(_ref2) {
           return _context2.stop();
       }
     }
-  }, _marked2$1);
+  }, _marked2$2);
 }
 function deleteLayerSaga(_ref3) {
   var payload, mapId, layers;
@@ -8103,7 +8149,7 @@ function checkMapPresetForChangesSaga(action) {
     }
   }, _marked9);
 }
-function rootSaga$1() {
+function rootSaga$2() {
   return regeneratorRuntime.wrap(function rootSaga$(_context10) {
     while (1) {
       switch (_context10.prev = _context10.next) {
@@ -8164,11 +8210,11 @@ function rootSaga$1() {
 var moduleConfig = {
   id: 'webmap-module',
   reducerMap: {
-    webmap: reducer$2,
-    services: reducer$4,
-    layers: reducer$5
+    webmap: reducer$3,
+    services: reducer$5,
+    layers: reducer$6
   },
-  sagas: [rootSaga$1]
+  sagas: [rootSaga$2]
 };
 
 /* *
@@ -8188,13 +8234,13 @@ var moduleConfig = {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
-  return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byId, preset) {
-    return Object.assign(Object.assign({}, byId), _defineProperty({}, preset.id, preset));
+  return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byUrl, preset) {
+    return Object.assign(Object.assign({}, byUrl), _defineProperty({}, preset.url, preset));
   }, {})), userAddedServices));
 };
-var isService = function isService(param) {
+var isNoIdService = function isNoIdService(param) {
   var serviceParam = param;
-  return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.id) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url));
+  return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url));
 };
 
 var getUserAddedServices = function getUserAddedServices() {
@@ -8208,7 +8254,9 @@ var getUserAddedServices = function getUserAddedServices() {
             serviceUrl = _ref2[0],
             service = _ref2[1];
 
-        return Object.assign(Object.assign({}, userServices), isService(service) ? _defineProperty({}, serviceUrl, service) : {});
+        return Object.assign(Object.assign({}, userServices), isNoIdService(service) ? _defineProperty({}, serviceUrl, Object.assign(Object.assign({}, service), {
+          isUserAddedService: true
+        })) : {});
       }, {});
     }
   } catch (e) {
@@ -8225,48 +8273,35 @@ var setUserAddedServices = function setUserAddedServices(services) {
   }
 };
 
-var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
-    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectServiceRemovedSaga),
-    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
+var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
+    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectServiceRemovedSaga),
+    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
 function newServiceAddedSaga(capturedAction) {
-  var addedService, id, serviceUrl, name, keywords, services, findServiceName;
+  var addedService, id, serviceUrl, name, isUserAddedService, keywords;
   return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         case 0:
           addedService = capturedAction.payload;
-          id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name;
+          id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, isUserAddedService = addedService.isUserAddedService;
           keywords = addedService.layers.reduce(function (keywordAccumulator, layer) {
             return keywordAccumulator.concat(layer.path, layer.keywords);
           }, []);
           _context.next = 5;
-          return select(getServicesInArray);
-
-        case 5:
-          services = _context.sent;
-
-          findServiceName = function findServiceName() {
-            var foundService = services.find(function (object) {
-              return (object === null || object === void 0 ? void 0 : object.url) === serviceUrl;
-            });
-            if (foundService) return foundService.name;
-            return name;
-          };
-
-          _context.next = 9;
           return put(layerSelectActions.addKeywordsAndActiveServices({
             serviceId: id,
-            serviceName: findServiceName(),
+            serviceName: name,
             serviceUrl: serviceUrl,
-            keywords: keywords
+            keywords: keywords,
+            isUserAddedService: isUserAddedService
           }));
 
-        case 9:
+        case 5:
         case "end":
           return _context.stop();
       }
     }
-  }, _marked);
+  }, _marked$1);
 }
 function layerSelectServiceRemovedSaga(capturedAction) {
   var removedService, serviceId;
@@ -8286,7 +8321,7 @@ function layerSelectServiceRemovedSaga(capturedAction) {
           return _context2.stop();
       }
     }
-  }, _marked2);
+  }, _marked2$1);
 }
 function addServiceToLocalStorageSaga(_ref) {
   var payload = _ref.payload;
@@ -8296,7 +8331,6 @@ function addServiceToLocalStorageSaga(_ref) {
   if (!isUserAddedService) return;
   var localStorageServices = getUserAddedServices();
   setUserAddedServices(Object.assign(Object.assign({}, localStorageServices), _defineProperty({}, serviceUrl, {
-    id: serviceUrl,
     name: name,
     url: serviceUrl
   })));
@@ -8310,7 +8344,7 @@ function removeServiceFromLocalStorageSaga(_ref2) {
   delete updatedServices[serviceUrl];
   setUserAddedServices(updatedServices);
 }
-function rootSaga() {
+function rootSaga$1() {
   return regeneratorRuntime.wrap(function rootSaga$(_context3) {
     while (1) {
       switch (_context3.prev = _context3.next) {
@@ -8357,7 +8391,108 @@ function rootSaga() {
 var layerSelectConfig = {
   id: 'layerSelect-module',
   reducerMap: {
-    layerSelect: reducer
+    layerSelect: reducer$1
+  },
+  sagas: [rootSaga$1]
+};
+
+var _marked = /*#__PURE__*/regeneratorRuntime.mark(openSnackbarSaga),
+    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
+var hideTime = 4000;
+function openSnackbarSaga(capturedAction) {
+  var snackbarMessage, currentSnackbarMessages, id, currentSnackbarMessagesOpen;
+  return regeneratorRuntime.wrap(function openSnackbarSaga$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          snackbarMessage = capturedAction.payload.snackbarContent.message;
+          _context.next = 3;
+          return select(getCurrentSnackbarMessages);
+
+        case 3:
+          currentSnackbarMessages = _context.sent;
+
+          if (!currentSnackbarMessages.length) {
+            _context.next = 7;
+            break;
+          }
+
+          _context.next = 7;
+          return put(snackbarActions.closeSnackbar());
+
+        case 7:
+          // Generate a unique id
+          id = "snackbar".concat(Date.now().toString());
+          _context.next = 10;
+          return put(snackbarActions.triggerOpenSnackbarBySaga({
+            snackbarContent: {
+              message: snackbarMessage,
+              id: id
+            }
+          }));
+
+        case 10:
+          _context.next = 12;
+          return delay(hideTime);
+
+        case 12:
+          _context.next = 14;
+          return select(getCurrentSnackbarMessages);
+
+        case 14:
+          currentSnackbarMessagesOpen = _context.sent;
+
+          if (!currentSnackbarMessagesOpen.length) {
+            _context.next = 18;
+            break;
+          }
+
+          _context.next = 18;
+          return put(snackbarActions.closeSnackbar());
+
+        case 18:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _marked);
+}
+function rootSaga() {
+  return regeneratorRuntime.wrap(function rootSaga$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return takeLatest(snackbarActions.openSnackbar.type, openSnackbarSaga);
+
+        case 2:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _marked2);
+}
+
+/* *
+ * 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 snackbarModuleConfig = {
+  id: 'snackbar-module',
+  reducerMap: {
+    snackbar: reducer
   },
   sagas: [rootSaga]
 };
@@ -8378,7 +8513,7 @@ var layerSelectConfig = {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var coreModuleConfig = [moduleConfig, synchronizationGroupConfig, uiModuleConfig, layerSelectConfig];
+var coreModuleConfig = [moduleConfig, synchronizationGroupConfig, uiModuleConfig, layerSelectConfig, snackbarModuleConfig];
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -8906,7 +9041,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$q = makeStyles({
+var useStyles$p = makeStyles({
   buttonDiv: {
     position: 'relative'
   },
@@ -8939,7 +9074,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$q();
+  var classes = useStyles$p();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9012,6 +9147,12 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
     }
   };
 
+  React.useEffect(function () {
+    if (!isEqual(preloadedServices, services)) {
+      setServices(preloadedServices);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [preloadedServices]);
   return /*#__PURE__*/React.createElement(Dialog, {
     fullWidth: true,
     maxWidth: "md",
@@ -9126,10 +9267,22 @@ var AddLayersButton = function AddLayersButton(_ref) {
       open = _React$useState2[0],
       setOpen = _React$useState2[1];
 
+  var _React$useState3 = React.useState(shouldFocus),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isTooltipDisabled = _React$useState4[0],
+      setTooltipDisabled = _React$useState4[1];
+
   var handleClose = function handleClose() {
     setOpen(!open);
   };
 
+  var onBlurTooltip = function onBlurTooltip(event) {
+    // enable tooltip again after user blurs
+    if (event.relatedTarget) {
+      setTooltipDisabled(false);
+    }
+  };
+
   React.useEffect(function () {
     if (shouldFocus && ref.current) {
       ref.current.focus();
@@ -9137,7 +9290,9 @@ var AddLayersButton = function AddLayersButton(_ref) {
 
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: tooltip
+    title: tooltip,
+    disableFocusListener: isTooltipDisabled,
+    onBlur: onBlurTooltip
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: handleClose,
     sx: styles$2.button,
@@ -9303,7 +9458,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$p = makeStyles({
+var useStyles$o = makeStyles({
   row: {
     height: '32px'
   },
@@ -9327,7 +9482,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
-  var classes = useStyles$p();
+  var classes = useStyles$o();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -9519,7 +9674,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
   }))));
 };
 
-var useStyles$o = makeStyles(function (theme) {
+var useStyles$n = makeStyles(function (theme) {
   return createStyles({
     dropdownEmpty: {
       paddingLeft: 8,
@@ -9572,7 +9727,7 @@ var RenderLayers = function RenderLayers(_ref) {
 
   var _a;
 
-  var classes = useStyles$o();
+  var classes = useStyles$n();
 
   if (!layers || !layers.length) {
     return /*#__PURE__*/React.createElement("div", {
@@ -9638,7 +9793,7 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var useStyles$n = makeStyles(function (theme) {
+var useStyles$m = makeStyles(function (theme) {
   return {
     opacityDiv: {
       height: 'calc(100% - 5px)',
@@ -9698,8 +9853,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$n();
-  var sliderClasses = sliderStyles();
+  var classes = useStyles$m();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9765,8 +9919,8 @@ var OpacitySelect = function OpacitySelect(_ref) {
     onBlur: onBlur
   }, currentOpacityText)), open ? /*#__PURE__*/React.createElement("div", {
     className: classes.sliderBackground
-  }, /*#__PURE__*/React.createElement("div", {
-    className: sliderClasses.sliderHeader
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: sliderHeaderStyle
   }, "Opacity"), /*#__PURE__*/React.createElement(CustomSlider, {
     "data-testid": "opacitySlider",
     orientation: "vertical",
@@ -9915,44 +10069,37 @@ var RenderStyles = function RenderStyles(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$m = makeStyles(function (theme) {
-  return createStyles({
-    svgIcon: {
-      fill: function fill(_ref) {
-        var isActive = _ref.isActive,
-            isEnabled = _ref.isEnabled;
-
-        if (isActive) {
-          return theme.palette.common.white;
-        }
 
-        if (isEnabled) {
-          return theme.palette.geowebColors.buttons.flat["default"].color;
-        }
+var makeIconStyle = function makeIconStyle(isActive, isEnabled) {
+  return {
+    color: function color() {
+      if (isActive) {
+        return 'common.white';
+      }
 
-        return theme.palette.geowebColors.buttons.flat.disabled.color;
+      if (isEnabled) {
+        return 'geowebColors.buttons.flat.default.color';
       }
+
+      return 'geowebColors.buttons.flat.disabled.color';
     }
-  });
-});
+  };
+};
 
-var ActivateLayer = function ActivateLayer(_ref2) {
-  var _ref2$tooltipTitle = _ref2.tooltipTitle,
-      tooltipTitle = _ref2$tooltipTitle === void 0 ? 'Leading layer' : _ref2$tooltipTitle,
-      onClickActivate = _ref2.onClickActivate,
-      _ref2$isActive = _ref2.isActive,
-      isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
-      _ref2$isEnabled = _ref2.isEnabled,
-      isEnabled = _ref2$isEnabled === void 0 ? true : _ref2$isEnabled;
-  var classes = useStyles$m({
-    isActive: isActive,
-    isEnabled: isEnabled
-  });
+var ActivateLayer = function ActivateLayer(_ref) {
+  var _ref$tooltipTitle = _ref.tooltipTitle,
+      tooltipTitle = _ref$tooltipTitle === void 0 ? 'Leading layer' : _ref$tooltipTitle,
+      onClickActivate = _ref.onClickActivate,
+      _ref$isActive = _ref.isActive,
+      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+      _ref$isEnabled = _ref.isEnabled,
+      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+  var iconStyle = makeIconStyle(isActive, isEnabled);
   return /*#__PURE__*/React.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickActivate,
     icon: /*#__PURE__*/React.createElement(Flag, {
-      className: classes.svgIcon
+      sx: iconStyle
     }),
     testId: "activateLayerButton",
     isActive: isActive
@@ -10939,6 +11086,15 @@ var constructListAvailableBaseLayers = function constructListAvailableBaseLayers
     }));
   }, baseLayersWithMapId);
 };
+var areAvailableBaseLayersSame = function areAvailableBaseLayersSame(availableBaseLayerList, newBaseLayerList) {
+  var availableList = availableBaseLayerList.map(function (layer) {
+    return layer.name;
+  });
+  var newList = newBaseLayerList.map(function (layer) {
+    return layer.name;
+  });
+  return isEqual(availableList, newList);
+};
 
 var BaseLayersConnect = function BaseLayersConnect(_ref) {
   var mapId = _ref.mapId,
@@ -10952,14 +11108,16 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
   });
   React.useEffect(function () {
     // Set initial availableBaseLayers only if none set for that map yet
-    if (currentAvailableBaseLayers.length < 1) {
-      var availableBaseLayersToBeAdded = constructListAvailableBaseLayers(selectedBaseLayers, preloadedAvailableBaseLayers, mapId);
-      dispatch(layerActions.addAvailableBaseLayers({
+    var availableBaseLayersToBeAdded = constructListAvailableBaseLayers(selectedBaseLayers, preloadedAvailableBaseLayers, mapId);
+    var areBaseLayersSame = areAvailableBaseLayersSame(availableBaseLayersToBeAdded, currentAvailableBaseLayers);
+
+    if (!areBaseLayersSame) {
+      dispatch(layerActions.setAvailableBaseLayers({
         layers: availableBaseLayersToBeAdded
       }));
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [mapId]);
+  }, [mapId, preloadedAvailableBaseLayers]);
 
   var onChangeBaseLayers = function onChangeBaseLayers(newSelectedLayerId) {
     var newBaseLayer = currentAvailableBaseLayers.filter(function (layer) {
@@ -11259,23 +11417,22 @@ var ServicePopup = function ServicePopup(_ref) {
       hideBackdrop = _ref$hideBackdrop === void 0 ? false : _ref$hideBackdrop,
       isOpen = _ref.isOpen,
       closePopup = _ref.closePopup,
+      serviceId = _ref.serviceId,
       url = _ref.url,
       services = _ref.services,
       serviceSetLayers = _ref.serviceSetLayers;
 
-  var _a, _b;
-
-  var _React$useState = React.useState(servicePopupVariant !== 'edit' || services === undefined ? '' : (_a = services[url]) === null || _a === void 0 ? void 0 : _a.name),
+  var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       serviceName = _React$useState2[0],
       setServiceName = _React$useState2[1];
 
-  var _React$useState3 = React.useState(servicePopupVariant === 'add' || url === undefined ? '' : url),
+  var _React$useState3 = React.useState(''),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       serviceUrl = _React$useState4[0],
       setServiceUrl = _React$useState4[1];
 
-  var _React$useState5 = React.useState(servicePopupVariant !== 'edit' || services === undefined ? '' : (_b = services[url]) === null || _b === void 0 ? void 0 : _b["abstract"]),
+  var _React$useState5 = React.useState(''),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       _abstract = _React$useState6[0],
       setAbstract = _React$useState6[1];
@@ -11310,6 +11467,19 @@ var ServicePopup = function ServicePopup(_ref) {
       serviceUrlHelperText = _React$useState18[0],
       setServiceUrlHelperText = _React$useState18[1];
 
+  React.useEffect(function () {
+    var _a;
+
+    if (servicePopupVariant === 'edit') {
+      setServiceName(((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName) || '');
+      setServiceUrl(url || '');
+    }
+
+    if (servicePopupVariant === 'save') {
+      setServiceUrl(url || '');
+    }
+  }, [serviceId, services, url, servicePopupVariant, isOpen]);
+
   var validateServiceUrl = function validateServiceUrl(url) {
     if (url === '' || url === null || typeof url === 'undefined') return false;
     var matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
@@ -11396,11 +11566,10 @@ var ServicePopup = function ServicePopup(_ref) {
 
   var ServiceNameInRedux = function ServiceNameInRedux() {
     if (servicePopupVariant === 'add' || servicePopupVariant === 'save') {
-      for (var service in services) {
-        if (services && services[service].name.toLowerCase() === serviceName.toLowerCase()) return true;
-      }
-
-      return false;
+      var foundName = Object.keys(services).find(function (serviceId) {
+        return services[serviceId].serviceName.toLowerCase() === (serviceName === null || serviceName === void 0 ? void 0 : serviceName.toLowerCase());
+      });
+      return foundName !== undefined;
     }
 
     return false;
@@ -11408,11 +11577,10 @@ var ServicePopup = function ServicePopup(_ref) {
 
   var UrlInRedux = function UrlInRedux() {
     if (servicePopupVariant === 'add' || servicePopupVariant === 'save') {
-      if (services && services[serviceUrl]) {
-        return true;
-      }
-
-      return false;
+      var foundUrl = Object.keys(services).find(function (serviceId) {
+        return services[serviceId].serviceUrl === serviceUrl;
+      });
+      return foundUrl !== undefined;
     }
 
     return false;
@@ -11420,6 +11588,7 @@ var ServicePopup = function ServicePopup(_ref) {
 
 
   React.useEffect(function () {
+    if (serviceName === undefined) return;
     setServiceNameHelperText('');
 
     if (ServiceNameInRedux()) {
@@ -11435,7 +11604,7 @@ var ServicePopup = function ServicePopup(_ref) {
   React.useEffect(function () {
     setServiceUrlHelperText('');
 
-    if (serviceUrl.length > 0 && !validateServiceUrl(serviceUrl)) {
+    if (serviceUrl && serviceUrl.length > 0 && !validateServiceUrl(serviceUrl)) {
       setServiceUrlHasError(true);
       setServiceUrlHelperText('Error: Not a valid URL.');
     } else if (UrlInRedux()) {
@@ -11522,7 +11691,8 @@ var ServicePopup = function ServicePopup(_ref) {
       return setAbstract(event.target.value);
     },
     value: _abstract,
-    "data-testid": "abstractTextField"
+    "data-testid": "abstractTextField",
+    disabled: true
   })), /*#__PURE__*/React.createElement(DialogActions, {
     sx: style$1.footerContent
   }, /*#__PURE__*/React.createElement(Button, {
@@ -11578,10 +11748,11 @@ var ServicePopupConnect = function ServicePopupConnect(_ref) {
       hideBackdrop = _ref.hideBackdrop,
       isOpen = _ref.isOpen,
       closePopup = _ref.closePopup,
+      serviceId = _ref.serviceId,
       url = _ref.url;
   var dispatch = useDispatch();
   var services = useSelector(function (store) {
-    return getServices(store);
+    return getActiveServices(store);
   });
   var serviceSetLayers = React__default.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(payload));
@@ -11591,9 +11762,10 @@ var ServicePopupConnect = function ServicePopupConnect(_ref) {
     hideBackdrop: hideBackdrop,
     isOpen: isOpen,
     closePopup: closePopup,
-    url: url,
+    serviceId: serviceId,
     services: services,
-    serviceSetLayers: serviceSetLayers
+    serviceSetLayers: serviceSetLayers,
+    url: url
   });
 };
 
@@ -11938,16 +12110,29 @@ var LayerList = function LayerList(_ref) {
       mapLayers = _ref.mapLayers,
       keywordIds = _ref.keywordIds,
       allKeywordsActive = _ref.allKeywordsActive;
+  var layerSelectFilterHeight = 199;
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       numberOfLayers = _React$useState2[0],
       setNumberOfLayers = _React$useState2[1];
 
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      layersFilteredFromService = _React$useState4[0],
+      setLayersFilteredFromService = _React$useState4[1];
+
   React.useEffect(function () {
     setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
       return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).length;
     }, 0));
+    setLayersFilteredFromService(serviceIds.reduce(function (layerList, serviceId) {
+      return layerList.concat(filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer) {
+        return Object.assign(Object.assign({}, layer), {
+          serviceId: serviceId
+        });
+      }));
+    }, []));
   }, [serviceIds, keywordIds, services, searchString, allKeywordsActive]);
   return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "layerList"
@@ -11956,25 +12141,26 @@ var LayerList = function LayerList(_ref) {
       marginBottom: '4px',
       fontSize: '12px'
     }
-  }, numberOfLayers, " results"), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      height: layerSelectHeight - 199,
-      overflow: 'auto'
-    }
-  }, serviceIds.map(function (serviceId) {
-    return filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer, layerIndex) {
-      return /*#__PURE__*/React.createElement(LayerListRow, {
-        key: layer.name,
-        layer: layer,
-        layerIndex: layerIndex,
-        service: services[serviceId],
-        serviceUrl: services[serviceId].serviceUrl,
-        addLayer: addLayer,
-        deleteLayer: deleteLayer,
-        mapLayers: mapLayers
-      });
-    });
-  })));
+  }, numberOfLayers, " results"), /*#__PURE__*/React.createElement(FixedSizeList, {
+    height: layerSelectHeight - layerSelectFilterHeight,
+    itemCount: numberOfLayers,
+    itemSize: 68
+  }, function (_ref2) {
+    var index = _ref2.index,
+        style = _ref2.style;
+    return /*#__PURE__*/React.createElement("div", {
+      style: style,
+      key: layersFilteredFromService[index].name
+    }, /*#__PURE__*/React.createElement(LayerListRow, {
+      layer: layersFilteredFromService[index],
+      layerIndex: index,
+      service: services[layersFilteredFromService[index].serviceId],
+      serviceUrl: services[layersFilteredFromService[index].serviceId].serviceUrl,
+      addLayer: addLayer,
+      deleteLayer: deleteLayer,
+      mapLayers: mapLayers
+    }));
+  }));
 };
 
 /* *
@@ -12421,28 +12607,32 @@ var styles = {
 
 var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   var services = _ref.services,
-      mapStoreRemoveService = _ref.mapStoreRemoveService,
-      _ref$layers = _ref.layers,
-      layers = _ref$layers === void 0 ? [] : _ref$layers;
+      mapStoreRemoveService = _ref.mapStoreRemoveService;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      addServiceisOpen = _React$useState2[0],
+      addServiceIsOpen = _React$useState2[0],
       setAddServiceIsOpen = _React$useState2[1];
 
+  var _React$useState3 = React.useState({
+    isOpen: false,
+    serviceId: '',
+    serviceUrl: ''
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      editServiceIsOpen = _React$useState4[0],
+      setEditServiceIsOpen = _React$useState4[1];
+
   var openAddService = function openAddService() {
     setAddServiceIsOpen(true);
   };
 
   var closePopup = function closePopup() {
     setAddServiceIsOpen(false);
-  };
-
-  var isDisabled = function isDisabled(service) {
-    return layers.some(function (layer) {
-      return layer.service && layer.service.includes(service);
-    }) || preloadedDefaultMapServices.some(function (defaultMapService) {
-      return defaultMapService.url && defaultMapService.url.includes(service);
+    setEditServiceIsOpen({
+      isOpen: false,
+      serviceId: '',
+      serviceUrl: ''
     });
   };
 
@@ -12471,16 +12661,25 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
         marginRight: '-10px'
       }
     }, /*#__PURE__*/React.createElement(Tooltip, {
-      title: "Edit Service"
+      title: "Edit Service",
+      disableHoverListener: !services[serviceId].isUserAddedService
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
-      disabled: isDisabled(services[serviceId].serviceUrl),
+      disabled: !services[serviceId].isUserAddedService,
       "data-testid": "openEditServiceButton",
-      size: "large"
+      size: "large",
+      onClick: function onClick() {
+        setEditServiceIsOpen({
+          isOpen: true,
+          serviceId: serviceId,
+          serviceUrl: services[serviceId].serviceUrl
+        });
+      }
     }, /*#__PURE__*/React.createElement(Edit, null)))), /*#__PURE__*/React.createElement(Tooltip, {
-      title: "Delete Service"
+      title: "Delete Service",
+      disableHoverListener: !services[serviceId].isUserAddedService
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
       size: "large",
-      disabled: isDisabled(services[serviceId].serviceUrl),
+      disabled: !services[serviceId].isUserAddedService,
       onClick: function onClick() {
         return mapStoreRemoveService(serviceId, services[serviceId].serviceUrl);
       },
@@ -12494,10 +12693,16 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     sx: styles.button,
     variant: "tertiary",
     startIcon: /*#__PURE__*/React.createElement(Add, null)
-  }, "Add a new service"))), addServiceisOpen && /*#__PURE__*/React.createElement(ServicePopupConnect, {
+  }, "Add a new service"))), addServiceIsOpen && /*#__PURE__*/React.createElement(ServicePopupConnect, {
     servicePopupVariant: "add",
-    isOpen: addServiceisOpen,
+    isOpen: addServiceIsOpen,
     closePopup: closePopup
+  }), editServiceIsOpen && /*#__PURE__*/React.createElement(ServicePopupConnect, {
+    servicePopupVariant: "edit",
+    isOpen: editServiceIsOpen.isOpen,
+    closePopup: closePopup,
+    serviceId: editServiceIsOpen.serviceId,
+    url: editServiceIsOpen.serviceUrl
   }));
 };
 
@@ -12520,9 +12725,6 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
 
 var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect() {
   var dispatch = useDispatch();
-  var allLayers = useSelector(function (store) {
-    return getAllLayers(store);
-  });
   var mapStoreRemoveService = React.useCallback(function (serviceId, serviceUrl) {
     dispatch(serviceActions.mapStoreRemoveService({
       id: serviceId,
@@ -12534,7 +12736,6 @@ var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect() {
   });
   return /*#__PURE__*/React.createElement(ServiceOptionsDialog, {
     services: services,
-    layers: allLayers,
     mapStoreRemoveService: mapStoreRemoveService
   });
 };
@@ -12796,40 +12997,6 @@ var KeywordFilterResultsListItemConnect = function KeywordFilterResultsListItemC
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var CustomSwitch = withStyles(function (theme) {
-  return {
-    switchBase: {
-      '&$checked': {
-        color: theme.palette.geowebColors.customSlider.thumb
-      },
-      '&$checked + $track': {
-        backgroundColor: theme.palette.geowebColors.buttons.primary["default"].fill
-      }
-    },
-    checked: {},
-    track: {
-      backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
-      opacity: '1 !important'
-    }
-  };
-})(Switch);
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -12866,7 +13033,7 @@ var KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchC
       keywords: keywords
     }));
   }, [allKeywordIds, allKeywordsActive, checkedKeywordIds, dispatch]);
-  return /*#__PURE__*/React.createElement(CustomSwitch, {
+  return /*#__PURE__*/React.createElement(Switch, {
     checked: allKeywordsActive,
     onChange: toggleKeywords,
     "data-testid": "customSwitch"
@@ -13158,6 +13325,11 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
   var serviceSetLayers = React.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(payload));
   }, [dispatch]);
+
+  var checkIfUserAddedService = function checkIfUserAddedService(service) {
+    return !!service.isUserAddedService;
+  };
+
   React.useEffect(function () {
     if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
       mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
@@ -13169,7 +13341,7 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
               name: service.name,
               serviceUrl: service.url,
               layers: layers,
-              isUserAddedService: false
+              isUserAddedService: checkIfUserAddedService(service)
             });
           }
         })["catch"](function () {
@@ -13343,15 +13515,10 @@ var MapControlButton = function MapControlButton(_a) {
   return /*#__PURE__*/React.createElement(Tooltip, {
     placement: placement,
     title: title
-  }, /*#__PURE__*/React.createElement(Box, {
-    component: "span",
-    sx: {
-      marginBottom: '8px'
-    }
   }, /*#__PURE__*/React.createElement(ToolButton, Object.assign({
     onClick: onClick,
     active: isActive
-  }, props), children)));
+  }, props), children));
 };
 
 /* *
@@ -14170,6 +14337,8 @@ var MultiMapMultiDimensionSelectConnect = function MultiMapMultiDimensionSelectC
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
+var titleOn = 'Auto update on';
+var titleOff = 'Auto update off';
 
 var AutoUpdateButton = function AutoUpdateButton(_ref) {
   var _ref$toggleAutoUpdate = _ref.toggleAutoUpdate,
@@ -14181,10 +14350,9 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return /*#__PURE__*/React.createElement(Tooltip, {
-    title: isAutoUpdating ? 'Auto update on' : 'Auto update off'
-  }, /*#__PURE__*/React.createElement("span", {
+    title: isAutoUpdating ? titleOn : titleOff,
     "data-testid": "autoUpdateButtonTooltip"
-  }, /*#__PURE__*/React.createElement(ToolButton, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
     active: isAutoUpdating,
     disabled: disabled,
     onClick: function onClick() {
@@ -14216,12 +14384,12 @@ var useStyles$c = makeStyles(function (theme) {
     }
   };
 });
+var speedTooltipTitle = 'Speed';
 
 var SpeedButton = function SpeedButton(_ref) {
   var animationDelay = _ref.animationDelay,
       setMapAnimationDelay = _ref.setMapAnimationDelay;
   var classes = useStyles$c();
-  var sliderClasses = sliderStyles();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -14277,17 +14445,17 @@ var SpeedButton = function SpeedButton(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classes.speedButtonDiv
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Speed"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+    title: speedTooltipTitle
+  }, /*#__PURE__*/React.createElement(ToolButton, {
     onClick: onClickButton,
     active: true,
     "data-testid": "speedButton"
   }, /*#__PURE__*/React.createElement(TextIcon, {
     text: text
-  })))), open ? /*#__PURE__*/React.createElement("div", {
+  }))), open ? /*#__PURE__*/React.createElement("div", {
     className: classes.sliderBackground
-  }, /*#__PURE__*/React.createElement("div", {
-    className: sliderClasses.sliderHeader
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: sliderHeaderStyle
   }, "Speed"), /*#__PURE__*/React.createElement(CustomSlider, {
     "data-testid": "speedSlider",
     orientation: "vertical",
@@ -14448,31 +14616,7 @@ var useStyles$b = makeStyles(function (theme) {
     disabled: {}
   };
 });
-var TimeStepSwitch = withStyles(function (theme) {
-  return {
-    root: {
-      marginLeft: '18px'
-    },
-    thumb: {
-      width: 20,
-      height: 20,
-      margin: '0 0 0 0'
-    },
-    switchBase: {
-      '&$checked': {
-        color: theme.palette.geowebColors.customSlider.thumb
-      },
-      '&$checked + $track': {
-        backgroundColor: theme.palette.geowebColors.customSlider.switchTrack
-      }
-    },
-    checked: {},
-    track: {
-      backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
-      opacity: '1 !important'
-    }
-  };
-})(Switch);
+var timeStepTitle = 'Time step';
 
 var TimeStepButton = function TimeStepButton(_ref) {
   var timeStep = _ref.timeStep,
@@ -14487,7 +14631,6 @@ var TimeStepButton = function TimeStepButton(_ref) {
     return null;
   } : _ref$onToggleTimestep;
   var classes = useStyles$b();
-  var sliderClasses = sliderStyles();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -14545,8 +14688,8 @@ var TimeStepButton = function TimeStepButton(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classes.timeStepDiv
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Time step"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+    title: timeStepTitle
+  }, /*#__PURE__*/React.createElement(ToolButton, {
     active: true,
     onClick: onClickButton,
     "data-testid": "timeStepButton",
@@ -14554,10 +14697,10 @@ var TimeStepButton = function TimeStepButton(_ref) {
   }, /*#__PURE__*/React.createElement(FastForward, null), /*#__PURE__*/React.createElement(TextIcon, {
     text: currentMark && currentMark.text || '',
     "data-testid": "timeStepButtonText"
-  })))), open ? /*#__PURE__*/React.createElement("div", {
+  }))), open ? /*#__PURE__*/React.createElement("div", {
     className: classes.sliderBackground
-  }, /*#__PURE__*/React.createElement("div", {
-    className: sliderClasses.sliderHeader
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: sliderHeaderStyle
   }, "Time step"), /*#__PURE__*/React.createElement(CustomSlider, {
     "data-testid": "timeStepButtonSlider",
     orientation: "vertical",
@@ -14575,14 +14718,17 @@ var TimeStepButton = function TimeStepButton(_ref) {
   }, /*#__PURE__*/React.createElement("span", {
     "data-testid": "timestepAutoSwitchTooltip"
   }, /*#__PURE__*/React.createElement(FormControlLabel, {
-    control: /*#__PURE__*/React.createElement(TimeStepSwitch, {
+    control: /*#__PURE__*/React.createElement(Switch, {
       checked: isTimestepAuto,
       onChange: function onChange() {
         return onToggleTimestepAuto();
       },
       disabled: disabled,
       id: "timestepAutoSwitch",
-      disableRipple: true
+      disableRipple: true,
+      sx: {
+        marginLeft: '18px'
+      }
     }),
     label: "Auto",
     labelPlacement: "end",
@@ -14626,13 +14772,13 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
   var id = open ? 'simple-popover' : undefined;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
     title: "Options"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+  }, /*#__PURE__*/React.createElement(ToolButton, {
     onClick: onClickButton,
     "data-testid": "optionsMenuButton",
     active: open
   }, /*#__PURE__*/React.createElement(Options, {
     "data-testid": "optionsIcon"
-  })))), /*#__PURE__*/React.createElement(OptionsPopOver, {
+  }))), /*#__PURE__*/React.createElement(OptionsPopOver, {
     id: id,
     open: open,
     "data-testid": "optionsMenuPopOver",
@@ -20405,8 +20551,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
 
       if (!prevProps || prevProps.disableMapPin !== props.disableMapPin) {
-        if (!(props.disableMapPin === undefined)) {
-          this.adaguc.webMapJS.getMapPin().toggleDisableMapPin();
+        if (props.disableMapPin === true) {
+          this.adaguc.webMapJS.getMapPin().setMapPinDisabled();
+        } else if (props.disableMapPin === false) {
+          this.adaguc.webMapJS.getMapPin().setMapPinEnabled();
         }
       }
       /* Change the animation delay */
@@ -20751,7 +20899,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         _this4.onUpdateBBoxListener(newBbox);
       }, true);
       this.adaguc.webMapJS.addListener('onsetmappin', function (mapPinLatLonCoordinate) {
-        if (onMapPinChangeLocation) {
+        // only change location when mapPin is visible and enabled
+        if (onMapPinChangeLocation && // eslint-disable-next-line react/destructuring-assignment
+        _this4.props.displayMapPin && // eslint-disable-next-line react/destructuring-assignment
+        !_this4.props.disableMapPin) {
           onMapPinChangeLocation({
             mapPinLocation: {
               lat: mapPinLatLonCoordinate.lat,
@@ -20866,6 +21017,7 @@ ReactMapView.defaultProps = {
   },
   shouldAutoFetch: true,
   displayMapPin: false,
+  disableMapPin: false,
   onMount: function onMount() {
     return null;
   },
@@ -21390,7 +21542,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       displayDimensionSelectButtonInMap = _a$displayDimensionSe === void 0 ? true : _a$displayDimensionSe,
       _a$multiLegend = _a.multiLegend,
       multiLegend = _a$multiLegend === void 0 ? true : _a$multiLegend,
-      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend"]);
+      shouldShowLayerManager = _a.shouldShowLayerManager,
+      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager"]);
 
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || generateMapId()).current;
@@ -21419,7 +21572,17 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     dispatch(mapActions$1.setMapPreset({
       mapId: mapId,
       initialProps: initialProps
-    })); // eslint-disable-next-line react-hooks/exhaustive-deps
+    }));
+
+    if (shouldShowLayerManager !== undefined) {
+      dispatch(uiActions.setActiveMapIdForDialog({
+        type: 'layerManager',
+        mapId: mapId,
+        setOpen: shouldShowLayerManager,
+        source: 'app'
+      }));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
   return /*#__PURE__*/React__default.createElement(Box, {
     sx: {
@@ -22437,21 +22600,17 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement("h1", {
     "data-testid": "map-warning-properties-title"
-  }, selectedFeatureProperties.country), selectedFeatureProperties.details[0].event && /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, "Event: ", selectedFeatureProperties.details[0].event), selectedFeatureProperties.details[0].sent && /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, "Sent:", ' ', moment.utc(selectedFeatureProperties.details[0].sent).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].expires && /*#__PURE__*/React__default.createElement("pre", {
+  }, selectedFeatureProperties.areaDesc), selectedFeatureProperties.areaDesc && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Expires:", ' ', moment.utc(selectedFeatureProperties.details[0].expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].web && /*#__PURE__*/React__default.createElement("pre", {
+  }, "event: ", selectedFeatureProperties.languages[2].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Web: ", selectedFeatureProperties.details[0].web), selectedFeatureProperties.details[0].sender && /*#__PURE__*/React__default.createElement("pre", {
+  }, "Sent:", ' ', moment.utc(selectedFeatureProperties.onset).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.expires && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Sender: ", selectedFeatureProperties.details[0].sender), selectedFeatureProperties.details[0].identifier && /*#__PURE__*/React__default.createElement("pre", {
+  }, "Expires:", ' ', moment.utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[2].senderName && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Identifier: ", selectedFeatureProperties.details[0].identifier), selectedFeatureProperties.details[0].area && /*#__PURE__*/React__default.createElement("pre", {
+  }, "Sender: ", selectedFeatureProperties.languages[2].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "area: ", selectedFeatureProperties.details[0].area));
+  }, "Identifier: ", selectedFeatureProperties.identifier));
 };
 
 /* *
@@ -22472,4 +22631,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
  * */
 var mapActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions$1), serviceActions);
 
-export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterBaseLayers, filterLayers, filterMapLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$5 as layerReducer, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, useStyles$2 as useStyles };
+export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$6 as layerReducer, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, useStyles$2 as useStyles };