@opengeoweb/core 2.14.0 → 4.0.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/styles/makeStyles'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/styles/makeStyles', '@opengeoweb/webmap', 'react-sortablejs', '@mui/styles/createStyles', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.makeStyles, global.webmap, global.reactSortablejs, global.createStyles, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, makeStyles, webmap, reactSortablejs, createStyles, withStyles, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/styles/makeStyles'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('react-window'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/styles/makeStyles', '@opengeoweb/webmap', 'react-sortablejs', '@mui/styles/createStyles', 'react-window', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.makeStyles, global.webmap, global.reactSortablejs, global.createStyles, global.reactWindow, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
+})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, makeStyles, webmap, reactSortablejs, createStyles, reactWindow, withStyles, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -822,8 +822,10 @@
           activeMapPresetId = _y === void 0 ? null : _y,
           _z = _a.displayMapPin,
           displayMapPin = _z === void 0 ? false : _z,
-          _0 = _a.shouldShowZoomControls,
-          shouldShowZoomControls = _0 === void 0 ? true : _0;
+          _0 = _a.disableMapPin,
+          disableMapPin = _0 === void 0 ? false : _0,
+          _1 = _a.shouldShowZoomControls,
+          shouldShowZoomControls = _1 === void 0 ? true : _1;
       return {
         id: id,
         isAnimating: isAnimating,
@@ -849,6 +851,7 @@
         isTimeSliderVisible: isTimeSliderVisible,
         activeMapPresetId: activeMapPresetId,
         displayMapPin: displayMapPin,
+        disableMapPin: disableMapPin,
         shouldShowZoomControls: shouldShowZoomControls
       };
     };
@@ -1303,7 +1306,7 @@
         status: status
       });
     };
-    var initialState$5 = {
+    var initialState$6 = {
       byId: {},
       allIds: [],
       availableBaseLayers: {
@@ -1311,8 +1314,8 @@
         allIds: []
       }
     };
-    var slice$5 = toolkit.createSlice({
-      initialState: initialState$5,
+    var slice$6 = toolkit.createSlice({
+      initialState: initialState$6,
       name: 'layerReducer',
       reducers: {
         addLayer: function addLayer(draft, action) {
@@ -1529,15 +1532,26 @@
             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(__assign({}, layer));
+            draft.availableBaseLayers.allIds.push(layer.id);
+          });
+        },
         onUpdateLayerInformation: function onUpdateLayerInformation(draft, action) {
           var _a = action.payload,
               layerStyle = _a.layerStyle,
               layerDimensions = _a.layerDimensions;
           var layerStyleAction = layerActions.layerChangeStyle(layerStyle);
           var state = produce.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;
         }
       },
@@ -1582,7 +1596,7 @@
             };
             /* 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;
@@ -1602,8 +1616,8 @@
         });
       }
     });
-    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");
@@ -1621,12 +1635,12 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var initialState$4 = {
+    var initialState$5 = {
       byId: {},
       allIds: []
     };
-    var slice$4 = toolkit.createSlice({
-      initialState: initialState$4,
+    var slice$5 = toolkit.createSlice({
+      initialState: initialState$5,
       name: 'serviceReducer',
       reducers: {
         serviceSetLayers: function serviceSetLayers(draft, action) {
@@ -1653,13 +1667,13 @@
           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");
@@ -1812,12 +1826,13 @@
      * @returns {array} returnType: [] - array containing services
      */
 
-    var getServicesInArray = toolkit.createSelector(servicesStore, function (store) {
+    toolkit.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;
@@ -1861,13 +1876,13 @@
         source: source
       };
     };
-    var initialState$3 = {
+    var initialState$4 = {
       order: [],
       dialogs: {},
       activeWindowId: undefined
     };
-    var slice$3 = toolkit.createSlice({
-      initialState: initialState$3,
+    var slice$4 = toolkit.createSlice({
+      initialState: initialState$4,
       name: 'uiReducer',
       reducers: {
         registerDialog: function registerDialog(draft, action) {
@@ -1944,8 +1959,8 @@
         }
       }
     });
-    var reducer$3 = slice$3.reducer;
-    var uiActions = slice$3.actions;
+    var reducer$4 = slice$4.reducer;
+    var uiActions = slice$4.actions;
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2012,12 +2027,12 @@
       });
     };
 
-    var initialState$2 = {
+    var initialState$3 = {
       byId: {},
       allIds: []
     };
-    var slice$2 = toolkit.createSlice({
-      initialState: initialState$2,
+    var slice$3 = toolkit.createSlice({
+      initialState: initialState$3,
       name: 'mapReducer',
       reducers: {
         registerMap: function registerMap(draft, action) {
@@ -2583,13 +2598,13 @@
             };
             /* 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 _a = action.payload,
               mapId = _a.mapId,
@@ -2628,11 +2643,11 @@
         });
       }
     });
-    var mapActions$1 = __assign(__assign({}, slice$2.actions), {
+    var mapActions$1 = __assign(__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");
@@ -3130,7 +3145,7 @@
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
     var _a$2;
-    var initialState$1 = {
+    var initialState$2 = {
       sources: {
         byId: {},
         allIds: []
@@ -3154,8 +3169,8 @@
         }
       }
     };
-    var slice$1 = toolkit.createSlice({
-      initialState: initialState$1,
+    var slice$2 = toolkit.createSlice({
+      initialState: initialState$2,
       name: 'synchronizationGroupsReducer',
       reducers: {
         syncGroupAddSource: function syncGroupAddSource(draft, action) {
@@ -3299,7 +3314,7 @@
           });
         },
         syncGroupClear: function syncGroupClear() {
-          return initialState$1;
+          return initialState$2;
         },
         syncGroupSetViewState: function syncGroupSetViewState(draft, action) {
           var viewState = action.payload.viewState;
@@ -3371,7 +3386,7 @@
       });
     };
 
-    var syncGroupAddGroup = (_a$2 = slice$1.actions, _a$2.syncGroupAddGroup),
+    var syncGroupAddGroup = (_a$2 = slice$2.actions, _a$2.syncGroupAddGroup),
         syncGroupAddSource = _a$2.syncGroupAddSource,
         syncGroupAddTarget = _a$2.syncGroupAddTarget;
         _a$2.syncGroupClear;
@@ -3380,8 +3395,8 @@
         syncGroupRemoveSource = _a$2.syncGroupRemoveSource,
         syncGroupRemoveTarget = _a$2.syncGroupRemoveTarget,
         syncGroupSetViewState = _a$2.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");
@@ -3438,7 +3453,7 @@
         actions: actions,
         constants: constants,
         types: types$1,
-        initialState: initialState$1
+        initialState: initialState$2
     });
 
     /* *
@@ -4067,11 +4082,11 @@
      * 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 = toolkit.createSelector(getMapById, function (store) {
-      return store ? store.disableMapPin : undefined;
+      return store ? store.disableMapPin : false;
     });
     /**
      * Returns the diplay map pin boolean for the current map
@@ -4277,7 +4292,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var initialState = {
+    var initialState$1 = {
       filters: {
         searchFilter: '',
         activeServices: {
@@ -4290,8 +4305,8 @@
         }
       }
     };
-    var slice = toolkit.createSlice({
-      initialState: initialState,
+    var slice$1 = toolkit.createSlice({
+      initialState: initialState$1,
       name: 'layerSelect',
       reducers: {
         setSearchFilter: function setSearchFilter(draft, action) {
@@ -4305,7 +4320,8 @@
               serviceId = _b.serviceId,
               serviceName = _b.serviceName,
               serviceUrl = _b.serviceUrl,
-              keywords = _b.keywords;
+              keywords = _b.keywords,
+              isUserAddedService = _b.isUserAddedService;
 
           if (!draft.filters.activeServices.byId[serviceId]) {
             draft.filters.activeServices.byId[serviceId] = {};
@@ -4343,6 +4359,7 @@
           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);
         },
@@ -4475,8 +4492,8 @@
         }
       }
     });
-    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");
@@ -4608,6 +4625,78 @@
       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 = toolkit.createEntityAdapter();
+    var initialState = snackbarAdapter.getInitialState();
+    var slice = toolkit.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 getCurrentSnackbarMessages = snackbarAdapter.getSelectors(function (state) {
+      var _a;
+
+      return (_a = state === null || state === void 0 ? void 0 : state.snackbar) !== null && _a !== void 0 ? _a : {
+        entities: {},
+        ids: []
+      };
+    }).selectAll;
+    toolkit.createSelector(getCurrentSnackbarMessages, function (currentMessages) {
+      return currentMessages.length > 0 ? currentMessages[0] : undefined;
+    });
+
     var types = /*#__PURE__*/Object.freeze({
         __proto__: null
     });
@@ -5252,7 +5341,7 @@
         }
       });
     }
-    function rootSaga$4() {
+    function rootSaga$5() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -5622,7 +5711,7 @@
       });
     }
 
-    function rootSaga$3() {
+    function rootSaga$4() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -5715,9 +5804,9 @@
     var synchronizationGroupConfig = {
       id: 'syncronizationGroupStore-module',
       reducerMap: {
-        syncronizationGroupStore: reducer$1
+        syncronizationGroupStore: reducer$2
       },
-      sagas: [rootSaga$4, rootSaga$3]
+      sagas: [rootSaga$5, rootSaga$4]
     };
 
     /* *
@@ -5839,7 +5928,7 @@
         }
       });
     }
-    function rootSaga$2() {
+    function rootSaga$3() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -5883,9 +5972,9 @@
     var uiModuleConfig = {
       id: 'ui-module',
       reducerMap: {
-        ui: reducer$3
+        ui: reducer$4
       },
-      sagas: [rootSaga$2]
+      sagas: [rootSaga$3]
     };
 
     /* *
@@ -6053,103 +6142,57 @@
      * 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 __assign(__assign(__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(layers) {
+
+    var filterLayers = function filterLayers(layers, layerParser) {
       if (layers === void 0) {
         layers = [];
       }
 
+      if (layerParser === void 0) {
+        layerParser = function layerParser(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
           };
@@ -6159,16 +6202,12 @@
           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;
@@ -6179,21 +6218,28 @@
       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 _a = layers ? filterLayers(layers, parseLayer) : createEmtpyFilteredList(undefined),
+          baseLayers = _a.baseLayers,
+          mapLayers = _a.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;
@@ -7132,7 +7178,7 @@
     var defaultCanvasWidth = 150;
     var defaultCanvasHeight = 30; // TODO: remove fontFamily styles after theming is fully implemented
 
-    var useStyles$s = makeStyles__default["default"](function (theme) {
+    var useStyles$r = makeStyles__default["default"](function (theme) {
       return {
         legendCanvas: {
           margin: '10px 0px 10px 0px'
@@ -7200,7 +7246,7 @@
 
     var Legend = function Legend(_a) {
       var layer = _a.layer;
-      var classes = useStyles$s();
+      var classes = useStyles$r();
       /* Variable to remember the previous image */
 
       var previousLegendImage = React.useRef(null);
@@ -7352,7 +7398,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$r = makeStyles__default["default"](function () {
+    var useStyles$q = makeStyles__default["default"](function () {
       return {
         legendList: {
           display: 'flex',
@@ -7380,7 +7426,7 @@
           order = _d === void 0 ? 0 : _d,
           _e = _a.source,
           source = _e === void 0 ? 'app' : _e;
-      var classes = useStyles$r();
+      var classes = useStyles$q();
       return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
         startPosition: {
           right: 20,
@@ -7433,7 +7479,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var IS_LEGEND_OPEN_BY_DEFAULT = true;
+    var IS_LEGEND_OPEN_BY_DEFAULT = false;
 
     var LegendConnectComponent = function LegendConnectComponent(_a) {
       var _b = _a.showMapId,
@@ -8325,7 +8371,7 @@
         }
       });
     }
-    function rootSaga$1() {
+    function rootSaga$2() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -8408,11 +8454,11 @@
     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]
     };
 
     function _typeof(obj) {
@@ -8448,15 +8494,15 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
-      return Object.values(__assign(__assign({}, presets.reduce(function (byId, preset) {
+      return Object.values(__assign(__assign({}, presets.reduce(function (byUrl, preset) {
         var _a;
 
-        return __assign(__assign({}, byId), (_a = {}, _a[preset.id] = preset, _a));
+        return __assign(__assign({}, byUrl), (_a = {}, _a[preset.url] = preset, _a));
       }, {})), 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() {
@@ -8472,7 +8518,9 @@
                 serviceUrl = _c[0],
                 service = _c[1];
 
-            return __assign(__assign({}, userServices), isService(service) ? (_b = {}, _b[serviceUrl] = service, _b) : {});
+            return __assign(__assign({}, userServices), isNoIdService(service) ? (_b = {}, _b[serviceUrl] = __assign(__assign({}, service), {
+              isUserAddedService: true
+            }), _b) : {});
           }, {});
         }
       } catch (e) {
@@ -8506,40 +8554,26 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     function newServiceAddedSaga(capturedAction) {
-      var addedService, id, serviceUrl, name, keywords, services, findServiceName;
+      var addedService, id, serviceUrl, name, isUserAddedService, keywords;
       return __generator(this, function (_a) {
         switch (_a.label) {
           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);
             }, []);
-            return [4
-            /*yield*/
-            , effects.select(getServicesInArray)];
-
-          case 1:
-            services = _a.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;
-            };
-
             return [4
             /*yield*/
             , effects.put(layerSelectActions.addKeywordsAndActiveServices({
               serviceId: id,
-              serviceName: findServiceName(),
+              serviceName: name,
               serviceUrl: serviceUrl,
-              keywords: keywords
+              keywords: keywords,
+              isUserAddedService: isUserAddedService
             }))];
 
-          case 2:
+          case 1:
             _a.sent();
 
             return [2
@@ -8580,7 +8614,6 @@
       if (!isUserAddedService) return;
       var localStorageServices = getUserAddedServices();
       setUserAddedServices(__assign(__assign({}, localStorageServices), (_b = {}, _b[serviceUrl] = {
-        id: serviceUrl,
         name: name,
         url: serviceUrl
       }, _b)));
@@ -8596,7 +8629,7 @@
       delete updatedServices[serviceUrl];
       setUserAddedServices(updatedServices);
     }
-    function rootSaga() {
+    function rootSaga$1() {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -8654,7 +8687,138 @@
     var layerSelectConfig = {
       id: 'layerSelect-module',
       reducerMap: {
-        layerSelect: reducer
+        layerSelect: reducer$1
+      },
+      sagas: [rootSaga$1]
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var hideTime = 4000;
+    function openSnackbarSaga(capturedAction) {
+      var snackbarMessage, currentSnackbarMessages, id, currentSnackbarMessagesOpen;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            snackbarMessage = capturedAction.payload.snackbarContent.message;
+            return [4
+            /*yield*/
+            , effects.select(getCurrentSnackbarMessages)];
+
+          case 1:
+            currentSnackbarMessages = _a.sent();
+            if (!currentSnackbarMessages.length) return [3
+            /*break*/
+            , 3];
+            return [4
+            /*yield*/
+            , effects.put(snackbarActions.closeSnackbar())];
+
+          case 2:
+            _a.sent();
+
+            _a.label = 3;
+
+          case 3:
+            id = "snackbar" + Date.now().toString();
+            return [4
+            /*yield*/
+            , effects.put(snackbarActions.triggerOpenSnackbarBySaga({
+              snackbarContent: {
+                message: snackbarMessage,
+                id: id
+              }
+            }))];
+
+          case 4:
+            _a.sent(); // If no new snackbar is triggered cancelling this saga, hide the snackbar after X seconds
+
+
+            return [4
+            /*yield*/
+            , effects.delay(hideTime)];
+
+          case 5:
+            // If no new snackbar is triggered cancelling this saga, hide the snackbar after X seconds
+            _a.sent();
+
+            return [4
+            /*yield*/
+            , effects.select(getCurrentSnackbarMessages)];
+
+          case 6:
+            currentSnackbarMessagesOpen = _a.sent();
+            if (!currentSnackbarMessagesOpen.length) return [3
+            /*break*/
+            , 8];
+            return [4
+            /*yield*/
+            , effects.put(snackbarActions.closeSnackbar())];
+
+          case 7:
+            _a.sent();
+
+            _a.label = 8;
+
+          case 8:
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    }
+    function rootSaga() {
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            return [4
+            /*yield*/
+            , effects.takeLatest(snackbarActions.openSnackbar.type, openSnackbarSaga)];
+
+          case 1:
+            _a.sent();
+
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    }
+
+    /* *
+     * 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]
     };
@@ -8675,7 +8839,7 @@
      * 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");
@@ -9255,7 +9419,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$q = makeStyles__default["default"]({
+    var useStyles$p = makeStyles__default["default"]({
       buttonDiv: {
         position: 'relative'
       },
@@ -9288,7 +9452,7 @@
           handleClose = _a.handleClose,
           _d = _a.layerType,
           layerType = _d === void 0 ? LayerType.mapLayer : _d;
-      var classes = useStyles$q();
+      var classes = useStyles$p();
 
       var _e = __read(React__namespace.useState(''), 2),
           serviceURL = _e[0],
@@ -9356,6 +9520,12 @@
         }
       };
 
+      React__namespace.useEffect(function () {
+        if (!_.isEqual(preloadedServices, services)) {
+          setServices(preloadedServices);
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+      }, [preloadedServices]);
       return /*#__PURE__*/React__namespace.createElement(material.Dialog, {
         fullWidth: true,
         maxWidth: "md",
@@ -9485,10 +9655,21 @@
           open = _f[0],
           setOpen = _f[1];
 
+      var _g = __read(React__namespace.useState(shouldFocus), 2),
+          isTooltipDisabled = _g[0],
+          setTooltipDisabled = _g[1];
+
       var handleClose = function handleClose() {
         setOpen(!open);
       };
 
+      var onBlurTooltip = function onBlurTooltip(event) {
+        // enable tooltip again after user blurs
+        if (event.relatedTarget) {
+          setTooltipDisabled(false);
+        }
+      };
+
       React__namespace.useEffect(function () {
         if (shouldFocus && ref.current) {
           ref.current.focus();
@@ -9496,7 +9677,9 @@
 
       }, []);
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: tooltip
+        title: tooltip,
+        disableFocusListener: isTooltipDisabled,
+        onBlur: onBlurTooltip
       }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         onClick: handleClose,
         sx: styles$2.button,
@@ -9662,7 +9845,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$p = makeStyles__default["default"]({
+    var useStyles$o = makeStyles__default["default"]({
       row: {
         height: '32px'
       },
@@ -9686,7 +9869,7 @@
           layerManagerWidth = _a.layerManagerWidth,
           _e = _a.layerSelect,
           layerSelect = _e === void 0 ? false : _e;
-      var classes = useStyles$p();
+      var classes = useStyles$o();
       var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
       return /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
@@ -9910,7 +10093,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$o = makeStyles__default["default"](function (theme) {
+    var useStyles$n = makeStyles__default["default"](function (theme) {
       return createStyles__default["default"]({
         dropdownEmpty: {
           paddingLeft: 8,
@@ -9962,7 +10145,7 @@
           layers = _c === void 0 ? [] : _c,
           _d = _a.isEnabled,
           isEnabled = _d === void 0 ? true : _d;
-      var classes = useStyles$o();
+      var classes = useStyles$n();
 
       if (!layers || !layers.length) {
         return /*#__PURE__*/React__namespace.createElement("div", {
@@ -10044,7 +10227,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$n = makeStyles__default["default"](function (theme) {
+    var useStyles$m = makeStyles__default["default"](function (theme) {
       return {
         opacityDiv: {
           height: 'calc(100% - 5px)',
@@ -10104,8 +10287,7 @@
           onLayerChangeOpacity = _a.onLayerChangeOpacity,
           _b = _a.isEnabled,
           isEnabled = _b === void 0 ? true : _b;
-      var classes = useStyles$n();
-      var sliderClasses = shared.sliderStyles();
+      var classes = useStyles$m();
 
       var _c = __read(React__namespace.useState(false), 2),
           open = _c[0],
@@ -10169,8 +10351,8 @@
         onBlur: onBlur
       }, currentOpacityText)), open ? /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.sliderBackground
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: sliderClasses.sliderHeader
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: shared.sliderHeaderStyle
       }, "Opacity"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
         "data-testid": "opacitySlider",
         orientation: "vertical",
@@ -10318,26 +10500,22 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$m = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        svgIcon: {
-          fill: function fill(_a) {
-            var isActive = _a.isActive,
-                isEnabled = _a.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(_a) {
       var _b = _a.tooltipTitle,
@@ -10347,15 +10525,12 @@
           isActive = _c === void 0 ? false : _c,
           _d = _a.isEnabled,
           isEnabled = _d === void 0 ? true : _d;
-      var classes = useStyles$m({
-        isActive: isActive,
-        isEnabled: isEnabled
-      });
+      var iconStyle = makeIconStyle(isActive, isEnabled);
       return /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
         tooltipTitle: tooltipTitle,
         onClick: onClickActivate,
         icon: /*#__PURE__*/React__namespace.createElement(theme.Flag, {
-          className: classes.svgIcon
+          sx: iconStyle
         }),
         testId: "activateLayerButton",
         isActive: isActive
@@ -11357,6 +11532,15 @@
         }));
       }, 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(_a) {
       var mapId = _a.mapId,
@@ -11370,14 +11554,16 @@
       });
       React__namespace.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) {
@@ -11703,52 +11889,64 @@
     };
 
     var ServicePopup = function ServicePopup(_a) {
-      var _b, _c;
-
       var servicePopupVariant = _a.servicePopupVariant,
-          _d = _a.hideBackdrop,
-          hideBackdrop = _d === void 0 ? false : _d,
+          _b = _a.hideBackdrop,
+          hideBackdrop = _b === void 0 ? false : _b,
           isOpen = _a.isOpen,
           closePopup = _a.closePopup,
+          serviceId = _a.serviceId,
           url = _a.url,
           services = _a.services,
           serviceSetLayers = _a.serviceSetLayers;
 
-      var _e = __read(React__namespace.useState(servicePopupVariant !== 'edit' || services === undefined ? '' : (_b = services[url]) === null || _b === void 0 ? void 0 : _b.name), 2),
-          serviceName = _e[0],
-          setServiceName = _e[1];
+      var _c = __read(React__namespace.useState(''), 2),
+          serviceName = _c[0],
+          setServiceName = _c[1];
+
+      var _d = __read(React__namespace.useState(''), 2),
+          serviceUrl = _d[0],
+          setServiceUrl = _d[1];
 
-      var _f = __read(React__namespace.useState(servicePopupVariant === 'add' || url === undefined ? '' : url), 2),
-          serviceUrl = _f[0],
-          setServiceUrl = _f[1];
+      var _e = __read(React__namespace.useState(''), 2),
+          _abstract = _e[0],
+          setAbstract = _e[1];
 
-      var _g = __read(React__namespace.useState(servicePopupVariant !== 'edit' || services === undefined ? '' : (_c = services[url]) === null || _c === void 0 ? void 0 : _c["abstract"]), 2),
-          _abstract = _g[0],
-          setAbstract = _g[1];
+      var _f = __read(React__namespace.useState(false), 2),
+          disableButton = _f[0],
+          setDisableButton = _f[1];
+
+      var _g = __read(React__namespace.useState(false), 2),
+          isLoading = _g[0],
+          setIsLoading = _g[1];
 
       var _h = __read(React__namespace.useState(false), 2),
-          disableButton = _h[0],
-          setDisableButton = _h[1];
+          serviceNameHasError = _h[0],
+          setServiceNameHasError = _h[1];
 
-      var _j = __read(React__namespace.useState(false), 2),
-          isLoading = _j[0],
-          setIsLoading = _j[1];
+      var _j = __read(React__namespace.useState(''), 2),
+          serviceNameHelperText = _j[0],
+          setServiceNameHelperText = _j[1];
 
       var _k = __read(React__namespace.useState(false), 2),
-          serviceNameHasError = _k[0],
-          setServiceNameHasError = _k[1];
+          serviceUrlHasError = _k[0],
+          setServiceUrlHasError = _k[1];
 
       var _l = __read(React__namespace.useState(''), 2),
-          serviceNameHelperText = _l[0],
-          setServiceNameHelperText = _l[1];
+          serviceUrlHelperText = _l[0],
+          setServiceUrlHelperText = _l[1];
 
-      var _m = __read(React__namespace.useState(false), 2),
-          serviceUrlHasError = _m[0],
-          setServiceUrlHasError = _m[1];
+      React__namespace.useEffect(function () {
+        var _a;
+
+        if (servicePopupVariant === 'edit') {
+          setServiceName(((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName) || '');
+          setServiceUrl(url || '');
+        }
 
-      var _o = __read(React__namespace.useState(''), 2),
-          serviceUrlHelperText = _o[0],
-          setServiceUrlHelperText = _o[1];
+        if (servicePopupVariant === 'save') {
+          setServiceUrl(url || '');
+        }
+      }, [serviceId, services, url, servicePopupVariant, isOpen]);
 
       var validateServiceUrl = function validateServiceUrl(url) {
         if (url === '' || url === null || typeof url === 'undefined') return false;
@@ -11847,11 +12045,10 @@
 
       var ServiceNameInRedux = function ServiceNameInRedux() {
         if (servicePopupVariant === 'add' || servicePopupVariant === 'save') {
-          for (var service in services) {
-            if (services && services[service].name.toLowerCase() === serviceName.toLowerCase()) return true;
-          }
-
-          return false;
+          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;
@@ -11859,11 +12056,10 @@
 
       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;
@@ -11871,6 +12067,7 @@
 
 
       React__namespace.useEffect(function () {
+        if (serviceName === undefined) return;
         setServiceNameHelperText('');
 
         if (ServiceNameInRedux()) {
@@ -11886,7 +12083,7 @@
       React__namespace.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()) {
@@ -11973,7 +12170,8 @@
           return setAbstract(event.target.value);
         },
         value: _abstract,
-        "data-testid": "abstractTextField"
+        "data-testid": "abstractTextField",
+        disabled: true
       })), /*#__PURE__*/React__namespace.createElement(material.DialogActions, {
         sx: style$1.footerContent
       }, /*#__PURE__*/React__namespace.createElement(material.Button, {
@@ -12029,10 +12227,11 @@
           hideBackdrop = _a.hideBackdrop,
           isOpen = _a.isOpen,
           closePopup = _a.closePopup,
+          serviceId = _a.serviceId,
           url = _a.url;
       var dispatch = reactRedux.useDispatch();
       var services = reactRedux.useSelector(function (store) {
-        return getServices(store);
+        return getActiveServices(store);
       });
       var serviceSetLayers = React__default["default"].useCallback(function (payload) {
         dispatch(serviceActions.serviceSetLayers(payload));
@@ -12042,9 +12241,10 @@
         hideBackdrop: hideBackdrop,
         isOpen: isOpen,
         closePopup: closePopup,
-        url: url,
+        serviceId: serviceId,
         services: services,
-        serviceSetLayers: serviceSetLayers
+        serviceSetLayers: serviceSetLayers,
+        url: url
       });
     };
 
@@ -12437,15 +12637,27 @@
           mapLayers = _a.mapLayers,
           keywordIds = _a.keywordIds,
           allKeywordsActive = _a.allKeywordsActive;
+      var layerSelectFilterHeight = 199;
 
       var _b = __read(React__namespace.useState(0), 2),
           numberOfLayers = _b[0],
           setNumberOfLayers = _b[1];
 
+      var _c = __read(React__namespace.useState([]), 2),
+          layersFilteredFromService = _c[0],
+          setLayersFilteredFromService = _c[1];
+
       React__namespace.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 __assign(__assign({}, layer), {
+              serviceId: serviceId
+            });
+          }));
+        }, []));
       }, [serviceIds, keywordIds, services, searchString, allKeywordsActive]);
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "layerList"
@@ -12454,25 +12666,26 @@
           marginBottom: '4px',
           fontSize: '12px'
         }
-      }, numberOfLayers, " results"), /*#__PURE__*/React__namespace.createElement(material.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__namespace.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__namespace.createElement(reactWindow.FixedSizeList, {
+        height: layerSelectHeight - layerSelectFilterHeight,
+        itemCount: numberOfLayers,
+        itemSize: 68
+      }, function (_a) {
+        var index = _a.index,
+            style = _a.style;
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          style: style,
+          key: layersFilteredFromService[index].name
+        }, /*#__PURE__*/React__namespace.createElement(LayerListRow, {
+          layer: layersFilteredFromService[index],
+          layerIndex: index,
+          service: services[layersFilteredFromService[index].serviceId],
+          serviceUrl: services[layersFilteredFromService[index].serviceId].serviceUrl,
+          addLayer: addLayer,
+          deleteLayer: deleteLayer,
+          mapLayers: mapLayers
+        }));
+      }));
     };
 
     /* *
@@ -12991,13 +13204,19 @@
 
     var ServiceOptionsDialog = function ServiceOptionsDialog(_a) {
       var services = _a.services,
-          mapStoreRemoveService = _a.mapStoreRemoveService,
-          _b = _a.layers,
-          layers = _b === void 0 ? [] : _b;
+          mapStoreRemoveService = _a.mapStoreRemoveService;
 
-      var _c = __read(React__namespace.useState(false), 2),
-          addServiceisOpen = _c[0],
-          setAddServiceIsOpen = _c[1];
+      var _b = __read(React__namespace.useState(false), 2),
+          addServiceIsOpen = _b[0],
+          setAddServiceIsOpen = _b[1];
+
+      var _c = __read(React__namespace.useState({
+        isOpen: false,
+        serviceId: '',
+        serviceUrl: ''
+      }), 2),
+          editServiceIsOpen = _c[0],
+          setEditServiceIsOpen = _c[1];
 
       var openAddService = function openAddService() {
         setAddServiceIsOpen(true);
@@ -13005,13 +13224,10 @@
 
       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: ''
         });
       };
 
@@ -13040,16 +13256,25 @@
             marginRight: '-10px'
           }
         }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-          title: "Edit Service"
+          title: "Edit Service",
+          disableHoverListener: !services[serviceId].isUserAddedService
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.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__namespace.createElement(theme.Edit, null)))), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-          title: "Delete Service"
+          title: "Delete Service",
+          disableHoverListener: !services[serviceId].isUserAddedService
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
           size: "large",
-          disabled: isDisabled(services[serviceId].serviceUrl),
+          disabled: !services[serviceId].isUserAddedService,
           onClick: function onClick() {
             return mapStoreRemoveService(serviceId, services[serviceId].serviceUrl);
           },
@@ -13063,10 +13288,16 @@
         sx: styles.button,
         variant: "tertiary",
         startIcon: /*#__PURE__*/React__namespace.createElement(theme.Add, null)
-      }, "Add a new service"))), addServiceisOpen && /*#__PURE__*/React__namespace.createElement(ServicePopupConnect, {
+      }, "Add a new service"))), addServiceIsOpen && /*#__PURE__*/React__namespace.createElement(ServicePopupConnect, {
         servicePopupVariant: "add",
-        isOpen: addServiceisOpen,
+        isOpen: addServiceIsOpen,
         closePopup: closePopup
+      }), editServiceIsOpen && /*#__PURE__*/React__namespace.createElement(ServicePopupConnect, {
+        servicePopupVariant: "edit",
+        isOpen: editServiceIsOpen.isOpen,
+        closePopup: closePopup,
+        serviceId: editServiceIsOpen.serviceId,
+        url: editServiceIsOpen.serviceUrl
       }));
     };
 
@@ -13089,9 +13320,6 @@
 
     var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect() {
       var dispatch = reactRedux.useDispatch();
-      var allLayers = reactRedux.useSelector(function (store) {
-        return getAllLayers(store);
-      });
       var mapStoreRemoveService = React__namespace.useCallback(function (serviceId, serviceUrl) {
         dispatch(serviceActions.mapStoreRemoveService({
           id: serviceId,
@@ -13103,7 +13331,6 @@
       });
       return /*#__PURE__*/React__namespace.createElement(ServiceOptionsDialog, {
         services: services,
-        layers: allLayers,
         mapStoreRemoveService: mapStoreRemoveService
       });
     };
@@ -13394,40 +13621,6 @@
       });
     };
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
-    var CustomSwitch = withStyles__default["default"](function (theme) {
-      return {
-        switchBase: {
-          '&$checked': {
-            color: theme.palette.geowebColors.customSlider.thumb
-          },
-          '&$checked + $track': {
-            backgroundColor: theme.palette.geowebColors.buttons.primary["default"].fill
-          }
-        },
-        checked: {},
-        track: {
-          backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
-          opacity: '1 !important'
-        }
-      };
-    })(material.Switch);
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -13464,7 +13657,7 @@
           keywords: keywords
         }));
       }, [allKeywordIds, allKeywordsActive, checkedKeywordIds, dispatch]);
-      return /*#__PURE__*/React__namespace.createElement(CustomSwitch, {
+      return /*#__PURE__*/React__namespace.createElement(material.Switch, {
         checked: allKeywordsActive,
         onChange: toggleKeywords,
         "data-testid": "customSwitch"
@@ -13753,6 +13946,11 @@
       var serviceSetLayers = React__namespace.useCallback(function (payload) {
         dispatch(serviceActions.serviceSetLayers(payload));
       }, [dispatch]);
+
+      var checkIfUserAddedService = function checkIfUserAddedService(service) {
+        return !!service.isUserAddedService;
+      };
+
       React__namespace.useEffect(function () {
         if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
           mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
@@ -13764,7 +13962,7 @@
                   name: service.name,
                   serviceUrl: service.url,
                   layers: layers,
-                  isUserAddedService: false
+                  isUserAddedService: checkIfUserAddedService(service)
                 });
               }
             })["catch"](function () {
@@ -13938,15 +14136,10 @@
       return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         placement: placement,
         title: title
-      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        component: "span",
-        sx: {
-          marginBottom: '8px'
-        }
       }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, __assign({
         onClick: onClick,
         active: isActive
-      }, props), children)));
+      }, props), children));
     };
 
     /* *
@@ -14779,6 +14972,8 @@
      * 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(_a) {
       var _b = _a.toggleAutoUpdate,
@@ -14790,10 +14985,9 @@
           _d = _a.disabled,
           disabled = _d === void 0 ? false : _d;
       return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: isAutoUpdating ? 'Auto update on' : 'Auto update off'
-      }, /*#__PURE__*/React__namespace.createElement("span", {
+        title: isAutoUpdating ? titleOn : titleOff,
         "data-testid": "autoUpdateButtonTooltip"
-      }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
         active: isAutoUpdating,
         disabled: disabled,
         onClick: function onClick() {
@@ -14841,12 +15035,12 @@
         }
       };
     });
+    var speedTooltipTitle = 'Speed';
 
     var SpeedButton = function SpeedButton(_a) {
       var animationDelay = _a.animationDelay,
           setMapAnimationDelay = _a.setMapAnimationDelay;
       var classes = useStyles$c();
-      var sliderClasses = shared.sliderStyles();
 
       var _b = __read(React__namespace.useState(false), 2),
           open = _b[0],
@@ -14901,17 +15095,17 @@
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.speedButtonDiv
       }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: "Speed"
-      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        title: speedTooltipTitle
+      }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
         onClick: onClickButton,
         active: true,
         "data-testid": "speedButton"
       }, /*#__PURE__*/React__namespace.createElement(theme.TextIcon, {
         text: text
-      })))), open ? /*#__PURE__*/React__namespace.createElement("div", {
+      }))), open ? /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.sliderBackground
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: sliderClasses.sliderHeader
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: shared.sliderHeaderStyle
       }, "Speed"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
         "data-testid": "speedSlider",
         orientation: "vertical",
@@ -15088,31 +15282,7 @@
         disabled: {}
       };
     });
-    var TimeStepSwitch = withStyles__default["default"](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'
-        }
-      };
-    })(material.Switch);
+    var timeStepTitle = 'Time step';
 
     var TimeStepButton = function TimeStepButton(_a) {
       var timeStep = _a.timeStep,
@@ -15127,7 +15297,6 @@
         return null;
       } : _d;
       var classes = useStyles$b();
-      var sliderClasses = shared.sliderStyles();
 
       var _e = __read(React__namespace.useState(false), 2),
           open = _e[0],
@@ -15184,8 +15353,8 @@
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.timeStepDiv
       }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: "Time step"
-      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        title: timeStepTitle
+      }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
         active: true,
         onClick: onClickButton,
         "data-testid": "timeStepButton",
@@ -15193,10 +15362,10 @@
       }, /*#__PURE__*/React__namespace.createElement(theme.FastForward, null), /*#__PURE__*/React__namespace.createElement(theme.TextIcon, {
         text: currentMark && currentMark.text || '',
         "data-testid": "timeStepButtonText"
-      })))), open ? /*#__PURE__*/React__namespace.createElement("div", {
+      }))), open ? /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.sliderBackground
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: sliderClasses.sliderHeader
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: shared.sliderHeaderStyle
       }, "Time step"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
         "data-testid": "timeStepButtonSlider",
         orientation: "vertical",
@@ -15214,14 +15383,17 @@
       }, /*#__PURE__*/React__namespace.createElement("span", {
         "data-testid": "timestepAutoSwitchTooltip"
       }, /*#__PURE__*/React__namespace.createElement(material.FormControlLabel, {
-        control: /*#__PURE__*/React__namespace.createElement(TimeStepSwitch, {
+        control: /*#__PURE__*/React__namespace.createElement(material.Switch, {
           checked: isTimestepAuto,
           onChange: function onChange() {
             return onToggleTimestepAuto();
           },
           disabled: disabled,
           id: "timestepAutoSwitch",
-          disableRipple: true
+          disableRipple: true,
+          sx: {
+            marginLeft: '18px'
+          }
         }),
         label: "Auto",
         labelPlacement: "end",
@@ -15280,13 +15452,13 @@
       var id = open ? 'simple-popover' : undefined;
       return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: "Options"
-      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+      }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
         onClick: onClickButton,
         "data-testid": "optionsMenuButton",
         active: open
       }, /*#__PURE__*/React__namespace.createElement(theme.Options, {
         "data-testid": "optionsIcon"
-      })))), /*#__PURE__*/React__namespace.createElement(OptionsPopOver, {
+      }))), /*#__PURE__*/React__namespace.createElement(OptionsPopOver, {
         id: id,
         open: open,
         "data-testid": "optionsMenuPopOver",
@@ -21052,8 +21224,10 @@
 
 
         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 */
@@ -21376,7 +21550,10 @@
           _this.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
+          _this.props.displayMapPin && // eslint-disable-next-line react/destructuring-assignment
+          !_this.props.disableMapPin) {
             onMapPinChangeLocation({
               mapPinLocation: {
                 lat: mapPinLatLonCoordinate.lat,
@@ -21485,6 +21662,7 @@
         },
         shouldAutoFetch: true,
         displayMapPin: false,
+        disableMapPin: false,
         onMount: function onMount() {
           return null;
         },
@@ -22029,7 +22207,8 @@
           displayDimensionSelectButtonInMap = _o === void 0 ? true : _o,
           _p = _a.multiLegend,
           multiLegend = _p === void 0 ? true : _p,
-          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 = reactRedux.useDispatch();
       var mapId = React__default["default"].useRef(id || generateMapId()).current;
@@ -22060,7 +22239,17 @@
         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["default"].createElement(material.Box, {
         sx: {
@@ -23131,21 +23320,17 @@
         }
       }, /*#__PURE__*/React__default["default"].createElement("h1", {
         "data-testid": "map-warning-properties-title"
-      }, selectedFeatureProperties.country), selectedFeatureProperties.details[0].event && /*#__PURE__*/React__default["default"].createElement("pre", {
-        "data-testid": "map-warning-properties-row"
-      }, "Event: ", selectedFeatureProperties.details[0].event), selectedFeatureProperties.details[0].sent && /*#__PURE__*/React__default["default"].createElement("pre", {
-        "data-testid": "map-warning-properties-row"
-      }, "Sent:", ' ', moment__default["default"].utc(selectedFeatureProperties.details[0].sent).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].expires && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, selectedFeatureProperties.areaDesc), selectedFeatureProperties.areaDesc && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Expires:", ' ', moment__default["default"].utc(selectedFeatureProperties.details[0].expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].web && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "event: ", selectedFeatureProperties.languages[2].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Web: ", selectedFeatureProperties.details[0].web), selectedFeatureProperties.details[0].sender && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "Sent:", ' ', moment__default["default"].utc(selectedFeatureProperties.onset).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.expires && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Sender: ", selectedFeatureProperties.details[0].sender), selectedFeatureProperties.details[0].identifier && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "Expires:", ' ', moment__default["default"].utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[2].senderName && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Identifier: ", selectedFeatureProperties.details[0].identifier), selectedFeatureProperties.details[0].area && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "Sender: ", selectedFeatureProperties.languages[2].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "area: ", selectedFeatureProperties.details[0].area));
+      }, "Identifier: ", selectedFeatureProperties.identifier));
     };
 
     /* *
@@ -23195,9 +23380,7 @@
     exports.dateFormat = dateFormat;
     exports.defaultBbox = defaultBbox;
     exports.defaultConfigurations = defaultConfigurations;
-    exports.filterBaseLayers = filterBaseLayers;
     exports.filterLayers = filterLayers;
-    exports.filterMapLayers = filterMapLayers;
     exports.filterMapPresets = filterMapPresets;
     exports.filterNonTimeDimensions = filterNonTimeDimensions;
     exports.filterServices = filterServices;
@@ -23205,7 +23388,7 @@
     exports.generateMapId = generateMapId;
     exports.generateTimesliderId = generateTimesliderId;
     exports.getFirstTimeStepForLayerId = getFirstTimeStepForLayerId;
-    exports.getInitialPresets = getInitialPresets;
+    exports.getInitialAppPresets = getInitialAppPresets;
     exports.getLastTimeStepForLayerId = getLastTimeStepForLayerId;
     exports.getNextTimeStepForLayerId = getNextTimeStepForLayerId;
     exports.getPreviousTimeStepForLayerId = getPreviousTimeStepForLayerId;
@@ -23214,12 +23397,14 @@
     exports.getWMJSTimeDimensionForLayerId = getWMJSTimeDimensionForLayerId;
     exports.getWMLayerById = getWMLayerById;
     exports.layerActions = layerActions;
-    exports.layerReducer = reducer$5;
+    exports.layerReducer = reducer$6;
     exports.mapActions = mapActions;
     exports.mapModuleConfig = moduleConfig;
     exports.mapSelectors = selectors;
     exports.mapTypes = types$2;
     exports.mapUtils = utils;
+    exports.parseBoolean = parseBoolean;
+    exports.parseLayer = parseLayer;
     exports.publicLayers = publicLayers;
     exports.publicServices = publicServices;
     exports.registerWMJSMap = registerWMJSMap;