@opengeoweb/core 4.7.1 → 4.8.0

package/index.esm.js

@@ -3,21 +3,21 @@ import produce$1, { current, produce } from 'immer';
 import moment from 'moment';
 import * as React from 'react';
 import React__default, { Component, useRef, useState, useEffect, useCallback } from 'react';
-import _, { debounce, isEqual, groupBy, throttle, range } from 'lodash';
+import _, { debounce, isEqual, escapeRegExp, groupBy, throttle, range } from 'lodash';
 import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { CustomTooltip, ToolButton, ToolContainerDraggable, IS_JEST, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, CustomAccordion, EnableButton, ManagerDeleteButton, AlertBanner, calculateDialogSizeAndPosition, useIsMounted, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
-import { Pause, Play, Add, Copy, Both, None, DragHandle as DragHandle$1, Cached, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Filter, Search, Clear, Close, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { Pause, Play, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Add, Copy, Both, None, DragHandle as DragHandle$1, Cached, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Close, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { Paper, Box, Typography, IconButton, Grid, MenuItem, Button, Popper, FormControl, InputLabel, List, ListItem, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, LinearProgress, InputAdornment, Backdrop, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, styled, Slider, Menu, useTheme, Snackbar } from '@mui/material';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
-import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
-import { useFormContext } from 'react-hook-form';
 import { FixedSizeList } from 'react-window';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 import Grid$1 from '@mui/material/Grid';
+import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
+import { useFormContext } from 'react-hook-form';
 import { Box as Box$2 } from '@mui/system';
 import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
@@ -480,6 +480,13 @@ var registerWMLayer = function registerWMLayer(wmLayer, layerId) {
 var getWMLayerById = function getWMLayerById(layerId) {
   return registeredWMLayersForReactLayerId[layerId];
 };
+var unRegisterWMJSLayer = function unRegisterWMJSLayer(layerId) {
+  var layer = registeredWMLayersForReactLayerId[layerId];
+
+  if (layer) {
+    delete registeredWMLayersForReactLayerId[layerId];
+  }
+};
 /**
  * Map for registering wmlayers with their id's
  */
@@ -492,8 +499,33 @@ var registeredWMMapForReactMapId = {};
  */
 
 var registerWMJSMap = function registerWMJSMap(wmjsMap, wmjsMapId) {
+  if (registeredWMMapForReactMapId[wmjsMapId]) {
+    console.warn("Map with id ".concat(wmjsMapId, " already made"));
+  }
+
   registeredWMMapForReactMapId[wmjsMapId] = wmjsMap;
 };
+var unRegisterWMJSMap = function unRegisterWMJSMap(wmjsMapId) {
+  var wmjsMap = registeredWMMapForReactMapId[wmjsMapId];
+
+  if (wmjsMap) {
+    wmjsMap.getListener().suspendEvents();
+
+    try {
+      wmjsMap.stopAnimating && wmjsMap.stopAnimating(); // eslint-disable-next-line no-empty
+    } catch (e) {}
+
+    Object.keys(registeredWMLayersForReactLayerId).forEach(function (layerId) {
+      var wmLayer = getWMLayerById(layerId);
+
+      if (wmLayer.parentMap === wmjsMap) {
+        unRegisterWMJSLayer(layerId);
+      }
+    });
+    wmjsMap.destroy();
+    delete registeredWMMapForReactMapId[wmjsMapId];
+  }
+};
 /**
  * Get the wmjsMap from the lookuptable with wmjsMapId
  * @param {string} wmjsMapId
@@ -1597,7 +1629,7 @@ var createLayer = function createLayer(_a) {
     status: status
   });
 };
-var initialState$6 = {
+var initialState$7 = {
   byId: {},
   allIds: [],
   availableBaseLayers: {
@@ -1605,8 +1637,8 @@ var initialState$6 = {
     allIds: []
   }
 };
-var slice$6 = createSlice({
-  initialState: initialState$6,
+var slice$7 = createSlice({
+  initialState: initialState$7,
   name: 'layerReducer',
   reducers: {
     addLayer: function addLayer(draft, action) {
@@ -1850,9 +1882,9 @@ var slice$6 = createSlice({
           layerDimensions = _action$payload12.layerDimensions;
       var layerStyleAction = layerActions.layerChangeStyle(layerStyle);
       var state = current(draft);
-      var intermediateState = layerStyle === null ? state : reducer$6(state, layerStyleAction);
+      var intermediateState = layerStyle === null ? state : reducer$7(state, layerStyleAction);
       var dimensionsAction = layerActions.layerSetDimensions(layerDimensions);
-      var newState = layerDimensions === null ? intermediateState : reducer$6(intermediateState, dimensionsAction);
+      var newState = layerDimensions === null ? intermediateState : reducer$7(intermediateState, dimensionsAction);
       return newState;
     },
     setSelectedFeature: function setSelectedFeature(draft, action) {
@@ -1908,7 +1940,7 @@ var slice$6 = createSlice({
         };
         /* Handle the Layer action with the same logic, using the same reducer */
 
-        return reducer$6(prevState, action);
+        return reducer$7(prevState, action);
       }, state);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -1928,8 +1960,8 @@ var slice$6 = createSlice({
     });
   }
 });
-var reducer$6 = slice$6.reducer;
-var layerActions = slice$6.actions;
+var reducer$7 = slice$7.reducer;
+var layerActions = slice$7.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1947,12 +1979,12 @@ var layerActions = slice$6.actions;
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var initialState$5 = {
+var initialState$6 = {
   byId: {},
   allIds: []
 };
-var slice$5 = createSlice({
-  initialState: initialState$5,
+var slice$6 = createSlice({
+  initialState: initialState$6,
   name: 'serviceReducer',
   reducers: {
     serviceSetLayers: function serviceSetLayers(draft, action) {
@@ -1979,13 +2011,13 @@ var slice$5 = createSlice({
       var serviceLayers = action.payload.serviceLayers;
       if (serviceLayers === null) return draft;
       var mapAction = serviceActions.serviceSetLayers(serviceLayers);
-      var newState = reducer$5(draft, mapAction);
+      var newState = reducer$6(draft, mapAction);
       return newState;
     });
   }
 });
-var reducer$5 = slice$5.reducer;
-var serviceActions = slice$5.actions;
+var reducer$6 = slice$6.reducer;
+var serviceActions = slice$6.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2156,13 +2188,13 @@ var createUIDialogElement = function createUIDialogElement(_ref) {
     error: undefined
   };
 };
-var initialState$4 = {
+var initialState$5 = {
   order: [],
   dialogs: {},
   activeWindowId: undefined
 };
-var slice$4 = createSlice({
-  initialState: initialState$4,
+var slice$5 = createSlice({
+  initialState: initialState$5,
   name: 'uiReducer',
   reducers: {
     registerDialog: function registerDialog(draft, action) {
@@ -2251,8 +2283,8 @@ var slice$4 = createSlice({
     }
   }
 });
-var reducer$4 = slice$4.reducer;
-var uiActions = slice$4.actions;
+var reducer$5 = slice$5.reducer;
+var uiActions = slice$5.actions;
 
 var addBaseLayer = layerActions.addBaseLayer,
     addLayer$1 = layerActions.addLayer,
@@ -2303,12 +2335,12 @@ var createLayersWithIds = function createLayersWithIds(state, layers) {
   });
 };
 
-var initialState$3 = {
+var initialState$4 = {
   byId: {},
   allIds: []
 };
-var slice$3 = createSlice({
-  initialState: initialState$3,
+var slice$4 = createSlice({
+  initialState: initialState$4,
   name: 'mapReducer',
   reducers: {
     registerMap: function registerMap(draft, action) {
@@ -2602,13 +2634,24 @@ var slice$3 = createSlice({
       }
 
       draft.byId[mapId].displayMapPin = displayMapPin;
+    },
+    setDockedLayerManagerSize: function setDockedLayerManagerSize(draft, action) {
+      var _action$payload22 = action.payload,
+          mapId = _action$payload22.mapId,
+          dockedLayerManagerSize = _action$payload22.dockedLayerManagerSize;
+
+      if (!draft.byId[mapId]) {
+        return;
+      }
+
+      draft.byId[mapId].dockedLayerManagerSize = dockedLayerManagerSize;
     }
   },
   extraReducers: function extraReducers(builder) {
     builder.addCase(addLayer$1, function (draft, action) {
-      var _action$payload22 = action.payload,
-          layerId = _action$payload22.layerId,
-          mapId = _action$payload22.mapId;
+      var _action$payload23 = action.payload,
+          layerId = _action$payload23.layerId,
+          mapId = _action$payload23.mapId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2625,10 +2668,10 @@ var slice$3 = createSlice({
 
       draft.byId[mapId].mapLayers.unshift(layerId);
     }).addCase(addBaseLayer, function (draft, action) {
-      var _action$payload23 = action.payload,
-          layer = _action$payload23.layer,
-          layerId = _action$payload23.layerId,
-          mapId = _action$payload23.mapId;
+      var _action$payload24 = action.payload,
+          layer = _action$payload24.layer,
+          layerId = _action$payload24.layerId,
+          mapId = _action$payload24.mapId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2678,9 +2721,9 @@ var slice$3 = createSlice({
         }
       }
     }).addCase(setBaseLayers$1, function (draft, action) {
-      var _action$payload24 = action.payload,
-          layers = _action$payload24.layers,
-          mapId = _action$payload24.mapId; // Split into base and overlayers
+      var _action$payload25 = action.payload,
+          layers = _action$payload25.layers,
+          mapId = _action$payload25.mapId; // Split into base and overlayers
 
       var baseLayers = [];
       var overLayers = [];
@@ -2707,9 +2750,9 @@ var slice$3 = createSlice({
         if (overLayerIds.length !== 0) draft.byId[mapId].overLayers = overLayerIds;
       }
     }).addCase(layerDelete$1, function (draft, action) {
-      var _action$payload25 = action.payload,
-          mapId = _action$payload25.mapId,
-          layerId = _action$payload25.layerId;
+      var _action$payload26 = action.payload,
+          mapId = _action$payload26.mapId,
+          layerId = _action$payload26.layerId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2730,9 +2773,9 @@ var slice$3 = createSlice({
         draft.byId[mapId].activeLayerId = '';
       }
     }).addCase(baseLayerDelete, function (draft, action) {
-      var _action$payload26 = action.payload,
-          mapId = _action$payload26.mapId,
-          layerId = _action$payload26.layerId;
+      var _action$payload27 = action.payload,
+          mapId = _action$payload27.mapId,
+          layerId = _action$payload27.layerId;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2745,14 +2788,14 @@ var slice$3 = createSlice({
         return id !== layerId;
       });
     }).addCase(layerChangeDimension$1, function (draft, action) {
-      var _action$payload27 = action.payload,
-          layerId = _action$payload27.layerId,
-          dimension = _action$payload27.dimension;
+      var _action$payload28 = action.payload,
+          layerId = _action$payload28.layerId,
+          dimension = _action$payload28.dimension;
       produceDraftStateSetMapDimensionFromLayerChangeDimension(draft, layerId, dimension);
     }).addCase(setTimeSync, function (draft, action) {
-      var _action$payload28 = action.payload,
-          targetsFromAction = _action$payload28.targets,
-          source = _action$payload28.source;
+      var _action$payload29 = action.payload,
+          targetsFromAction = _action$payload29.targets,
+          source = _action$payload29.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
 
       var targets = [{
@@ -2776,9 +2819,9 @@ var slice$3 = createSlice({
         }
       });
     }).addCase(setBboxSync, function (draft, action) {
-      var _action$payload29 = action.payload,
-          targetsFromAction = _action$payload29.targets,
-          source = _action$payload29.source;
+      var _action$payload30 = action.payload,
+          targetsFromAction = _action$payload30.targets,
+          source = _action$payload30.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
 
       var targets = [{
@@ -2809,9 +2852,9 @@ var slice$3 = createSlice({
        * These targets can be used as payloads in new Layer actions.
        * These actions are here handled via the layer reducer, as it is the same logic
        */
-      var _action$payload30 = action.payload,
-          targets = _action$payload30.targets,
-          source = _action$payload30.source;
+      var _action$payload31 = action.payload,
+          targets = _action$payload31.targets,
+          source = _action$payload31.source;
       return targets.reduce(function (prevState, target) {
         var action = {
           payload: target,
@@ -2819,17 +2862,17 @@ var slice$3 = createSlice({
         };
         /* Handle the Layer action with the same logic, using the same reducer */
 
-        return reducer$3(prevState, action);
+        return reducer$4(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$3(draft, mapAction);
+      return reducer$4(draft, mapAction);
     }).addCase(mapChangeDimension, function (draft, action) {
-      var _action$payload31 = action.payload,
-          mapId = _action$payload31.mapId,
-          dimensionFromAction = _action$payload31.dimension;
+      var _action$payload32 = action.payload,
+          mapId = _action$payload32.mapId,
+          dimensionFromAction = _action$payload32.dimension;
       produceDraftStateSetWebMapDimension(draft, mapId, dimensionFromAction, true);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -2846,14 +2889,14 @@ var slice$3 = createSlice({
       draft.byId[mapId].isAnimating = false;
       draft.byId[mapId].isTimeSliderVisible = true;
       draft.byId[mapId].isTimestepAuto = true;
-      draft.byId[mapId].displayMapPin = false;
       draft.byId[mapId].shouldShowZoomControls = true;
       draft.byId[mapId].timeStep = undefined;
       draft.byId[mapId].animationDelay = defaultAnimationDelayAtStart;
+      draft.byId[mapId].dockedLayerManagerSize = '';
     }).addCase(uiActions.registerDialog, function (draft, action) {
-      var _action$payload32 = action.payload,
-          mapId = _action$payload32.mapId,
-          type = _action$payload32.type;
+      var _action$payload33 = action.payload,
+          mapId = _action$payload33.mapId,
+          type = _action$payload33.type;
 
       if (!draft.byId[mapId]) {
         return;
@@ -2863,11 +2906,11 @@ var slice$3 = createSlice({
     });
   }
 });
-var mapActions$1 = Object.assign(Object.assign({}, slice$3.actions), {
+var mapActions$1 = Object.assign(Object.assign({}, slice$4.actions), {
   setMapPreset: setMapPreset,
   mapChangeDimension: mapChangeDimension
 });
-var reducer$3 = slice$3.reducer;
+var reducer$4 = slice$4.reducer;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3450,7 +3493,7 @@ var removeInPlace = function removeInPlace(inDraftArray, condition) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var initialState$2 = {
+var initialState$3 = {
   sources: {
     byId: {},
     allIds: []
@@ -3474,8 +3517,8 @@ var initialState$2 = {
     }
   }
 };
-var slice$2 = createSlice({
-  initialState: initialState$2,
+var slice$3 = createSlice({
+  initialState: initialState$3,
   name: 'synchronizationGroupsReducer',
   reducers: {
     syncGroupAddSource: function syncGroupAddSource(draft, action) {
@@ -3619,7 +3662,7 @@ var slice$2 = createSlice({
       });
     },
     syncGroupClear: function syncGroupClear() {
-      return initialState$2;
+      return initialState$3;
     },
     syncGroupSetViewState: function syncGroupSetViewState(draft, action) {
       var viewState = action.payload.viewState;
@@ -3691,7 +3734,7 @@ var setBboxOrTimeSync = function setBboxOrTimeSync(state, action) {
   });
 };
 
-var _slice$actions = slice$2.actions,
+var _slice$actions = slice$3.actions,
     syncGroupAddGroup = _slice$actions.syncGroupAddGroup,
     syncGroupAddSource = _slice$actions.syncGroupAddSource,
     syncGroupAddTarget = _slice$actions.syncGroupAddTarget;
@@ -3701,8 +3744,8 @@ var _slice$actions = slice$2.actions,
     syncGroupRemoveSource = _slice$actions.syncGroupRemoveSource,
     syncGroupRemoveTarget = _slice$actions.syncGroupRemoveTarget,
     syncGroupSetViewState = _slice$actions.syncGroupSetViewState;
-var actions = slice$2.actions,
-    reducer$2 = slice$2.reducer;
+var actions = slice$3.actions,
+    reducer$3 = slice$3.reducer;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3759,7 +3802,7 @@ var index = /*#__PURE__*/Object.freeze({
   actions: actions,
   constants: constants,
   types: types$1,
-  initialState: initialState$2
+  initialState: initialState$3
 });
 
 /* *
@@ -4097,7 +4140,7 @@ var getAnimationStartTime = createSelector(getMapById, function (store) {
  * @returns {string} returnType: string
  */
 
-var getAnimationEndTime = createSelector(getMapById, function (store) {
+var getAnimationEndTime$1 = createSelector(getMapById, function (store) {
   return store ? store.animationEndTime : moment.utc().subtract(10, 'm').format(dateFormat);
 });
 /**
@@ -4506,6 +4549,18 @@ var getIsEnabledLayersForMapDimension = createSelector(getMapLayerIdsEnabled, fu
     return enabledMapLayerIds.includes(layerId);
   });
 }, selectorMemoizationOptions);
+/**
+ * Returns the dockedLayerManagerSize originally set in mapPresets
+ *
+ * Example getDockedLayerManagerSize(store);
+ * @param {object} store store: object - store object
+ * @param {string} mapId mapId: string - Id of the map
+ * @returns {DockedLayerManagerSize} returnType: string
+ */
+
+var getDockedLayerManagerSize = createSelector(getMapById, function (store) {
+  return store ? store.dockedLayerManagerSize : 'sizeLarge';
+});
 
 var selectors = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4527,7 +4582,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   isAnimating: isAnimating,
   linkedMapAnimationInfo: linkedMapAnimationInfo,
   getAnimationStartTime: getAnimationStartTime,
-  getAnimationEndTime: getAnimationEndTime,
+  getAnimationEndTime: getAnimationEndTime$1,
   isAutoUpdating: isAutoUpdating,
   getActiveLayerId: getActiveLayerId,
   getMapTimeSliderScale: getMapTimeSliderScale,
@@ -4554,7 +4609,8 @@ var selectors = /*#__PURE__*/Object.freeze({
   getLegendId: getLegendId,
   getMapPreset: getMapPreset,
   getMapLayerIdsEnabled: getMapLayerIdsEnabled,
-  getIsEnabledLayersForMapDimension: getIsEnabledLayersForMapDimension
+  getIsEnabledLayersForMapDimension: getIsEnabledLayersForMapDimension,
+  getDockedLayerManagerSize: getDockedLayerManagerSize
 });
 
 var DialogTypes;
@@ -4643,7 +4699,13 @@ var produceFilters = function produceFilters(filterNames, filterType, draft, lay
 
 var layerSelectFilterAdapter = createEntityAdapter();
 var layerSelectActiveServicesAdapter = createEntityAdapter();
-var initialState$1 = {
+var initialServicePopupState = {
+  isOpen: false,
+  url: '',
+  serviceId: '',
+  variant: 'add'
+};
+var initialState$2 = {
   filters: {
     searchFilter: '',
     activeServices: layerSelectActiveServicesAdapter.getInitialState(),
@@ -4656,10 +4718,11 @@ var initialState$1 = {
     leaf: true,
     path: [],
     serviceName: ''
-  }
+  },
+  servicePopup: initialServicePopupState
 };
-var slice$1 = createSlice({
-  initialState: initialState$1,
+var slice$2 = createSlice({
+  initialState: initialState$2,
   name: DialogTypes.LayerSelect,
   reducers: {
     setSearchFilter: function setSearchFilter(draft, action) {
@@ -4670,18 +4733,30 @@ var slice$1 = createSlice({
       var allServicesEnabled = action.payload.allServicesEnabled;
       draft.allServicesEnabled = allServicesEnabled;
     },
+    closeServicePopupOpen: function closeServicePopupOpen(draft) {
+      draft.servicePopup.isOpen = false;
+    },
+    toggleServicePopup: function toggleServicePopup(draft, action) {
+      var _action$payload = action.payload,
+          variant = _action$payload.variant,
+          isOpen = _action$payload.isOpen;
+      draft.servicePopup.isOpen = isOpen;
+      draft.servicePopup.url = action.payload.url ? action.payload.url : '';
+      draft.servicePopup.variant = variant;
+      draft.servicePopup.serviceId = action.payload.serviceId ? action.payload.serviceId : '';
+    },
     addFiltersAndActiveServices: function addFiltersAndActiveServices(draft, action) {
       var _a, _b;
 
-      var _action$payload = action.payload,
-          serviceId = _action$payload.serviceId,
-          serviceName = _action$payload.serviceName,
-          serviceUrl = _action$payload.serviceUrl,
-          _abstract = _action$payload["abstract"],
-          keywords = _action$payload.keywords,
-          scope = _action$payload.scope,
-          groups = _action$payload.groups,
-          isLoading = _action$payload.isLoading;
+      var _action$payload2 = action.payload,
+          serviceId = _action$payload2.serviceId,
+          serviceName = _action$payload2.serviceName,
+          serviceUrl = _action$payload2.serviceUrl,
+          _abstract = _action$payload2["abstract"],
+          keywords = _action$payload2.keywords,
+          scope = _action$payload2.scope,
+          groups = _action$payload2.groups,
+          isLoading = _action$payload2.isLoading;
 
       if (isLoading) {
         // If service is still loading, add without filters
@@ -4750,9 +4825,9 @@ var slice$1 = createSlice({
       layerSelectActiveServicesAdapter.removeOne(draft.filters.activeServices, serviceId);
     },
     enableActiveService: function enableActiveService(draft, action) {
-      var _action$payload2 = action.payload,
-          serviceId = _action$payload2.serviceId,
-          keywords = _action$payload2.filters;
+      var _action$payload3 = action.payload,
+          serviceId = _action$payload3.serviceId,
+          keywords = _action$payload3.filters;
       draft.filters.activeServices.entities[serviceId].enabled = true;
 
       var _iterator = _createForOfIteratorHelper(keywords),
@@ -4770,9 +4845,9 @@ var slice$1 = createSlice({
       }
     },
     disableActiveService: function disableActiveService(draft, action) {
-      var _action$payload3 = action.payload,
-          serviceId = _action$payload3.serviceId,
-          keywords = _action$payload3.filters;
+      var _action$payload4 = action.payload,
+          serviceId = _action$payload4.serviceId,
+          keywords = _action$payload4.filters;
       draft.filters.activeServices.entities[serviceId].enabled = false;
 
       var _iterator2 = _createForOfIteratorHelper(keywords),
@@ -4808,8 +4883,8 @@ var slice$1 = createSlice({
     }
   }
 });
-var reducer$1 = slice$1.reducer;
-var layerSelectActions = slice$1.actions;
+var reducer$2 = slice$2.reducer;
+var layerSelectActions = slice$2.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4935,8 +5010,11 @@ var _layerSelectActiveSer = layerSelectActiveServicesAdapter.getSelectors(functi
 var getActiveServiceById = function getActiveServiceById(store, serviceId) {
   var _a, _b, _c;
 
-  var enabledServices = ((_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.activeServices) === null || _c === void 0 ? void 0 : _c.entities[serviceId]) || {};
-  return enabledServices;
+  if (serviceId === '') {
+    return {};
+  }
+
+  return ((_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.activeServices) === null || _c === void 0 ? void 0 : _c.entities[serviceId]) || {};
 };
 /**
  * Returns all ids of enabled services
@@ -5064,6 +5142,19 @@ var getFilteredLayers = createSelector([getEnabledServiceIds, getServices, getCh
     }));
   }, []);
 }, selectorMemoizationOptions);
+/**
+ * Returns service popup details
+ *
+ * Example getActiveServices(store, 'server-id');
+ * @param {object} store store: object - store object
+ * @returns {object} returnType: object of active service
+ */
+
+var getServicePopupDetails = function getServicePopupDetails(store) {
+  var _a;
+
+  return ((_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.servicePopup) || initialServicePopupState;
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -5082,9 +5173,9 @@ var getFilteredLayers = createSelector([getEnabledServiceIds, getServices, getCh
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var snackbarAdapter = createEntityAdapter();
-var initialState = snackbarAdapter.getInitialState();
-var slice = createSlice({
-  initialState: initialState,
+var initialState$1 = snackbarAdapter.getInitialState();
+var slice$1 = createSlice({
+  initialState: initialState$1,
   name: 'snackbar',
   reducers: {
     // To open the snackbar call this action
@@ -5106,8 +5197,8 @@ var slice = createSlice({
     }
   }
 });
-var reducer = slice.reducer;
-var snackbarActions = slice.actions;
+var reducer$1 = slice$1.reducer;
+var snackbarActions = slice$1.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -5139,6 +5230,37 @@ var getFirstSnackbarMessage = createSelector(getCurrentSnackbarMessages, functio
   return currentMessages.length > 0 ? currentMessages[0] : undefined;
 });
 
+/* *
+ * 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 initialState = {
+  isInitialised: false
+};
+var slice = createSlice({
+  initialState: initialState,
+  name: 'app',
+  reducers: {
+    initialiseApp: function initialiseApp(draft) {
+      draft.isInitialised = true;
+    }
+  }
+});
+var reducer = slice.reducer;
+var appActions = slice.actions;
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -6119,7 +6241,7 @@ function rootSaga$4() {
 var synchronizationGroupConfig = {
   id: 'syncronizationGroupStore-module',
   reducersMap: {
-    syncronizationGroupStore: reducer$2
+    syncronizationGroupStore: reducer$3
   },
   sagas: [rootSaga$5, rootSaga$4]
 };
@@ -6255,7 +6377,7 @@ function rootSaga$3() {
 var uiModuleConfig = {
   id: 'ui-module',
   reducersMap: {
-    ui: reducer$4
+    ui: reducer$5
   },
   sagas: [rootSaga$3]
 };
@@ -6361,7 +6483,7 @@ var animationIntervalDefault = 5;
 var connectRedux$5 = connect(function (store, props) {
   return {
     animationStartTime: getAnimationStartTime(store, props.mapId),
-    animationEndTime: getAnimationEndTime(store, props.mapId),
+    animationEndTime: getAnimationEndTime$1(store, props.mapId),
     timeStep: getMapTimeStep(store, props.mapId),
     linkedMapAnimationInfo: linkedMapAnimationInfo(store, props.mapId)
   };
@@ -7876,6 +7998,19 @@ var generateTimeList = function generateTimeList(start, end, interval) {
 
   return timeList;
 };
+var getAnimationEndTime = function getAnimationEndTime(animationEndTime) {
+  var calculateFromNow = animationEndTime.split(/[-+]/)[0] === 'NOW';
+  var isAddingTime = animationEndTime.indexOf('+') !== -1;
+  var timeInMinutes = moment.duration(animationEndTime.split(/[-+]/)[1]).asMinutes();
+  var startingTime = calculateFromNow ? moment().utc() : moment().utc().startOf('day');
+  var newAnimationEndTime = isAddingTime ? moment(startingTime).add(timeInMinutes, 'minutes').toISOString() : moment(startingTime).subtract(timeInMinutes, 'minutes').toISOString();
+  return newAnimationEndTime;
+};
+var isAnimationEndTimeValid = function isAnimationEndTimeValid(animationEndTime) {
+  var hasValidPrefix = animationEndTime.split(/[-+]/)[0] === 'NOW' || animationEndTime.split(/[-+]/)[0] === 'TODAY';
+  var hasValidDate = moment.isDuration(moment.duration(animationEndTime.split(/[-+]/)[1]));
+  return hasValidPrefix && hasValidDate;
+};
 function updateMapDraw(mapId, draw) {
   var webMap = getWMJSMapById(mapId);
 
@@ -7973,7 +8108,7 @@ function updateAnimation(mapId, maxValue) {
           animationStart = _context4.sent;
           animationStartUnix = moment.utc(animationStart).unix();
           _context4.next = 6;
-          return select(getAnimationEndTime, mapId);
+          return select(getAnimationEndTime$1, mapId);
 
         case 6:
           animationEnd = _context4.sent;
@@ -8283,7 +8418,7 @@ function handleBaseLayersSaga(mapId, baseLayers) {
   }, _marked7);
 }
 function setMapPresetSaga(_ref6) {
-  var payload, mapId, initialProps, mapPreset, layers, activeLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, _filterLayers, mapLayers, baseLayers, overLayers, _yield$call, layersNewIds, activeLayerNewId, newActiveLayerId, baseLayersWithDefaultLayer, overLayersWithDefaultLayer, allBaseLayers, interval, duration, shouldOpenLegend, legendId;
+  var payload, mapId, initialProps, mapPreset, layers, activeLayerId, proj, shouldAutoUpdate, shouldAnimate, animationPayload, toggleTimestepAuto, showTimeSlider, displayMapPin, shouldShowZoomControls, shouldShowLegend, dockedLayerManagerSize, _filterLayers, mapLayers, baseLayers, overLayers, _yield$call, layersNewIds, activeLayerNewId, newActiveLayerId, baseLayersWithDefaultLayer, overLayersWithDefaultLayer, allBaseLayers, animationLength, animationEndTime, interval, animationEnd, _animationEnd, duration, shouldOpenLegend, legendId, fiveMinuteDelayForAnimation, _animationEnd2, animationStart;
 
   return regeneratorRuntime.wrap(function setMapPresetSaga$(_context8) {
     while (1) {
@@ -8295,11 +8430,11 @@ function setMapPresetSaga(_ref6) {
           mapPreset = initialProps.mapPreset;
 
           if (!mapPreset) {
-            _context8.next = 64;
+            _context8.next = 100;
             break;
           }
 
-          layers = mapPreset.layers, activeLayerId = mapPreset.activeLayerId, proj = mapPreset.proj, shouldAutoUpdate = mapPreset.shouldAutoUpdate, shouldAnimate = mapPreset.shouldAnimate, animationPayload = mapPreset.animationPayload, toggleTimestepAuto = mapPreset.toggleTimestepAuto, showTimeSlider = mapPreset.showTimeSlider, displayMapPin = mapPreset.displayMapPin, shouldShowZoomControls = mapPreset.shouldShowZoomControls, shouldShowLegend = mapPreset.shouldShowLegend;
+          layers = mapPreset.layers, activeLayerId = mapPreset.activeLayerId, proj = mapPreset.proj, shouldAutoUpdate = mapPreset.shouldAutoUpdate, shouldAnimate = mapPreset.shouldAnimate, animationPayload = mapPreset.animationPayload, toggleTimestepAuto = mapPreset.toggleTimestepAuto, showTimeSlider = mapPreset.showTimeSlider, displayMapPin = mapPreset.displayMapPin, shouldShowZoomControls = mapPreset.shouldShowZoomControls, shouldShowLegend = mapPreset.shouldShowLegend, dockedLayerManagerSize = mapPreset.dockedLayerManagerSize;
           _filterLayers = filterLayers(layers), mapLayers = _filterLayers.mapLayers, baseLayers = _filterLayers.baseLayers, overLayers = _filterLayers.overLayers;
 
           if (!layers) {
@@ -8356,89 +8491,139 @@ function setMapPresetSaga(_ref6) {
           }));
 
         case 26:
-          if (!(shouldAutoUpdate !== undefined)) {
-            _context8.next = 29;
+          animationLength = animationPayload && animationPayload.duration;
+          animationEndTime = animationPayload && animationPayload.endTime && isAnimationEndTimeValid(animationPayload.endTime) && animationPayload.endTime;
+
+          if (!(shouldAutoUpdate !== undefined && !animationEndTime)) {
+            _context8.next = 31;
             break;
           }
 
-          _context8.next = 29;
+          _context8.next = 31;
           return put(mapActions$1.toggleAutoUpdate({
             mapId: mapId,
             shouldAutoUpdate: shouldAutoUpdate
           }));
 
-        case 29:
+        case 31:
           if (!(showTimeSlider !== undefined)) {
-            _context8.next = 32;
+            _context8.next = 34;
             break;
           }
 
-          _context8.next = 32;
+          _context8.next = 34;
           return put(mapActions$1.toggleTimeSliderIsVisible({
             mapId: mapId,
             isTimeSliderVisible: showTimeSlider
           }));
 
-        case 32:
+        case 34:
           if (!(shouldShowZoomControls !== undefined)) {
-            _context8.next = 35;
+            _context8.next = 37;
             break;
           }
 
-          _context8.next = 35;
+          _context8.next = 37;
           return put(mapActions$1.toggleZoomControls({
             mapId: mapId,
             shouldShowZoomControls: shouldShowZoomControls
           }));
 
-        case 35:
+        case 37:
           if (!(displayMapPin !== undefined)) {
-            _context8.next = 38;
+            _context8.next = 40;
             break;
           }
 
-          _context8.next = 38;
+          _context8.next = 40;
           return put(mapActions$1.toggleMapPinIsVisible({
             mapId: mapId,
             displayMapPin: displayMapPin
           }));
 
-        case 38:
+        case 40:
           // sets timestep by interval of animationPayload
           interval = animationPayload && animationPayload.interval;
 
           if (!interval) {
-            _context8.next = 42;
+            _context8.next = 44;
             break;
           }
 
-          _context8.next = 42;
+          _context8.next = 44;
           return put(mapActions$1.setTimeStep({
             mapId: mapId,
             timeStep: interval
           }));
 
-        case 42:
+        case 44:
+          if (!animationEndTime) {
+            _context8.next = 53;
+            break;
+          }
+
+          _context8.next = 47;
+          return put(mapActions$1.setAnimationEndTime({
+            mapId: mapId,
+            animationEndTime: getAnimationEndTime(animationEndTime)
+          }));
+
+        case 47:
+          if (animationLength) {
+            _context8.next = 53;
+            break;
+          }
+
+          _context8.next = 50;
+          return select(getAnimationEndTime$1, mapId);
+
+        case 50:
+          animationEnd = _context8.sent;
+          _context8.next = 53;
+          return put(mapActions$1.setAnimationStartTime({
+            mapId: mapId,
+            animationStartTime: moment(animationEnd).subtract(5 * 60, 'minutes') // set to default of 5 hours
+            .toISOString()
+          }));
+
+        case 53:
+          if (!animationLength) {
+            _context8.next = 59;
+            break;
+          }
+
+          _context8.next = 56;
+          return select(getAnimationEndTime$1, mapId);
+
+        case 56:
+          _animationEnd = _context8.sent;
+          _context8.next = 59;
+          return put(mapActions$1.setAnimationStartTime({
+            mapId: mapId,
+            animationStartTime: moment(_animationEnd).subtract(animationLength, 'minutes').toISOString()
+          }));
+
+        case 59:
           if (!(animationPayload && animationPayload.speed)) {
-            _context8.next = 45;
+            _context8.next = 62;
             break;
           }
 
-          _context8.next = 45;
+          _context8.next = 62;
           return put(mapActions$1.setAnimationDelay({
             mapId: mapId,
             animationDelay: getSpeedDelay(animationPayload.speed)
           }));
 
-        case 45:
+        case 62:
           if (!(shouldAnimate === true)) {
-            _context8.next = 54;
+            _context8.next = 71;
             break;
           }
 
           duration = animationPayload && animationPayload.duration ? animationPayload.duration : 5 * 60; //  set to default of 5 hours
 
-          _context8.next = 49;
+          _context8.next = 66;
           return put(mapActions$1.mapStartAnimation({
             mapId: mapId,
             start: moment.utc().subtract(duration, 'minutes').format(dateFormat),
@@ -8446,69 +8631,119 @@ function setMapPresetSaga(_ref6) {
             interval: interval || animationIntervalDefault
           }));
 
-        case 49:
+        case 66:
           if (!interval) {
-            _context8.next = 52;
+            _context8.next = 69;
             break;
           }
 
-          _context8.next = 52;
+          _context8.next = 69;
           return put(mapActions$1.toggleTimestepAuto({
             mapId: mapId,
             timestepAuto: false
           }));
 
-        case 52:
-          _context8.next = 57;
+        case 69:
+          _context8.next = 74;
           break;
 
-        case 54:
+        case 71:
           if (!(toggleTimestepAuto !== undefined)) {
-            _context8.next = 57;
+            _context8.next = 74;
             break;
           }
 
-          _context8.next = 57;
+          _context8.next = 74;
           return put(mapActions$1.toggleTimestepAuto({
             mapId: mapId,
             timestepAuto: toggleTimestepAuto
           }));
 
-        case 57:
+        case 74:
           // show legend
           shouldOpenLegend = shouldShowLegend !== undefined ? shouldShowLegend : IS_LEGEND_OPEN_BY_DEFAULT;
-          _context8.next = 60;
+          _context8.next = 77;
           return select(getLegendId, mapId);
 
-        case 60:
+        case 77:
           legendId = _context8.sent;
 
           if (!legendId) {
-            _context8.next = 64;
+            _context8.next = 81;
             break;
           }
 
-          _context8.next = 64;
+          _context8.next = 81;
           return put(uiActions.setToggleOpenDialog({
             type: legendId,
             setOpen: shouldOpenLegend
           }));
 
-        case 64:
-          _context8.next = 69;
+        case 81:
+          if (!dockedLayerManagerSize) {
+            _context8.next = 84;
+            break;
+          }
+
+          _context8.next = 84;
+          return put(mapActions$1.setDockedLayerManagerSize({
+            mapId: mapId,
+            dockedLayerManagerSize: dockedLayerManagerSize
+          }));
+
+        case 84:
+          if (!animationEndTime) {
+            _context8.next = 100;
+            break;
+          }
+
+          fiveMinuteDelayForAnimation = 1000 * 60 * 5;
+          _context8.next = 88;
+          return delay(fiveMinuteDelayForAnimation);
+
+        case 88:
+          _context8.next = 90;
+          return select(getAnimationEndTime$1, mapId);
+
+        case 90:
+          _animationEnd2 = _context8.sent;
+          _context8.next = 93;
+          return put(mapActions$1.setAnimationEndTime({
+            mapId: mapId,
+            animationEndTime: moment(_animationEnd2).add(60, 'minutes').toISOString()
+          }));
+
+        case 93:
+          _context8.next = 95;
+          return select(getAnimationStartTime, mapId);
+
+        case 95:
+          animationStart = _context8.sent;
+          _context8.next = 98;
+          return put(mapActions$1.setAnimationStartTime({
+            mapId: mapId,
+            animationStartTime: moment(animationStart).add(60, 'minutes').toISOString()
+          }));
+
+        case 98:
+          _context8.next = 84;
           break;
 
-        case 66:
-          _context8.prev = 66;
+        case 100:
+          _context8.next = 105;
+          break;
+
+        case 102:
+          _context8.prev = 102;
           _context8.t0 = _context8["catch"](1);
           console.error(_context8.t0);
 
-        case 69:
+        case 105:
         case "end":
           return _context8.stop();
       }
     }
-  }, _marked8, null, [[1, 66]]);
+  }, _marked8, null, [[1, 102]]);
 }
 function unregisterMapSaga(_ref7) {
   var payload, mapId, layerList;
@@ -8583,9 +8818,9 @@ function rootSaga$2() {
 var moduleConfig = {
   id: 'webmap-module',
   reducersMap: {
-    webmap: reducer$3,
-    services: reducer$5,
-    layers: reducer$6
+    webmap: reducer$4,
+    services: reducer$6,
+    layers: reducer$7
   },
   sagas: [rootSaga$2]
 };
@@ -8907,7 +9142,7 @@ function rootSaga$1() {
 var layerSelectConfig = {
   id: 'layerSelect-module',
   reducersMap: {
-    layerSelect: reducer$1
+    layerSelect: reducer$2
   },
   sagas: [rootSaga$1]
 };
@@ -9008,7 +9243,7 @@ function rootSaga() {
 var snackbarModuleConfig = {
   id: 'snackbar-module',
   reducersMap: {
-    snackbar: reducer
+    snackbar: reducer$1
   },
   sagas: [rootSaga]
 };
@@ -9047,31 +9282,143 @@ var coreModuleConfig = [moduleConfig, synchronizationGroupConfig, uiModuleConfig
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var iconButtonSize = 30;
-var totalButtons = 5;
-var columnClasses = {
-  column1: 'column-1',
-  column2: 'column-2',
-  column3: 'column-3',
-  column4: 'column-4',
-  column5: 'column-5',
-  column6: 'column-6',
-  column7: 'column-7'
+var iconStyle = {
+  height: 24,
+  width: 24
 };
-var layerManagerStyle = Object.assign({
-  '.layerManagerContainer': {
-    containerType: 'inline-size'
-  },
-  // disable overflow while dragging to prevent issues with scrollbar
-  '.is-dragging header+.MuiBox-root': {
-    overflow: 'hidden'
-  },
-  // columns layout
-  '.column-1': {
-    width: iconButtonSize * 3,
-    display: 'flex',
-    background: 'transparent'
-  },
+var sizeSmall = {
+  width: 100,
+  height: 300
+};
+var sizeMedium = {
+  width: 360,
+  height: 300
+};
+var sizeLarge = {
+  width: 720,
+  height: 300
+};
+
+var HeaderOptions = function HeaderOptions(_ref) {
+  var isDockedLayerManager = _ref.isDockedLayerManager,
+      onClickDockButton = _ref.onClickDockButton,
+      onChangeSize = _ref.onChangeSize;
+  React.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.ctrlKey && event.altKey && event.code === 'KeyS') {
+        onChangeSize(sizeSmall);
+      } else if (event.ctrlKey && event.altKey && event.code === 'KeyM') {
+        onChangeSize(sizeMedium);
+      } else if (event.ctrlKey && event.altKey && event.code === 'KeyL') {
+        onChangeSize(sizeLarge);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onChangeSize]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomTooltip, {
+    title: "small"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "collapseSmall-btn",
+    size: "small",
+    onClick: function onClick() {
+      return onChangeSize(sizeSmall);
+    },
+    onTouchEnd: function onTouchEnd() {
+      return onChangeSize(sizeSmall);
+    },
+    sx: iconStyle,
+    className: "collapseSmall-btn"
+  }, /*#__PURE__*/React.createElement(CollapseSmall, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
+    title: "medium"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "collapseMedium-btn",
+    size: "small",
+    onClick: function onClick() {
+      return onChangeSize(sizeMedium);
+    },
+    onTouchEnd: function onTouchEnd() {
+      return onChangeSize(sizeMedium);
+    },
+    sx: iconStyle,
+    className: "collapseMedium-btn"
+  }, /*#__PURE__*/React.createElement(CollapseMedium, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
+    title: "large"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "collapseLarge-btn",
+    size: "small",
+    onClick: function onClick() {
+      return onChangeSize(sizeLarge);
+    },
+    onTouchEnd: function onTouchEnd() {
+      return onChangeSize(sizeLarge);
+    },
+    sx: iconStyle,
+    className: "collapseLarge-btn"
+  }, /*#__PURE__*/React.createElement(CollapseLarge, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
+    title: isDockedLayerManager ? 'Undock' : 'Dock'
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "dockedBtn",
+    disableRipple: true,
+    size: "small",
+    sx: iconStyle,
+    onClick: function onClick() {
+      return onClickDockButton();
+    },
+    onTouchEnd: function onTouchEnd() {
+      return onClickDockButton();
+    }
+  }, isDockedLayerManager ? /*#__PURE__*/React.createElement(CollapseWindow, {
+    "data-testid": "dockedLayerManager-collapse"
+  }) : /*#__PURE__*/React.createElement(ExpandWindow, {
+    "data-testid": "dockedLayerManager-uncollapse"
+  }))));
+};
+
+/* *
+ * 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 iconButtonSize = 30;
+var totalButtons = 5;
+var columnClasses = {
+  column1: 'column-1',
+  column2: 'column-2',
+  column3: 'column-3',
+  column4: 'column-4',
+  column5: 'column-5',
+  column6: 'column-6',
+  column7: 'column-7'
+};
+var layerManagerStyle = Object.assign({
+  '.layerManagerContainer': {
+    containerType: 'inline-size'
+  },
+  // disable overflow while dragging to prevent issues with scrollbar
+  '.is-dragging header+.MuiBox-root': {
+    overflow: 'hidden'
+  },
+  // columns layout
+  '.column-1': {
+    width: iconButtonSize * 3,
+    display: 'flex',
+    background: 'transparent'
+  },
   '.column-2': {
     width: "calc((100% - ".concat(iconButtonSize * totalButtons, "px) * 0.25)")
   },
@@ -9207,6 +9554,12 @@ var layerManagerStyle = Object.assign({
     }
   }
 });
+var returnCorrectSize = function returnCorrectSize(sizeResult) {
+  if (sizeResult === 'sizeSmall') return sizeSmall;
+  if (sizeResult === 'sizeMedium') return sizeMedium;
+  if (sizeResult === 'sizeLarge') return sizeLarge;
+  return sizeLarge;
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -11933,102 +12286,6 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
   })));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-var iconStyle = {
-  height: 24,
-  width: 24
-};
-var sizeSmall = {
-  width: 100,
-  height: 300
-};
-var sizeMedium = {
-  width: 360,
-  height: 300
-};
-var sizeLarge = {
-  width: 720,
-  height: 300
-};
-
-var HeaderOptions = function HeaderOptions(_ref) {
-  var isDockedLayerManager = _ref.isDockedLayerManager,
-      onClickDockButton = _ref.onClickDockButton,
-      onChangeSize = _ref.onChangeSize;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: "small"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "collapseSmall-btn",
-    size: "small",
-    onClick: function onClick() {
-      return onChangeSize(sizeSmall);
-    },
-    onTouchEnd: function onTouchEnd() {
-      return onChangeSize(sizeSmall);
-    },
-    sx: iconStyle,
-    className: "collapseSmall-btn"
-  }, /*#__PURE__*/React.createElement(CollapseSmall, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: "medium"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "collapseMedium-btn",
-    size: "small",
-    onClick: function onClick() {
-      return onChangeSize(sizeMedium);
-    },
-    onTouchEnd: function onTouchEnd() {
-      return onChangeSize(sizeMedium);
-    },
-    sx: iconStyle,
-    className: "collapseMedium-btn"
-  }, /*#__PURE__*/React.createElement(CollapseMedium, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: "large"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "collapseLarge-btn",
-    size: "small",
-    onClick: function onClick() {
-      return onChangeSize(sizeLarge);
-    },
-    onTouchEnd: function onTouchEnd() {
-      return onChangeSize(sizeLarge);
-    },
-    sx: iconStyle,
-    className: "collapseLarge-btn"
-  }, /*#__PURE__*/React.createElement(CollapseLarge, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: isDockedLayerManager ? 'Undock' : 'Dock'
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "dockedBtn",
-    disableRipple: true,
-    size: "small",
-    sx: iconStyle,
-    onClick: function onClick() {
-      return onClickDockButton();
-    },
-    onTouchEnd: function onTouchEnd() {
-      return onClickDockButton();
-    }
-  }, isDockedLayerManager ? /*#__PURE__*/React.createElement(CollapseWindow, {
-    "data-testid": "dockedLayerManager-collapse"
-  }) : /*#__PURE__*/React.createElement(ExpandWindow, {
-    "data-testid": "dockedLayerManager-uncollapse"
-  }))));
-};
-
 var styles$2 = {
   layerRowContainer: {
     position: 'relative',
@@ -12079,7 +12336,7 @@ var LayerManager = function LayerManager(_ref) {
       _ref$onToggleDock = _ref.onToggleDock,
       onToggleDock = _ref$onToggleDock === void 0 ? function () {} : _ref$onToggleDock,
       _ref$size = _ref.size,
-      prefSize = _ref$size === void 0 ? sizeLarge : _ref$size,
+      size = _ref$size === void 0 ? sizeLarge : _ref$size,
       _ref$startPosition = _ref.startPosition,
       startPosition = _ref$startPosition === void 0 ? {
     top: 85,
@@ -12089,16 +12346,22 @@ var LayerManager = function LayerManager(_ref) {
     width: 100,
     height: 126
   };
-  var startSizeCalc = calculateStartSize(minSize, prefSize, startPosition);
+  var startSizeCalc = calculateStartSize(minSize, size, startPosition);
 
   var _React$useState = React.useState(startSizeCalc),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      size = _React$useState2[0],
-      setSize = _React$useState2[1];
+      sizeInState = _React$useState2[0],
+      setSizeInState = _React$useState2[1];
+
+  React.useEffect(function () {
+    if (size !== sizeInState && isDockedLayerManager && isOpen) {
+      setSizeInState(size);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
+  }, [size, isOpen]);
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     title: showTitle ? "Layer Manager ".concat(mapId) : 'Layer Manager',
-    startSize: size,
+    startSize: sizeInState,
     minWidth: minSize.width,
     minHeight: minSize.height,
     startPosition: startPosition,
@@ -12116,7 +12379,7 @@ var LayerManager = function LayerManager(_ref) {
       onClickDockButton: onToggleDock,
       onChangeSize: function onChangeSize(_ref2) {
         var width = _ref2.width;
-        setSize(Object.assign(Object.assign({}, size), {
+        setSizeInState(Object.assign(Object.assign({}, sizeInState), {
           width: width
         }));
       }
@@ -12126,14 +12389,14 @@ var LayerManager = function LayerManager(_ref) {
     onResizeStop: function onResizeStop(_event, _direction, node) {
       var width = node.offsetWidth,
           height = node.offsetHeight;
-      setSize({
+      setSizeInState({
         width: width,
         height: height
       });
     },
     onDragEnd: function onDragEnd(_position, dragSize) {
-      if (dragSize !== size) {
-        setSize(dragSize);
+      if (dragSize !== sizeInState) {
+        setSizeInState(dragSize);
       }
     }
   }, /*#__PURE__*/React.createElement(Box, {
@@ -12400,6 +12663,7 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
     onMouseDown: setDialogOrder,
     order: dialogOrder,
     source: uiSource,
+    size: sizeLarge,
     leftHeaderComponent: leftHeaderComponent,
     isLoading: uiIsLoading,
     error: uiError,
@@ -12442,7 +12706,10 @@ var DockedLayerManagerConnect = function DockedLayerManagerConnect(_ref) {
       leftHeaderComponent = _ref$leftHeaderCompon === void 0 ? undefined : _ref$leftHeaderCompon,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'app' : _ref$source;
-  var dispatch = useDispatch(); // TODO: Uncomment when adding the presets: https://gitlab.com/opengeoweb/opengeoweb/-/issues/2881
+  var dispatch = useDispatch();
+  var dockedLayerManagerSize = useSelector(function (store) {
+    return getDockedLayerManagerSize(store, mapId);
+  }); // TODO: Uncomment when adding the presets: https://gitlab.com/opengeoweb/opengeoweb/-/issues/2881
   // const isMapPresetLoading = useSelector((store: AppStore) =>
   //   mapSelectors.getIsMapPresetLoading(store, mapId),
   // );
@@ -12482,7 +12749,7 @@ var DockedLayerManagerConnect = function DockedLayerManagerConnect(_ref) {
     // error={mapPresetError}
     onToggleDock: onToggleDock,
     isDockedLayerManager: true,
-    size: sizeSmall,
+    size: returnCorrectSize(dockedLayerManagerSize),
     startPosition: {
       top: 60,
       right: 16
@@ -12597,713 +12864,173 @@ var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
   }, /*#__PURE__*/React__default.createElement(Search, null)));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-var VALIDATIONS_NAME_EXISTING = 'This name already exists. Choose another name.';
-var VALIDATIONS_SERVICE_EXISTING = 'URL already exists.';
-var VALIDATIONS_SERVICE_VALID_URL = 'Not a valid URL.';
-var VALIDATIONS_REQUEST_FAILED = 'Download failed. Check the URL.';
-var validateServiceName = function validateServiceName(value, services) {
-  var ownServiceName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  var serviceName = value === null || value === void 0 ? void 0 : value.toLowerCase();
-  var foundName = Object.keys(services).find(function (serviceId) {
-    var _a;
-
-    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName.toLowerCase()) === serviceName && serviceName !== ownServiceName.toLocaleLowerCase();
-  });
-  return foundName === undefined ? true : VALIDATIONS_NAME_EXISTING;
-};
-
-var isValidUrl = function isValidUrl(url) {
-  if (url === '' || url === null || typeof url === 'undefined') {
-    return false;
-  }
-
-  var matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
-
-  if (!matcher.test(url)) {
-    return false;
-  }
-
-  return true;
-};
-
-var validateServiceUrl = function validateServiceUrl(value, services) {
-  var serviceUrl = value; // validate valid url
-
-  var isServiceUrlValid = isValidUrl(serviceUrl);
-
-  if (!isServiceUrlValid) {
-    return VALIDATIONS_SERVICE_VALID_URL;
-  } // check url existing
+var SearchField = function SearchField(_ref) {
+  var searchFilter = _ref.searchFilter,
+      setSearchFilter = _ref.setSearchFilter,
+      onOpenServicePopup = _ref.onOpenServicePopup;
 
+  var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      localSearchString = _React$useState2[0],
+      setLocalSearchString = _React$useState2[1];
 
-  var foundUrl = Object.keys(services).find(function (serviceId) {
-    var _a;
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      urlIsValid = _React$useState4[0],
+      setUrlIsValid = _React$useState4[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
 
-    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
-  });
 
-  if (foundUrl) {
-    return VALIDATIONS_SERVICE_EXISTING;
-  }
+  var setSearchFilterDebounced = React.useCallback(debounce(setSearchFilter, 300), []);
 
-  return true;
-};
-var loadWMSService = function loadWMSService(serviceUrl) {
-  var forceReload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var layers, service;
-    return regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return getLayersFlattenedFromService(serviceUrl, forceReload);
+  var handleChange = function handleChange(text) {
+    setLocalSearchString(text);
+    if (!isURL(text)) setSearchFilterDebounced(text);else if (searchFilter) setSearchFilterDebounced('');
+  };
 
-          case 2:
-            layers = _context.sent;
-            service = WMGetServiceFromStore(serviceUrl);
-            return _context.abrupt("return", {
-              id: service.id,
-              name: service.title,
-              serviceUrl: serviceUrl,
-              "abstract": service["abstract"],
-              layers: layers,
-              scope: 'user'
-            });
+  React.useEffect(function () {
+    if (isURL(localSearchString)) {
+      setUrlIsValid(true);
+    }
+  }, [localSearchString]);
+  React.useEffect(function () {
+    var keyDownHandler = function keyDownHandler(event) {
+      if (event.key === 'Enter') {
+        event.preventDefault();
 
-          case 5:
-          case "end":
-            return _context.stop();
+        if (urlIsValid) {
+          onOpenServicePopup(localSearchString);
+          setLocalSearchString('');
         }
       }
-    }, _callee);
-  }));
-};
+    };
 
-var style$1 = {
-  textField: {
-    width: '100%',
-    marginBottom: 2
-  }
-};
-var ADD_HEADING = 'Add a new service';
-var EDIT_HEADING = 'Edit service';
-var SAVE_HEADING = 'Save service';
-var COPY_URL_MESSAGE = 'Service URL copied to clipboard';
-var getSuccesMessage = function getSuccesMessage(serviceName) {
-  return "Service \"".concat(serviceName, "\" has been saved succesfully");
+    document.addEventListener('keydown', keyDownHandler);
+    return function () {
+      document.removeEventListener('keydown', keyDownHandler);
+    };
+  }, [urlIsValid, localSearchString, onOpenServicePopup]); // mirror store unless typing a URL
+
+  React.useEffect(function () {
+    if (isURL(localSearchString)) return;
+    setLocalSearchString(searchFilter); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchFilter]);
+  return /*#__PURE__*/React.createElement(TextField, {
+    variant: "filled",
+    label: "Search through services or enter a service URL",
+    value: localSearchString,
+    onChange: function onChange(e) {
+      handleChange(e.target.value);
+    },
+    autoFocus: true,
+    fullWidth: true,
+    InputProps: {
+      endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
+        position: "end"
+      }, /*#__PURE__*/React.createElement(SearchFieldButtonContainer, {
+        setPopupIsOpen: function setPopupIsOpen() {
+          onOpenServicePopup(localSearchString);
+          setLocalSearchString('');
+        },
+        localSearchString: localSearchString,
+        onClickClear: function onClickClear() {
+          setLocalSearchString('');
+          setSearchFilterDebounced('');
+          setUrlIsValid(false);
+        }
+      }))
+    }
+  });
 };
 
-var getTitleForVariant = function getTitleForVariant(variant) {
-  switch (variant) {
-    case 'add':
-      return ADD_HEADING;
+/* *
+ * 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)
+ * */
 
-    case 'edit':
-      return EDIT_HEADING;
+var SearchFieldConnect = function SearchFieldConnect() {
+  var dispatch = useDispatch();
+  var searchFilter = useSelector(function (store) {
+    return getSearchFilter(store);
+  });
 
-    case 'save':
-      return SAVE_HEADING;
+  var toggleServicePopup = function toggleServicePopup(url) {
+    dispatch(layerSelectActions.toggleServicePopup({
+      isOpen: true,
+      url: url,
+      variant: 'save'
+    }));
+  };
 
-    default:
-      return 'Service';
-  }
-};
+  var setSearchFilter = function setSearchFilter(filterText) {
+    dispatch(layerSelectActions.setSearchFilter({
+      filterText: filterText
+    }));
+  };
 
-var fields = {
-  serviceUrl: {
-    name: 'serviceUrl',
-    label: 'This service refers to this URL'
-  },
-  serviceName: {
-    name: 'serviceName',
-    label: 'Service name'
-  },
-  serviceAbstracts: {
-    name: 'serviceAbstracts',
-    label: 'Abstracts'
-  }
+  return /*#__PURE__*/React.createElement(SearchField, {
+    setSearchFilter: setSearchFilter,
+    searchFilter: searchFilter,
+    onOpenServicePopup: toggleServicePopup
+  });
 };
 
-var InitialValidationsTrigger = function InitialValidationsTrigger(_ref) {
-  var trigger = _ref.trigger,
-      getValues = _ref.getValues,
-      onValidField = _ref.onValidField;
-  React.useEffect(function () {
-    var value = getValues(fields.serviceUrl.name);
+/* *
+ * 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)
+ * */
 
-    if (value) {
-      trigger(fields.serviceUrl.name).then(function (isValid) {
-        return isValid && onValidField(value);
+var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
+  var layer = _ref.layer,
+      layerIndex = _ref.layerIndex,
+      serviceUrl = _ref.serviceUrl,
+      addLayer = _ref.addLayer,
+      deleteLayer = _ref.deleteLayer,
+      mapLayers = _ref.mapLayers;
+  var foundLayer = mapLayers.find(function (lr) {
+    return lr.name === layer.name && lr.service === serviceUrl;
+  });
+  return /*#__PURE__*/React.createElement(CustomToggleButton, {
+    "data-testid": "layerAddRemoveButton-".concat(layer.name),
+    onClick: function onClick() {
+      !foundLayer ? addLayer({
+        serviceUrl: serviceUrl,
+        layerName: layer.name
+      }) : deleteLayer({
+        layerId: foundLayer.id,
+        layerIndex: layerIndex
       });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []);
-  return null;
-};
-
-var ServicePopup = function ServicePopup(_ref2) {
-  var servicePopupVariant = _ref2.servicePopupVariant,
-      _ref2$hideBackdrop = _ref2.hideBackdrop,
-      hideBackdrop = _ref2$hideBackdrop === void 0 ? false : _ref2$hideBackdrop,
-      isOpen = _ref2.isOpen,
-      closePopup = _ref2.closePopup,
-      shouldDisableAutoFocus = _ref2.shouldDisableAutoFocus,
-      services = _ref2.services,
-      serviceSetLayers = _ref2.serviceSetLayers,
-      serviceUrl = _ref2.serviceUrl,
-      serviceName = _ref2.serviceName,
-      serviceAbstracts = _ref2.serviceAbstracts,
-      _ref2$showSnackbar = _ref2.showSnackbar,
-      showSnackbar = _ref2$showSnackbar === void 0 ? function () {} : _ref2$showSnackbar;
-
-  var _useFormContext = useFormContext(),
-      reset = _useFormContext.reset,
-      errors = _useFormContext.formState.errors,
-      handleSubmit = _useFormContext.handleSubmit,
-      setError = _useFormContext.setError,
-      clearErrors = _useFormContext.clearErrors,
-      watch = _useFormContext.watch,
-      trigger = _useFormContext.trigger,
-      getValues = _useFormContext.getValues,
-      setValue = _useFormContext.setValue;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isLoading = _React$useState2[0],
-      setIsLoading = _React$useState2[1];
-
-  var fetchServiceData = function fetchServiceData(newServiceUrl) {
-    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var service;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              setIsLoading(true);
-              _context.next = 4;
-              return getLayersFromService(newServiceUrl);
-
-            case 4:
-              service = WMGetServiceFromStore(newServiceUrl);
-              setValue(fields.serviceName.name, service.title);
-              setValue(fields.serviceAbstracts.name, service["abstract"]);
-              setIsLoading(false);
-              _context.next = 14;
-              break;
-
-            case 10:
-              _context.prev = 10;
-              _context.t0 = _context["catch"](0);
-              setIsLoading(false);
-              setError(fields.serviceUrl.name, {
-                message: VALIDATIONS_REQUEST_FAILED,
-                type: 'SYSTEM'
-              });
-
-            case 14:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[0, 10]]);
-    }));
-  };
-
-  var addNewService = function addNewService(formValues) {
-    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var layersForService;
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              clearErrors(fields.serviceUrl.name);
-              setIsLoading(true);
-              _context2.prev = 2;
-              _context2.next = 5;
-              return loadWMSService(formValues.serviceUrl, true);
-
-            case 5:
-              layersForService = _context2.sent;
-              serviceSetLayers({
-                id: layersForService.id,
-                name: formValues.serviceName,
-                serviceUrl: formValues.serviceUrl,
-                "abstract": formValues.serviceAbstracts,
-                layers: layersForService.layers,
-                scope: 'user'
-              });
-              setIsLoading(false);
-              showSnackbar(getSuccesMessage(formValues.serviceName));
-              closePopup();
-              _context2.next = 16;
-              break;
-
-            case 12:
-              _context2.prev = 12;
-              _context2.t0 = _context2["catch"](2);
-              setIsLoading(false);
-              setError(fields.serviceUrl.name, {
-                message: VALIDATIONS_REQUEST_FAILED,
-                type: 'SYSTEM'
-              });
-
-            case 16:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2, null, [[2, 12]]);
-    }));
-  };
-
-  var onValidateServiceUrl = function onValidateServiceUrl(value) {
-    return validateServiceUrl(value, services);
-  };
-
-  var onFocusServiceUrl = function onFocusServiceUrl() {
-    var hasValue = getValues(fields.serviceUrl.name);
-
-    if (!errors[fields.serviceUrl.name] && hasValue) {
-      trigger(fields.serviceUrl.name);
-    }
-  };
-
-  var onBlurServiceUrl = function onBlurServiceUrl() {
-    if (!errors[fields.serviceUrl.name]) {
-      fetchServiceData(getValues(fields.serviceUrl.name));
-    }
-  };
-
-  var onValidateServiceName = function onValidateServiceName(value) {
-    return validateServiceName(value, services, serviceName);
-  };
-
-  var getFormAreRequiredFieldsEmpty = function getFormAreRequiredFieldsEmpty() {
-    var serviceNameField = watch(fields.serviceName.name);
-    var serviceUrlField = watch(fields.serviceUrl.name);
-    return serviceNameField === '' || serviceNameField === undefined || serviceUrlField === '' || serviceUrlField === undefined;
-  };
-
-  var getFormHasformErrors = function getFormHasformErrors() {
-    var totalErrors = Object.keys(errors).length;
-
-    if (totalErrors > 0) {
-      // prevent SYSTEM error types from blocking the save button
-      if (totalErrors === 1 && errors.serviceUrl) {
-        return errors.serviceUrl.type !== undefined && errors.serviceUrl.type !== 'SYSTEM';
-      }
-
-      return true;
-    }
-
-    return false;
-  };
-
-  var isSubmitDisabled = getFormHasformErrors() || getFormAreRequiredFieldsEmpty();
-  React.useEffect(function () {
-    reset({
-      serviceUrl: serviceUrl,
-      serviceName: serviceName,
-      serviceAbstracts: serviceAbstracts
-    });
-  }, [serviceUrl, serviceName, serviceAbstracts, reset]);
-  var isShowPopup = servicePopupVariant === 'show';
-  var isServiceUrlDisabled = isShowPopup || servicePopupVariant === 'edit';
-  return /*#__PURE__*/React.createElement(Dialog, {
-    open: isOpen,
-    hideBackdrop: hideBackdrop,
-    fullWidth: true,
-    maxWidth: "xs",
-    "data-testid": "servicePopup",
-    sx: {
-      '& .MuiDialog-paper': {
-        backgroundColor: "geowebColors.cards.cardContainer",
-        maxWidth: 458
-      }
-    }
-  }, /*#__PURE__*/React.createElement("form", {
-    onSubmit: handleSubmit(addNewService)
-  }, /*#__PURE__*/React.createElement(DialogTitle, {
-    sx: {
-      alignItems: 'center',
-      padding: '16px 16px 24px 16px'
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      ' span': {
-        fontSize: '1rem',
-        fontWeight: 500,
-        fontStyle: 'normal',
-        lineHeight: '1.38',
-        letterSpacing: '0.12px'
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h5",
-    component: "span"
-  }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React.createElement(IconButton, {
-    "aria-label": "close",
-    size: "small",
-    onClick: closePopup,
-    "data-testid": "closePopupButtonCross",
-    sx: {
-      color: 'geowebColors.captions.captionDisabled.color',
-      marginTop: 'auto',
-      marginBottom: 'auto'
-    }
-  }, /*#__PURE__*/React.createElement(Close, null))), isLoading && /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement(LinearProgress, {
-    "data-testid": "loadingIndicator",
-    color: "secondary",
-    sx: {
-      position: 'absolute',
-      width: '100%',
-      top: 8
-    }
-  }))), /*#__PURE__*/React.createElement(DialogContent, {
-    sx: {
-      padding: '8px 16px'
-    }
-  }, /*#__PURE__*/React.createElement(ReactHookFormTextField, {
-    name: fields.serviceUrl.name,
-    label: fields.serviceUrl.label,
-    onFocus: onFocusServiceUrl,
-    autoFocus: !shouldDisableAutoFocus,
-    onBlur: onBlurServiceUrl,
-    sx: style$1.textField,
-    rules: {
-      required: true,
-      validate: Object.assign({}, !isServiceUrlDisabled && {
-        onValidateServiceUrl: onValidateServiceUrl
-      })
-    },
-    disabled: isServiceUrlDisabled || isLoading,
-    isReadOnly: isShowPopup,
-    InputProps: {
-      disableUnderline: isShowPopup,
-      endAdornment: isShowPopup && /*#__PURE__*/React.createElement(InputAdornment, {
-        position: "end"
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        "aria-label": "copy url",
-        onClick: function onClick() {
-          navigator.clipboard.writeText(serviceUrl);
-          showSnackbar(COPY_URL_MESSAGE);
-        }
-      }, /*#__PURE__*/React.createElement(Copy, null)))
-    },
-    defaultValue: serviceUrl
-  }), /*#__PURE__*/React.createElement(ReactHookFormTextField, {
-    name: fields.serviceName.name,
-    label: fields.serviceName.label,
-    rules: {
-      required: true,
-      validate: {
-        onValidateServiceName: onValidateServiceName
-      }
-    },
-    disabled: isShowPopup || isLoading,
-    isReadOnly: isShowPopup,
-    InputProps: {
-      disableUnderline: isShowPopup
-    },
-    sx: style$1.textField,
-    defaultValue: serviceName
-  }), /*#__PURE__*/React.createElement(ReactHookFormTextField, {
-    multiline: true,
-    rows: 4,
-    name: fields.serviceAbstracts.name,
-    label: fields.serviceAbstracts.label,
-    disabled: isShowPopup || isLoading,
-    isReadOnly: isShowPopup,
-    InputProps: {
-      disableUnderline: isShowPopup
-    },
-    helperText: !isShowPopup ? 'Short description of what this service does' : '',
-    sx: style$1.textField,
-    defaultValue: ""
-  }), !isServiceUrlDisabled && /*#__PURE__*/React.createElement(InitialValidationsTrigger, {
-    trigger: trigger,
-    getValues: getValues,
-    onValidField: fetchServiceData
-  })), /*#__PURE__*/React.createElement(DialogActions, {
-    sx: {
-      padding: 2
-    }
-  }, isShowPopup ? /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return closePopup();
-    },
-    variant: "tertiary",
-    sx: {
-      width: '117px'
-    }
-  }, "close") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: closePopup,
-    "data-testid": "closePopupButtonCancel",
-    variant: "tertiary",
-    sx: {
-      width: '117px'
-    }
-  }, "cancel"), /*#__PURE__*/React.createElement(Button, {
-    type: "submit",
-    variant: "primary",
-    disabled: isSubmitDisabled || isLoading,
-    "data-testid": "saveServiceButton",
-    sx: {
-      width: '117px',
-      marginLeft: '16px!important'
-    }
-  }, "save")))));
-};
-
-var ServicePopupWrapper = function ServicePopupWrapper(_a) {
-  var props = __rest(_a, []);
-
-  return /*#__PURE__*/React.createElement(ReactHookFormProvider, {
-    options: defaultFormOptions
-  }, /*#__PURE__*/React.createElement(ServicePopup, Object.assign({}, props)));
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-
-var ServicePopupConnect = function ServicePopupConnect(_ref) {
-  var servicePopupVariant = _ref.servicePopupVariant,
-      hideBackdrop = _ref.hideBackdrop,
-      isOpen = _ref.isOpen,
-      closePopup = _ref.closePopup,
-      serviceId = _ref.serviceId,
-      url = _ref.url;
-  var dispatch = useDispatch();
-  var services = useSelector(function (store) {
-    return getActiveServices(store);
-  });
-  var serviceSetLayers = React__default.useCallback(function (payload) {
-    dispatch(serviceActions.serviceSetLayers(payload));
-  }, [dispatch]);
-  var activeService = useSelector(function (store) {
-    return getActiveServiceById(store, serviceId);
-  });
-  var showSnackbar = React__default.useCallback(function (message) {
-    dispatch(snackbarActions.openSnackbar({
-      message: message
-    }));
-  }, [dispatch]);
-  return /*#__PURE__*/React__default.createElement(ServicePopupWrapper, {
-    servicePopupVariant: servicePopupVariant,
-    hideBackdrop: hideBackdrop,
-    isOpen: isOpen,
-    closePopup: closePopup,
-    services: services,
-    serviceSetLayers: serviceSetLayers,
-    serviceId: serviceId,
-    serviceUrl: url || (activeService === null || activeService === void 0 ? void 0 : activeService.serviceUrl),
-    serviceName: activeService === null || activeService === void 0 ? void 0 : activeService.serviceName,
-    serviceAbstracts: activeService === null || activeService === void 0 ? void 0 : activeService["abstract"],
-    showSnackbar: showSnackbar
-  });
-};
-
-var SearchField = function SearchField(_ref) {
-  var searchFilter = _ref.searchFilter,
-      setSearchFilter = _ref.setSearchFilter;
-
-  var _React$useState = React.useState(''),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      localSearchString = _React$useState2[0],
-      setLocalSearchString = _React$useState2[1];
-
-  var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      urlIsValid = _React$useState4[0],
-      setUrlIsValid = _React$useState4[1];
-
-  var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      popupIsOpen = _React$useState6[0],
-      setPopupIsOpen = _React$useState6[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
-
-
-  var setSearchFilterDebounced = React.useCallback(debounce(setSearchFilter, 300), []);
-
-  var handleChange = function handleChange(text) {
-    setLocalSearchString(text);
-    if (!isURL(text)) setSearchFilterDebounced(text);else if (searchFilter) setSearchFilterDebounced('');
-  };
-
-  React.useEffect(function () {
-    if (isURL(localSearchString)) {
-      setUrlIsValid(true);
-    }
-  }, [localSearchString]);
-  React.useEffect(function () {
-    var keyDownHandler = function keyDownHandler(event) {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-
-        if (urlIsValid) {
-          setPopupIsOpen(true);
-        }
-      }
-    };
-
-    document.addEventListener('keydown', keyDownHandler);
-    return function () {
-      document.removeEventListener('keydown', keyDownHandler);
-    };
-  }, [urlIsValid]); // mirror store unless typing a URL
-
-  React.useEffect(function () {
-    if (isURL(localSearchString)) return;
-    setLocalSearchString(searchFilter); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchFilter]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, {
-    variant: "filled",
-    label: "Search through services or enter a service URL",
-    value: localSearchString,
-    onChange: function onChange(e) {
-      handleChange(e.target.value);
-    },
-    autoFocus: true,
-    fullWidth: true,
-    InputProps: {
-      endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
-        position: "end"
-      }, /*#__PURE__*/React.createElement(SearchFieldButtonContainer, {
-        setPopupIsOpen: setPopupIsOpen,
-        localSearchString: localSearchString,
-        onClickClear: function onClickClear() {
-          setLocalSearchString('');
-          setSearchFilterDebounced('');
-        }
-      }))
-    }
-  }), /*#__PURE__*/React.createElement(ServicePopupConnect, {
-    servicePopupVariant: "save",
-    isOpen: popupIsOpen,
-    closePopup: function closePopup() {
-      setPopupIsOpen(false);
-      setLocalSearchString('');
-    },
-    url: localSearchString
-  }));
-};
-
-/* *
- * 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 SearchFieldConnect = function SearchFieldConnect() {
-  var dispatch = useDispatch();
-  var searchFilter = useSelector(function (store) {
-    return getSearchFilter(store);
-  });
-  return /*#__PURE__*/React.createElement(SearchField, {
-    setSearchFilter: function setSearchFilter(filterText) {
-      dispatch(layerSelectActions.setSearchFilter({
-        filterText: filterText
-      }));
-    },
-    searchFilter: searchFilter
-  });
-};
-
-/* *
- * 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 LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
-  var layer = _ref.layer,
-      layerIndex = _ref.layerIndex,
-      serviceUrl = _ref.serviceUrl,
-      addLayer = _ref.addLayer,
-      deleteLayer = _ref.deleteLayer,
-      mapLayers = _ref.mapLayers;
-  var foundLayer = mapLayers.find(function (lr) {
-    return lr.name === layer.name && lr.service === serviceUrl;
-  });
-  return /*#__PURE__*/React.createElement(CustomToggleButton, {
-    "data-testid": "layerAddRemoveButton-".concat(layer.name),
-    onClick: function onClick() {
-      !foundLayer ? addLayer({
-        serviceUrl: serviceUrl,
-        layerName: layer.name
-      }) : deleteLayer({
-        layerId: foundLayer.id,
-        layerIndex: layerIndex
-      });
-    },
-    selected: !!foundLayer,
-    variant: "tool",
-    fullWidth: true,
-    sx: {
-      fontSize: '12px'
-    }
-  }, !foundLayer ? 'Add' : 'Remove');
+    },
+    selected: !!foundLayer,
+    variant: "tool",
+    fullWidth: true,
+    sx: {
+      fontSize: '12px'
+    }
+  }, !foundLayer ? 'Add' : 'Remove');
 };
 
 /* *
@@ -13870,6 +13597,43 @@ var sortByService = function sortByService(serviceObj) {
   }, {});
 };
 
+var highlightStyle = {
+  background: '#ffeecc'
+};
+
+var SearchHighlight = function SearchHighlight(_ref) {
+  var text = _ref.text,
+      search = _ref.search;
+
+  if (search === '') {
+    return /*#__PURE__*/React__default.createElement("span", null, text);
+  }
+
+  var searchWords = search.split(' ').reduce(function (words, word) {
+    return word ? [].concat(_toConsumableArray(words), [word.toLocaleLowerCase()]) : words;
+  }, []);
+  var searchRegex = searchWords.map(function (word) {
+    return escapeRegExp(word);
+  }).join('|');
+  var textParts = text.split(new RegExp("(".concat(searchRegex, ")"), 'gi'));
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, textParts.map(function (part, index) {
+    var key = "".concat(part, "-").concat(index);
+
+    if (searchWords.some(function (search) {
+      return part.toLocaleLowerCase().includes(search);
+    })) {
+      return /*#__PURE__*/React__default.createElement("mark", {
+        key: key,
+        style: highlightStyle
+      }, part);
+    }
+
+    return /*#__PURE__*/React__default.createElement("span", {
+      key: key
+    }, part);
+  }));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13902,7 +13666,8 @@ var LayerListRow = function LayerListRow(_ref) {
       deleteLayer = _ref.deleteLayer,
       mapLayers = _ref.mapLayers,
       mapId = _ref.mapId,
-      layerSelectWidth = _ref.layerSelectWidth;
+      layerSelectWidth = _ref.layerSelectWidth,
+      searchFilter = _ref.searchFilter;
 
   var _a;
 
@@ -13938,7 +13703,10 @@ var LayerListRow = function LayerListRow(_ref) {
       textOverflow: 'ellipsis',
       overflow: 'hidden'
     }
-  }, layer.text)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(SearchHighlight, {
+    text: layer.text,
+    search: searchFilter
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     direction: "column",
@@ -13951,7 +13719,10 @@ var LayerListRow = function LayerListRow(_ref) {
       textOverflow: 'ellipsis',
       overflow: 'hidden'
     }
-  }, service.name), /*#__PURE__*/React__default.createElement(LayerInfoButtonConnect, {
+  }, /*#__PURE__*/React__default.createElement(SearchHighlight, {
+    text: service.name,
+    search: searchFilter
+  })), /*#__PURE__*/React__default.createElement(LayerInfoButtonConnect, {
     layer: layer,
     mapId: mapId,
     serviceName: service.name
@@ -13964,7 +13735,10 @@ var LayerListRow = function LayerListRow(_ref) {
   }, layer["abstract"] && /*#__PURE__*/React__default.createElement(Typography, {
     "data-testid": "layerAbstract",
     sx: layerInfoStyle
-  }, layer["abstract"])), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(SearchHighlight, {
+    text: layer["abstract"],
+    search: searchFilter
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     sx: columns.column4
@@ -13978,11 +13752,17 @@ var LayerListRow = function LayerListRow(_ref) {
     sx: columns.column6
   }, layer.path.length > 0 && /*#__PURE__*/React__default.createElement(Typography, {
     sx: layerInfoStyle
-  }, "Groups: ", layer.path.join(' / ')), ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.length) > 0 && /*#__PURE__*/React__default.createElement(Typography, {
+  }, "Groups:", ' ', /*#__PURE__*/React__default.createElement(SearchHighlight, {
+    text: layer.path.join(' / '),
+    search: searchFilter
+  })), ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.length) > 0 && /*#__PURE__*/React__default.createElement(Typography, {
     sx: layerInfoStyle
-  }, "Keywords:", ' ', layer.keywords.slice().sort(function (a, b) {
-    return a.localeCompare(b);
-  }).join(', ')))))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, "Keywords:", ' ', /*#__PURE__*/React__default.createElement(SearchHighlight, {
+    text: layer.keywords.slice().sort(function (a, b) {
+      return a.localeCompare(b);
+    }).join(', '),
+    search: searchFilter
+  })))))), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
     sx: columns.column9,
@@ -14026,11 +13806,12 @@ var LayerList = function LayerList(_ref) {
       addLayer = _ref.addLayer,
       deleteLayer = _ref.deleteLayer,
       mapLayers = _ref.mapLayers,
-      mapId = _ref.mapId;
+      mapId = _ref.mapId,
+      searchFilter = _ref.searchFilter;
   var rowMargin = 4;
   var rowHeight = widthToRowHeight(layerSelectWidth);
   var layerSelectFilterHeight = 155 + serviceListHeight;
-  var minHeight = 400;
+  var minHeight = 320;
   return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "layerList"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -14058,7 +13839,8 @@ var LayerList = function LayerList(_ref) {
       deleteLayer: deleteLayer,
       mapLayers: mapLayers,
       mapId: mapId,
-      layerSelectWidth: layerSelectWidth
+      layerSelectWidth: layerSelectWidth,
+      searchFilter: searchFilter
     }));
   }));
 };
@@ -14133,6 +13915,9 @@ var LayerListConnect = function LayerListConnect(_ref) {
   var filteredLayers = useSelector(function (store) {
     return getFilteredLayers(store);
   });
+  var searchFilter = useSelector(function (store) {
+    return getSearchFilter(store);
+  });
   return /*#__PURE__*/React.createElement(LayerList, {
     filteredLayers: filteredLayers,
     services: services,
@@ -14142,7 +13927,8 @@ var LayerListConnect = function LayerListConnect(_ref) {
     addLayer: addLayer,
     deleteLayer: deleteLayer,
     mapLayers: mapLayers,
-    mapId: mapId
+    mapId: mapId,
+    searchFilter: searchFilter
   });
 };
 
@@ -14162,7 +13948,7 @@ var LayerListConnect = function LayerListConnect(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var style = {
+var style$1 = {
   borderRadius: '20px!important',
   marginRight: '4px',
   whiteSpace: 'nowrap',
@@ -14195,7 +13981,7 @@ var ServiceChip = function ServiceChip(_ref) {
       return toggleChip(chip);
     },
     disabled: isDisabled,
-    sx: style
+    sx: style$1
   }, service ? service.serviceName : 'All')));
 };
 
@@ -14451,7 +14237,7 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   var openAddService = function openAddService() {
     setServicePopupInfo({
       isOpen: true,
-      popupVariant: 'add'
+      variant: 'add'
     });
   };
 
@@ -14559,7 +14345,7 @@ var Rows = function Rows(_ref2) {
           isOpen: true,
           serviceId: serviceId,
           serviceUrl: serviceUrl,
-          popupVariant: 'edit'
+          variant: 'edit'
         });
       }
     }, /*#__PURE__*/React.createElement(Edit, null)))) : /*#__PURE__*/React.createElement(CustomTooltip, {
@@ -14574,7 +14360,7 @@ var Rows = function Rows(_ref2) {
           isOpen: true,
           serviceId: serviceId,
           serviceUrl: serviceUrl,
-          popupVariant: 'show'
+          variant: 'show'
         });
       }
     }, /*#__PURE__*/React.createElement(Visibility, null))))), /*#__PURE__*/React.createElement(Grid, {
@@ -14592,7 +14378,106 @@ var Rows = function Rows(_ref2) {
       onClick: function onClick() {
         return layerSelectRemoveService(serviceId, serviceUrl, serviceName);
       }
-    }, /*#__PURE__*/React.createElement(Delete, null)))))))));
+    }, /*#__PURE__*/React.createElement(Delete, null)))))))));
+  }));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var VALIDATIONS_NAME_EXISTING = 'This name already exists. Choose another name.';
+var VALIDATIONS_SERVICE_EXISTING = 'URL already exists.';
+var VALIDATIONS_SERVICE_VALID_URL = 'Not a valid URL.';
+var VALIDATIONS_REQUEST_FAILED = 'Download failed. Check the URL.';
+var validateServiceName = function validateServiceName(value, services) {
+  var ownServiceName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var serviceName = value === null || value === void 0 ? void 0 : value.toLowerCase();
+  var foundName = Object.keys(services).find(function (serviceId) {
+    var _a;
+
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName.toLowerCase()) === serviceName && serviceName !== ownServiceName.toLocaleLowerCase();
+  });
+  return foundName === undefined ? true : VALIDATIONS_NAME_EXISTING;
+};
+
+var isValidUrl = function isValidUrl(url) {
+  if (url === '' || url === null || typeof url === 'undefined') {
+    return false;
+  }
+
+  var matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
+
+  if (!matcher.test(url)) {
+    return false;
+  }
+
+  return true;
+};
+
+var validateServiceUrl = function validateServiceUrl(value, services) {
+  var serviceUrl = value; // validate valid url
+
+  var isServiceUrlValid = isValidUrl(serviceUrl);
+
+  if (!isServiceUrlValid) {
+    return VALIDATIONS_SERVICE_VALID_URL;
+  } // check url existing
+
+
+  var foundUrl = Object.keys(services).find(function (serviceId) {
+    var _a;
+
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
+  });
+
+  if (foundUrl) {
+    return VALIDATIONS_SERVICE_EXISTING;
+  }
+
+  return true;
+};
+var loadWMSService = function loadWMSService(serviceUrl) {
+  var forceReload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var layers, service;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return getLayersFlattenedFromService(serviceUrl, forceReload);
+
+          case 2:
+            layers = _context.sent;
+            service = WMGetServiceFromStore(serviceUrl);
+            return _context.abrupt("return", {
+              id: service.id,
+              name: service.title,
+              serviceUrl: serviceUrl,
+              "abstract": service["abstract"],
+              layers: layers,
+              scope: 'user'
+            });
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
   }));
 };
 
@@ -14615,8 +14500,7 @@ var getServiceFailedUpdateMessage = function getServiceFailedUpdateMessage(error
 };
 
 var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
-  var mapId = _ref.mapId,
-      setServicePopupInfo = _ref.setServicePopupInfo;
+  var mapId = _ref.mapId;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -14629,6 +14513,9 @@ var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
       isUpdating: true
     })));
   }, [dispatch]);
+  var setServicePopupInfo = React.useCallback(function (payload) {
+    dispatch(layerSelectActions.toggleServicePopup(Object.assign({}, payload)));
+  }, [dispatch]);
   var showSnackbar = React.useCallback(function (message) {
     dispatch(snackbarActions.openSnackbar({
       message: message
@@ -14708,34 +14595,30 @@ var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+
 var ServiceOptionsButton = function ServiceOptionsButton(_ref) {
   var mapId = _ref.mapId;
-
-  var _React$useState = React.useState({
-    isOpen: false
-  }),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      servicePopupInfo = _React$useState2[0],
-      setServicePopupInfo = _React$useState2[1];
-
-  var closePopup = function closePopup() {
-    setServicePopupInfo({
-      isOpen: false
-    });
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToggleMenu, {
+  return /*#__PURE__*/React.createElement(ToggleMenu, {
     buttonTestId: "serviceOptionsButton",
     menuPosition: "bottom"
   }, /*#__PURE__*/React.createElement(ServiceOptionsDialogConnect, {
-    setServicePopupInfo: setServicePopupInfo,
     mapId: mapId
-  })), /*#__PURE__*/React.createElement(ServicePopupConnect, {
-    servicePopupVariant: servicePopupInfo.popupVariant,
-    isOpen: servicePopupInfo.isOpen,
-    closePopup: closePopup,
-    serviceId: servicePopupInfo.serviceId,
-    url: servicePopupInfo.serviceUrl
   }));
 };
 
@@ -14978,23 +14861,215 @@ var FilterListItem = function FilterListItem(_ref) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var KeywordFilterResultsListItemConnect = function KeywordFilterResultsListItemConnect(_ref) {
-  var filter = _ref.filter;
-  var dispatch = useDispatch();
-  var toggleFilter = React.useCallback(function (filterIds) {
-    dispatch(layerSelectActions.toggleFilter({
-      filterIds: filterIds
-    }));
-  }, [dispatch]);
-  var enableOnlyOneFilter = React.useCallback(function (filterId) {
-    dispatch(layerSelectActions.enableOnlyOneFilter({
-      filterId: filterId
-    }));
-  }, [dispatch]);
-  return /*#__PURE__*/React.createElement(FilterListItem, {
-    filter: filter,
-    toggleFilter: toggleFilter,
-    enableOnlyOneFilter: enableOnlyOneFilter
+var KeywordFilterResultsListItemConnect = function KeywordFilterResultsListItemConnect(_ref) {
+  var filter = _ref.filter;
+  var dispatch = useDispatch();
+  var toggleFilter = React.useCallback(function (filterIds) {
+    dispatch(layerSelectActions.toggleFilter({
+      filterIds: filterIds
+    }));
+  }, [dispatch]);
+  var enableOnlyOneFilter = React.useCallback(function (filterId) {
+    dispatch(layerSelectActions.enableOnlyOneFilter({
+      filterId: filterId
+    }));
+  }, [dispatch]);
+  return /*#__PURE__*/React.createElement(FilterListItem, {
+    filter: filter,
+    toggleFilter: toggleFilter,
+    enableOnlyOneFilter: enableOnlyOneFilter
+  });
+};
+
+/* *
+ * 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 KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchConnect() {
+  var dispatch = useDispatch();
+  var allFiltersActive = useSelector(function (store) {
+    return isAllFiltersChecked(store);
+  });
+  var allFilterIds = useSelector(function (store) {
+    return getAllFilterIds(store);
+  });
+  var checkedFilterIds = useSelector(function (store) {
+    return getCheckedFilterIds(store);
+  });
+  var toggleFilters = React.useCallback(function () {
+    var filterIds = allFiltersActive ? checkedFilterIds : allFilterIds.filter(function (id) {
+      return !checkedFilterIds.includes(id);
+    });
+    dispatch(layerSelectActions.toggleFilter({
+      filterIds: filterIds
+    }));
+  }, [allFilterIds, allFiltersActive, checkedFilterIds, dispatch]);
+  return /*#__PURE__*/React.createElement(Switch, {
+    checked: allFiltersActive,
+    onChange: toggleFilters,
+    "data-testid": "customSwitch"
+  });
+};
+
+var DIALOG_TITLE = 'Groups & Keywords';
+var listStyle = {
+  padding: '0px'
+};
+var accordionDetailsStyle = {
+  padding: '0px',
+  margin: '0px'
+};
+
+var KeywordFilterResults = function KeywordFilterResults(_ref) {
+  var filters = _ref.filters,
+      bounds = _ref.bounds,
+      _ref$onClose = _ref.onClose,
+      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+      isOpen = _ref.isOpen,
+      _ref$onMouseDown = _ref.onMouseDown,
+      onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'module' : _ref$source;
+
+  var _a, _b;
+
+  var filtersGroupedByType = groupBy(filters, function (filter) {
+    return filter.type;
+  });
+  var groups = (_a = filtersGroupedByType[FilterType.Group]) !== null && _a !== void 0 ? _a : [];
+
+  var groupsSorted = _toConsumableArray(groups).sort(function (a, b) {
+    return a.name.localeCompare(b.name);
+  });
+
+  var keywords = (_b = filtersGroupedByType[FilterType.Keyword]) !== null && _b !== void 0 ? _b : [];
+
+  var keywordsSorted = _toConsumableArray(keywords).sort(function (a, b) {
+    return a.name.localeCompare(b.name);
+  });
+
+  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+    title: DIALOG_TITLE,
+    "data-testid": "keywordFilterResults",
+    startSize: {
+      width: 349,
+      height: 600
+    },
+    minWidth: 312,
+    minHeight: 192,
+    isOpen: isOpen,
+    onClose: onClose,
+    headerSize: "small",
+    bounds: bounds,
+    onMouseDown: onMouseDown,
+    order: order,
+    source: source
+  }, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 12,
+    justifyContent: "space-between",
+    alignItems: "center",
+    sx: {
+      backgroundColor: 'background.paper',
+      position: 'sticky',
+      top: 0,
+      zIndex: 100
+    }
+  }, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 6,
+    justifyContent: "flex-start",
+    alignItems: "center",
+    sx: {
+      padding: '15px 15px 0 24px'
+    }
+  }, "Select all"), /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 6,
+    justifyContent: "flex-end",
+    alignContent: "center",
+    sx: {
+      padding: '15px 15px 0 15px'
+    }
+  }, /*#__PURE__*/React.createElement(KeywordFilterSelectAllSwitchConnect, null))), /*#__PURE__*/React.createElement(CustomAccordion, {
+    title: "Groups",
+    detailsSx: accordionDetailsStyle
+  }, /*#__PURE__*/React.createElement(List, {
+    dense: true,
+    style: listStyle
+  }, groupsSorted.map(function (group) {
+    return /*#__PURE__*/React.createElement(KeywordFilterResultsListItemConnect, {
+      key: group.id,
+      filter: group
+    });
+  }))), /*#__PURE__*/React.createElement(CustomAccordion, {
+    title: "Keywords",
+    detailsSx: accordionDetailsStyle
+  }, /*#__PURE__*/React.createElement(List, {
+    dense: true,
+    style: listStyle
+  }, keywordsSorted.map(function (keyword) {
+    return /*#__PURE__*/React.createElement(KeywordFilterResultsListItemConnect, {
+      key: keyword.id,
+      filter: keyword
+    });
+  }))));
+};
+
+/* *
+ * 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 KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
+  var bounds = _ref.bounds;
+
+  var _useSetupDialog = useSetupDialog(DialogTypes.KeywordFilter),
+      dialogOrder = _useSetupDialog.dialogOrder,
+      onCloseDialog = _useSetupDialog.onCloseDialog,
+      setDialogOrder = _useSetupDialog.setDialogOrder,
+      isDialogOpen = _useSetupDialog.isDialogOpen,
+      uiSource = _useSetupDialog.uiSource;
+
+  var filters = useSelector(getAllFilters);
+  return /*#__PURE__*/React.createElement(KeywordFilterResults, {
+    bounds: bounds,
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: uiSource,
+    filters: filters
   });
 };
 
@@ -15011,144 +15086,427 @@ var KeywordFilterResultsListItemConnect = function KeywordFilterResultsListItemC
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
-var KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchConnect() {
-  var dispatch = useDispatch();
-  var allFiltersActive = useSelector(function (store) {
-    return isAllFiltersChecked(store);
-  });
-  var allFilterIds = useSelector(function (store) {
-    return getAllFilterIds(store);
-  });
-  var checkedFilterIds = useSelector(function (store) {
-    return getCheckedFilterIds(store);
+var LayerInfoDialogConnect = function LayerInfoDialogConnect() {
+  var layer = useSelector(function (store) {
+    return getActiveLayerInfo(store);
   });
-  var toggleFilters = React.useCallback(function () {
-    var filterIds = allFiltersActive ? checkedFilterIds : allFilterIds.filter(function (id) {
-      return !checkedFilterIds.includes(id);
-    });
-    dispatch(layerSelectActions.toggleFilter({
-      filterIds: filterIds
-    }));
-  }, [allFilterIds, allFiltersActive, checkedFilterIds, dispatch]);
-  return /*#__PURE__*/React.createElement(Switch, {
-    checked: allFiltersActive,
-    onChange: toggleFilters,
-    "data-testid": "customSwitch"
+
+  var _useSetupDialog = useSetupDialog(DialogTypes.LayerInfo),
+      dialogOrder = _useSetupDialog.dialogOrder,
+      onCloseDialog = _useSetupDialog.onCloseDialog,
+      setDialogOrder = _useSetupDialog.setDialogOrder,
+      uiSource = _useSetupDialog.uiSource,
+      isDialogOpen = _useSetupDialog.isDialogOpen;
+
+  if (!layer) return null;
+  return /*#__PURE__*/React__default.createElement(LayerInfoDialog, {
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: uiSource,
+    layer: layer
   });
 };
 
-var DIALOG_TITLE = 'Groups & Keywords';
-var listStyle = {
-  padding: '0px'
-};
-var accordionDetailsStyle = {
-  padding: '0px',
-  margin: '0px'
-};
+var style = {
+  textField: {
+    width: '100%',
+    marginBottom: 2
+  }
+};
+var ADD_HEADING = 'Add a new service';
+var EDIT_HEADING = 'Edit service';
+var SAVE_HEADING = 'Save service';
+var COPY_URL_MESSAGE = 'Service URL copied to clipboard';
+var getSuccesMessage = function getSuccesMessage(serviceName) {
+  return "Service \"".concat(serviceName, "\" has been saved succesfully");
+};
+
+var getTitleForVariant = function getTitleForVariant(variant) {
+  switch (variant) {
+    case 'add':
+      return ADD_HEADING;
+
+    case 'edit':
+      return EDIT_HEADING;
+
+    case 'save':
+      return SAVE_HEADING;
+
+    default:
+      return 'Service';
+  }
+};
+
+var fields = {
+  serviceUrl: {
+    name: 'serviceUrl',
+    label: 'This service refers to this URL'
+  },
+  serviceName: {
+    name: 'serviceName',
+    label: 'Service name'
+  },
+  serviceAbstracts: {
+    name: 'serviceAbstracts',
+    label: 'Abstracts'
+  }
+};
+
+var InitialValidationsTrigger = function InitialValidationsTrigger(_ref) {
+  var trigger = _ref.trigger,
+      getValues = _ref.getValues,
+      onValidField = _ref.onValidField;
+  React.useEffect(function () {
+    var value = getValues(fields.serviceUrl.name);
+
+    if (value) {
+      trigger(fields.serviceUrl.name).then(function (isValid) {
+        return isValid && onValidField(value);
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
+  return null;
+};
+
+var ServicePopup = function ServicePopup(_ref2) {
+  var servicePopupVariant = _ref2.servicePopupVariant,
+      _ref2$hideBackdrop = _ref2.hideBackdrop,
+      hideBackdrop = _ref2$hideBackdrop === void 0 ? false : _ref2$hideBackdrop,
+      isOpen = _ref2.isOpen,
+      closePopup = _ref2.closePopup,
+      shouldDisableAutoFocus = _ref2.shouldDisableAutoFocus,
+      services = _ref2.services,
+      serviceSetLayers = _ref2.serviceSetLayers,
+      serviceUrl = _ref2.serviceUrl,
+      serviceName = _ref2.serviceName,
+      _ref2$showSnackbar = _ref2.showSnackbar,
+      showSnackbar = _ref2$showSnackbar === void 0 ? function () {} : _ref2$showSnackbar;
+
+  var _useFormContext = useFormContext(),
+      errors = _useFormContext.formState.errors,
+      handleSubmit = _useFormContext.handleSubmit,
+      setError = _useFormContext.setError,
+      clearErrors = _useFormContext.clearErrors,
+      watch = _useFormContext.watch,
+      trigger = _useFormContext.trigger,
+      getValues = _useFormContext.getValues,
+      setValue = _useFormContext.setValue;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isLoading = _React$useState2[0],
+      setIsLoading = _React$useState2[1];
+
+  var fetchServiceData = function fetchServiceData(newServiceUrl) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var service;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setIsLoading(true);
+              _context.next = 4;
+              return getLayersFromService(newServiceUrl);
+
+            case 4:
+              service = WMGetServiceFromStore(newServiceUrl);
+              setValue(fields.serviceName.name, service.title);
+              setValue(fields.serviceAbstracts.name, service["abstract"]);
+              setIsLoading(false);
+              _context.next = 14;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](0);
+              setIsLoading(false);
+              setError(fields.serviceUrl.name, {
+                message: VALIDATIONS_REQUEST_FAILED,
+                type: 'SYSTEM'
+              });
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 10]]);
+    }));
+  };
+
+  var addNewService = function addNewService(formValues) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var layersForService;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              clearErrors(fields.serviceUrl.name);
+              setIsLoading(true);
+              _context2.prev = 2;
+              _context2.next = 5;
+              return loadWMSService(formValues.serviceUrl, true);
+
+            case 5:
+              layersForService = _context2.sent;
+              serviceSetLayers({
+                id: layersForService.id,
+                name: formValues.serviceName,
+                serviceUrl: formValues.serviceUrl,
+                "abstract": formValues.serviceAbstracts,
+                layers: layersForService.layers,
+                scope: 'user'
+              });
+              setIsLoading(false);
+              showSnackbar(getSuccesMessage(formValues.serviceName));
+              closePopup();
+              _context2.next = 16;
+              break;
+
+            case 12:
+              _context2.prev = 12;
+              _context2.t0 = _context2["catch"](2);
+              setIsLoading(false);
+              setError(fields.serviceUrl.name, {
+                message: VALIDATIONS_REQUEST_FAILED,
+                type: 'SYSTEM'
+              });
+
+            case 16:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[2, 12]]);
+    }));
+  };
+
+  var onValidateServiceUrl = function onValidateServiceUrl(value) {
+    return validateServiceUrl(value, services);
+  };
 
-var KeywordFilterResults = function KeywordFilterResults(_ref) {
-  var filters = _ref.filters,
-      bounds = _ref.bounds,
-      _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-      isOpen = _ref.isOpen,
-      _ref$onMouseDown = _ref.onMouseDown,
-      onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
-      _ref$order = _ref.order,
-      order = _ref$order === void 0 ? 0 : _ref$order,
-      _ref$source = _ref.source,
-      source = _ref$source === void 0 ? 'module' : _ref$source;
+  var onFocusServiceUrl = function onFocusServiceUrl() {
+    var hasValue = getValues(fields.serviceUrl.name);
 
-  var _a, _b;
+    if (!errors[fields.serviceUrl.name] && hasValue) {
+      trigger(fields.serviceUrl.name);
+    }
+  };
 
-  var filtersGroupedByType = groupBy(filters, function (filter) {
-    return filter.type;
-  });
-  var groups = (_a = filtersGroupedByType[FilterType.Group]) !== null && _a !== void 0 ? _a : [];
+  var onBlurServiceUrl = function onBlurServiceUrl() {
+    if (!errors[fields.serviceUrl.name]) {
+      fetchServiceData(getValues(fields.serviceUrl.name));
+    }
+  };
 
-  var groupsSorted = _toConsumableArray(groups).sort(function (a, b) {
-    return a.name.localeCompare(b.name);
-  });
+  var onKeyDownServiceUrl = function onKeyDownServiceUrl(event) {
+    if (event.key === 'Enter') {
+      onBlurServiceUrl();
+    }
+  };
 
-  var keywords = (_b = filtersGroupedByType[FilterType.Keyword]) !== null && _b !== void 0 ? _b : [];
+  var onValidateServiceName = function onValidateServiceName(value) {
+    return validateServiceName(value, services, serviceName);
+  };
 
-  var keywordsSorted = _toConsumableArray(keywords).sort(function (a, b) {
-    return a.name.localeCompare(b.name);
-  });
+  var getFormAreRequiredFieldsEmpty = function getFormAreRequiredFieldsEmpty() {
+    var serviceNameField = watch(fields.serviceName.name);
+    var serviceUrlField = watch(fields.serviceUrl.name);
+    return serviceNameField === '' || serviceNameField === undefined || serviceUrlField === '' || serviceUrlField === undefined;
+  };
 
-  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
-    title: DIALOG_TITLE,
-    "data-testid": "keywordFilterResults",
-    startSize: {
-      width: 349,
-      height: 600
+  var getFormHasformErrors = function getFormHasformErrors() {
+    var totalErrors = Object.keys(errors).length;
+
+    if (totalErrors > 0) {
+      // prevent SYSTEM error types from blocking the save button
+      if (totalErrors === 1 && errors.serviceUrl) {
+        return errors.serviceUrl.type !== undefined && errors.serviceUrl.type !== 'SYSTEM';
+      }
+
+      return true;
+    }
+
+    return false;
+  };
+
+  var isSubmitDisabled = getFormHasformErrors() || getFormAreRequiredFieldsEmpty();
+  var isShowPopup = servicePopupVariant === 'show';
+  var isServiceUrlDisabled = isShowPopup || servicePopupVariant === 'edit';
+  return /*#__PURE__*/React.createElement(Dialog, {
+    open: isOpen,
+    hideBackdrop: hideBackdrop,
+    fullWidth: true,
+    maxWidth: "xs",
+    "data-testid": "servicePopup",
+    sx: {
+      '& .MuiDialog-paper': {
+        backgroundColor: "geowebColors.cards.cardContainer",
+        maxWidth: 458
+      }
+    }
+  }, /*#__PURE__*/React.createElement("form", {
+    onSubmit: handleSubmit(addNewService)
+  }, /*#__PURE__*/React.createElement(DialogTitle, {
+    sx: {
+      alignItems: 'center',
+      padding: '16px 16px 24px 16px'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      ' span': {
+        fontSize: '1rem',
+        fontWeight: 500,
+        fontStyle: 'normal',
+        lineHeight: '1.38',
+        letterSpacing: '0.12px'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h5",
+    component: "span"
+  }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React.createElement(IconButton, {
+    "aria-label": "close",
+    size: "small",
+    onClick: closePopup,
+    "data-testid": "closePopupButtonCross",
+    sx: {
+      color: 'geowebColors.captions.captionDisabled.color',
+      marginTop: 'auto',
+      marginBottom: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement(Close, null))), isLoading && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(LinearProgress, {
+    "data-testid": "loadingIndicator",
+    color: "secondary",
+    sx: {
+      position: 'absolute',
+      width: '100%',
+      top: 8
+    }
+  }))), /*#__PURE__*/React.createElement(DialogContent, {
+    sx: {
+      padding: '8px 16px'
+    }
+  }, /*#__PURE__*/React.createElement(ReactHookFormTextField, {
+    name: fields.serviceUrl.name,
+    label: fields.serviceUrl.label,
+    onFocus: onFocusServiceUrl,
+    autoFocus: !shouldDisableAutoFocus,
+    onBlur: onBlurServiceUrl,
+    onKeyDown: onKeyDownServiceUrl,
+    sx: style.textField,
+    rules: {
+      required: true,
+      validate: Object.assign({}, !isServiceUrlDisabled && {
+        onValidateServiceUrl: onValidateServiceUrl
+      })
     },
-    minWidth: 312,
-    minHeight: 192,
-    isOpen: isOpen,
-    onClose: onClose,
-    headerSize: "small",
-    bounds: bounds,
-    onMouseDown: onMouseDown,
-    order: order,
-    source: source
-  }, /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    item: true,
-    xs: 12,
-    justifyContent: "space-between",
-    alignItems: "center",
+    disabled: isServiceUrlDisabled || isLoading,
+    isReadOnly: isShowPopup,
+    InputProps: {
+      disableUnderline: isShowPopup,
+      endAdornment: isShowPopup && /*#__PURE__*/React.createElement(InputAdornment, {
+        position: "end"
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        "aria-label": "copy url",
+        onClick: function onClick() {
+          navigator.clipboard.writeText(serviceUrl);
+          showSnackbar(COPY_URL_MESSAGE);
+        }
+      }, /*#__PURE__*/React.createElement(Copy, null)))
+    },
+    defaultValue: serviceUrl
+  }), /*#__PURE__*/React.createElement(ReactHookFormTextField, {
+    name: fields.serviceName.name,
+    label: fields.serviceName.label,
+    rules: {
+      required: true,
+      validate: {
+        onValidateServiceName: onValidateServiceName
+      }
+    },
+    disabled: isShowPopup || isLoading,
+    isReadOnly: isShowPopup,
+    InputProps: {
+      disableUnderline: isShowPopup
+    },
+    sx: style.textField,
+    defaultValue: serviceName
+  }), /*#__PURE__*/React.createElement(ReactHookFormTextField, {
+    multiline: true,
+    rows: 4,
+    name: fields.serviceAbstracts.name,
+    label: fields.serviceAbstracts.label,
+    disabled: isShowPopup || isLoading,
+    isReadOnly: isShowPopup,
+    InputProps: {
+      disableUnderline: isShowPopup
+    },
+    helperText: !isShowPopup ? 'Short description of what this service does' : '',
+    sx: style.textField,
+    defaultValue: ""
+  }), !isServiceUrlDisabled && /*#__PURE__*/React.createElement(InitialValidationsTrigger, {
+    trigger: trigger,
+    getValues: getValues,
+    onValidField: fetchServiceData
+  })), /*#__PURE__*/React.createElement(DialogActions, {
     sx: {
-      backgroundColor: 'background.paper',
-      position: 'sticky',
-      top: 0,
-      zIndex: 100
+      padding: 2
     }
-  }, /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    item: true,
-    xs: 6,
-    justifyContent: "flex-start",
-    alignItems: "center",
+  }, isShowPopup ? /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return closePopup();
+    },
+    variant: "tertiary",
     sx: {
-      padding: '15px 15px 0 24px'
+      width: '117px'
     }
-  }, "Select all"), /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    item: true,
-    xs: 6,
-    justifyContent: "flex-end",
-    alignContent: "center",
+  }, "close") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: closePopup,
+    "data-testid": "closePopupButtonCancel",
+    variant: "tertiary",
     sx: {
-      padding: '15px 15px 0 15px'
+      width: '117px'
+    }
+  }, "cancel"), /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    variant: "primary",
+    disabled: isSubmitDisabled || isLoading,
+    "data-testid": "saveServiceButton",
+    sx: {
+      width: '117px',
+      marginLeft: '16px!important'
     }
-  }, /*#__PURE__*/React.createElement(KeywordFilterSelectAllSwitchConnect, null))), /*#__PURE__*/React.createElement(CustomAccordion, {
-    title: "Groups",
-    detailsSx: accordionDetailsStyle
-  }, /*#__PURE__*/React.createElement(List, {
-    dense: true,
-    style: listStyle
-  }, groupsSorted.map(function (group) {
-    return /*#__PURE__*/React.createElement(KeywordFilterResultsListItemConnect, {
-      key: group.id,
-      filter: group
-    });
-  }))), /*#__PURE__*/React.createElement(CustomAccordion, {
-    title: "Keywords",
-    detailsSx: accordionDetailsStyle
-  }, /*#__PURE__*/React.createElement(List, {
-    dense: true,
-    style: listStyle
-  }, keywordsSorted.map(function (keyword) {
-    return /*#__PURE__*/React.createElement(KeywordFilterResultsListItemConnect, {
-      key: keyword.id,
-      filter: keyword
-    });
-  }))));
+  }, "save")))));
+};
+
+var ServicePopupWrapper = function ServicePopupWrapper(_a) {
+  var props = __rest(_a, []);
+
+  return /*#__PURE__*/React.createElement(ReactHookFormProvider, {
+    options: Object.assign(Object.assign({}, defaultFormOptions), {
+      defaultValues: {
+        serviceUrl: props.serviceUrl,
+        serviceName: props.serviceName,
+        serviceAbstracts: props.serviceAbstracts
+      }
+    })
+  }, /*#__PURE__*/React.createElement(ServicePopup, Object.assign({}, props)));
 };
 
 /* *
@@ -15164,29 +15522,46 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-
-var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
-  var bounds = _ref.bounds;
-
-  var _useSetupDialog = useSetupDialog(DialogTypes.KeywordFilter),
-      dialogOrder = _useSetupDialog.dialogOrder,
-      onCloseDialog = _useSetupDialog.onCloseDialog,
-      setDialogOrder = _useSetupDialog.setDialogOrder,
-      isDialogOpen = _useSetupDialog.isDialogOpen,
-      uiSource = _useSetupDialog.uiSource;
-
-  var filters = useSelector(getAllFilters);
-  return /*#__PURE__*/React.createElement(KeywordFilterResults, {
-    bounds: bounds,
-    isOpen: isDialogOpen,
-    onClose: onCloseDialog,
-    onMouseDown: setDialogOrder,
-    order: dialogOrder,
-    source: uiSource,
-    filters: filters
+// Result in many rerenders. By extracting we're able to only render this component and these selectors
+// when the dialog is open
+
+var ServicePopupDialogConnect = function ServicePopupDialogConnect(_ref) {
+  var isOpen = _ref.isOpen,
+      _ref$serviceId = _ref.serviceId,
+      serviceId = _ref$serviceId === void 0 ? '' : _ref$serviceId,
+      variant = _ref.variant,
+      _ref$url = _ref.url,
+      url = _ref$url === void 0 ? '' : _ref$url,
+      setServicePopupClosed = _ref.setServicePopupClosed;
+  var dispatch = useDispatch();
+  var services = useSelector(function (store) {
+    return getActiveServices(store);
+  });
+  var activeService = useSelector(function (store) {
+    return getActiveServiceById(store, serviceId);
+  });
+  var serviceSetLayers = React__default.useCallback(function (payload) {
+    dispatch(serviceActions.serviceSetLayers(payload));
+  }, [dispatch]);
+  var showSnackbar = React__default.useCallback(function (message) {
+    dispatch(snackbarActions.openSnackbar({
+      message: message
+    }));
+  }, [dispatch]);
+  return /*#__PURE__*/React__default.createElement(ServicePopupWrapper, {
+    servicePopupVariant: variant,
+    isOpen: isOpen,
+    closePopup: setServicePopupClosed,
+    services: services,
+    serviceSetLayers: serviceSetLayers,
+    serviceId: serviceId,
+    serviceUrl: url || (activeService === null || activeService === void 0 ? void 0 : activeService.serviceUrl),
+    serviceName: activeService === null || activeService === void 0 ? void 0 : activeService.serviceName,
+    serviceAbstracts: activeService === null || activeService === void 0 ? void 0 : activeService["abstract"],
+    showSnackbar: showSnackbar
   });
 };
 
@@ -15207,26 +15582,31 @@ var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
-var LayerInfoDialogConnect = function LayerInfoDialogConnect() {
-  var layer = useSelector(function (store) {
-    return getActiveLayerInfo(store);
-  });
+var ServicePopupConnect = function ServicePopupConnect() {
+  var dispatch = useDispatch();
 
-  var _useSetupDialog = useSetupDialog(DialogTypes.LayerInfo),
-      dialogOrder = _useSetupDialog.dialogOrder,
-      onCloseDialog = _useSetupDialog.onCloseDialog,
-      setDialogOrder = _useSetupDialog.setDialogOrder,
-      uiSource = _useSetupDialog.uiSource,
-      isDialogOpen = _useSetupDialog.isDialogOpen;
+  var _useSelector = useSelector(function (store) {
+    return getServicePopupDetails(store);
+  }),
+      isOpen = _useSelector.isOpen,
+      url = _useSelector.url,
+      serviceId = _useSelector.serviceId,
+      variant = _useSelector.variant;
 
-  if (!layer) return null;
-  return /*#__PURE__*/React__default.createElement(LayerInfoDialog, {
-    isOpen: isDialogOpen,
-    onClose: onCloseDialog,
-    onMouseDown: setDialogOrder,
-    order: dialogOrder,
-    source: uiSource,
-    layer: layer
+  var setServicePopupClosed = React__default.useCallback(function () {
+    dispatch(layerSelectActions.closeServicePopupOpen());
+  }, [dispatch]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default.createElement(ServicePopupDialogConnect, {
+    isOpen: isOpen,
+    serviceId: serviceId,
+    variant: variant,
+    url: url,
+    setServicePopupClosed: setServicePopupClosed
   });
 };
 
@@ -15278,7 +15658,7 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
     onMouseDown: setDialogOrder,
     order: dialogOrder,
     source: uiSource
-  }), /*#__PURE__*/React.createElement(KeywordFilterResultsConnect, null), /*#__PURE__*/React.createElement(LayerInfoDialogConnect, null));
+  }), /*#__PURE__*/React.createElement(KeywordFilterResultsConnect, null), /*#__PURE__*/React.createElement(LayerInfoDialogConnect, null), /*#__PURE__*/React.createElement(ServicePopupConnect, null));
 };
 
 /* *
@@ -18746,7 +19126,7 @@ var AnimationLengthButtonConnect = function AnimationLengthButtonConnect(_ref) {
     return getAnimationStartTime(store, mapId);
   });
   var animationEndTime = useSelector(function (store) {
-    return getAnimationEndTime(store, mapId);
+    return getAnimationEndTime$1(store, mapId);
   });
   var currentDiffInMinutes = moment(animationEndTime).diff(moment(animationStartTime), 'minutes');
   var currentLength = Object.values(AnimationLength).map(function (val) {
@@ -18939,7 +19319,7 @@ var connectRedux$2 = connect(function (store, props) {
     isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId),
     timeValue: getTime(getSynchronizationGroupStore(store), props.sourceId),
     animationStartTime: getAnimationStartTime(store, props.mapId),
-    animationEndTime: getAnimationEndTime(store, props.mapId),
+    animationEndTime: getAnimationEndTime$1(store, props.mapId),
     activeWindowId: getActiveWindowId(store),
     unfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime(store, props.mapId)
   };
@@ -19689,10 +20069,11 @@ var getCurrentDimensionValue = function getCurrentDimensionValue() {
   });
   return currentDimension === null || currentDimension === void 0 ? void 0 : currentDimension.currentValue;
 };
-var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSInstance, mapProperties, onUpdateLayerInformation) {
+var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, mapProperties, onUpdateLayerInformation) {
   var origin = LayerActionOrigin.ReactMapViewParseLayer;
   var service = WMGetServiceFromStore(wmLayer.service);
   var serviceName = mapProperties.services[service.id].name;
+  var webMapJSInstance = getWMJSMapById(mapId);
   /* Update list of layers for service */
 
   var done = function done(layers) {
@@ -22236,6 +22617,22 @@ var AdagucMapDrawContainer = function AdagucMapDrawContainer(_ref) {
   }));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
 /**
  * Returns filtered list of props with geoJson
  * @param children React.ReactNode, layers with geoJson
@@ -22258,7 +22655,7 @@ var getFeatureLayers = function getFeatureLayers(children) {
  */
 
 var isAMapLayer = function isAMapLayer(layer) {
-  return layer.layerType === LayerType.mapLayer;
+  return layer.layerType === LayerType$1.mapLayer;
 };
 /**
  * Returns true if this is a geojsonlayer (layer containing geojson field)
@@ -22268,6 +22665,46 @@ var isAMapLayer = function isAMapLayer(layer) {
 var isAGeoJSONLayer = function isAGeoJSONLayer(layer) {
   return layer.geojson !== undefined;
 };
+var getWMJSLayerFromReactLayer = function getWMJSLayerFromReactLayer(mapId, wmLayers, reactWebMapJSLayer, wmLayerIndex) {
+  var _reactWebMapJSLayer$p = reactWebMapJSLayer.props,
+      reactLayerId = _reactWebMapJSLayer$p.id,
+      layerName = _reactWebMapJSLayer$p.name;
+  var wmjsMap = getWMJSMapById(mapId);
+  /* Some safety checks */
+
+  if (!wmjsMap || !wmLayers || !reactLayerId || !layerName) return {
+    layer: null,
+    layerArrayMutated: false
+  };
+  /* Find the wmlayer by its react layer id */
+
+  var matchingLayerIndex = wmLayers.findIndex(function (wmLayer) {
+    return wmLayer.id === reactLayerId;
+  });
+  if (matchingLayerIndex === -1) return {
+    layer: null,
+    layerArrayMutated: false
+  };
+  /*
+     The layer order in the react children array index is
+     reversed compared to the layer order in the wmLayer array index
+  */
+
+  var reactLayerIndex = wmLayers.length - 1 - wmLayerIndex;
+  var isMapLayer = isAMapLayer(reactWebMapJSLayer.props);
+  var mapLayerArrayShouldBeMutated = isMapLayer && matchingLayerIndex !== reactLayerIndex;
+  /* It seems that a layer was moved in the layerlist, move it in the wmjsMap too */
+
+  if (mapLayerArrayShouldBeMutated) {
+    wmjsMap.swapLayers(wmLayers[matchingLayerIndex], wmLayers[reactLayerIndex]);
+    wmjsMap.draw();
+  }
+
+  return {
+    layer: wmLayers[matchingLayerIndex],
+    layerArrayMutated: mapLayerArrayShouldBeMutated
+  };
+};
 
 var getDisplayText = function getDisplayText(currentAdagucTime) {
   var timeFormat = 'ddd DD MMM YYYY HH:mm [UTC]';
@@ -22291,20 +22728,21 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.adaguc = {
-      webMapJSCreated: false,
       initialized: false,
       baseLayers: [],
-      webMapJS: undefined,
-      oldbbox: undefined
+      oldbbox: undefined,
+      currentWidth: -1,
+      currentHeight: -1,
+      currentMapProps: {
+        children: []
+      }
     };
     _this.mapTimer = undefined;
     _this.featureLayerUpdateTimer = undefined;
-    _this.currentWidth = undefined;
-    _this.currentHeight = undefined;
     _this.refetchTimer = null;
 
     _this.componentDidUpdate = function (prevProps) {
-      _this.checkNewProps(prevProps, _this.props);
+      _this.updateWMJSMapProps(prevProps, _this.props);
     };
 
     _this.onStartRefetchTimer = function () {
@@ -22319,8 +22757,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
       var fetchSpeed = 60000; // 1 minute
 
       _this.refetchTimer = setInterval(function () {
-        var layers = _this.adaguc.webMapJS.getLayers();
-
+        var mapId = _this.props.mapId;
+        var wmjsMap = getWMJSMapById(mapId);
+        var layers = wmjsMap.getLayers();
         layers.forEach(function (layer) {
           if (layer.enabled !== false) {
             _this.parseWMJSLayer(layer, true);
@@ -22340,15 +22779,16 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         var _this$props = _this.props,
             onUpdateLayerInformation = _this$props.onUpdateLayerInformation,
             mapId = _this$props.mapId;
-        setServiceMetadata(wmLayer, mapId, _this.adaguc.webMapJS, _this.props, onUpdateLayerInformation);
+        setServiceMetadata(wmLayer, mapId, _this.props, onUpdateLayerInformation);
+        var wmjsMap = getWMJSMapById(mapId);
 
         if (child) {
           if (wmLayer.hasError) {
             if (child.props.onLayerError) {
-              child.props.onLayerError(wmLayer, new Error(wmLayer.lastError), _this.adaguc.webMapJS);
+              child.props.onLayerError(wmLayer, new Error(wmLayer.lastError), wmjsMap);
             }
           } else if (child.props.onLayerReady) {
-            child.props.onLayerReady(wmLayer, _this.adaguc.webMapJS);
+            child.props.onLayerReady(wmLayer, wmjsMap);
           }
         }
       };
@@ -22362,12 +22802,11 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     _this.resize = _this.resize.bind(_assertThisInitialized(_this));
     _this.handleWindowResize = _this.handleWindowResize.bind(_assertThisInitialized(_this));
     _this.drawDebounced = debounce$1(600, _this.drawDebounced);
-    _this.checkNewProps = _this.checkNewProps.bind(_assertThisInitialized(_this));
-    _this.checkAdaguc = _this.checkAdaguc.bind(_assertThisInitialized(_this));
+    _this.updateWMJSMapProps = _this.updateWMJSMapProps.bind(_assertThisInitialized(_this));
+    _this.mountWMJSMap = _this.mountWMJSMap.bind(_assertThisInitialized(_this));
     _this.onAfterSetBBoxListener = _this.onAfterSetBBoxListener.bind(_assertThisInitialized(_this));
     _this.onUpdateBBoxListener = _this.onUpdateBBoxListener.bind(_assertThisInitialized(_this));
     _this.onDimChangeListener = _this.onDimChangeListener.bind(_assertThisInitialized(_this));
-    _this.currentMapProps = {};
     _this.adagucContainerRef = /*#__PURE__*/React.createRef();
     _this.adagucWebMapJSRef = /*#__PURE__*/React.createRef();
     return _this;
@@ -22377,36 +22816,38 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$props2 = this.props,
+          shouldAutoFetch = _this$props2.shouldAutoFetch,
           onWMJSMount = _this$props2.onWMJSMount,
-          mapId = _this$props2.mapId,
-          shouldAutoFetch = _this$props2.shouldAutoFetch;
-      this.checkAdaguc();
-      this.checkNewProps(null, this.props);
-      window.addEventListener('resize', this.handleWindowResize);
+          mapId = _this$props2.mapId;
+      /* If this components re-mounts, make sure that the initialized state is set back to false */
 
-      if (this.adaguc.initialized === false && this.adaguc.webMapJS) {
-        this.adaguc.initialized = true;
-      }
-
-      onWMJSMount(mapId);
+      this.setState({
+        adagucInitialised: false
+      });
+      window.addEventListener('resize', this.handleWindowResize);
+      this.mountWMJSMap();
 
       if (shouldAutoFetch) {
         this.onStartRefetchTimer();
       }
+
+      onWMJSMount(mapId);
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var mapId = this.props.mapId;
       window.removeEventListener('resize', this.handleWindowResize);
-      this.adaguc.webMapJS.getListener().suspendEvents();
-
-      if (typeof this.adaguc.webMapJS.stopAnimating === 'function') {
-        this.adaguc.webMapJS.stopAnimating();
-        this.adaguc.webMapJS.destroy();
-        this.adaguc.webMapJSCreated = false;
-      }
-
       this.clearRefetchTimer();
+      unRegisterWMJSMap(mapId);
+      /* Reset adaguc properties */
+
+      this.adaguc.initialized = false;
+      this.adaguc.currentHeight = -1;
+      this.adaguc.currentWidth = -1;
+      this.adaguc.baseLayers = [];
+      this.adaguc.oldbbox = new WMBBOX();
+      this.adaguc.currentMapProps.children = null;
     }
   }, {
     key: "onDimChangeListener",
@@ -22414,9 +22855,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
       var _this$props3 = this.props,
           mapId = _this$props3.mapId,
           onMapChangeDimension = _this$props3.onMapChangeDimension;
+      var wmjsMap = getWMJSMapById(mapId);
 
-      if (this.adaguc && this.adaguc.webMapJS) {
-        var timeDimension = this.adaguc.webMapJS.getDimension('time');
+      if (wmjsMap) {
+        var timeDimension = wmjsMap.getDimension('time');
 
         if (timeDimension) {
           onMapChangeDimension({
@@ -22432,16 +22874,17 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "onAfterSetBBoxListener",
-    value: function onAfterSetBBoxListener(wmjsMap) {
+    value: function onAfterSetBBoxListener() {
       var _this2 = this;
 
-      var _this$props4 = this.props,
-          mapId = _this$props4.mapId,
-          onMapZoomEnd = _this$props4.onMapZoomEnd;
       /* Update the map after 100 ms */
-
       window.setTimeout(function () {
-        var MapViewBBOX = _this2.props.bbox;
+        var _this2$props = _this2.props,
+            MapViewBBOX = _this2$props.bbox,
+            mapId = _this2$props.mapId,
+            onMapZoomEnd = _this2$props.onMapZoomEnd;
+        var wmjsMap = getWMJSMapById(mapId);
+        if (!wmjsMap) return;
         var projectionInfo = wmjsMap.getProjection();
         /* Trigger onMapZoomEnd callback */
 
@@ -22475,55 +22918,32 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
       }
     }
   }, {
-    key: "getWMJSLayerFromReactLayer",
-    value: function getWMJSLayerFromReactLayer(wmLayers, reactWebMapJSLayer, index) {
-      var foundLayer = null;
-
-      if (reactWebMapJSLayer.props.name && reactWebMapJSLayer.props.id) {
-        if (index >= 0 && index < wmLayers.length) {
-          for (var layerIndex = 0; layerIndex < wmLayers.length; layerIndex += 1) {
-            var secondIndex = wmLayers.length - 1 - index;
-            var layer = wmLayers[layerIndex];
-
-            if (layer === getWMLayerById(reactWebMapJSLayer.props.id)) {
-              foundLayer = layer;
-
-              if (isAMapLayer(reactWebMapJSLayer.props) && layerIndex !== secondIndex) {
-                this.adaguc.webMapJS.swapLayers(wmLayers[layerIndex], wmLayers[secondIndex]);
-                this.adaguc.webMapJS.draw();
-                return {
-                  layer: foundLayer,
-                  layerArrayMutated: true
-                };
-              }
-            }
-          }
-        }
-      }
-
-      return {
-        layer: foundLayer,
-        layerArrayMutated: false
-      };
-    }
-  }, {
-    key: "checkNewProps",
-    value: function checkNewProps(prevProps, props) {
+    key: "updateWMJSMapProps",
+    value: function updateWMJSMapProps(prevProps, props) {
       var _this3 = this;
 
       if (!props) {
         return;
       }
 
+      var mapId = props.mapId,
+          children = props.children;
+      var wmjsMap = getWMJSMapById(mapId);
+
+      if (!wmjsMap) {
+        console.warn('No wmjsMap');
+        return;
+      }
+
       var needsRedraw = false;
       /* Check map props */
 
       if (!prevProps || prevProps.showLegend !== props.showLegend) {
-        this.adaguc.webMapJS.displayLegendInMap(props.showLegend !== false);
+        wmjsMap.displayLegendInMap(props.showLegend !== false);
       }
 
       if (!prevProps || prevProps.showScaleBar !== props.showScaleBar) {
-        this.adaguc.webMapJS.displayScaleBarInMap(props.showScaleBar !== false);
+        wmjsMap.displayScaleBarInMap(props.showScaleBar !== false);
         needsRedraw = true;
       }
       /* Check map dimensions */
@@ -22533,16 +22953,16 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         if (props.dimensions) {
           for (var d = 0; d < props.dimensions.length; d += 1) {
             var propDimension = props.dimensions[d];
-            var mapDim = this.adaguc.webMapJS.getDimension(propDimension.name);
+            var mapDim = wmjsMap.getDimension(propDimension.name);
 
             if (mapDim && mapDim.currentValue !== propDimension.currentValue) {
-              this.adaguc.webMapJS.setDimension(propDimension.name, propDimension.currentValue, false, false);
+              wmjsMap.setDimension(propDimension.name, propDimension.currentValue, false, false);
             }
 
             if (props.displayTimeInMap && propDimension.name === 'time' && propDimension.currentValue !== undefined) {
               needsRedraw = true;
               var displayText = getDisplayText(propDimension.currentValue);
-              this.adaguc.webMapJS.setTimeOffset(displayText);
+              wmjsMap.setTimeOffset(displayText);
             }
           }
         }
@@ -22552,14 +22972,14 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
       if (!prevProps || prevProps.bbox !== props.bbox) {
         if (props.bbox.left !== undefined) {
-          var projectionInfo = this.adaguc.webMapJS.getProjection();
+          var projectionInfo = wmjsMap.getProjection();
           var mapBBOX = projectionInfo.bbox;
 
           if (props.bbox.left !== mapBBOX.left || props.bbox.right !== mapBBOX.right || props.bbox.bottom !== mapBBOX.bottom || props.bbox.top !== mapBBOX.top) {
-            this.adaguc.webMapJS.suspendEvent('onupdatebbox');
-            this.adaguc.webMapJS.setProjection(props.srs, new WMBBOX(props.bbox));
-            this.adaguc.webMapJS.resumeEvent('onupdatebbox');
-            this.adaguc.webMapJS.draw();
+            wmjsMap.suspendEvent('onupdatebbox');
+            wmjsMap.setProjection(props.srs, new WMBBOX(props.bbox));
+            wmjsMap.resumeEvent('onupdatebbox');
+            wmjsMap.draw();
           }
         }
       }
@@ -22568,9 +22988,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
       if (!prevProps || prevProps.displayMapPin !== props.displayMapPin) {
         if (props.displayMapPin === true) {
-          this.adaguc.webMapJS.getMapPin().showMapPin();
+          wmjsMap.getMapPin().showMapPin();
         } else if (props.displayMapPin === false) {
-          this.adaguc.webMapJS.getMapPin().hideMapPin();
+          wmjsMap.getMapPin().hideMapPin();
         }
       }
       /* Set map cursor location */
@@ -22578,7 +22998,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
       if (!prevProps || prevProps.mapPinLocation !== props.mapPinLocation) {
         if (props.mapPinLocation) {
-          this.adaguc.webMapJS.getMapPin().positionMapPinByLatLon({
+          wmjsMap.getMapPin().positionMapPinByLatLon({
             x: props.mapPinLocation.lon,
             y: props.mapPinLocation.lat
           });
@@ -22589,9 +23009,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
       if (!prevProps || prevProps.disableMapPin !== props.disableMapPin) {
         if (props.disableMapPin === true) {
-          this.adaguc.webMapJS.getMapPin().setMapPinDisabled();
+          wmjsMap.getMapPin().setMapPinDisabled();
         } else if (props.disableMapPin === false) {
-          this.adaguc.webMapJS.getMapPin().setMapPinEnabled();
+          wmjsMap.getMapPin().setMapPinEnabled();
         }
       }
       /* Change the animation delay */
@@ -22599,8 +23019,8 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
       if (!prevProps || prevProps.animationDelay !== props.animationDelay) {
         if (props.animationDelay) {
-          if (typeof this.adaguc.webMapJS.setAnimationDelay === 'function') {
-            this.adaguc.webMapJS.setAnimationDelay(props.animationDelay);
+          if (typeof wmjsMap.setAnimationDelay === 'function') {
+            wmjsMap.setAnimationDelay(props.animationDelay);
           }
         }
       }
@@ -22609,13 +23029,11 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
       if (!prevProps || prevProps.showLayerInfo !== props.showLayerInfo) {
         if (props.showLayerInfo) {
-          this.adaguc.webMapJS.showLayerInfo = props.showLayerInfo;
+          wmjsMap.showLayerInfo = props.showLayerInfo;
         }
       }
 
-      var children = props.children;
-
-      if (children !== this.currentMapProps.children) {
+      if (children !== this.adaguc.currentMapProps.children) {
         var _ret = function () {
           var myChildren = [];
           var takenIds = new Set();
@@ -22628,7 +23046,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                   myChildren.push(child);
                   takenIds.add(childProps.id);
                 } else {
-                  childProps.onLayerError(childProps, new Error("Duplicate layer id \"".concat(childProps.id, "\" encountered within this WebMap")), _this3.adaguc.webMapJS);
+                  childProps.onLayerError(childProps, new Error("Duplicate layer id \"".concat(childProps.id, "\" encountered within this WebMap")), wmjsMap);
                   console.warn('ReactWMJSLayer has a duplicate id', child);
                 }
               } else {
@@ -22637,11 +23055,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
             }
           });
           myChildren.reverse();
-
-          var wmjsLayers = _this3.adaguc.webMapJS.getLayers();
+          var wmjsLayers = wmjsMap.getLayers();
           /* ReactWMJSLayer Layer Childs: Detect all ReactLayers connected to WMJSLayers, remove WMJSLayer if there is no ReactLayer */
 
-
           var _loop = function _loop(l) {
             if (myChildren.filter(function (c) {
               return c && c.props && c.props.id === wmjsLayers[l].ReactWMJSLayerId;
@@ -22651,7 +23067,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
               /* Trigger update of all map dimensions */
 
               var onUpdateLayerInformation = props.onUpdateLayerInformation,
-                  mapId = props.mapId;
+                  _mapId = props.mapId;
               onUpdateLayerInformation && onUpdateLayerInformation({
                 origin: ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO,
                 serviceLayers: null,
@@ -22659,8 +23075,8 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                 layerDimensions: null,
                 mapDimensions: {
                   origin: origin,
-                  mapId: mapId,
-                  dimensions: _this3.adaguc.webMapJS.mapdimensions.map(function (_ref) {
+                  mapId: _mapId,
+                  dimensions: wmjsMap.mapdimensions.map(function (_ref) {
                     var name = _ref.name,
                         units = _ref.units,
                         currentValue = _ref.currentValue,
@@ -22675,7 +23091,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                 }
               });
 
-              _this3.checkNewProps(prevProps, props);
+              _this3.updateWMJSMapProps(prevProps, props);
 
               return {
                 v: {
@@ -22693,22 +23109,20 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
           /* ReactWMJSLayer BaseLayer Childs: For the baseLayers, detect all ReactLayers connected to WMJSLayers, remove WMJSLayer if there is no ReactLayer */
 
 
-          var webmapJSBaselayers = _this3.adaguc.webMapJS.getBaseLayers();
+          var webmapJSBaselayers = wmjsMap.getBaseLayers();
 
           var _loop2 = function _loop2(_l) {
-            var wmjsBaseLayers = _this3.adaguc.webMapJS.getBaseLayers();
+            var wmjsBaseLayers = wmjsMap.getBaseLayers();
 
             if (myChildren.filter(function (c) {
               return c && c.props ? c.props.id === wmjsBaseLayers[_l].ReactWMJSLayerId : false;
             }).length === 0) {
               /*  TODO (Maarten Plieger, 2020-03-19):The remove property for the baselayer is not working yet */
               wmjsBaseLayers.splice(_l, 1);
+              wmjsMap.setBaseLayers(wmjsBaseLayers);
+              wmjsBaseLayers = wmjsMap.getBaseLayers();
 
-              _this3.adaguc.webMapJS.setBaseLayers(wmjsBaseLayers);
-
-              wmjsBaseLayers = _this3.adaguc.webMapJS.getBaseLayers();
-
-              _this3.checkNewProps(prevProps, props);
+              _this3.updateWMJSMapProps(prevProps, props);
 
               return {
                 v: {
@@ -22723,11 +23137,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
             if (_typeof(_ret3) === "object") return _ret3.v;
           }
-          /* Loop through all layers and update WMJSLayer properties where needed */
-
 
           var adagucWMJSLayerIndex = 0;
           var adagucWMJSBaseLayerIndex = 0;
+          /* Loop through all React layers and update WMJSLayer properties where needed */
 
           var _loop3 = function _loop3(c) {
             var child = myChildren[c];
@@ -22737,12 +23150,11 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
               if (_typeof(child.type) === _typeof(MapViewLayer)) {
                 /* Feature layer (with child.props.geojson), these are handled collectively by the setState commando above. */
                 var isBaselayer = !isAMapLayer(child.props) && !isAGeoJSONLayer(child.props);
-                var adagucWMJSLayers = isBaselayer ? _this3.adaguc.webMapJS.getBaseLayers() : _this3.adaguc.webMapJS.getLayers();
-
-                var obj = _this3.getWMJSLayerFromReactLayer(adagucWMJSLayers, child, isBaselayer ? adagucWMJSBaseLayerIndex : adagucWMJSLayerIndex);
+                var adagucWMJSLayers = isBaselayer ? wmjsMap.getBaseLayers() : wmjsMap.getLayers();
+                var obj = getWMJSLayerFromReactLayer(mapId, adagucWMJSLayers, child, isBaselayer ? adagucWMJSBaseLayerIndex : adagucWMJSLayerIndex);
 
                 if (obj.layerArrayMutated) {
-                  _this3.checkNewProps(prevProps, props);
+                  _this3.updateWMJSMapProps(prevProps, props);
 
                   return {
                     v: {
@@ -22758,6 +23170,8 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                 } else {
                   adagucWMJSLayerIndex += 1;
                 }
+                /* Layer was not yet added */
+
 
                 if (wmLayer === null) {
                   var keepOnTop = child.props.layerType === LayerType.overLayer || false;
@@ -22771,11 +23185,11 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                     /* Add ADAGUC WebMapJS Baselayer */
                     _this3.adaguc.baseLayers.push(newWMLayer);
 
-                    _this3.adaguc.webMapJS.setBaseLayers(_this3.adaguc.baseLayers.reverse());
+                    wmjsMap.setBaseLayers(_this3.adaguc.baseLayers.reverse());
                   } else {
                     /* Add ADAGUC WebMapJS Layer */
-                    _this3.adaguc.webMapJS.addLayer(newWMLayer).then(function () {
-                      _this3.adaguc.webMapJS.draw();
+                    wmjsMap.addLayer(newWMLayer).then(function () {
+                      wmjsMap.draw();
                     });
                   }
 
@@ -22838,18 +23252,14 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                   }
 
                   if (child.props.isProfileLayer) {
-                    var currentBbox = _this3.adaguc.webMapJS.getBBOX();
-
+                    var currentBbox = wmjsMap.getBBOX();
                     var newBbox = new WMBBOX(props.bbox);
 
                     if (currentBbox !== newBbox) {
-                      _this3.adaguc.webMapJS.suspendEvent('onupdatebbox');
-
-                      _this3.adaguc.webMapJS.setBBOX(new WMBBOX(props.bbox));
-
+                      wmjsMap.suspendEvent('onupdatebbox');
+                      wmjsMap.setBBOX(new WMBBOX(props.bbox));
                       needsRedraw = true;
-
-                      _this3.adaguc.webMapJS.resumeEvent('onupdatebbox');
+                      wmjsMap.resumeEvent('onupdatebbox');
                     }
                   }
                 }
@@ -22864,12 +23274,12 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
           }
 
           if (needsRedraw) {
-            _this3.adaguc.webMapJS.draw();
+            wmjsMap.draw();
           }
           /* Children have been processed */
 
 
-          _this3.currentMapProps.children = children;
+          _this3.adaguc.currentMapProps.children = children;
         }();
 
         if (_typeof(_ret) === "object") return _ret.v;
@@ -22878,9 +23288,11 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "drawDebounced",
     value: function drawDebounced() {
-      this.adaguc.webMapJS.getListener().suspendEvents();
-      this.adaguc.webMapJS.draw();
-      this.adaguc.webMapJS.getListener().resumeEvents();
+      var mapId = this.props.mapId;
+      var wmjsMap = getWMJSMapById(mapId);
+      wmjsMap.getListener().suspendEvents();
+      wmjsMap.draw();
+      wmjsMap.getListener().resumeEvents();
     }
   }, {
     key: "handleWindowResize",
@@ -22888,54 +23300,72 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
       this.resize();
     }
   }, {
-    key: "checkAdaguc",
-    value: function checkAdaguc() {
+    key: "mountWMJSMap",
+    value: function mountWMJSMap() {
       var _this4 = this;
 
-      var _this$props5 = this.props,
-          mapId = _this$props5.mapId,
-          listeners = _this$props5.listeners,
-          srs = _this$props5.srs,
-          bbox = _this$props5.bbox,
-          onMapPinChangeLocation = _this$props5.onMapPinChangeLocation;
+      var _this$props4 = this.props,
+          mapId = _this$props4.mapId,
+          listeners = _this$props4.listeners,
+          srs = _this$props4.srs,
+          bbox = _this$props4.bbox,
+          onMapPinChangeLocation = _this$props4.onMapPinChangeLocation;
+      /* Check if we have something to mount WMJSMap on */
+
+      if (this.adagucWebMapJSRef.current === null) {
+        console.warn('No this.adagucWebMapJSRef.current  yet ');
+        return null;
+      }
+      /* Check if webmapjs was not already initialized */
 
-      if (this.adaguc.webMapJSCreated) {
-        return;
+
+      var existingWMJSMap = getWMJSMapById(mapId);
+
+      if (existingWMJSMap) {
+        console.warn("Somehow ".concat(mapId, "unRegisterWMJSMap already exists"));
+        unRegisterWMJSMap(mapId);
       }
 
-      this.adaguc.webMapJSCreated = true;
-      this.adaguc.webMapJS = new WMJSMap(this.adagucWebMapJSRef.current);
-      this.adaguc.webMapJS.showLayerInfo = false;
+      var wmjsMap = new WMJSMap(this.adagucWebMapJSRef.current);
+      this.adaguc.currentMapProps = {};
+      this.adaguc.currentMapProps.children = null;
+      this.adaguc.baseLayers = [];
+      registerWMJSMap(wmjsMap, mapId);
+      this.adaguc.initialized = true;
       /* Enable to show actual layer properties in the map */
 
-      registerWMJSMap(this.adaguc.webMapJS, mapId);
-      this.adaguc.webMapJS.removeAllLayers();
-      this.adaguc.webMapJS.setProjection(srs, new WMBBOX(bbox));
-      this.adaguc.webMapJS.setWMTileRendererTileSettings(tileRenderSettings);
+      wmjsMap.showLayerInfo = false;
+      wmjsMap.removeAllLayers();
+
+      if (srs) {
+        wmjsMap.setProjection(srs, new WMBBOX(bbox));
+      }
+
+      wmjsMap.setWMTileRendererTileSettings(tileRenderSettings);
 
       if (listeners) {
         listeners.forEach(function (listener) {
-          _this4.adaguc.webMapJS.addListener(listener.name, function (data) {
-            listener.callbackfunction(_this4.adaguc.webMapJS, data);
+          wmjsMap.addListener(listener.name, function (data) {
+            listener.callbackfunction(wmjsMap, data);
           }, listener.keep);
         });
       }
 
-      this.adaguc.webMapJS.addListener('ondimchange', function () {
+      wmjsMap.addListener('ondimchange', function () {
         _this4.onDimChangeListener();
       }, true);
-      this.adaguc.webMapJS.addListener('onmapready', function () {
+      wmjsMap.addListener('onmapready', function () {
         _this4.setState({
           adagucInitialised: true
         });
       });
-      this.adaguc.webMapJS.addListener('aftersetbbox', function (wmjsMap) {
-        _this4.onAfterSetBBoxListener(wmjsMap);
+      wmjsMap.addListener('aftersetbbox', function () {
+        _this4.onAfterSetBBoxListener();
       }, true);
-      this.adaguc.webMapJS.addListener('onupdatebbox', function (newBbox) {
+      wmjsMap.addListener('onupdatebbox', function (newBbox) {
         _this4.onUpdateBBoxListener(newBbox);
       }, true);
-      this.adaguc.webMapJS.addListener('onsetmappin', function (mapPinLatLonCoordinate) {
+      wmjsMap.addListener('onsetmappin', function (mapPinLatLonCoordinate) {
         // 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
@@ -22950,7 +23380,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         }
       }, true);
       this.resize();
-      this.adaguc.webMapJS.draw();
+      wmjsMap.draw();
+      this.updateWMJSMapProps(null, this.props);
+      return wmjsMap;
     }
   }, {
     key: "resize",
@@ -22961,22 +23393,26 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         var newWidth = element.clientWidth;
         var newHeight = element.clientHeight;
 
-        if (this.currentWidth !== newWidth || this.currentHeight !== newHeight) {
-          this.currentWidth = newWidth;
-          this.currentHeight = newHeight;
-          this.adaguc.webMapJS.setSize(newWidth, newHeight);
+        if (this.adaguc.currentWidth !== newWidth || this.adaguc.currentHeight !== newHeight) {
+          this.adaguc.currentWidth = newWidth;
+          this.adaguc.currentHeight = newHeight;
+          var mapId = this.props.mapId;
+          var wmjsMap = getWMJSMapById(mapId);
+          wmjsMap.setSize(newWidth, newHeight);
         }
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props6 = this.props,
-          passiveMap = _this$props6.passiveMap,
-          children = _this$props6.children,
-          onClick = _this$props6.onClick;
+      var _this$props5 = this.props,
+          passiveMap = _this$props5.passiveMap,
+          children = _this$props5.children,
+          onClick = _this$props5.onClick,
+          mapId = _this$props5.mapId;
       var adagucInitialised = this.state.adagucInitialised;
       var featureLayers = getFeatureLayers(children);
+      var wmjsMap = getWMJSMapById(mapId);
       return /*#__PURE__*/React.createElement("div", {
         className: "MapView",
         style: {
@@ -23020,7 +23456,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/React.createElement("div", null, children), adagucInitialised && featureLayers && featureLayers.length ? /*#__PURE__*/React.createElement(AdagucMapDrawContainer, {
         featureLayers: featureLayers,
-        webMapJS: this.adaguc.webMapJS
+        webMapJS: wmjsMap
       }) : null), passiveMap &&
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/control-has-associated-label, jsx-a11y/interactive-supports-focus
@@ -23504,10 +23940,10 @@ var MapViewConnect = function MapViewConnect(_a) {
     return getServices(store);
   });
   var dispatch = useDispatch();
-  var map = getWMJSMapById(mapId);
   var mapChangeDimension = React.useCallback(function (mapDimensionPayload) {
     if (mapDimensionPayload.dimension) {
-      var dimension = map.getDimension(mapDimensionPayload.dimension.name);
+      var wmjsMap = getWMJSMapById(mapId);
+      var dimension = wmjsMap.getDimension(mapDimensionPayload.dimension.name);
 
       if (dimension && dimension.currentValue === mapDimensionPayload.dimension.currentValue) {
         return;
@@ -23515,15 +23951,17 @@ var MapViewConnect = function MapViewConnect(_a) {
     }
 
     dispatch(mapActions$1.mapChangeDimension(mapDimensionPayload));
-  }, [dispatch, map]);
+  }, [dispatch, mapId]);
   var setTime = React.useCallback(function (setTimePayload) {
+    var wmjsMap = getWMJSMapById(mapId);
     /* Check if the map not already has this value set, otherwise this component will re-render */
-    if (map.getDimension('time').currentValue === setTimePayload.value) {
+
+    if (wmjsMap.getDimension('time').currentValue === setTimePayload.value) {
       return;
     }
 
     dispatch(genericActions.setTime(setTimePayload));
-  }, [dispatch, map]);
+  }, [dispatch, mapId]);
   var updateLayerInformation = React.useCallback(function (payload) {
     dispatch(layerActions.onUpdateLayerInformation(payload));
   }, [dispatch]);
@@ -24607,6 +25045,7 @@ var defaultBbox = {
 };
 var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
   var id = _a.id,
+      dockedLayerManagerSize = _a.dockedLayerManagerSize,
       title = _a.title,
       _a$layers = _a.layers,
       layers = _a$layers === void 0 ? [] : _a$layers,
@@ -24635,12 +25074,13 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       _a$multiLegend = _a.multiLegend,
       multiLegend = _a$multiLegend === void 0 ? true : _a$multiLegend,
       shouldShowLayerManager = _a.shouldShowLayerManager,
+      shouldShowDockedLayerManager = _a.shouldShowDockedLayerManager,
       _a$showClock = _a.showClock,
       showClock = _a$showClock === void 0 ? true : _a$showClock,
       _a$displayGetFeatureI = _a.displayGetFeatureInfoButtonInMap,
       displayGetFeatureInfoButtonInMap = _a$displayGetFeatureI === void 0 ? false : _a$displayGetFeatureI,
       children = _a.children,
-      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "children"]);
+      props = __rest(_a, ["id", "dockedLayerManagerSize", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "shouldShowDockedLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "children"]);
 
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || generateMapId()).current;
@@ -24661,7 +25101,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       shouldAnimate: shouldAnimate,
       shouldShowZoomControls: shouldShowZoomControls,
       displayMapPin: displayMapPin,
-      showTimeSlider: showTimeSlider
+      showTimeSlider: showTimeSlider,
+      dockedLayerManagerSize: dockedLayerManagerSize
     }, props);
     var initialProps = {
       mapPreset: mapPreset
@@ -24678,6 +25119,19 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
         setOpen: shouldShowLayerManager,
         source: 'app'
       }));
+    }
+
+    if (shouldShowDockedLayerManager) {
+      dispatch(uiActions.setToggleOpenDialog({
+        type: DialogTypes.LayerManager,
+        mapId: mapId,
+        setOpen: false
+      }));
+      dispatch(uiActions.setToggleOpenDialog({
+        type: "".concat(DialogTypes.DockedLayerManager, "-").concat(mapId),
+        mapId: mapId,
+        setOpen: true
+      }));
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
@@ -25746,6 +26200,58 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref3) {
   }, /*#__PURE__*/React__default.createElement(SnackbarWrapperConnect, null, children)));
 };
 
+/* *
+ * 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 appModuleConfig = {
+  id: 'app-module',
+  reducersMap: {
+    app: reducer
+  }
+};
+
+/* *
+ * 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 AppWrapperConnect = withEggs([appModuleConfig])(function (_ref) {
+  var children = _ref.children;
+  var dispatch = useDispatch();
+  var initialiseApp = React.useCallback(function () {
+    dispatch(appActions.initialiseApp());
+  }, [dispatch]);
+  React.useEffect(function () {
+    // Call initialisation
+    initialiseApp(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return children;
+});
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25821,4 +26327,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
  * */
 var mapActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions$1), serviceActions);
 
-export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DockedLayerManagerConnect, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$6 as layerReducer, selectors$2 as layerSelectors, types$3 as layerTypes, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, TimeSliderUtils as timeSliderUtils, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, useSetupDialog };
+export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DockedLayerManagerConnect, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, appActions, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$7 as layerReducer, selectors$2 as layerSelectors, types$3 as layerTypes, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, TimeSliderUtils as timeSliderUtils, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, unRegisterWMJSLayer, unRegisterWMJSMap, useSetupDialog };