@opengeoweb/core 2.2.1 → 2.3.0

package/index.esm.js

@@ -1,16 +1,16 @@
 import { createSelector } from 'reselect';
 import moment from 'moment';
-import _, { isEqual, debounce } from 'lodash';
+import _, { isEqual, debounce, throttle } from 'lodash';
 import * as React from 'react';
 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, 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, Checkbox, SvgIcon, ListItemIcon, Menu, FormControl, ToggleButton, InputAdornment, ListItemSecondaryAction, Switch, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
+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, Checkbox, SvgIcon, FormControl, InputAdornment, ListItemSecondaryAction, ListItemIcon, Switch, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
-import { sliderStyles, CustomSlider, ToolContainerDraggable, useIsMounted } from '@opengeoweb/shared';
-import { Cached, Add, MoreVert, FileCopy, Delete, DragIndicator, Close, ChevronLeft, ChevronRight, Link, LinkOff, DeleteForever } from '@mui/icons-material';
+import { sliderStyles, CustomSlider, ToggleMenu, ToolContainerDraggable, ToolButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
+import { Cached, Add, Delete, DragIndicator, Close, ChevronLeft, ChevronRight, Link, LinkOff, MoreVert, DeleteForever } from '@mui/icons-material';
 import { Sortable, ReactSortable } from 'react-sortablejs';
 import createStyles from '@mui/styles/createStyles';
 import withStyles from '@mui/styles/withStyles';
@@ -59,6 +59,7 @@ var WEBMAP_SET_TIME_SLIDER_CENTER_TIME = 'WEBMAP_SET_TIME_SLIDER_CENTER_TIME';
 var WEBMAP_SET_TIME_SLIDER_SECONDS_PER_PX = 'WEBMAP_SET_TIME_SLIDER_SECONDS_PER_PX';
 var WEBMAP_SET_TIME_SLIDER_DATA_SCALE_TO_SECONDS_PER_PX = 'WEBMAP_SET_TIME_SLIDER_DATA_SCALE_TO_SECONDS_PER_PX';
 var WEBMAP_SET_PIN = 'WEBMAP_SET_PIN';
+var WEBMAP_DISABLE_PIN = 'WEBMAP_DISABLE_PIN';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -367,6 +368,19 @@ var setMapPinLocation = function setMapPinLocation(payload) {
     payload: payload
   };
 };
+/**
+ * Sets the diable map pin boolean
+ *
+ * Example: setMapPinLocation({ mapId: 'mapId1', diableMapPin: true })
+ * @param {object} payload object with mapId: string, diableMapPin: boolean
+ */
+
+var setDisableMapPin = function setDisableMapPin(payload) {
+  return {
+    type: WEBMAP_DISABLE_PIN,
+    payload: payload
+  };
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -743,6 +757,7 @@ var actions$3 = /*#__PURE__*/Object.freeze({
   setTimeSliderSecondsPerPx: setTimeSliderSecondsPerPx,
   setTimeSliderDataScaleToSecondsPerPx: setTimeSliderDataScaleToSecondsPerPx,
   setMapPinLocation: setMapPinLocation,
+  setDisableMapPin: setDisableMapPin,
   setLayers: setLayers,
   setBaseLayers: setBaseLayers,
   addBaseLayer: addBaseLayer,
@@ -2615,7 +2630,7 @@ var getAllUniqueDimensions = createSelector(getAllMapIds, function (store) {
 /**
  * Returns the mapPinLocation for the current map
  *
- * Example getAllUniqueDimensions(store);
+ * Example getPinLocation(store);
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
  * @returns {object} returnType: latitude and longitude of pin
@@ -2624,6 +2639,18 @@ var getAllUniqueDimensions = createSelector(getAllMapIds, function (store) {
 var getPinLocation = createSelector(getMapById, function (store) {
   return store ? store.mapPinLocation : undefined;
 }, selectorMemoizationOptions);
+/**
+ * Returns the disable map pin boolean for the current map
+ *
+ * Example getDisableMapPin(store);
+ * @param {object} store store: object - store object
+ * @param {string} mapId mapId: string - Id of the map
+ * @returns {boolean} returnType: boolean or undefined
+ */
+
+var getDisableMapPin = createSelector(getMapById, function (store) {
+  return store ? store.disableMapPin : undefined;
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2775,7 +2802,7 @@ var getServicesInArray = createSelector(servicesStore, function (store) {
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
 
-var selectors = /*#__PURE__*/Object.freeze({
+var selectors$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getMapById: getMapById,
   getAllMapIds: getAllMapIds,
@@ -2813,6 +2840,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getLayerByLayerIndex: getLayerByLayerIndex,
   getAllUniqueDimensions: getAllUniqueDimensions,
   getPinLocation: getPinLocation,
+  getDisableMapPin: getDisableMapPin,
   getLayerById: getLayerById,
   getLayersById: getLayersById,
   getLayersIds: getLayersIds,
@@ -2881,6 +2909,7 @@ var constants$1 = /*#__PURE__*/Object.freeze({
   WEBMAP_SET_TIME_SLIDER_SECONDS_PER_PX: WEBMAP_SET_TIME_SLIDER_SECONDS_PER_PX,
   WEBMAP_SET_TIME_SLIDER_DATA_SCALE_TO_SECONDS_PER_PX: WEBMAP_SET_TIME_SLIDER_DATA_SCALE_TO_SECONDS_PER_PX,
   WEBMAP_SET_PIN: WEBMAP_SET_PIN,
+  WEBMAP_DISABLE_PIN: WEBMAP_DISABLE_PIN,
   WEBMAP_LAYER_CHANGE_OPACITY: WEBMAP_LAYER_CHANGE_OPACITY,
   WEBMAP_LAYER_CHANGE_NAME: WEBMAP_LAYER_CHANGE_NAME,
   WEBMAP_LAYER_CHANGE_STYLE: WEBMAP_LAYER_CHANGE_STYLE,
@@ -3014,6 +3043,130 @@ var actions$2 = /*#__PURE__*/Object.freeze({
   orderDialog: orderDialog
 });
 
+/* *
+ * 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)
+ * */
+/**
+ * Gets the active map Id and wether a dialog is open or closed
+ *
+ * Example: getDialogDetailsByType(store, 'legend')
+ * @param {object} store store object from which the ui state wll be extracted
+ * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+ * @returns {array} [string, boolean] first element gives the active map id, second element whether the dialog is open
+ */
+
+var getDialogDetailsByType = function getDialogDetailsByType(store, dialogType) {
+  if (store && store.ui && store.ui.dialogs && store.ui.dialogs[dialogType]) {
+    return store.ui.dialogs[dialogType];
+  }
+
+  return null;
+};
+/**
+ * For a given ui component: gets wether the dialog is open or closed
+ *
+ * @param {object} store store object from which the ui state wll be extracted
+ * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+ * @returns {boolean} returnType: boolean
+ */
+
+var getisDialogOpen = createSelector(getDialogDetailsByType, function (details) {
+  if (details) {
+    return details.isOpen;
+  }
+
+  return false;
+});
+/**
+ *For a given ui component: gets the active map Id
+ *
+ * @param {object} store store object from which the ui state wll be extracted
+ * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+ * @returns {string} returnType: string - the active map id
+ */
+
+var getDialogMapId = createSelector(getDialogDetailsByType, function (details) {
+  if (details) {
+    return details.activeMapId;
+  }
+
+  return '';
+});
+/**
+ *For a given ui component: gets the order of visible dialog
+ *
+ * @param {object} store store object from which the ui state wll be extracted
+ * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
+ * @returns {number} the higher the order number the higher the zIndex
+ */
+
+var getDialogOrder = createSelector(function (store, dialogType) {
+  if (store && store.ui && store.ui.order) {
+    var order = store.ui.order;
+    var visibleOrder = order.filter(function (orderedDialogType) {
+      return store.ui.dialogs[orderedDialogType].isOpen;
+    });
+
+    if (!visibleOrder.includes(dialogType)) {
+      return 0;
+    }
+
+    return visibleOrder.length - visibleOrder.indexOf(dialogType);
+  }
+
+  return 0;
+}, function (order) {
+  return order;
+});
+/**
+ *For a given ui component: returns if ordered on top
+ *
+ * @param {object} store store object from which the ui state wll be extracted
+ * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
+ * @returns {boolean}
+ */
+
+var getDialogIsOrderedOnTop = createSelector(function (store, dialogType) {
+  if (store && store.ui && store.ui.order) {
+    var order = store.ui.order;
+    return order.includes(dialogType) && order.indexOf(dialogType) === 0;
+  }
+
+  return false;
+}, function (isOrderedOnTop) {
+  return isOrderedOnTop;
+});
+var getDialogSource = createSelector(getDialogDetailsByType, function (details) {
+  if (details && details.source) {
+    return details.source;
+  }
+
+  return 'app';
+});
+
+var selectors = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  getDialogDetailsByType: getDialogDetailsByType,
+  getisDialogOpen: getisDialogOpen,
+  getDialogMapId: getDialogMapId,
+  getDialogOrder: getDialogOrder,
+  getDialogIsOrderedOnTop: getDialogIsOrderedOnTop,
+  getDialogSource: getDialogSource
+});
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -5177,7 +5330,7 @@ var synchronizationGroupConfig = {
   sagas: [rootSaga$4, rootSaga$3]
 };
 
-var useStyles$I = makeStyles(function (theme) {
+var useStyles$B = makeStyles(function (theme) {
   return {
     select: {
       '& ul': {
@@ -5220,7 +5373,9 @@ var TooltipSelect = function TooltipSelect(_a) {
       currentIndex = _a$currentIndex === void 0 ? -1 : _a$currentIndex,
       _a$onChangeMouseWheel = _a.onChangeMouseWheel,
       onChangeMouseWheel = _a$onChangeMouseWheel === void 0 ? function () {} : _a$onChangeMouseWheel,
-      props = __rest(_a, ["tooltip", "list", "currentIndex", "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"]);
@@ -5235,7 +5390,7 @@ var TooltipSelect = function TooltipSelect(_a) {
       tooltipOpen = _React$useState4[0],
       setTooltipOpen = _React$useState4[1];
 
-  var classes = useStyles$I();
+  var classes = useStyles$B();
 
   var preventDefault = function preventDefault(event) {
     event.preventDefault();
@@ -5251,11 +5406,14 @@ var TooltipSelect = function TooltipSelect(_a) {
     });
   }, []);
   var onWheel = React.useCallback(function (event) {
-    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);
-  }, [selectOpen, currentIndex, list, onChangeMouseWheel]);
+    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);
@@ -5264,17 +5422,23 @@ var TooltipSelect = function TooltipSelect(_a) {
     setSelectOpen(false);
   }, []);
   var onMouseEnter = React.useCallback(function () {
-    disableScroll();
+    if (!requiresCtrlToChange) {
+      disableScroll();
+    }
+
     if (!selectOpen) setTooltipOpen(true);
-  }, [selectOpen, disableScroll]);
+  }, [selectOpen, disableScroll, requiresCtrlToChange]);
   var onMouseLeave = React.useCallback(function () {
     enableScroll();
     setTooltipOpen(false);
   }, [enableScroll]);
   var onFocus = React.useCallback(function () {
-    disableScroll();
+    if (!requiresCtrlToChange) {
+      disableScroll();
+    }
+
     setTooltipOpen(true);
-  }, [disableScroll]);
+  }, [disableScroll, requiresCtrlToChange]);
   var onBlur = React.useCallback(function () {
     enableScroll();
     setTooltipOpen(false);
@@ -5467,120 +5631,6 @@ var reducer$3 = function reducer() {
   }
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-/**
- * Gets the active map Id and wether a dialog is open or closed
- *
- * Example: getDialogDetailsByType(store, 'legend')
- * @param {object} store store object from which the ui state wll be extracted
- * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
- * @returns {array} [string, boolean] first element gives the active map id, second element whether the dialog is open
- */
-
-var getDialogDetailsByType = function getDialogDetailsByType(store, dialogType) {
-  if (store && store.ui && store.ui.dialogs && store.ui.dialogs[dialogType]) {
-    return store.ui.dialogs[dialogType];
-  }
-
-  return null;
-};
-/**
- * For a given ui component: gets wether the dialog is open or closed
- *
- * @param {object} store store object from which the ui state wll be extracted
- * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
- * @returns {boolean} returnType: boolean
- */
-
-var getisDialogOpen = createSelector(getDialogDetailsByType, function (details) {
-  if (details) {
-    return details.isOpen;
-  }
-
-  return false;
-});
-/**
- *For a given ui component: gets the active map Id
- *
- * @param {object} store store object from which the ui state wll be extracted
- * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
- * @returns {string} returnType: string - the active map id
- */
-
-var getDialogMapId = createSelector(getDialogDetailsByType, function (details) {
-  if (details) {
-    return details.activeMapId;
-  }
-
-  return '';
-});
-/**
- *For a given ui component: gets the order of visible dialog
- *
- * @param {object} store store object from which the ui state wll be extracted
- * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
- * @returns {number} the higher the order number the higher the zIndex
- */
-
-var getDialogOrder = createSelector(function (store, dialogType) {
-  if (store && store.ui && store.ui.order) {
-    var order = store.ui.order;
-    var visibleOrder = order.filter(function (orderedDialogType) {
-      return store.ui.dialogs[orderedDialogType].isOpen;
-    });
-
-    if (!visibleOrder.includes(dialogType)) {
-      return 0;
-    }
-
-    return visibleOrder.length - visibleOrder.indexOf(dialogType);
-  }
-
-  return 0;
-}, function (order) {
-  return order;
-});
-/**
- *For a given ui component: returns if ordered on top
- *
- * @param {object} store store object from which the ui state wll be extracted
- * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
- * @returns {boolean}
- */
-
-var getDialogIsOrderedOnTop = createSelector(function (store, dialogType) {
-  if (store && store.ui && store.ui.order) {
-    var order = store.ui.order;
-    return order.includes(dialogType) && order.indexOf(dialogType) === 0;
-  }
-
-  return false;
-}, function (isOrderedOnTop) {
-  return isOrderedOnTop;
-});
-var getDialogSource = createSelector(getDialogDetailsByType, function (details) {
-  if (details && details.source) {
-    return details.source;
-  }
-
-  return 'app';
-});
-
 var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(registerMapUISaga),
     _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(unregisterUIMapSaga),
     _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
@@ -6341,6 +6391,21 @@ var reducer$2 = function reducer() {
         });
       }
 
+    case WEBMAP_DISABLE_PIN:
+      {
+        var _action$payload26 = action.payload,
+            _mapId28 = _action$payload26.mapId,
+            disableMapPin = _action$payload26.disableMapPin;
+
+        if (!state.byId[_mapId28]) {
+          return state;
+        }
+
+        return produce$1(state, function (draft) {
+          draft.byId[_mapId28].disableMapPin = disableMapPin;
+        });
+      }
+
     case GENERIC_SYNC_SETLAYERACTIONS:
       {
         /*
@@ -6349,9 +6414,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$payload26 = action.payload,
-            targets = _action$payload26.targets,
-            source = _action$payload26.source;
+        var _action$payload27 = action.payload,
+            targets = _action$payload27.targets,
+            source = _action$payload27.source;
         return targets.reduce(function (prevState, target) {
           var action = {
             payload: target,
@@ -7897,7 +7962,7 @@ var preset = {
 		},
 		{
 			name: "ECMWF",
-			url: "https://apps.ecmwf.int/wms/?token=public",
+			url: "https://eccharts.ecmwf.int/wms/?token=public",
 			id: "ecmwf"
 		},
 		{
@@ -8000,7 +8065,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$H = makeStyles({
+var useStyles$A = makeStyles({
   buttonDiv: {
     position: 'relative'
   },
@@ -8036,7 +8101,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$H();
+  var classes = useStyles$A();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8156,7 +8221,6 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, /*#__PURE__*/React.createElement(IconButton, {
     "data-testid": "add-service",
     onClick: handleAddServiceURL,
-    color: "primary",
     disabled: loading,
     size: "large"
   }, /*#__PURE__*/React.createElement(Add, null)), loading && /*#__PURE__*/React.createElement(CircularProgress, {
@@ -8190,26 +8254,23 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var useStyles$G = makeStyles(function (theme) {
-  return {
-    buttonDiv: {
-      position: 'relative'
-    },
-    loadingButton: {
-      position: 'absolute',
-      top: 7,
-      left: 7,
-      zIndex: 1
-    },
-    button: {
-      width: '24px',
-      height: '24px',
-      margin: '6px 0px 0px 10px',
-      color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
-      borderRadius: '15%'
-    }
-  };
-});
+var styles = {
+  buttonDiv: {
+    position: 'relative'
+  },
+  loadingButton: {
+    position: 'absolute',
+    top: 7,
+    left: 7,
+    zIndex: 1
+  },
+  button: {
+    width: '24px',
+    height: '24px',
+    margin: '6px 0px 0px 10px',
+    borderRadius: '15%'
+  }
+};
 
 var AddLayersButton = function AddLayersButton(_ref) {
   var onClickService = _ref.onClickService,
@@ -8225,7 +8286,6 @@ var AddLayersButton = function AddLayersButton(_ref) {
       _ref$shouldFocus = _ref.shouldFocus,
       shouldFocus = _ref$shouldFocus === void 0 ? false : _ref$shouldFocus;
   var ref = React.useRef(null);
-  var classes = useStyles$G();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8246,7 +8306,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
     title: tooltip
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: handleClose,
-    className: classes.button,
+    sx: styles.button,
     disableRipple: true,
     "data-testid": "addLayersButton",
     ref: ref,
@@ -8351,24 +8411,18 @@ var widthToWidthClass = function widthToWidthClass(w) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$F = makeStyles(function (theme) {
-  return {
-    button: {
-      width: '24px',
-      height: '24px',
-      margin: '6px 0px 0px 10px',
-      color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
-      borderRadius: '15%'
-    }
-  };
-});
+var style$2 = {
+  width: '24px',
+  height: '24px',
+  margin: '6px 0px 0px 10px',
+  borderRadius: '15%'
+};
 
 var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
   var mapId = _ref.mapId,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
-  var classes = useStyles$F();
   var currentActiveMapId = useSelector(function (store) {
     return getDialogMapId(store, 'layerSelect');
   });
@@ -8387,7 +8441,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
     title: "Layer Select"
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: openLayerSelectDialog,
-    className: classes.button,
+    sx: style$2,
     id: "layerSelectButton",
     "data-testid": "layerSelectButton",
     disableRipple: true,
@@ -8411,7 +8465,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$E = makeStyles({
+var useStyles$z = makeStyles({
   row: {
     height: '32px'
   },
@@ -8435,7 +8489,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
-  var classes = useStyles$E();
+  var classes = useStyles$z();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -8528,7 +8582,7 @@ var useTooltipContainerStyles = makeStyles(function (theme) {
       '& .MuiSvgIcon-root': {
         transition: 'none',
         fill: function fill(isEnabled) {
-          return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultIcon.rgba : theme.palette.geowebColors.layerManager.tableRowDisabledIcon.rgba;
+          return isEnabled ? theme.palette.geowebColors.buttons.flat["default"].color : theme.palette.geowebColors.buttons.flat.disabled.color;
         }
       },
       '&>div': {
@@ -8693,7 +8747,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$D = makeStyles(function (theme) {
+var useStyles$y = makeStyles(function (theme) {
   return createStyles({
     button: {
       height: 28,
@@ -8702,20 +8756,22 @@ var useStyles$D = makeStyles(function (theme) {
       marginTop: 2,
       color: function color(_ref) {
         var isActive = _ref.isActive,
+            isAccessible = _ref.isAccessible,
             isEnabled = _ref.isEnabled;
-        var _theme$palette$geoweb = theme.palette.geowebColors.layerManager,
-            tableRowDefaultIcon = _theme$palette$geoweb.tableRowDefaultIcon,
-            tableRowDisabledIcon = _theme$palette$geoweb.tableRowDisabledIcon;
 
         if (!isEnabled) {
-          return tableRowDisabledIcon.fill;
+          return theme.palette.geowebColors.buttons.flat.disabled.color;
+        }
+
+        if (isAccessible) {
+          return theme.palette.geowebColors.greys.accessible;
         }
 
         if (isActive) {
           return theme.palette.common.white;
         }
 
-        return tableRowDefaultIcon.rgba;
+        return theme.palette.geowebColors.buttons.flat["default"].color;
       },
       backgroundColor: function backgroundColor(_ref2) {
         var isActive = _ref2.isActive;
@@ -8724,7 +8780,7 @@ var useStyles$D = makeStyles(function (theme) {
       '&:focus': {
         backgroundColor: function backgroundColor(_ref3) {
           var isActive = _ref3.isActive;
-          return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.layerManager.tableRowMouseover.rgba;
+          return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
         },
         outline: theme.palette.geowebColors.buttons.focusDefault.outline,
         borderRadius: 0
@@ -8732,7 +8788,7 @@ var useStyles$D = makeStyles(function (theme) {
       '&:hover': {
         backgroundColor: function backgroundColor(_ref4) {
           var isActive = _ref4.isActive;
-          return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.layerManager.tableRowMouseover.rgba;
+          return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
         }
       }
     },
@@ -8753,11 +8809,15 @@ var LayerManagerButton = function LayerManagerButton(_a) {
       isEnabled = _a$isEnabled === void 0 ? true : _a$isEnabled,
       icon = _a.icon,
       testId = _a.testId,
-      props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId"]);
+      _a$isAccessible = _a.isAccessible,
+      isAccessible = _a$isAccessible === void 0 ? false : _a$isAccessible,
+      className = _a.className,
+      props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "className"]);
 
-  var classes = useStyles$D({
+  var classes = useStyles$y({
     isActive: isActive,
-    isEnabled: isEnabled
+    isEnabled: isEnabled,
+    isAccessible: isAccessible
   });
 
   var handleClick = function handleClick(event) {
@@ -8774,7 +8834,7 @@ var LayerManagerButton = function LayerManagerButton(_a) {
     size: "small",
     onClick: handleClick,
     "data-testid": testId,
-    className: classes.button,
+    className: "".concat(classes.button, " ").concat(className),
     disableFocusRipple: true
   }, props), icon));
 };
@@ -8795,7 +8855,7 @@ var LayerManagerButton = function LayerManagerButton(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$C = makeStyles(function (theme) {
+var useStyles$x = makeStyles(function (theme) {
   return createStyles({
     checkbox: {
       color: 'inherit',
@@ -8818,7 +8878,7 @@ var EnableLayer = function EnableLayer(_ref) {
   var isEnabled = _ref.isEnabled,
       title = _ref.title,
       onChangeEnableLayer = _ref.onChangeEnableLayer;
-  var classes = useStyles$C(isEnabled);
+  var classes = useStyles$x(isEnabled);
 
   var onClick = function onClick() {
     onChangeEnableLayer(!isEnabled);
@@ -8858,23 +8918,7 @@ var EnableLayer = function EnableLayer(_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 useStyles$B = makeStyles(function (theme) {
+var useStyles$w = makeStyles(function (theme) {
   return createStyles({
     dropdownEmpty: {
       paddingLeft: 8,
@@ -8890,6 +8934,33 @@ var useStyles$B = makeStyles(function (theme) {
   });
 });
 
+var getRenderLayersValues = function getRenderLayersValues(layerName, layers) {
+  var serviceLayer = layers.find(function (l) {
+    return l.name === layerName;
+  });
+
+  if (!serviceLayer && layerName) {
+    return {
+      currentValue: layerName,
+      currentIndex: layers.length,
+      extendedLayers: [].concat(_toConsumableArray(layers), [{
+        name: layerName,
+        text: layerName,
+        leaf: true,
+        path: []
+      }])
+    };
+  }
+
+  return {
+    currentValue: (serviceLayer === null || serviceLayer === void 0 ? void 0 : serviceLayer.name) || '',
+    currentIndex: layers.findIndex(function (l) {
+      return l.name === (serviceLayer === null || serviceLayer === void 0 ? void 0 : serviceLayer.name);
+    }),
+    extendedLayers: layers
+  };
+};
+
 var RenderLayers = function RenderLayers(_ref) {
   var onChangeLayerName = _ref.onChangeLayerName,
       layerName = _ref.layerName,
@@ -8897,7 +8968,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$B();
+  var classes = useStyles$w();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
   if (!layers || !layers.length) {
@@ -8909,24 +8980,21 @@ var RenderLayers = function RenderLayers(_ref) {
     }, "No service available"));
   }
 
-  var filteredLayers = layers.filter(function (l) {
-    return l.name === layerName;
-  });
-  var currentValue = filteredLayers.length === 1 && filteredLayers[0].name ? filteredLayers[0].name : '';
-
   var selectLayer = function selectLayer(event) {
     event.stopPropagation();
     onChangeLayerName(event.target.value);
   };
 
-  var list = layers.map(function (layer) {
+  var _getRenderLayersValue = getRenderLayersValues(layerName, layers),
+      currentIndex = _getRenderLayersValue.currentIndex,
+      currentValue = _getRenderLayersValue.currentValue,
+      extendedLayers = _getRenderLayersValue.extendedLayers;
+
+  var list = extendedLayers.map(function (layer) {
     return {
       value: layer.name
     };
   });
-  var currentIndex = layers.findIndex(function (layer) {
-    return currentValue === layer.name;
-  });
   return /*#__PURE__*/React.createElement(TooltipSelect, {
     disableUnderline: true,
     tooltip: "Select a layer",
@@ -8942,10 +9010,11 @@ var RenderLayers = function RenderLayers(_ref) {
     onChange: selectLayer,
     onChangeMouseWheel: function onChangeMouseWheel(e) {
       return onChangeLayerName(e.value);
-    }
+    },
+    requiresCtrlToChange: true
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Select layer"), layers.map(function (layerFromServiceLayers) {
+  }, "Select layer"), extendedLayers.map(function (layerFromServiceLayers) {
     return /*#__PURE__*/React.createElement(MenuItem, {
       key: layerFromServiceLayers.name,
       value: layerFromServiceLayers.name,
@@ -8954,7 +9023,7 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var useStyles$A = makeStyles(function (theme) {
+var useStyles$v = makeStyles(function (theme) {
   return {
     opacityDiv: {
       height: 'calc(100% - 5px)',
@@ -9015,7 +9084,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$A();
+  var classes = useStyles$v();
   var sliderClasses = sliderStyles();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
@@ -9043,11 +9112,17 @@ var OpacitySelect = function OpacitySelect(_ref) {
     });
   }, []);
   var onWheel = React.useCallback(function (event) {
-    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);
-    onLayerChangeOpacity(newValue);
-  }, [currentOpacity, onLayerChangeOpacity]);
+    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
+
+      window.requestAnimationFrame(function () {
+        onLayerChangeOpacity(newValue);
+      });
+    } else enableScroll();
+  }, [currentOpacity, onLayerChangeOpacity, disableScroll, enableScroll]);
   var onClickButton = React.useCallback(function () {
     setOpen(!open);
   }, [open]);
@@ -9057,17 +9132,15 @@ var OpacitySelect = function OpacitySelect(_ref) {
     }
   }, [open]);
   var onMouseEnter = React.useCallback(function () {
-    disableScroll();
     if (!open) setTooltipOpen(true);
-  }, [open, disableScroll]);
+  }, [open]);
   var onMouseLeave = React.useCallback(function () {
     enableScroll();
     setTooltipOpen(false);
   }, [enableScroll]);
   var onFocus = React.useCallback(function () {
-    disableScroll();
     setTooltipOpen(true);
-  }, [disableScroll]);
+  }, []);
   var onBlur = React.useCallback(function () {
     enableScroll();
     setTooltipOpen(false);
@@ -9118,109 +9191,48 @@ var OpacitySelect = function OpacitySelect(_ref) {
  *
  *     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 useStyles$z = makeStyles(function (theme) {
-  return createStyles({
-    icon: {
-      minWidth: 32,
-      color: theme.palette.geowebColors.layerManager.tableRowDefaultIcon.rgba
-    },
-    text: {
-      fontSize: 16,
-      color: theme.palette.geowebColors.layerManager.tableRowDefaultText.rgba
-    }
-  });
-});
-
-var MenuItemButton = function MenuItemButton(_ref) {
-  var title = _ref.title,
-      tooltipTitle = _ref.tooltipTitle,
-      icon = _ref.icon;
-  var classes = useStyles$z();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItemIcon, {
-    className: "".concat(classes.icon, " icon")
-  }, icon), /*#__PURE__*/React.createElement(Tooltip, {
-    title: tooltipTitle,
-    placement: "top"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: classes.text,
-    variant: "inherit"
-  }, title)));
-};
-
-var useStyles$y = makeStyles(function (theme) {
-  return {
-    menu: {
-      backgroundColor: theme.palette.geowebColors.background.surface,
-      '& li:hover': {
-        backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
-      }
-    }
-  };
-});
-
-var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
-  var tooltipTitle = _ref.tooltipTitle,
-      mapId = _ref.mapId,
-      layerId = _ref.layerId,
-      onLayerDuplicate = _ref.onLayerDuplicate,
-      _ref$isEnabled = _ref.isEnabled,
-      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$y();
-
-  var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      anchorEl = _React$useState2[0],
-      setAnchorEl = _React$useState2[1];
-
-  var handleClick = function handleClick(event) {
-    setAnchorEl(event.currentTarget);
-  };
+ * 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 CopyIcon = /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("path", {
+  d: "M8 7v2H6a1 1 0 0 0-.993.883L5 10v9a1 1 0 0 0 .883.993L6 20h6a1 1 0 0 0 .993-.883L13 19h2v1.6a1.4 1.4 0 0 1-1.263 1.394l-.135.006H4.399a1.4 1.4 0 0 1-1.393-1.265L3 20.6V8.4a1.4 1.4 0 0 1 1.264-1.394L4.4 7H8zm7.584-5v2H12a1 1 0 0 0-.993.883L11 5v9a1 1 0 0 0 .883.993L12 15h6a1 1 0 0 0 .993-.883L19 14V7.42h2v8.18a1.4 1.4 0 0 1-1.263 1.394l-.135.006h-9.203a1.4 1.4 0 0 1-1.393-1.265L9 15.6V3.4a1.4 1.4 0 0 1 1.264-1.394L10.4 2h5.185zM17 2l4 4h-2.5c-.777 0-1.42-.598-1.493-1.357L17 4.499V2z"
+}));
 
-  var handleClose = function handleClose() {
-    setAnchorEl(null);
-  };
+var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
+  var mapId = _ref.mapId,
+      layerId = _ref.layerId,
+      onLayerDuplicate = _ref.onLayerDuplicate;
 
   var onClickDuplicate = function onClickDuplicate() {
     onLayerDuplicate({
       mapId: mapId,
       layerId: layerId
     });
-    handleClose();
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LayerManagerButton, {
-    tooltipTitle: tooltipTitle,
-    onClick: handleClick,
-    icon: /*#__PURE__*/React.createElement(MoreVert, null),
-    testId: "openMenuButton",
-    isEnabled: isEnabled
-  }), /*#__PURE__*/React.createElement(Menu, {
-    anchorEl: anchorEl,
-    keepMounted: true,
-    open: Boolean(anchorEl),
-    onClose: handleClose,
-    PaperProps: {
-      className: classes.menu
-    }
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    "data-testid": "duplicateLayerButton",
-    onClick: onClickDuplicate
-  }, /*#__PURE__*/React.createElement(MenuItemButton, {
-    title: "Duplicate layer",
-    tooltipTitle: "Duplicate layer",
-    icon: /*#__PURE__*/React.createElement(FileCopy, {
-      fontSize: "small"
-    })
-  }))));
+  return /*#__PURE__*/React.createElement(ToggleMenu, {
+    buttonTestId: "openMenuButton",
+    buttonSx: {
+      margin: '4px 2px',
+      '&.MuiButtonBase-root': {
+        backgroundColor: 'transparent',
+        color: 'geowebColors.greys.accessible'
+      }
+    },
+    menuPosition: "bottom",
+    menuItems: [{
+      text: 'Duplicate layer',
+      action: onClickDuplicate,
+      icon: CopyIcon
+    }],
+    tooltipTitle: "Open menu"
+  });
 };
 
 var RenderStyles = function RenderStyles(_ref) {
@@ -9272,7 +9284,8 @@ var RenderStyles = function RenderStyles(_ref) {
     onChange: selectStyle,
     onChangeMouseWheel: function onChangeMouseWheel(e) {
       return onChangeLayerStyle(e.value);
-    }
+    },
+    requiresCtrlToChange: true
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
   }, "Select style"), styles.map(function (styleFromlayer) {
@@ -9299,7 +9312,7 @@ var RenderStyles = function RenderStyles(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$x = makeStyles(function () {
+var useStyles$u = makeStyles(function () {
   return createStyles({
     icon: {
       width: 20,
@@ -9313,7 +9326,7 @@ var DeleteButton = function DeleteButton(_ref) {
       onClickDelete = _ref.onClickDelete,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$x();
+  var classes = useStyles$u();
   return /*#__PURE__*/React.createElement(LayerManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickDelete,
@@ -9341,30 +9354,17 @@ var DeleteButton = function DeleteButton(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$w = makeStyles(function (theme) {
+var useStyles$t = makeStyles(function (theme) {
   return createStyles({
-    icon: {
-      width: 18,
-      height: 18,
-      marginTop: 4
-    },
     svgIcon: {
       fill: function fill(_ref) {
-        var isActive = _ref.isActive,
-            isEnabled = _ref.isEnabled;
-        var _theme$palette$geoweb = theme.palette.geowebColors.layerManager,
-            tableRowDefaultIcon = _theme$palette$geoweb.tableRowDefaultIcon,
-            tableRowDisabledIcon = _theme$palette$geoweb.tableRowDisabledIcon;
+        var isActive = _ref.isActive;
 
         if (isActive) {
           return theme.palette.common.white;
         }
 
-        if (!isEnabled) {
-          return tableRowDisabledIcon.fill;
-        }
-
-        return tableRowDefaultIcon.rgba;
+        return theme.palette.geowebColors.buttons.flat["default"].color;
       }
     }
   });
@@ -9378,14 +9378,18 @@ 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$w({
+  var classes = useStyles$t({
     isActive: isActive,
     isEnabled: isEnabled
   });
 
   var Icon = function Icon() {
     return /*#__PURE__*/React.createElement(SvgIcon, {
-      className: classes.icon
+      sx: {
+        width: '18px',
+        height: '18px',
+        marginTop: '4px'
+      }
     }, /*#__PURE__*/React.createElement("g", {
       id: "Concept-3",
       stroke: "none",
@@ -9427,7 +9431,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$v = makeStyles(function (theme) {
+var useStyles$s = makeStyles(function (theme) {
   return createStyles({
     row: {
       background: function background(isEnabled) {
@@ -9478,7 +9482,7 @@ var LayerRow = function LayerRow(_ref) {
       layerActiveLayout = _ref.layerActiveLayout,
       layerManagerWidth = _ref.layerManagerWidth,
       dragHandle = _ref.dragHandle;
-  var classes = useStyles$v(isEnabled);
+  var classes = useStyles$s(isEnabled);
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
   var onClickRow = function onClickRow() {
@@ -9571,7 +9575,6 @@ var LayerRow = function LayerRow(_ref) {
       });
     }
   }), layerMenuLayout || /*#__PURE__*/React__default.createElement(LayerManagerMenuButton, {
-    tooltipTitle: "Open Menu",
     mapId: mapId,
     layerId: layerId,
     onLayerDuplicate: onLayerDuplicate
@@ -9899,11 +9902,7 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
       origin: 'MenuButtonConnect'
     }));
   }, [dispatch]);
-  var isLayerEnabled = useSelector(function (store) {
-    return getLayerEnabled(store, layerId);
-  });
   return /*#__PURE__*/React.createElement(LayerManagerMenuButton, {
-    tooltipTitle: "Open Menu",
     layerId: layerId,
     mapId: mapId,
     onLayerDuplicate: function onLayerDuplicate() {
@@ -9912,8 +9911,7 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
         mapId: mapId,
         layer: layer
       });
-    },
-    isEnabled: isLayerEnabled
+    }
   });
 };
 
@@ -10060,48 +10058,38 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 var TOOLTIP_TITLE = 'Drag a layer up or down';
-var useStyles$u = makeStyles(function (theme) {
-  return {
-    dragHandle: {
-      cursor: 'grab',
-      backgroundColor: 'inherit',
-      '&:hover': {
-        backgroundColor: 'inherit'
-      },
-      height: 32,
-      color: function color(_ref) {
-        var isDisabled = _ref.isDisabled;
-        return isDisabled ? theme.palette.geowebColors.layerManager.tableRowDefaultIcon.rgba : theme.palette.geowebColors.layerManager.tableRowDisabledIcon.fill;
-      }
-    }
-  };
-});
 
-var DragHandle = function DragHandle(_ref2) {
-  var _ref2$isDisabled = _ref2.isDisabled,
-      isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
-      _ref2$index = _ref2.index,
-      index = _ref2$index === void 0 ? undefined : _ref2$index,
-      _ref2$hideTooltip = _ref2.hideTooltip,
-      hideTooltip = _ref2$hideTooltip === void 0 ? false : _ref2$hideTooltip;
-  var classes = useStyles$u({
-    isDisabled: isDisabled
-  });
+var DragHandle = function DragHandle(_ref) {
+  var _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$index = _ref.index,
+      index = _ref$index === void 0 ? undefined : _ref$index,
+      _ref$hideTooltip = _ref.hideTooltip,
+      hideTooltip = _ref$hideTooltip === void 0 ? false : _ref$hideTooltip;
   var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
   return /*#__PURE__*/React__default.createElement(LayerManagerButton, {
     tooltipTitle: tooltipTitle,
     icon: /*#__PURE__*/React__default.createElement(DragIndicator, null),
     testId: "dragHandle".concat(index !== undefined ? "-".concat(index) : ''),
-    className: "".concat(classes.dragHandle, " handle"),
+    className: "handle",
     tabIndex: -1,
     isEnabled: !isDisabled,
     disableFocusRipple: true,
     disableTouchRipple: true,
-    disabled: isDisabled
+    disabled: isDisabled,
+    isAccessible: true,
+    sx: {
+      cursor: 'grab',
+      '&:hover': {
+        backgroundColor: 'inherit!important'
+      },
+      marginLeft: '3px',
+      marginRight: '3px'
+    }
   });
 };
 
-var useStyles$t = makeStyles(function () {
+var useStyles$r = makeStyles(function () {
   return {
     layerRows: {
       width: '100%',
@@ -10168,7 +10156,7 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
 
   var isSorting = activeDragIndex !== null;
   var isDragDisabled = layerIds.length === 1;
-  var classes = useStyles$t(isSorting);
+  var classes = useStyles$r(isSorting);
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
@@ -10378,7 +10366,7 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$s = makeStyles({
+var useStyles$q = makeStyles({
   layerRow: {
     width: '100%',
     height: '36px'
@@ -10401,7 +10389,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  var classes = useStyles$s();
+  var classes = useStyles$q();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -10430,7 +10418,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
   })));
 };
 
-var useStyles$r = makeStyles({
+var useStyles$p = makeStyles({
   layerRowContainer: {
     position: 'relative',
     width: '100%',
@@ -10465,7 +10453,7 @@ var LayerManager = function LayerManager(_ref) {
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect,
       _ref$showAddLayersToo = _ref.showAddLayersTooltip,
       showAddLayersTooltip = _ref$showAddLayersToo === void 0 ? true : _ref$showAddLayersToo;
-  var classes = useStyles$r();
+  var classes = useStyles$p();
 
   var _React$useState = React.useState(LayerManagerWidth.lg),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -10522,80 +10510,6 @@ var LayerManager = function LayerManager(_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 CustomToggleButton = function CustomToggleButton(_a) {
-  var _a$variant = _a.variant,
-      variant = _a$variant === void 0 ? 'primary' : _a$variant,
-      _a$value = _a.value,
-      value = _a$value === void 0 ? 0 : _a$value,
-      props = __rest(_a, ["variant", "value"]);
-
-  return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({
-    className: variant,
-    value: value
-  }, props));
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-
-var ToolButton = function ToolButton(_a) {
-  var active = _a.active,
-      _a$width = _a.width,
-      width = _a$width === void 0 ? '24px' : _a$width,
-      _a$height = _a.height,
-      height = _a$height === void 0 ? '24px' : _a$height,
-      children = _a.children,
-      _a$value = _a.value,
-      value = _a$value === void 0 ? 0 : _a$value,
-      _a$sx = _a.sx,
-      sx = _a$sx === void 0 ? {} : _a$sx,
-      props = __rest(_a, ["active", "width", "height", "children", "value", "sx"]);
-
-  return /*#__PURE__*/React.createElement(CustomToggleButton, Object.assign({
-    variant: "tool",
-    disableRipple: true,
-    selected: active,
-    value: value,
-    sx: Object.assign({
-      width: "".concat(width, "!important"),
-      height: "".concat(height, "!important"),
-      textTransform: 'none!important',
-      padding: '11px!important'
-    }, sx)
-  }, props), children);
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -11177,13 +11091,6 @@ var ServicePopupConnect = function ServicePopupConnect(_ref) {
 var isURL = function isURL(string) {
   return /^https?:\/\//.test(string);
 };
-var useStyles$q = makeStyles(function (theme) {
-  return {
-    iconButton: {
-      color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
-    }
-  };
-});
 var clearIconPath = 'M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M15.44426,7.26697571 L12.0002861,10.7110482 L8.55573996,7.26697571 C8.19978253,6.9110081 7.62292549,6.9110081 7.26696807,7.26697571 C6.91101064,7.62294331 6.91101064,8.19981687 7.26696807,8.55578447 L10.7115142,11.9998569 L7.26696807,15.4445017 C6.91101064,15.8004693 6.91101064,16.3767705 7.26696807,16.7333104 C7.44494678,16.910722 7.67843653,17 7.91192629,17 C8.14484377,17 8.37776125,16.910722 8.55573996,16.7333104 L12.0002861,13.289238 L15.44426,16.7333104 C15.6222388,16.910722 15.8551562,17 16.088646,17 C16.3221357,17 16.5550532,16.910722 16.7330319,16.7333104 C17.0889894,16.3767705 17.0889894,15.8004693 16.7330319,15.4445017 L13.289058,11.9998569 L16.7330319,8.55578447 C17.0889894,8.19981687 17.0889894,7.62294331 16.7330319,7.26697571 C16.3770745,6.9110081 15.8002175,6.9110081 15.44426,7.26697571 Z';
 var clearIcon = /*#__PURE__*/React__default.createElement(SvgIcon, {
   style: {
@@ -11216,7 +11123,6 @@ var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
       isPopupOpen = _React$useState2[0],
       setPopupOpen = _React$useState2[1];
 
-  var classes = useStyles$q();
   React__default.useEffect(function () {
     if (isPopupOpen === false) {
       onClickClear();
@@ -11227,7 +11133,6 @@ var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
     title: "Clear",
     placement: "top"
   }, /*#__PURE__*/React__default.createElement(IconButton, {
-    className: classes.iconButton,
     edge: "end",
     onClick: function onClick() {
       onClickClear();
@@ -11256,7 +11161,6 @@ var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
     title: "Search",
     placement: "top"
   }, /*#__PURE__*/React__default.createElement(IconButton, {
-    className: classes.iconButton,
     edge: "end",
     size: "large"
   }, searchIcon));
@@ -11339,6 +11243,50 @@ 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
+  var layer = _ref.layer,
+      layerIndex = _ref.layerIndex,
+      serviceId = _ref.serviceId,
+      addLayer = _ref.addLayer,
+      deleteLayer = _ref.deleteLayer,
+      mapLayers = _ref.mapLayers;
+  var foundLayer = mapLayers.find(function (lr) {
+    return lr.name === layer.name && lr.service === serviceId;
+  });
+  return /*#__PURE__*/React.createElement(CustomToggleButton, {
+    "data-testid": "layerAddRemoveButton-".concat(layer.name),
+    onClick: function onClick() {
+      !foundLayer ? addLayer({
+        serviceURL: serviceId,
+        layerName: layer.name
+      }) : deleteLayer({
+        layerId: foundLayer.id,
+        layerIndex: layerIndex
+      });
+    },
+    selected: !!foundLayer,
+    variant: "tool",
+    fullWidth: true
+  }, !foundLayer ? 'Add' : 'Remove');
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -11377,35 +11325,35 @@ var filterLayersFromService = function filterLayersFromService(serviceId, servic
   });
 };
 
-var useStyles$p = makeStyles(function (theme) {
+var useStyles$o = makeStyles(function (theme) {
   return {
     layerRow: {
-      background: theme.palette.geowebColors.background.surface,
+      background: theme.palette.geowebColors.cards.cardContainer,
       padding: '8px 0px 8px 12px',
       marginBottom: '4px',
       height: '64px',
-      border: "solid 1px ".concat(theme.palette.geowebColors.cards.cardContainerBorder)
+      border: "solid 1px ".concat(theme.palette.geowebColors.cards.cardContainerBorder),
+      display: 'grid',
+      gridTemplateColumns: '1fr 0.1fr',
+      gridGap: '20px'
     },
     layerText: {
       fontSize: '12px',
       fontWeight: 500,
       overflow: 'clip',
       height: '20px',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap'
+      textOverflow: 'ellipsis'
     },
     layerName: {
       fontSize: '12px',
       height: '24px',
-      maxWidth: '100%',
       overflow: 'clip',
       "float": 'left',
       paddingTop: '6px',
-      textOverflow: 'ellipsis',
       whiteSpace: 'nowrap'
     },
     layerNameMaxWidth: {
-      maxWidth: '196px'
+      maxWidth: '270px'
     },
     layerAbstract: {
       fontSize: '10px',
@@ -11416,6 +11364,11 @@ var useStyles$p = makeStyles(function (theme) {
     resultCount: {
       marginBottom: '4px',
       fontSize: '12px'
+    },
+    layerButton: {
+      marginRight: '8px',
+      marginTop: '4px',
+      width: '80px'
     }
   };
 });
@@ -11424,10 +11377,13 @@ var LayerList = function LayerList(_ref) {
   var services = _ref.services,
       serviceIds = _ref.serviceIds,
       layerSelectHeight = _ref.layerSelectHeight,
+      addLayer = _ref.addLayer,
+      deleteLayer = _ref.deleteLayer,
       searchString = _ref.searchString,
+      mapLayers = _ref.mapLayers,
       keywordIds = _ref.keywordIds,
       allKeywordsActive = _ref.allKeywordsActive;
-  var classes = useStyles$p();
+  var classes = useStyles$o();
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -11449,12 +11405,14 @@ var LayerList = function LayerList(_ref) {
       overflow: 'auto'
     }
   }, serviceIds.map(function (serviceId) {
-    return filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer) {
+    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", {
+      }, /*#__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)
@@ -11463,7 +11421,16 @@ var LayerList = function LayerList(_ref) {
         "data-testid": "layerAbstract"
       }, layer["abstract"])) : /*#__PURE__*/React.createElement("div", {
         className: classes.layerName
-      }, layer.name)));
+      }, layer.name))), /*#__PURE__*/React.createElement("div", {
+        className: classes.layerButton
+      }, /*#__PURE__*/React.createElement(LayerAddRemoveButton, {
+        layer: layer,
+        layerIndex: layerIndex,
+        serviceId: serviceId,
+        addLayer: addLayer,
+        deleteLayer: deleteLayer,
+        mapLayers: mapLayers
+      }))));
     });
   })));
 };
@@ -11486,13 +11453,57 @@ var LayerList = function LayerList(_ref) {
  * */
 
 var LayerListConnect = function LayerListConnect(_ref) {
-  var layerSelectHeight = _ref.layerSelectHeight;
+  var mapId = _ref.mapId,
+      layerSelectHeight = _ref.layerSelectHeight;
   var services = useSelector(function (store) {
     return getServices(store);
   });
+  var dispatch = useDispatch();
   var enabledServiceIds = useSelector(function (store) {
     return getEnabledServiceIds(store);
   });
+  var mapLayers = useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  });
+
+  var addLayer$1 = function addLayer(_ref2) {
+    var serviceURL = _ref2.serviceURL,
+        layerName = _ref2.layerName;
+    var layer = {
+      service: serviceURL,
+      name: layerName,
+      id: generateLayerId(),
+      layerType: LayerType$1.mapLayer
+    };
+    addMapLayer({
+      mapId: mapId,
+      layerId: layer.id,
+      layer: layer,
+      origin: 'LayerListConnect'
+    });
+  };
+
+  var addMapLayer = React.useCallback(function (_ref3) {
+    var layerId = _ref3.layerId,
+        layer = _ref3.layer,
+        origin = _ref3.origin;
+    return dispatch(addLayer({
+      mapId: mapId,
+      layerId: layerId,
+      layer: layer,
+      origin: origin
+    }));
+  }, [dispatch, mapId]);
+  var deleteLayer = React.useCallback(function (_ref4) {
+    var layerId = _ref4.layerId,
+        layerIndex = _ref4.layerIndex;
+    return dispatch(layerDelete({
+      mapId: mapId,
+      layerId: layerId,
+      layerIndex: layerIndex,
+      origin: 'LayerListConnect'
+    }));
+  }, [dispatch, mapId]);
   var checkedKeywordIds = useSelector(function (store) {
     return getCheckedKeywordIds(store);
   });
@@ -11506,9 +11517,12 @@ var LayerListConnect = function LayerListConnect(_ref) {
     services: services,
     serviceIds: enabledServiceIds,
     layerSelectHeight: layerSelectHeight,
+    addLayer: addLayer$1,
+    deleteLayer: deleteLayer,
     keywordIds: checkedKeywordIds,
     allKeywordsActive: allKeywordsActive,
-    searchString: searchString
+    searchString: searchString,
+    mapLayers: mapLayers
   });
 };
 
@@ -11624,7 +11638,7 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
   });
 };
 
-var useStyles$o = makeStyles(function (theme) {
+var useStyles$n = makeStyles(function (theme) {
   return createStyles({
     serviceChips: {
       width: '100%',
@@ -11699,7 +11713,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$o({
+  var classes = useStyles$n({
     margin: margin,
     maxWidthValue: maxWidthValue
   });
@@ -11813,7 +11827,7 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
   });
 };
 
-var useStyles$n = makeStyles(function (theme) {
+var useStyles$m = makeStyles(function (theme) {
   return createStyles({
     servicesContainer: {
       width: '300px',
@@ -11869,7 +11883,7 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
       mapStoreRemoveService = _ref.mapStoreRemoveService,
       _ref$layers = _ref.layers,
       layers = _ref$layers === void 0 ? [] : _ref$layers;
-  var classes = useStyles$n();
+  var classes = useStyles$m();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -11887,6 +11901,8 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   var isDisabled = function isDisabled(service) {
     return layers.some(function (layer) {
       return layer.service && layer.service.includes(service);
+    }) || preloadedDefaultMapServices.some(function (defaultMapService) {
+      return defaultMapService.url && defaultMapService.url.includes(service);
     });
   };
 
@@ -11916,14 +11932,15 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
       }
     }, /*#__PURE__*/React.createElement(Tooltip, {
       title: "Edit Service"
-    }, /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
+      disabled: isDisabled(service.service),
       "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, {
+    })))))), /*#__PURE__*/React.createElement(Tooltip, {
       title: "Delete Service"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
       size: "large",
@@ -11994,49 +12011,28 @@ var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect() {
   });
 };
 
-var useStyles$m = makeStyles(function (theme) {
-  return createStyles({
-    servicesContainer: {
-      position: 'fixed',
-      top: '140px',
-      right: '-72px',
-      backgroundColor: theme.palette.geowebColors.background.surface,
-      boxShadow: theme.shadows[6]
-    },
-    servicesText: {
-      paddingTop: '12px',
-      paddingLeft: '12px'
-    }
-  });
-});
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
 
 var ServiceOptionsButton = function ServiceOptionsButton() {
-  var classes = useStyles$m();
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      containerOpen = _React$useState2[0],
-      setContainerOpen = _React$useState2[1];
-
-  var toggleContainer = function toggleContainer() {
-    setContainerOpen(!containerOpen);
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolButton, {
-    onClick: toggleContainer,
-    active: containerOpen,
-    "data-testid": "serviceOptionsButton",
-    variant: "tool"
-  }, /*#__PURE__*/React.createElement(SvgIcon, {
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-    d: "M12 16c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0-2c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm0-6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z",
-    fillRule: "evenodd"
-  })))), containerOpen ? /*#__PURE__*/React.createElement(Box, {
-    className: classes.servicesContainer,
-    "data-testid": "ServiceOptionsDialogContainer"
-  }, /*#__PURE__*/React.createElement(ServiceOptionsDialogConnect, null)) : null);
+  return /*#__PURE__*/React.createElement(ToggleMenu, {
+    buttonTestId: "serviceOptionsButton",
+    menuPosition: "bottom"
+  }, /*#__PURE__*/React.createElement(ServiceOptionsDialogConnect, null));
 };
 
 var useStyles$l = makeStyles({
@@ -12129,6 +12125,7 @@ var LayerSelect = function LayerSelect(_ref) {
   })), /*#__PURE__*/React.createElement("div", {
     className: classes.layerSelectContainer
   }, /*#__PURE__*/React.createElement(LayerListConnect, {
+    mapId: mapId,
     layerSelectHeight: height
   })));
 };
@@ -15483,6 +15480,12 @@ var getNextSecondsPerPxValue = function getNextSecondsPerPxValue(direction, oldS
 
 var NEEDLE_HANDLE_WIDTH = 10;
 var LEFT_MOUSE_BTN = 1;
+var THROTTLE_WAIT_TIME = 500; // [ms]
+
+var THROTTLE_OPTIONS = {
+  trailing: false // Invoke function when called, but not more than once every <THROTTLE_WAIT_TIME>.
+
+};
 
 var TimeSliderLegend = function TimeSliderLegend(_ref) {
   var centerTime = _ref.centerTime,
@@ -15551,7 +15554,21 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     setNewRoundedTime(x, centerTime, width, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
   };
 
-  var theme = useTheme();
+  var theme = useTheme(); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  var throttledZoom = React.useCallback(throttle(function (newSecondsPerPx, newCenterTime) {
+    onZoom(newSecondsPerPx, newCenterTime);
+  }, THROTTLE_WAIT_TIME, THROTTLE_OPTIONS), []);
+
+  var zoom = function zoom(deltaY, deltaX, canvasWidth, mouseX) {
+    if (!onZoom) return;
+    var direction = deltaY || deltaX;
+    var newSecondsPerPx = getNextSecondsPerPxValue(Math.sign(direction), secondsPerPx, dataScaleToSecondsPerPx);
+    var mouseTime = pixelToTimestamp(mouseX, centerTime, canvasWidth, secondsPerPx);
+    var newCenterTime = getNewCenterOfFixedPointZoom(mouseTime, secondsPerPx, newSecondsPerPx, centerTime);
+    throttledZoom(newSecondsPerPx, newCenterTime);
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: classes.timeSliderLegend,
     "data-testid": "timeSliderLegend"
@@ -15583,12 +15600,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
           deltaX = _ref2.deltaX,
           canvasWidth = _ref2.canvasWidth,
           mouseX = _ref2.mouseX;
-      if (!onZoom) return;
-      var direction = deltaY || deltaX;
-      var newSecondsPerPx = getNextSecondsPerPxValue(Math.sign(direction), secondsPerPx, dataScaleToSecondsPerPx);
-      var mouseTime = pixelToTimestamp(mouseX, centerTime, canvasWidth, secondsPerPx);
-      var newCenterTime = getNewCenterOfFixedPointZoom(mouseTime, secondsPerPx, newSecondsPerPx, centerTime);
-      onZoom(newSecondsPerPx, newCenterTime);
+      zoom(deltaY, deltaX, canvasWidth, mouseX);
     },
     onMouseDown: function onMouseDown(x, y, width) {
       setDragged(false);
@@ -17312,7 +17324,7 @@ var eumetviewEUMETSAT = {
 };
 var ECMWFPublicService = {
   name: 'ECMWF',
-  url: 'https://apps.ecmwf.int/wms/?token=public',
+  url: 'https://eccharts.ecmwf.int/wms/?token=public',
   id: 'ecmwf'
 };
 var MeteoCanada = {
@@ -20742,6 +20754,14 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
           });
         }
       }
+      /* Set disable map pin */
+
+
+      if (!prevProps || prevProps.disableMapPin !== props.disableMapPin) {
+        if (!(props.disableMapPin === undefined)) {
+          this.adaguc.webMapJS.getMapPin().toggleDisableMapPin();
+        }
+      }
       /* Change the animation delay */
 
 
@@ -21410,6 +21430,9 @@ var MapViewConnect = function MapViewConnect(_a) {
   var mapPinLocation = useSelector(function (store) {
     return getPinLocation(store, mapId);
   });
+  var disableMapPin = useSelector(function (store) {
+    return getDisableMapPin(store, mapId);
+  });
   var dispatch = useDispatch();
   var map = getWMJSMapById(mapId);
   var mapChangeDimension$1 = React.useCallback(function (mapDimensionPayload) {
@@ -21481,6 +21504,7 @@ var MapViewConnect = function MapViewConnect(_a) {
     activeLayerId: activeLayerId,
     animationDelay: animationDelay,
     displayMapPin: displayMapPin,
+    disableMapPin: disableMapPin,
     onMapChangeDimension: function onMapChangeDimension(mapDimensionPayload) {
       if (mapDimensionPayload && mapDimensionPayload.dimension && mapDimensionPayload.dimension.name && mapDimensionPayload.dimension.name === 'time') {
         setTime$1({
@@ -22086,7 +22110,9 @@ var ConfigurableConnectedMap = function ConfigurableConnectedMap(_ref) {
       _ref$shouldShowZoomCo = _ref.shouldShowZoomControls,
       shouldShowZoomControls = _ref$shouldShowZoomCo === void 0 ? false : _ref$shouldShowZoomCo,
       _ref$displayMapPin = _ref.displayMapPin,
-      displayMapPin = _ref$displayMapPin === void 0 ? false : _ref$displayMapPin;
+      displayMapPin = _ref$displayMapPin === void 0 ? false : _ref$displayMapPin,
+      toggleTimestepAuto$1 = _ref.toggleTimestepAuto,
+      setTimestep = _ref.setTimestep;
   var classes = useStyles$4();
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || generateMapId()).current;
@@ -22155,6 +22181,22 @@ var ConfigurableConnectedMap = function ConfigurableConnectedMap(_ref) {
           timestepAuto: false
         }));
       }
+    } // Set timestep auto based on preset
+
+
+    if (toggleTimestepAuto$1 !== undefined && shouldAnimate !== true) {
+      dispatch(toggleTimestepAuto({
+        mapId: mapId,
+        timestepAuto: toggleTimestepAuto$1
+      }));
+    } // Set timestep value based on preset
+
+
+    if (setTimestep !== undefined && shouldAnimate !== true) {
+      dispatch(setTimeStep({
+        mapId: mapId,
+        timeStep: setTimestep
+      }));
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
@@ -22501,7 +22543,11 @@ var ConfigurableMapWithSliderConnect = function ConfigurableMapWithSliderConnect
       _ref$animationPayload = _ref.animationPayload,
       animationPayload = _ref$animationPayload === void 0 ? undefined : _ref$animationPayload,
       _ref$displayMapPin = _ref.displayMapPin,
-      displayMapPin = _ref$displayMapPin === void 0 ? false : _ref$displayMapPin;
+      displayMapPin = _ref$displayMapPin === void 0 ? false : _ref$displayMapPin,
+      _ref$showTimeSlider = _ref.showTimeSlider,
+      showTimeSlider = _ref$showTimeSlider === void 0 ? true : _ref$showTimeSlider,
+      toggleTimestepAuto = _ref.toggleTimestepAuto,
+      setTimestep = _ref.setTimestep;
   var classes = useStyles$2();
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.mapSliderConnect,
@@ -22510,7 +22556,7 @@ var ConfigurableMapWithSliderConnect = function ConfigurableMapWithSliderConnect
     className: classes.zoomControls
   }, /*#__PURE__*/React__default.createElement(ZoomControlConnect, {
     mapId: id
-  })), /*#__PURE__*/React__default.createElement("div", {
+  })), showTimeSlider && /*#__PURE__*/React__default.createElement("div", {
     className: classes.timeSlider
   }, /*#__PURE__*/React__default.createElement(TimeSliderConnect, {
     mapId: id,
@@ -22528,7 +22574,9 @@ var ConfigurableMapWithSliderConnect = function ConfigurableMapWithSliderConnect
     shouldAnimate: shouldAnimate,
     animationPayload: animationPayload,
     shouldShowZoomControls: shouldShowZoomControls,
-    displayMapPin: displayMapPin
+    displayMapPin: displayMapPin,
+    toggleTimestepAuto: toggleTimestepAuto,
+    setTimestep: setTimestep
   }));
 };
 
@@ -22747,11 +22795,7 @@ var SyncGroupList = function SyncGroupList(_ref) {
         return removeGroup(groupObject.id);
       },
       size: "large"
-    }, index === 0 ? /*#__PURE__*/React.createElement(Add, {
-      className: classes.iconColor
-    }) : /*#__PURE__*/React.createElement(DeleteForever, {
-      className: classes.iconColor
-    })))), /*#__PURE__*/React.createElement(SyncGroupListItem, {
+    }, index === 0 ? /*#__PURE__*/React.createElement(Add, null) : /*#__PURE__*/React.createElement(DeleteForever, null)))), /*#__PURE__*/React.createElement(SyncGroupListItem, {
       viewStateData: viewStateData,
       groupId: groupObject.id,
       selected: groupObject.selected,
@@ -22777,9 +22821,6 @@ var useStyles = makeStyles(function (theme) {
       backgroundColor: theme.palette.geowebColors.syncGroups.drawerOpen.fill,
       boxShadow: 'inset 0px 7px 7px -7px, inset 0px -7px 7px -7px',
       color: '#000000'
-    },
-    iconColor: {
-      color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
     }
   });
 });
@@ -23264,4 +23305,4 @@ 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$1 as mapConstants, selectors 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, types$1 as uiTypes, useStyles$3 as useStyles };
+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$1 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 };