@opengeoweb/core 2.4.0 → 2.6.0

package/index.esm.js

@@ -6,10 +6,10 @@ import React__default, { useState, Component, useRef, useEffect } from 'react';
 import produce, { produce as produce$1 } from 'immer';
 import { takeLatest, put, select, call, takeEvery } from 'redux-saga/effects';
 import { WMGetServiceFromStore, LayerType as LayerType$1, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer } from '@opengeoweb/webmap';
-import { Tooltip, Select, Grid, InputLabel, IconButton, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, SvgIcon, FormControl, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
+import { Grid, InputLabel, Tooltip, IconButton, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, SvgIcon, FormControl, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
+import { TooltipSelect, AlertIcon, sliderStyles, tooltipContainerStyles, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, ToolContainerDraggable, ToolButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
 import makeStyles from '@mui/styles/makeStyles';
-import { sliderStyles, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, ToolContainerDraggable, ToolButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
 import { Cached, Add, DragIndicator, Close, ChevronLeft, ChevronRight, Link, LinkOff, MoreVert, DeleteForever } from '@mui/icons-material';
 import { Sortable, ReactSortable } from 'react-sortablejs';
 import createStyles from '@mui/styles/createStyles';
@@ -17,6 +17,7 @@ import withStyles from '@mui/styles/withStyles';
 import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
 import proj4 from 'proj4';
+import * as turf from '@turf/turf';
 import { createStore, DynamicModuleLoader } from 'redux-dynamic-modules';
 import { getSagaExtension } from 'redux-dynamic-modules-saga';
 import { ThemeWrapper, lightTheme } from '@opengeoweb/theme';
@@ -212,19 +213,6 @@ var toggleAutoUpdate = function toggleAutoUpdate(payload) {
     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
  *
@@ -745,7 +733,6 @@ var actions$3 = /*#__PURE__*/Object.freeze({
   layerMoveLayer: layerMoveLayer,
   setActiveLayerId: setActiveLayerId,
   toggleAutoUpdate: toggleAutoUpdate,
-  toggleLoop: toggleLoop,
   setTimeSliderScale: setTimeSliderScale,
   setTimeStep: setTimeStep,
   setAnimationDelay: setAnimationDelay,
@@ -863,6 +850,16 @@ var generateTimesliderId = function generateTimesliderId() {
   generatedTimesliderIds += 1;
   return "timesliderid_".concat(generatedTimesliderIds);
 };
+var generatedServiceIds = 0;
+var generateServiceId = function generateServiceId() {
+  generatedServiceIds += 1;
+  return "serviceid_".concat(generatedServiceIds);
+};
+var generatedTimeseriesIds = 0;
+var generateTimeSeriesId = function generateTimeSeriesId() {
+  generatedTimeseriesIds += 1;
+  return "timeseriesid_".concat(generatedTimeseriesIds);
+};
 /**
  * Map for registering wmlayers with their id's
  */
@@ -2522,18 +2519,6 @@ var getAnimationEndTime = createSelector(getMapById, function (store) {
 var isAutoUpdating = 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 = createSelector(getMapById, function (store) {
-  return store ? store.isLooping : false;
-});
 /**
  * Gets activeLayerId for map
  *
@@ -2825,14 +2810,21 @@ var getServices = createSelector(servicesStore, function (store) {
  *
  * Example: service = getServiceByName(store, 'serviceName')
  * @param {object} store store: object - Store object
- * @returns {Service} returnType: Service
+ * @returns {ReduxService} returnType: Service
  */
 
-var getServiceByName = createSelector([servicesStore, function (state, serviceName) {
-  return serviceName;
-}], function (serviceState, serviceName) {
-  if (serviceState && serviceState.byId && serviceState.byId[serviceName]) {
-    return serviceState.byId[serviceName];
+var getServiceByName = 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;
@@ -2902,9 +2894,8 @@ var getServicesInArray = createSelector(servicesStore, function (store) {
   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;
@@ -2949,7 +2940,6 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
   getAnimationStartTime: getAnimationStartTime,
   getAnimationEndTime: getAnimationEndTime,
   isAutoUpdating: isAutoUpdating,
-  isLooping: isLooping,
   getActiveLayerId: getActiveLayerId,
   getMapTimeSliderScale: getMapTimeSliderScale,
   getMapTimeStep: getMapTimeStep,
@@ -4863,10 +4853,10 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSIns
     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,
@@ -5589,140 +5579,6 @@ var synchronizationGroupConfig = {
   sagas: [rootSaga$4, rootSaga$3]
 };
 
-var TooltipSelect = function TooltipSelect(_a) {
-  var tooltip = _a.tooltip,
-      _a$list = _a.list,
-      list = _a$list === void 0 ? [] : _a$list,
-      _a$currentIndex = _a.currentIndex,
-      currentIndex = _a$currentIndex === void 0 ? -1 : _a$currentIndex,
-      _a$onChangeMouseWheel = _a.onChangeMouseWheel,
-      onChangeMouseWheel = _a$onChangeMouseWheel === void 0 ? function () {} : _a$onChangeMouseWheel,
-      _a$requiresCtrlToChan = _a.requiresCtrlToChange,
-      requiresCtrlToChange = _a$requiresCtrlToChan === void 0 ? false : _a$requiresCtrlToChan,
-      props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange"]);
-
-  props.disableUnderline;
-      var otherProps = __rest(props, ["disableUnderline"]);
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      selectOpen = _React$useState2[0],
-      setSelectOpen = _React$useState2[1];
-
-  var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      tooltipOpen = _React$useState4[0],
-      setTooltipOpen = _React$useState4[1];
-
-  var preventDefault = function preventDefault(event) {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  var enableScroll = React.useCallback(function () {
-    document.removeEventListener('wheel', preventDefault, false);
-  }, []);
-  var disableScroll = React.useCallback(function () {
-    document.addEventListener('wheel', preventDefault, {
-      passive: false
-    });
-  }, []);
-  var onWheel = React.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.useCallback(function () {
-    setSelectOpen(true);
-    setTooltipOpen(false);
-  }, []);
-  var onClose = React.useCallback(function () {
-    setSelectOpen(false);
-  }, []);
-  var onMouseEnter = React.useCallback(function () {
-    if (!requiresCtrlToChange) {
-      disableScroll();
-    }
-
-    if (!selectOpen) setTooltipOpen(true);
-  }, [selectOpen, disableScroll, requiresCtrlToChange]);
-  var onMouseLeave = React.useCallback(function () {
-    enableScroll();
-    setTooltipOpen(false);
-  }, [enableScroll]);
-  var onFocus = React.useCallback(function () {
-    if (!requiresCtrlToChange) {
-      disableScroll();
-    }
-
-    setTooltipOpen(true);
-  }, [disableScroll, requiresCtrlToChange]);
-  var onBlur = React.useCallback(function () {
-    enableScroll();
-    setTooltipOpen(false);
-  }, [enableScroll]);
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: tooltip,
-    placement: "top",
-    open: tooltipOpen
-  }, /*#__PURE__*/React.createElement(Select, Object.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.
@@ -6560,7 +6416,20 @@ var reducer$2 = function reducer() {
     case GENERIC_SYNC_SETBBOX:
       {
         return produce$1(state, function (draft) {
-          action.payload.targets.forEach(function (payload) {
+          var _action$payload21 = action.payload,
+              targetsFromAction = _action$payload21.targets,
+              source = _action$payload21.source;
+          /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
+
+          var targets = [{
+            targetId: source.payload.sourceId,
+            bbox: source.payload.bbox,
+            srs: source.payload.srs
+          }];
+          /* And then append the targets form the action */
+
+          targets.push.apply(targets, _toConsumableArray(targetsFromAction));
+          targets.forEach(function (payload) {
             var targetId = payload.targetId,
                 bbox = payload.bbox,
                 srs = payload.srs;
@@ -6578,9 +6447,9 @@ var reducer$2 = function reducer() {
 
     case WEBMAP_TOGGLE_AUTO_UPDATE:
       {
-        var _action$payload21 = action.payload,
-            _mapId23 = _action$payload21.mapId,
-            shouldAutoUpdate = _action$payload21.shouldAutoUpdate;
+        var _action$payload22 = action.payload,
+            _mapId23 = _action$payload22.mapId,
+            shouldAutoUpdate = _action$payload22.shouldAutoUpdate;
 
         if (!state.byId[_mapId23]) {
           return state;
@@ -6593,9 +6462,9 @@ var reducer$2 = function reducer() {
 
     case WEBMAP_TOGGLE_LOOP:
       {
-        var _action$payload22 = action.payload,
-            _mapId24 = _action$payload22.mapId,
-            shouldLoop = _action$payload22.shouldLoop;
+        var _action$payload23 = action.payload,
+            _mapId24 = _action$payload23.mapId,
+            shouldLoop = _action$payload23.shouldLoop;
 
         if (!state.byId[_mapId24]) {
           return state;
@@ -6608,9 +6477,9 @@ var reducer$2 = function reducer() {
 
     case WEBMAP_TOGGLE_TIMESTEP_AUTO:
       {
-        var _action$payload23 = action.payload,
-            _mapId25 = _action$payload23.mapId,
-            timestepAuto = _action$payload23.timestepAuto;
+        var _action$payload24 = action.payload,
+            _mapId25 = _action$payload24.mapId,
+            timestepAuto = _action$payload24.timestepAuto;
 
         if (!state.byId[_mapId25]) {
           return state;
@@ -6623,9 +6492,9 @@ var reducer$2 = function reducer() {
 
     case WEBMAP_TOGGLE_TIME_SLIDER_HOVER:
       {
-        var _action$payload24 = action.payload,
-            _mapId26 = _action$payload24.mapId,
-            isTimeSliderHoverOn = _action$payload24.isTimeSliderHoverOn;
+        var _action$payload25 = action.payload,
+            _mapId26 = _action$payload25.mapId,
+            isTimeSliderHoverOn = _action$payload25.isTimeSliderHoverOn;
 
         if (!state.byId[_mapId26]) {
           return state;
@@ -6638,9 +6507,9 @@ var reducer$2 = function reducer() {
 
     case WEBMAP_SET_PIN:
       {
-        var _action$payload25 = action.payload,
-            _mapId27 = _action$payload25.mapId,
-            mapPinLocation = _action$payload25.mapPinLocation;
+        var _action$payload26 = action.payload,
+            _mapId27 = _action$payload26.mapId,
+            mapPinLocation = _action$payload26.mapPinLocation;
 
         if (!state.byId[_mapId27]) {
           return state;
@@ -6653,9 +6522,9 @@ var reducer$2 = function reducer() {
 
     case WEBMAP_DISABLE_PIN:
       {
-        var _action$payload26 = action.payload,
-            _mapId28 = _action$payload26.mapId,
-            disableMapPin = _action$payload26.disableMapPin;
+        var _action$payload27 = action.payload,
+            _mapId28 = _action$payload27.mapId,
+            disableMapPin = _action$payload27.disableMapPin;
 
         if (!state.byId[_mapId28]) {
           return state;
@@ -6674,9 +6543,9 @@ var reducer$2 = function reducer() {
          * These targets can be used as payloads in new Layer actions.
          * These actions are here handled via the layer reducer, as it is the same logic
          */
-        var _action$payload27 = action.payload,
-            targets = _action$payload27.targets,
-            source = _action$payload27.source;
+        var _action$payload28 = action.payload,
+            targets = _action$payload28.targets,
+            source = _action$payload28.source;
         return targets.reduce(function (prevState, target) {
           var action = {
             payload: target,
@@ -6731,12 +6600,14 @@ var reducer$1 = function reducer() {
   switch (action.type) {
     case MAP_SERVICES_SET_LAYERS:
       return produce(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] = Object.assign({}, action.payload);
+        if (!draft.allIds.includes(id)) draft.allIds.push(id);
       });
 
     case WEBMAP_UPDATE_LAYER_INFO:
@@ -6752,11 +6623,16 @@ var reducer$1 = function reducer() {
 
     case MAP_SERVICES_REMOVE_SERVICE:
       return produce(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 = draft.allIds[foundServiceIndex];
           draft.allIds = draft.allIds.filter(function (id) {
-            return id !== action.payload.serviceUrl;
+            return id !== serviceId;
           });
-          delete draft.byId[action.payload.serviceUrl];
+          delete draft.byId[serviceId];
         }
       });
 
@@ -7504,23 +7380,77 @@ var enableOnlyOneKeyword = function enableOnlyOneKeyword(payload) {
   };
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
+  return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byId, preset) {
+    return Object.assign(Object.assign({}, byId), _defineProperty({}, preset.id, preset));
+  }, {})), 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, _ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            serviceUrl = _ref2[0],
+            service = _ref2[1];
+
+        return Object.assign(Object.assign({}, userServices), isService(service) ? _defineProperty({}, serviceUrl, service) : {});
+      }, {});
+    }
+  } catch (e) {
+    console.error('Unable to read services from localStorage: ', e);
+  }
+
+  return {};
+};
+var setUserAddedServices = function setUserAddedServices(services) {
+  try {
+    window.localStorage.setItem('userAddedServices', JSON.stringify(services));
+  } catch (e) {
+    console.error('Unable to write services to localStorage: ', e);
+  }
+};
+
 var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
     _marked2 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectServiceRemovedSaga),
     _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
 function newServiceAddedSaga(capturedAction) {
-  var addedService, service, keywords;
+  var addedService, serviceUrl, keywords;
   return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         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);
           }, []);
           _context.next = 5;
           return put(addKeywordsAndActiveServices({
-            serviceUrl: service,
+            serviceUrl: serviceUrl,
             keywords: keywords
           }));
 
@@ -7551,6 +7481,28 @@ function layerSelectServiceRemovedSaga(capturedAction) {
     }
   }, _marked2);
 }
+function addServiceToLocalStorageSaga(_ref) {
+  var payload = _ref.payload;
+  var isUserAddedService = payload.isUserAddedService,
+      name = payload.name,
+      serviceUrl = payload.serviceUrl;
+  if (!isUserAddedService) return;
+  var localStorageServices = getUserAddedServices();
+  setUserAddedServices(Object.assign(Object.assign({}, localStorageServices), _defineProperty({}, serviceUrl, {
+    id: serviceUrl,
+    name: name,
+    url: serviceUrl
+  })));
+}
+function removeServiceFromLocalStorageSaga(_ref2) {
+  var payload = _ref2.payload;
+  var serviceUrl = payload.serviceUrl;
+  var localStorageServices = getUserAddedServices();
+  if (!localStorageServices[serviceUrl]) return;
+  var updatedServices = Object.assign({}, localStorageServices);
+  delete updatedServices[serviceUrl];
+  setUserAddedServices(updatedServices);
+}
 function rootSaga() {
   return regeneratorRuntime.wrap(function rootSaga$(_context3) {
     while (1) {
@@ -7564,6 +7516,14 @@ function rootSaga() {
           return takeEvery(MAP_SERVICES_REMOVE_SERVICE, layerSelectServiceRemovedSaga);
 
         case 4:
+          _context3.next = 6;
+          return takeEvery(MAP_SERVICES_SET_LAYERS, addServiceToLocalStorageSaga);
+
+        case 6:
+          _context3.next = 8;
+          return takeEvery(MAP_SERVICES_REMOVE_SERVICE, removeServiceFromLocalStorageSaga);
+
+        case 8:
         case "end":
           return _context3.stop();
       }
@@ -7903,7 +7863,7 @@ var WMSLayerTree = function WMSLayerTree(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var connectRedux$7 = connect(function (store, props) {
+var connectRedux$6 = connect(function (store, props) {
   return {
     loadedLayers: getMapLayers(store, props.mapId)
   };
@@ -7966,7 +7926,7 @@ var ConnectedTree = function ConnectedTree(_ref) {
   });
 };
 
-var WMSLayerTreeConnect = connectRedux$7(ConnectedTree);
+var WMSLayerTreeConnect = connectRedux$6(ConnectedTree);
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -8325,7 +8285,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$x = makeStyles({
+var useStyles$u = makeStyles({
   buttonDiv: {
     position: 'relative'
   },
@@ -8361,7 +8321,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
       handleClose = _ref.handleClose,
       _ref$layerType = _ref.layerType,
       layerType = _ref$layerType === void 0 ? LayerType.mapLayer : _ref$layerType;
-  var classes = useStyles$x();
+  var classes = useStyles$u();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8514,7 +8474,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var styles = {
+var styles$2 = {
   buttonDiv: {
     position: 'relative'
   },
@@ -8566,7 +8526,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
     title: tooltip
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: handleClose,
-    sx: styles.button,
+    sx: styles$2.button,
     disableRipple: true,
     "data-testid": "addLayersButton",
     ref: ref,
@@ -8731,7 +8691,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$w = makeStyles({
+var useStyles$t = makeStyles({
   row: {
     height: '32px'
   },
@@ -8755,7 +8715,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
-  var classes = useStyles$w();
+  var classes = useStyles$t();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -8799,72 +8759,12 @@ var DescriptionRow = function DescriptionRow(_ref) {
   }));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var useTooltipContainerStyles = makeStyles(function (theme) {
-  return createStyles({
-    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
-      }
-    }
-  });
-});
-
 var DimensionSelect = function DimensionSelect(_ref) {
   var layerId = _ref.layerId,
       onLayerChangeDimension = _ref.onLayerChangeDimension,
       _ref$layerDimensions = _ref.layerDimensions,
       layerDimensions = _ref$layerDimensions === void 0 ? [] : _ref$layerDimensions,
       isEnabled = _ref.isEnabled;
-  var classes = useTooltipContainerStyles(isEnabled);
 
   var _React$useState = React.useState(layerDimensions.length ? layerDimensions[0].name : ''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8950,7 +8850,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
         'data-testid': 'selectDimension'
       }
     },
-    className: classes.textContainer,
+    isEnabled: isEnabled,
     value: activeDimName,
     list: dimNameList,
     currentIndex: dimNameCurrentIndex,
@@ -8976,7 +8876,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
         'data-testid': 'selectDimensionValue'
       }
     },
-    className: classes.textContainer,
+    isEnabled: isEnabled,
     value: activeDim && activeDim.currentValue,
     list: dimValueList,
     currentIndex: dimValueCurrentIndex,
@@ -8997,7 +8897,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
   }))));
 };
 
-var useStyles$v = makeStyles(function (theme) {
+var useStyles$s = makeStyles(function (theme) {
   return createStyles({
     dropdownEmpty: {
       paddingLeft: 8,
@@ -9047,8 +8947,7 @@ var RenderLayers = function RenderLayers(_ref) {
       layers = _ref$layers === void 0 ? [] : _ref$layers,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$v();
-  var containerClass = useTooltipContainerStyles(isEnabled);
+  var classes = useStyles$s();
 
   if (!layers || !layers.length) {
     return /*#__PURE__*/React.createElement("div", {
@@ -9082,7 +8981,7 @@ var RenderLayers = function RenderLayers(_ref) {
         'data-testid': 'selectLayer'
       }
     },
-    className: containerClass.textContainer,
+    isEnabled: isEnabled,
     value: currentValue,
     list: list,
     currentIndex: currentIndex,
@@ -9090,19 +8989,31 @@ var RenderLayers = function RenderLayers(_ref) {
     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.createElement(MenuItem, {
     disabled: true
-  }, "Layer"), extendedLayers.map(function (layerFromServiceLayers) {
+  }, "Layer"), extendedLayers.map(function (layerFromServiceLayers, currentIndex) {
     return /*#__PURE__*/React.createElement(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.createElement(AlertIcon, {
+      severity: "error"
+    }));
   }));
 };
 
-var useStyles$u = makeStyles(function (theme) {
+var useStyles$r = makeStyles(function (theme) {
   return {
     opacityDiv: {
       height: 'calc(100% - 5px)',
@@ -9125,7 +9036,7 @@ var useStyles$u = makeStyles(function (theme) {
       position: 'fixed',
       top: '-5px',
       boxSizing: 'initial',
-      zIndex: 1,
+      zIndex: 2,
       boxShadow: theme.shadows[8]
     }
   };
@@ -9163,9 +9074,8 @@ var OpacitySelect = function OpacitySelect(_ref) {
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$u();
+  var classes = useStyles$r();
   var sliderClasses = sliderStyles();
-  var containerClass = useTooltipContainerStyles(isEnabled);
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9177,22 +9087,8 @@ var OpacitySelect = function OpacitySelect(_ref) {
       tooltipOpen = _React$useState4[0],
       setTooltipOpen = _React$useState4[1];
 
-  var preventDefault = function preventDefault(event) {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  var enableScroll = React.useCallback(function () {
-    document.removeEventListener('wheel', preventDefault, false);
-  }, []);
-  var disableScroll = React.useCallback(function () {
-    document.addEventListener('wheel', preventDefault, {
-      passive: false
-    });
-  }, []);
   var onWheel = React.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 = Math.min(Math.max(currentOpacity - direction, 0), 1); // Kind of "one frame debouncer", meant to dampen too fast slider movement
@@ -9200,8 +9096,8 @@ var OpacitySelect = function OpacitySelect(_ref) {
       window.requestAnimationFrame(function () {
         onLayerChangeOpacity(newValue);
       });
-    } else enableScroll();
-  }, [currentOpacity, onLayerChangeOpacity, disableScroll, enableScroll]);
+    }
+  }, [currentOpacity, onLayerChangeOpacity]);
   var onClickButton = React.useCallback(function () {
     setOpen(!open);
   }, [open]);
@@ -9214,23 +9110,21 @@ var OpacitySelect = function OpacitySelect(_ref) {
     if (!open) setTooltipOpen(true);
   }, [open]);
   var onMouseLeave = React.useCallback(function () {
-    enableScroll();
     setTooltipOpen(false);
-  }, [enableScroll]);
+  }, []);
   var onFocus = React.useCallback(function () {
     setTooltipOpen(true);
   }, []);
   var onBlur = React.useCallback(function () {
-    enableScroll();
     setTooltipOpen(false);
-  }, [enableScroll]);
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: classes.opacityDiv,
     onWheel: onWheel,
     "data-testid": "scrollOpacity"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltipTitle,
-    className: containerClass.textContainer,
+    sx: tooltipContainerStyles(isEnabled),
     placement: "top",
     open: tooltipOpen
   }, /*#__PURE__*/React.createElement(Button, {
@@ -9321,7 +9215,6 @@ var RenderStyles = function RenderStyles(_ref) {
       onChangeLayerStyle = _ref.onChangeLayerStyle,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useTooltipContainerStyles(isEnabled);
   var styles = [{
     title: 'default',
     name: 'default',
@@ -9356,7 +9249,7 @@ var RenderStyles = function RenderStyles(_ref) {
         'data-testid': 'selectStyle'
       }
     },
-    className: classes.textContainer,
+    isEnabled: isEnabled,
     value: currentStyle,
     list: list,
     currentIndex: currentIndex,
@@ -9391,7 +9284,7 @@ var RenderStyles = function RenderStyles(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$t = makeStyles(function (theme) {
+var useStyles$q = makeStyles(function (theme) {
   return createStyles({
     svgIcon: {
       fill: function fill(_ref) {
@@ -9420,7 +9313,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
       isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
       _ref2$isEnabled = _ref2.isEnabled,
       isEnabled = _ref2$isEnabled === void 0 ? true : _ref2$isEnabled;
-  var classes = useStyles$t({
+  var classes = useStyles$q({
     isActive: isActive,
     isEnabled: isEnabled
   });
@@ -9473,7 +9366,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$s = makeStyles(function (theme) {
+var useStyles$p = makeStyles(function (theme) {
   return createStyles({
     row: {
       background: function background(isEnabled) {
@@ -9526,7 +9419,7 @@ var LayerRow = function LayerRow(_ref) {
       layerActiveLayout = _ref.layerActiveLayout,
       layerManagerWidth = _ref.layerManagerWidth,
       dragHandle = _ref.dragHandle;
-  var classes = useStyles$s(isEnabled);
+  var classes = useStyles$p(isEnabled);
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
   var onClickRow = function onClickRow() {
@@ -10152,7 +10045,7 @@ var DragHandle = function DragHandle(_ref) {
   });
 };
 
-var useStyles$r = makeStyles(function () {
+var useStyles$o = makeStyles(function () {
   return {
     layerRows: {
       width: '100%',
@@ -10172,6 +10065,12 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
   var mapId = _ref.mapId,
       layerManagerWidth = _ref.layerManagerWidth;
   var dispatch = useDispatch();
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      keyPressed = _React$useState2[0],
+      setKeyPressed = _React$useState2[1];
+
   var layerIds = useSelector(function (store) {
     return getLayerIds(store, mapId);
   });
@@ -10187,10 +10086,10 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
     }));
   }, [dispatch]);
 
-  var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      activeDragIndex = _React$useState2[0],
-      setActiveDragIndex = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      activeDragIndex = _React$useState4[0],
+      setActiveDragIndex = _React$useState4[1];
 
   var onSetList = function onSetList() {}; // since we use activeDragIndex, we don't need inner state handling of ReactSortable
 
@@ -10219,7 +10118,43 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
 
   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.useEffect(function () {
+    window.addEventListener('keydown', keyPressedTrue);
+    window.addEventListener('keyup', keyPressedFalse);
+    return function () {
+      window.removeEventListener('keydown', keyPressedTrue);
+      window.removeEventListener('keyup', keyPressedFalse);
+    };
+  }, []);
+  var preventDefault = React.useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  React.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.createElement(Grid, {
     container: true,
     item: true,
@@ -10275,7 +10210,6 @@ var BaseLayers = function BaseLayers(_ref) {
   var selectedBaseLayers = _ref.selectedBaseLayers,
       availableBaseLayers = _ref.availableBaseLayers,
       onChangeBaseLayers = _ref.onChangeBaseLayers;
-  var classes = useTooltipContainerStyles();
 
   if (!availableBaseLayers || !availableBaseLayers.length) {
     return /*#__PURE__*/React.createElement("div", null, "No service available");
@@ -10305,7 +10239,7 @@ var BaseLayers = function BaseLayers(_ref) {
     style: {
       maxWidth: '100%'
     },
-    className: classes.textContainer,
+    isEnabled: true,
     value: selectedBaseLayerId,
     list: list,
     currentIndex: currentIndex,
@@ -10429,7 +10363,7 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$q = makeStyles({
+var useStyles$n = makeStyles({
   layerRow: {
     width: '100%',
     height: '36px'
@@ -10452,7 +10386,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  var classes = useStyles$q();
+  var classes = useStyles$n();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -10481,7 +10415,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
   })));
 };
 
-var useStyles$p = makeStyles({
+var styles$1 = {
   layerRowContainer: {
     position: 'relative',
     width: '100%',
@@ -10495,7 +10429,7 @@ var useStyles$p = makeStyles({
     width: '100%',
     boxSizing: 'border-box'
   }
-});
+};
 
 var LayerManager = function LayerManager(_ref) {
   var mapId = _ref.mapId,
@@ -10515,8 +10449,9 @@ var LayerManager = function LayerManager(_ref) {
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect,
       _ref$showAddLayersToo = _ref.showAddLayersTooltip,
-      showAddLayersTooltip = _ref$showAddLayersToo === void 0 ? true : _ref$showAddLayersToo;
-  var classes = useStyles$p();
+      showAddLayersTooltip = _ref$showAddLayersToo === void 0 ? true : _ref$showAddLayersToo,
+      _ref$leftComponent = _ref.leftComponent,
+      leftComponent = _ref$leftComponent === void 0 ? null : _ref$leftComponent;
 
   var _React$useState = React.useState(LayerManagerWidth.lg),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -10548,13 +10483,14 @@ var LayerManager = function LayerManager(_ref) {
     "data-testid": "layerManagerWindow",
     onMouseDown: onMouseDown,
     order: order,
-    source: source
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.layerManagerContainer
+    source: source,
+    leftComponent: leftComponent
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles$1.layerManagerContainer
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     "data-testid": "layerManagerRowContainer",
-    className: classes.layerRowContainer
+    sx: styles$1.layerRowContainer
   }, /*#__PURE__*/React.createElement(DescriptionRow, {
     mapId: mapId,
     tooltip: showAddLayersTooltip ? 'Add Layers' : '',
@@ -10920,10 +10856,10 @@ var ServicePopup = function ServicePopup(_ref) {
                 }
 
                 serviceSetLayers({
-                  id: serviceUrl,
                   name: serviceName,
-                  service: serviceUrl,
-                  layers: serviceLayers
+                  serviceUrl: serviceUrl,
+                  layers: serviceLayers,
+                  isUserAddedService: true
                 });
                 setIsLoading(false);
                 closePopupAndResetState();
@@ -11306,6 +11242,65 @@ var SearchFieldConnect = function SearchFieldConnect() {
   });
 };
 
+/* *
+ * 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 ".concat(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.
@@ -11363,78 +11358,104 @@ var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var 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 useStyles$o = makeStyles(function (theme) {
-  return {
-    layerRow: {
-      background: theme.palette.geowebColors.cards.cardContainer,
-      padding: '8px 0px 8px 12px',
+var LayerListRow = function LayerListRow(_ref) {
+  var layer = _ref.layer,
+      layerIndex = _ref.layerIndex,
+      serviceId = _ref.serviceId,
+      addLayer = _ref.addLayer,
+      deleteLayer = _ref.deleteLayer,
+      mapLayers = _ref.mapLayers;
+  return /*#__PURE__*/React__default.createElement(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 ".concat(theme.palette.geowebColors.cards.cardContainerBorder),
-      display: 'grid',
-      gridTemplateColumns: '1fr 0.1fr',
-      gridGap: '20px'
-    },
-    layerText: {
+      border: 'solid 1px',
+      borderColor: 'geowebColors.cards.cardContainerBorder'
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 10
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
       fontSize: '12px',
+      height: '24px',
+      lineHeight: '24px',
       fontWeight: 500,
-      overflow: 'clip',
-      height: '20px',
-      textOverflow: 'ellipsis'
-    },
-    layerName: {
+      WebkitLineClamp: 1,
+      display: '-webkit-box',
+      WebkitBoxOrient: 'vertical',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden'
+    }
+  }, layer.text)), /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 4
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
       fontSize: '12px',
       height: '24px',
-      overflow: 'clip',
-      "float": 'left',
-      paddingTop: '6px',
-      whiteSpace: 'nowrap'
-    },
-    layerNameMaxWidth: {
-      maxWidth: '270px'
-    },
-    layerAbstract: {
+      lineHeight: '24px',
+      WebkitLineClamp: 1,
+      display: '-webkit-box',
+      WebkitBoxOrient: 'vertical',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden'
+    }
+  }, layer.name)), layer["abstract"] ? /*#__PURE__*/React__default.createElement(Grid, {
+    "data-testid": "layerAbstract",
+    container: true,
+    item: true,
+    xs: 8,
+    sx: {
       fontSize: '10px',
-      paddingLeft: '200px',
-      overflow: 'clip',
-      height: '30px'
-    },
-    resultCount: {
-      marginBottom: '4px',
-      fontSize: '12px'
-    },
-    layerButton: {
+      height: '30px',
+      paddingLeft: '20px',
+      WebkitLineClamp: 2,
+      display: '-webkit-box',
+      WebkitBoxOrient: 'vertical',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden'
+    }
+  }, layer["abstract"]) : null), /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 2,
+    justifyContent: "flex-end",
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      width: '80px',
+      height: '48px',
       marginRight: '8px',
-      marginTop: '4px',
-      width: '80px'
+      paddingTop: '4px'
     }
-  };
-});
+  }, /*#__PURE__*/React__default.createElement(LayerAddRemoveButton, {
+    layer: layer,
+    layerIndex: layerIndex,
+    serviceId: serviceId,
+    addLayer: addLayer,
+    deleteLayer: deleteLayer,
+    mapLayers: mapLayers
+  }))));
+};
 
 var LayerList = function LayerList(_ref) {
   var services = _ref.services,
@@ -11446,7 +11467,6 @@ var LayerList = function LayerList(_ref) {
       mapLayers = _ref.mapLayers,
       keywordIds = _ref.keywordIds,
       allKeywordsActive = _ref.allKeywordsActive;
-  var classes = useStyles$o();
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -11458,42 +11478,29 @@ var LayerList = function LayerList(_ref) {
       return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).length;
     }, 0));
   }, [serviceIds, keywordIds, services, searchString, allKeywordsActive]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "layerList"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.resultCount
-  }, numberOfLayers, " results"), /*#__PURE__*/React.createElement("div", {
-    style: {
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      marginBottom: '4px',
+      fontSize: '12px'
+    }
+  }, numberOfLayers, " results"), /*#__PURE__*/React.createElement(Box, {
+    sx: {
       height: layerSelectHeight - 199,
       overflow: 'auto'
     }
   }, serviceIds.map(function (serviceId) {
     return filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer, layerIndex) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: "".concat(serviceId, "-").concat(layer.name, "-").concat(layer.text)
-      }, /*#__PURE__*/React.createElement("div", {
-        key: "".concat(serviceId, "-").concat(layer.name),
-        className: classes.layerRow,
-        "data-testid": "layerListLayerRow"
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: classes.layerText
-      }, layer.text), /*#__PURE__*/React.createElement("div", null, layer["abstract"] ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(classes.layerName, " ").concat(classes.layerNameMaxWidth)
-      }, layer.name), /*#__PURE__*/React.createElement("div", {
-        className: classes.layerAbstract,
-        "data-testid": "layerAbstract"
-      }, layer["abstract"])) : /*#__PURE__*/React.createElement("div", {
-        className: classes.layerName
-      }, layer.name))), /*#__PURE__*/React.createElement("div", {
-        className: classes.layerButton
-      }, /*#__PURE__*/React.createElement(LayerAddRemoveButton, {
+      return /*#__PURE__*/React.createElement(LayerListRow, {
+        key: layer.name,
         layer: layer,
         layerIndex: layerIndex,
         serviceId: serviceId,
         addLayer: addLayer,
         deleteLayer: deleteLayer,
         mapLayers: mapLayers
-      }))));
+      });
     });
   })));
 };
@@ -11627,10 +11634,10 @@ var ServiceChip = function ServiceChip(_ref) {
     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');
@@ -11701,7 +11708,7 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
   });
 };
 
-var useStyles$n = makeStyles(function (theme) {
+var useStyles$m = makeStyles(function (theme) {
   return createStyles({
     serviceChips: {
       width: '100%',
@@ -11725,7 +11732,7 @@ var useStyles$n = makeStyles(function (theme) {
       fontSize: '0.875rem'
     },
     scrollArrowLeft: {
-      width: '120px',
+      width: '100px',
       marginBottom: '-12px',
       height: '34px',
       backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), ".concat(theme.palette.geowebColors.background.surfaceApp, " 51%)"),
@@ -11733,7 +11740,10 @@ var useStyles$n = makeStyles(function (theme) {
       marginRight: '-120px',
       "float": 'left',
       zIndex: 1,
-      position: 'relative'
+      position: 'relative',
+      '&:hover': {
+        color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+      }
     },
     serviceList: {
       height: '32px',
@@ -11742,13 +11752,16 @@ var useStyles$n = makeStyles(function (theme) {
       overflow: 'hidden'
     },
     scrollArrowRight: {
-      width: '120px',
+      width: '100px',
       marginBottom: '-12px',
       height: '34px',
       backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), ".concat(theme.palette.geowebColors.background.surfaceApp, " 51%)"),
       right: '0px',
       position: 'fixed',
-      cursor: 'pointer'
+      cursor: 'pointer',
+      '&:hover': {
+        color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+      }
     }
   });
 });
@@ -11776,7 +11789,7 @@ var ServiceList = function ServiceList(_ref4) {
   var ref = React.useRef(null);
   var scrollSpeed = 5;
   var maxWidthValue = ref && ref.current && ref.current.scrollWidth && ref.current.scrollWidth >= layerSelectWidth - margin && ref.current.scrollWidth || layerSelectWidth - 50;
-  var classes = useStyles$n({
+  var classes = useStyles$m({
     margin: margin,
     maxWidthValue: maxWidthValue
   });
@@ -11842,13 +11855,14 @@ var ServiceList = function ServiceList(_ref4) {
     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.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.createElement(ChevronRight, {
     className: classes.scrollArrowRight,
@@ -11890,63 +11904,49 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
   });
 };
 
-var useStyles$m = makeStyles(function (theme) {
-  return createStyles({
-    servicesContainer: {
-      width: '300px',
-      maxHeight: '380px',
-      top: '140px',
-      backgroundColor: theme.palette.geowebColors.background.surface,
-      boxShadow: theme.shadows[6],
-      overflow: 'auto'
-    },
-    header: {
-      position: 'sticky',
-      top: 0,
-      fontSize: theme.typography.fontSize,
-      padding: '12px',
-      backgroundColor: theme.palette.geowebColors.background.surface,
-      zIndex: 100
-    },
-    footer: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      position: 'sticky',
-      bottom: 0,
-      backgroundColor: theme.palette.geowebColors.background.surface,
-      zIndex: 100
-    },
-    iconFill: {
-      color: theme.palette.geowebColors.typographyAndIcons.icon
-    },
-    button: {
-      margin: '16px',
-      width: '80%',
-      fontSize: '12px',
-      textTransform: 'none'
-    },
-    text: {
-      paddingTop: '3px',
-      fontSize: '12px',
-      fontFamily: theme.typography.fontFamily,
-      fontWeight: theme.typography.fontWeightRegular,
-      textTransform: 'none',
-      color: '#575f7a'
-    },
-    icon: {
-      width: '24px',
-      height: '24px'
-    }
-  });
-});
+var styles = {
+  servicesContainer: {
+    width: '300px',
+    maxHeight: '380px',
+    top: '140px',
+    backgroundColor: 'geowebColors.background.surface',
+    boxShadow: 6,
+    overflow: 'auto'
+  },
+  header: {
+    position: 'sticky',
+    top: 0,
+    fontSize: 'default',
+    padding: '12px',
+    backgroundColor: 'geowebColors.background.surface',
+    zIndex: 100
+  },
+  footer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'sticky',
+    bottom: 0,
+    backgroundColor: 'geowebColors.background.surface',
+    zIndex: 100
+  },
+  button: {
+    margin: '16px',
+    width: '80%',
+    fontSize: '12px',
+    textTransform: 'none'
+  },
+  icon: {
+    width: '24px',
+    height: '24px'
+  }
+};
 
 var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   var services = _ref.services,
       mapStoreRemoveService = _ref.mapStoreRemoveService,
       _ref$layers = _ref.layers,
       layers = _ref$layers === void 0 ? [] : _ref$layers;
-  var classes = useStyles$m();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -11970,11 +11970,11 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    className: classes.servicesContainer,
+    sx: styles.servicesContainer,
     "data-testid": "ServiceDialog"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.header
-  }, " Services"), /*#__PURE__*/React.createElement(List, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles.header
+  }, "Services"), /*#__PURE__*/React.createElement(List, {
     disablePadding: true
   }, services.map(function (service) {
     return /*#__PURE__*/React.createElement(ListItem, {
@@ -11996,36 +11996,34 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     }, /*#__PURE__*/React.createElement(Tooltip, {
       title: "Edit Service"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
-      disabled: isDisabled(service.service),
+      disabled: isDisabled(service.serviceUrl),
       "data-testid": "openEditServiceButton",
       size: "large"
     }, /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
       d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z",
-      fill: classes.iconFill,
       fillRule: "evenodd"
     })))))), /*#__PURE__*/React.createElement(Tooltip, {
       title: "Delete Service"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(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.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
       d: "M17.504 8.228c.588 0 1.027.48.973 1.066l-.876 9.64A1.197 1.197 0 0 1 16.434 20H8.41c-.59 0-1.115-.48-1.167-1.066l-.877-9.64a.962.962 0 0 1 .973-1.066zm-2.115 1.228a.82.82 0 0 0-.819.82v7.674a.818.818 0 0 0 1.638 0v-7.675a.819.819 0 0 0-.819-.819zm-2.968 0a.819.819 0 0 0-.819.82v7.674a.818.818 0 1 0 1.638 0v-7.675a.82.82 0 0 0-.82-.819zm-2.968 0a.819.819 0 0 0-.818.82v7.674a.818.818 0 1 0 1.637 0v-7.675a.82.82 0 0 0-.82-.819zM13.432 4c.21 0 .404.168.436.376l.107.758 3.256-.01a1.606 1.606 0 0 1 1.61 1.6l.001.535-12.841.038L6 6.76a1.605 1.605 0 0 1 1.6-1.61l3.262-.008.103-.758a.454.454 0 0 1 .434-.38z",
-      fill: classes.iconFill,
       fillRule: "evenodd"
     }))))))));
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classes.footer
+  })), /*#__PURE__*/React.createElement(Box, {
+    sx: styles.footer
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: openAddService,
     "data-testid": "openAddServiceButton",
-    className: classes.button,
+    sx: styles.button,
     variant: "tertiary",
     startIcon: /*#__PURE__*/React.createElement(SvgIcon, {
-      className: classes.icon
+      sx: styles.icon
     }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
       d: "M13.647 13.647h6.82a1.276 1.276 0 1 0 0-2.552h-6.82v-6.82a1.276 1.276 0 1 0-2.552 0v6.82h-6.82a1.276 1.276 0 1 0 0 2.552h6.82v6.82a1.274 1.274 0 0 0 1.276 1.275c.705 0 1.276-.571 1.276-1.276v-6.82z",
       fillRule: "evenodd"
@@ -12695,14 +12693,14 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
   }, [dispatch]);
   React.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 () {
@@ -12760,7 +12758,9 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
       _ref$showTitle = _ref.showTitle,
       showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle,
       _ref$layerSelect = _ref.layerSelect,
-      layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
+      layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect,
+      _ref$leftComponent = _ref.leftComponent,
+      leftComponent = _ref$leftComponent === void 0 ? null : _ref$leftComponent;
   var dispatch = useDispatch();
   var isOpenInStore = useSelector(function (store) {
     return getisDialogOpen(store, 'layerManager');
@@ -12829,8 +12829,11 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
     onMouseDown: onOrderDialog,
     order: uiOrder,
     source: uiSource,
-    layerSelect: layerSelect
-  }), layerSelect && /*#__PURE__*/React.createElement(LayerSelectConnect, null));
+    layerSelect: layerSelect,
+    leftComponent: leftComponent
+  }), layerSelect && /*#__PURE__*/React.createElement(LayerSelectConnect, {
+    preloadedServices: preloadedMapServices
+  }));
 };
 
 /* *
@@ -13800,60 +13803,6 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
   }, "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(_ref) {
-  var _ref$isLooping = _ref.isLooping,
-      isLooping = _ref$isLooping === void 0 ? true : _ref$isLooping,
-      _ref$isDisabled = _ref.isDisabled,
-      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      _ref$onToggleLoop = _ref.onToggleLoop,
-      onToggleLoop = _ref$onToggleLoop === void 0 ? function () {
-    return null;
-  } : _ref$onToggleLoop;
-  var loopButtonPath = isLooping ? svgLoopOffPath : svgLoopPath;
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: loopButtonPath.title
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
-    onClick: function onClick() {
-      return onToggleLoop();
-    },
-    active: isLooping,
-    disabled: isDisabled,
-    "data-testid": "loopButton"
-  }, /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
-    width: 24,
-    height: 24,
-    fill: "transparent"
-  }), /*#__PURE__*/React.createElement("path", {
-    "data-testid": isLooping ? 'loop-off-svg-path' : 'loop-svg-path',
-    d: loopButtonPath.src
-  })))));
-};
-
 var useStyles$g = makeStyles(function (theme) {
   return {
     speedButtonDiv: {
@@ -14281,7 +14230,6 @@ var OptionsPopOver = withStyles(function (theme) {
 
 var OptionsMenuButton = function OptionsMenuButton(_ref) {
   var autoUpdateBtn = _ref.autoUpdateBtn,
-      loopBtn = _ref.loopBtn,
       speedBtn = _ref.speedBtn,
       timeStepBtn = _ref.timeStepBtn;
 
@@ -14345,9 +14293,6 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: "auto"
-  }, loopBtn || /*#__PURE__*/React.createElement(LoopButton, null)), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: "auto"
   }, autoUpdateBtn || /*#__PURE__*/React.createElement(AutoUpdateButton, null)))));
 };
 
@@ -14436,7 +14381,6 @@ var useStyles$e = makeStyles({
 
 var TimeSliderButtons = function TimeSliderButtons(_ref) {
   var autoUpdateBtn = _ref.autoUpdateBtn,
-      loopBtn = _ref.loopBtn,
       optionsMenuBtn = _ref.optionsMenuBtn,
       playBtn = _ref.playBtn,
       speedBtn = _ref.speedBtn,
@@ -14447,7 +14391,7 @@ var TimeSliderButtons = function TimeSliderButtons(_ref) {
     "data-testid": "timeSliderButtons"
   }, matches ? /*#__PURE__*/React.createElement(Grid, {
     container: true,
-    spacing: 1,
+    spacing: 2,
     className: classes.buttonContainerBig
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true
@@ -14465,8 +14409,6 @@ var TimeSliderButtons = function TimeSliderButtons(_ref) {
     }
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true
-  }, loopBtn || /*#__PURE__*/React.createElement(LoopButton, null)), /*#__PURE__*/React.createElement(Grid, {
-    item: true
   }, autoUpdateBtn || /*#__PURE__*/React.createElement(AutoUpdateButton, null)), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, playBtn || /*#__PURE__*/React.createElement(PlayButton, null))) : /*#__PURE__*/React.createElement(Grid, {
@@ -16547,14 +16489,14 @@ var TimeSlider = function TimeSlider(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var connectRedux$6 = connect(function (store, props) {
+var connectRedux$5 = connect(function (store, props) {
   return {
     isAutoUpdating: isAutoUpdating(store, props.mapId)
   };
 }, {
   toggleAutoUpdate: toggleAutoUpdate
 });
-var AutoUpdateButtonConnectComponent = connectRedux$6(function (_ref) {
+var AutoUpdateButtonConnectComponent = connectRedux$5(function (_ref) {
   var mapId = _ref.mapId,
       isAutoUpdating = _ref.isAutoUpdating,
       toggleAutoUpdate = _ref.toggleAutoUpdate;
@@ -16572,54 +16514,7 @@ var AutoUpdateButtonConnectComponent = connectRedux$6(function (_ref) {
     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 = connect(function (store, props) {
-  return {
-    isLooping: isLooping(store, props.mapId)
-  };
-}, {
-  mapToggleLoop: toggleLoop
-});
-var LoopButtonConnect = connectRedux$5(function (_ref) {
-  var mapId = _ref.mapId,
-      _ref$isLooping = _ref.isLooping,
-      isLooping = _ref$isLooping === void 0 ? true : _ref$isLooping,
-      _ref$isDisabled = _ref.isDisabled,
-      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      mapToggleLoop = _ref.mapToggleLoop;
-
-  var onMapToggleLoop = function onMapToggleLoop() {
-    mapToggleLoop({
-      mapId: mapId,
-      shouldLoop: !isLooping
-    });
-  };
-
-  return /*#__PURE__*/React__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");
@@ -16750,9 +16645,6 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
     autoUpdateBtn: /*#__PURE__*/React.createElement(AutoUpdateButtonConnect, {
       mapId: mapId
     }),
-    loopBtn: /*#__PURE__*/React.createElement(LoopButtonConnect, {
-      mapId: mapId
-    }),
     speedBtn: /*#__PURE__*/React.createElement(SpeedButtonConnect, {
       mapId: mapId
     }),
@@ -16856,9 +16748,6 @@ var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_ref) {
     autoUpdateBtn: /*#__PURE__*/React.createElement(AutoUpdateButtonConnect, {
       mapId: mapId
     }),
-    loopBtn: /*#__PURE__*/React.createElement(LoopButtonConnect, {
-      mapId: mapId
-    }),
     optionsMenuBtn: /*#__PURE__*/React.createElement(OptionsMenuButtonConnect, {
       mapId: mapId
     }),
@@ -18239,6 +18128,172 @@ var tileRenderSettings = {
   }
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * */
+/* Function which calculates the distance between two points */
+// eslint-disable-next-line class-methods-use-this
+
+var distance = function distance(a, b) {
+  return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y));
+};
+
+var checkHoverVertice = function checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords) {
+  var maxDistance = 20;
+
+  if (feature.geometry.type === 'Point') {
+    var featureCoords = feature.geometry.coordinates;
+    /* Get all vertexes */
+
+    var XYCoords = convertGeoCoordsToScreenCoords([featureCoords]);
+
+    if (XYCoords.length > 0 && distance(XYCoords[0], {
+      x: mouseX,
+      y: mouseY
+    }) < maxDistance) {
+      return {
+        coordinateIndexInFeature: 0
+      };
+    }
+  }
+
+  if (feature.geometry.type === 'MultiPoint') {
+    for (var polygonIndex = feature.geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
+      var _featureCoords = feature.geometry.coordinates[polygonIndex];
+
+      if (_featureCoords === undefined) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+      /* Get all vertexes */
+
+
+      var _XYCoords = convertGeoCoordsToScreenCoords([_featureCoords]);
+
+      if (_XYCoords.length > 0 && distance(_XYCoords[0], {
+        x: mouseX,
+        y: mouseY
+      }) < maxDistance) {
+        return {
+          coordinateIndexInFeature: polygonIndex
+        };
+      }
+    }
+  }
+
+  if (feature.geometry.type === 'Polygon') {
+    var point = [mouseX, mouseY];
+
+    for (var _polygonIndex = feature.geometry.coordinates.length - 1; _polygonIndex >= 0; _polygonIndex -= 1) {
+      var _featureCoords2 = feature.geometry.coordinates[_polygonIndex];
+
+      if (_featureCoords2 === undefined) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+      /* Get all vertexes */
+
+
+      var poly = [convertGeoCoordsToScreenCoords(_featureCoords2).map(function (coord) {
+        return [coord.x, coord.y];
+      })];
+
+      try {
+        var isPointInPoly = turf.booleanPointInPolygon(turf.point(point), turf.polygon(poly));
+
+        if (isPointInPoly) {
+          return {
+            coordinateIndexInFeature: _polygonIndex
+          };
+        } // eslint-disable-next-line no-empty
+
+      } catch (e) {}
+    }
+  }
+
+  if (feature.geometry.type === 'MultiPolygon') {
+    var _point = [mouseX, mouseY];
+
+    for (var _polygonIndex2 = feature.geometry.coordinates.length - 1; _polygonIndex2 >= 0; _polygonIndex2 -= 1) {
+      var _featureCoords3 = feature.geometry.coordinates[_polygonIndex2][0];
+
+      if (_featureCoords3 === undefined) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
+      var _poly = [convertGeoCoordsToScreenCoords(_featureCoords3).map(function (coord) {
+        return [coord.x, coord.y];
+      })];
+
+      try {
+        var _isPointInPoly = turf.booleanPointInPolygon(turf.point(_point), turf.polygon(_poly));
+
+        if (_isPointInPoly) {
+          return {
+            coordinateIndexInFeature: _polygonIndex2
+          };
+        } // eslint-disable-next-line no-empty
+
+      } catch (e) {}
+    }
+  }
+
+  if (feature.geometry.type === 'LineString') {
+    var _featureCoords4 = feature.geometry.coordinates;
+    /* Get all vertexes */
+
+    var _XYCoords2 = convertGeoCoordsToScreenCoords(_featureCoords4);
+    /* Snap to the vertex closer than specified pixels */
+
+
+    for (var j = 0; j < _XYCoords2.length; j += 1) {
+      var coord = _XYCoords2[j];
+
+      if (distance(coord, {
+        x: mouseX,
+        y: mouseY
+      }) < maxDistance) {
+        return {
+          coordinateIndexInFeature: j
+        };
+      }
+    }
+  }
+
+  return null;
+};
+
+var checkHoverFeatures = function checkHoverFeatures(geojson, mouseX, mouseY, convertGeoCoordsToScreenCoords) {
+  for (var j = 0; j < geojson.features.length; j += 1) {
+    var feature = geojson.features[j];
+    var hoverResult = checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords);
+
+    if (hoverResult != null) {
+      return {
+        coordinateIndexInFeature: hoverResult.coordinateIndexInFeature,
+        featureIndex: j,
+        feature: feature
+      };
+    }
+  }
+
+  return null;
+};
+
 var Proj4js = proj4; // Cache for for storing and reusing Proj4 instances
 
 var projectorCache = {}; // Ensure that you have a Proj4 object, pulling from the cache if necessary
@@ -18850,9 +18905,12 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "adagucMouseMove",
     value: function adagucMouseMove(event) {
+      var _this2 = this;
+
       var _this$props2 = this.props,
           isInEditMode = _this$props2.isInEditMode,
-          featureNrToEdit = _this$props2.featureNrToEdit;
+          featureNrToEdit = _this$props2.featureNrToEdit,
+          onHoverFeature = _this$props2.onHoverFeature;
       if (event && event.rightButton === true) return;
       /* adagucMouseMove is an event callback function which is triggered when the mouse moves over the map
         This event is only triggered if the map is in hover state.
@@ -18865,6 +18923,29 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       this.mouseX = mouseX;
       this.mouseY = mouseY;
 
+      if (onHoverFeature) {
+        var handleMouseStoppedTimer = function handleMouseStoppedTimer() {
+          var result = checkHoverFeatures(_this2.geojson, mouseX, mouseY, function (coordinates) {
+            return _this2.convertGeoCoordsToScreenCoords(coordinates);
+          });
+
+          if (result) {
+            var featureEvent = {
+              coordinateIndexInFeature: result.coordinateIndexInFeature,
+              featureIndex: result.featureIndex,
+              mouseX: mouseX,
+              mouseY: mouseY,
+              isInEditMode: isInEditMode,
+              feature: result.feature
+            };
+            onHoverFeature(featureEvent);
+          }
+        };
+
+        window.clearTimeout(this.mouseStoppedTimer);
+        this.mouseStoppedTimer = window.setTimeout(handleMouseStoppedTimer, 20);
+      }
+
       if (isInEditMode === false) {
         return;
       }
@@ -18942,14 +19023,14 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "triggerMouseDownTimer",
     value: function triggerMouseDownTimer(event) {
-      var _this2 = this;
+      var _this3 = this;
 
       if (!this.doubleClickTimer) this.doubleClickTimer = {};
       var mouseX = event.mouseX,
           mouseY = event.mouseY;
 
       var checkTimeOut = function checkTimeOut() {
-        _this2.doubleClickTimer.isRunning = false;
+        _this3.doubleClickTimer.isRunning = false;
       };
       /* Reset the timer */
 
@@ -19384,9 +19465,35 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "adagucMouseUp",
     value: function adagucMouseUp(event) {
-      var isInEditMode = this.props.isInEditMode;
+      var _this4 = this;
+
+      var _this$props10 = this.props,
+          isInEditMode = _this$props10.isInEditMode,
+          onClickFeature = _this$props10.onClickFeature;
       if (event && event.rightButton === true) return;
 
+      if (onClickFeature) {
+        var mouseX = event.mouseX,
+            mouseY = event.mouseY;
+        var result = checkHoverFeatures(this.geojson, mouseX, mouseY, function (coordinates) {
+          return _this4.convertGeoCoordsToScreenCoords(coordinates);
+        });
+
+        if (result) {
+          var featureEvent = {
+            coordinateIndexInFeature: result.coordinateIndexInFeature,
+            featureIndex: result.featureIndex,
+            mouseX: mouseX,
+            mouseY: mouseY,
+            isInEditMode: isInEditMode,
+            feature: result.feature
+          };
+          onClickFeature(featureEvent);
+        } else {
+          onClickFeature(null);
+        }
+      }
+
       if (isInEditMode === false) {
         return;
       }
@@ -19420,9 +19527,9 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "cancelEdit",
     value: function cancelEdit(cancelLastPoint) {
-      var _this$props10 = this.props,
-          isInEditMode = _this$props10.isInEditMode,
-          featureNrToEdit = _this$props10.featureNrToEdit;
+      var _this$props11 = this.props,
+          isInEditMode = _this$props11.isInEditMode,
+          featureNrToEdit = _this$props11.featureNrToEdit;
 
       if (isInEditMode === false) {
         return;
@@ -19595,14 +19702,14 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
        just before adagucviewer will flip the back canvas buffer to the front.
        You are free to draw anything you like on the canvas.
       */
-      var _this$props11 = this.props,
-          featureNrToEdit = _this$props11.featureNrToEdit,
-          isInEditMode = _this$props11.isInEditMode,
-          hoverFeatureCallback = _this$props11.hoverFeatureCallback;
+      var _this$props12 = this.props,
+          featureNrToEdit = _this$props12.featureNrToEdit,
+          isInEditMode = _this$props12.isInEditMode;
       if (!this.geojson || !this.geojson.features || !this.geojson.features.length) return;
       this.textPositions = [];
       this.mouseOverPolygonCoordinates = [];
       this.mouseOverPolygonFeatureIndex = -1;
+      this.mouseOverPolygonIndex = -1;
       /* Current selected feature from GeoJSON */
 
       for (var featureIndex = 0; featureIndex < this.geojson.features.length; featureIndex += 1) {
@@ -19795,19 +19902,6 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
           ctx.globalAlpha = 1;
           ctx.stroke();
         }
-      } // if (isInEditMode === true &&
-      //   this.mouseOverPolygonFeatureIndex === this.props.featureNrToEdit &&
-
-
-      if (hoverFeatureCallback) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        hoverFeatureCallback({
-          polygonIndex: this.mouseOverPolygonFeatureIndex,
-          featureIndex: this.mouseOverPolygonFeatureIndex,
-          mouseX: this.mouseX,
-          mouseY: this.mouseY
-        });
       }
       /* Draw labels */
 
@@ -20085,9 +20179,9 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "drawLine",
     value: function drawLine(ctx, XYCoords, featureIndex, lineStringIndex) {
-      var _this$props12 = this.props,
-          isInEditMode = _this$props12.isInEditMode,
-          featureNrToEdit = _this$props12.featureNrToEdit;
+      var _this$props13 = this.props,
+          isInEditMode = _this$props13.isInEditMode,
+          featureNrToEdit = _this$props13.featureNrToEdit;
       var feature = this.geojson.features[featureIndex];
       if (!feature || !feature.geometry) return;
       if (feature.geometry.type !== 'LineString') return;
@@ -20131,7 +20225,8 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       // if (test) {
 
       this.mouseOverPolygonCoordinates = 0;
-      this.mouseOverPolygonFeatureIndex = 0; // }
+      this.mouseOverPolygonFeatureIndex = 0;
+      this.mouseOverPolygonIndex = 0; // }
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
 
@@ -20160,9 +20255,9 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "drawPolygon",
     value: function drawPolygon(ctx, XYCoords, featureIndex, polygonIndex) {
-      var _this$props13 = this.props,
-          isInEditMode = _this$props13.isInEditMode,
-          featureNrToEdit = _this$props13.featureNrToEdit;
+      var _this$props14 = this.props,
+          isInEditMode = _this$props14.isInEditMode,
+          featureNrToEdit = _this$props14.featureNrToEdit;
       var feature = this.geojson.features[featureIndex];
       if (!feature || !feature.geometry) return;
       if (feature.geometry.type !== 'Polygon' && feature.geometry.type !== 'MultiPolygon') return;
@@ -20209,6 +20304,7 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       if (test) {
         this.mouseOverPolygonCoordinates = XYCoords;
         this.mouseOverPolygonFeatureIndex = featureIndex;
+        this.mouseOverPolygonIndex = polygonIndex;
       } // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
 
@@ -20363,9 +20459,9 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props14 = this.props,
-          webmapjs = _this$props14.webmapjs,
-          isInDeleteMode = _this$props14.isInDeleteMode;
+      var _this$props15 = this.props,
+          webmapjs = _this$props15.webmapjs,
+          isInDeleteMode = _this$props15.isInDeleteMode;
 
       if (this.disabled === undefined) {
         this.disabled = isInDeleteMode;
@@ -20430,9 +20526,14 @@ var AdagucMapDrawContainer = function AdagucMapDrawContainer(_ref) {
       isInDeleteMode: layer.isInDeleteMode,
       drawMode: layer.drawMode,
       webmapjs: webMapJS,
-      hoverFeatureCallback: function hoverFeatureCallback(hoverInfo) {
-        if (layer.hoverFeatureCallback) {
-          layer.hoverFeatureCallback(hoverInfo);
+      onHoverFeature: function onHoverFeature(hoverInfo) {
+        if (layer.onHoverFeature) {
+          layer.onHoverFeature(hoverInfo);
+        }
+      },
+      onClickFeature: function onClickFeature(hoverInfo) {
+        if (layer.onClickFeature) {
+          layer.onClickFeature(hoverInfo);
         }
       },
       updateGeojson: function updateGeojson(geojson) {
@@ -23303,4 +23404,55 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
   }, children)));
 };
 
-export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmRefTimePreset, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, TooltipSelect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultConfigurations, filterBaseLayers, filterBbox, filterDimensions, filterMapLayers, filterMapPresets, filterNonTimeDimensions, filterServices, filterSrs, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$6 as layerReducer, makeMapPreset, actions$3 as mapActions, constants as mapConstants, moduleConfig as mapModuleConfig, selectors$1 as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, testLayers, actions$2 as uiActions, uiModuleConfig, selectors as uiSelectors, types$1 as uiTypes, useStyles$3 as useStyles };
+/* *
+ * 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(_ref) {
+  var selectedFeatureProperties = _ref.selectedFeatureProperties;
+  return /*#__PURE__*/React__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.createElement("h1", {
+    "data-testid": "map-warning-properties-title"
+  }, selectedFeatureProperties.country), selectedFeatureProperties.details[0].event && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "Event: ", selectedFeatureProperties.details[0].event), selectedFeatureProperties.details[0].sent && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "Sent:", ' ', moment.utc(selectedFeatureProperties.details[0].sent).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].expires && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "Expires:", ' ', moment.utc(selectedFeatureProperties.details[0].expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].web && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "Web: ", selectedFeatureProperties.details[0].web), selectedFeatureProperties.details[0].sender && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "Sender: ", selectedFeatureProperties.details[0].sender), selectedFeatureProperties.details[0].identifier && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "Identifier: ", selectedFeatureProperties.details[0].identifier), selectedFeatureProperties.details[0].area && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "area: ", selectedFeatureProperties.details[0].area));
+};
+
+export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmRefTimePreset, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultConfigurations, filterBaseLayers, filterBbox, filterDimensions, filterMapLayers, filterMapPresets, filterNonTimeDimensions, filterServices, filterSrs, generateLayerId, generateMapId, generateServiceId, generateTimeSeriesId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$6 as layerReducer, makeMapPreset, actions$3 as mapActions, constants as mapConstants, moduleConfig as mapModuleConfig, selectors$1 as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, actions$2 as uiActions, uiModuleConfig, selectors as uiSelectors, types$1 as uiTypes, useStyles$3 as useStyles };