@opengeoweb/core 2.1.0 → 2.1.1

package/core.umd.js

@@ -159,8 +159,8 @@
   /**
    * 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) {
@@ -1375,6 +1375,17 @@
   });
 
   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
    */
@@ -4112,10 +4123,18 @@
 
   var getAddLayerActionsTargets = function getAddLayerActionsTargets(state, payload, actionType) {
     var foundTargets = findTargets(state, payload, actionType, payload.mapId);
-    return foundTargets.map(function (target) {
-      return __assign(__assign({}, target.payload), {
+    return foundTargets.map(function (_a) {
+      var payload = _a.payload,
+          targetId = _a.targetId;
+      var layer = payload.layer;
+
+      layer.id;
+          var layerWithoutId = __rest(layer, ["id"]);
+
+      return __assign(__assign({}, payload), {
+        layer: layerWithoutId,
         layerId: generateLayerId(),
-        mapId: target.targetId,
+        mapId: targetId,
         origin: ORIGIN_GENERIC_SYNCHRONIZATIONGROUP_UTILS_ADDACTION
       });
     });
@@ -4944,7 +4963,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$z = core.makeStyles(function (theme) {
+  var useStyles$A = core.makeStyles(function (theme) {
     return {
       select: {
         '& ul': {
@@ -4997,7 +5016,7 @@
         tooltipOpen = _f[0],
         setTooltipOpen = _f[1];
 
-    var classes = useStyles$z();
+    var classes = useStyles$A();
     var onWheel = React__namespace.useCallback(function (event) {
       if (selectOpen) return;
       var direction = event.deltaY < 0 ? 1 : -1;
@@ -5524,12 +5543,32 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
+  /**
+   * 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.produce(layers, function (draft) {
       for (var j = 0; j < draft.length; j += 1) {
@@ -5537,6 +5576,9 @@
 
         if (!layer.id) {
           layer.id = generateLayerId();
+        } else if (checkIfMapLayerIdIsAlreadyTaken(state, layer.id)) {
+          console.warn("Warning: Layer id " + layer.id + " was already taken: Generating new one.");
+          layer.id = generateLayerId();
         }
       }
     });
@@ -5589,21 +5631,17 @@
             return state;
           }
 
-          var layerIndex_1 = state.byId[mapId_3].mapLayers.indexOf(layerId_1);
-
-          if (layerIndex_1 >= 0) {
-            // Do nothing if layerId is already used
+          if (checkIfMapLayerIdIsAlreadyTaken(state, layerId_1)) {
+            console.warn("Warning: Layer id " + layerId_1 + " was already taken");
             return state;
           }
 
           return produce.produce(state, function (draft) {
-            if (layerIndex_1 === -1) {
-              if (!state.byId[mapId_3].mapLayers.length) {
-                draft.byId[mapId_3].activeLayerId = layerId_1;
-              }
-
-              draft.byId[mapId_3].mapLayers.unshift(layerId_1);
+            if (!state.byId[mapId_3].mapLayers.length) {
+              draft.byId[mapId_3].activeLayerId = layerId_1;
             }
+
+            draft.byId[mapId_3].mapLayers.unshift(layerId_1);
           });
         }
 
@@ -5662,6 +5700,19 @@
 
           return produce.produce(state, function (draft) {
             draft.byId[mapId_7].isAnimating = true;
+
+            if (action.payload.start) {
+              draft.byId[mapId_7].animationStartTime = action.payload.start.toISOString();
+            }
+
+            if (action.payload.end) {
+              draft.byId[mapId_7].animationEndTime = action.payload.end.toISOString();
+            }
+
+            if (action.payload.interval && action.payload.interval !== draft.byId[mapId_7].timeStep) {
+              draft.byId[mapId_7].timeStep = action.payload.interval;
+              draft.byId[mapId_7].isTimestepAuto = false;
+            }
           });
         }
 
@@ -5689,33 +5740,20 @@
             return state;
           }
 
-          if (layer.layerType === LayerType.baseLayer) {
-            var layerIndex_2 = state.byId[mapId_9].baseLayers.indexOf(layerId_2);
-
-            if (layerIndex_2 >= 0) {
-              // Do nothing if layerId is already used
-              return state;
-            }
+          if (checkIfMapLayerIdIsAlreadyTaken(state, layerId_2)) {
+            console.warn("Warning: Layer id " + layerId_2 + " was already taken");
+            return state;
+          }
 
+          if (layer.layerType === LayerType.baseLayer) {
             return produce.produce(state, function (draft) {
-              if (layerIndex_2 === -1) {
-                draft.byId[mapId_9].baseLayers.unshift(layerId_2);
-              }
+              draft.byId[mapId_9].baseLayers.unshift(layerId_2);
             });
           }
 
           if (layer.layerType === LayerType.overLayer) {
-            var layerIndex_3 = state.byId[mapId_9].overLayers.indexOf(layerId_2);
-
-            if (layerIndex_3 >= 0) {
-              // Do nothing if layerId is already used
-              return state;
-            }
-
             return produce.produce(state, function (draft) {
-              if (layerIndex_3 === -1) {
-                draft.byId[mapId_9].overLayers.unshift(layerId_2);
-              }
+              draft.byId[mapId_9].overLayers.unshift(layerId_2);
             });
           }
 
@@ -5788,7 +5826,7 @@
       case WEBMAP_SET_LAYERS:
         {
           var mapId_14 = action.payload.mapId;
-          var layersWithIds = createLayersWithIds(action.payload.layers);
+          var layersWithIds = createLayersWithIds(state, action.payload.layers);
           var layerIds_1 = layersWithIds.map(function (_a) {
             var id = _a.id;
             return id;
@@ -5835,8 +5873,8 @@
               baseLayers_1.push(layer);
             }
           });
-          var baseLayersWithIds = createLayersWithIds(baseLayers_1);
-          var overLayersWithIds = createLayersWithIds(overLayers_1);
+          var baseLayersWithIds = createLayersWithIds(state, baseLayers_1);
+          var overLayersWithIds = createLayersWithIds(state, overLayers_1);
           var baseLayerIds_1 = baseLayersWithIds.map(function (_a) {
             var id = _a.id;
             return id;
@@ -6204,12 +6242,14 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
+
   var generateTimeList = function generateTimeList(start, end, interval) {
     var timeList = [];
     var unixStart = moment__default["default"](start).utc().unix();
     var unixEnd = moment__default["default"](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__default["default"].unix(j).toISOString()
@@ -6235,8 +6275,8 @@
       switch (_b.label) {
         case 0:
           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');
           return [4
           /*yield*/
           , timeList || generateTimeList(moment__default["default"].utc(roundedStart * 1000), moment__default["default"].utc(roundedEnd * 1000), interval)];
@@ -6372,7 +6412,7 @@
             mapId: mapId,
             start: start,
             end: end,
-            interval: timeStep * 60
+            interval: timeStep
           }))];
 
         case 7:
@@ -6388,12 +6428,12 @@
     });
   }
   function setLayerDimensionsSaga(_a) {
-    var dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, error_1;
+    var dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, error_1;
     var payload = _a.payload;
     return __generator(this, function (_b) {
       switch (_b.label) {
         case 0:
-          _b.trys.push([0, 8,, 9]);
+          _b.trys.push([0, 11,, 12]);
 
           dimensions = payload.dimensions, layerId = payload.layerId;
           return [4
@@ -6427,10 +6467,17 @@
 
         case 4:
           prevTimeDimension = _b.sent();
+          return [4
+          /*yield*/
+          , effects.select(isAnimating, mapId)];
+
+        case 5:
+          isAnimating$1 = _b.sent();
+          webmapInstance = getWMJSMapById(mapId);
           if (!(layerId === activeLayerId && // only update the active layer
           shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue)) return [3
           /*break*/
-          , 7];
+          , 8];
           return [4
           /*yield*/
           , effects.put(layerChangeDimension({
@@ -6442,32 +6489,47 @@
             }
           }))];
 
-        case 5:
+        case 6:
           _b.sent();
 
           return [4
           /*yield*/
           , effects.call(updateAnimation, mapId, newTimeDimension.maxValue)];
 
-        case 6:
+        case 7:
           _b.sent();
 
-          _b.label = 7;
-
-        case 7:
           return [3
           /*break*/
-          , 9];
+          , 10];
 
         case 8:
+          if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue)) return [3
+          /*break*/
+          , 10];
+          return [4
+          /*yield*/
+          , effects.call(updateAnimation, mapId, newTimeDimension.maxValue)];
+
+        case 9:
+          _b.sent();
+
+          _b.label = 10;
+
+        case 10:
+          return [3
+          /*break*/
+          , 12];
+
+        case 11:
           error_1 = _b.sent(); // eslint-disable-next-line no-console
 
           console.warn(error_1);
           return [3
           /*break*/
-          , 9];
+          , 12];
 
-        case 9:
+        case 12:
           return [2
           /*return*/
           ];
@@ -6695,6 +6757,26 @@
       }, 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, forceReload) {
+    if (forceReload === void 0) {
+      forceReload = false;
+    }
+
+    return new Promise(function (resolve, reject) {
+      var serviceObject = webmap.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");
@@ -7628,7 +7710,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$y = core.makeStyles({
+  var useStyles$z = core.makeStyles({
     buttonDiv: {
       position: 'relative'
     },
@@ -7664,7 +7746,7 @@
         handleClose = _a.handleClose,
         _e = _a.layerType,
         layerType = _e === void 0 ? LayerType.mapLayer : _e;
-    var classes = useStyles$y();
+    var classes = useStyles$z();
 
     var _f = __read(React__namespace.useState(''), 2),
         serviceURL = _f[0],
@@ -7827,7 +7909,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$x = core.makeStyles(function (theme) {
+  var useStyles$y = core.makeStyles(function (theme) {
     return {
       buttonDiv: {
         position: 'relative'
@@ -7862,7 +7944,7 @@
         _f = _a.shouldFocus,
         shouldFocus = _f === void 0 ? false : _f;
     var ref = React__namespace.useRef(null);
-    var classes = useStyles$x();
+    var classes = useStyles$y();
 
     var _g = __read(React__namespace.useState(false), 2),
         open = _g[0],
@@ -7970,6 +8052,65 @@
     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 = core.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(_a) {
+    var mapId = _a.mapId,
+        _b = _a.source,
+        source = _b === void 0 ? 'app' : _b;
+    var dispatch = reactRedux.useDispatch();
+    var classes = useStyles$x();
+    var currentActiveMapId = reactRedux.useSelector(function (store) {
+      return getDialogMapId(store, 'layerSelect');
+    });
+    var isOpenInStore = reactRedux.useSelector(function (store) {
+      return getisDialogOpen(store, 'layerSelect');
+    });
+    var openLayerSelectDialog = React__namespace.useCallback(function () {
+      dispatch(setActiveMapIdForDialog({
+        type: 'layerSelect',
+        activeMapId: mapId,
+        setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+        source: source
+      }));
+    }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
+    return /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+      title: "Layer Select"
+    }, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+      onClick: openLayerSelectDialog,
+      className: classes.button,
+      id: "layerSelectButton",
+      "data-testid": "layerSelectButton",
+      disableRipple: true
+    }, /*#__PURE__*/React__namespace.createElement(icons.Add, null)));
+  };
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -8007,7 +8148,9 @@
         preloadedServices = _c === void 0 ? preloadedDefaultMapServices : _c,
         _d = _a.tooltip,
         tooltip = _d === void 0 ? '' : _d,
-        layerManagerWidth = _a.layerManagerWidth;
+        layerManagerWidth = _a.layerManagerWidth,
+        _e = _a.layerSelect,
+        layerSelect = _e === void 0 ? false : _e;
     var classes = useStyles$w();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(core.Grid, {
@@ -8029,6 +8172,8 @@
         });
       },
       shouldFocus: true
+    }), layerSelect && /*#__PURE__*/React__namespace.createElement(LayerSelectButtonConnect, {
+      mapId: mapId
     })), /*#__PURE__*/React__namespace.createElement(core.Grid, {
       className: columnSizes.column2
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -8694,7 +8839,7 @@
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: sliderClasses.sliderHeader
     }, "Opacity"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
-      dataTestId: "opacitySlider",
+      "data-testid": "opacitySlider",
       orientation: "vertical",
       value: currentOpacity,
       step: 0.01,
@@ -10124,12 +10269,16 @@
         _c = _a.order,
         order = _c === void 0 ? 0 : _c,
         _d = _a.source,
-        source = _d === void 0 ? 'app' : _d;
+        source = _d === void 0 ? 'app' : _d,
+        _e = _a.layerSelect,
+        layerSelect = _e === void 0 ? false : _e,
+        _f = _a.showAddLayersTooltip,
+        showAddLayersTooltip = _f === void 0 ? true : _f;
     var classes = useStyles$j();
 
-    var _e = __read(React__namespace.useState(LayerManagerWidth.lg), 2),
-        layerManagerWidth = _e[0],
-        setLayerManagerWidth = _e[1];
+    var _g = __read(React__namespace.useState(LayerManagerWidth.lg), 2),
+        layerManagerWidth = _g[0],
+        setLayerManagerWidth = _g[1];
 
     var onChangeSize = function onChangeSize(_a) {
       var width = _a.width;
@@ -10165,9 +10314,10 @@
       className: classes.layerRowContainer
     }, /*#__PURE__*/React__namespace.createElement(DescriptionRow, {
       mapId: mapId,
-      tooltip: "Add Layers",
+      tooltip: showAddLayersTooltip ? 'Add Layers' : '',
       layerManagerWidth: layerManagerWidth,
-      preloadedServices: preloadedMapServices
+      preloadedServices: preloadedMapServices,
+      layerSelect: layerSelect
     }), /*#__PURE__*/React__namespace.createElement(LayerContainerRow, {
       mapId: mapId,
       layerManagerWidth: layerManagerWidth
@@ -10180,6 +10330,179 @@
     }))));
   };
 
+  /* *
+   * 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(_a) {
+    var mapId = _a.mapId,
+        bounds = _a.bounds,
+        _b = _a.onClose,
+        onClose = _b === void 0 ? function () {} : _b,
+        showTitle = _a.showTitle,
+        isOpen = _a.isOpen,
+        _c = _a.onMouseDown,
+        onMouseDown = _c === void 0 ? function () {} : _c,
+        _d = _a.order,
+        order = _d === void 0 ? 0 : _d,
+        _e = _a.source,
+        source = _e === void 0 ? 'module' : _e;
+    return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
+      title: showTitle ? "Layer Select " + 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__namespace.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.
+   * 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)
+   * */
+  /**
+   * 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
+   *
+   * ``` <LayerSelectConnect />```
+   */
+
+  var LayerSelectConnect = function LayerSelectConnect(_a) {
+    var bounds = _a.bounds,
+        _b = _a.showTitle,
+        showTitle = _b === void 0 ? false : _b,
+        _c = _a.preloadedServices,
+        preloadedServices = _c === void 0 ? preloadedDefaultMapServices : _c;
+    var dispatch = reactRedux.useDispatch();
+    var isMounted = shared.useIsMounted().isMounted;
+    var mapId = reactRedux.useSelector(function (store) {
+      return getDialogMapId(store, 'layerSelect');
+    });
+    var isOpenInStore = reactRedux.useSelector(function (store) {
+      return getisDialogOpen(store, 'layerSelect');
+    });
+    var onClose = React__namespace.useCallback(function () {
+      return dispatch(setToggleOpenDialog({
+        type: 'layerSelect',
+        setOpen: false
+      }));
+    }, [dispatch]);
+    var isMapPresent = reactRedux.useSelector(function (store) {
+      return getIsMapPresent(store, mapId);
+    });
+    var uiOrder = reactRedux.useSelector(function (store) {
+      return getDialogOrder(store, 'layerSelect');
+    });
+    var uiSource = reactRedux.useSelector(function (store) {
+      return getDialogSource(store, 'layerSelect');
+    });
+    var uiIsOrderedOnTop = reactRedux.useSelector(function (store) {
+      return getDialogIsOrderedOnTop(store, 'layerSelect');
+    }); // Check to ensure the currently active map is still present on screen - if not, close the dialog
+
+    React__namespace.useEffect(function () {
+      if (mapId !== '' && !isMapPresent) {
+        onClose();
+      }
+    }, [mapId, isMapPresent, onClose]);
+    var registerDialog$1 = React__namespace.useCallback(function () {
+      return dispatch(registerDialog({
+        type: 'layerSelect',
+        setOpen: false
+      }));
+    }, [dispatch]);
+    var unregisterDialog$1 = React__namespace.useCallback(function () {
+      return dispatch(unregisterDialog({
+        type: 'layerSelect'
+      }));
+    }, [dispatch]);
+    var onOrderDialog = React__namespace.useCallback(function () {
+      if (!uiIsOrderedOnTop) {
+        dispatch(orderDialog({
+          type: 'layerSelect'
+        }));
+      }
+    }, [dispatch, uiIsOrderedOnTop]); // Register this dialog in the store
+
+    React__namespace.useEffect(function () {
+      registerDialog$1();
+      return function () {
+        unregisterDialog$1();
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var serviceSetLayers$1 = React__namespace.useCallback(function (payload) {
+      return dispatch(serviceSetLayers(payload));
+    }, [dispatch]);
+    React__namespace.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__namespace.createElement(LayerSelect, {
+      mapId: mapId,
+      bounds: bounds,
+      isOpen: isOpenInStore,
+      onClose: onClose,
+      showTitle: showTitle,
+      onMouseDown: onOrderDialog,
+      order: uiOrder,
+      source: uiSource
+    });
+  };
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -10214,7 +10537,9 @@
         preloadedBaseServices = _a.preloadedBaseServices,
         bounds = _a.bounds,
         _b = _a.showTitle,
-        showTitle = _b === void 0 ? false : _b;
+        showTitle = _b === void 0 ? false : _b,
+        _c = _a.layerSelect,
+        layerSelect = _c === void 0 ? false : _c;
     var dispatch = reactRedux.useDispatch();
     var isOpenInStore = reactRedux.useSelector(function (store) {
       return getisDialogOpen(store, 'layerManager');
@@ -10271,7 +10596,7 @@
         unregisterDialog$1();
       }; // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return /*#__PURE__*/React__namespace.createElement(LayerManager, {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(LayerManager, {
       mapId: mapId,
       preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
       preloadedMapServices: preloadedMapServices,
@@ -10281,9 +10606,10 @@
       onClose: onClose,
       showTitle: showTitle,
       onMouseDown: onOrderDialog,
-      order: uiOrder,
-      source: uiSource
-    });
+      order: uiOrder,
+      source: uiSource,
+      layerSelect: layerSelect
+    }), layerSelect && /*#__PURE__*/React__namespace.createElement(LayerSelectConnect, null));
   };
 
   /* *
@@ -11401,9 +11727,6 @@
       }
     };
   });
-  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(_a) {
     var animationDelay = _a.animationDelay,
@@ -11417,7 +11740,7 @@
 
     var marks = speedFactors.map(function (speedFactor, i) {
       return {
-        delay: defaultDelay / speedFactor,
+        delay: getSpeedDelay(speedFactor),
         markPos: i,
         text: speedFactor + "x"
       };
@@ -11469,7 +11792,7 @@
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: sliderClasses.sliderHeader
     }, "Speed"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
-      dataTestId: "speedSlider",
+      "data-testid": "speedSlider",
       orientation: "vertical",
       value: currentValue,
       step: null,
@@ -11643,21 +11966,6 @@
       disabled: {}
     };
   });
-
-  var ThumbComponent = function ThumbComponent(props) {
-    var ref = React__namespace.useRef(null);
-    React__namespace.useEffect(function () {
-      if (ref.current) {
-        ref.current.focus();
-      }
-    }, []);
-    return /*#__PURE__*/React__namespace.createElement("span", __assign({}, props, {
-      ref: ref,
-      "data-testid": "timeStepButtonSliderThumb",
-      id: "thumbTimeStep"
-    }));
-  };
-
   var TimeStepSwitch = core.withStyles(function (theme) {
     return {
       root: {
@@ -11761,7 +12069,7 @@
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: sliderClasses.sliderHeader
     }, "Time step"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
-      dataTestId: "timeStepButtonSlider",
+      "data-testid": "timeStepButtonSlider",
       orientation: "vertical",
       value: currentMark && currentMark.value ? currentMark.value : 0,
       step: null,
@@ -11769,9 +12077,9 @@
       max: timeStepMarks[timeStepMarks.length - 1].value,
       marks: timeStepMarks,
       disabled: disabledSlider,
-      ThumbComponent: ThumbComponent,
       onChange: onChangeSlider,
-      onKeyDown: onKeyDown
+      onKeyDown: onKeyDown,
+      shouldAutoFocus: true
     }), /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
       title: timestepAutoSwitch.title
     }, /*#__PURE__*/React__namespace.createElement("span", {
@@ -14329,6 +14637,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
+  var animationIntervalDefault = 5;
   var connectRedux$3 = reactRedux.connect(function (store, props) {
     return {
       isAnimating: isAnimating(store, props.mapId),
@@ -14349,8 +14658,7 @@
         timeStep = _a.timeStep,
         mapStartAnimation = _a.mapStartAnimation,
         mapStopAnimation = _a.mapStopAnimation;
-    var animationIntervalDefault = 300;
-    var animationInterval = timeStep ? timeStep * 60 : animationIntervalDefault;
+    var animationInterval = timeStep || animationIntervalDefault;
 
     var onTogglePlay = function onTogglePlay() {
       if (isAnimating) {
@@ -14880,128 +15188,6 @@
 
   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 __assign(__assign({}, layer), {
-          id: activeLayerNewId
-        });
-      }
-
-      return __assign(__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(props) {
-    if (props === void 0) {
-      props = {};
-    }
-
-    var dispatch = reactRedux.useDispatch();
-    var _a = props.mapId,
-        mapId = _a === void 0 ? 'test-map-1' : _a;
-    var _b = props.layers,
-        layers = _b === void 0 ? [] : _b,
-        _c = props.activeLayerId,
-        activeLayerId = _c === void 0 ? undefined : _c,
-        _d = props.baseLayers,
-        baseLayers = _d === void 0 ? [__assign(__assign({}, baseLayerGrey$1), {
-      id: "layer-grey-" + mapId
-    }), overLayer$1] : _d,
-        _e = props.bbox,
-        bbox = _e === void 0 ? initialBbox.bbox : _e,
-        _f = props.srs,
-        srs = _f === void 0 ? initialBbox.srs : _f,
-        _g = props.shouldAutoUpdate,
-        shouldAutoUpdate = _g === void 0 ? false : _g; // make sure all layers have a unique id before going forward
-
-    var _h = generateUniqueLayerIds(layers, activeLayerId),
-        layersNewIds = _h.layersNewIds,
-        activeLayerNewId = _h.activeLayerNewId;
-
-    React__namespace.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.
@@ -17918,18 +18104,27 @@
       var children = props.children;
 
       if (children !== this.currentMapProps.children) {
-        var wmjsLayers_1 = this.adaguc.webMapJS.getLayers();
         var myChildren_1 = [];
+        var takenIds_1 = new Set();
         React__namespace.Children.forEach(children, function (child) {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          if (child && child.props && child.props.id) {
-            myChildren_1.push(child);
-          } else if (child !== null) {
-            webmap.debug(webmap.DebugType.Error, 'ReactWMJSLayer ignored', child);
+          if (child) {
+            var childProps = child.props;
+
+            if (childProps && childProps.id) {
+              if (!takenIds_1.has(childProps.id)) {
+                myChildren_1.push(child);
+                takenIds_1.add(childProps.id);
+              } else {
+                childProps.onLayerError(childProps, new Error("Duplicate layer id \"" + childProps.id + "\" encountered within this WebMap"), _this.adaguc.webMapJS);
+                console.warn('ReactWMJSLayer has a duplicate id', child);
+              }
+            } else {
+              webmap.debug(webmap.DebugType.Warning, 'ReactElement child ignored: has no props or id', child);
+            }
           }
         });
         myChildren_1.reverse();
+        var wmjsLayers_1 = this.adaguc.webMapJS.getLayers();
 
         var _loop_1 = function _loop_1(l) {
           if (myChildren_1.filter(function (c) {
@@ -19181,14 +19376,51 @@
    * 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 __assign(__assign({}, layer), {
+          id: activeLayerNewId
+        });
+      }
+
+      return __assign(__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 = core.makeStyles(function (theme) {
     return {
-      draggableThing: {
-        boxShadow: '4px 4px 15px 1px rgba(0,0,0,0.75)'
-      },
       mapTitle: {
         position: 'absolute',
         padding: '5px',
@@ -19204,6 +19436,15 @@
       }
     };
   });
+  var defaultBbox = {
+    srs: 'EPSG:3857',
+    bbox: {
+      left: -450651.2255879827,
+      bottom: 6490531.093143953,
+      right: 1428345.8183648037,
+      top: 7438773.776232235
+    }
+  };
   var ConfigurableConnectedMap = function ConfigurableConnectedMap(_a) {
     var id = _a.id,
         title = _a.title,
@@ -19222,45 +19463,96 @@
         displayDimensionSelectButtonInMap = _e === void 0 ? true : _e,
         _f = _a.shouldAutoUpdate,
         shouldAutoUpdate = _f === void 0 ? false : _f,
-        _g = _a.shouldShowZoomControls,
-        shouldShowZoomControls = _g === void 0 ? false : _g;
-    var myMapId = React__default["default"].useRef(id || generateMapId()).current;
+        _g = _a.shouldAnimate,
+        shouldAnimate = _g === void 0 ? false : _g,
+        _h = _a.animationPayload,
+        animationPayload = _h === void 0 ? undefined : _h,
+        _j = _a.shouldShowZoomControls,
+        shouldShowZoomControls = _j === void 0 ? false : _j;
+    var classes = useStyles$4();
+    var dispatch = reactRedux.useDispatch();
+    var mapId = React__default["default"].useRef(id || generateMapId()).current;
 
     var baseLayerWithUniqueId = __assign(__assign({}, baseLayer), {
-      id: "baseLayer-" + myMapId
-    });
+      id: "baseLayer-" + mapId
+    }); // make sure all layers have a unique id before going forward
 
-    useDefaultMapSettings({
-      mapId: myMapId,
-      bbox: bbox || initialBbox.bbox,
-      srs: srs || initialBbox.srs,
-      layers: layers,
-      activeLayerId: activeLayerId,
-      baseLayers: [baseLayerWithUniqueId, __assign(__assign({}, overLayer$1), {
-        id: generateLayerId()
-      })],
-      shouldAutoUpdate: shouldAutoUpdate
-    });
-    var classes = useStyles$4();
+
+    var _k = generateUniqueLayerIds(layers, activeLayerId),
+        layersNewIds = _k.layersNewIds,
+        activeLayerNewId = _k.activeLayerNewId;
+
+    React__default["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, __assign(__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__default["default"].utc().subtract(duration, 'minutes'),
+          end: moment__default["default"].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["default"].createElement("div", {
-      className: className || classes.mapContainer
+      className: className || classes.mapContainer,
+      "data-testid": "configurableConnectedMap"
     }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      "data-testid": "mapTitle",
       className: classes.mapTitle
-    }, title || myMapId), /*#__PURE__*/React__default["default"].createElement(MapControls, {
+    }, title || mapId), /*#__PURE__*/React__default["default"].createElement(MapControls, {
+      "data-testid": "mapControls",
       style: {
         top: shouldShowZoomControls ? 120 : 24
       }
     }, displayLayerManagerButtonInMap && /*#__PURE__*/React__default["default"].createElement(LayerManagerMapButtonConnect, {
-      mapId: myMapId
+      mapId: mapId
     }), /*#__PURE__*/React__default["default"].createElement(LegendMapButtonConnect, {
-      mapId: myMapId
+      mapId: mapId
     }), displayDimensionSelectButtonInMap && /*#__PURE__*/React__default["default"].createElement(MultiDimensionSelectMapButtonsConnect, {
-      mapId: myMapId
+      mapId: mapId
     })), /*#__PURE__*/React__default["default"].createElement(MapViewConnect, {
       controls: {},
       displayTimeInMap: displayTimeInMap,
       showScaleBar: false,
-      mapId: myMapId
+      mapId: mapId
     }));
   };
 
@@ -19651,10 +19943,14 @@
         activeLayerId = _c === void 0 ? undefined : _c,
         _d = _a.shouldAutoUpdate,
         shouldAutoUpdate = _d === void 0 ? false : _d,
+        _e = _a.shouldAnimate,
+        shouldAnimate = _e === void 0 ? false : _e,
         bbox = _a.bbox,
         srs = _a.srs,
-        _e = _a.shouldShowZoomControls,
-        shouldShowZoomControls = _e === void 0 ? true : _e;
+        _f = _a.shouldShowZoomControls,
+        shouldShowZoomControls = _f === void 0 ? true : _f,
+        _g = _a.animationPayload,
+        animationPayload = _g === void 0 ? undefined : _g;
     var classes = useStyles$2();
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: classes.mapSliderConnect,
@@ -19677,10 +19973,111 @@
       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(_a) {
+    var componentType = _a.componentType,
+        initialProps = _a.initialProps,
+        id = _a.id;
+
+    switch (componentType) {
+      case 'ConfigurableMap':
+      case 'ConfigurableMapWithSlider':
+        {
+          var _b = initialProps,
+              mapPreset = _b.mapPreset,
+              shouldShowZoomControls = _b.shouldShowZoomControls;
+          return /*#__PURE__*/React__default["default"].createElement(ConfigurableMapWithSliderConnect, __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["default"].createElement(HarmonieTempAndPrecipPreset, {
+            layers: layers || null,
+            "data-testid": "coreHarmonieTempAndPrecipPreset"
+          });
+        }
+
+      case 'HarmRefTimePreset':
+        {
+          var _c = initialProps,
+              layers = _c.layers,
+              layerSyncGroupId = _c.layerSyncGroupId;
+          return /*#__PURE__*/React__default["default"].createElement(HarmRefTimePreset, {
+            layers: layers || [],
+            layerSyncGroupId: layerSyncGroupId,
+            "data-testid": "coreHarmonieRefTimePreset"
+          });
+        }
+
+      case 'ConfigurableMultiMapWithSlider':
+        {
+          var _d = initialProps,
+              mapPreset_1 = _d.mapPreset,
+              shouldShowZoomControls = _d.shouldShowZoomControls;
+          if (!mapPreset_1 || mapPreset_1.length === 0) return null;
+          return /*#__PURE__*/React__default["default"].createElement(MultiMapViewConnect, {
+            rows: 2,
+            cols: 2,
+            showZoomControls: shouldShowZoomControls !== undefined ? shouldShowZoomControls : true,
+            maps: mapPreset_1.map(function (p, i) {
+              return {
+                id: id + "_" + i,
+                layers: p.layers || [],
+                activeLayerId: p.activeLayerId || undefined,
+                baseLayer: p.baseLayer || undefined,
+                bbox: mapPreset_1[0] && mapPreset_1[0].proj && mapPreset_1[0].proj.bbox || null,
+                srs: mapPreset_1[0] && mapPreset_1[0].proj && mapPreset_1[0].proj.srs || null
+              };
+            }),
+            "data-testid": "coreConfigurableMultiMapWithSlider"
+          });
+        }
+
+      case 'TimeSlider':
+        {
+          var sliderPreset = initialProps.sliderPreset;
+          return /*#__PURE__*/React__default["default"].createElement(TimeSliderConnect, __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.
@@ -20360,6 +20757,7 @@
   exports.TooltipSelect = TooltipSelect;
   exports.ZoomControlConnect = ZoomControlConnect;
   exports.ZoomControls = ZoomControls;
+  exports.componentsLookUp = componentsLookUp;
   exports.coreModuleConfig = coreModuleConfig;
   exports.defaultConfigurations = defaultConfigurations;
   exports.filterNonTimeDimensions = filterNonTimeDimensions;