@opengeoweb/core 2.4.0 → 2.6.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('reselect'), require('moment'), require('lodash'), require('react'), require('immer'), require('redux-saga/effects'), require('@opengeoweb/webmap'), require('@mui/material'), require('react-redux'), require('@mui/styles/makeStyles'), require('@opengeoweb/shared'), require('@mui/icons-material'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga'), require('@opengeoweb/theme')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'reselect', 'moment', 'lodash', 'react', 'immer', 'redux-saga/effects', '@opengeoweb/webmap', '@mui/material', 'react-redux', '@mui/styles/makeStyles', '@opengeoweb/shared', '@mui/icons-material', 'react-sortablejs', '@mui/styles/createStyles', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', 'redux-dynamic-modules', 'redux-dynamic-modules-saga', '@opengeoweb/theme'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.reselect, global.moment, global._, global.React, global.produce, global.effects, global.webmap, global.material, global.reactRedux, global.makeStyles, global.shared, global.iconsMaterial, global.reactSortablejs, global.createStyles, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.reduxDynamicModules, global.reduxDynamicModulesSaga, global.theme));
-})(this, (function (exports, reselect, moment, _, React, produce, effects, webmap, material, reactRedux, makeStyles, shared, iconsMaterial, reactSortablejs, createStyles, withStyles, throttleDebounce, cloneDeep, proj4, reduxDynamicModules, reduxDynamicModulesSaga, theme) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('reselect'), require('moment'), require('lodash'), require('react'), require('immer'), require('redux-saga/effects'), require('@opengeoweb/webmap'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga'), require('@opengeoweb/theme')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'reselect', 'moment', 'lodash', 'react', 'immer', 'redux-saga/effects', '@opengeoweb/webmap', 'react-redux', '@mui/material', '@opengeoweb/shared', '@mui/styles/makeStyles', '@mui/icons-material', 'react-sortablejs', '@mui/styles/createStyles', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga', '@opengeoweb/theme'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.reselect, global.moment, global._, global.React, global.produce, global.effects, global.webmap, global.reactRedux, global.material, global.shared, global.makeStyles, global.iconsMaterial, global.reactSortablejs, global.createStyles, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga, global.theme));
+})(this, (function (exports, reselect, moment, _, React, produce, effects, webmap, reactRedux, material, shared, makeStyles, iconsMaterial, reactSortablejs, createStyles, withStyles, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga, theme) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,6 +34,7 @@
   var withStyles__default = /*#__PURE__*/_interopDefaultLegacy(withStyles);
   var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
   var proj4__default = /*#__PURE__*/_interopDefaultLegacy(proj4);
+  var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -226,19 +227,6 @@
       payload: payload
     };
   };
-  /**
-   * Toggles loop state for map
-   *
-   * Example: toggleLoop({ mapId: 'mapId1', shouldLoop: true })
-   * @param {object} payload object with mapId: string, shouldLoop: boolean
-   */
-
-  var toggleLoop = function toggleLoop(payload) {
-    return {
-      type: WEBMAP_TOGGLE_LOOP,
-      payload: payload
-    };
-  };
   /**
    *Sets the scale of a time slider with id for a map
    *
@@ -759,7 +747,6 @@
     layerMoveLayer: layerMoveLayer,
     setActiveLayerId: setActiveLayerId,
     toggleAutoUpdate: toggleAutoUpdate,
-    toggleLoop: toggleLoop,
     setTimeSliderScale: setTimeSliderScale,
     setTimeStep: setTimeStep,
     setAnimationDelay: setAnimationDelay,
@@ -877,6 +864,16 @@
     generatedTimesliderIds += 1;
     return "timesliderid_" + generatedTimesliderIds;
   };
+  var generatedServiceIds = 0;
+  var generateServiceId = function generateServiceId() {
+    generatedServiceIds += 1;
+    return "serviceid_" + generatedServiceIds;
+  };
+  var generatedTimeseriesIds = 0;
+  var generateTimeSeriesId = function generateTimeSeriesId() {
+    generatedTimeseriesIds += 1;
+    return "timeseriesid_" + generatedTimeseriesIds;
+  };
   /**
    * Map for registering wmlayers with their id's
    */
@@ -2409,18 +2406,6 @@
   var isAutoUpdating = reselect.createSelector(getMapById, function (store) {
     return store ? store.isAutoUpdating : false;
   });
-  /**
-   * Tells whether the "loop" behavior of animation is on/off
-   *
-   * Example: isLooping = isLooping(store, 'mapid_1')
-   * @param {object} store store: object - store object
-   * @param {string} mapId mapId: string - Id of the map
-   * @returns {boolean} returnType: boolean
-   */
-
-  var isLooping = reselect.createSelector(getMapById, function (store) {
-    return store ? store.isLooping : false;
-  });
   /**
    * Gets activeLayerId for map
    *
@@ -2712,14 +2697,21 @@
    *
    * Example: service = getServiceByName(store, 'serviceName')
    * @param {object} store store: object - Store object
-   * @returns {Service} returnType: Service
+   * @returns {ReduxService} returnType: Service
    */
 
-  var getServiceByName = reselect.createSelector([servicesStore, function (state, serviceName) {
-    return serviceName;
-  }], function (serviceState, serviceName) {
-    if (serviceState && serviceState.byId && serviceState.byId[serviceName]) {
-      return serviceState.byId[serviceName];
+  var getServiceByName = reselect.createSelector([servicesStore, function (state, serviceUrl) {
+    return serviceUrl;
+  }], function (serviceState, serviceUrl) {
+    var foundServiceIndex = serviceState.allIds.findIndex(function (id) {
+      return serviceState.byId[id].serviceUrl === serviceUrl;
+    });
+    /* Add the service based on a url */
+
+    var id = foundServiceIndex !== -1 ? serviceState.allIds[foundServiceIndex] : null;
+
+    if (serviceState && serviceState.byId && serviceState.byId[id]) {
+      return serviceState.byId[id];
     }
 
     return null;
@@ -2789,9 +2781,8 @@
     var services = store ? store.byId : {};
     var arrayOfServiceObjects = Object.keys(services).map(function (key) {
       return {
-        id: services[key].id,
         name: services[key].name,
-        service: services[key].service
+        serviceUrl: services[key].serviceUrl
       };
     });
     return arrayOfServiceObjects;
@@ -2836,7 +2827,6 @@
     getAnimationStartTime: getAnimationStartTime,
     getAnimationEndTime: getAnimationEndTime,
     isAutoUpdating: isAutoUpdating,
-    isLooping: isLooping,
     getActiveLayerId: getActiveLayerId,
     getMapTimeSliderScale: getMapTimeSliderScale,
     getMapTimeStep: getMapTimeStep,
@@ -4730,10 +4720,10 @@
       var updateObject = {
         origin: ORIGIN_REACTMAPVIEWPARSELAYER,
         serviceLayers: {
-          id: wmLayer.service,
           name: wmLayer.title,
-          service: wmLayer.service,
-          layers: layers
+          serviceUrl: wmLayer.service,
+          layers: layers,
+          isUserAddedService: false
         },
         layerStyle: {
           origin: origin,
@@ -5562,155 +5552,6 @@
     sagas: [rootSaga$4, rootSaga$3]
   };
 
-  /* *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
-   *
-   *     http://www.apache.org/licenses/LICENSE-2.0
-   *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
-   *
-   * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2020 - Finnish Meteorological Institute (FMI)
-   * */
-
-  var TooltipSelect = function TooltipSelect(_a) {
-    var tooltip = _a.tooltip,
-        _b = _a.list,
-        list = _b === void 0 ? [] : _b,
-        _c = _a.currentIndex,
-        currentIndex = _c === void 0 ? -1 : _c,
-        _d = _a.onChangeMouseWheel,
-        onChangeMouseWheel = _d === void 0 ? function () {} : _d,
-        _e = _a.requiresCtrlToChange,
-        requiresCtrlToChange = _e === void 0 ? false : _e,
-        props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange"]);
-
-    props.disableUnderline;
-        var otherProps = __rest(props, ["disableUnderline"]);
-
-    var _f = __read(React__namespace.useState(false), 2),
-        selectOpen = _f[0],
-        setSelectOpen = _f[1];
-
-    var _g = __read(React__namespace.useState(false), 2),
-        tooltipOpen = _g[0],
-        setTooltipOpen = _g[1];
-
-    var preventDefault = function preventDefault(event) {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-
-    var enableScroll = React__namespace.useCallback(function () {
-      document.removeEventListener('wheel', preventDefault, false);
-    }, []);
-    var disableScroll = React__namespace.useCallback(function () {
-      document.addEventListener('wheel', preventDefault, {
-        passive: false
-      });
-    }, []);
-    var onWheel = React__namespace.useCallback(function (event) {
-      if (requiresCtrlToChange && (event.ctrlKey || event.metaKey) || !requiresCtrlToChange) {
-        disableScroll();
-        if (selectOpen) return;
-        var direction = event.deltaY < 0 ? 1 : -1;
-        var newValue = list[Math.min(Math.max(currentIndex - direction, 0), list.length - 1)];
-        onChangeMouseWheel(newValue);
-      } else enableScroll();
-    }, [selectOpen, currentIndex, list, onChangeMouseWheel, enableScroll, disableScroll, requiresCtrlToChange]);
-    var onOpen = React__namespace.useCallback(function () {
-      setSelectOpen(true);
-      setTooltipOpen(false);
-    }, []);
-    var onClose = React__namespace.useCallback(function () {
-      setSelectOpen(false);
-    }, []);
-    var onMouseEnter = React__namespace.useCallback(function () {
-      if (!requiresCtrlToChange) {
-        disableScroll();
-      }
-
-      if (!selectOpen) setTooltipOpen(true);
-    }, [selectOpen, disableScroll, requiresCtrlToChange]);
-    var onMouseLeave = React__namespace.useCallback(function () {
-      enableScroll();
-      setTooltipOpen(false);
-    }, [enableScroll]);
-    var onFocus = React__namespace.useCallback(function () {
-      if (!requiresCtrlToChange) {
-        disableScroll();
-      }
-
-      setTooltipOpen(true);
-    }, [disableScroll, requiresCtrlToChange]);
-    var onBlur = React__namespace.useCallback(function () {
-      enableScroll();
-      setTooltipOpen(false);
-    }, [enableScroll]);
-    return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-      title: tooltip,
-      placement: "top",
-      open: tooltipOpen
-    }, /*#__PURE__*/React__namespace.createElement(material.Select, __assign({
-      onOpen: onOpen,
-      onClose: onClose,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onWheel: onWheel,
-      MenuProps: {
-        BackdropProps: {
-          sx: {
-            '&.MuiBackdrop-root': {
-              backgroundColor: 'transparent'
-            }
-          }
-        },
-        sx: {
-          '& ul': {
-            backgroundColor: 'geowebColors.background.surface'
-          },
-          '& li': {
-            fontSize: '16px',
-            padding: '12px',
-            '&:hover': {
-              backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
-            },
-            '&.Mui-selected': {
-              color: 'geowebColors.buttons.tool.active.color',
-              backgroundColor: 'geowebColors.buttons.tool.active.fill',
-              boxShadow: "none",
-              '&:hover': {
-                backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
-              },
-              '&:focus': {
-                backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
-              }
-            },
-            '&:after': {
-              background: 'none!important'
-            },
-            '&.Mui-disabled': {
-              fontSize: '12px',
-              opacity: 0.67,
-              padding: '0px 12px',
-              '&.MuiMenuItem-root': {
-                minHeight: '30px!important'
-              }
-            }
-          }
-        }
-      }
-    }, otherProps)));
-  };
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -6616,7 +6457,20 @@
       case GENERIC_SYNC_SETBBOX:
         {
           return produce.produce(state, function (draft) {
-            action.payload.targets.forEach(function (payload) {
+            var _a = action.payload,
+                targetsFromAction = _a.targets,
+                source = _a.source;
+            /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
+
+            var targets = [{
+              targetId: source.payload.sourceId,
+              bbox: source.payload.bbox,
+              srs: source.payload.srs
+            }];
+            /* And then append the targets form the action */
+
+            targets.push.apply(targets, __spreadArray([], __read(targetsFromAction)));
+            targets.forEach(function (payload) {
               var targetId = payload.targetId,
                   bbox = payload.bbox,
                   srs = payload.srs;
@@ -6788,12 +6642,14 @@
     switch (action.type) {
       case MAP_SERVICES_SET_LAYERS:
         return produce__default["default"](state, function (draft) {
-          if (!draft.byId[action.payload.service]) draft.byId[action.payload.service] = {};
-          draft.byId[action.payload.service].id = action.payload.id;
-          draft.byId[action.payload.service].name = action.payload.name;
-          draft.byId[action.payload.service].service = action.payload.service;
-          draft.byId[action.payload.service].layers = action.payload.layers;
-          if (!draft.allIds.includes(action.payload.service)) draft.allIds.push(action.payload.service);
+          var foundServiceIndex = draft.allIds.findIndex(function (id) {
+            return draft.byId[id].serviceUrl === action.payload.serviceUrl;
+          });
+          /* Add the service based on a url */
+
+          var id = foundServiceIndex !== -1 ? draft.allIds[foundServiceIndex] : generateServiceId();
+          draft.byId[id] = __assign({}, action.payload);
+          if (!draft.allIds.includes(id)) draft.allIds.push(id);
         });
 
       case WEBMAP_UPDATE_LAYER_INFO:
@@ -6809,11 +6665,16 @@
 
       case MAP_SERVICES_REMOVE_SERVICE:
         return produce__default["default"](state, function (draft) {
-          if (draft.byId[action.payload.serviceUrl]) {
+          var foundServiceIndex = draft.allIds.findIndex(function (id) {
+            return draft.byId[id].serviceUrl === action.payload.serviceUrl;
+          });
+
+          if (foundServiceIndex !== -1) {
+            var serviceId_1 = draft.allIds[foundServiceIndex];
             draft.allIds = draft.allIds.filter(function (id) {
-              return id !== action.payload.serviceUrl;
+              return id !== serviceId_1;
             });
-            delete draft.byId[action.payload.serviceUrl];
+            delete draft.byId[serviceId_1];
           }
         });
 
@@ -7661,6 +7522,80 @@
     };
   };
 
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+      _typeof = function (obj) {
+        return typeof obj;
+      };
+    } else {
+      _typeof = function (obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      };
+    }
+
+    return _typeof(obj);
+  }
+
+  /* *
+   * 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 mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
+    return Object.values(__assign(__assign({}, presets.reduce(function (byId, preset) {
+      var _a;
+
+      return __assign(__assign({}, byId), (_a = {}, _a[preset.id] = preset, _a));
+    }, {})), userAddedServices));
+  };
+  var isService = function isService(param) {
+    var serviceParam = param;
+    return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.id) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url));
+  };
+
+  var getUserAddedServices = function getUserAddedServices() {
+    try {
+      var storedString = window.localStorage.getItem('userAddedServices');
+      var parsedData = JSON.parse(storedString);
+
+      if (parsedData && _typeof(parsedData) === 'object') {
+        return Object.entries(parsedData).reduce(function (userServices, _a) {
+          var _b;
+
+          var _c = __read(_a, 2),
+              serviceUrl = _c[0],
+              service = _c[1];
+
+          return __assign(__assign({}, userServices), isService(service) ? (_b = {}, _b[serviceUrl] = service, _b) : {});
+        }, {});
+      }
+    } catch (e) {
+      console.error('Unable to read services from localStorage: ', e);
+    }
+
+    return {};
+  };
+  var setUserAddedServices = function setUserAddedServices(services) {
+    try {
+      window.localStorage.setItem('userAddedServices', JSON.stringify(services));
+    } catch (e) {
+      console.error('Unable to write services to localStorage: ', e);
+    }
+  };
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -7678,19 +7613,19 @@
    * Copyright 2022 - Finnish Meteorological Institute (FMI)
    * */
   function newServiceAddedSaga(capturedAction) {
-    var addedService, service, keywords;
+    var addedService, serviceUrl, keywords;
     return __generator(this, function (_a) {
       switch (_a.label) {
         case 0:
           addedService = capturedAction.payload;
-          service = addedService.service;
+          serviceUrl = addedService.serviceUrl;
           keywords = addedService.layers.reduce(function (keywordAccumulator, layer) {
             return keywordAccumulator.concat(layer.path, layer.keywords);
           }, []);
           return [4
           /*yield*/
           , effects.put(addKeywordsAndActiveServices({
-            serviceUrl: service,
+            serviceUrl: serviceUrl,
             keywords: keywords
           }))];
 
@@ -7725,6 +7660,32 @@
       }
     });
   }
+  function addServiceToLocalStorageSaga(_a) {
+    var _b;
+
+    var payload = _a.payload;
+    var isUserAddedService = payload.isUserAddedService,
+        name = payload.name,
+        serviceUrl = payload.serviceUrl;
+    if (!isUserAddedService) return;
+    var localStorageServices = getUserAddedServices();
+    setUserAddedServices(__assign(__assign({}, localStorageServices), (_b = {}, _b[serviceUrl] = {
+      id: serviceUrl,
+      name: name,
+      url: serviceUrl
+    }, _b)));
+  }
+  function removeServiceFromLocalStorageSaga(_a) {
+    var payload = _a.payload;
+    var serviceUrl = payload.serviceUrl;
+    var localStorageServices = getUserAddedServices();
+    if (!localStorageServices[serviceUrl]) return;
+
+    var updatedServices = __assign({}, localStorageServices);
+
+    delete updatedServices[serviceUrl];
+    setUserAddedServices(updatedServices);
+  }
   function rootSaga() {
     return __generator(this, function (_a) {
       switch (_a.label) {
@@ -7743,6 +7704,20 @@
         case 2:
           _a.sent();
 
+          return [4
+          /*yield*/
+          , effects.takeEvery(MAP_SERVICES_SET_LAYERS, addServiceToLocalStorageSaga)];
+
+        case 3:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , effects.takeEvery(MAP_SERVICES_REMOVE_SERVICE, removeServiceFromLocalStorageSaga)];
+
+        case 4:
+          _a.sent();
+
           return [2
           /*return*/
           ];
@@ -8101,7 +8076,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var connectRedux$7 = reactRedux.connect(function (store, props) {
+  var connectRedux$6 = reactRedux.connect(function (store, props) {
     return {
       loadedLayers: getMapLayers(store, props.mapId)
     };
@@ -8164,7 +8139,7 @@
     });
   };
 
-  var WMSLayerTreeConnect = connectRedux$7(ConnectedTree);
+  var WMSLayerTreeConnect = connectRedux$6(ConnectedTree);
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -8539,7 +8514,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$x = makeStyles__default["default"]({
+  var useStyles$u = makeStyles__default["default"]({
     buttonDiv: {
       position: 'relative'
     },
@@ -8575,7 +8550,7 @@
         handleClose = _a.handleClose,
         _e = _a.layerType,
         layerType = _e === void 0 ? LayerType.mapLayer : _e;
-    var classes = useStyles$x();
+    var classes = useStyles$u();
 
     var _f = __read(React__namespace.useState(''), 2),
         serviceURL = _f[0],
@@ -8739,7 +8714,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var styles = {
+  var styles$2 = {
     buttonDiv: {
       position: 'relative'
     },
@@ -8790,7 +8765,7 @@
       title: tooltip
     }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       onClick: handleClose,
-      sx: styles.button,
+      sx: styles$2.button,
       disableRipple: true,
       "data-testid": "addLayersButton",
       ref: ref,
@@ -8955,7 +8930,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$w = makeStyles__default["default"]({
+  var useStyles$t = makeStyles__default["default"]({
     row: {
       height: '32px'
     },
@@ -8979,7 +8954,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _e = _a.layerSelect,
         layerSelect = _e === void 0 ? false : _e;
-    var classes = useStyles$w();
+    var classes = useStyles$t();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -9023,65 +8998,6 @@
     }));
   };
 
-  /* *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
-   *
-   *     http://www.apache.org/licenses/LICENSE-2.0
-   *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
-   *
-   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2021 - Finnish Meteorological Institute (FMI)
-   * */
-  var useTooltipContainerStyles = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      textContainer: {
-        width: '100%',
-        height: 32,
-        fontWeight: 500,
-        fontSize: theme.palette.geowebColors.layerManager.tableRowDefaultText.fontSize,
-        color: function color(isEnabled) {
-          return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultText.rgba : theme.palette.geowebColors.layerManager.tableRowDisabledText.rgba;
-        },
-        '& .MuiOutlinedInput-input': {
-          padding: '6px 24px 6px 8px'
-        },
-        '& .MuiOutlinedInput-notchedOutline': {
-          borderColor: 'transparent!important'
-        },
-        '&:hover .MuiSelect-select': {
-          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
-        },
-        '&.Mui-focused .MuiSelect-select': {
-          outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
-        },
-        '&:hover&.MuiButton-root': {
-          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
-        },
-        '&:focus&.MuiButton-root': {
-          outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
-        },
-        '& .MuiSvgIcon-root': {
-          transition: 'none',
-          fill: function fill(isEnabled) {
-            return isEnabled ? theme.palette.geowebColors.buttons.flat["default"].color : theme.palette.geowebColors.buttons.flat.disabled.color;
-          }
-        },
-        '&>div': {
-          paddingLeft: 8
-        }
-      }
-    });
-  });
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -9105,7 +9021,6 @@
         _b = _a.layerDimensions,
         layerDimensions = _b === void 0 ? [] : _b,
         isEnabled = _a.isEnabled;
-    var classes = useTooltipContainerStyles(isEnabled);
 
     var _c = __read(React__namespace.useState(layerDimensions.length ? layerDimensions[0].name : ''), 2),
         activeDimName = _c[0],
@@ -9182,7 +9097,7 @@
     }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: 12
-    }, /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
+    }, /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
       disableUnderline: true,
       tooltip: "Select the dimension to adjust, currently it is set to " + activeDimName + " with value " + activeDim.currentValue,
       inputProps: {
@@ -9190,7 +9105,7 @@
           'data-testid': 'selectDimension'
         }
       },
-      className: classes.textContainer,
+      isEnabled: isEnabled,
       value: activeDimName,
       list: dimNameList,
       currentIndex: dimNameCurrentIndex,
@@ -9208,7 +9123,7 @@
         key: dimension.name,
         value: dimension.name
       }, dimension.name);
-    })), /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
+    })), /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
       disableUnderline: true,
       tooltip: "Dimension " + activeDimName + " is set to " + activeDim.currentValue + " with units " + activeDim.units,
       inputProps: {
@@ -9216,7 +9131,7 @@
           'data-testid': 'selectDimensionValue'
         }
       },
-      className: classes.textContainer,
+      isEnabled: isEnabled,
       value: activeDim && activeDim.currentValue,
       list: dimValueList,
       currentIndex: dimValueCurrentIndex,
@@ -9253,7 +9168,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$v = makeStyles__default["default"](function (theme) {
+  var useStyles$s = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       dropdownEmpty: {
         paddingLeft: 8,
@@ -9303,8 +9218,7 @@
         layers = _b === void 0 ? [] : _b,
         _c = _a.isEnabled,
         isEnabled = _c === void 0 ? true : _c;
-    var classes = useStyles$v();
-    var containerClass = useTooltipContainerStyles(isEnabled);
+    var classes = useStyles$s();
 
     if (!layers || !layers.length) {
       return /*#__PURE__*/React__namespace.createElement("div", {
@@ -9330,7 +9244,7 @@
         value: layer.name
       };
     });
-    return /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
+    return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
       disableUnderline: true,
       tooltip: "Select a layer",
       inputProps: {
@@ -9338,7 +9252,7 @@
           'data-testid': 'selectLayer'
         }
       },
-      className: containerClass.textContainer,
+      isEnabled: isEnabled,
       value: currentValue,
       list: list,
       currentIndex: currentIndex,
@@ -9346,15 +9260,27 @@
       onChangeMouseWheel: function onChangeMouseWheel(e) {
         return onChangeLayerName(e.value);
       },
-      requiresCtrlToChange: true
+      requiresCtrlToChange: true,
+      renderValue: function renderValue(value) {
+        return extendedLayers.find(function (layer) {
+          return layer.name === value;
+        }).text;
+      }
     }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
-    }, "Layer"), extendedLayers.map(function (layerFromServiceLayers) {
+    }, "Layer"), extendedLayers.map(function (layerFromServiceLayers, currentIndex) {
       return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: layerFromServiceLayers.name,
         value: layerFromServiceLayers.name,
-        disabled: !layerFromServiceLayers.leaf
-      }, layerFromServiceLayers.text);
+        disabled: !layerFromServiceLayers.leaf,
+        sx: {
+          '& .MuiSvgIcon-root': {
+            marginLeft: '28px'
+          }
+        }
+      }, layerFromServiceLayers.text, currentIndex === layers.length && /*#__PURE__*/React__namespace.createElement(shared.AlertIcon, {
+        severity: "error"
+      }));
     }));
   };
 
@@ -9374,7 +9300,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$u = makeStyles__default["default"](function (theme) {
+  var useStyles$r = makeStyles__default["default"](function (theme) {
     return {
       opacityDiv: {
         height: 'calc(100% - 5px)',
@@ -9397,7 +9323,7 @@
         position: 'fixed',
         top: '-5px',
         boxSizing: 'initial',
-        zIndex: 1,
+        zIndex: 2,
         boxShadow: theme.shadows[8]
       }
     };
@@ -9435,9 +9361,8 @@
         onLayerChangeOpacity = _a.onLayerChangeOpacity,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$u();
+    var classes = useStyles$r();
     var sliderClasses = shared.sliderStyles();
-    var containerClass = useTooltipContainerStyles(isEnabled);
 
     var _c = __read(React__namespace.useState(false), 2),
         open = _c[0],
@@ -9447,22 +9372,8 @@
         tooltipOpen = _d[0],
         setTooltipOpen = _d[1];
 
-    var preventDefault = function preventDefault(event) {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-
-    var enableScroll = React__namespace.useCallback(function () {
-      document.removeEventListener('wheel', preventDefault, false);
-    }, []);
-    var disableScroll = React__namespace.useCallback(function () {
-      document.addEventListener('wheel', preventDefault, {
-        passive: false
-      });
-    }, []);
     var onWheel = React__namespace.useCallback(function (event) {
       if (event.ctrlKey || event.metaKey) {
-        disableScroll();
         var multiplier = event.altKey ? 10 : 1;
         var direction = event.deltaY > 0 ? 0.01 * multiplier : -0.01 * multiplier;
         var newValue_1 = Math.min(Math.max(currentOpacity - direction, 0), 1); // Kind of "one frame debouncer", meant to dampen too fast slider movement
@@ -9470,8 +9381,8 @@
         window.requestAnimationFrame(function () {
           onLayerChangeOpacity(newValue_1);
         });
-      } else enableScroll();
-    }, [currentOpacity, onLayerChangeOpacity, disableScroll, enableScroll]);
+      }
+    }, [currentOpacity, onLayerChangeOpacity]);
     var onClickButton = React__namespace.useCallback(function () {
       setOpen(!open);
     }, [open]);
@@ -9484,23 +9395,21 @@
       if (!open) setTooltipOpen(true);
     }, [open]);
     var onMouseLeave = React__namespace.useCallback(function () {
-      enableScroll();
       setTooltipOpen(false);
-    }, [enableScroll]);
+    }, []);
     var onFocus = React__namespace.useCallback(function () {
       setTooltipOpen(true);
     }, []);
     var onBlur = React__namespace.useCallback(function () {
-      enableScroll();
       setTooltipOpen(false);
-    }, [enableScroll]);
+    }, []);
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.opacityDiv,
       onWheel: onWheel,
       "data-testid": "scrollOpacity"
     }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: tooltipTitle,
-      className: containerClass.textContainer,
+      sx: shared.tooltipContainerStyles(isEnabled),
       placement: "top",
       open: tooltipOpen
     }, /*#__PURE__*/React__namespace.createElement(material.Button, {
@@ -9591,7 +9500,6 @@
         onChangeLayerStyle = _a.onChangeLayerStyle,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useTooltipContainerStyles(isEnabled);
     var styles = [{
       title: 'default',
       name: 'default',
@@ -9618,7 +9526,7 @@
     var currentIndex = styles.findIndex(function (style) {
       return currentStyle === style.name;
     });
-    return /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
+    return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
       disableUnderline: true,
       tooltip: "Select a style for layer " + layerName,
       inputProps: {
@@ -9626,7 +9534,7 @@
           'data-testid': 'selectStyle'
         }
       },
-      className: classes.textContainer,
+      isEnabled: isEnabled,
       value: currentStyle,
       list: list,
       currentIndex: currentIndex,
@@ -9661,7 +9569,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$t = makeStyles__default["default"](function (theme) {
+  var useStyles$q = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       svgIcon: {
         fill: function fill(_a) {
@@ -9690,7 +9598,7 @@
         isActive = _c === void 0 ? false : _c,
         _d = _a.isEnabled,
         isEnabled = _d === void 0 ? true : _d;
-    var classes = useStyles$t({
+    var classes = useStyles$q({
       isActive: isActive,
       isEnabled: isEnabled
     });
@@ -9743,7 +9651,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$s = makeStyles__default["default"](function (theme) {
+  var useStyles$p = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       row: {
         background: function background(isEnabled) {
@@ -9797,7 +9705,7 @@
         layerActiveLayout = _a.layerActiveLayout,
         layerManagerWidth = _a.layerManagerWidth,
         dragHandle = _a.dragHandle;
-    var classes = useStyles$s(isEnabled);
+    var classes = useStyles$p(isEnabled);
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
     var onClickRow = function onClickRow() {
@@ -10439,7 +10347,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$r = makeStyles__default["default"](function () {
+  var useStyles$o = makeStyles__default["default"](function () {
     return {
       layerRows: {
         width: '100%',
@@ -10459,6 +10367,11 @@
     var mapId = _a.mapId,
         layerManagerWidth = _a.layerManagerWidth;
     var dispatch = reactRedux.useDispatch();
+
+    var _b = __read(React__namespace.useState(false), 2),
+        keyPressed = _b[0],
+        setKeyPressed = _b[1];
+
     var layerIds = reactRedux.useSelector(function (store) {
       return getLayerIds(store, mapId);
     });
@@ -10474,9 +10387,9 @@
       }));
     }, [dispatch]);
 
-    var _b = __read(React__namespace.useState(null), 2),
-        activeDragIndex = _b[0],
-        setActiveDragIndex = _b[1];
+    var _c = __read(React__namespace.useState(null), 2),
+        activeDragIndex = _c[0],
+        setActiveDragIndex = _c[1];
 
     var onSetList = function onSetList() {}; // since we use activeDragIndex, we don't need inner state handling of ReactSortable
 
@@ -10505,7 +10418,43 @@
 
     var isSorting = activeDragIndex !== null;
     var isDragDisabled = layerIds.length === 1;
-    var classes = useStyles$r(isSorting);
+    var classes = useStyles$o(isSorting);
+
+    var keyPressedTrue = function keyPressedTrue(event) {
+      if (event.ctrlKey || event.metaKey) {
+        setKeyPressed(true);
+      }
+    };
+
+    var keyPressedFalse = function keyPressedFalse() {
+      setKeyPressed(false);
+    };
+
+    React__namespace.useEffect(function () {
+      window.addEventListener('keydown', keyPressedTrue);
+      window.addEventListener('keyup', keyPressedFalse);
+      return function () {
+        window.removeEventListener('keydown', keyPressedTrue);
+        window.removeEventListener('keyup', keyPressedFalse);
+      };
+    }, []);
+    var preventDefault = React__namespace.useCallback(function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }, []);
+    React__namespace.useEffect(function () {
+      if (keyPressed === true) {
+        window.addEventListener('wheel', preventDefault, {
+          passive: false
+        });
+      } else {
+        window.removeEventListener('wheel', preventDefault);
+      }
+
+      return function () {
+        return window.removeEventListener('wheel', preventDefault);
+      };
+    }, [keyPressed, preventDefault]);
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       item: true,
@@ -10561,7 +10510,6 @@
     var selectedBaseLayers = _a.selectedBaseLayers,
         availableBaseLayers = _a.availableBaseLayers,
         onChangeBaseLayers = _a.onChangeBaseLayers;
-    var classes = useTooltipContainerStyles();
 
     if (!availableBaseLayers || !availableBaseLayers.length) {
       return /*#__PURE__*/React__namespace.createElement("div", null, "No service available");
@@ -10580,7 +10528,7 @@
       style: {
         width: '100%'
       }
-    }, /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
+    }, /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
       disableUnderline: true,
       tooltip: "Select base layer",
       inputProps: {
@@ -10591,7 +10539,7 @@
       style: {
         maxWidth: '100%'
       },
-      className: classes.textContainer,
+      isEnabled: true,
       value: selectedBaseLayerId,
       list: list,
       currentIndex: currentIndex,
@@ -10715,7 +10663,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$q = makeStyles__default["default"]({
+  var useStyles$n = makeStyles__default["default"]({
     layerRow: {
       width: '100%',
       height: '36px'
@@ -10738,7 +10686,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _d = _a.tooltip,
         tooltip = _d === void 0 ? '' : _d;
-    var classes = useStyles$q();
+    var classes = useStyles$n();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -10783,7 +10731,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$p = makeStyles__default["default"]({
+  var styles$1 = {
     layerRowContainer: {
       position: 'relative',
       width: '100%',
@@ -10797,7 +10745,7 @@
       width: '100%',
       boxSizing: 'border-box'
     }
-  });
+  };
 
   var LayerManager = function LayerManager(_a) {
     var mapId = _a.mapId,
@@ -10817,12 +10765,13 @@
         _e = _a.layerSelect,
         layerSelect = _e === void 0 ? false : _e,
         _f = _a.showAddLayersTooltip,
-        showAddLayersTooltip = _f === void 0 ? true : _f;
-    var classes = useStyles$p();
+        showAddLayersTooltip = _f === void 0 ? true : _f,
+        _g = _a.leftComponent,
+        leftComponent = _g === void 0 ? null : _g;
 
-    var _g = __read(React__namespace.useState(LayerManagerWidth.lg), 2),
-        layerManagerWidth = _g[0],
-        setLayerManagerWidth = _g[1];
+    var _h = __read(React__namespace.useState(LayerManagerWidth.lg), 2),
+        layerManagerWidth = _h[0],
+        setLayerManagerWidth = _h[1];
 
     var onChangeSize = function onChangeSize(_a) {
       var width = _a.width;
@@ -10849,13 +10798,14 @@
       "data-testid": "layerManagerWindow",
       onMouseDown: onMouseDown,
       order: order,
-      source: source
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.layerManagerContainer
+      source: source,
+      leftComponent: leftComponent
+    }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: styles$1.layerManagerContainer
     }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       "data-testid": "layerManagerRowContainer",
-      className: classes.layerRowContainer
+      sx: styles$1.layerRowContainer
     }, /*#__PURE__*/React__namespace.createElement(DescriptionRow, {
       mapId: mapId,
       tooltip: showAddLayersTooltip ? 'Add Layers' : '',
@@ -11236,10 +11186,10 @@
                 }
 
                 serviceSetLayers({
-                  id: serviceUrl,
                   name: serviceName,
-                  service: serviceUrl,
-                  layers: serviceLayers
+                  serviceUrl: serviceUrl,
+                  layers: serviceLayers,
+                  isUserAddedService: true
                 });
                 setIsLoading(false);
                 closePopupAndResetState();
@@ -11656,6 +11606,65 @@
     });
   };
 
+  /* *
+   * 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 getMapStoreServiceFromLayerSelectServiceId = function getMapStoreServiceFromLayerSelectServiceId(services, serviceId) {
+    /*
+      Because the mapStore services redux store is refactored,
+      the id's do not match anymore with the layerSelect services redux store.
+      The following code ensures that the right mapStore service is found based on the id in the layerSelect store.
+         TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1883
+    */
+    var mapStoreServiceIndex = Object.keys(services).findIndex(function (serviceKey) {
+      return services[serviceKey].serviceUrl === serviceId;
+    });
+
+    if (mapStoreServiceIndex === -1) {
+      console.warn("serviceId " + serviceId + " not found");
+      return null;
+    }
+
+    return services[Object.keys(services)[mapStoreServiceIndex]];
+  };
+  var filterLayersFromService = function filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString) {
+    var mapStoreService = getMapStoreServiceFromLayerSelectServiceId(services, serviceId);
+    if (!mapStoreService) return [];
+
+    if (searchString === '' && allKeywordsActive) {
+      return mapStoreService.layers.filter(function (layer) {
+        return layer.leaf;
+      });
+    }
+
+    var searchStringArray = searchString.split(' ');
+    return mapStoreService.layers.filter(function (layer) {
+      return searchStringArray.every(function (search) {
+        var layerPathAndKeywords = layer.path.concat(layer.keywords);
+        return (!!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
+          return !keywordIds.includes(keyword);
+        }) || allKeywordsActive) && (!!layer.name && layer.name.toLowerCase().includes(search.toLowerCase()) || !!layer.text && layer.text.toLowerCase().includes(search.toLowerCase()) || !!layer["abstract"] && layer["abstract"].toLowerCase().includes(search.toLowerCase()) || !!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
+          return !keyword.toLowerCase().includes(search.toLowerCase());
+        }) || mapStoreService.name.toLowerCase().includes(search.toLowerCase()));
+      });
+    }).filter(function (layer) {
+      return layer.leaf;
+    });
+  };
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -11713,29 +11722,103 @@
    * 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 filterLayersFromService = function filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString) {
-    if (searchString === '' && allKeywordsActive) {
-      return services[serviceId].layers.filter(function (layer) {
-        return layer.leaf;
-      });
-    }
 
-    var searchStringArray = searchString.split(' ');
-    return services[serviceId].layers.filter(function (layer) {
-      return searchStringArray.every(function (search) {
-        var layerPathAndKeywords = layer.path.concat(layer.keywords);
-        return (!!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
-          return !keywordIds.includes(keyword);
-        }) || allKeywordsActive) && (!!layer.name && layer.name.toLowerCase().includes(search.toLowerCase()) || !!layer.text && layer.text.toLowerCase().includes(search.toLowerCase()) || !!layer["abstract"] && layer["abstract"].toLowerCase().includes(search.toLowerCase()) || !!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
-          return !keyword.toLowerCase().includes(search.toLowerCase());
-        }) || services[serviceId].name.toLowerCase().includes(search.toLowerCase()));
-      });
-    }).filter(function (layer) {
-      return layer.leaf;
-    });
+  var LayerListRow = function LayerListRow(_a) {
+    var layer = _a.layer,
+        layerIndex = _a.layerIndex,
+        serviceId = _a.serviceId,
+        addLayer = _a.addLayer,
+        deleteLayer = _a.deleteLayer,
+        mapLayers = _a.mapLayers;
+    return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      "data-testid": "layerListLayerRow",
+      container: true,
+      item: true,
+      xs: 12,
+      justifyContent: "center",
+      alignItems: "center",
+      sx: {
+        backgroundColor: 'geowebColors.cards.cardContainer',
+        paddingLeft: '12px',
+        marginBottom: '4px',
+        height: '64px',
+        border: 'solid 1px',
+        borderColor: 'geowebColors.cards.cardContainerBorder'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      container: true,
+      item: true,
+      xs: 10
+    }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      container: true,
+      item: true,
+      xs: 12
+    }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      sx: {
+        fontSize: '12px',
+        height: '24px',
+        lineHeight: '24px',
+        fontWeight: 500,
+        WebkitLineClamp: 1,
+        display: '-webkit-box',
+        WebkitBoxOrient: 'vertical',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+      }
+    }, layer.text)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      container: true,
+      item: true,
+      xs: 4
+    }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      sx: {
+        fontSize: '12px',
+        height: '24px',
+        lineHeight: '24px',
+        WebkitLineClamp: 1,
+        display: '-webkit-box',
+        WebkitBoxOrient: 'vertical',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+      }
+    }, layer.name)), layer["abstract"] ? /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      "data-testid": "layerAbstract",
+      container: true,
+      item: true,
+      xs: 8,
+      sx: {
+        fontSize: '10px',
+        height: '30px',
+        paddingLeft: '20px',
+        WebkitLineClamp: 2,
+        display: '-webkit-box',
+        WebkitBoxOrient: 'vertical',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+      }
+    }, layer["abstract"]) : null), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      container: true,
+      item: true,
+      xs: 2,
+      justifyContent: "flex-end",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      sx: {
+        width: '80px',
+        height: '48px',
+        marginRight: '8px',
+        paddingTop: '4px'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(LayerAddRemoveButton, {
+      layer: layer,
+      layerIndex: layerIndex,
+      serviceId: serviceId,
+      addLayer: addLayer,
+      deleteLayer: deleteLayer,
+      mapLayers: mapLayers
+    }))));
   };
 
   /* *
@@ -11751,56 +11834,9 @@
    * 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 useStyles$o = makeStyles__default["default"](function (theme) {
-    return {
-      layerRow: {
-        background: theme.palette.geowebColors.cards.cardContainer,
-        padding: '8px 0px 8px 12px',
-        marginBottom: '4px',
-        height: '64px',
-        border: "solid 1px " + theme.palette.geowebColors.cards.cardContainerBorder,
-        display: 'grid',
-        gridTemplateColumns: '1fr 0.1fr',
-        gridGap: '20px'
-      },
-      layerText: {
-        fontSize: '12px',
-        fontWeight: 500,
-        overflow: 'clip',
-        height: '20px',
-        textOverflow: 'ellipsis'
-      },
-      layerName: {
-        fontSize: '12px',
-        height: '24px',
-        overflow: 'clip',
-        "float": 'left',
-        paddingTop: '6px',
-        whiteSpace: 'nowrap'
-      },
-      layerNameMaxWidth: {
-        maxWidth: '270px'
-      },
-      layerAbstract: {
-        fontSize: '10px',
-        paddingLeft: '200px',
-        overflow: 'clip',
-        height: '30px'
-      },
-      resultCount: {
-        marginBottom: '4px',
-        fontSize: '12px'
-      },
-      layerButton: {
-        marginRight: '8px',
-        marginTop: '4px',
-        width: '80px'
-      }
-    };
-  });
 
   var LayerList = function LayerList(_a) {
     var services = _a.services,
@@ -11812,7 +11848,6 @@
         mapLayers = _a.mapLayers,
         keywordIds = _a.keywordIds,
         allKeywordsActive = _a.allKeywordsActive;
-    var classes = useStyles$o();
 
     var _b = __read(React__namespace.useState(0), 2),
         numberOfLayers = _b[0],
@@ -11823,42 +11858,29 @@
         return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).length;
       }, 0));
     }, [serviceIds, keywordIds, services, searchString, allKeywordsActive]);
-    return /*#__PURE__*/React__namespace.createElement("div", {
+    return /*#__PURE__*/React__namespace.createElement(material.Box, {
       "data-testid": "layerList"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.resultCount
-    }, numberOfLayers, " results"), /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
+    }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: {
+        marginBottom: '4px',
+        fontSize: '12px'
+      }
+    }, numberOfLayers, " results"), /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: {
         height: layerSelectHeight - 199,
         overflow: 'auto'
       }
     }, serviceIds.map(function (serviceId) {
       return filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer, layerIndex) {
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          key: serviceId + "-" + layer.name + "-" + layer.text
-        }, /*#__PURE__*/React__namespace.createElement("div", {
-          key: serviceId + "-" + layer.name,
-          className: classes.layerRow,
-          "data-testid": "layerListLayerRow"
-        }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-          className: classes.layerText
-        }, layer.text), /*#__PURE__*/React__namespace.createElement("div", null, layer["abstract"] ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
-          className: classes.layerName + " " + classes.layerNameMaxWidth
-        }, layer.name), /*#__PURE__*/React__namespace.createElement("div", {
-          className: classes.layerAbstract,
-          "data-testid": "layerAbstract"
-        }, layer["abstract"])) : /*#__PURE__*/React__namespace.createElement("div", {
-          className: classes.layerName
-        }, layer.name))), /*#__PURE__*/React__namespace.createElement("div", {
-          className: classes.layerButton
-        }, /*#__PURE__*/React__namespace.createElement(LayerAddRemoveButton, {
+        return /*#__PURE__*/React__namespace.createElement(LayerListRow, {
+          key: layer.name,
           layer: layer,
           layerIndex: layerIndex,
           serviceId: serviceId,
           addLayer: addLayer,
           deleteLayer: deleteLayer,
           mapLayers: mapLayers
-        }))));
+        });
       });
     })));
   };
@@ -11992,10 +12014,10 @@
       tabIndex: 0,
       "data-testid": all ? 'serviceChipAll' : 'serviceChip',
       onClick: function onClick() {
-        return toggleChip(all ? 'all' : service && service.service);
+        return toggleChip(all ? 'all' : service && service.serviceUrl);
       },
       onKeyPress: function onKeyPress() {
-        return toggleChip(all ? 'all' : service && service.service);
+        return toggleChip(all ? 'all' : service && service.serviceUrl);
       },
       sx: style
     }, service ? service.name : 'All');
@@ -12082,7 +12104,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$n = makeStyles__default["default"](function (theme) {
+  var useStyles$m = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       serviceChips: {
         width: '100%',
@@ -12106,7 +12128,7 @@
         fontSize: '0.875rem'
       },
       scrollArrowLeft: {
-        width: '120px',
+        width: '100px',
         marginBottom: '-12px',
         height: '34px',
         backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
@@ -12114,7 +12136,10 @@
         marginRight: '-120px',
         "float": 'left',
         zIndex: 1,
-        position: 'relative'
+        position: 'relative',
+        '&:hover': {
+          color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+        }
       },
       serviceList: {
         height: '32px',
@@ -12123,13 +12148,16 @@
         overflow: 'hidden'
       },
       scrollArrowRight: {
-        width: '120px',
+        width: '100px',
         marginBottom: '-12px',
         height: '34px',
         backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
         right: '0px',
         position: 'fixed',
-        cursor: 'pointer'
+        cursor: 'pointer',
+        '&:hover': {
+          color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+        }
       }
     });
   });
@@ -12154,7 +12182,7 @@
     var ref = React__namespace.useRef(null);
     var scrollSpeed = 5;
     var maxWidthValue = ref && ref.current && ref.current.scrollWidth && ref.current.scrollWidth >= layerSelectWidth - margin && ref.current.scrollWidth || layerSelectWidth - 50;
-    var classes = useStyles$n({
+    var classes = useStyles$m({
       margin: margin,
       maxWidthValue: maxWidthValue
     });
@@ -12220,13 +12248,14 @@
       key: "All",
       all: true,
       isEnabled: isAllEnabled
-    }), Object.keys(services).map(function (service) {
+    }), Object.keys(services).map(function (serviceId) {
       var _a;
 
+      var service = services[serviceId];
       return /*#__PURE__*/React__namespace.createElement(ServiceChipConnect, {
-        key: services[service].id,
-        service: services[service],
-        isEnabled: (_a = activeServices[service]) === null || _a === void 0 ? void 0 : _a.enabled
+        key: serviceId,
+        service: service,
+        isEnabled: (_a = activeServices[service.serviceUrl]) === null || _a === void 0 ? void 0 : _a.enabled
       });
     })), layerSelectWidth + margin < width && /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronRight, {
       className: classes.scrollArrowRight,
@@ -12284,63 +12313,49 @@
    * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2022 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$m = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      servicesContainer: {
-        width: '300px',
-        maxHeight: '380px',
-        top: '140px',
-        backgroundColor: theme.palette.geowebColors.background.surface,
-        boxShadow: theme.shadows[6],
-        overflow: 'auto'
-      },
-      header: {
-        position: 'sticky',
-        top: 0,
-        fontSize: theme.typography.fontSize,
-        padding: '12px',
-        backgroundColor: theme.palette.geowebColors.background.surface,
-        zIndex: 100
-      },
-      footer: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        position: 'sticky',
-        bottom: 0,
-        backgroundColor: theme.palette.geowebColors.background.surface,
-        zIndex: 100
-      },
-      iconFill: {
-        color: theme.palette.geowebColors.typographyAndIcons.icon
-      },
-      button: {
-        margin: '16px',
-        width: '80%',
-        fontSize: '12px',
-        textTransform: 'none'
-      },
-      text: {
-        paddingTop: '3px',
-        fontSize: '12px',
-        fontFamily: theme.typography.fontFamily,
-        fontWeight: theme.typography.fontWeightRegular,
-        textTransform: 'none',
-        color: '#575f7a'
-      },
-      icon: {
-        width: '24px',
-        height: '24px'
-      }
-    });
-  });
+  var styles = {
+    servicesContainer: {
+      width: '300px',
+      maxHeight: '380px',
+      top: '140px',
+      backgroundColor: 'geowebColors.background.surface',
+      boxShadow: 6,
+      overflow: 'auto'
+    },
+    header: {
+      position: 'sticky',
+      top: 0,
+      fontSize: 'default',
+      padding: '12px',
+      backgroundColor: 'geowebColors.background.surface',
+      zIndex: 100
+    },
+    footer: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'sticky',
+      bottom: 0,
+      backgroundColor: 'geowebColors.background.surface',
+      zIndex: 100
+    },
+    button: {
+      margin: '16px',
+      width: '80%',
+      fontSize: '12px',
+      textTransform: 'none'
+    },
+    icon: {
+      width: '24px',
+      height: '24px'
+    }
+  };
 
   var ServiceOptionsDialog = function ServiceOptionsDialog(_a) {
     var services = _a.services,
         mapStoreRemoveService = _a.mapStoreRemoveService,
         _b = _a.layers,
         layers = _b === void 0 ? [] : _b;
-    var classes = useStyles$m();
 
     var _c = __read(React__namespace.useState(false), 2),
         addServiceisOpen = _c[0],
@@ -12363,11 +12378,11 @@
     };
 
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Box, {
-      className: classes.servicesContainer,
+      sx: styles.servicesContainer,
       "data-testid": "ServiceDialog"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.header
-    }, " Services"), /*#__PURE__*/React__namespace.createElement(material.List, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: styles.header
+    }, "Services"), /*#__PURE__*/React__namespace.createElement(material.List, {
       disablePadding: true
     }, services.map(function (service) {
       return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
@@ -12389,36 +12404,34 @@
       }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: "Edit Service"
       }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
-        disabled: isDisabled(service.service),
+        disabled: isDisabled(service.serviceUrl),
         "data-testid": "openEditServiceButton",
         size: "large"
       }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
         d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z",
-        fill: classes.iconFill,
         fillRule: "evenodd"
       })))))), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: "Delete Service"
       }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         size: "large",
-        disabled: isDisabled(service.service),
+        disabled: isDisabled(service.serviceUrl),
         onClick: function onClick() {
-          return mapStoreRemoveService(service.service);
+          return mapStoreRemoveService(service.serviceUrl);
         },
         "data-testid": "removeServiceButton"
       }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
         d: "M17.504 8.228c.588 0 1.027.48.973 1.066l-.876 9.64A1.197 1.197 0 0 1 16.434 20H8.41c-.59 0-1.115-.48-1.167-1.066l-.877-9.64a.962.962 0 0 1 .973-1.066zm-2.115 1.228a.82.82 0 0 0-.819.82v7.674a.818.818 0 0 0 1.638 0v-7.675a.819.819 0 0 0-.819-.819zm-2.968 0a.819.819 0 0 0-.819.82v7.674a.818.818 0 1 0 1.638 0v-7.675a.82.82 0 0 0-.82-.819zm-2.968 0a.819.819 0 0 0-.818.82v7.674a.818.818 0 1 0 1.637 0v-7.675a.82.82 0 0 0-.82-.819zM13.432 4c.21 0 .404.168.436.376l.107.758 3.256-.01a1.606 1.606 0 0 1 1.61 1.6l.001.535-12.841.038L6 6.76a1.605 1.605 0 0 1 1.6-1.61l3.262-.008.103-.758a.454.454 0 0 1 .434-.38z",
-        fill: classes.iconFill,
         fillRule: "evenodd"
       }))))))));
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.footer
+    })), /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: styles.footer
     }, /*#__PURE__*/React__namespace.createElement(material.Button, {
       onClick: openAddService,
       "data-testid": "openAddServiceButton",
-      className: classes.button,
+      sx: styles.button,
       variant: "tertiary",
       startIcon: /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
-        className: classes.icon
+        sx: styles.icon
       }, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
         d: "M13.647 13.647h6.82a1.276 1.276 0 1 0 0-2.552h-6.82v-6.82a1.276 1.276 0 1 0-2.552 0v6.82h-6.82a1.276 1.276 0 1 0 0 2.552h6.82v6.82a1.274 1.274 0 0 0 1.276 1.275c.705 0 1.276-.571 1.276-1.276v-6.82z",
         fillRule: "evenodd"
@@ -13114,14 +13127,14 @@
     }, [dispatch]);
     React__namespace.useEffect(function () {
       if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
-        preloadedServices.forEach(function (service) {
+        mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
           getLayersFlattenedFromService(service.url).then(function (layers) {
             if (isMounted.current) {
               serviceSetLayers$1({
-                id: service.id,
                 name: service.name,
-                service: service.url,
-                layers: layers
+                serviceUrl: service.url,
+                layers: layers,
+                isUserAddedService: false
               });
             }
           })["catch"](function () {
@@ -13179,7 +13192,9 @@
         _b = _a.showTitle,
         showTitle = _b === void 0 ? false : _b,
         _c = _a.layerSelect,
-        layerSelect = _c === void 0 ? false : _c;
+        layerSelect = _c === void 0 ? false : _c,
+        _d = _a.leftComponent,
+        leftComponent = _d === void 0 ? null : _d;
     var dispatch = reactRedux.useDispatch();
     var isOpenInStore = reactRedux.useSelector(function (store) {
       return getisDialogOpen(store, 'layerManager');
@@ -13248,8 +13263,11 @@
       onMouseDown: onOrderDialog,
       order: uiOrder,
       source: uiSource,
-      layerSelect: layerSelect
-    }), layerSelect && /*#__PURE__*/React__namespace.createElement(LayerSelectConnect, null));
+      layerSelect: layerSelect,
+      leftComponent: leftComponent
+    }), layerSelect && /*#__PURE__*/React__namespace.createElement(LayerSelectConnect, {
+      preloadedServices: preloadedMapServices
+    }));
   };
 
   /* *
@@ -14217,60 +14235,6 @@
     }, "AUTO")))))));
   };
 
-  /* *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
-   *
-   *     http://www.apache.org/licenses/LICENSE-2.0
-   *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
-   *
-   * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2020 - Finnish Meteorological Institute (FMI)
-   * */
-  var svgLoopPath = {
-    title: 'Loop',
-    src: 'M20.029 10.371c.24-.013.487.078.67.246.176.162.278.38.288.615.001 0 .22 1.941-1.458 3.79-1.124 1.224-2.718 1.844-4.74 1.844H6.96v1.288c0 .43-.284.654-.564.654-.14 0-.277-.05-.41-.148l-2.671-1.948c-.2-.147-.314-.36-.314-.587 0-.229.114-.443.315-.588l2.67-1.95c.134-.096.272-.145.41-.145.28 0 .563.224.563.653v1.116h7.832c1.417 0 2.59-.465 3.393-1.342 1.025-1.13 1.011-2.28.998-2.5-.023-.508.355-.954.842-.998zM17.605 5c.14 0 .277.05.41.148l2.671 1.947c.2.147.314.36.314.587 0 .23-.114.444-.315.589l-2.67 1.949c-.134.096-.272.146-.41.146-.28 0-.563-.224-.563-.654V8.597H9.21c-1.416 0-2.59.465-3.393 1.342-1.025 1.13-1.011 2.329-.999 2.558.024.508-.354.954-.841.998l-.05.002c-.228 0-.454-.09-.626-.248-.176-.163-.278-.38-.288-.614-.002 0-.227-1.993 1.458-3.849 1.124-1.224 2.718-1.845 4.74-1.845h7.83V5.654c0-.429.284-.654.564-.654z'
-  };
-  var svgLoopOffPath = {
-    title: 'Loop off',
-    src: 'M15.154 3.26l1.827.814-1.278 2.867h1.339V5.654c0-.429.283-.654.563-.654.14 0 .277.05.41.148l2.671 1.947c.2.147.314.36.314.587 0 .23-.114.444-.315.589l-2.67 1.949c-.134.096-.272.146-.41.146-.28 0-.563-.224-.563-.654V8.597h-2.076l-2.944 6.613h2.768c1.328 0 2.442-.408 3.238-1.182l.155-.16c1.025-1.129 1.011-2.279.998-2.499-.023-.508.355-.954.842-.998.247-.013.493.078.676.246.176.162.278.38.288.615.001 0 .22 1.941-1.458 3.79-1.124 1.224-2.718 1.844-4.74 1.844h-3.504l-2.439 5.478-1.827-.813 2.077-4.666H6.958v1.29c0 .429-.283.653-.563.653-.14 0-.277-.05-.41-.148l-2.671-1.948c-.2-.147-.314-.36-.314-.587 0-.229.114-.443.315-.588l2.67-1.95c.134-.096.272-.145.41-.145.28 0 .563.224.563.653v1.116h2.875l2.944-6.614H9.21c-1.322 0-2.432.405-3.228 1.172l-.165.17c-1.025 1.13-1.011 2.329-.999 2.558.024.508-.354.954-.841.998l-.05.002c-.228 0-.454-.09-.626-.248-.176-.163-.278-.38-.288-.614-.002 0-.227-1.993 1.458-3.849 1.124-1.224 2.718-1.845 4.74-1.845h4.303l1.64-3.68z'
-  };
-
-  var LoopButton = function LoopButton(_a) {
-    var _b = _a.isLooping,
-        isLooping = _b === void 0 ? true : _b,
-        _c = _a.isDisabled,
-        isDisabled = _c === void 0 ? false : _c,
-        _d = _a.onToggleLoop,
-        onToggleLoop = _d === void 0 ? function () {
-      return null;
-    } : _d;
-    var loopButtonPath = isLooping ? svgLoopOffPath : svgLoopPath;
-    return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-      title: loopButtonPath.title
-    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
-      onClick: function onClick() {
-        return onToggleLoop();
-      },
-      active: isLooping,
-      disabled: isDisabled,
-      "data-testid": "loopButton"
-    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
-      width: 24,
-      height: 24,
-      fill: "transparent"
-    }), /*#__PURE__*/React__namespace.createElement("path", {
-      "data-testid": isLooping ? 'loop-off-svg-path' : 'loop-svg-path',
-      d: loopButtonPath.src
-    })))));
-  };
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -14744,7 +14708,6 @@
 
   var OptionsMenuButton = function OptionsMenuButton(_a) {
     var autoUpdateBtn = _a.autoUpdateBtn,
-        loopBtn = _a.loopBtn,
         speedBtn = _a.speedBtn,
         timeStepBtn = _a.timeStepBtn;
 
@@ -14807,9 +14770,6 @@
     })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: "auto"
-    }, loopBtn || /*#__PURE__*/React__namespace.createElement(LoopButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-      item: true,
-      xs: "auto"
     }, autoUpdateBtn || /*#__PURE__*/React__namespace.createElement(AutoUpdateButton, null)))));
   };
 
@@ -14898,7 +14858,6 @@
 
   var TimeSliderButtons = function TimeSliderButtons(_a) {
     var autoUpdateBtn = _a.autoUpdateBtn,
-        loopBtn = _a.loopBtn,
         optionsMenuBtn = _a.optionsMenuBtn,
         playBtn = _a.playBtn,
         speedBtn = _a.speedBtn,
@@ -14909,7 +14868,7 @@
       "data-testid": "timeSliderButtons"
     }, matches ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
-      spacing: 1,
+      spacing: 2,
       className: classes.buttonContainerBig
     }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
@@ -14927,8 +14886,6 @@
       }
     })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
-    }, loopBtn || /*#__PURE__*/React__namespace.createElement(LoopButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-      item: true
     }, autoUpdateBtn || /*#__PURE__*/React__namespace.createElement(AutoUpdateButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
     }, playBtn || /*#__PURE__*/React__namespace.createElement(PlayButton, null))) : /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -17046,14 +17003,14 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var connectRedux$6 = reactRedux.connect(function (store, props) {
+  var connectRedux$5 = reactRedux.connect(function (store, props) {
     return {
       isAutoUpdating: isAutoUpdating(store, props.mapId)
     };
   }, {
     toggleAutoUpdate: toggleAutoUpdate
   });
-  var AutoUpdateButtonConnectComponent = connectRedux$6(function (_a) {
+  var AutoUpdateButtonConnectComponent = connectRedux$5(function (_a) {
     var mapId = _a.mapId,
         isAutoUpdating = _a.isAutoUpdating,
         toggleAutoUpdate = _a.toggleAutoUpdate;
@@ -17071,54 +17028,7 @@
       disabled: false
     });
   });
-  var AutoUpdateButtonConnect = connectRedux$6(AutoUpdateButtonConnectComponent);
-
-  /* *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
-   *
-   *     http://www.apache.org/licenses/LICENSE-2.0
-   *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
-   *
-   * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2020 - Finnish Meteorological Institute (FMI)
-   * */
-  var connectRedux$5 = reactRedux.connect(function (store, props) {
-    return {
-      isLooping: isLooping(store, props.mapId)
-    };
-  }, {
-    mapToggleLoop: toggleLoop
-  });
-  var LoopButtonConnect = connectRedux$5(function (_a) {
-    var mapId = _a.mapId,
-        _b = _a.isLooping,
-        isLooping = _b === void 0 ? true : _b,
-        _c = _a.isDisabled,
-        isDisabled = _c === void 0 ? false : _c,
-        mapToggleLoop = _a.mapToggleLoop;
-
-    var onMapToggleLoop = function onMapToggleLoop() {
-      mapToggleLoop({
-        mapId: mapId,
-        shouldLoop: !isLooping
-      });
-    };
-
-    return /*#__PURE__*/React__default["default"].createElement(LoopButton, {
-      isLooping: isLooping,
-      isDisabled: isDisabled,
-      onToggleLoop: function onToggleLoop() {
-        onMapToggleLoop();
-      }
-    });
-  });
+  var AutoUpdateButtonConnect = connectRedux$5(AutoUpdateButtonConnectComponent);
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -17249,9 +17159,6 @@
       autoUpdateBtn: /*#__PURE__*/React__namespace.createElement(AutoUpdateButtonConnect, {
         mapId: mapId
       }),
-      loopBtn: /*#__PURE__*/React__namespace.createElement(LoopButtonConnect, {
-        mapId: mapId
-      }),
       speedBtn: /*#__PURE__*/React__namespace.createElement(SpeedButtonConnect, {
         mapId: mapId
       }),
@@ -17355,9 +17262,6 @@
       autoUpdateBtn: /*#__PURE__*/React__namespace.createElement(AutoUpdateButtonConnect, {
         mapId: mapId
       }),
-      loopBtn: /*#__PURE__*/React__namespace.createElement(LoopButtonConnect, {
-        mapId: mapId
-      }),
       optionsMenuBtn: /*#__PURE__*/React__namespace.createElement(OptionsMenuButtonConnect, {
         mapId: mapId
       }),
@@ -18409,22 +18313,6 @@
     }));
   };
 
-  function _typeof(obj) {
-    "@babel/helpers - typeof";
-
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function (obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function (obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-
-    return _typeof(obj);
-  }
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -18776,6 +18664,171 @@
     }
   };
 
+  /* *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *     http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2020 - Finnish Meteorological Institute (FMI)
+   * */
+  /* Function which calculates the distance between two points */
+  // eslint-disable-next-line class-methods-use-this
+
+  var distance = function distance(a, b) {
+    return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y));
+  };
+
+  var checkHoverVertice = function checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords) {
+    var maxDistance = 20;
+
+    if (feature.geometry.type === 'Point') {
+      var featureCoords = feature.geometry.coordinates;
+      /* Get all vertexes */
+
+      var XYCoords = convertGeoCoordsToScreenCoords([featureCoords]);
+
+      if (XYCoords.length > 0 && distance(XYCoords[0], {
+        x: mouseX,
+        y: mouseY
+      }) < maxDistance) {
+        return {
+          coordinateIndexInFeature: 0
+        };
+      }
+    }
+
+    if (feature.geometry.type === 'MultiPoint') {
+      for (var polygonIndex = feature.geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
+        var featureCoords = feature.geometry.coordinates[polygonIndex];
+
+        if (featureCoords === undefined) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+        /* Get all vertexes */
+
+
+        var XYCoords = convertGeoCoordsToScreenCoords([featureCoords]);
+
+        if (XYCoords.length > 0 && distance(XYCoords[0], {
+          x: mouseX,
+          y: mouseY
+        }) < maxDistance) {
+          return {
+            coordinateIndexInFeature: polygonIndex
+          };
+        }
+      }
+    }
+
+    if (feature.geometry.type === 'Polygon') {
+      var point = [mouseX, mouseY];
+
+      for (var polygonIndex = feature.geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
+        var featureCoords = feature.geometry.coordinates[polygonIndex];
+
+        if (featureCoords === undefined) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+        /* Get all vertexes */
+
+
+        var poly = [convertGeoCoordsToScreenCoords(featureCoords).map(function (coord) {
+          return [coord.x, coord.y];
+        })];
+
+        try {
+          var isPointInPoly = turf__namespace.booleanPointInPolygon(turf__namespace.point(point), turf__namespace.polygon(poly));
+
+          if (isPointInPoly) {
+            return {
+              coordinateIndexInFeature: polygonIndex
+            };
+          } // eslint-disable-next-line no-empty
+
+        } catch (e) {}
+      }
+    }
+
+    if (feature.geometry.type === 'MultiPolygon') {
+      var point = [mouseX, mouseY];
+
+      for (var polygonIndex = feature.geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
+        var featureCoords = feature.geometry.coordinates[polygonIndex][0];
+
+        if (featureCoords === undefined) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+
+        var poly = [convertGeoCoordsToScreenCoords(featureCoords).map(function (coord) {
+          return [coord.x, coord.y];
+        })];
+
+        try {
+          var isPointInPoly = turf__namespace.booleanPointInPolygon(turf__namespace.point(point), turf__namespace.polygon(poly));
+
+          if (isPointInPoly) {
+            return {
+              coordinateIndexInFeature: polygonIndex
+            };
+          } // eslint-disable-next-line no-empty
+
+        } catch (e) {}
+      }
+    }
+
+    if (feature.geometry.type === 'LineString') {
+      var featureCoords = feature.geometry.coordinates;
+      /* Get all vertexes */
+
+      var XYCoords = convertGeoCoordsToScreenCoords(featureCoords);
+      /* Snap to the vertex closer than specified pixels */
+
+      for (var j = 0; j < XYCoords.length; j += 1) {
+        var coord = XYCoords[j];
+
+        if (distance(coord, {
+          x: mouseX,
+          y: mouseY
+        }) < maxDistance) {
+          return {
+            coordinateIndexInFeature: j
+          };
+        }
+      }
+    }
+
+    return null;
+  };
+
+  var checkHoverFeatures = function checkHoverFeatures(geojson, mouseX, mouseY, convertGeoCoordsToScreenCoords) {
+    for (var j = 0; j < geojson.features.length; j += 1) {
+      var feature = geojson.features[j];
+      var hoverResult = checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords);
+
+      if (hoverResult != null) {
+        return {
+          coordinateIndexInFeature: hoverResult.coordinateIndexInFeature,
+          featureIndex: j,
+          feature: feature
+        };
+      }
+    }
+
+    return null;
+  };
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -19386,9 +19439,12 @@
     };
 
     AdagucMapDraw.prototype.adagucMouseMove = function (event) {
+      var _this = this;
+
       var _a = this.props,
           isInEditMode = _a.isInEditMode,
-          featureNrToEdit = _a.featureNrToEdit;
+          featureNrToEdit = _a.featureNrToEdit,
+          onHoverFeature = _a.onHoverFeature;
       if (event && event.rightButton === true) return;
       /* adagucMouseMove is an event callback function which is triggered when the mouse moves over the map
         This event is only triggered if the map is in hover state.
@@ -19401,6 +19457,29 @@
       this.mouseX = mouseX;
       this.mouseY = mouseY;
 
+      if (onHoverFeature) {
+        var handleMouseStoppedTimer = function handleMouseStoppedTimer() {
+          var result = checkHoverFeatures(_this.geojson, mouseX, mouseY, function (coordinates) {
+            return _this.convertGeoCoordsToScreenCoords(coordinates);
+          });
+
+          if (result) {
+            var featureEvent = {
+              coordinateIndexInFeature: result.coordinateIndexInFeature,
+              featureIndex: result.featureIndex,
+              mouseX: mouseX,
+              mouseY: mouseY,
+              isInEditMode: isInEditMode,
+              feature: result.feature
+            };
+            onHoverFeature(featureEvent);
+          }
+        };
+
+        window.clearTimeout(this.mouseStoppedTimer);
+        this.mouseStoppedTimer = window.setTimeout(handleMouseStoppedTimer, 20);
+      }
+
       if (isInEditMode === false) {
         return;
       }
@@ -19901,9 +19980,35 @@
     };
 
     AdagucMapDraw.prototype.adagucMouseUp = function (event) {
-      var isInEditMode = this.props.isInEditMode;
+      var _this = this;
+
+      var _a = this.props,
+          isInEditMode = _a.isInEditMode,
+          onClickFeature = _a.onClickFeature;
       if (event && event.rightButton === true) return;
 
+      if (onClickFeature) {
+        var mouseX = event.mouseX,
+            mouseY = event.mouseY;
+        var result = checkHoverFeatures(this.geojson, mouseX, mouseY, function (coordinates) {
+          return _this.convertGeoCoordsToScreenCoords(coordinates);
+        });
+
+        if (result) {
+          var featureEvent = {
+            coordinateIndexInFeature: result.coordinateIndexInFeature,
+            featureIndex: result.featureIndex,
+            mouseX: mouseX,
+            mouseY: mouseY,
+            isInEditMode: isInEditMode,
+            feature: result.feature
+          };
+          onClickFeature(featureEvent);
+        } else {
+          onClickFeature(null);
+        }
+      }
+
       if (isInEditMode === false) {
         return;
       }
@@ -20109,12 +20214,12 @@
       */
       var _a = this.props,
           featureNrToEdit = _a.featureNrToEdit,
-          isInEditMode = _a.isInEditMode,
-          hoverFeatureCallback = _a.hoverFeatureCallback;
+          isInEditMode = _a.isInEditMode;
       if (!this.geojson || !this.geojson.features || !this.geojson.features.length) return;
       this.textPositions = [];
       this.mouseOverPolygonCoordinates = [];
       this.mouseOverPolygonFeatureIndex = -1;
+      this.mouseOverPolygonIndex = -1;
       /* Current selected feature from GeoJSON */
 
       for (var featureIndex = 0; featureIndex < this.geojson.features.length; featureIndex += 1) {
@@ -20301,19 +20406,6 @@
           ctx.globalAlpha = 1;
           ctx.stroke();
         }
-      } // if (isInEditMode === true &&
-      //   this.mouseOverPolygonFeatureIndex === this.props.featureNrToEdit &&
-
-
-      if (hoverFeatureCallback) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        hoverFeatureCallback({
-          polygonIndex: this.mouseOverPolygonFeatureIndex,
-          featureIndex: this.mouseOverPolygonFeatureIndex,
-          mouseX: this.mouseX,
-          mouseY: this.mouseY
-        });
       }
       /* Draw labels */
 
@@ -20628,7 +20720,8 @@
       // if (test) {
 
       this.mouseOverPolygonCoordinates = 0;
-      this.mouseOverPolygonFeatureIndex = 0; // }
+      this.mouseOverPolygonFeatureIndex = 0;
+      this.mouseOverPolygonIndex = 0; // }
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
 
@@ -20705,6 +20798,7 @@
       if (test) {
         this.mouseOverPolygonCoordinates = XYCoords;
         this.mouseOverPolygonFeatureIndex = featureIndex;
+        this.mouseOverPolygonIndex = polygonIndex;
       } // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
 
@@ -20920,9 +21014,14 @@
         isInDeleteMode: layer.isInDeleteMode,
         drawMode: layer.drawMode,
         webmapjs: webMapJS,
-        hoverFeatureCallback: function hoverFeatureCallback(hoverInfo) {
-          if (layer.hoverFeatureCallback) {
-            layer.hoverFeatureCallback(hoverInfo);
+        onHoverFeature: function onHoverFeature(hoverInfo) {
+          if (layer.onHoverFeature) {
+            layer.onHoverFeature(hoverInfo);
+          }
+        },
+        onClickFeature: function onClickFeature(hoverInfo) {
+          if (layer.onClickFeature) {
+            layer.onClickFeature(hoverInfo);
           }
         },
         updateGeojson: function updateGeojson(geojson) {
@@ -23843,6 +23942,57 @@
     }, 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 MapWarningProperties = function MapWarningProperties(_a) {
+    var selectedFeatureProperties = _a.selectedFeatureProperties;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      "data-testid": "map-warning-properties",
+      style: {
+        width: '100%',
+        height: '15%',
+        marginTop: '30px',
+        marginLeft: '100px',
+        position: 'relative',
+        zIndex: 10000,
+        backgroundColor: '#CCCCCCC0',
+        padding: '0px 20px 20px',
+        overflow: 'auto',
+        fontSize: '11px'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("h1", {
+      "data-testid": "map-warning-properties-title"
+    }, selectedFeatureProperties.country), selectedFeatureProperties.details[0].event && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "Event: ", selectedFeatureProperties.details[0].event), selectedFeatureProperties.details[0].sent && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "Sent:", ' ', moment__default["default"].utc(selectedFeatureProperties.details[0].sent).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].expires && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "Expires:", ' ', moment__default["default"].utc(selectedFeatureProperties.details[0].expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].web && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "Web: ", selectedFeatureProperties.details[0].web), selectedFeatureProperties.details[0].sender && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "Sender: ", selectedFeatureProperties.details[0].sender), selectedFeatureProperties.details[0].identifier && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "Identifier: ", selectedFeatureProperties.details[0].identifier), selectedFeatureProperties.details[0].area && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "area: ", selectedFeatureProperties.details[0].area));
+  };
+
   exports.ConfigurableConnectedMap = ConfigurableConnectedMap;
   exports.ConfigurableMapWithSliderConnect = ConfigurableMapWithSliderConnect;
   exports.CoreThemeProvider = CoreThemeProvider;
@@ -23858,6 +24008,7 @@
   exports.MapView = MapView;
   exports.MapViewConnect = MapViewConnect;
   exports.MapViewLayer = MapViewLayer;
+  exports.MapWarningProperties = MapWarningProperties;
   exports.MultiDimensionSelectMapButtonsConnect = MultiDimensionSelectMapButtonsConnect;
   exports.MultiMapDimensionSelectConnect = MultiMapMultiDimensionSelectConnect;
   exports.MultiMapViewConnect = MultiMapViewConnect;
@@ -23866,7 +24017,6 @@
   exports.SyncGroupViewerConnect = SyncGroupViewerConnect;
   exports.SyncGroups = index;
   exports.TimeSliderConnect = TimeSliderConnect;
-  exports.TooltipSelect = TooltipSelect;
   exports.ZoomControlConnect = ZoomControlConnect;
   exports.ZoomControls = ZoomControls;
   exports.componentsLookUp = componentsLookUp;
@@ -23883,6 +24033,8 @@
   exports.filterSrs = filterSrs;
   exports.generateLayerId = generateLayerId;
   exports.generateMapId = generateMapId;
+  exports.generateServiceId = generateServiceId;
+  exports.generateTimeSeriesId = generateTimeSeriesId;
   exports.generateTimesliderId = generateTimesliderId;
   exports.getFirstTimeStepForLayerId = getFirstTimeStepForLayerId;
   exports.getInitialPresets = getInitialPresets;
@@ -23908,6 +24060,7 @@
   exports.store = store;
   exports.syncGroupActions = actions;
   exports.synchronizationGroupModuleConfig = synchronizationGroupConfig;
+  exports.synchronizationGroupsConfig = synchronizationGroupConfig;
   exports.testLayers = testLayers;
   exports.uiActions = actions$2;
   exports.uiModuleConfig = uiModuleConfig;