@opengeoweb/core 2.1.1 → 2.1.2

package/core.umd.js

@@ -69,6 +69,7 @@
   var WEBMAP_SET_TIME_SLIDER_CENTER_TIME = 'WEBMAP_SET_TIME_SLIDER_CENTER_TIME';
   var WEBMAP_SET_TIME_SLIDER_SECONDS_PER_PX = 'WEBMAP_SET_TIME_SLIDER_SECONDS_PER_PX';
   var WEBMAP_SET_TIME_SLIDER_DATA_SCALE_TO_SECONDS_PER_PX = 'WEBMAP_SET_TIME_SLIDER_DATA_SCALE_TO_SECONDS_PER_PX';
+  var WEBMAP_SET_PIN = 'WEBMAP_SET_PIN';
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -160,7 +161,7 @@
    * Starts the animation for a map.
    *
    * 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[]
+   * @param {object} payload Object with mapId: string, start: string, end: string and interval: number (in minutes), timeList?: TimeListType[]
    */
 
   var mapStartAnimation = function mapStartAnimation(payload) {
@@ -277,7 +278,7 @@
    *Sets the animation start time with id for a map
    *
    * Example: setAnimationStartTime({ mapId: 'mapId1'})
-   * @param {object} payload object with  mapId: string, animationStartTime: Moment
+   * @param {object} payload object with  mapId: string, animationStartTime: string
    */
 
   var setAnimationStartTime = function setAnimationStartTime(payload) {
@@ -290,7 +291,7 @@
    *Sets the animation end time with id for a map
    *
    * Example: setAnimationEndTime({ mapId: 'mapId1'})
-   * @param {object} payload object with  mapId: string, animationEndTime: Moment
+   * @param {object} payload object with  mapId: string, animationEndTime: string
    */
 
   var setAnimationEndTime = function setAnimationEndTime(payload) {
@@ -364,6 +365,19 @@
       payload: payload
     };
   };
+  /**
+   * Sets current curser location for a map to display the point marker
+   *
+   * Example: setMapPinLocation({ mapId: 'mapId1', mapPinLocation: {lon: 1.2, lat: 3.4} })
+   * @param {object} payload object with mapId: string, mapPinLocation: MapLocation
+   */
+
+  var setMapPinLocation = function setMapPinLocation(payload) {
+    return {
+      type: WEBMAP_SET_PIN,
+      payload: payload
+    };
+  };
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -386,6 +400,7 @@
   var WEBMAP_LAYER_CHANGE_STYLE = 'WEBMAP_LAYER_CHANGE_STYLE';
   var WEBMAP_LAYER_CHANGE_DIMENSION = 'WEBMAP_LAYER_CHANGE_DIMENSION';
   var WEBMAP_LAYER_SET_DIMENSIONS = 'WEBMAP_LAYER_SET_DIMENSIONS';
+  var WEBMAP_LAYER_SET_STYLES = 'WEBMAP_LAYER_SET_STYLES';
   var WEBMAP_LAYER_CHANGE_ENABLED = 'WEBMAP_LAYER_CHANGE_ENABLED';
   var WEBMAP_LAYER_DELETE = 'WEBMAP_LAYER_DELETE';
   var WEBMAP_LAYER_ERROR = 'WEBMAP_LAYER_ERROR';
@@ -534,6 +549,19 @@
       payload: payload
     };
   };
+  /**
+   * Action layerSetStyles is used automatically after calling the setLayers action. Contents is based on WMS GetCapabilities
+   *
+   * Example: layerSetStyles({service: someService,  name: 'layerName', styles: styleArray})
+   * @param {object} payload consisting of service: string, name: string, styles: Style[]
+   */
+
+  var layerSetStyles = function layerSetStyles(payload) {
+    return {
+      type: WEBMAP_LAYER_SET_STYLES,
+      payload: payload
+    };
+  };
   /**
    * Changes the name of the layer
    *
@@ -647,7 +675,6 @@
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
   var MAP_SERVICES_SET_LAYERS = 'MAP_SERVICES_SET_LAYERS';
-  var MAP_SERVICES_LAYER_SET_STYLES = 'MAP_SERVICES_LAYER_SET_STYLES';
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -678,19 +705,6 @@
       payload: payload
     };
   };
-  /**
-   * Action layerSetStyles is used automatically after calling the setLayers action. Contents is based on WMS GetCapabilities
-   *
-   * Example: layerSetStyles({service: someService,  name: 'layerName', styles: styleArray})
-   * @param {object} payload consisting of service: string, name: string, styles: Style[]
-   */
-
-  var layerSetStyles = function layerSetStyles(payload) {
-    return {
-      type: MAP_SERVICES_LAYER_SET_STYLES,
-      payload: payload
-    };
-  };
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -732,6 +746,7 @@
     setTimeSliderCenterTime: setTimeSliderCenterTime,
     setTimeSliderSecondsPerPx: setTimeSliderSecondsPerPx,
     setTimeSliderDataScaleToSecondsPerPx: setTimeSliderDataScaleToSecondsPerPx,
+    setMapPinLocation: setMapPinLocation,
     setLayers: setLayers,
     setBaseLayers: setBaseLayers,
     addBaseLayer: addBaseLayer,
@@ -740,6 +755,7 @@
     layerChangeEnabled: layerChangeEnabled,
     layerChangeDimension: layerChangeDimension,
     layerSetDimensions: layerSetDimensions,
+    layerSetStyles: layerSetStyles,
     layerChangeName: layerChangeName,
     layerChangeStyle: layerChangeStyle,
     layerDelete: layerDelete,
@@ -747,8 +763,7 @@
     layerError: layerError,
     addAvailableBaseLayer: addAvailableBaseLayer,
     addAvailableBaseLayers: addAvailableBaseLayers,
-    serviceSetLayers: serviceSetLayers,
-    layerSetStyles: layerSetStyles
+    serviceSetLayers: serviceSetLayers
   });
 
   /* *
@@ -797,6 +812,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
+  var dateFormat = 'YYYY-MM-DDTHH:mm:ss[Z]';
   var generatedLayerIds = 0;
   var generateLayerId = function generateLayerId() {
     generatedLayerIds += 1;
@@ -862,19 +878,19 @@
     return registeredWMMapForReactMapId[wmjsMapId];
   };
   /**
-   * Returns the WMJSDimension object for given layerId and Dimension
+   * Returns the WMJSDimension object for given layerId and dimension name
    * @param layerId The layerId
-   * @param dimension The dimension to lookup
+   * @param dimensionName The dimension to lookup
    */
 
-  var getWMJSDimensionForLayerAndDimension = function getWMJSDimensionForLayerAndDimension(layerId, dimension) {
+  var getWMJSDimensionForLayerAndDimension = function getWMJSDimensionForLayerAndDimension(layerId, dimensionName) {
     var wmLayer = getWMLayerById(layerId);
 
-    if (!wmLayer || !dimension) {
+    if (!wmLayer || !dimensionName) {
       return null;
     }
 
-    var wmjsDimension = wmLayer.getDimension(dimension.name);
+    var wmjsDimension = wmLayer.getDimension(dimensionName);
 
     if (!wmjsDimension) {
       return null;
@@ -1094,6 +1110,18 @@
       return layer.layerType === LayerType.overLayer;
     });
   });
+  /**
+   * Gets styles of the passed layer
+   *
+   * Example: layerStyles = getLayerStyles(store, 'layerId_1')
+   * @param {object} store store: object - object from which the layers state will be extracted
+   * @param {string} layerId layerId: string - Id of the layer
+   * @returns {array} returnType: Style[] - array containing layer styles
+   */
+
+  var getLayerStyles = reselect.createSelector(getLayerById, function (layer) {
+    return layer && layer.styles ? layer.styles : [];
+  });
   /**
    * Gets dimensions of the passed layer
    *
@@ -1197,6 +1225,18 @@
   var getLayerService = reselect.createSelector(getLayerById, function (layer) {
     return layer && layer.service ? layer.service : '';
   });
+  /**
+   * Gets selected style of the passed layer
+   *
+   * Example: layerStyle = getLayerStyle(store, 'layerId_1')
+   * @param {object} store store: object - object from which the layers state will be extracted
+   * @param {string} layerId layerId: string - Id of the layer
+   * @returns {string} returnType: string - style that is currently selected
+   */
+
+  var getLayerStyle = reselect.createSelector(getLayerById, function (layer) {
+    return layer && layer.style ? layer.style : '';
+  });
   /**
    * Gets layer status
    *
@@ -1500,10 +1540,29 @@
      */
     [2147483647, 0]);
   };
-  var getValueFromEvent = function getValueFromEvent(event, newValue, sliderChangeFunction, sliderSetFunction) {
-    if (event.type === 'touchstart' || event.type === 'touchmove' || event.type === 'mousedown' || event.type === 'mousemove' || (event.ctrlKey || event.metaKey) && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-      sliderSetFunction(sliderChangeFunction(newValue));
+  var getNextTimeStepvalue = function getNextTimeStepvalue(value, max) {
+    var newValue = value + 1;
+    return newValue > max ? max : newValue;
+  };
+  var getPreviousTimeStepvalue = function getPreviousTimeStepvalue(value, min) {
+    var newValue = value - 1;
+    return newValue < min ? min : newValue;
+  };
+  var getValueFromKeyboardEvent = function getValueFromKeyboardEvent(event, value, min, max) {
+    if (event.ctrlKey || event.metaKey) {
+      switch (event.key) {
+        case 'ArrowDown':
+          return getPreviousTimeStepvalue(value, min);
+
+        case 'ArrowUp':
+          return getNextTimeStepvalue(value, max);
+
+        default:
+          return null;
+      }
     }
+
+    return null;
   };
   var getTimeStepFromDataInterval = function getTimeStepFromDataInterval(timeInterval) {
     switch (timeInterval.isRegularInterval) {
@@ -1668,9 +1727,9 @@
         _b = _a.isAnimating,
         isAnimating = _b === void 0 ? false : _b,
         _c = _a.animationStartTime,
-        animationStartTime = _c === void 0 ? moment__default["default"].utc(moment__default["default"]().unix() * 1000).subtract(5, 'h').toISOString() : _c,
+        animationStartTime = _c === void 0 ? moment__default["default"].utc(moment__default["default"]().unix() * 1000).subtract(5, 'h').format(dateFormat) : _c,
         _d = _a.animationEndTime,
-        animationEndTime = _d === void 0 ? moment__default["default"].utc(moment__default["default"]().unix() * 1000).subtract(10, 'm').toISOString() : _d,
+        animationEndTime = _d === void 0 ? moment__default["default"].utc(moment__default["default"]().unix() * 1000).subtract(10, 'm').format(dateFormat) : _d,
         _e = _a.isAutoUpdating,
         isAutoUpdating = _e === void 0 ? false : _e,
         _f = _a.isLooping,
@@ -1840,7 +1899,7 @@
     */
 
   var produceDraftStateSetMapDimensionFromLayerChangeDimension = function produceDraftStateSetMapDimensionFromLayerChangeDimension(draft, layerId, dimension) {
-    var wmjsDimension = getWMJSDimensionForLayerAndDimension(layerId, dimension);
+    var wmjsDimension = getWMJSDimensionForLayerAndDimension(layerId, dimension.name);
 
     if (!wmjsDimension) {
       return;
@@ -2129,23 +2188,23 @@
    * Example: endTimeOfAnimetion = getAnimationStartTime(store, 'mapid_1')
    * @param {object} store store: object - store object
    * @param {string} mapId mapId: string - Id of the map
-   * @returns {moment} returnType: Moment
+   * @returns {string} returnType: string
    */
 
   var getAnimationStartTime = reselect.createSelector(getMapById, function (store) {
-    return store ? moment__default["default"](store.animationStartTime) : moment__default["default"].utc().subtract(6, 'h');
+    return store ? store.animationStartTime : moment__default["default"].utc().subtract(6, 'h').format(dateFormat);
   });
   /**
    * Gets end time of animation
    *
-   * Example: endTimeOfAnimetion = getAnimationEndTime(store, 'mapid_1')
+   * Example: endTimeOfAnimation = getAnimationEndTime(store, 'mapid_1')
    * @param {object} store store: object - store object
    * @param {string} mapId mapId: string - Id of the map
-   * @returns {moment} returnType: Moment
+   * @returns {string} returnType: string
    */
 
   var getAnimationEndTime = reselect.createSelector(getMapById, function (store) {
-    return store ? moment__default["default"](store.animationEndTime) : moment__default["default"].utc().subtract(10, 'm');
+    return store ? store.animationEndTime : moment__default["default"].utc().subtract(10, 'm').format(dateFormat);
   });
   /**
    * Returns map is auto updating
@@ -2389,6 +2448,18 @@
       return uniqueMapDims;
     }, []);
   });
+  /**
+   * Returns the mapPinLocation for the current map
+   *
+   * Example getAllUniqueDimensions(store);
+   * @param {object} store store: object - store object
+   * @param {string} mapId mapId: string - Id of the map
+   * @returns {object} returnType: latitude and longitude of pin
+   */
+
+  var getPinLocation = reselect.createSelector(getMapById, function (store) {
+    return store ? store.mapPinLocation : {};
+  });
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2448,6 +2519,25 @@
 
     return null;
   };
+  /**
+   * Gets all keywords from services
+   *
+   *   const keywords = useSelector((store) => mapSelectors.getKeywords(store));
+   * @param {object} store store: object - Store object
+   * @returns {array} returnType: Keyword[]
+   */
+
+  var getKeywords = reselect.createSelector(servicesStore, function (store) {
+    var keywords = store ? store.allIds.flatMap(function (id) {
+      return store.byId[id].layers.flatMap(function (layer) {
+        return layer.keywords;
+      });
+    }) : null;
+
+    var uniqueKeywords = __spreadArray([], __read(new Set(keywords)));
+
+    return uniqueKeywords;
+  });
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2503,6 +2593,7 @@
     getLayerIndexByLayerId: getLayerIndexByLayerId,
     getLayerByLayerIndex: getLayerByLayerIndex,
     getAllUniqueDimensions: getAllUniqueDimensions,
+    getPinLocation: getPinLocation,
     getLayerById: getLayerById,
     getLayersById: getLayersById,
     getLayersIds: getLayersIds,
@@ -2510,6 +2601,7 @@
     getLayers: getLayers,
     getBaseLayers: getBaseLayers,
     getOverLayers: getOverLayers,
+    getLayerStyles: getLayerStyles,
     getLayerDimensions: getLayerDimensions,
     getLayerNonTimeDimensions: getLayerNonTimeDimensions,
     getLayerTimeDimension: getLayerTimeDimension,
@@ -2518,11 +2610,13 @@
     getLayerEnabled: getLayerEnabled,
     getLayerName: getLayerName,
     getLayerService: getLayerService,
+    getLayerStyle: getLayerStyle,
     getLayerStatus: getLayerStatus,
     getAvailableBaseLayersForMap: getAvailableBaseLayersForMap,
     getServiceIds: getServiceIds,
     getServices: getServices,
-    getServiceLayersByName: getServiceLayersByName
+    getServiceLayersByName: getServiceLayersByName,
+    getKeywords: getKeywords
   });
 
   /* *
@@ -2565,11 +2659,13 @@
     WEBMAP_SET_TIME_SLIDER_CENTER_TIME: WEBMAP_SET_TIME_SLIDER_CENTER_TIME,
     WEBMAP_SET_TIME_SLIDER_SECONDS_PER_PX: WEBMAP_SET_TIME_SLIDER_SECONDS_PER_PX,
     WEBMAP_SET_TIME_SLIDER_DATA_SCALE_TO_SECONDS_PER_PX: WEBMAP_SET_TIME_SLIDER_DATA_SCALE_TO_SECONDS_PER_PX,
+    WEBMAP_SET_PIN: WEBMAP_SET_PIN,
     WEBMAP_LAYER_CHANGE_OPACITY: WEBMAP_LAYER_CHANGE_OPACITY,
     WEBMAP_LAYER_CHANGE_NAME: WEBMAP_LAYER_CHANGE_NAME,
     WEBMAP_LAYER_CHANGE_STYLE: WEBMAP_LAYER_CHANGE_STYLE,
     WEBMAP_LAYER_CHANGE_DIMENSION: WEBMAP_LAYER_CHANGE_DIMENSION,
     WEBMAP_LAYER_SET_DIMENSIONS: WEBMAP_LAYER_SET_DIMENSIONS,
+    WEBMAP_LAYER_SET_STYLES: WEBMAP_LAYER_SET_STYLES,
     WEBMAP_LAYER_CHANGE_ENABLED: WEBMAP_LAYER_CHANGE_ENABLED,
     WEBMAP_LAYER_DELETE: WEBMAP_LAYER_DELETE,
     WEBMAP_LAYER_ERROR: WEBMAP_LAYER_ERROR,
@@ -2580,8 +2676,7 @@
     WEBMAP_ADD_BASELAYER: WEBMAP_ADD_BASELAYER,
     WEBMAP_ADD_AVAILABLE_BASELAYER: WEBMAP_ADD_AVAILABLE_BASELAYER,
     WEBMAP_ADD_AVAILABLE_BASELAYERS: WEBMAP_ADD_AVAILABLE_BASELAYERS,
-    MAP_SERVICES_SET_LAYERS: MAP_SERVICES_SET_LAYERS,
-    MAP_SERVICES_LAYER_SET_STYLES: MAP_SERVICES_LAYER_SET_STYLES
+    MAP_SERVICES_SET_LAYERS: MAP_SERVICES_SET_LAYERS
   });
 
   /* *
@@ -3127,7 +3222,7 @@
       var layer = draft.byId[layerId];
 
       if (layer && layer.mapId === mapId) {
-        var wmjsDimension = getWMJSDimensionForLayerAndDimension(layerId, dimension);
+        var wmjsDimension = getWMJSDimensionForLayerAndDimension(layerId, dimension.name);
 
         if (wmjsDimension && wmjsDimension.linked && wmjsDimension.name === 'reference_time') {
           wmjsDimension.linked = false;
@@ -3213,7 +3308,7 @@
       status: status
     });
   };
-  var initialState$4 = {
+  var initialState$5 = {
     byId: {},
     allIds: [],
     availableBaseLayers: {
@@ -3221,9 +3316,9 @@
       allIds: []
     }
   };
-  var reducer$4 = function reducer(state, action) {
+  var reducer$5 = function reducer(state, action) {
     if (state === void 0) {
-      state = initialState$4;
+      state = initialState$5;
     }
 
     switch (action.type) {
@@ -3505,6 +3600,18 @@
           });
         }
 
+      case WEBMAP_LAYER_SET_STYLES:
+        {
+          var _m = action.payload,
+              styles_1 = _m.styles,
+              layerId_10 = _m.layerId;
+          return produce__default["default"](state, function (draft) {
+            if (draft.byId[layerId_10]) {
+              draft.byId[layerId_10].styles = styles_1;
+            }
+          });
+        }
+
       case WEBMAP_ADD_AVAILABLE_BASELAYER:
         {
           var layer_3 = action.payload.layer;
@@ -3541,11 +3648,11 @@
     }
   };
 
-  var reducer$5 = /*#__PURE__*/Object.freeze({
+  var reducer$6 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     createLayer: createLayer,
-    initialState: initialState$4,
-    reducer: reducer$4
+    initialState: initialState$5,
+    reducer: reducer$5
   });
 
   /* *
@@ -3602,7 +3709,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var initialState$3 = {
+  var initialState$4 = {
     sources: {
       byId: {},
       allIds: []
@@ -3612,9 +3719,9 @@
       allIds: []
     }
   };
-  var reducer$3 = function reducer(state, action) {
+  var reducer$4 = function reducer(state, action) {
     if (state === void 0) {
-      state = initialState$3;
+      state = initialState$4;
     }
 
     switch (action.type) {
@@ -3822,7 +3929,7 @@
         });
 
       case SYNCGROUPS_CLEAR:
-        return initialState$3;
+        return initialState$4;
 
       default:
         return state;
@@ -4240,6 +4347,8 @@
 
     var done = function done(layers) {
       onServiceSetLayers && onServiceSetLayers({
+        id: wmLayer.service,
+        name: wmLayer.title,
         service: wmLayer.service,
         layers: layers
       });
@@ -4247,8 +4356,7 @@
 
       onLayerSetStyles && onLayerSetStyles({
         origin: origin,
-        service: wmLayer.service,
-        name: wmLayer.name,
+        layerId: wmLayer.id,
         styles: wmLayer.getStyles()
       });
       /* Select first style in service for a layer */
@@ -4259,35 +4367,8 @@
         style: wmLayer.currentStyle // || wmjsLayer.getStyles().length > 0 ? wmjsLayer.getStyles()[0].Name.value : 'default'
 
       });
-      var mapNeedsUpdate = false;
-
-      var _loop_1 = function _loop_1(d) {
-        if (wmLayer.reactWebMapJSLayer && wmLayer.reactWebMapJSLayer.props.dimensions) {
-          /* Try to set the dimension according to the react layer properties */
-          var reactLayerDimension = wmLayer.reactWebMapJSLayer.props.dimensions.find(function (dim) {
-            return dim.name === wmLayer.dimensions[d].name;
-          });
-
-          if (reactLayerDimension && reactLayerDimension.currentValue) {
-            if (reactLayerDimension.currentValue !== wmLayer.dimensions[d].currentValue) {
-              // eslint-disable-next-line no-param-reassign
-              wmLayer.dimensions[d].currentValue = reactLayerDimension.currentValue; // eslint-disable-next-line no-param-reassign
-
-              wmLayer.dimensions[d].synced = reactLayerDimension.synced;
-              mapNeedsUpdate = true;
-            }
-          }
-        }
-      };
-      /* Synchronize layer dimension properties to wmjslayer dimension values */
-
-
-      for (var d = 0; d < wmLayer.dimensions.length; d += 1) {
-        _loop_1(d);
-      }
       /* Trigger update of all map dimensions */
 
-
       onMapUpdateAllDimensions && onMapUpdateAllDimensions({
         origin: origin,
         mapId: mapId,
@@ -4335,12 +4416,6 @@
           };
         })
       });
-
-      if (mapNeedsUpdate) {
-        if (wmLayer.parentMaps && wmLayer.parentMaps.length > 0) {
-          wmLayer.parentMaps[0].draw();
-        }
-      }
     };
 
     service.getLayerObjectsFlat(done, function () {// do nothing
@@ -4942,7 +5017,7 @@
   var synchronizationGroupConfig = {
     id: 'syncronizationGroupStore-module',
     reducerMap: {
-      syncronizationGroupStore: reducer$3
+      syncronizationGroupStore: reducer$4
     },
     sagas: [rootSaga$3, rootSaga$2]
   };
@@ -4963,7 +5038,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$A = core.makeStyles(function (theme) {
+  var useStyles$E = core.makeStyles(function (theme) {
     return {
       select: {
         '& ul': {
@@ -5016,7 +5091,21 @@
         tooltipOpen = _f[0],
         setTooltipOpen = _f[1];
 
-    var classes = useStyles$A();
+    var classes = useStyles$E();
+
+    var preventDefault = function preventDefault(event) {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    var enableScroll = React__namespace.useCallback(function () {
+      document.removeEventListener('wheel', preventDefault, false);
+    }, []);
+    var disableScroll = React__namespace.useCallback(function () {
+      document.addEventListener('wheel', preventDefault, {
+        passive: false
+      });
+    }, []);
     var onWheel = React__namespace.useCallback(function (event) {
       if (selectOpen) return;
       var direction = event.deltaY < 0 ? 1 : -1;
@@ -5031,22 +5120,21 @@
       setSelectOpen(false);
     }, []);
     var onMouseEnter = React__namespace.useCallback(function () {
+      disableScroll();
       if (!selectOpen) setTooltipOpen(true);
-    }, [selectOpen]);
+    }, [selectOpen, disableScroll]);
     var onMouseLeave = React__namespace.useCallback(function () {
+      enableScroll();
       setTooltipOpen(false);
-    }, []);
+    }, [enableScroll]);
     var onFocus = React__namespace.useCallback(function () {
+      disableScroll();
       setTooltipOpen(true);
-    }, []);
+    }, [disableScroll]);
     var onBlur = React__namespace.useCallback(function () {
+      enableScroll();
       setTooltipOpen(false);
-    }, []);
-    React__namespace.useEffect(function () {
-      if (selectOpen === false) {
-        setTooltipOpen(false);
-      }
-    }, [selectOpen]);
+    }, [enableScroll]);
     return /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
       title: tooltip,
       placement: "top",
@@ -5110,7 +5198,7 @@
     actions: actions$1,
     constants: constants,
     types: types,
-    initialState: initialState$3
+    initialState: initialState$4
   });
 
   /* *
@@ -5151,13 +5239,13 @@
       source: source
     };
   };
-  var initialState$2 = {
+  var initialState$3 = {
     order: [],
     dialogs: {}
   };
-  var reducer$2 = function reducer(state, action) {
+  var reducer$3 = function reducer(state, action) {
     if (state === void 0) {
-      state = initialState$2;
+      state = initialState$3;
     }
 
     switch (action.type) {
@@ -5522,7 +5610,7 @@
   var uiModuleConfig = {
     id: 'ui-module',
     reducerMap: {
-      ui: reducer$2
+      ui: reducer$3
     },
     sagas: [rootSaga$1]
   };
@@ -5584,13 +5672,13 @@
     });
   };
 
-  var initialState$1 = {
+  var initialState$2 = {
     byId: {},
     allIds: []
   };
-  var reducer$1 = function reducer(state, action) {
+  var reducer$2 = function reducer(state, action) {
     if (state === void 0) {
-      state = initialState$1;
+      state = initialState$2;
     }
 
     switch (action.type) {
@@ -5702,11 +5790,11 @@
             draft.byId[mapId_7].isAnimating = true;
 
             if (action.payload.start) {
-              draft.byId[mapId_7].animationStartTime = action.payload.start.toISOString();
+              draft.byId[mapId_7].animationStartTime = action.payload.start;
             }
 
             if (action.payload.end) {
-              draft.byId[mapId_7].animationEndTime = action.payload.end.toISOString();
+              draft.byId[mapId_7].animationEndTime = action.payload.end;
             }
 
             if (action.payload.interval && action.payload.interval !== draft.byId[mapId_7].timeStep) {
@@ -5803,7 +5891,7 @@
           }
 
           return produce.produce(state, function (draft) {
-            draft.byId[mapId_12].animationStartTime = animationStartTime_1.toISOString();
+            draft.byId[mapId_12].animationStartTime = animationStartTime_1;
           });
         }
 
@@ -5818,7 +5906,7 @@
           }
 
           return produce.produce(state, function (draft) {
-            draft.byId[mapId_13].animationEndTime = animationEndTime_1.toISOString();
+            draft.byId[mapId_13].animationEndTime = animationEndTime_1;
           });
         }
       // LAYER actions
@@ -6153,6 +6241,21 @@
           });
         }
 
+      case WEBMAP_SET_PIN:
+        {
+          var _0 = action.payload,
+              mapId_28 = _0.mapId,
+              mapPinLocation_1 = _0.mapPinLocation;
+
+          if (!state.byId[mapId_28]) {
+            return state;
+          }
+
+          return produce.produce(state, function (draft) {
+            draft.byId[mapId_28].mapPinLocation = mapPinLocation_1;
+          });
+        }
+
       case GENERIC_SYNC_SETLAYERACTIONS:
         {
           /*
@@ -6161,9 +6264,9 @@
            * These targets can be used as payloads in new Layer actions.
            * These actions are here handled via the layer reducer, as it is the same logic
            */
-          var _0 = action.payload,
-              targets = _0.targets,
-              source_1 = _0.source;
+          var _1 = action.payload,
+              targets = _1.targets,
+              source_1 = _1.source;
           return targets.reduce(function (prevState, target) {
             var action = {
               payload: target,
@@ -6196,31 +6299,26 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var initialState = {
+  var initialState$1 = {
     byId: {},
     allIds: []
   };
-  var reducer = function reducer(state, action) {
+  var reducer$1 = function reducer(state, action) {
     if (state === void 0) {
-      state = initialState;
+      state = initialState$1;
     }
 
     switch (action.type) {
       case MAP_SERVICES_SET_LAYERS:
         return produce__default["default"](state, function (draft) {
           if (!draft.byId[action.payload.service]) draft.byId[action.payload.service] = {};
+          draft.byId[action.payload.service].id = action.payload.id;
+          draft.byId[action.payload.service].name = action.payload.name;
+          draft.byId[action.payload.service].service = action.payload.service;
           draft.byId[action.payload.service].layers = action.payload.layers;
           if (!draft.allIds.includes(action.payload.service)) draft.allIds.push(action.payload.service);
         });
 
-      case MAP_SERVICES_LAYER_SET_STYLES:
-        return produce__default["default"](state, function (draft) {
-          if (!draft.byId[action.payload.service]) draft.byId[action.payload.service] = {};
-          if (!draft.byId[action.payload.service].layer) draft.byId[action.payload.service].layer = {};
-          if (!draft.byId[action.payload.service].layer[action.payload.name]) draft.byId[action.payload.service].layer[action.payload.name] = {};
-          draft.byId[action.payload.service].layer[action.payload.name].styles = action.payload.styles;
-        });
-
       default:
         return state;
     }
@@ -6275,8 +6373,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, 'ceil');
-          roundedEnd = roundWithTimeStep(end && end.unix(), interval, 'floor');
+          roundedStart = roundWithTimeStep(start && moment__default["default"].utc(start).unix(), interval, 'ceil');
+          roundedEnd = roundWithTimeStep(end && moment__default["default"].utc(end).unix(), interval, 'floor');
           return [4
           /*yield*/
           , timeList || generateTimeList(moment__default["default"].utc(roundedStart * 1000), moment__default["default"].utc(roundedEnd * 1000), interval)];
@@ -6351,7 +6449,7 @@
     });
   }
   function updateAnimation(mapId, maxValue) {
-    var animationStart, animationEnd, t, deltaT, start, end, isAnimating$1, timeStep;
+    var animationStart, animationStartUnix, animationEnd, animationEndUnix, t, deltaT, start, end, isAnimating$1, timeStep;
     return __generator(this, function (_a) {
       switch (_a.label) {
         case 0:
@@ -6361,16 +6459,18 @@
 
         case 1:
           animationStart = _a.sent();
+          animationStartUnix = moment__default["default"].utc(animationStart).unix();
           return [4
           /*yield*/
           , effects.select(getAnimationEndTime, mapId)];
 
         case 2:
           animationEnd = _a.sent();
+          animationEndUnix = moment__default["default"].utc(animationEnd).unix();
           t = moment__default["default"].utc(maxValue).unix();
-          deltaT = t - animationEnd.unix();
-          start = moment__default["default"].unix(animationStart.unix() + deltaT).utc();
-          end = moment__default["default"].unix(animationEnd.unix() + deltaT).utc();
+          deltaT = t - animationEndUnix;
+          start = moment__default["default"].unix(animationStartUnix + deltaT).utc().format(dateFormat);
+          end = moment__default["default"].unix(animationEndUnix + deltaT).utc().format(dateFormat);
           return [4
           /*yield*/
           , effects.put(setAnimationEndTime({
@@ -6433,7 +6533,7 @@
     return __generator(this, function (_b) {
       switch (_b.label) {
         case 0:
-          _b.trys.push([0, 11,, 12]);
+          _b.trys.push([0, 12,, 13]);
 
           dimensions = payload.dimensions, layerId = payload.layerId;
           return [4
@@ -6477,7 +6577,10 @@
           if (!(layerId === activeLayerId && // only update the active layer
           shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue)) return [3
           /*break*/
-          , 8];
+          , 9];
+          if (!!isAnimating$1) return [3
+          /*break*/
+          , 7];
           return [4
           /*yield*/
           , effects.put(layerChangeDimension({
@@ -6492,44 +6595,47 @@
         case 6:
           _b.sent();
 
+          _b.label = 7;
+
+        case 7:
           return [4
           /*yield*/
           , effects.call(updateAnimation, mapId, newTimeDimension.maxValue)];
 
-        case 7:
+        case 8:
           _b.sent();
 
           return [3
           /*break*/
-          , 10];
+          , 11];
 
-        case 8:
+        case 9:
           if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue)) return [3
           /*break*/
-          , 10];
+          , 11];
           return [4
           /*yield*/
           , effects.call(updateAnimation, mapId, newTimeDimension.maxValue)];
 
-        case 9:
+        case 10:
           _b.sent();
 
-          _b.label = 10;
+          _b.label = 11;
 
-        case 10:
+        case 11:
           return [3
           /*break*/
-          , 12];
+          , 13];
 
-        case 11:
+        case 12:
           error_1 = _b.sent(); // eslint-disable-next-line no-console
 
           console.warn(error_1);
           return [3
           /*break*/
-          , 12];
+          , 13];
 
-        case 12:
+        case 13:
           return [2
           /*return*/
           ];
@@ -6671,9 +6777,9 @@
   var moduleConfig = {
     id: 'webmap-module',
     reducerMap: {
-      webmap: reducer$1,
-      services: reducer,
-      layers: reducer$4
+      webmap: reducer$2,
+      services: reducer$1,
+      layers: reducer$5
     },
     sagas: [rootSaga]
   };
@@ -6694,7 +6800,70 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var coreModuleConfig = [moduleConfig, synchronizationGroupConfig, uiModuleConfig];
+  var initialState = {
+    filters: {
+      searchFilter: ''
+    }
+  };
+  var reducer = function reducer(state, action) {
+    if (state === void 0) {
+      state = initialState;
+    }
+
+    switch (action.type) {
+      case 'LAYER_SELECT_SET_SEARCH_FILTER':
+        {
+          var filterText_1 = action.payload.filterText;
+          return produce__default["default"](state, function (draft) {
+            draft.filters.searchFilter = filterText_1;
+          });
+        }
+
+      default:
+        return state;
+    }
+  };
+
+  /* *
+   * 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 layerSelectConfig = {
+    id: 'layerSelect-module',
+    reducerMap: {
+      layerSelect: reducer
+    }
+  };
+
+  /* *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *     http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2021 - Finnish Meteorological Institute (FMI)
+   * */
+  var coreModuleConfig = [moduleConfig, synchronizationGroupConfig, uiModuleConfig, layerSelectConfig];
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -7710,7 +7879,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$z = core.makeStyles({
+  var useStyles$D = core.makeStyles({
     buttonDiv: {
       position: 'relative'
     },
@@ -7746,7 +7915,7 @@
         handleClose = _a.handleClose,
         _e = _a.layerType,
         layerType = _e === void 0 ? LayerType.mapLayer : _e;
-    var classes = useStyles$z();
+    var classes = useStyles$D();
 
     var _f = __read(React__namespace.useState(''), 2),
         serviceURL = _f[0],
@@ -7909,7 +8078,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$y = core.makeStyles(function (theme) {
+  var useStyles$C = core.makeStyles(function (theme) {
     return {
       buttonDiv: {
         position: 'relative'
@@ -7944,7 +8113,7 @@
         _f = _a.shouldFocus,
         shouldFocus = _f === void 0 ? false : _f;
     var ref = React__namespace.useRef(null);
-    var classes = useStyles$y();
+    var classes = useStyles$C();
 
     var _g = __read(React__namespace.useState(false), 2),
         open = _g[0],
@@ -8068,7 +8237,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$x = core.makeStyles(function (theme) {
+  var useStyles$B = core.makeStyles(function (theme) {
     return {
       button: {
         width: '24px',
@@ -8085,7 +8254,7 @@
         _b = _a.source,
         source = _b === void 0 ? 'app' : _b;
     var dispatch = reactRedux.useDispatch();
-    var classes = useStyles$x();
+    var classes = useStyles$B();
     var currentActiveMapId = reactRedux.useSelector(function (store) {
       return getDialogMapId(store, 'layerSelect');
     });
@@ -8127,7 +8296,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$w = core.makeStyles({
+  var useStyles$A = core.makeStyles({
     row: {
       height: '32px'
     },
@@ -8151,7 +8320,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _e = _a.layerSelect,
         layerSelect = _e === void 0 ? false : _e;
-    var classes = useStyles$w();
+    var classes = useStyles$A();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(core.Grid, {
       container: true,
@@ -8266,38 +8435,30 @@
    * */
 
   var DimensionSelect = function DimensionSelect(_a) {
-    var layer = _a.layer,
-        mapId = _a.mapId,
+    var layerId = _a.layerId,
         onLayerChangeDimension = _a.onLayerChangeDimension,
-        _b = _a.availableLayerDimensions,
-        availableLayerDimensions = _b === void 0 ? [] : _b,
+        _b = _a.layerDimensions,
+        layerDimensions = _b === void 0 ? [] : _b,
         isEnabled = _a.isEnabled;
     var classes = useTooltipContainerStyles(isEnabled);
-    var defaultDimName = availableLayerDimensions.length ? availableLayerDimensions[0].name : '';
-    /* Use state */
 
-    var _c = __read(React__namespace.useState(defaultDimName), 2),
+    var _c = __read(React__namespace.useState(layerDimensions.length ? layerDimensions[0].name : ''), 2),
         activeDimName = _c[0],
         setActiveDimName = _c[1];
-    /* Use effect to update the active dimension */
-
 
     React__namespace.useEffect(function () {
-      var activeDim = availableLayerDimensions.find(function (d) {
+      var activeDim = layerDimensions.find(function (d) {
         return d.name === activeDimName;
       });
 
       if (!activeDim) {
-        setActiveDimName(availableLayerDimensions.length ? availableLayerDimensions[0].name : '');
+        setActiveDimName(layerDimensions.length ? layerDimensions[0].name : '');
       }
-    }, [availableLayerDimensions, activeDimName]);
-    if (!availableLayerDimensions.length) return null;
-    if (!layer || !layer.id) return null;
+    }, [layerDimensions, activeDimName]);
+    if (!layerDimensions.length || !layerId) return null;
 
     var getValuesToDisplay = function getValuesToDisplay() {
-      var wmjsLayer = getWMLayerById(layer.id);
-      if (!wmjsLayer) return null;
-      var activeWMJSDim = wmjsLayer.getDimension(activeDimName) || wmjsLayer.getDimension(availableLayerDimensions[0].name);
+      var activeWMJSDim = getWMJSDimensionForLayerAndDimension(layerId, activeDimName) || getWMJSDimensionForLayerAndDimension(layerId, layerDimensions[0].name);
       if (!activeWMJSDim) return null;
       var availableDimValues = [];
 
@@ -8313,17 +8474,16 @@
 
     var valuesToDisplay = getValuesToDisplay();
     if (valuesToDisplay === null) return null;
-    var activeDimIndex = layer.dimensions.findIndex(function (dim) {
+    var activeDim = layerDimensions.find(function (dim) {
       return dim.name === activeDimName;
     });
-    if (activeDimIndex === -1) return null;
-    var activeDim = layer.dimensions[activeDimIndex];
+    if (!activeDim) return null;
 
     var selectDimensionValue = function selectDimensionValue(event) {
       event.stopPropagation();
 
       if (activeDim) {
-        onLayerChangeDimension(mapId, layer.id, activeDim.name, event.target.value);
+        onLayerChangeDimension(activeDim.name, event.target.value);
       }
     };
 
@@ -8332,12 +8492,12 @@
       setActiveDimName(event.target.value);
     };
 
-    var dimNameList = availableLayerDimensions.map(function (dimension) {
+    var dimNameList = layerDimensions.map(function (dimension) {
       return {
         value: dimension.name
       };
     });
-    var dimNameCurrentIndex = availableLayerDimensions.findIndex(function (value) {
+    var dimNameCurrentIndex = layerDimensions.findIndex(function (value) {
       return value.name === activeDim.name;
     });
     var dimValueList = valuesToDisplay.map(function (value) {
@@ -8348,6 +8508,7 @@
     var dimValueCurrentIndex = valuesToDisplay.findIndex(function (value) {
       return value === activeDim.currentValue;
     });
+    if (dimValueCurrentIndex === -1) return null;
     return /*#__PURE__*/React__namespace.createElement(core.Grid, {
       container: true,
       direction: "row",
@@ -8377,7 +8538,7 @@
       }
     }, /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
       disabled: true
-    }, "Select dimension"), availableLayerDimensions.map(function (dimension) {
+    }, "Select dimension"), layerDimensions.map(function (dimension) {
       return /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
         key: dimension.name,
         value: dimension.name
@@ -8396,7 +8557,7 @@
       currentIndex: dimValueCurrentIndex,
       onChange: selectDimensionValue,
       onChangeMouseWheel: function onChangeMouseWheel(e) {
-        return onLayerChangeDimension(mapId, layer.id, activeDim.name, e.value);
+        return onLayerChangeDimension(activeDim.name, e.value);
       },
       style: {
         maxWidth: '50%'
@@ -8427,7 +8588,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$v = core.makeStyles(function (theme) {
+  var useStyles$z = core.makeStyles(function (theme) {
     return core.createStyles({
       button: {
         height: 28,
@@ -8486,7 +8647,7 @@
         testId = _a.testId,
         props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId"]);
 
-    var classes = useStyles$v({
+    var classes = useStyles$z({
       isActive: isActive,
       isEnabled: isEnabled
     });
@@ -8523,7 +8684,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$u = core.makeStyles(function (theme) {
+  var useStyles$y = core.makeStyles(function (theme) {
     return core.createStyles({
       checkbox: {
         color: 'inherit',
@@ -8546,7 +8707,7 @@
     var isEnabled = _a.isEnabled,
         title = _a.title,
         onChangeEnableLayer = _a.onChangeEnableLayer;
-    var classes = useStyles$u(isEnabled);
+    var classes = useStyles$y(isEnabled);
 
     var onClick = function onClick() {
       onChangeEnableLayer(!isEnabled);
@@ -8602,7 +8763,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$t = core.makeStyles(function (theme) {
+  var useStyles$x = core.makeStyles(function (theme) {
     return core.createStyles({
       dropdownEmpty: {
         paddingLeft: 8,
@@ -8625,7 +8786,7 @@
         layers = _b === void 0 ? [] : _b,
         _c = _a.isEnabled,
         isEnabled = _c === void 0 ? true : _c;
-    var classes = useStyles$t();
+    var classes = useStyles$x();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
     if (!layers || !layers.length) {
@@ -8698,7 +8859,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$s = core.makeStyles(function (theme) {
+  var useStyles$w = core.makeStyles(function (theme) {
     return {
       opacityDiv: {
         height: 'calc(100% - 5px)',
@@ -8759,28 +8920,10 @@
         onLayerChangeOpacity = _a.onLayerChangeOpacity,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$s();
+    var classes = useStyles$w();
     var sliderClasses = shared.sliderStyles();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
-    var useOutsideAlerter = function useOutsideAlerter(ref) {
-      React__namespace.useEffect(function () {
-        var handleClickOutside = function handleClickOutside(event) {
-          if (ref.current && !ref.current.contains(event.target)) {
-            setOpen(false);
-          }
-        };
-
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () {
-          document.removeEventListener('mousedown', handleClickOutside);
-        };
-      }, [ref]);
-    };
-
-    var wrapperRef = React__namespace.useRef(null);
-    useOutsideAlerter(wrapperRef);
-
     var _c = __read(React__namespace.useState(false), 2),
         open = _c[0],
         setOpen = _c[1];
@@ -8789,6 +8932,19 @@
         tooltipOpen = _d[0],
         setTooltipOpen = _d[1];
 
+    var preventDefault = function preventDefault(event) {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    var enableScroll = React__namespace.useCallback(function () {
+      document.removeEventListener('wheel', preventDefault, false);
+    }, []);
+    var disableScroll = React__namespace.useCallback(function () {
+      document.addEventListener('wheel', preventDefault, {
+        passive: false
+      });
+    }, []);
     var onWheel = React__namespace.useCallback(function (event) {
       var multiplier = event.altKey ? 10 : 1;
       var direction = event.deltaY > 0 ? 0.01 * multiplier : -0.01 * multiplier;
@@ -8804,21 +8960,25 @@
       }
     }, [open]);
     var onMouseEnter = React__namespace.useCallback(function () {
+      disableScroll();
       if (!open) setTooltipOpen(true);
-    }, [open]);
+    }, [open, disableScroll]);
     var onMouseLeave = React__namespace.useCallback(function () {
+      enableScroll();
       setTooltipOpen(false);
-    }, []);
+    }, [enableScroll]);
     var onFocus = React__namespace.useCallback(function () {
+      disableScroll();
       setTooltipOpen(true);
-    }, []);
+    }, [disableScroll]);
     var onBlur = React__namespace.useCallback(function () {
+      enableScroll();
       setTooltipOpen(false);
-    }, []);
+    }, [enableScroll]);
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.opacityDiv,
-      ref: wrapperRef,
-      onWheel: onWheel
+      onWheel: onWheel,
+      "data-testid": "scrollOpacity"
     }, /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
       title: tooltipTitle,
       className: containerClass.textContainer,
@@ -8870,7 +9030,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$r = core.makeStyles(function (theme) {
+  var useStyles$v = core.makeStyles(function (theme) {
     return core.createStyles({
       icon: {
         minWidth: 32,
@@ -8887,7 +9047,7 @@
     var title = _a.title,
         tooltipTitle = _a.tooltipTitle,
         icon = _a.icon;
-    var classes = useStyles$r();
+    var classes = useStyles$v();
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(core.ListItemIcon, {
       className: classes.icon + " icon"
     }, icon), /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
@@ -8915,7 +9075,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$q = core.makeStyles(function (theme) {
+  var useStyles$u = core.makeStyles(function (theme) {
     return {
       menu: {
         backgroundColor: theme.palette.geowebColors.background.surface,
@@ -8933,7 +9093,7 @@
         onLayerDuplicate = _a.onLayerDuplicate,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$q();
+    var classes = useStyles$u();
 
     var _c = __read(React__namespace.useState(null), 2),
         anchorEl = _c[0],
@@ -8982,9 +9142,9 @@
   };
 
   var RenderStyles = function RenderStyles(_a) {
-    var services = _a.services,
-        layer = _a.layer,
-        mapId = _a.mapId,
+    var layerName = _a.layerName,
+        layerStyles = _a.layerStyles,
+        currentLayerStyle = _a.currentLayerStyle,
         onChangeLayerStyle = _a.onChangeLayerStyle,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
@@ -8996,22 +9156,15 @@
       legendURL: ''
     }];
 
-    if (services && layer && layer.service && services[layer.service] && services[layer.service].layer) {
-      var serviceLayer = services[layer.service].layer[layer.name];
-
-      if (serviceLayer && serviceLayer.styles && serviceLayer.styles.length > 0) {
-        styles.push.apply(styles, __spreadArray([], __read(serviceLayer.styles)));
-      }
+    if (layerStyles && layerStyles.length > 0) {
+      styles.push.apply(styles, __spreadArray([], __read(layerStyles)));
     }
 
-    var currentStyle = styles.filter(function (l) {
-      return l.name === layer.style;
-    })[0];
-    var styleValue = currentStyle || styles[0];
+    var currentStyle = currentLayerStyle !== '' ? currentLayerStyle : styles[0].name;
 
     var selectStyle = function selectStyle(event) {
       event.stopPropagation();
-      onChangeLayerStyle(mapId, layer.id, event.target.value);
+      onChangeLayerStyle(event.target.value);
     };
 
     var list = styles.map(function (style) {
@@ -9019,24 +9172,24 @@
         value: style.name
       };
     });
-    var currentIndex = styles.findIndex(function (layer) {
-      return styleValue.name === layer.name;
+    var currentIndex = styles.findIndex(function (style) {
+      return currentStyle === style.name;
     });
     return /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
       disableUnderline: true,
-      tooltip: "Select a style for layer " + layer.name,
+      tooltip: "Select a style for layer " + layerName,
       inputProps: {
         SelectDisplayProps: {
           'data-testid': 'selectStyle'
         }
       },
       className: classes.textContainer,
-      value: styleValue.name,
+      value: currentStyle,
       list: list,
       currentIndex: currentIndex,
       onChange: selectStyle,
       onChangeMouseWheel: function onChangeMouseWheel(e) {
-        return onChangeLayerStyle(mapId, layer.id, e.value);
+        return onChangeLayerStyle(e.value);
       }
     }, /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
       disabled: true
@@ -9064,7 +9217,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$p = core.makeStyles(function () {
+  var useStyles$t = core.makeStyles(function () {
     return core.createStyles({
       icon: {
         width: 20,
@@ -9078,7 +9231,7 @@
         onClickDelete = _a.onClickDelete,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$p();
+    var classes = useStyles$t();
     return /*#__PURE__*/React__namespace.createElement(LayerManagerButton, {
       tooltipTitle: tooltipTitle,
       onClick: onClickDelete,
@@ -9106,7 +9259,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$o = core.makeStyles(function (theme) {
+  var useStyles$s = core.makeStyles(function (theme) {
     return core.createStyles({
       icon: {
         width: 18,
@@ -9143,7 +9296,7 @@
         isActive = _c === void 0 ? false : _c,
         _d = _a.isEnabled,
         isEnabled = _d === void 0 ? true : _d;
-    var classes = useStyles$o({
+    var classes = useStyles$s({
       isActive: isActive,
       isEnabled: isEnabled
     });
@@ -9192,7 +9345,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$n = core.makeStyles(function (theme) {
+  var useStyles$r = core.makeStyles(function (theme) {
     return core.createStyles({
       row: {
         background: function background(isEnabled) {
@@ -9244,7 +9397,7 @@
         layerActiveLayout = _a.layerActiveLayout,
         layerManagerWidth = _a.layerManagerWidth,
         dragHandle = _a.dragHandle;
-    var classes = useStyles$n(isEnabled);
+    var classes = useStyles$r(isEnabled);
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
     var onClickRow = function onClickRow() {
@@ -9286,12 +9439,12 @@
       item: true,
       className: "" + columnSizes.column3
     }, layerStylesLayout || /*#__PURE__*/React__default["default"].createElement(RenderStyles, {
-      services: services,
-      mapId: mapId,
-      layer: layer,
-      onChangeLayerStyle: function onChangeLayerStyle(_mapId, _layerId, style) {
+      layerStyles: layer.styles,
+      layerName: layer.name,
+      currentLayerStyle: layer.style,
+      onChangeLayerStyle: function onChangeLayerStyle(style) {
         onLayerChangeStyle({
-          layerId: _layerId,
+          layerId: layerId,
           style: style
         });
       }
@@ -9311,10 +9464,9 @@
       item: true,
       className: "" + columnSizes.column5
     }, layerDimensionLayout || /*#__PURE__*/React__default["default"].createElement(DimensionSelect, {
-      layer: layer,
-      mapId: mapId,
-      availableLayerDimensions: filterNonTimeDimensions(layer.dimensions),
-      onLayerChangeDimension: function onLayerChangeDimension(_mapId, _layerId, dimensionName, dimensionValue) {
+      layerId: layerId,
+      layerDimensions: filterNonTimeDimensions(layer.dimensions),
+      onLayerChangeDimension: function onLayerChangeDimension(dimensionName, dimensionValue) {
         var dimension = {
           name: dimensionName,
           currentValue: dimensionValue
@@ -9494,40 +9646,33 @@
    * */
 
   var DimensionSelectConnect = function DimensionSelectConnect(_a) {
-    var layerId = _a.layerId,
-        mapId = _a.mapId;
+    var layerId = _a.layerId;
     var dispatch = reactRedux.useDispatch();
-    var layer = reactRedux.useSelector(function (store) {
-      return getLayerById(store, layerId);
-    });
-    var availableLayerDimensions = reactRedux.useSelector(function (store) {
+    var layerDimensions = reactRedux.useSelector(function (store) {
       return getLayerNonTimeDimensions(store, layerId);
     });
+    var isLayerEnabled = reactRedux.useSelector(function (store) {
+      return getLayerEnabled(store, layerId);
+    });
     var layerChangeDimension$1 = React__namespace.useCallback(function (_a) {
       var origin = _a.origin,
-          layerId = _a.layerId,
           dimension = _a.dimension;
       return dispatch(layerChangeDimension({
         origin: origin,
         layerId: layerId,
         dimension: dimension
       }));
-    }, [dispatch]);
-    var isLayerEnabled = reactRedux.useSelector(function (store) {
-      return getLayerEnabled(store, layerId);
-    });
+    }, [layerId, dispatch]);
     return /*#__PURE__*/React__namespace.createElement(DimensionSelect, {
-      layer: layer,
-      mapId: mapId,
-      availableLayerDimensions: availableLayerDimensions,
-      onLayerChangeDimension: function onLayerChangeDimension(_mapId, _layerId, dimensionName, dimensionValue) {
+      layerId: layerId,
+      layerDimensions: layerDimensions,
+      onLayerChangeDimension: function onLayerChangeDimension(dimensionName, dimensionValue) {
         var dimension = {
           name: dimensionName,
           currentValue: dimensionValue
         };
         layerChangeDimension$1({
           origin: 'layerrow',
-          layerId: layerId,
           dimension: dimension
         });
       },
@@ -9553,37 +9698,31 @@
    * */
 
   var RenderStylesConnect = function RenderStylesConnect(_a) {
-    var mapId = _a.mapId,
-        layerId = _a.layerId;
-    var dispatch = reactRedux.useDispatch(); // TODO: (Sander de Snaijer 2020-03-30 make specific selectors with layerId to prevent rerenders)
-
-    var services = reactRedux.useSelector(function (store) {
-      return getServices(store);
+    var layerId = _a.layerId;
+    var dispatch = reactRedux.useDispatch();
+    var layerName = reactRedux.useSelector(function (store) {
+      return getLayerName(store, layerId);
     });
-    var layer = reactRedux.useSelector(function (store) {
-      return getLayerById(store, layerId);
+    var layerStyles = reactRedux.useSelector(function (store) {
+      return getLayerStyles(store, layerId);
+    });
+    var currentLayerStyle = reactRedux.useSelector(function (store) {
+      return getLayerStyle(store, layerId);
     });
-    var layerChangeStyle$1 = React__namespace.useCallback(function (_a) {
-      var layerId = _a.layerId,
-          style = _a.style;
-      return dispatch(layerChangeStyle({
-        layerId: layerId,
-        style: style
-      }));
-    }, [dispatch]);
     var isLayerEnabled = reactRedux.useSelector(function (store) {
       return getLayerEnabled(store, layerId);
     });
-    return /*#__PURE__*/React__namespace.createElement(RenderStyles, {
-      mapId: mapId,
-      layer: layer,
-      services: services,
-      onChangeLayerStyle: function onChangeLayerStyle(_, layerId, style) {
-        layerChangeStyle$1({
-          layerId: layerId,
-          style: style
-        });
-      },
+    var layerChangeStyle$1 = React__namespace.useCallback(function (style) {
+      return dispatch(layerChangeStyle({
+        layerId: layerId,
+        style: style
+      }));
+    }, [layerId, dispatch]);
+    return /*#__PURE__*/React__namespace.createElement(RenderStyles, {
+      layerStyles: layerStyles,
+      layerName: layerName,
+      currentLayerStyle: currentLayerStyle,
+      onChangeLayerStyle: layerChangeStyle$1,
       isEnabled: isLayerEnabled
     });
   };
@@ -9796,12 +9935,10 @@
       layerServicesLayout: /*#__PURE__*/React__namespace.createElement(RenderLayersConnect, {
         layerId: layerId
       }),
-      layerStylesLayout: /*#__PURE__*/React__namespace.createElement(RenderStylesConnect, {
-        mapId: mapId,
+      layerDimensionLayout: /*#__PURE__*/React__namespace.createElement(DimensionSelectConnect, {
         layerId: layerId
       }),
-      layerDimensionLayout: /*#__PURE__*/React__namespace.createElement(DimensionSelectConnect, {
-        mapId: mapId,
+      layerStylesLayout: /*#__PURE__*/React__namespace.createElement(RenderStylesConnect, {
         layerId: layerId
       }),
       layerDeleteLayout: /*#__PURE__*/React__namespace.createElement(DeleteLayerConnect, {
@@ -9839,7 +9976,7 @@
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
   var TOOLTIP_TITLE = 'Drag a layer up or down';
-  var useStyles$m = core.makeStyles(function (theme) {
+  var useStyles$q = core.makeStyles(function (theme) {
     return {
       dragHandle: {
         cursor: 'grab',
@@ -9862,7 +9999,7 @@
         index = _c === void 0 ? undefined : _c,
         _d = _a.hideTooltip,
         hideTooltip = _d === void 0 ? false : _d;
-    var classes = useStyles$m({
+    var classes = useStyles$q({
       isDisabled: isDisabled
     });
     var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
@@ -9895,7 +10032,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$l = core.makeStyles(function () {
+  var useStyles$p = core.makeStyles(function () {
     return {
       layerRows: {
         width: '100%',
@@ -9961,7 +10098,7 @@
 
     var isSorting = activeDragIndex !== null;
     var isDragDisabled = layerIds.length === 1;
-    var classes = useStyles$l(isSorting);
+    var classes = useStyles$p(isSorting);
     return /*#__PURE__*/React__namespace.createElement(core.Grid, {
       container: true,
       item: true,
@@ -10171,7 +10308,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$k = core.makeStyles({
+  var useStyles$o = core.makeStyles({
     layerRow: {
       width: '100%',
       height: '36px'
@@ -10194,7 +10331,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _d = _a.tooltip,
         tooltip = _d === void 0 ? '' : _d;
-    var classes = useStyles$k();
+    var classes = useStyles$o();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(core.Grid, {
       container: true,
@@ -10239,7 +10376,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$j = core.makeStyles({
+  var useStyles$n = core.makeStyles({
     layerRowContainer: {
       position: 'relative',
       width: '100%',
@@ -10274,7 +10411,7 @@
         layerSelect = _e === void 0 ? false : _e,
         _f = _a.showAddLayersTooltip,
         showAddLayersTooltip = _f === void 0 ? true : _f;
-    var classes = useStyles$j();
+    var classes = useStyles$n();
 
     var _g = __read(React__namespace.useState(LayerManagerWidth.lg), 2),
         layerManagerWidth = _g[0],
@@ -10346,6 +10483,290 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
+  var useStyles$m = core.makeStyles(function (theme) {
+    return {
+      iconButton: {
+        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
+      }
+    };
+  });
+  var clearIconPath = 'M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M15.44426,7.26697571 L12.0002861,10.7110482 L8.55573996,7.26697571 C8.19978253,6.9110081 7.62292549,6.9110081 7.26696807,7.26697571 C6.91101064,7.62294331 6.91101064,8.19981687 7.26696807,8.55578447 L10.7115142,11.9998569 L7.26696807,15.4445017 C6.91101064,15.8004693 6.91101064,16.3767705 7.26696807,16.7333104 C7.44494678,16.910722 7.67843653,17 7.91192629,17 C8.14484377,17 8.37776125,16.910722 8.55573996,16.7333104 L12.0002861,13.289238 L15.44426,16.7333104 C15.6222388,16.910722 15.8551562,17 16.088646,17 C16.3221357,17 16.5550532,16.910722 16.7330319,16.7333104 C17.0889894,16.3767705 17.0889894,15.8004693 16.7330319,15.4445017 L13.289058,11.9998569 L16.7330319,8.55578447 C17.0889894,8.19981687 17.0889894,7.62294331 16.7330319,7.26697571 C16.3770745,6.9110081 15.8002175,6.9110081 15.44426,7.26697571 Z';
+  var clearIcon = /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
+    style: {
+      width: '24px',
+      height: '24px'
+    },
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: clearIconPath
+  }));
+  var searchIconPath = 'M7.81701445,12.5845372 L7.81701445,12.5845372 C7.17924024,11.946763 6.82932049,11.100321 6.82932049,10.1993044 C6.82932049,9.29828785 7.17924024,8.45077582 7.81701445,7.8140717 C8.47405029,7.15703585 9.3376137,6.82851792 10.2022472,6.82851792 C11.0658106,6.82851792 11.929374,7.15703585 12.5874799,7.8140717 C13.9026217,9.12921348 13.9026217,11.2693954 12.5874799,12.5845372 C11.9497057,13.2212413 11.1021937,13.5722311 10.2022472,13.5722311 C9.3012306,13.5722311 8.45371857,13.2212413 7.81701445,12.5845372 M19.5858748,17.581862 L15.4681648,13.465222 C16.9513109,11.0735688 16.6613162,7.88683788 14.5874799,5.81300161 C12.1690744,3.39566613 8.23434992,3.39566613 5.81594436,5.81300161 C4.64419476,6.9847512 4,8.54280364 4,10.1993044 C4,11.8558052 4.64419476,13.4138577 5.81594436,14.5845372 C6.98769395,15.7562868 8.5446763,16.4015516 10.2022472,16.4015516 C11.376137,16.4015516 12.4965222,16.0719636 13.4681648,15.4662921 L17.5837346,19.582932 C17.8608882,19.8590155 18.2225789,19.9970572 18.5853398,19.9970572 C18.9470305,19.9970572 19.3087212,19.8590155 19.5858748,19.582932 C20.1380417,19.029695 20.1380417,18.135099 19.5858748,17.581862';
+  var searchIcon = /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
+    style: {
+      width: '24px',
+      height: '24px'
+    },
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: searchIconPath
+  }));
+
+  var SearchField = function SearchField() {
+    var _a = __read(React__namespace.useState(''), 2),
+        searchString = _a[0],
+        setSearchString = _a[1];
+
+    var classes = useStyles$m();
+    return /*#__PURE__*/React__namespace.createElement(core.TextField, {
+      variant: "filled",
+      label: "Search through services or enter a service URL",
+      value: searchString,
+      onChange: function onChange(e) {
+        return setSearchString(e.target.value);
+      },
+      autoFocus: true,
+      fullWidth: true,
+      InputProps: {
+        endAdornment: /*#__PURE__*/React__namespace.createElement(core.InputAdornment, {
+          position: "end"
+        }, searchString ? /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+          title: "Clear",
+          placement: "top"
+        }, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+          className: classes.iconButton,
+          edge: "end",
+          onClick: function onClick() {
+            return setSearchString('');
+          }
+        }, clearIcon)) : /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+          title: "Search",
+          placement: "top"
+        }, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+          className: classes.iconButton,
+          edge: "end"
+        }, searchIcon)))
+      }
+    });
+  };
+
+  /* *
+   * 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$l = core.makeStyles(function (theme) {
+    return core.createStyles({
+      chip: {
+        height: '32px',
+        margin: '0 8px 0 0',
+        padding: '5px 12px 7px',
+        borderRadius: '20px',
+        border: "solid 1px " + theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
+        backgroundColor: theme.palette.geowebColors.buttons.surfaceIconDefault.fill,
+        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
+        "float": 'left',
+        whiteSpace: 'nowrap',
+        '&:hover': {
+          backgroundColor: theme.palette.geowebColors.buttons.flatMouseover.fill,
+          cursor: 'pointer'
+        }
+      }
+    });
+  });
+
+  var ServiceChip = function ServiceChip(_a) {
+    var _b = _a.all,
+        all = _b === void 0 ? false : _b,
+        service = _a.service;
+    var classes = useStyles$l();
+
+    if (all) {
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: classes.chip,
+        "data-testid": "serviceChipAll"
+      }, "All");
+    }
+
+    if (service && service.name) {
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: classes.chip,
+        "data-testid": "serviceChip"
+      }, service.name);
+    }
+
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: classes.chip
+    });
+  };
+
+  /* *
+   * 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$k = core.makeStyles(function (theme) {
+    return core.createStyles({
+      serviceChips: {
+        width: '100%',
+        display: 'inline-flex',
+        alignItems: 'center',
+        overflowX: 'visible',
+        "float": 'left',
+        paddingLeft: '32px'
+      },
+      scrollArrowLeft: {
+        width: '120px',
+        marginBottom: '-12px',
+        height: '34px',
+        backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
+        marginLeft: '-100%',
+        cursor: 'pointer'
+      },
+      serviceList: {
+        height: '32px',
+        marginTop: '8px',
+        width: '100%',
+        overflowX: 'hidden',
+        marginRight: '-120px'
+      },
+      scrollArrowRight: {
+        width: '120px',
+        marginBottom: '-12px',
+        height: '34px',
+        backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
+        right: '0px',
+        position: 'fixed',
+        cursor: 'pointer'
+      }
+    });
+  });
+
+  var ServiceList = function ServiceList(_a) {
+    var layerSelectWidth = _a.layerSelectWidth,
+        services = _a.services;
+    var classes = useStyles$k();
+
+    var _b = __read(React__namespace.useState(0), 2),
+        margin = _b[0],
+        setMargin = _b[1];
+
+    var _c = __read(React__namespace.useState(0), 2),
+        width = _c[0],
+        setWidth = _c[1];
+
+    var ref = React__namespace.useRef(null);
+    var onLeftArrowClick = React__namespace.useCallback(function () {
+      setMargin(Math.max(0, margin - 100));
+    }, [margin]);
+    var onRightArrowClick = React__namespace.useCallback(function () {
+      setMargin(Math.min(width - layerSelectWidth, margin + 100));
+    }, [margin, layerSelectWidth, width]);
+    var gapRight = 35;
+    React__namespace.useEffect(function () {
+      setWidth(ref.current.scrollWidth + gapRight);
+    }, [services, layerSelectWidth]);
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: classes.serviceList,
+      "data-testid": "serviceList"
+    }, margin !== 0 && /*#__PURE__*/React__namespace.createElement(icons.ChevronLeft, {
+      className: classes.scrollArrowLeft,
+      onClick: onLeftArrowClick,
+      "data-testid": "leftScrollArrow"
+    }), /*#__PURE__*/React__namespace.createElement("div", {
+      className: classes.serviceChips,
+      style: {
+        marginLeft: -margin + "px",
+        marginRight: margin + "px"
+      },
+      ref: ref
+    }, services && Object.keys(services) && Object.keys(services).length > 0 && /*#__PURE__*/React__namespace.createElement(ServiceChip, {
+      key: "All",
+      all: true
+    }), Object.keys(services).map(function (service) {
+      return /*#__PURE__*/React__namespace.createElement(ServiceChip, {
+        key: services[service].id,
+        service: services[service]
+      });
+    })), margin < width - layerSelectWidth - gapRight && /*#__PURE__*/React__namespace.createElement(icons.ChevronRight, {
+      className: classes.scrollArrowRight,
+      onClick: onRightArrowClick,
+      "data-testid": "rightScrollArrow"
+    }));
+  };
+
+  /* *
+   * 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 ServiceListConnect = function ServiceListConnect(_a) {
+    var layerSelectWidth = _a.layerSelectWidth;
+    var services = reactRedux.useSelector(function (store) {
+      return getServices(store);
+    });
+    return /*#__PURE__*/React__namespace.createElement(ServiceList, {
+      layerSelectWidth: layerSelectWidth,
+      services: services
+    });
+  };
+
+  /* *
+   * 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$j = core.makeStyles({
+    serviceList: {
+      height: '48px'
+    }
+  });
 
   var LayerSelect = function LayerSelect(_a) {
     var mapId = _a.mapId,
@@ -10360,20 +10781,31 @@
         order = _d === void 0 ? 0 : _d,
         _e = _a.source,
         source = _e === void 0 ? 'module' : _e;
+    var classes = useStyles$j();
+
+    var _f = __read(React__namespace.useState(750), 2),
+        width = _f[0],
+        setWidth = _f[1];
+
+    var onChangeSize = function onChangeSize(_a) {
+      var width = _a.width;
+      setWidth(width);
+    };
+
     return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
       title: showTitle ? "Layer Select " + mapId : 'Layer Select',
       startSize: {
-        width: 500,
+        width: width,
         height: 500
       },
       minWidth: 300,
       minHeight: 126,
       startPosition: {
-        top: 100,
+        top: 150,
         left: 100
       },
       isOpen: isOpen,
-      onChangeSize: function onChangeSize() {},
+      onChangeSize: onChangeSize,
       onClose: onClose,
       headerSize: "small",
       bounds: bounds,
@@ -10381,7 +10813,15 @@
       onMouseDown: onMouseDown,
       order: order,
       source: source
-    }, /*#__PURE__*/React__namespace.createElement("div", null));
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        padding: '6px'
+      }
+    }, /*#__PURE__*/React__namespace.createElement(SearchField, null), /*#__PURE__*/React__namespace.createElement("div", {
+      className: classes.serviceList
+    }, /*#__PURE__*/React__namespace.createElement(ServiceListConnect, {
+      layerSelectWidth: width
+    }))));
   };
 
   /* *
@@ -10480,6 +10920,8 @@
           getLayerNodesFromService(service.url).then(function (layers) {
             if (isMounted.current) {
               serviceSetLayers$1({
+                id: service.id,
+                name: service.name,
                 service: service.url,
                 layers: layers
               });
@@ -11745,6 +12187,11 @@
         text: speedFactor + "x"
       };
     });
+    var max = marks.length - 1;
+    var min = 0;
+    var currentValue = marks.findIndex(function (info) {
+      return info.delay === animationDelay;
+    });
 
     var getAnimationDelayValue = function getAnimationDelayValue(markPos) {
       return marks[markPos].delay || marks[0].delay;
@@ -11754,19 +12201,26 @@
       setOpen(!open);
     };
 
-    var onChangeSlider = function onChangeSlider(event, newValue) {
-      getValueFromEvent(event, newValue, getAnimationDelayValue, setMapAnimationDelay);
+    var onChangeSlider = function onChangeSlider(event, value) {
+      var newValue = getAnimationDelayValue(value);
+
+      if (event.type !== 'keydown') {
+        setMapAnimationDelay(newValue);
+      }
     };
 
     var onKeyDown = function onKeyDown(event) {
       if (event.key === 'Tab') {
         setOpen(!open);
       }
+
+      var newValue = getValueFromKeyboardEvent(event, currentValue, min, max);
+
+      if (newValue !== null) {
+        setMapAnimationDelay(getAnimationDelayValue(newValue));
+      }
     };
 
-    var currentValue = marks.findIndex(function (info) {
-      return info.delay === animationDelay;
-    });
     var text = marks[currentValue].text;
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.speedButtonDiv
@@ -11796,7 +12250,8 @@
       orientation: "vertical",
       value: currentValue,
       step: null,
-      max: marks.length - 1,
+      max: max,
+      min: min,
       marks: marks.map(function (_a) {
         var markPos = _a.markPos,
             text = _a.text;
@@ -12022,19 +12477,32 @@
     var currentMark = timeStepMarks.find(function (mark) {
       return mark.timeStepValue === timeStep;
     });
+    var value = currentMark && currentMark.value ? currentMark.value : 0;
+    var min = timeStepMarks[0].value;
+    var max = timeStepMarks[timeStepMarks.length - 1].value;
 
     var getTimeStepValue = function getTimeStepValue(value) {
       return timeStepMarks[Math.round(value - 1)].timeStepValue;
     };
 
-    var onChangeSlider = function onChangeSlider(event, newValue) {
-      getValueFromEvent(event, newValue, getTimeStepValue, onChangeTimeStep);
+    var onChangeSlider = function onChangeSlider(event, value) {
+      var newValue = getTimeStepValue(value);
+
+      if (event.type !== 'keydown') {
+        onChangeTimeStep(newValue);
+      }
     };
 
     var onKeyDown = function onKeyDown(event) {
       if (event.key === 'Tab') {
         setOpen(!open);
       }
+
+      var newValue = getValueFromKeyboardEvent(event, value, min, max);
+
+      if (newValue !== null) {
+        onChangeTimeStep(getTimeStepValue(newValue));
+      }
     };
 
     React__namespace.useEffect(function () {
@@ -12071,10 +12539,10 @@
     }, "Time step"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
       "data-testid": "timeStepButtonSlider",
       orientation: "vertical",
-      value: currentMark && currentMark.value ? currentMark.value : 0,
+      value: value,
       step: null,
-      min: timeStepMarks[0].value,
-      max: timeStepMarks[timeStepMarks.length - 1].value,
+      min: min,
+      max: max,
       marks: timeStepMarks,
       disabled: disabledSlider,
       onChange: onChangeSlider,
@@ -14048,28 +14516,28 @@
     var ZOOM_RATIO = 1.1;
 
     var zoomOut = function zoomOut(relativeX) {
-      var su = animationStartTime.unix();
-      var eu = animationEndTime.unix();
+      var su = moment__default["default"].utc(animationStartTime).unix();
+      var eu = moment__default["default"].utc(animationEndTime).unix();
       var targetTime = su + (eu - su) * relativeX;
-      onSetAnimationStartTime(moment__default["default"].utc(((su - targetTime) * ZOOM_RATIO + targetTime) * 1000));
-      onSetAnimationEndTime(moment__default["default"].utc(((eu - targetTime) * ZOOM_RATIO + targetTime) * 1000));
+      onSetAnimationStartTime(moment__default["default"].utc(((su - targetTime) * ZOOM_RATIO + targetTime) * 1000).format(dateFormat));
+      onSetAnimationEndTime(moment__default["default"].utc(((eu - targetTime) * ZOOM_RATIO + targetTime) * 1000).format(dateFormat));
     };
 
     var zoomIn = function zoomIn(relativeX) {
-      var su = animationStartTime.unix();
-      var eu = animationEndTime.unix();
+      var su = moment__default["default"].utc(animationStartTime).unix();
+      var eu = moment__default["default"].utc(animationEndTime).unix();
       var targetTime = su + (eu - su) * relativeX;
-      onSetAnimationStartTime(moment__default["default"].utc(((su - targetTime) / ZOOM_RATIO + targetTime) * 1000));
-      onSetAnimationEndTime(moment__default["default"].utc(((eu - targetTime) / ZOOM_RATIO + targetTime) * 1000));
+      onSetAnimationStartTime(moment__default["default"].utc(((su - targetTime) / ZOOM_RATIO + targetTime) * 1000).format(dateFormat));
+      onSetAnimationEndTime(moment__default["default"].utc(((eu - targetTime) / ZOOM_RATIO + targetTime) * 1000).format(dateFormat));
     };
 
     var curTime = selectedTime !== undefined ? selectedTime.toISOString() : moment__default["default"].utc().toISOString();
 
-    var _e = __read(React__namespace.useState(animationStartTime && animationStartTime.unix()), 2),
+    var _e = __read(React__namespace.useState(animationStartTime && moment__default["default"].utc(animationStartTime).unix()), 2),
         localAnimationStartTime = _e[0],
         setLocalAnimationStartTime = _e[1];
 
-    var _f = __read(React__namespace.useState(animationEndTime && animationEndTime.unix()), 2),
+    var _f = __read(React__namespace.useState(animationEndTime && moment__default["default"].utc(animationEndTime).unix()), 2),
         localAnimationEndTime = _f[0],
         setLocalAnimationEndTime = _f[1];
 
@@ -14143,12 +14611,12 @@
     var onMouseUpTouchEnd = function onMouseUpTouchEnd() {
       // Dispatch changes when releasing mouse
       if (isLeftMarkerDragging) {
-        onSetAnimationStartTime(moment__default["default"].utc(localAnimationStartTime * 1000));
+        onSetAnimationStartTime(moment__default["default"].utc(localAnimationStartTime * 1000).format(dateFormat));
         setAnimationDragged(true);
       }
 
       if (isRightMarkerDragging) {
-        onSetAnimationEndTime(moment__default["default"].utc(localAnimationEndTime * 1000));
+        onSetAnimationEndTime(moment__default["default"].utc(localAnimationEndTime * 1000).format(dateFormat));
         setAnimationDragged(true);
       }
 
@@ -14204,8 +14672,8 @@
     };
 
     React__namespace.useEffect(function () {
-      setLocalAnimationStartTime(animationStartTime && animationStartTime.unix());
-      setLocalAnimationEndTime(animationEndTime && animationEndTime.unix());
+      setLocalAnimationStartTime(animationStartTime && moment__default["default"].utc(animationStartTime).unix());
+      setLocalAnimationEndTime(animationEndTime && moment__default["default"].utc(animationEndTime).unix());
     }, [animationStartTime, animationEndTime]);
     var handleKeyDown = React__namespace.useCallback(function (event) {
       if (event.ctrlKey && dataStartTime && dataEndTime) {
@@ -14996,16 +15464,16 @@
       dataStartTime: dataStartTime,
       dataEndTime: dataEndTime,
       scale: scale,
-      onSetAnimationStartTime: function onSetAnimationStartTime(time) {
+      onSetAnimationStartTime: function onSetAnimationStartTime(animationStartTime) {
         setAnimationStartTime({
           mapId: mapId,
-          animationStartTime: time
+          animationStartTime: animationStartTime
         });
       },
-      onSetAnimationEndTime: function onSetAnimationEndTime(time) {
+      onSetAnimationEndTime: function onSetAnimationEndTime(animationEndTime) {
         setAnimationEndTime({
           mapId: mapId,
-          animationEndTime: time
+          animationEndTime: animationEndTime
         });
       },
       onSetNewDate: function onSetNewDate(newDate) {
@@ -17839,6 +18307,7 @@
     return adagucTimeFormatted;
   };
 
+  var ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION';
   var defaultxml2jsonrequestURL = 'http://localhost:10000/XML2JSON?';
 
   var ReactMapView =
@@ -17895,22 +18364,25 @@
       };
 
       _this.parseWMJSLayer = function (wmLayer, forceReload, updateStrategy, child) {
-        var _a = _this.props,
-            onMapUpdateAllDimensions = _a.onMapUpdateAllDimensions,
-            onLayerChangeStyle = _a.onLayerChangeStyle,
-            onLayerSetDimensions = _a.onLayerSetDimensions,
-            onServiceSetLayers = _a.onServiceSetLayers,
-            onLayerSetStyles = _a.onLayerSetStyles,
-            xml2jsonrequestURL = _a.xml2jsonrequestURL,
-            mapId = _a.mapId;
-
         var callback = function callback() {
           if (updateStrategy === 'all') {
-            setServiceMetadata(wmLayer, mapId, xml2jsonrequestURL, _this.adaguc.webMapJS, _this.props, onMapUpdateAllDimensions, onLayerChangeStyle, onServiceSetLayers, onLayerSetStyles, onLayerSetDimensions);
+            var _a = _this.props,
+                onMapUpdateAllDimensions = _a.onMapUpdateAllDimensions,
+                onLayerChangeStyle = _a.onLayerChangeStyle,
+                onLayerSetDimensions = _a.onLayerSetDimensions,
+                onServiceSetLayers = _a.onServiceSetLayers,
+                onLayerSetStyles = _a.onLayerSetStyles,
+                xml2jsonrequestURL_1 = _a.xml2jsonrequestURL,
+                mapId = _a.mapId;
+            setServiceMetadata(wmLayer, mapId, xml2jsonrequestURL_1, _this.adaguc.webMapJS, _this.props, onMapUpdateAllDimensions, onLayerChangeStyle, onServiceSetLayers, onLayerSetStyles, onLayerSetDimensions);
           }
 
           if (updateStrategy === 'onlydims') {
-            setServiceMetadata(wmLayer, mapId, xml2jsonrequestURL, _this.adaguc.webMapJS, _this.props, null, null, null, null, onLayerSetDimensions);
+            var _b = _this.props,
+                onLayerSetDimensions = _b.onLayerSetDimensions,
+                xml2jsonrequestURL_2 = _b.xml2jsonrequestURL,
+                mapId = _b.mapId;
+            setServiceMetadata(wmLayer, mapId, xml2jsonrequestURL_2, _this.adaguc.webMapJS, _this.props, null, null, null, null, onLayerSetDimensions);
           }
 
           if (child) {
@@ -17924,6 +18396,7 @@
           }
         };
 
+        var xml2jsonrequestURL = _this.props.xml2jsonrequestURL;
         wmLayer.parseLayer(callback, forceReload, xml2jsonrequestURL);
       };
 
@@ -17935,6 +18408,9 @@
       _this.drawDebounced = throttleDebounce.debounce(600, _this.drawDebounced);
       _this.checkNewProps = _this.checkNewProps.bind(_this);
       _this.checkAdaguc = _this.checkAdaguc.bind(_this);
+      _this.onAfterSetBBoxListener = _this.onAfterSetBBoxListener.bind(_this);
+      _this.onUpdateBBoxListener = _this.onUpdateBBoxListener.bind(_this);
+      _this.onDimChangeListener = _this.onDimChangeListener.bind(_this);
       _this.currentMapProps = {};
       _this.adagucContainerRef = /*#__PURE__*/React__namespace.createRef();
       _this.adagucWebMapJSRef = /*#__PURE__*/React__namespace.createRef();
@@ -17982,6 +18458,69 @@
       this.clearRefetchTimer();
     };
 
+    ReactMapView.prototype.onDimChangeListener = function () {
+      var _a = this.props,
+          mapId = _a.mapId,
+          onMapChangeDimension = _a.onMapChangeDimension;
+
+      if (this.adaguc && this.adaguc.webMapJS) {
+        var timeDimension = this.adaguc.webMapJS.getDimension('time');
+
+        if (timeDimension) {
+          onMapChangeDimension({
+            mapId: mapId,
+            origin: ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION,
+            dimension: {
+              name: 'time',
+              currentValue: timeDimension.currentValue
+            }
+          });
+        }
+      }
+    };
+
+    ReactMapView.prototype.onAfterSetBBoxListener = function (wmjsMap) {
+      var _this = this;
+
+      var _a = this.props,
+          mapId = _a.mapId,
+          onMapZoomEnd = _a.onMapZoomEnd;
+      /* Update the map after 100 ms */
+
+      window.setTimeout(function () {
+        var MapViewBBOX = _this.props.bbox;
+        var projectionInfo = wmjsMap.getProjection();
+        /* Trigger onMapZoomEnd callback */
+
+        var mapBBOX = projectionInfo.bbox;
+
+        if (MapViewBBOX.left !== mapBBOX.left || MapViewBBOX.right !== mapBBOX.right || MapViewBBOX.bottom !== mapBBOX.bottom || MapViewBBOX.top !== mapBBOX.top) {
+          onMapZoomEnd({
+            mapId: mapId,
+            bbox: {
+              left: projectionInfo.bbox.left,
+              bottom: projectionInfo.bbox.bottom,
+              right: projectionInfo.bbox.right,
+              top: projectionInfo.bbox.top
+            },
+            srs: projectionInfo.srs
+          });
+        }
+      }, 100);
+    };
+
+    ReactMapView.prototype.onUpdateBBoxListener = function (newBbox) {
+      var oldbbox = this.adaguc.oldbbox || new webmap.WMBBOX(ReactMapView.defaultProps.bbox);
+
+      if (oldbbox.left !== newBbox.left || oldbbox.right !== newBbox.right || oldbbox.top !== newBbox.top || oldbbox.bottom !== newBbox.bottom) {
+        oldbbox.left = newBbox.left;
+        oldbbox.right = newBbox.right;
+        oldbbox.top = newBbox.top;
+        oldbbox.bottom = newBbox.bottom;
+        this.adaguc.oldbbox = new webmap.WMBBOX(oldbbox);
+      }
+    };
+
     ReactMapView.prototype.getWMJSLayerFromReactLayer = function (wmLayers, reactWebMapJSLayer, index) {
       var foundLayer = null;
 
@@ -18019,8 +18558,9 @@
       if (!props) {
         return;
       }
-      /* Check map props */
 
+      var needsRedraw = false;
+      /* Check map props */
 
       if (!prevProps || prevProps.showLegend !== props.showLegend) {
         this.adaguc.webMapJS.displayLegendInMap(props.showLegend !== false);
@@ -18028,11 +18568,11 @@
 
       if (!prevProps || prevProps.showScaleBar !== props.showScaleBar) {
         this.adaguc.webMapJS.displayScaleBarInMap(props.showScaleBar !== false);
+        needsRedraw = true;
       }
-
-      var needsRedraw = false;
       /* Check map dimensions */
 
+
       if (!prevProps || prevProps.dimensions !== props.dimensions) {
         if (props.dimensions) {
           for (var d = 0; d < props.dimensions.length; d += 1) {
@@ -18070,21 +18610,21 @@
       /* Check display/hide map cursor */
 
 
-      if (!prevProps || prevProps.showCursor !== props.showCursor) {
-        if (props.showCursor === true) {
+      if (!prevProps || prevProps.displayMapPin !== props.displayMapPin) {
+        if (props.displayMapPin === true) {
           this.adaguc.webMapJS.getMapPin().showMapPin();
-        } else if (props.showCursor === false) {
+        } else if (props.displayMapPin === false) {
           this.adaguc.webMapJS.getMapPin().hideMapPin();
         }
       }
       /* Set map cursor location */
 
 
-      if (!prevProps || prevProps.mapCursorLocation !== props.mapCursorLocation) {
-        if (props.mapCursorLocation) {
+      if (!prevProps || prevProps.mapPinLocation !== props.mapPinLocation) {
+        if (props.mapPinLocation) {
           this.adaguc.webMapJS.getMapPin().positionMapPinByLatLon({
-            x: props.mapCursorLocation.lon,
-            y: props.mapCursorLocation.lat
+            x: props.mapPinLocation.lon,
+            y: props.mapPinLocation.lat
           });
         }
       }
@@ -18098,6 +18638,14 @@
           }
         }
       }
+      /* Check if layer metadata should be shown */
+
+
+      if (!prevProps || prevProps.showLayerInfo !== props.showLayerInfo) {
+        if (props.showLayerInfo) {
+          this.adaguc.webMapJS.showLayerInfo = props.showLayerInfo;
+        }
+      }
       /* Check children */
 
 
@@ -18359,9 +18907,7 @@
           xml2jsonrequestURL = _a.xml2jsonrequestURL,
           srs = _a.srs,
           bbox = _a.bbox,
-          onMapChangeDimension = _a.onMapChangeDimension,
-          onMapZoomEnd = _a.onMapZoomEnd,
-          onMapCursorChangeLocation = _a.onMapCursorChangeLocation;
+          onMapPinChangeLocation = _a.onMapPinChangeLocation;
 
       if (this.adaguc.webMapJSCreated) {
         return;
@@ -18369,6 +18915,9 @@
 
       this.adaguc.webMapJSCreated = true;
       this.adaguc.webMapJS = new webmap.WMJSMap(this.adagucWebMapJSRef.current);
+      this.adaguc.webMapJS.showLayerInfo = false;
+      /* Enable to show actual layer properties in the map */
+
       registerWMJSMap(this.adaguc.webMapJS, mapId);
       this.adaguc.webMapJS.removeAllLayers();
       this.adaguc.webMapJS.setXML2JSONURL(xml2jsonrequestURL);
@@ -18384,20 +18933,7 @@
       }
 
       this.adaguc.webMapJS.addListener('ondimchange', function () {
-        if (_this.adaguc && _this.adaguc.webMapJS) {
-          var timeDimension = _this.adaguc.webMapJS.getDimension('time');
-
-          if (timeDimension) {
-            onMapChangeDimension({
-              mapId: mapId,
-              origin: 'ReactMapView, 663',
-              dimension: {
-                name: 'time',
-                currentValue: timeDimension.currentValue
-              }
-            });
-          }
-        }
+        _this.onDimChangeListener();
       }, true);
       this.adaguc.webMapJS.addListener('onmapready', function () {
         _this.setState({
@@ -18405,42 +18941,20 @@
         });
       });
       this.adaguc.webMapJS.addListener('aftersetbbox', function (wmjsMap) {
-        /* Update the map after 1000 ms */
-        window.setTimeout(function () {
-          var MapViewBBOX = _this.props.bbox;
-          var projectionInfo = wmjsMap.getProjection();
-          /* Trigger onMapZoomEnd callback */
-
-          var mapBBOX = projectionInfo.bbox;
-
-          if (MapViewBBOX.left !== mapBBOX.left || MapViewBBOX.right !== mapBBOX.right || MapViewBBOX.bottom !== mapBBOX.bottom || MapViewBBOX.top !== mapBBOX.top) {
-            onMapZoomEnd({
-              mapId: mapId,
-              bbox: {
-                left: projectionInfo.bbox.left,
-                bottom: projectionInfo.bbox.bottom,
-                right: projectionInfo.bbox.right,
-                top: projectionInfo.bbox.top
-              },
-              srs: projectionInfo.srs
-            });
-          }
-        }, 100);
+        _this.onAfterSetBBoxListener(wmjsMap);
       }, true);
       this.adaguc.webMapJS.addListener('onupdatebbox', function (newBbox) {
-        var oldbbox = _this.adaguc.oldbbox || new webmap.WMBBOX(ReactMapView.defaultProps.bbox);
-
-        if (oldbbox.left !== newBbox.left || oldbbox.right !== newBbox.right || oldbbox.top !== newBbox.top || oldbbox.bottom !== newBbox.bottom) {
-          oldbbox.left = newBbox.left;
-          oldbbox.right = newBbox.right;
-          oldbbox.top = newBbox.top;
-          oldbbox.bottom = newBbox.bottom;
-          _this.adaguc.oldbbox = new webmap.WMBBOX(oldbbox);
-        }
+        _this.onUpdateBBoxListener(newBbox);
       }, true);
       this.adaguc.webMapJS.addListener('onsetmappin', function (mapPinLatLonCoordinate) {
-        if (onMapCursorChangeLocation) {
-          onMapCursorChangeLocation(mapPinLatLonCoordinate);
+        if (onMapPinChangeLocation) {
+          onMapPinChangeLocation({
+            mapPinLocation: {
+              lat: mapPinLatLonCoordinate.lat,
+              lon: mapPinLatLonCoordinate.lon
+            },
+            mapId: mapId
+          });
         }
       }, true);
       this.resize();
@@ -18542,7 +19056,7 @@
         top: 11652109.058827976
       },
       shouldAutoFetch: true,
-      showCursor: false,
+      displayMapPin: false,
       onMount: function onMount() {
         return null;
       },
@@ -18732,16 +19246,17 @@
    * @param {string} mapId mapId: string - Id of the map
    * @param {object} [controls.zoomControls] **optional** controls: object - toggle the map controls, zoomControls defaults to true
    * @param {boolean} [displayTimeInMap] **optional** displayTimeInMap: boolean, toggles the mapTime, defaults to true
+   * @param {boolean} [displayMapPin] **optional** displayMapPin: boolean, toggle the display of pin on click, defaults to false
+   * @param {boolean} [showScaleBar] **optional** showScaleBar: boolean, toggles the scaleBar, defaults to true
    * @example
-   * ```<MapViewConnect mapId={mapId} />```
-   * @example
-   * ```<MapViewConnect mapId={mapId} controls={{ zoomControls: false }} displayTimeInMap={false} />```
+   * ```<MapViewConnect mapId={mapId} controls={{ zoomControls: false }} displayTimeInMap={false} showScaleBar={false}/>```
    */
 
   var MapViewConnect = function MapViewConnect(_a) {
     var mapId = _a.mapId,
         children = _a.children,
-        props = __rest(_a, ["mapId", "children"]);
+        displayMapPin = _a.displayMapPin,
+        props = __rest(_a, ["mapId", "children", "displayMapPin"]);
 
     var mapDimensions = reactRedux.useSelector(function (store) {
       return getMapDimensions(store, mapId);
@@ -18767,6 +19282,9 @@
     var animationDelay = reactRedux.useSelector(function (store) {
       return getMapAnimationDelay(store, mapId);
     });
+    var mapPinLocation = reactRedux.useSelector(function (store) {
+      return getPinLocation(store, mapId);
+    });
     var dispatch = reactRedux.useDispatch();
     var mapChangeDimension$1 = React__namespace.useCallback(function (mapDimensionPayload) {
       return dispatch(mapChangeDimension(mapDimensionPayload));
@@ -18810,6 +19328,9 @@
     var layerError$1 = React__namespace.useCallback(function (payload) {
       return dispatch(layerError(payload));
     }, [dispatch]);
+    var mapPinChangeLocation = React__namespace.useCallback(function (payload) {
+      return dispatch(setMapPinLocation(payload));
+    }, [dispatch]);
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: {
         height: '100%'
@@ -18831,9 +19352,11 @@
       },
       srs: srs,
       bbox: bbox,
+      mapPinLocation: displayMapPin && Object.keys(mapPinLocation).length ? mapPinLocation : null,
       dimensions: mapDimensions,
       activeLayerId: activeLayerId,
       animationDelay: animationDelay,
+      displayMapPin: displayMapPin,
       onMapChangeDimension: function onMapChangeDimension(mapDimensionPayload) {
         if (mapDimensionPayload && mapDimensionPayload.dimension && mapDimensionPayload.dimension.name && mapDimensionPayload.dimension.name === 'time') {
           setTime$1({
@@ -18865,6 +19388,7 @@
       onLayerSetDimensions: layerSetDimensions$1,
       onServiceSetLayers: serviceSetLayers$1,
       onLayerSetStyles: layerSetStyles$1,
+      onMapPinChangeLocation: mapPinChangeLocation,
       onMapZoomEnd: function onMapZoomEnd(a) {
         genericSetBbox({
           bbox: a.bbox,
@@ -19468,7 +19992,9 @@
         _h = _a.animationPayload,
         animationPayload = _h === void 0 ? undefined : _h,
         _j = _a.shouldShowZoomControls,
-        shouldShowZoomControls = _j === void 0 ? false : _j;
+        shouldShowZoomControls = _j === void 0 ? false : _j,
+        _k = _a.displayMapPin,
+        displayMapPin = _k === void 0 ? false : _k;
     var classes = useStyles$4();
     var dispatch = reactRedux.useDispatch();
     var mapId = React__default["default"].useRef(id || generateMapId()).current;
@@ -19478,9 +20004,9 @@
     }); // make sure all layers have a unique id before going forward
 
 
-    var _k = generateUniqueLayerIds(layers, activeLayerId),
-        layersNewIds = _k.layersNewIds,
-        activeLayerNewId = _k.activeLayerNewId;
+    var _l = generateUniqueLayerIds(layers, activeLayerId),
+        layersNewIds = _l.layersNewIds,
+        activeLayerNewId = _l.activeLayerNewId;
 
     React__default["default"].useEffect(function () {
       // set layers
@@ -19517,8 +20043,8 @@
 
         dispatch(mapStartAnimation({
           mapId: mapId,
-          start: moment__default["default"].utc().subtract(duration, 'minutes'),
-          end: moment__default["default"].utc(),
+          start: moment__default["default"].utc().subtract(duration, 'minutes').format(dateFormat),
+          end: moment__default["default"].utc().format(dateFormat),
           interval: animationPayload && animationPayload.interval ? animationPayload.interval : animationIntervalDefault
         }));
 
@@ -19551,6 +20077,7 @@
     })), /*#__PURE__*/React__default["default"].createElement(MapViewConnect, {
       controls: {},
       displayTimeInMap: displayTimeInMap,
+      displayMapPin: displayMapPin,
       showScaleBar: false,
       mapId: mapId
     }));
@@ -19950,7 +20477,9 @@
         _f = _a.shouldShowZoomControls,
         shouldShowZoomControls = _f === void 0 ? true : _f,
         _g = _a.animationPayload,
-        animationPayload = _g === void 0 ? undefined : _g;
+        animationPayload = _g === void 0 ? undefined : _g,
+        _h = _a.displayMapPin,
+        displayMapPin = _h === void 0 ? false : _h;
     var classes = useStyles$2();
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: classes.mapSliderConnect,
@@ -19975,7 +20504,8 @@
       shouldAutoUpdate: shouldAutoUpdate,
       shouldAnimate: shouldAnimate,
       animationPayload: animationPayload,
-      shouldShowZoomControls: shouldShowZoomControls
+      shouldShowZoomControls: shouldShowZoomControls,
+      displayMapPin: displayMapPin
     }));
   };
 
@@ -20010,6 +20540,7 @@
           return /*#__PURE__*/React__default["default"].createElement(ConfigurableMapWithSliderConnect, __assign({}, mapPreset, {
             id: id,
             bbox: mapPreset && mapPreset.proj && mapPreset.proj.bbox,
+            displayMapPin: mapPreset && mapPreset.displayMapPin,
             srs: mapPreset && mapPreset.proj && mapPreset.proj.srs,
             shouldAutoUpdate: mapPreset && mapPreset.shouldAutoUpdate || false,
             shouldShowZoomControls: shouldShowZoomControls !== undefined ? shouldShowZoomControls : true,
@@ -20759,6 +21290,7 @@
   exports.ZoomControls = ZoomControls;
   exports.componentsLookUp = componentsLookUp;
   exports.coreModuleConfig = coreModuleConfig;
+  exports.dateFormat = dateFormat;
   exports.defaultConfigurations = defaultConfigurations;
   exports.filterNonTimeDimensions = filterNonTimeDimensions;
   exports.generateLayerId = generateLayerId;
@@ -20773,7 +21305,7 @@
   exports.getWMJSMapById = getWMJSMapById;
   exports.getWMJSTimeDimensionForLayerId = getWMJSTimeDimensionForLayerId;
   exports.getWMLayerById = getWMLayerById;
-  exports.layerReducer = reducer$5;
+  exports.layerReducer = reducer$6;
   exports.makeMapPreset = makeMapPreset;
   exports.mapActions = actions$3;
   exports.mapConstants = constants$1;