@opengeoweb/core 2.1.0 → 2.1.1

package/core.esm.js

@@ -7,7 +7,7 @@ import { takeLatest, put, select, call } from 'redux-saga/effects';
 import { WMGetServiceFromStore, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer } from '@opengeoweb/webmap';
 import { makeStyles, Tooltip, Select, Grid, InputLabel, IconButton, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, createStyles, MenuItem, Checkbox, SvgIcon, ListItemIcon, Menu, FormControl, withStyles, Slider, Switch, FormControlLabel, Popover, useMediaQuery, useTheme } from '@material-ui/core';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
-import { sliderStyles, CustomSlider, ToolContainerDraggable } from '@opengeoweb/shared';
+import { sliderStyles, CustomSlider, ToolContainerDraggable, useIsMounted } from '@opengeoweb/shared';
 import _ from 'lodash';
 import { Cached, Add, MoreVert, FileCopy, Delete, DragIndicator, Link, LinkOff, DeleteForever } from '@material-ui/icons';
 import { Sortable, ReactSortable } from 'react-sortablejs';
@@ -146,8 +146,8 @@ var mapUpdateAllMapDimensions = function mapUpdateAllMapDimensions(payload) {
 /**
  * Starts the animation for a map.
  *
- * Example: mapStartAnimation({mapId:'mapId1', start: 'someISOTime', end: 'someISOTime', interval: 1000})
- * @param {object} payload Object with mapId: string, start: Moment, end: Moment and interval: number (in seconds), timeList?: TimeListType[]
+ * Example: mapStartAnimation({mapId:'mapId1', start: 'someISOTime', end: 'someISOTime', interval: 15})
+ * @param {object} payload Object with mapId: string, start: Moment, end: Moment and interval: number (in minutes), timeList?: TimeListType[]
  */
 
 var mapStartAnimation = function mapStartAnimation(payload) {
@@ -1506,6 +1506,17 @@ var types$2 = /*#__PURE__*/Object.freeze({
 });
 
 var defaultAnimationDelayAtStart = 250;
+var defaultDelay = 1000; // [ms]
+
+var speedFactors = [0.1, 0.2, 0.5, 1, 2, 4, 8, 16]; // Declares available animation speed multipliers for default delay
+
+/**
+ * Returns speed delay for given speedFactor. For options, see defined above in "speedFactors"
+ */
+
+var getSpeedDelay = function getSpeedDelay(speedFactor) {
+  return defaultDelay / speedFactor;
+};
 /**
  * Returns time bounds from the given dimension. If no time dimension given, current time is returned as default
  */
@@ -4252,10 +4263,18 @@ var getLayerActionsTargets = function getLayerActionsTargets(state, payload, act
 
 var getAddLayerActionsTargets = function getAddLayerActionsTargets(state, payload, actionType) {
   var foundTargets = findTargets(state, payload, actionType, payload.mapId);
-  return foundTargets.map(function (target) {
-    return Object.assign(Object.assign({}, target.payload), {
+  return foundTargets.map(function (_ref) {
+    var payload = _ref.payload,
+        targetId = _ref.targetId;
+    var layer = payload.layer;
+
+    layer.id;
+        var layerWithoutId = __rest(layer, ["id"]);
+
+    return Object.assign(Object.assign({}, payload), {
+      layer: layerWithoutId,
       layerId: generateLayerId(),
-      mapId: target.targetId,
+      mapId: targetId,
       origin: ORIGIN_GENERIC_SYNCHRONIZATIONGROUP_UTILS_ADDACTION
     });
   });
@@ -4984,7 +5003,7 @@ var synchronizationGroupConfig = {
   sagas: [rootSaga$3, rootSaga$2]
 };
 
-var useStyles$z = makeStyles(function (theme) {
+var useStyles$A = makeStyles(function (theme) {
   return {
     select: {
       '& ul': {
@@ -5039,7 +5058,7 @@ var TooltipSelect = function TooltipSelect(_a) {
       tooltipOpen = _React$useState4[0],
       setTooltipOpen = _React$useState4[1];
 
-  var classes = useStyles$z();
+  var classes = useStyles$A();
   var onWheel = React.useCallback(function (event) {
     if (selectOpen) return;
     var direction = event.deltaY < 0 ? 1 : -1;
@@ -5498,12 +5517,32 @@ var uiModuleConfig = {
   sagas: [rootSaga$1]
 };
 
+/**
+ * Checks if the layer id is already taken in one of the maps.
+ * @param state The WebMapState
+ * @param layerIdToCheck The layerId to check
+ * @returns true if the layerId is already taken somewhere else.
+ */
+
+var checkIfMapLayerIdIsAlreadyTaken = function checkIfMapLayerIdIsAlreadyTaken(state, layerId) {
+  return state.allIds.some(function (mapId) {
+    var map = state.byId[mapId];
+
+    var doesLayeridExist = function doesLayeridExist(layers) {
+      return layers && layers.some(function (id) {
+        return id === layerId;
+      });
+    };
+
+    return doesLayeridExist(map.mapLayers) || doesLayeridExist(map.overLayers) || doesLayeridExist(map.baseLayers) || doesLayeridExist(map.featureLayers);
+  });
+};
 /**
  * Addes id's to the layer object. All layers need to have an id for referring.
  * @param layers
  */
 
-var createLayersWithIds = function createLayersWithIds(layers) {
+var createLayersWithIds = function createLayersWithIds(state, layers) {
   if (!layers) return layers;
   return produce$1(layers, function (draft) {
     for (var j = 0; j < draft.length; j += 1) {
@@ -5511,6 +5550,9 @@ var createLayersWithIds = function createLayersWithIds(layers) {
 
       if (!layer.id) {
         layer.id = generateLayerId();
+      } else if (checkIfMapLayerIdIsAlreadyTaken(state, layer.id)) {
+        console.warn("Warning: Layer id ".concat(layer.id, " was already taken: Generating new one."));
+        layer.id = generateLayerId();
       }
     }
   });
@@ -5562,21 +5604,17 @@ var reducer$1 = function reducer() {
           return state;
         }
 
-        var layerIndex = state.byId[_mapId2].mapLayers.indexOf(layerId);
-
-        if (layerIndex >= 0) {
-          // Do nothing if layerId is already used
+        if (checkIfMapLayerIdIsAlreadyTaken(state, layerId)) {
+          console.warn("Warning: Layer id ".concat(layerId, " was already taken"));
           return state;
         }
 
         return produce$1(state, function (draft) {
-          if (layerIndex === -1) {
-            if (!state.byId[_mapId2].mapLayers.length) {
-              draft.byId[_mapId2].activeLayerId = layerId;
-            }
-
-            draft.byId[_mapId2].mapLayers.unshift(layerId);
+          if (!state.byId[_mapId2].mapLayers.length) {
+            draft.byId[_mapId2].activeLayerId = layerId;
           }
+
+          draft.byId[_mapId2].mapLayers.unshift(layerId);
         });
       }
 
@@ -5635,6 +5673,19 @@ var reducer$1 = function reducer() {
 
         return produce$1(state, function (draft) {
           draft.byId[_mapId6].isAnimating = true;
+
+          if (action.payload.start) {
+            draft.byId[_mapId6].animationStartTime = action.payload.start.toISOString();
+          }
+
+          if (action.payload.end) {
+            draft.byId[_mapId6].animationEndTime = action.payload.end.toISOString();
+          }
+
+          if (action.payload.interval && action.payload.interval !== draft.byId[_mapId6].timeStep) {
+            draft.byId[_mapId6].timeStep = action.payload.interval;
+            draft.byId[_mapId6].isTimestepAuto = false;
+          }
         });
       }
 
@@ -5662,33 +5713,20 @@ var reducer$1 = function reducer() {
           return state;
         }
 
-        if (layer.layerType === LayerType.baseLayer) {
-          var _layerIndex = state.byId[_mapId8].baseLayers.indexOf(_layerId);
-
-          if (_layerIndex >= 0) {
-            // Do nothing if layerId is already used
-            return state;
-          }
+        if (checkIfMapLayerIdIsAlreadyTaken(state, _layerId)) {
+          console.warn("Warning: Layer id ".concat(_layerId, " was already taken"));
+          return state;
+        }
 
+        if (layer.layerType === LayerType.baseLayer) {
           return produce$1(state, function (draft) {
-            if (_layerIndex === -1) {
-              draft.byId[_mapId8].baseLayers.unshift(_layerId);
-            }
+            draft.byId[_mapId8].baseLayers.unshift(_layerId);
           });
         }
 
         if (layer.layerType === LayerType.overLayer) {
-          var _layerIndex2 = state.byId[_mapId8].overLayers.indexOf(_layerId);
-
-          if (_layerIndex2 >= 0) {
-            // Do nothing if layerId is already used
-            return state;
-          }
-
           return produce$1(state, function (draft) {
-            if (_layerIndex2 === -1) {
-              draft.byId[_mapId8].overLayers.unshift(_layerId);
-            }
+            draft.byId[_mapId8].overLayers.unshift(_layerId);
           });
         }
 
@@ -5761,7 +5799,7 @@ var reducer$1 = function reducer() {
     case WEBMAP_SET_LAYERS:
       {
         var _mapId13 = action.payload.mapId;
-        var layersWithIds = createLayersWithIds(action.payload.layers);
+        var layersWithIds = createLayersWithIds(state, action.payload.layers);
         var layerIds = layersWithIds.map(function (_ref) {
           var id = _ref.id;
           return id;
@@ -5808,8 +5846,8 @@ var reducer$1 = function reducer() {
             baseLayers.push(layer);
           }
         });
-        var baseLayersWithIds = createLayersWithIds(baseLayers);
-        var overLayersWithIds = createLayersWithIds(overLayers);
+        var baseLayersWithIds = createLayersWithIds(state, baseLayers);
+        var overLayersWithIds = createLayersWithIds(state, overLayers);
         var baseLayerIds = baseLayersWithIds.map(function (_ref2) {
           var id = _ref2.id;
           return id;
@@ -6167,12 +6205,14 @@ var _marked = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
     _marked5 = /*#__PURE__*/regeneratorRuntime.mark(setLayerDimensionsSaga),
     _marked6 = /*#__PURE__*/regeneratorRuntime.mark(toggleAutoUpdateSaga),
     _marked7 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
+
 var generateTimeList = function generateTimeList(start, end, interval) {
   var timeList = [];
   var unixStart = moment(start).utc().unix();
   var unixEnd = moment(end).utc().unix();
+  var intervalSeconds = interval * 60;
 
-  for (var j = unixStart; j <= unixEnd; j += interval) {
+  for (var j = unixStart; j <= unixEnd; j += intervalSeconds) {
     timeList.push({
       name: 'time',
       value: moment.unix(j).toISOString()
@@ -6199,8 +6239,8 @@ function startAnimationSaga(_ref) {
         case 0:
           payload = _ref.payload;
           mapId = payload.mapId, start = payload.start, end = payload.end, interval = payload.interval, timeList = payload.timeList;
-          roundedStart = roundWithTimeStep(start && start.unix(), interval / 60, 'ceil');
-          roundedEnd = roundWithTimeStep(end && end.unix(), interval / 60, 'floor');
+          roundedStart = roundWithTimeStep(start && start.unix(), interval, 'ceil');
+          roundedEnd = roundWithTimeStep(end && end.unix(), interval, 'floor');
           _context.next = 6;
           return timeList || generateTimeList(moment.utc(roundedStart * 1000), moment.utc(roundedEnd * 1000), interval);
 
@@ -6320,7 +6360,7 @@ function updateAnimation(mapId, maxValue) {
             mapId: mapId,
             start: start,
             end: end,
-            interval: timeStep * 60
+            interval: timeStep
           }));
 
         case 23:
@@ -6331,7 +6371,7 @@ function updateAnimation(mapId, maxValue) {
   }, _marked4);
 }
 function setLayerDimensionsSaga(_ref4) {
-  var payload, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension;
+  var payload, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance;
   return regeneratorRuntime.wrap(function setLayerDimensionsSaga$(_context5) {
     while (1) {
       switch (_context5.prev = _context5.next) {
@@ -6372,14 +6412,20 @@ function setLayerDimensionsSaga(_ref4) {
 
         case 18:
           prevTimeDimension = _context5.sent;
+          _context5.next = 21;
+          return select(isAnimating, mapId);
+
+        case 21:
+          isAnimating$1 = _context5.sent;
+          webmapInstance = getWMJSMapById(mapId);
 
           if (!(layerId === activeLayerId && // only update the active layer
           shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue)) {
-            _context5.next = 24;
+            _context5.next = 30;
             break;
           }
 
-          _context5.next = 22;
+          _context5.next = 26;
           return put(layerChangeDimension({
             layerId: layerId,
             origin: 'setLayerDimensionSaga',
@@ -6389,26 +6435,39 @@ function setLayerDimensionsSaga(_ref4) {
             }
           }));
 
-        case 22:
-          _context5.next = 24;
+        case 26:
+          _context5.next = 28;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 24:
-          _context5.next = 29;
+        case 28:
+          _context5.next = 33;
           break;
 
-        case 26:
-          _context5.prev = 26;
+        case 30:
+          if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue)) {
+            _context5.next = 33;
+            break;
+          }
+
+          _context5.next = 33;
+          return call(updateAnimation, mapId, newTimeDimension.maxValue);
+
+        case 33:
+          _context5.next = 38;
+          break;
+
+        case 35:
+          _context5.prev = 35;
           _context5.t0 = _context5["catch"](1);
           // eslint-disable-next-line no-console
           console.warn(_context5.t0);
 
-        case 29:
+        case 38:
         case "end":
           return _context5.stop();
       }
     }
-  }, _marked5, null, [[1, 26]]);
+  }, _marked5, null, [[1, 35]]);
 }
 function toggleAutoUpdateSaga(_ref5) {
   var payload, shouldAutoUpdate, mapId, layerId, timeDimension;
@@ -6606,6 +6665,23 @@ var getLayersFromService = function getLayersFromService(serviceUrl) {
     }, forceReload);
   });
 };
+/**
+ * Returns a promise with a webmapjs node structure layers from the WMS GetCapabilities document.
+ * @param serviceUrl The URL of the WMS service
+ * @param {boolean} forceReload **optional** forceReload: boolean, true will force the layers to be reloaded from the service, defaults to false
+ */
+
+var getLayerNodesFromService = function getLayerNodesFromService(serviceUrl) {
+  var forceReload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return new Promise(function (resolve, reject) {
+    var serviceObject = WMGetServiceFromStore(serviceUrl);
+    serviceObject.getNodes(function (nodes) {
+      resolve(nodes.children);
+    }, function (error) {
+      reject(new Error(error));
+    }, forceReload);
+  });
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -7510,7 +7586,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$y = makeStyles({
+var useStyles$z = makeStyles({
   buttonDiv: {
     position: 'relative'
   },
@@ -7546,7 +7622,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$y();
+  var classes = useStyles$z();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -7698,7 +7774,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var useStyles$x = makeStyles(function (theme) {
+var useStyles$y = makeStyles(function (theme) {
   return {
     buttonDiv: {
       position: 'relative'
@@ -7733,7 +7809,7 @@ 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$x();
+  var classes = useStyles$y();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -7842,6 +7918,65 @@ var widthToWidthClass = function widthToWidthClass(w) {
   return LayerManagerWidth.lg;
 };
 
+/* *
+ * 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$x = makeStyles(function (theme) {
+  return {
+    button: {
+      width: '24px',
+      height: '24px',
+      margin: '6px 0px 0px 10px',
+      color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
+      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$x();
+  var currentActiveMapId = useSelector(function (store) {
+    return getDialogMapId(store, 'layerSelect');
+  });
+  var isOpenInStore = useSelector(function (store) {
+    return getisDialogOpen(store, 'layerSelect');
+  });
+  var openLayerSelectDialog = React.useCallback(function () {
+    dispatch(setActiveMapIdForDialog({
+      type: 'layerSelect',
+      activeMapId: mapId,
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: source
+    }));
+  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Layer Select"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: openLayerSelectDialog,
+    className: classes.button,
+    id: "layerSelectButton",
+    "data-testid": "layerSelectButton",
+    disableRipple: true
+  }, /*#__PURE__*/React.createElement(Add, null)));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -7879,7 +8014,9 @@ var DescriptionRow = function DescriptionRow(_ref) {
       preloadedServices = _ref$preloadedService === void 0 ? preloadedDefaultMapServices : _ref$preloadedService,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip,
-      layerManagerWidth = _ref.layerManagerWidth;
+      layerManagerWidth = _ref.layerManagerWidth,
+      _ref$layerSelect = _ref.layerSelect,
+      layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
   var classes = useStyles$w();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
@@ -7901,6 +8038,8 @@ var DescriptionRow = function DescriptionRow(_ref) {
       });
     },
     shouldFocus: true
+  }), layerSelect && /*#__PURE__*/React.createElement(LayerSelectButtonConnect, {
+    mapId: mapId
   })), /*#__PURE__*/React.createElement(Grid, {
     className: columnSizes.column2
   }, /*#__PURE__*/React.createElement("div", {
@@ -8536,7 +8675,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: sliderClasses.sliderHeader
   }, "Opacity"), /*#__PURE__*/React.createElement(CustomSlider, {
-    dataTestId: "opacitySlider",
+    "data-testid": "opacitySlider",
     orientation: "vertical",
     value: currentOpacity,
     step: 0.01,
@@ -9919,7 +10058,11 @@ var LayerManager = function LayerManager(_ref) {
       _ref$order = _ref.order,
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
-      source = _ref$source === void 0 ? 'app' : _ref$source;
+      source = _ref$source === void 0 ? 'app' : _ref$source,
+      _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$j();
 
   var _React$useState = React.useState(LayerManagerWidth.lg),
@@ -9961,9 +10104,10 @@ var LayerManager = function LayerManager(_ref) {
     className: classes.layerRowContainer
   }, /*#__PURE__*/React.createElement(DescriptionRow, {
     mapId: mapId,
-    tooltip: "Add Layers",
+    tooltip: showAddLayersTooltip ? 'Add Layers' : '',
     layerManagerWidth: layerManagerWidth,
-    preloadedServices: preloadedMapServices
+    preloadedServices: preloadedMapServices,
+    layerSelect: layerSelect
   }), /*#__PURE__*/React.createElement(LayerContainerRow, {
     mapId: mapId,
     layerManagerWidth: layerManagerWidth
@@ -9976,6 +10120,60 @@ 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 LayerSelect = function LayerSelect(_ref) {
+  var mapId = _ref.mapId,
+      bounds = _ref.bounds,
+      _ref$onClose = _ref.onClose,
+      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+      showTitle = _ref.showTitle,
+      isOpen = _ref.isOpen,
+      _ref$onMouseDown = _ref.onMouseDown,
+      onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'module' : _ref$source;
+  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+    title: showTitle ? "Layer Select ".concat(mapId) : 'Layer Select',
+    startSize: {
+      width: 500,
+      height: 500
+    },
+    minWidth: 300,
+    minHeight: 126,
+    startPosition: {
+      top: 100,
+      left: 100
+    },
+    isOpen: isOpen,
+    onChangeSize: function onChangeSize() {},
+    onClose: onClose,
+    headerSize: "small",
+    bounds: bounds,
+    "data-testid": "layerSelectWindow",
+    onMouseDown: onMouseDown,
+    order: order,
+    source: source
+  }, /*#__PURE__*/React.createElement("div", null));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -9993,34 +10191,33 @@ var LayerManager = function LayerManager(_ref) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 /**
- * Layer Managerconnected to the store displaying the layers forthe active map Id
- * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
- * a dialog should have the <LayerManagerMapButtonConnect/> which is used to focus the correct map and open the dialog
+ * LayerSelectConnect is a component that is opened from LayerManager
+ * It's used to add Services and Layers to the application
+ * It doesn't expect any props, its subcomponents only read and write to redux store
  *
- * Expects the following props:
- * @param {Service[]} preloadedMapServices preloadedMapServices: array of Service objects - contains an array of Service objects that are preloaded into in the WMS Loader for maplayers
- * @param {Service[]} preloadedBaseServices preloadedBaseServices: array of Service objects - contains an array of Service objects that are preloaded into in the WMS Loader fpr baselayers
- * @param {Layer[]} preloadedAvailableBaseLayers preloadedAvailableBaseLayers: array of Layer objects - contains an array of Layer objects (consisting solely of type baseLayer) that are available to be shown as basemaps
- * ``` <LayerManagerConnect />```
+ * ``` <LayerSelectConnect />```
  */
 
-var LayerManagerConnect = function LayerManagerConnect(_ref) {
-  var preloadedAvailableBaseLayers = _ref.preloadedAvailableBaseLayers,
-      preloadedMapServices = _ref.preloadedMapServices,
-      preloadedBaseServices = _ref.preloadedBaseServices,
-      bounds = _ref.bounds,
+var LayerSelectConnect = function LayerSelectConnect(_ref) {
+  var bounds = _ref.bounds,
       _ref$showTitle = _ref.showTitle,
-      showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle;
+      showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle,
+      _ref$preloadedService = _ref.preloadedServices,
+      preloadedServices = _ref$preloadedService === void 0 ? preloadedDefaultMapServices : _ref$preloadedService;
   var dispatch = useDispatch();
-  var isOpenInStore = useSelector(function (store) {
-    return getisDialogOpen(store, 'layerManager');
-  });
+
+  var _useIsMounted = useIsMounted(),
+      isMounted = _useIsMounted.isMounted;
+
   var mapId = useSelector(function (store) {
-    return getDialogMapId(store, 'layerManager');
+    return getDialogMapId(store, 'layerSelect');
+  });
+  var isOpenInStore = useSelector(function (store) {
+    return getisDialogOpen(store, 'layerSelect');
   });
   var onClose = React.useCallback(function () {
     return dispatch(setToggleOpenDialog({
-      type: 'layerManager',
+      type: 'layerSelect',
       setOpen: false
     }));
   }, [dispatch]);
@@ -10028,13 +10225,13 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
     return getIsMapPresent(store, mapId);
   });
   var uiOrder = useSelector(function (store) {
-    return getDialogOrder(store, 'layerManager');
+    return getDialogOrder(store, 'layerSelect');
   });
   var uiSource = useSelector(function (store) {
-    return getDialogSource(store, 'layerManager');
+    return getDialogSource(store, 'layerSelect');
   });
   var uiIsOrderedOnTop = useSelector(function (store) {
-    return getDialogIsOrderedOnTop(store, 'layerManager');
+    return getDialogIsOrderedOnTop(store, 'layerSelect');
   }); // Check to ensure the currently active map is still present on screen - if not, close the dialog
 
   React.useEffect(function () {
@@ -10044,19 +10241,19 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
   }, [mapId, isMapPresent, onClose]);
   var registerDialog$1 = React.useCallback(function () {
     return dispatch(registerDialog({
-      type: 'layerManager',
+      type: 'layerSelect',
       setOpen: false
     }));
   }, [dispatch]);
   var unregisterDialog$1 = React.useCallback(function () {
     return dispatch(unregisterDialog({
-      type: 'layerManager'
+      type: 'layerSelect'
     }));
   }, [dispatch]);
   var onOrderDialog = React.useCallback(function () {
     if (!uiIsOrderedOnTop) {
       dispatch(orderDialog({
-        type: 'layerManager'
+        type: 'layerSelect'
       }));
     }
   }, [dispatch, uiIsOrderedOnTop]); // Register this dialog in the store
@@ -10067,11 +10264,28 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
       unregisterDialog$1();
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(LayerManager, {
+  var serviceSetLayers$1 = React.useCallback(function (payload) {
+    return dispatch(serviceSetLayers(payload));
+  }, [dispatch]);
+  React.useEffect(function () {
+    if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
+      preloadedServices.forEach(function (service) {
+        getLayerNodesFromService(service.url).then(function (layers) {
+          if (isMounted.current) {
+            serviceSetLayers$1({
+              service: service.url,
+              layers: layers
+            });
+          }
+        })["catch"](function () {
+          return null;
+        });
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [isOpenInStore, preloadedServices, serviceSetLayers$1]);
+  return /*#__PURE__*/React.createElement(LayerSelect, {
     mapId: mapId,
-    preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
-    preloadedMapServices: preloadedMapServices,
-    preloadedBaseServices: preloadedBaseServices,
     bounds: bounds,
     isOpen: isOpenInStore,
     onClose: onClose,
@@ -10098,48 +10312,157 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useButtonStyles = makeStyles(function (theme) {
-  return createStyles({
-    button: {
-      height: '24px',
-      width: function width(_ref) {
-        var _width = _ref.width;
-        return _width ? "".concat(_width, "px") : '24px';
-      },
-      border: 0,
-      backgroundColor: theme.palette.geowebColors.buttons.surfaceIconDefault.fill,
-      borderRadius: '4.5px',
-      textTransform: 'none',
-      '& svg path, svg text': {
-        fill: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
-      },
-      '&:hover': {
-        backgroundColor: theme.palette.geowebColors.buttons.flatMouseover.fill
-      },
-      '&:disabled': {
-        backgroundColor: theme.palette.geowebColors.buttons.disabled.fill,
-        '& svg path, svg text': {
-          fill: theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
-        }
-      },
-      '&.Mui-selected': {
-        backgroundColor: theme.palette.geowebColors.buttons.primaryActive.fill,
-        '&:hover': {
-          backgroundColor: theme.palette.geowebColors.buttons.primaryMouseover.fill
-        },
-        '& svg': {
-          backgroundColor: 'transparent'
-        },
-        '& svg path, svg text': {
-          fill: theme.palette.geowebColors.typographyAndIcons.buttonIcon
-        }
-      }
-    }
-  });
-});
-
-var ToggleIconButton = function ToggleIconButton(_a) {
-  var active = _a.active,
+/**
+ * Layer Managerconnected to the store displaying the layers forthe active map Id
+ * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
+ * a dialog should have the <LayerManagerMapButtonConnect/> which is used to focus the correct map and open the dialog
+ *
+ * Expects the following props:
+ * @param {Service[]} preloadedMapServices preloadedMapServices: array of Service objects - contains an array of Service objects that are preloaded into in the WMS Loader for maplayers
+ * @param {Service[]} preloadedBaseServices preloadedBaseServices: array of Service objects - contains an array of Service objects that are preloaded into in the WMS Loader fpr baselayers
+ * @param {Layer[]} preloadedAvailableBaseLayers preloadedAvailableBaseLayers: array of Layer objects - contains an array of Layer objects (consisting solely of type baseLayer) that are available to be shown as basemaps
+ * ``` <LayerManagerConnect />```
+ */
+
+var LayerManagerConnect = function LayerManagerConnect(_ref) {
+  var preloadedAvailableBaseLayers = _ref.preloadedAvailableBaseLayers,
+      preloadedMapServices = _ref.preloadedMapServices,
+      preloadedBaseServices = _ref.preloadedBaseServices,
+      bounds = _ref.bounds,
+      _ref$showTitle = _ref.showTitle,
+      showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle,
+      _ref$layerSelect = _ref.layerSelect,
+      layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
+  var dispatch = useDispatch();
+  var isOpenInStore = useSelector(function (store) {
+    return getisDialogOpen(store, 'layerManager');
+  });
+  var mapId = useSelector(function (store) {
+    return getDialogMapId(store, 'layerManager');
+  });
+  var onClose = React.useCallback(function () {
+    return dispatch(setToggleOpenDialog({
+      type: 'layerManager',
+      setOpen: false
+    }));
+  }, [dispatch]);
+  var isMapPresent = useSelector(function (store) {
+    return getIsMapPresent(store, mapId);
+  });
+  var uiOrder = useSelector(function (store) {
+    return getDialogOrder(store, 'layerManager');
+  });
+  var uiSource = useSelector(function (store) {
+    return getDialogSource(store, 'layerManager');
+  });
+  var uiIsOrderedOnTop = useSelector(function (store) {
+    return getDialogIsOrderedOnTop(store, 'layerManager');
+  }); // Check to ensure the currently active map is still present on screen - if not, close the dialog
+
+  React.useEffect(function () {
+    if (mapId !== '' && !isMapPresent) {
+      onClose();
+    }
+  }, [mapId, isMapPresent, onClose]);
+  var registerDialog$1 = React.useCallback(function () {
+    return dispatch(registerDialog({
+      type: 'layerManager',
+      setOpen: false
+    }));
+  }, [dispatch]);
+  var unregisterDialog$1 = React.useCallback(function () {
+    return dispatch(unregisterDialog({
+      type: 'layerManager'
+    }));
+  }, [dispatch]);
+  var onOrderDialog = React.useCallback(function () {
+    if (!uiIsOrderedOnTop) {
+      dispatch(orderDialog({
+        type: 'layerManager'
+      }));
+    }
+  }, [dispatch, uiIsOrderedOnTop]); // Register this dialog in the store
+
+  React.useEffect(function () {
+    registerDialog$1();
+    return function () {
+      unregisterDialog$1();
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LayerManager, {
+    mapId: mapId,
+    preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
+    preloadedMapServices: preloadedMapServices,
+    preloadedBaseServices: preloadedBaseServices,
+    bounds: bounds,
+    isOpen: isOpenInStore,
+    onClose: onClose,
+    showTitle: showTitle,
+    onMouseDown: onOrderDialog,
+    order: uiOrder,
+    source: uiSource,
+    layerSelect: layerSelect
+  }), layerSelect && /*#__PURE__*/React.createElement(LayerSelectConnect, null));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var useButtonStyles = makeStyles(function (theme) {
+  return createStyles({
+    button: {
+      height: '24px',
+      width: function width(_ref) {
+        var _width = _ref.width;
+        return _width ? "".concat(_width, "px") : '24px';
+      },
+      border: 0,
+      backgroundColor: theme.palette.geowebColors.buttons.surfaceIconDefault.fill,
+      borderRadius: '4.5px',
+      textTransform: 'none',
+      '& svg path, svg text': {
+        fill: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
+      },
+      '&:hover': {
+        backgroundColor: theme.palette.geowebColors.buttons.flatMouseover.fill
+      },
+      '&:disabled': {
+        backgroundColor: theme.palette.geowebColors.buttons.disabled.fill,
+        '& svg path, svg text': {
+          fill: theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
+        }
+      },
+      '&.Mui-selected': {
+        backgroundColor: theme.palette.geowebColors.buttons.primaryActive.fill,
+        '&:hover': {
+          backgroundColor: theme.palette.geowebColors.buttons.primaryMouseover.fill
+        },
+        '& svg': {
+          backgroundColor: 'transparent'
+        },
+        '& svg path, svg text': {
+          fill: theme.palette.geowebColors.typographyAndIcons.buttonIcon
+        }
+      }
+    }
+  });
+});
+
+var ToggleIconButton = function ToggleIconButton(_a) {
+  var active = _a.active,
       width = _a.width,
       children = _a.children,
       props = __rest(_a, ["active", "width", "children"]);
@@ -11183,9 +11506,6 @@ var useStyles$g = makeStyles(function (theme) {
     }
   };
 });
-var defaultDelay = 1000; // [ms]
-
-var speedFactors = [0.1, 0.2, 0.5, 1, 2, 4, 8, 16]; // Declares available animation speed multipliers for default delay
 
 var SpeedButton = function SpeedButton(_ref) {
   var animationDelay = _ref.animationDelay,
@@ -11200,7 +11520,7 @@ var SpeedButton = function SpeedButton(_ref) {
 
   var marks = speedFactors.map(function (speedFactor, i) {
     return {
-      delay: defaultDelay / speedFactor,
+      delay: getSpeedDelay(speedFactor),
       markPos: i,
       text: "".concat(speedFactor, "x")
     };
@@ -11252,7 +11572,7 @@ var SpeedButton = function SpeedButton(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: sliderClasses.sliderHeader
   }, "Speed"), /*#__PURE__*/React.createElement(CustomSlider, {
-    dataTestId: "speedSlider",
+    "data-testid": "speedSlider",
     orientation: "vertical",
     value: currentValue,
     step: null,
@@ -11410,21 +11730,6 @@ var useStyles$f = makeStyles(function (theme) {
     disabled: {}
   };
 });
-
-var ThumbComponent = function ThumbComponent(props) {
-  var ref = React.useRef(null);
-  React.useEffect(function () {
-    if (ref.current) {
-      ref.current.focus();
-    }
-  }, []);
-  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
-    ref: ref,
-    "data-testid": "timeStepButtonSliderThumb",
-    id: "thumbTimeStep"
-  }));
-};
-
 var TimeStepSwitch = withStyles(function (theme) {
   return {
     root: {
@@ -11529,7 +11834,7 @@ var TimeStepButton = function TimeStepButton(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: sliderClasses.sliderHeader
   }, "Time step"), /*#__PURE__*/React.createElement(CustomSlider, {
-    dataTestId: "timeStepButtonSlider",
+    "data-testid": "timeStepButtonSlider",
     orientation: "vertical",
     value: currentMark && currentMark.value ? currentMark.value : 0,
     step: null,
@@ -11537,9 +11842,9 @@ var TimeStepButton = function TimeStepButton(_ref) {
     max: timeStepMarks[timeStepMarks.length - 1].value,
     marks: timeStepMarks,
     disabled: disabledSlider,
-    ThumbComponent: ThumbComponent,
     onChange: onChangeSlider,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    shouldAutoFocus: true
   }), /*#__PURE__*/React.createElement(Tooltip, {
     title: timestepAutoSwitch.title
   }, /*#__PURE__*/React.createElement("span", {
@@ -14042,6 +14347,7 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
+var animationIntervalDefault = 5;
 var connectRedux$3 = connect(function (store, props) {
   return {
     isAnimating: isAnimating(store, props.mapId),
@@ -14062,8 +14368,7 @@ var PlayButtonConnect = connectRedux$3(function (_ref) {
       timeStep = _ref.timeStep,
       mapStartAnimation = _ref.mapStartAnimation,
       mapStopAnimation = _ref.mapStopAnimation;
-  var animationIntervalDefault = 300;
-  var animationInterval = timeStep ? timeStep * 60 : animationIntervalDefault;
+  var animationInterval = timeStep || animationIntervalDefault;
 
   var onTogglePlay = function onTogglePlay() {
     if (isAnimating) {
@@ -14571,125 +14876,6 @@ var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
 
 var TimeSliderConnect = connectRedux(ConnectedTimeSlider);
 
-/* *
- * 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 generateUniqueLayerIds = function generateUniqueLayerIds(layers, activeLayerId) {
-  // if there is an activeLayerId given, generate a unique id for it
-  var activeLayerNewId = activeLayerId ? generateLayerId() : activeLayerId; // first match is set as activeLayer because there can only be one
-
-  var activeLayerIndex = layers.findIndex(function (layer) {
-    return layer.id === activeLayerId;
-  });
-  var layersNewIds = layers.map(function (layer, index) {
-    if (layer.id && index === activeLayerIndex) {
-      return Object.assign(Object.assign({}, layer), {
-        id: activeLayerNewId
-      });
-    }
-
-    return Object.assign(Object.assign({}, layer), {
-      id: generateLayerId()
-    });
-  });
-  return {
-    layersNewIds: layersNewIds,
-    activeLayerNewId: activeLayerNewId
-  };
-};
-
-/* *
- * 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 initialBbox = {
-  srs: 'EPSG:3857',
-  bbox: {
-    left: -450651.2255879827,
-    bottom: 6490531.093143953,
-    right: 1428345.8183648037,
-    top: 7438773.776232235
-  }
-};
-var useDefaultMapSettings = function useDefaultMapSettings() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var dispatch = useDispatch();
-  var _props$mapId = props.mapId,
-      mapId = _props$mapId === void 0 ? 'test-map-1' : _props$mapId;
-  var _props$layers = props.layers,
-      layers = _props$layers === void 0 ? [] : _props$layers,
-      _props$activeLayerId = props.activeLayerId,
-      activeLayerId = _props$activeLayerId === void 0 ? undefined : _props$activeLayerId,
-      _props$baseLayers = props.baseLayers,
-      baseLayers = _props$baseLayers === void 0 ? [Object.assign(Object.assign({}, baseLayerGrey$1), {
-    id: "layer-grey-".concat(mapId)
-  }), overLayer$1] : _props$baseLayers,
-      _props$bbox = props.bbox,
-      bbox = _props$bbox === void 0 ? initialBbox.bbox : _props$bbox,
-      _props$srs = props.srs,
-      srs = _props$srs === void 0 ? initialBbox.srs : _props$srs,
-      _props$shouldAutoUpda = props.shouldAutoUpdate,
-      shouldAutoUpdate = _props$shouldAutoUpda === void 0 ? false : _props$shouldAutoUpda; // make sure all layers have a unique id before going forward
-
-  var _generateUniqueLayerI = generateUniqueLayerIds(layers, activeLayerId),
-      layersNewIds = _generateUniqueLayerI.layersNewIds,
-      activeLayerNewId = _generateUniqueLayerI.activeLayerNewId;
-
-  React.useEffect(function () {
-    // set layers
-    dispatch(setLayers({
-      mapId: mapId,
-      layers: layersNewIds
-    })); // set active layer if given otherwise to first layer
-
-    dispatch(setActiveLayerId({
-      mapId: mapId,
-      layerId: activeLayerNewId || layersNewIds.length && layersNewIds[0].id
-    })); //  baseLayers
-
-    dispatch(setBaseLayers({
-      mapId: mapId,
-      layers: baseLayers
-    })); // bbox
-
-    dispatch(setBbox$1({
-      bbox: bbox,
-      srs: srs,
-      mapId: mapId
-    })); // auto update
-
-    dispatch(toggleAutoUpdate({
-      mapId: mapId,
-      shouldAutoUpdate: shouldAutoUpdate
-    })); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17646,21 +17832,31 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
       if (children !== this.currentMapProps.children) {
         var _ret = function () {
-          var wmjsLayers = _this2.adaguc.webMapJS.getLayers();
-
           var myChildren = [];
+          var takenIds = new Set();
           React.Children.forEach(children, function (child) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            if (child && child.props && child.props.id) {
-              myChildren.push(child);
-            } else if (child !== null) {
-              debug(DebugType.Error, 'ReactWMJSLayer ignored', child);
+            if (child) {
+              var childProps = child.props;
+
+              if (childProps && childProps.id) {
+                if (!takenIds.has(childProps.id)) {
+                  myChildren.push(child);
+                  takenIds.add(childProps.id);
+                } else {
+                  childProps.onLayerError(childProps, new Error("Duplicate layer id \"".concat(childProps.id, "\" encountered within this WebMap")), _this2.adaguc.webMapJS);
+                  console.warn('ReactWMJSLayer has a duplicate id', child);
+                }
+              } else {
+                debug(DebugType.Warning, 'ReactElement child ignored: has no props or id', child);
+              }
             }
           });
           myChildren.reverse();
+
+          var wmjsLayers = _this2.adaguc.webMapJS.getLayers();
           /* ReactWMJSLayer Layer Childs: Detect all ReactLayers connected to WMJSLayers, remove WMJSLayer if there is no ReactLayer */
 
+
           var _loop = function _loop(l) {
             if (myChildren.filter(function (c) {
               return c && c.props && c.props.id === wmjsLayers[l].ReactWMJSLayerId;
@@ -18920,14 +19116,51 @@ var LegendMapButtonConnect = function LegendMapButtonConnect(_ref) {
  * 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)
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var generateUniqueLayerIds = function generateUniqueLayerIds(layers, activeLayerId) {
+  // if there is an activeLayerId given, generate a unique id for it
+  var activeLayerNewId = activeLayerId ? generateLayerId() : activeLayerId; // first match is set as activeLayer because there can only be one
+
+  var activeLayerIndex = layers.findIndex(function (layer) {
+    return layer.id === activeLayerId;
+  });
+  var layersNewIds = layers.map(function (layer, index) {
+    if (layer.id && index === activeLayerIndex) {
+      return Object.assign(Object.assign({}, layer), {
+        id: activeLayerNewId
+      });
+    }
+
+    return Object.assign(Object.assign({}, layer), {
+      id: generateLayerId()
+    });
+  });
+  return {
+    layersNewIds: layersNewIds,
+    activeLayerNewId: activeLayerNewId
+  };
+};
+
+/* *
+ * 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$4 = makeStyles(function (theme) {
   return {
-    draggableThing: {
-      boxShadow: '4px 4px 15px 1px rgba(0,0,0,0.75)'
-    },
     mapTitle: {
       position: 'absolute',
       padding: '5px',
@@ -18943,6 +19176,15 @@ var useStyles$4 = makeStyles(function (theme) {
     }
   };
 });
+var defaultBbox = {
+  srs: 'EPSG:3857',
+  bbox: {
+    left: -450651.2255879827,
+    bottom: 6490531.093143953,
+    right: 1428345.8183648037,
+    top: 7438773.776232235
+  }
+};
 var ConfigurableConnectedMap = function ConfigurableConnectedMap(_ref) {
   var id = _ref.id,
       title = _ref.title,
@@ -18961,43 +19203,94 @@ var ConfigurableConnectedMap = function ConfigurableConnectedMap(_ref) {
       displayDimensionSelectButtonInMap = _ref$displayDimension === void 0 ? true : _ref$displayDimension,
       _ref$shouldAutoUpdate = _ref.shouldAutoUpdate,
       shouldAutoUpdate = _ref$shouldAutoUpdate === void 0 ? false : _ref$shouldAutoUpdate,
+      _ref$shouldAnimate = _ref.shouldAnimate,
+      shouldAnimate = _ref$shouldAnimate === void 0 ? false : _ref$shouldAnimate,
+      _ref$animationPayload = _ref.animationPayload,
+      animationPayload = _ref$animationPayload === void 0 ? undefined : _ref$animationPayload,
       _ref$shouldShowZoomCo = _ref.shouldShowZoomControls,
       shouldShowZoomControls = _ref$shouldShowZoomCo === void 0 ? false : _ref$shouldShowZoomCo;
-  var myMapId = React__default.useRef(id || generateMapId()).current;
-  var baseLayerWithUniqueId = Object.assign(Object.assign({}, baseLayer), {
-    id: "baseLayer-".concat(myMapId)
-  });
-  useDefaultMapSettings({
-    mapId: myMapId,
-    bbox: bbox || initialBbox.bbox,
-    srs: srs || initialBbox.srs,
-    layers: layers,
-    activeLayerId: activeLayerId,
-    baseLayers: [baseLayerWithUniqueId, Object.assign(Object.assign({}, overLayer$1), {
-      id: generateLayerId()
-    })],
-    shouldAutoUpdate: shouldAutoUpdate
-  });
   var classes = useStyles$4();
+  var dispatch = useDispatch();
+  var mapId = React__default.useRef(id || generateMapId()).current;
+  var baseLayerWithUniqueId = Object.assign(Object.assign({}, baseLayer), {
+    id: "baseLayer-".concat(mapId)
+  }); // make sure all layers have a unique id before going forward
+
+  var _generateUniqueLayerI = generateUniqueLayerIds(layers, activeLayerId),
+      layersNewIds = _generateUniqueLayerI.layersNewIds,
+      activeLayerNewId = _generateUniqueLayerI.activeLayerNewId;
+
+  React__default.useEffect(function () {
+    // set layers
+    dispatch(setLayers({
+      mapId: mapId,
+      layers: layersNewIds
+    })); // set active layer if given otherwise to first layer
+
+    dispatch(setActiveLayerId({
+      mapId: mapId,
+      layerId: activeLayerNewId || layersNewIds.length && layersNewIds[0].id
+    })); // baseLayers
+
+    dispatch(setBaseLayers({
+      mapId: mapId,
+      layers: [baseLayerWithUniqueId, Object.assign(Object.assign({}, overLayer$1), {
+        id: generateLayerId()
+      })]
+    })); // bbox
+
+    dispatch(setBbox$1({
+      bbox: bbox || defaultBbox.bbox,
+      srs: srs || defaultBbox.srs,
+      mapId: mapId
+    })); // auto update
+
+    dispatch(toggleAutoUpdate({
+      mapId: mapId,
+      shouldAutoUpdate: shouldAutoUpdate
+    })); // turn animation on
+
+    if (shouldAnimate === true) {
+      var duration = animationPayload && animationPayload.duration ? animationPayload.duration : 5 * 60; // set to default of 5 hours
+
+      dispatch(mapStartAnimation({
+        mapId: mapId,
+        start: moment.utc().subtract(duration, 'minutes'),
+        end: moment.utc(),
+        interval: animationPayload && animationPayload.interval ? animationPayload.interval : animationIntervalDefault
+      }));
+
+      if (animationPayload && animationPayload.speed) {
+        dispatch(setAnimationDelay({
+          mapId: mapId,
+          animationDelay: getSpeedDelay(animationPayload.speed)
+        }));
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: className || classes.mapContainer
+    className: className || classes.mapContainer,
+    "data-testid": "configurableConnectedMap"
   }, /*#__PURE__*/React__default.createElement(Typography, {
+    "data-testid": "mapTitle",
     className: classes.mapTitle
-  }, title || myMapId), /*#__PURE__*/React__default.createElement(MapControls, {
+  }, title || mapId), /*#__PURE__*/React__default.createElement(MapControls, {
+    "data-testid": "mapControls",
     style: {
       top: shouldShowZoomControls ? 120 : 24
     }
   }, displayLayerManagerButtonInMap && /*#__PURE__*/React__default.createElement(LayerManagerMapButtonConnect, {
-    mapId: myMapId
+    mapId: mapId
   }), /*#__PURE__*/React__default.createElement(LegendMapButtonConnect, {
-    mapId: myMapId
+    mapId: mapId
   }), displayDimensionSelectButtonInMap && /*#__PURE__*/React__default.createElement(MultiDimensionSelectMapButtonsConnect, {
-    mapId: myMapId
+    mapId: mapId
   })), /*#__PURE__*/React__default.createElement(MapViewConnect, {
     controls: {},
     displayTimeInMap: displayTimeInMap,
     showScaleBar: false,
-    mapId: myMapId
+    mapId: mapId
   }));
 };
 
@@ -19356,10 +19649,14 @@ var ConfigurableMapWithSliderConnect = function ConfigurableMapWithSliderConnect
       activeLayerId = _ref$activeLayerId === void 0 ? undefined : _ref$activeLayerId,
       _ref$shouldAutoUpdate = _ref.shouldAutoUpdate,
       shouldAutoUpdate = _ref$shouldAutoUpdate === void 0 ? false : _ref$shouldAutoUpdate,
+      _ref$shouldAnimate = _ref.shouldAnimate,
+      shouldAnimate = _ref$shouldAnimate === void 0 ? false : _ref$shouldAnimate,
       bbox = _ref.bbox,
       srs = _ref.srs,
       _ref$shouldShowZoomCo = _ref.shouldShowZoomControls,
-      shouldShowZoomControls = _ref$shouldShowZoomCo === void 0 ? true : _ref$shouldShowZoomCo;
+      shouldShowZoomControls = _ref$shouldShowZoomCo === void 0 ? true : _ref$shouldShowZoomCo,
+      _ref$animationPayload = _ref.animationPayload,
+      animationPayload = _ref$animationPayload === void 0 ? undefined : _ref$animationPayload;
   var classes = useStyles$2();
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.mapSliderConnect,
@@ -19382,10 +19679,108 @@ var ConfigurableMapWithSliderConnect = function ConfigurableMapWithSliderConnect
     bbox: bbox,
     srs: srs,
     shouldAutoUpdate: shouldAutoUpdate,
+    shouldAnimate: shouldAnimate,
+    animationPayload: animationPayload,
     shouldShowZoomControls: shouldShowZoomControls
   }));
 };
 
+/* *
+ * 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 componentsLookUp = function componentsLookUp(_ref) {
+  var componentType = _ref.componentType,
+      initialProps = _ref.initialProps,
+      id = _ref.id;
+
+  switch (componentType) {
+    case 'ConfigurableMap':
+    case 'ConfigurableMapWithSlider':
+      {
+        var mapPreset = initialProps.mapPreset,
+            shouldShowZoomControls = initialProps.shouldShowZoomControls;
+        return /*#__PURE__*/React__default.createElement(ConfigurableMapWithSliderConnect, Object.assign({}, mapPreset, {
+          id: id,
+          bbox: mapPreset && mapPreset.proj && mapPreset.proj.bbox,
+          srs: mapPreset && mapPreset.proj && mapPreset.proj.srs,
+          shouldAutoUpdate: mapPreset && mapPreset.shouldAutoUpdate || false,
+          shouldShowZoomControls: shouldShowZoomControls !== undefined ? shouldShowZoomControls : true,
+          shouldAnimate: mapPreset && mapPreset.shouldAnimate || false,
+          animationPayload: mapPreset && mapPreset.animationPayload ? mapPreset.animationPayload : undefined,
+          "data-testid": "coreConfigurableMapWithSlider"
+        }));
+      }
+
+    case 'HarmonieTempAndPrecipPreset':
+      {
+        var layers = initialProps.layers;
+        return /*#__PURE__*/React__default.createElement(HarmonieTempAndPrecipPreset, {
+          layers: layers || null,
+          "data-testid": "coreHarmonieTempAndPrecipPreset"
+        });
+      }
+
+    case 'HarmRefTimePreset':
+      {
+        var _layers = initialProps.layers,
+            layerSyncGroupId = initialProps.layerSyncGroupId;
+        return /*#__PURE__*/React__default.createElement(HarmRefTimePreset, {
+          layers: _layers || [],
+          layerSyncGroupId: layerSyncGroupId,
+          "data-testid": "coreHarmonieRefTimePreset"
+        });
+      }
+
+    case 'ConfigurableMultiMapWithSlider':
+      {
+        var _mapPreset = initialProps.mapPreset,
+            _shouldShowZoomControls = initialProps.shouldShowZoomControls;
+        if (!_mapPreset || _mapPreset.length === 0) return null;
+        return /*#__PURE__*/React__default.createElement(MultiMapViewConnect, {
+          rows: 2,
+          cols: 2,
+          showZoomControls: _shouldShowZoomControls !== undefined ? _shouldShowZoomControls : true,
+          maps: _mapPreset.map(function (p, i) {
+            return {
+              id: "".concat(id, "_").concat(i),
+              layers: p.layers || [],
+              activeLayerId: p.activeLayerId || undefined,
+              baseLayer: p.baseLayer || undefined,
+              bbox: _mapPreset[0] && _mapPreset[0].proj && _mapPreset[0].proj.bbox || null,
+              srs: _mapPreset[0] && _mapPreset[0].proj && _mapPreset[0].proj.srs || null
+            };
+          }),
+          "data-testid": "coreConfigurableMultiMapWithSlider"
+        });
+      }
+
+    case 'TimeSlider':
+      {
+        var sliderPreset = initialProps.sliderPreset;
+        return /*#__PURE__*/React__default.createElement(TimeSliderConnect, Object.assign({}, sliderPreset, {
+          sourceId: id,
+          "data-testid": "coreTimeSliderConnect"
+        }));
+      }
+
+    default:
+      return null;
+  }
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20019,4 +20414,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, coreModuleConfig, defaultConfigurations, filterNonTimeDimensions, generateLayerId, generateMapId, generateScreenId, generateTimesliderId, getFirstTimeStepForLayerId, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$5 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, defaultConfigurations, filterNonTimeDimensions, generateLayerId, generateMapId, generateScreenId, generateTimesliderId, getFirstTimeStepForLayerId, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$5 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 };