@opengeoweb/core 2.1.1 → 2.1.2

package/core.esm.js

@@ -5,11 +5,11 @@ import React__default, { useState, Component, useRef, useEffect } from 'react';
 import produce, { produce as produce$1 } from 'immer';
 import { takeLatest, put, select, call } from 'redux-saga/effects';
 import { WMGetServiceFromStore, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer } from '@opengeoweb/webmap';
-import { makeStyles, Tooltip, Select, Grid, InputLabel, IconButton, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, createStyles, MenuItem, Checkbox, SvgIcon, ListItemIcon, Menu, FormControl, withStyles, Slider, Switch, FormControlLabel, Popover, useMediaQuery, useTheme } from '@material-ui/core';
+import { makeStyles, Tooltip, Select, Grid, InputLabel, IconButton, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, createStyles, MenuItem, Checkbox, SvgIcon, ListItemIcon, Menu, FormControl, InputAdornment, withStyles, Slider, Switch, FormControlLabel, Popover, useMediaQuery, useTheme } from '@material-ui/core';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { sliderStyles, CustomSlider, ToolContainerDraggable, useIsMounted } from '@opengeoweb/shared';
 import _ from 'lodash';
-import { Cached, Add, MoreVert, FileCopy, Delete, DragIndicator, Link, LinkOff, DeleteForever } from '@material-ui/icons';
+import { Cached, Add, MoreVert, FileCopy, Delete, DragIndicator, ChevronLeft, ChevronRight, Link, LinkOff, DeleteForever } from '@material-ui/icons';
 import { Sortable, ReactSortable } from 'react-sortablejs';
 import { ToggleButton } from '@material-ui/lab';
 import { debounce } from 'throttle-debounce';
@@ -56,6 +56,7 @@ var WEBMAP_TOGGLE_TIME_SLIDER_HOVER = 'WEBMAP_TOGGLE_TIME_SLIDER_HOVER';
 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");
@@ -147,7 +148,7 @@ var mapUpdateAllMapDimensions = function mapUpdateAllMapDimensions(payload) {
  * 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) {
@@ -264,7 +265,7 @@ var setAnimationDelay = function setAnimationDelay(payload) {
  *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) {
@@ -277,7 +278,7 @@ var setAnimationStartTime = function setAnimationStartTime(payload) {
  *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) {
@@ -351,6 +352,19 @@ var setTimeSliderDataScaleToSecondsPerPx = function setTimeSliderDataScaleToSeco
     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");
@@ -373,6 +387,7 @@ var WEBMAP_LAYER_CHANGE_NAME = 'WEBMAP_LAYER_CHANGE_NAME';
 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';
@@ -521,6 +536,19 @@ var layerSetDimensions = function layerSetDimensions(payload) {
     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
  *
@@ -634,7 +662,6 @@ var addAvailableBaseLayers = function addAvailableBaseLayers(payload) {
  * 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");
@@ -665,19 +692,6 @@ var serviceSetLayers = function serviceSetLayers(payload) {
     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");
@@ -719,6 +733,7 @@ var actions$3 = /*#__PURE__*/Object.freeze({
   setTimeSliderCenterTime: setTimeSliderCenterTime,
   setTimeSliderSecondsPerPx: setTimeSliderSecondsPerPx,
   setTimeSliderDataScaleToSecondsPerPx: setTimeSliderDataScaleToSecondsPerPx,
+  setMapPinLocation: setMapPinLocation,
   setLayers: setLayers,
   setBaseLayers: setBaseLayers,
   addBaseLayer: addBaseLayer,
@@ -727,6 +742,7 @@ var actions$3 = /*#__PURE__*/Object.freeze({
   layerChangeEnabled: layerChangeEnabled,
   layerChangeDimension: layerChangeDimension,
   layerSetDimensions: layerSetDimensions,
+  layerSetStyles: layerSetStyles,
   layerChangeName: layerChangeName,
   layerChangeStyle: layerChangeStyle,
   layerDelete: layerDelete,
@@ -734,8 +750,7 @@ var actions$3 = /*#__PURE__*/Object.freeze({
   layerError: layerError,
   addAvailableBaseLayer: addAvailableBaseLayer,
   addAvailableBaseLayers: addAvailableBaseLayers,
-  serviceSetLayers: serviceSetLayers,
-  layerSetStyles: layerSetStyles
+  serviceSetLayers: serviceSetLayers
 });
 
 /* *
@@ -784,6 +799,7 @@ var Scale;
  * 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;
@@ -849,19 +865,19 @@ var getWMJSMapById = function getWMJSMapById(wmjsMapId) {
   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;
@@ -1081,6 +1097,18 @@ var getOverLayers = createSelector(getAllLayers, function (layers) {
     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 = createSelector(getLayerById, function (layer) {
+  return layer && layer.styles ? layer.styles : [];
+});
 /**
  * Gets dimensions of the passed layer
  *
@@ -1184,6 +1212,18 @@ var getLayerName = createSelector(getLayerById, function (layer) {
 var getLayerService = 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 = createSelector(getLayerById, function (layer) {
+  return layer && layer.style ? layer.style : '';
+});
 /**
  * Gets layer status
  *
@@ -1631,10 +1671,29 @@ var getDataLimitsFromLayers = function getDataLimitsFromLayers(layers) {
    */
   [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) {
@@ -1798,9 +1857,9 @@ var createMap = function createMap(_ref) {
       _ref$isAnimating = _ref.isAnimating,
       isAnimating = _ref$isAnimating === void 0 ? false : _ref$isAnimating,
       _ref$animationStartTi = _ref.animationStartTime,
-      animationStartTime = _ref$animationStartTi === void 0 ? moment.utc(moment().unix() * 1000).subtract(5, 'h').toISOString() : _ref$animationStartTi,
+      animationStartTime = _ref$animationStartTi === void 0 ? moment.utc(moment().unix() * 1000).subtract(5, 'h').format(dateFormat) : _ref$animationStartTi,
       _ref$animationEndTime = _ref.animationEndTime,
-      animationEndTime = _ref$animationEndTime === void 0 ? moment.utc(moment().unix() * 1000).subtract(10, 'm').toISOString() : _ref$animationEndTime,
+      animationEndTime = _ref$animationEndTime === void 0 ? moment.utc(moment().unix() * 1000).subtract(10, 'm').format(dateFormat) : _ref$animationEndTime,
       _ref$isAutoUpdating = _ref.isAutoUpdating,
       isAutoUpdating = _ref$isAutoUpdating === void 0 ? false : _ref$isAutoUpdating,
       _ref$isLooping = _ref.isLooping,
@@ -1970,7 +2029,7 @@ var findMapIdFromLayerId = function findMapIdFromLayerId(draft, layerId) {
   */
 
 var produceDraftStateSetMapDimensionFromLayerChangeDimension = function produceDraftStateSetMapDimensionFromLayerChangeDimension(draft, layerId, dimension) {
-  var wmjsDimension = getWMJSDimensionForLayerAndDimension(layerId, dimension);
+  var wmjsDimension = getWMJSDimensionForLayerAndDimension(layerId, dimension.name);
 
   if (!wmjsDimension) {
     return;
@@ -2259,23 +2318,23 @@ var isAnimating = createSelector(getMapById, function (store) {
  * 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 = createSelector(getMapById, function (store) {
-  return store ? moment(store.animationStartTime) : moment.utc().subtract(6, 'h');
+  return store ? store.animationStartTime : moment.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 = createSelector(getMapById, function (store) {
-  return store ? moment(store.animationEndTime) : moment.utc().subtract(10, 'm');
+  return store ? store.animationEndTime : moment.utc().subtract(10, 'm').format(dateFormat);
 });
 /**
  * Returns map is auto updating
@@ -2519,23 +2578,18 @@ var getAllUniqueDimensions = createSelector(getAllMapIds, function (store) {
     return uniqueMapDims;
   }, []);
 });
-
-/* *
- * 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.
+/**
+ * Returns the mapPinLocation for the current map
  *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
+ * 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 = createSelector(getMapById, function (store) {
+  return store ? store.mapPinLocation : {};
+});
 
 var servicesStore = function servicesStore(store) {
   return store && store.services ? store.services : null;
@@ -2578,6 +2632,25 @@ var getServiceLayersByName = function getServiceLayersByName(store, serviceName)
 
   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 = 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 = _toConsumableArray(new Set(keywords));
+
+  return uniqueKeywords;
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2633,6 +2706,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getLayerIndexByLayerId: getLayerIndexByLayerId,
   getLayerByLayerIndex: getLayerByLayerIndex,
   getAllUniqueDimensions: getAllUniqueDimensions,
+  getPinLocation: getPinLocation,
   getLayerById: getLayerById,
   getLayersById: getLayersById,
   getLayersIds: getLayersIds,
@@ -2640,6 +2714,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getLayers: getLayers,
   getBaseLayers: getBaseLayers,
   getOverLayers: getOverLayers,
+  getLayerStyles: getLayerStyles,
   getLayerDimensions: getLayerDimensions,
   getLayerNonTimeDimensions: getLayerNonTimeDimensions,
   getLayerTimeDimension: getLayerTimeDimension,
@@ -2648,11 +2723,13 @@ var selectors = /*#__PURE__*/Object.freeze({
   getLayerEnabled: getLayerEnabled,
   getLayerName: getLayerName,
   getLayerService: getLayerService,
+  getLayerStyle: getLayerStyle,
   getLayerStatus: getLayerStatus,
   getAvailableBaseLayersForMap: getAvailableBaseLayersForMap,
   getServiceIds: getServiceIds,
   getServices: getServices,
-  getServiceLayersByName: getServiceLayersByName
+  getServiceLayersByName: getServiceLayersByName,
+  getKeywords: getKeywords
 });
 
 /* *
@@ -2695,11 +2772,13 @@ var constants$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -2710,8 +2789,7 @@ var constants$1 = /*#__PURE__*/Object.freeze({
   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
 });
 
 /* *
@@ -3284,7 +3362,7 @@ var produceDraftStateForAllLayersForDimensionWithinMap = function produceDraftSt
     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;
@@ -3354,7 +3432,7 @@ var createLayer = function createLayer(_a) {
     status: status
   });
 };
-var initialState$4 = {
+var initialState$5 = {
   byId: {},
   allIds: [],
   availableBaseLayers: {
@@ -3362,8 +3440,8 @@ var initialState$4 = {
     allIds: []
   }
 };
-var reducer$4 = function reducer() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$4;
+var reducer$5 = function reducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$5;
   var action = arguments.length > 1 ? arguments[1] : undefined;
 
   switch (action.type) {
@@ -3647,6 +3725,18 @@ var reducer$4 = function reducer() {
         });
       }
 
+    case WEBMAP_LAYER_SET_STYLES:
+      {
+        var _action$payload12 = action.payload,
+            styles = _action$payload12.styles,
+            _layerId9 = _action$payload12.layerId;
+        return produce(state, function (draft) {
+          if (draft.byId[_layerId9]) {
+            draft.byId[_layerId9].styles = styles;
+          }
+        });
+      }
+
     case WEBMAP_ADD_AVAILABLE_BASELAYER:
       {
         var _layer2 = action.payload.layer;
@@ -3683,11 +3773,11 @@ var reducer$4 = function reducer() {
   }
 };
 
-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
 });
 
 /* *
@@ -3744,7 +3834,7 @@ var removeInPlace = function removeInPlace(inDraftArray, condition) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var initialState$3 = {
+var initialState$4 = {
   sources: {
     byId: {},
     allIds: []
@@ -3754,8 +3844,8 @@ var initialState$3 = {
     allIds: []
   }
 };
-var reducer$3 = function reducer() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$3;
+var reducer$4 = function reducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$4;
   var action = arguments.length > 1 ? arguments[1] : undefined;
 
   switch (action.type) {
@@ -3963,7 +4053,7 @@ var reducer$3 = function reducer() {
       });
 
     case SYNCGROUPS_CLEAR:
-      return initialState$3;
+      return initialState$4;
 
     default:
       return state;
@@ -4380,6 +4470,8 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, xml2jsonreq
 
   var done = function done(layers) {
     onServiceSetLayers && onServiceSetLayers({
+      id: wmLayer.service,
+      name: wmLayer.title,
       service: wmLayer.service,
       layers: layers
     });
@@ -4387,8 +4479,7 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, xml2jsonreq
 
     onLayerSetStyles && onLayerSetStyles({
       origin: origin,
-      service: wmLayer.service,
-      name: wmLayer.name,
+      layerId: wmLayer.id,
       styles: wmLayer.getStyles()
     });
     /* Select first style in service for a layer */
@@ -4399,34 +4490,8 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, xml2jsonreq
       style: wmLayer.currentStyle // || wmjsLayer.getStyles().length > 0 ? wmjsLayer.getStyles()[0].Name.value : 'default'
 
     });
-    var mapNeedsUpdate = false;
-    /* Synchronize layer dimension properties to wmjslayer dimension values */
-
-    var _loop = function _loop(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;
-          }
-        }
-      }
-    };
-
-    for (var d = 0; d < wmLayer.dimensions.length; d += 1) {
-      _loop(d);
-    }
     /* Trigger update of all map dimensions */
 
-
     onMapUpdateAllDimensions && onMapUpdateAllDimensions({
       origin: origin,
       mapId: mapId,
@@ -4474,12 +4539,6 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, xml2jsonreq
         };
       })
     });
-
-    if (mapNeedsUpdate) {
-      if (wmLayer.parentMaps && wmLayer.parentMaps.length > 0) {
-        wmLayer.parentMaps[0].draw();
-      }
-    }
   };
 
   service.getLayerObjectsFlat(done, function () {// do nothing
@@ -4998,12 +5057,12 @@ function rootSaga$2() {
 var synchronizationGroupConfig = {
   id: 'syncronizationGroupStore-module',
   reducerMap: {
-    syncronizationGroupStore: reducer$3
+    syncronizationGroupStore: reducer$4
   },
   sagas: [rootSaga$3, rootSaga$2]
 };
 
-var useStyles$A = makeStyles(function (theme) {
+var useStyles$E = makeStyles(function (theme) {
   return {
     select: {
       '& ul': {
@@ -5058,7 +5117,21 @@ var TooltipSelect = function TooltipSelect(_a) {
       tooltipOpen = _React$useState4[0],
       setTooltipOpen = _React$useState4[1];
 
-  var classes = useStyles$A();
+  var classes = useStyles$E();
+
+  var preventDefault = function preventDefault(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  var enableScroll = React.useCallback(function () {
+    document.removeEventListener('wheel', preventDefault, false);
+  }, []);
+  var disableScroll = React.useCallback(function () {
+    document.addEventListener('wheel', preventDefault, {
+      passive: false
+    });
+  }, []);
   var onWheel = React.useCallback(function (event) {
     if (selectOpen) return;
     var direction = event.deltaY < 0 ? 1 : -1;
@@ -5073,22 +5146,21 @@ var TooltipSelect = function TooltipSelect(_a) {
     setSelectOpen(false);
   }, []);
   var onMouseEnter = React.useCallback(function () {
+    disableScroll();
     if (!selectOpen) setTooltipOpen(true);
-  }, [selectOpen]);
+  }, [selectOpen, disableScroll]);
   var onMouseLeave = React.useCallback(function () {
+    enableScroll();
     setTooltipOpen(false);
-  }, []);
+  }, [enableScroll]);
   var onFocus = React.useCallback(function () {
+    disableScroll();
     setTooltipOpen(true);
-  }, []);
+  }, [disableScroll]);
   var onBlur = React.useCallback(function () {
+    enableScroll();
     setTooltipOpen(false);
-  }, []);
-  React.useEffect(function () {
-    if (selectOpen === false) {
-      setTooltipOpen(false);
-    }
-  }, [selectOpen]);
+  }, [enableScroll]);
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltip,
     placement: "top",
@@ -5152,7 +5224,7 @@ var index = /*#__PURE__*/Object.freeze({
   actions: actions$1,
   constants: constants,
   types: types,
-  initialState: initialState$3
+  initialState: initialState$4
 });
 
 var moveToTop = function moveToTop(list, element) {
@@ -5175,12 +5247,12 @@ var createUIDialogElement = function createUIDialogElement(_ref) {
     source: source
   };
 };
-var initialState$2 = {
+var initialState$3 = {
   order: [],
   dialogs: {}
 };
-var reducer$2 = function reducer() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$2;
+var reducer$3 = function reducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$3;
   var action = arguments.length > 1 ? arguments[1] : undefined;
 
   switch (action.type) {
@@ -5512,7 +5584,7 @@ function rootSaga$1() {
 var uiModuleConfig = {
   id: 'ui-module',
   reducerMap: {
-    ui: reducer$2
+    ui: reducer$3
   },
   sagas: [rootSaga$1]
 };
@@ -5558,12 +5630,12 @@ var createLayersWithIds = function createLayersWithIds(state, layers) {
   });
 };
 
-var initialState$1 = {
+var initialState$2 = {
   byId: {},
   allIds: []
 };
-var reducer$1 = function reducer() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$1;
+var reducer$2 = function reducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$2;
   var action = arguments.length > 1 ? arguments[1] : undefined;
 
   switch (action.type) {
@@ -5675,11 +5747,11 @@ var reducer$1 = function reducer() {
           draft.byId[_mapId6].isAnimating = true;
 
           if (action.payload.start) {
-            draft.byId[_mapId6].animationStartTime = action.payload.start.toISOString();
+            draft.byId[_mapId6].animationStartTime = action.payload.start;
           }
 
           if (action.payload.end) {
-            draft.byId[_mapId6].animationEndTime = action.payload.end.toISOString();
+            draft.byId[_mapId6].animationEndTime = action.payload.end;
           }
 
           if (action.payload.interval && action.payload.interval !== draft.byId[_mapId6].timeStep) {
@@ -5776,7 +5848,7 @@ var reducer$1 = function reducer() {
         }
 
         return produce$1(state, function (draft) {
-          draft.byId[_mapId11].animationStartTime = animationStartTime.toISOString();
+          draft.byId[_mapId11].animationStartTime = animationStartTime;
         });
       }
 
@@ -5791,7 +5863,7 @@ var reducer$1 = function reducer() {
         }
 
         return produce$1(state, function (draft) {
-          draft.byId[_mapId12].animationEndTime = animationEndTime.toISOString();
+          draft.byId[_mapId12].animationEndTime = animationEndTime;
         });
       }
     // LAYER actions
@@ -6126,6 +6198,21 @@ var reducer$1 = function reducer() {
         });
       }
 
+    case WEBMAP_SET_PIN:
+      {
+        var _action$payload25 = action.payload,
+            _mapId27 = _action$payload25.mapId,
+            mapPinLocation = _action$payload25.mapPinLocation;
+
+        if (!state.byId[_mapId27]) {
+          return state;
+        }
+
+        return produce$1(state, function (draft) {
+          draft.byId[_mapId27].mapPinLocation = mapPinLocation;
+        });
+      }
+
     case GENERIC_SYNC_SETLAYERACTIONS:
       {
         /*
@@ -6134,9 +6221,9 @@ var reducer$1 = function reducer() {
          * These targets can be used as payloads in new Layer actions.
          * These actions are here handled via the layer reducer, as it is the same logic
          */
-        var _action$payload25 = action.payload,
-            targets = _action$payload25.targets,
-            source = _action$payload25.source;
+        var _action$payload26 = action.payload,
+            targets = _action$payload26.targets,
+            source = _action$payload26.source;
         return targets.reduce(function (prevState, target) {
           var action = {
             payload: target,
@@ -6169,30 +6256,25 @@ var reducer$1 = function reducer() {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var initialState = {
+var initialState$1 = {
   byId: {},
   allIds: []
 };
-var reducer = function reducer() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+var reducer$1 = function reducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$1;
   var action = arguments.length > 1 ? arguments[1] : undefined;
 
   switch (action.type) {
     case MAP_SERVICES_SET_LAYERS:
       return produce(state, function (draft) {
         if (!draft.byId[action.payload.service]) draft.byId[action.payload.service] = {};
+        draft.byId[action.payload.service].id = action.payload.id;
+        draft.byId[action.payload.service].name = action.payload.name;
+        draft.byId[action.payload.service].service = action.payload.service;
         draft.byId[action.payload.service].layers = action.payload.layers;
         if (!draft.allIds.includes(action.payload.service)) draft.allIds.push(action.payload.service);
       });
 
-    case MAP_SERVICES_LAYER_SET_STYLES:
-      return produce(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;
   }
@@ -6239,8 +6321,8 @@ function startAnimationSaga(_ref) {
         case 0:
           payload = _ref.payload;
           mapId = payload.mapId, start = payload.start, end = payload.end, interval = payload.interval, timeList = payload.timeList;
-          roundedStart = roundWithTimeStep(start && start.unix(), interval, 'ceil');
-          roundedEnd = roundWithTimeStep(end && end.unix(), interval, 'floor');
+          roundedStart = roundWithTimeStep(start && moment.utc(start).unix(), interval, 'ceil');
+          roundedEnd = roundWithTimeStep(end && moment.utc(end).unix(), interval, 'floor');
           _context.next = 6;
           return timeList || generateTimeList(moment.utc(roundedStart * 1000), moment.utc(roundedEnd * 1000), interval);
 
@@ -6306,7 +6388,7 @@ function deleteLayerSaga(_ref3) {
   }, _marked3);
 }
 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 regeneratorRuntime.wrap(function updateAnimation$(_context4) {
     while (1) {
       switch (_context4.prev = _context4.next) {
@@ -6316,46 +6398,48 @@ function updateAnimation(mapId, maxValue) {
 
         case 2:
           animationStart = _context4.sent;
-          _context4.next = 5;
+          animationStartUnix = moment.utc(animationStart).unix();
+          _context4.next = 6;
           return select(getAnimationEndTime, mapId);
 
-        case 5:
+        case 6:
           animationEnd = _context4.sent;
+          animationEndUnix = moment.utc(animationEnd).unix();
           t = moment.utc(maxValue).unix();
-          deltaT = t - animationEnd.unix();
-          start = moment.unix(animationStart.unix() + deltaT).utc();
-          end = moment.unix(animationEnd.unix() + deltaT).utc();
-          _context4.next = 12;
+          deltaT = t - animationEndUnix;
+          start = moment.unix(animationStartUnix + deltaT).utc().format(dateFormat);
+          end = moment.unix(animationEndUnix + deltaT).utc().format(dateFormat);
+          _context4.next = 14;
           return put(setAnimationEndTime({
             mapId: mapId,
             animationEndTime: end
           }));
 
-        case 12:
-          _context4.next = 14;
+        case 14:
+          _context4.next = 16;
           return put(setAnimationStartTime({
             mapId: mapId,
             animationStartTime: start
           }));
 
-        case 14:
-          _context4.next = 16;
+        case 16:
+          _context4.next = 18;
           return select(isAnimating, mapId);
 
-        case 16:
+        case 18:
           isAnimating$1 = _context4.sent;
 
           if (!isAnimating$1) {
-            _context4.next = 23;
+            _context4.next = 25;
             break;
           }
 
-          _context4.next = 20;
+          _context4.next = 22;
           return select(getMapTimeStep, mapId);
 
-        case 20:
+        case 22:
           timeStep = _context4.sent;
-          _context4.next = 23;
+          _context4.next = 25;
           return put(mapStartAnimation({
             mapId: mapId,
             start: start,
@@ -6363,7 +6447,7 @@ function updateAnimation(mapId, maxValue) {
             interval: timeStep
           }));
 
-        case 23:
+        case 25:
         case "end":
           return _context4.stop();
       }
@@ -6421,11 +6505,16 @@ function setLayerDimensionsSaga(_ref4) {
 
           if (!(layerId === activeLayerId && // only update the active layer
           shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue)) {
-            _context5.next = 30;
+            _context5.next = 31;
             break;
           }
 
-          _context5.next = 26;
+          if (isAnimating$1) {
+            _context5.next = 27;
+            break;
+          }
+
+          _context5.next = 27;
           return put(layerChangeDimension({
             layerId: layerId,
             origin: 'setLayerDimensionSaga',
@@ -6435,39 +6524,39 @@ function setLayerDimensionsSaga(_ref4) {
             }
           }));
 
-        case 26:
-          _context5.next = 28;
+        case 27:
+          _context5.next = 29;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 28:
-          _context5.next = 33;
+        case 29:
+          _context5.next = 34;
           break;
 
-        case 30:
+        case 31:
           if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue)) {
-            _context5.next = 33;
+            _context5.next = 34;
             break;
           }
 
-          _context5.next = 33;
+          _context5.next = 34;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 33:
-          _context5.next = 38;
+        case 34:
+          _context5.next = 39;
           break;
 
-        case 35:
-          _context5.prev = 35;
+        case 36:
+          _context5.prev = 36;
           _context5.t0 = _context5["catch"](1);
           // eslint-disable-next-line no-console
           console.warn(_context5.t0);
 
-        case 38:
+        case 39:
         case "end":
           return _context5.stop();
       }
     }
-  }, _marked5, null, [[1, 35]]);
+  }, _marked5, null, [[1, 36]]);
 }
 function toggleAutoUpdateSaga(_ref5) {
   var payload, shouldAutoUpdate, mapId, layerId, timeDimension;
@@ -6582,9 +6671,9 @@ function rootSaga() {
 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]
 };
@@ -6605,7 +6694,69 @@ var moduleConfig = {
  * 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() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+
+  switch (action.type) {
+    case 'LAYER_SELECT_SET_SEARCH_FILTER':
+      {
+        var filterText = action.payload.filterText;
+        return produce(state, function (draft) {
+          draft.filters.searchFilter = filterText;
+        });
+      }
+
+    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");
@@ -7586,7 +7737,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$z = makeStyles({
+var useStyles$D = makeStyles({
   buttonDiv: {
     position: 'relative'
   },
@@ -7622,7 +7773,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
       handleClose = _ref.handleClose,
       _ref$layerType = _ref.layerType,
       layerType = _ref$layerType === void 0 ? LayerType.mapLayer : _ref$layerType;
-  var classes = useStyles$z();
+  var classes = useStyles$D();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -7774,7 +7925,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var useStyles$y = makeStyles(function (theme) {
+var useStyles$C = makeStyles(function (theme) {
   return {
     buttonDiv: {
       position: 'relative'
@@ -7809,7 +7960,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
       _ref$shouldFocus = _ref.shouldFocus,
       shouldFocus = _ref$shouldFocus === void 0 ? false : _ref$shouldFocus;
   var ref = React.useRef(null);
-  var classes = useStyles$y();
+  var classes = useStyles$C();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -7934,7 +8085,7 @@ var widthToWidthClass = function widthToWidthClass(w) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$x = makeStyles(function (theme) {
+var useStyles$B = makeStyles(function (theme) {
   return {
     button: {
       width: '24px',
@@ -7951,7 +8102,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
-  var classes = useStyles$x();
+  var classes = useStyles$B();
   var currentActiveMapId = useSelector(function (store) {
     return getDialogMapId(store, 'layerSelect');
   });
@@ -7993,7 +8144,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$w = makeStyles({
+var useStyles$A = makeStyles({
   row: {
     height: '32px'
   },
@@ -8017,7 +8168,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
-  var classes = useStyles$w();
+  var classes = useStyles$A();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -8115,39 +8266,31 @@ var useTooltipContainerStyles = makeStyles(function (theme) {
 });
 
 var DimensionSelect = function DimensionSelect(_ref) {
-  var layer = _ref.layer,
-      mapId = _ref.mapId,
+  var layerId = _ref.layerId,
       onLayerChangeDimension = _ref.onLayerChangeDimension,
-      _ref$availableLayerDi = _ref.availableLayerDimensions,
-      availableLayerDimensions = _ref$availableLayerDi === void 0 ? [] : _ref$availableLayerDi,
+      _ref$layerDimensions = _ref.layerDimensions,
+      layerDimensions = _ref$layerDimensions === void 0 ? [] : _ref$layerDimensions,
       isEnabled = _ref.isEnabled;
   var classes = useTooltipContainerStyles(isEnabled);
-  var defaultDimName = availableLayerDimensions.length ? availableLayerDimensions[0].name : '';
-  /* Use state */
 
-  var _React$useState = React.useState(defaultDimName),
+  var _React$useState = React.useState(layerDimensions.length ? layerDimensions[0].name : ''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       activeDimName = _React$useState2[0],
       setActiveDimName = _React$useState2[1];
-  /* Use effect to update the active dimension */
-
 
   React.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 = [];
 
@@ -8163,17 +8306,16 @@ var DimensionSelect = function DimensionSelect(_ref) {
 
   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);
     }
   };
 
@@ -8182,12 +8324,12 @@ var DimensionSelect = function DimensionSelect(_ref) {
     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) {
@@ -8198,6 +8340,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
   var dimValueCurrentIndex = valuesToDisplay.findIndex(function (value) {
     return value === activeDim.currentValue;
   });
+  if (dimValueCurrentIndex === -1) return null;
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     direction: "row",
@@ -8227,7 +8370,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Select dimension"), availableLayerDimensions.map(function (dimension) {
+  }, "Select dimension"), layerDimensions.map(function (dimension) {
     return /*#__PURE__*/React.createElement(MenuItem, {
       key: dimension.name,
       value: dimension.name
@@ -8246,7 +8389,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
     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%'
@@ -8277,7 +8420,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$v = makeStyles(function (theme) {
+var useStyles$z = makeStyles(function (theme) {
   return createStyles({
     button: {
       height: 28,
@@ -8336,7 +8479,7 @@ var LayerManagerButton = function LayerManagerButton(_a) {
       testId = _a.testId,
       props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId"]);
 
-  var classes = useStyles$v({
+  var classes = useStyles$z({
     isActive: isActive,
     isEnabled: isEnabled
   });
@@ -8373,7 +8516,7 @@ var LayerManagerButton = function LayerManagerButton(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$u = makeStyles(function (theme) {
+var useStyles$y = makeStyles(function (theme) {
   return createStyles({
     checkbox: {
       color: 'inherit',
@@ -8396,7 +8539,7 @@ var EnableLayer = function EnableLayer(_ref) {
   var isEnabled = _ref.isEnabled,
       title = _ref.title,
       onChangeEnableLayer = _ref.onChangeEnableLayer;
-  var classes = useStyles$u(isEnabled);
+  var classes = useStyles$y(isEnabled);
 
   var onClick = function onClick() {
     onChangeEnableLayer(!isEnabled);
@@ -8452,7 +8595,7 @@ var EnableLayer = function EnableLayer(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$t = makeStyles(function (theme) {
+var useStyles$x = makeStyles(function (theme) {
   return createStyles({
     dropdownEmpty: {
       paddingLeft: 8,
@@ -8475,7 +8618,7 @@ var RenderLayers = function RenderLayers(_ref) {
       layers = _ref$layers === void 0 ? [] : _ref$layers,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$t();
+  var classes = useStyles$x();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
   if (!layers || !layers.length) {
@@ -8532,7 +8675,7 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var useStyles$s = makeStyles(function (theme) {
+var useStyles$w = makeStyles(function (theme) {
   return {
     opacityDiv: {
       height: 'calc(100% - 5px)',
@@ -8593,28 +8736,10 @@ var OpacitySelect = function OpacitySelect(_ref) {
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$s();
+  var classes = useStyles$w();
   var sliderClasses = sliderStyles();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
-  var useOutsideAlerter = function useOutsideAlerter(ref) {
-    React.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.useRef(null);
-  useOutsideAlerter(wrapperRef);
-
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       open = _React$useState2[0],
@@ -8625,6 +8750,19 @@ var OpacitySelect = function OpacitySelect(_ref) {
       tooltipOpen = _React$useState4[0],
       setTooltipOpen = _React$useState4[1];
 
+  var preventDefault = function preventDefault(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  var enableScroll = React.useCallback(function () {
+    document.removeEventListener('wheel', preventDefault, false);
+  }, []);
+  var disableScroll = React.useCallback(function () {
+    document.addEventListener('wheel', preventDefault, {
+      passive: false
+    });
+  }, []);
   var onWheel = React.useCallback(function (event) {
     var multiplier = event.altKey ? 10 : 1;
     var direction = event.deltaY > 0 ? 0.01 * multiplier : -0.01 * multiplier;
@@ -8640,21 +8778,25 @@ var OpacitySelect = function OpacitySelect(_ref) {
     }
   }, [open]);
   var onMouseEnter = React.useCallback(function () {
+    disableScroll();
     if (!open) setTooltipOpen(true);
-  }, [open]);
+  }, [open, disableScroll]);
   var onMouseLeave = React.useCallback(function () {
+    enableScroll();
     setTooltipOpen(false);
-  }, []);
+  }, [enableScroll]);
   var onFocus = React.useCallback(function () {
+    disableScroll();
     setTooltipOpen(true);
-  }, []);
+  }, [disableScroll]);
   var onBlur = React.useCallback(function () {
+    enableScroll();
     setTooltipOpen(false);
-  }, []);
+  }, [enableScroll]);
   return /*#__PURE__*/React.createElement("div", {
     className: classes.opacityDiv,
-    ref: wrapperRef,
-    onWheel: onWheel
+    onWheel: onWheel,
+    "data-testid": "scrollOpacity"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltipTitle,
     className: containerClass.textContainer,
@@ -8706,7 +8848,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$r = makeStyles(function (theme) {
+var useStyles$v = makeStyles(function (theme) {
   return createStyles({
     icon: {
       minWidth: 32,
@@ -8723,7 +8865,7 @@ var MenuItemButton = function MenuItemButton(_ref) {
   var title = _ref.title,
       tooltipTitle = _ref.tooltipTitle,
       icon = _ref.icon;
-  var classes = useStyles$r();
+  var classes = useStyles$v();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItemIcon, {
     className: "".concat(classes.icon, " icon")
   }, icon), /*#__PURE__*/React.createElement(Tooltip, {
@@ -8735,7 +8877,7 @@ var MenuItemButton = function MenuItemButton(_ref) {
   }, title)));
 };
 
-var useStyles$q = makeStyles(function (theme) {
+var useStyles$u = makeStyles(function (theme) {
   return {
     menu: {
       backgroundColor: theme.palette.geowebColors.background.surface,
@@ -8753,7 +8895,7 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
       onLayerDuplicate = _ref.onLayerDuplicate,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$q();
+  var classes = useStyles$u();
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8803,9 +8945,9 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
 };
 
 var RenderStyles = function RenderStyles(_ref) {
-  var services = _ref.services,
-      layer = _ref.layer,
-      mapId = _ref.mapId,
+  var layerName = _ref.layerName,
+      layerStyles = _ref.layerStyles,
+      currentLayerStyle = _ref.currentLayerStyle,
       onChangeLayerStyle = _ref.onChangeLayerStyle,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
@@ -8817,22 +8959,15 @@ var RenderStyles = function RenderStyles(_ref) {
     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, _toConsumableArray(serviceLayer.styles));
-    }
+  if (layerStyles && layerStyles.length > 0) {
+    styles.push.apply(styles, _toConsumableArray(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) {
@@ -8840,24 +8975,24 @@ var RenderStyles = function RenderStyles(_ref) {
       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.createElement(TooltipSelect, {
     disableUnderline: true,
-    tooltip: "Select a style for layer ".concat(layer.name),
+    tooltip: "Select a style for layer ".concat(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.createElement(MenuItem, {
     disabled: true
@@ -8885,7 +9020,7 @@ var RenderStyles = function RenderStyles(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$p = makeStyles(function () {
+var useStyles$t = makeStyles(function () {
   return createStyles({
     icon: {
       width: 20,
@@ -8899,7 +9034,7 @@ var DeleteButton = function DeleteButton(_ref) {
       onClickDelete = _ref.onClickDelete,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$p();
+  var classes = useStyles$t();
   return /*#__PURE__*/React.createElement(LayerManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickDelete,
@@ -8927,7 +9062,7 @@ var DeleteButton = function DeleteButton(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$o = makeStyles(function (theme) {
+var useStyles$s = makeStyles(function (theme) {
   return createStyles({
     icon: {
       width: 18,
@@ -8964,7 +9099,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
       isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
       _ref2$isEnabled = _ref2.isEnabled,
       isEnabled = _ref2$isEnabled === void 0 ? true : _ref2$isEnabled;
-  var classes = useStyles$o({
+  var classes = useStyles$s({
     isActive: isActive,
     isEnabled: isEnabled
   });
@@ -9013,7 +9148,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$n = makeStyles(function (theme) {
+var useStyles$r = makeStyles(function (theme) {
   return createStyles({
     row: {
       background: function background(isEnabled) {
@@ -9064,7 +9199,7 @@ var LayerRow = function LayerRow(_ref) {
       layerActiveLayout = _ref.layerActiveLayout,
       layerManagerWidth = _ref.layerManagerWidth,
       dragHandle = _ref.dragHandle;
-  var classes = useStyles$n(isEnabled);
+  var classes = useStyles$r(isEnabled);
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
   var onClickRow = function onClickRow() {
@@ -9106,12 +9241,12 @@ var LayerRow = function LayerRow(_ref) {
     item: true,
     className: "".concat(columnSizes.column3)
   }, layerStylesLayout || /*#__PURE__*/React__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
       });
     }
@@ -9131,10 +9266,9 @@ var LayerRow = function LayerRow(_ref) {
     item: true,
     className: "".concat(columnSizes.column5)
   }, layerDimensionLayout || /*#__PURE__*/React__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
@@ -9314,40 +9448,33 @@ var OpacitySelectConnect = function OpacitySelectConnect(_ref) {
  * */
 
 var DimensionSelectConnect = function DimensionSelectConnect(_ref) {
-  var layerId = _ref.layerId,
-      mapId = _ref.mapId;
+  var layerId = _ref.layerId;
   var dispatch = useDispatch();
-  var layer = useSelector(function (store) {
-    return getLayerById(store, layerId);
-  });
-  var availableLayerDimensions = useSelector(function (store) {
+  var layerDimensions = useSelector(function (store) {
     return getLayerNonTimeDimensions(store, layerId);
   });
+  var isLayerEnabled = useSelector(function (store) {
+    return getLayerEnabled(store, layerId);
+  });
   var layerChangeDimension$1 = React.useCallback(function (_ref2) {
     var origin = _ref2.origin,
-        layerId = _ref2.layerId,
         dimension = _ref2.dimension;
     return dispatch(layerChangeDimension({
       origin: origin,
       layerId: layerId,
       dimension: dimension
     }));
-  }, [dispatch]);
-  var isLayerEnabled = useSelector(function (store) {
-    return getLayerEnabled(store, layerId);
-  });
+  }, [layerId, dispatch]);
   return /*#__PURE__*/React.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
       });
     },
@@ -9373,37 +9500,31 @@ var DimensionSelectConnect = function DimensionSelectConnect(_ref) {
  * */
 
 var RenderStylesConnect = function RenderStylesConnect(_ref) {
-  var mapId = _ref.mapId,
-      layerId = _ref.layerId;
-  var dispatch = useDispatch(); // TODO: (Sander de Snaijer 2020-03-30 make specific selectors with layerId to prevent rerenders)
-
-  var services = useSelector(function (store) {
-    return getServices(store);
+  var layerId = _ref.layerId;
+  var dispatch = useDispatch();
+  var layerName = useSelector(function (store) {
+    return getLayerName(store, layerId);
   });
-  var layer = useSelector(function (store) {
-    return getLayerById(store, layerId);
+  var layerStyles = useSelector(function (store) {
+    return getLayerStyles(store, layerId);
   });
-  var layerChangeStyle$1 = React.useCallback(function (_ref2) {
-    var layerId = _ref2.layerId,
-        style = _ref2.style;
+  var currentLayerStyle = useSelector(function (store) {
+    return getLayerStyle(store, layerId);
+  });
+  var isLayerEnabled = useSelector(function (store) {
+    return getLayerEnabled(store, layerId);
+  });
+  var layerChangeStyle$1 = React.useCallback(function (style) {
     return dispatch(layerChangeStyle({
       layerId: layerId,
       style: style
     }));
-  }, [dispatch]);
-  var isLayerEnabled = useSelector(function (store) {
-    return getLayerEnabled(store, layerId);
-  });
+  }, [layerId, dispatch]);
   return /*#__PURE__*/React.createElement(RenderStyles, {
-    mapId: mapId,
-    layer: layer,
-    services: services,
-    onChangeLayerStyle: function onChangeLayerStyle(_, layerId, style) {
-      layerChangeStyle$1({
-        layerId: layerId,
-        style: style
-      });
-    },
+    layerStyles: layerStyles,
+    layerName: layerName,
+    currentLayerStyle: currentLayerStyle,
+    onChangeLayerStyle: layerChangeStyle$1,
     isEnabled: isLayerEnabled
   });
 };
@@ -9616,12 +9737,10 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
     layerServicesLayout: /*#__PURE__*/React.createElement(RenderLayersConnect, {
       layerId: layerId
     }),
-    layerStylesLayout: /*#__PURE__*/React.createElement(RenderStylesConnect, {
-      mapId: mapId,
+    layerDimensionLayout: /*#__PURE__*/React.createElement(DimensionSelectConnect, {
       layerId: layerId
     }),
-    layerDimensionLayout: /*#__PURE__*/React.createElement(DimensionSelectConnect, {
-      mapId: mapId,
+    layerStylesLayout: /*#__PURE__*/React.createElement(RenderStylesConnect, {
       layerId: layerId
     }),
     layerDeleteLayout: /*#__PURE__*/React.createElement(DeleteLayerConnect, {
@@ -9659,7 +9778,7 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 var TOOLTIP_TITLE = 'Drag a layer up or down';
-var useStyles$m = makeStyles(function (theme) {
+var useStyles$q = makeStyles(function (theme) {
   return {
     dragHandle: {
       cursor: 'grab',
@@ -9682,7 +9801,7 @@ var DragHandle = function DragHandle(_ref2) {
       index = _ref2$index === void 0 ? undefined : _ref2$index,
       _ref2$hideTooltip = _ref2.hideTooltip,
       hideTooltip = _ref2$hideTooltip === void 0 ? false : _ref2$hideTooltip;
-  var classes = useStyles$m({
+  var classes = useStyles$q({
     isDisabled: isDisabled
   });
   var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
@@ -9699,7 +9818,7 @@ var DragHandle = function DragHandle(_ref2) {
   });
 };
 
-var useStyles$l = makeStyles(function () {
+var useStyles$p = makeStyles(function () {
   return {
     layerRows: {
       width: '100%',
@@ -9766,7 +9885,7 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
 
   var isSorting = activeDragIndex !== null;
   var isDragDisabled = layerIds.length === 1;
-  var classes = useStyles$l(isSorting);
+  var classes = useStyles$p(isSorting);
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
@@ -9976,7 +10095,7 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$k = makeStyles({
+var useStyles$o = makeStyles({
   layerRow: {
     width: '100%',
     height: '36px'
@@ -9999,7 +10118,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  var classes = useStyles$k();
+  var classes = useStyles$o();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -10028,7 +10147,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
   })));
 };
 
-var useStyles$j = makeStyles({
+var useStyles$n = makeStyles({
   layerRowContainer: {
     position: 'relative',
     width: '100%',
@@ -10063,7 +10182,7 @@ var LayerManager = function LayerManager(_ref) {
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect,
       _ref$showAddLayersToo = _ref.showAddLayersTooltip,
       showAddLayersTooltip = _ref$showAddLayersToo === void 0 ? true : _ref$showAddLayersToo;
-  var classes = useStyles$j();
+  var classes = useStyles$n();
 
   var _React$useState = React.useState(LayerManagerWidth.lg),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -10120,6 +10239,228 @@ var LayerManager = function LayerManager(_ref) {
   }))));
 };
 
+var useStyles$m = 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.createElement(SvgIcon, {
+  style: {
+    width: '24px',
+    height: '24px'
+  },
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.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.createElement(SvgIcon, {
+  style: {
+    width: '24px',
+    height: '24px'
+  },
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  d: searchIconPath
+}));
+
+var SearchField = function SearchField() {
+  var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      searchString = _React$useState2[0],
+      setSearchString = _React$useState2[1];
+
+  var classes = useStyles$m();
+  return /*#__PURE__*/React.createElement(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.createElement(InputAdornment, {
+        position: "end"
+      }, searchString ? /*#__PURE__*/React.createElement(Tooltip, {
+        title: "Clear",
+        placement: "top"
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        className: classes.iconButton,
+        edge: "end",
+        onClick: function onClick() {
+          return setSearchString('');
+        }
+      }, clearIcon)) : /*#__PURE__*/React.createElement(Tooltip, {
+        title: "Search",
+        placement: "top"
+      }, /*#__PURE__*/React.createElement(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 = makeStyles(function (theme) {
+  return createStyles({
+    chip: {
+      height: '32px',
+      margin: '0 8px 0 0',
+      padding: '5px 12px 7px',
+      borderRadius: '20px',
+      border: "solid 1px ".concat(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(_ref) {
+  var _ref$all = _ref.all,
+      all = _ref$all === void 0 ? false : _ref$all,
+      service = _ref.service;
+  var classes = useStyles$l();
+
+  if (all) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.chip,
+      "data-testid": "serviceChipAll"
+    }, "All");
+  }
+
+  if (service && service.name) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.chip,
+      "data-testid": "serviceChip"
+    }, service.name);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.chip
+  });
+};
+
+var useStyles$k = makeStyles(function (theme) {
+  return 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), ".concat(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), ".concat(theme.palette.geowebColors.background.surfaceApp, " 51%)"),
+      right: '0px',
+      position: 'fixed',
+      cursor: 'pointer'
+    }
+  });
+});
+
+var ServiceList = function ServiceList(_ref) {
+  var layerSelectWidth = _ref.layerSelectWidth,
+      services = _ref.services;
+  var classes = useStyles$k();
+
+  var _React$useState = React.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      margin = _React$useState2[0],
+      setMargin = _React$useState2[1];
+
+  var _React$useState3 = React.useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      width = _React$useState4[0],
+      setWidth = _React$useState4[1];
+
+  var ref = React.useRef(null);
+  var onLeftArrowClick = React.useCallback(function () {
+    setMargin(Math.max(0, margin - 100));
+  }, [margin]);
+  var onRightArrowClick = React.useCallback(function () {
+    setMargin(Math.min(width - layerSelectWidth, margin + 100));
+  }, [margin, layerSelectWidth, width]);
+  var gapRight = 35;
+  React.useEffect(function () {
+    setWidth(ref.current.scrollWidth + gapRight);
+  }, [services, layerSelectWidth]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.serviceList,
+    "data-testid": "serviceList"
+  }, margin !== 0 && /*#__PURE__*/React.createElement(ChevronLeft, {
+    className: classes.scrollArrowLeft,
+    onClick: onLeftArrowClick,
+    "data-testid": "leftScrollArrow"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.serviceChips,
+    style: {
+      marginLeft: "".concat(-margin, "px"),
+      marginRight: "".concat(margin, "px")
+    },
+    ref: ref
+  }, services && Object.keys(services) && Object.keys(services).length > 0 && /*#__PURE__*/React.createElement(ServiceChip, {
+    key: "All",
+    all: true
+  }), Object.keys(services).map(function (service) {
+    return /*#__PURE__*/React.createElement(ServiceChip, {
+      key: services[service].id,
+      service: services[service]
+    });
+  })), margin < width - layerSelectWidth - gapRight && /*#__PURE__*/React.createElement(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.
@@ -10137,6 +10478,23 @@ var LayerManager = function LayerManager(_ref) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
+var ServiceListConnect = function ServiceListConnect(_ref) {
+  var layerSelectWidth = _ref.layerSelectWidth;
+  var services = useSelector(function (store) {
+    return getServices(store);
+  });
+  return /*#__PURE__*/React.createElement(ServiceList, {
+    layerSelectWidth: layerSelectWidth,
+    services: services
+  });
+};
+
+var useStyles$j = makeStyles({
+  serviceList: {
+    height: '48px'
+  }
+});
+
 var LayerSelect = function LayerSelect(_ref) {
   var mapId = _ref.mapId,
       bounds = _ref.bounds,
@@ -10150,20 +10508,32 @@ var LayerSelect = function LayerSelect(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'module' : _ref$source;
+  var classes = useStyles$j();
+
+  var _React$useState = React.useState(750),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      width = _React$useState2[0],
+      setWidth = _React$useState2[1];
+
+  var onChangeSize = function onChangeSize(_ref2) {
+    var width = _ref2.width;
+    setWidth(width);
+  };
+
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     title: showTitle ? "Layer Select ".concat(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,
@@ -10171,7 +10541,15 @@ var LayerSelect = function LayerSelect(_ref) {
     onMouseDown: onMouseDown,
     order: order,
     source: source
-  }, /*#__PURE__*/React.createElement("div", null));
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '6px'
+    }
+  }, /*#__PURE__*/React.createElement(SearchField, null), /*#__PURE__*/React.createElement("div", {
+    className: classes.serviceList
+  }, /*#__PURE__*/React.createElement(ServiceListConnect, {
+    layerSelectWidth: width
+  }))));
 };
 
 /* *
@@ -10273,6 +10651,8 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
         getLayerNodesFromService(service.url).then(function (layers) {
           if (isMounted.current) {
             serviceSetLayers$1({
+              id: service.id,
+              name: service.name,
               service: service.url,
               layers: layers
             });
@@ -11525,6 +11905,11 @@ var SpeedButton = function SpeedButton(_ref) {
       text: "".concat(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;
@@ -11534,19 +11919,26 @@ var SpeedButton = function SpeedButton(_ref) {
     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.createElement("div", {
     className: classes.speedButtonDiv
@@ -11576,7 +11968,8 @@ var SpeedButton = function SpeedButton(_ref) {
     orientation: "vertical",
     value: currentValue,
     step: null,
-    max: marks.length - 1,
+    max: max,
+    min: min,
     marks: marks.map(function (_ref2) {
       var markPos = _ref2.markPos,
           text = _ref2.text;
@@ -11787,19 +12180,32 @@ var TimeStepButton = function TimeStepButton(_ref) {
   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.useEffect(function () {
@@ -11836,10 +12242,10 @@ var TimeStepButton = function TimeStepButton(_ref) {
   }, "Time step"), /*#__PURE__*/React.createElement(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,
@@ -13761,29 +14167,29 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
   var ZOOM_RATIO = 1.1;
 
   var zoomOut = function zoomOut(relativeX) {
-    var su = animationStartTime.unix();
-    var eu = animationEndTime.unix();
+    var su = moment.utc(animationStartTime).unix();
+    var eu = moment.utc(animationEndTime).unix();
     var targetTime = su + (eu - su) * relativeX;
-    onSetAnimationStartTime(moment.utc(((su - targetTime) * ZOOM_RATIO + targetTime) * 1000));
-    onSetAnimationEndTime(moment.utc(((eu - targetTime) * ZOOM_RATIO + targetTime) * 1000));
+    onSetAnimationStartTime(moment.utc(((su - targetTime) * ZOOM_RATIO + targetTime) * 1000).format(dateFormat));
+    onSetAnimationEndTime(moment.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.utc(animationStartTime).unix();
+    var eu = moment.utc(animationEndTime).unix();
     var targetTime = su + (eu - su) * relativeX;
-    onSetAnimationStartTime(moment.utc(((su - targetTime) / ZOOM_RATIO + targetTime) * 1000));
-    onSetAnimationEndTime(moment.utc(((eu - targetTime) / ZOOM_RATIO + targetTime) * 1000));
+    onSetAnimationStartTime(moment.utc(((su - targetTime) / ZOOM_RATIO + targetTime) * 1000).format(dateFormat));
+    onSetAnimationEndTime(moment.utc(((eu - targetTime) / ZOOM_RATIO + targetTime) * 1000).format(dateFormat));
   };
 
   var curTime = selectedTime !== undefined ? selectedTime.toISOString() : moment.utc().toISOString();
 
-  var _React$useState = React.useState(animationStartTime && animationStartTime.unix()),
+  var _React$useState = React.useState(animationStartTime && moment.utc(animationStartTime).unix()),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       localAnimationStartTime = _React$useState2[0],
       setLocalAnimationStartTime = _React$useState2[1];
 
-  var _React$useState3 = React.useState(animationEndTime && animationEndTime.unix()),
+  var _React$useState3 = React.useState(animationEndTime && moment.utc(animationEndTime).unix()),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       localAnimationEndTime = _React$useState4[0],
       setLocalAnimationEndTime = _React$useState4[1];
@@ -13863,12 +14269,12 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
   var onMouseUpTouchEnd = function onMouseUpTouchEnd() {
     // Dispatch changes when releasing mouse
     if (isLeftMarkerDragging) {
-      onSetAnimationStartTime(moment.utc(localAnimationStartTime * 1000));
+      onSetAnimationStartTime(moment.utc(localAnimationStartTime * 1000).format(dateFormat));
       setAnimationDragged(true);
     }
 
     if (isRightMarkerDragging) {
-      onSetAnimationEndTime(moment.utc(localAnimationEndTime * 1000));
+      onSetAnimationEndTime(moment.utc(localAnimationEndTime * 1000).format(dateFormat));
       setAnimationDragged(true);
     }
 
@@ -13926,8 +14332,8 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
   };
 
   React.useEffect(function () {
-    setLocalAnimationStartTime(animationStartTime && animationStartTime.unix());
-    setLocalAnimationEndTime(animationEndTime && animationEndTime.unix());
+    setLocalAnimationStartTime(animationStartTime && moment.utc(animationStartTime).unix());
+    setLocalAnimationEndTime(animationEndTime && moment.utc(animationEndTime).unix());
   }, [animationStartTime, animationEndTime]);
   var handleKeyDown = React.useCallback(function (event) {
     if (event.ctrlKey && dataStartTime && dataEndTime) {
@@ -14682,16 +15088,16 @@ var TimeSliderRailConnectComponent = function TimeSliderRailConnectComponent(_re
     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) {
@@ -17558,6 +17964,7 @@ var getDisplayText = function getDisplayText(currentAdagucTime) {
   return adagucTimeFormatted;
 };
 
+var ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION';
 var defaultxml2jsonrequestURL = 'http://localhost:10000/XML2JSON?';
 
 var ReactMapView = /*#__PURE__*/function (_React$Component) {
@@ -17617,22 +18024,25 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.parseWMJSLayer = function (wmLayer, forceReload, updateStrategy, child) {
-      var _this$props = _this.props,
-          onMapUpdateAllDimensions = _this$props.onMapUpdateAllDimensions,
-          onLayerChangeStyle = _this$props.onLayerChangeStyle,
-          onLayerSetDimensions = _this$props.onLayerSetDimensions,
-          onServiceSetLayers = _this$props.onServiceSetLayers,
-          onLayerSetStyles = _this$props.onLayerSetStyles,
-          xml2jsonrequestURL = _this$props.xml2jsonrequestURL,
-          mapId = _this$props.mapId;
-
       var callback = function callback() {
         if (updateStrategy === 'all') {
-          setServiceMetadata(wmLayer, mapId, xml2jsonrequestURL, _this.adaguc.webMapJS, _this.props, onMapUpdateAllDimensions, onLayerChangeStyle, onServiceSetLayers, onLayerSetStyles, onLayerSetDimensions);
+          var _this$props = _this.props,
+              onMapUpdateAllDimensions = _this$props.onMapUpdateAllDimensions,
+              onLayerChangeStyle = _this$props.onLayerChangeStyle,
+              onLayerSetDimensions = _this$props.onLayerSetDimensions,
+              onServiceSetLayers = _this$props.onServiceSetLayers,
+              onLayerSetStyles = _this$props.onLayerSetStyles,
+              _xml2jsonrequestURL = _this$props.xml2jsonrequestURL,
+              mapId = _this$props.mapId;
+          setServiceMetadata(wmLayer, mapId, _xml2jsonrequestURL, _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 _this$props2 = _this.props,
+              _onLayerSetDimensions = _this$props2.onLayerSetDimensions,
+              _xml2jsonrequestURL2 = _this$props2.xml2jsonrequestURL,
+              _mapId = _this$props2.mapId;
+          setServiceMetadata(wmLayer, _mapId, _xml2jsonrequestURL2, _this.adaguc.webMapJS, _this.props, null, null, null, null, _onLayerSetDimensions);
         }
 
         if (child) {
@@ -17646,6 +18056,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         }
       };
 
+      var xml2jsonrequestURL = _this.props.xml2jsonrequestURL;
       wmLayer.parseLayer(callback, forceReload, xml2jsonrequestURL);
     };
 
@@ -17657,6 +18068,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     _this.drawDebounced = debounce(600, _this.drawDebounced);
     _this.checkNewProps = _this.checkNewProps.bind(_assertThisInitialized(_this));
     _this.checkAdaguc = _this.checkAdaguc.bind(_assertThisInitialized(_this));
+    _this.onAfterSetBBoxListener = _this.onAfterSetBBoxListener.bind(_assertThisInitialized(_this));
+    _this.onUpdateBBoxListener = _this.onUpdateBBoxListener.bind(_assertThisInitialized(_this));
+    _this.onDimChangeListener = _this.onDimChangeListener.bind(_assertThisInitialized(_this));
     _this.currentMapProps = {};
     _this.adagucContainerRef = /*#__PURE__*/React.createRef();
     _this.adagucWebMapJSRef = /*#__PURE__*/React.createRef();
@@ -17666,11 +18080,11 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   _createClass(ReactMapView, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props2 = this.props,
-          onMount = _this$props2.onMount,
-          mapId = _this$props2.mapId,
-          onRegisterAdaguc = _this$props2.onRegisterAdaguc,
-          shouldAutoFetch = _this$props2.shouldAutoFetch;
+      var _this$props3 = this.props,
+          onMount = _this$props3.onMount,
+          mapId = _this$props3.mapId,
+          onRegisterAdaguc = _this$props3.onRegisterAdaguc,
+          shouldAutoFetch = _this$props3.shouldAutoFetch;
       this.checkAdaguc();
       this.checkNewProps(null, this.props);
       window.addEventListener('resize', this.handleWindowResize);
@@ -17692,9 +18106,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props3 = this.props,
-          onUnMount = _this$props3.onUnMount,
-          mapId = _this$props3.mapId;
+      var _this$props4 = this.props,
+          onUnMount = _this$props4.onUnMount,
+          mapId = _this$props4.mapId;
       window.removeEventListener('resize', this.handleWindowResize);
       onUnMount(mapId, this.adaguc.webMapJS);
       this.adaguc.webMapJS.getListener().suspendEvents();
@@ -17706,6 +18120,72 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
       this.clearRefetchTimer();
     }
+  }, {
+    key: "onDimChangeListener",
+    value: function onDimChangeListener() {
+      var _this$props5 = this.props,
+          mapId = _this$props5.mapId,
+          onMapChangeDimension = _this$props5.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
+            }
+          });
+        }
+      }
+    }
+  }, {
+    key: "onAfterSetBBoxListener",
+    value: function onAfterSetBBoxListener(wmjsMap) {
+      var _this2 = this;
+
+      var _this$props6 = this.props,
+          mapId = _this$props6.mapId,
+          onMapZoomEnd = _this$props6.onMapZoomEnd;
+      /* Update the map after 100 ms */
+
+      window.setTimeout(function () {
+        var MapViewBBOX = _this2.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);
+    }
+  }, {
+    key: "onUpdateBBoxListener",
+    value: function onUpdateBBoxListener(newBbox) {
+      var oldbbox = this.adaguc.oldbbox || new 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 WMBBOX(oldbbox);
+      }
+    }
   }, {
     key: "getWMJSLayerFromReactLayer",
     value: function getWMJSLayerFromReactLayer(wmLayers, reactWebMapJSLayer, index) {
@@ -17741,13 +18221,14 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "checkNewProps",
     value: function checkNewProps(prevProps, props) {
-      var _this2 = this;
+      var _this3 = this;
 
       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);
@@ -17755,11 +18236,11 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
       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) {
@@ -17797,21 +18278,21 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
       /* 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
           });
         }
       }
@@ -17825,6 +18306,14 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
           }
         }
       }
+      /* Check if layer metadata should be shown */
+
+
+      if (!prevProps || prevProps.showLayerInfo !== props.showLayerInfo) {
+        if (props.showLayerInfo) {
+          this.adaguc.webMapJS.showLayerInfo = props.showLayerInfo;
+        }
+      }
       /* Check children */
 
 
@@ -17843,7 +18332,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                   myChildren.push(child);
                   takenIds.add(childProps.id);
                 } else {
-                  childProps.onLayerError(childProps, new Error("Duplicate layer id \"".concat(childProps.id, "\" encountered within this WebMap")), _this2.adaguc.webMapJS);
+                  childProps.onLayerError(childProps, new Error("Duplicate layer id \"".concat(childProps.id, "\" encountered within this WebMap")), _this3.adaguc.webMapJS);
                   console.warn('ReactWMJSLayer has a duplicate id', child);
                 }
               } else {
@@ -17853,7 +18342,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
           });
           myChildren.reverse();
 
-          var wmjsLayers = _this2.adaguc.webMapJS.getLayers();
+          var wmjsLayers = _this3.adaguc.webMapJS.getLayers();
           /* ReactWMJSLayer Layer Childs: Detect all ReactLayers connected to WMJSLayers, remove WMJSLayer if there is no ReactLayer */
 
 
@@ -17870,7 +18359,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
               onMapUpdateAllDimensions && onMapUpdateAllDimensions({
                 origin: origin,
                 mapId: mapId,
-                dimensions: _this2.adaguc.webMapJS.mapdimensions.map(function (_ref) {
+                dimensions: _this3.adaguc.webMapJS.mapdimensions.map(function (_ref) {
                   var name = _ref.name,
                       units = _ref.units,
                       currentValue = _ref.currentValue,
@@ -17884,7 +18373,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                 })
               });
 
-              _this2.checkNewProps(prevProps, props);
+              _this3.checkNewProps(prevProps, props);
 
               return {
                 v: {
@@ -17902,10 +18391,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
           /* ReactWMJSLayer BaseLayer Childs: For the baseLayers, detect all ReactLayers connected to WMJSLayers, remove WMJSLayer if there is no ReactLayer */
 
 
-          var webmapJSBaselayers = _this2.adaguc.webMapJS.getBaseLayers();
+          var webmapJSBaselayers = _this3.adaguc.webMapJS.getBaseLayers();
 
           var _loop2 = function _loop2(_l) {
-            var wmjsBaseLayers = _this2.adaguc.webMapJS.getBaseLayers();
+            var wmjsBaseLayers = _this3.adaguc.webMapJS.getBaseLayers();
 
             if (myChildren.filter(function (c) {
               return c && c.props ? c.props.id === wmjsBaseLayers[_l].ReactWMJSLayerId : false;
@@ -17913,11 +18402,11 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
               /*  TODO (Maarten Plieger, 2020-03-19):The remove property for the baselayer is not working yet */
               wmjsBaseLayers.splice(_l, 1);
 
-              _this2.adaguc.webMapJS.setBaseLayers(wmjsBaseLayers);
+              _this3.adaguc.webMapJS.setBaseLayers(wmjsBaseLayers);
 
-              wmjsBaseLayers = _this2.adaguc.webMapJS.getBaseLayers();
+              wmjsBaseLayers = _this3.adaguc.webMapJS.getBaseLayers();
 
-              _this2.checkNewProps(prevProps, props);
+              _this3.checkNewProps(prevProps, props);
 
               return {
                 v: {
@@ -17946,12 +18435,12 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
               if (_typeof(child.type) === _typeof(MapViewLayer)) {
                 /* Feature layer (with child.props.geojson), these are handled collectively by the setState commando above. */
                 var isBaselayer = !isAMapLayer(child.props) && !isAGeoJSONLayer(child.props);
-                var adagucWMJSLayers = isBaselayer ? _this2.adaguc.webMapJS.getBaseLayers() : _this2.adaguc.webMapJS.getLayers();
+                var adagucWMJSLayers = isBaselayer ? _this3.adaguc.webMapJS.getBaseLayers() : _this3.adaguc.webMapJS.getLayers();
 
-                var obj = _this2.getWMJSLayerFromReactLayer(adagucWMJSLayers, child, isBaselayer ? adagucWMJSBaseLayerIndex : adagucWMJSLayerIndex);
+                var obj = _this3.getWMJSLayerFromReactLayer(adagucWMJSLayers, child, isBaselayer ? adagucWMJSBaseLayerIndex : adagucWMJSLayerIndex);
 
                 if (obj.layerArrayMutated) {
-                  _this2.checkNewProps(prevProps, props);
+                  _this3.checkNewProps(prevProps, props);
 
                   return {
                     v: {
@@ -17978,20 +18467,20 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
                   if (isBaselayer) {
                     /* Add ADAGUC WebMapJS Baselayer */
-                    _this2.adaguc.baseLayers.push(newWMLayer);
+                    _this3.adaguc.baseLayers.push(newWMLayer);
 
-                    _this2.adaguc.webMapJS.setBaseLayers(_this2.adaguc.baseLayers.reverse());
+                    _this3.adaguc.webMapJS.setBaseLayers(_this3.adaguc.baseLayers.reverse());
                   } else {
                     /* Add ADAGUC WebMapJS Layer */
-                    _this2.adaguc.webMapJS.addLayer(newWMLayer).then(function () {
-                      _this2.adaguc.webMapJS.draw();
+                    _this3.adaguc.webMapJS.addLayer(newWMLayer).then(function () {
+                      _this3.adaguc.webMapJS.draw();
                     });
                   }
 
                   if (!isBaselayer) {
                     newWMLayer.reactWebMapJSLayer = child;
 
-                    _this2.parseWMJSLayer(newWMLayer, false, 'all', child);
+                    _this3.parseWMJSLayer(newWMLayer, false, 'all', child);
                   }
 
                   needsRedraw = true;
@@ -17999,7 +18488,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                   /* Set the name of the ADAGUC WMJSLayer */
                   if (child.props.name !== undefined && wmLayer.name !== child.props.name) {
                     wmLayer.setName(child.props.name).then(function () {
-                      _this2.parseWMJSLayer(wmLayer, false, 'all', child);
+                      _this3.parseWMJSLayer(wmLayer, false, 'all', child);
                     });
                     needsRedraw = true;
                   }
@@ -18049,18 +18538,18 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                   }
 
                   if (child.props.isProfileLayer) {
-                    var currentBbox = _this2.adaguc.webMapJS.getBBOX();
+                    var currentBbox = _this3.adaguc.webMapJS.getBBOX();
 
                     var newBbox = new WMBBOX(props.bbox);
 
                     if (currentBbox !== newBbox) {
-                      _this2.adaguc.webMapJS.suspendEvent('onupdatebbox');
+                      _this3.adaguc.webMapJS.suspendEvent('onupdatebbox');
 
-                      _this2.adaguc.webMapJS.setBBOX(new WMBBOX(props.bbox));
+                      _this3.adaguc.webMapJS.setBBOX(new WMBBOX(props.bbox));
 
                       needsRedraw = true;
 
-                      _this2.adaguc.webMapJS.resumeEvent('onupdatebbox');
+                      _this3.adaguc.webMapJS.resumeEvent('onupdatebbox');
                     }
                   }
                 }
@@ -18075,12 +18564,12 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
           }
 
           if (needsRedraw) {
-            _this2.adaguc.webMapJS.draw();
+            _this3.adaguc.webMapJS.draw();
           }
           /* Children have been processed */
 
 
-          _this2.currentMapProps.children = children;
+          _this3.currentMapProps.children = children;
         }();
 
         if (_typeof(_ret) === "object") return _ret.v;
@@ -18101,17 +18590,15 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "checkAdaguc",
     value: function checkAdaguc() {
-      var _this3 = this;
+      var _this4 = this;
 
-      var _this$props4 = this.props,
-          mapId = _this$props4.mapId,
-          listeners = _this$props4.listeners,
-          xml2jsonrequestURL = _this$props4.xml2jsonrequestURL,
-          srs = _this$props4.srs,
-          bbox = _this$props4.bbox,
-          onMapChangeDimension = _this$props4.onMapChangeDimension,
-          onMapZoomEnd = _this$props4.onMapZoomEnd,
-          onMapCursorChangeLocation = _this$props4.onMapCursorChangeLocation;
+      var _this$props7 = this.props,
+          mapId = _this$props7.mapId,
+          listeners = _this$props7.listeners,
+          xml2jsonrequestURL = _this$props7.xml2jsonrequestURL,
+          srs = _this$props7.srs,
+          bbox = _this$props7.bbox,
+          onMapPinChangeLocation = _this$props7.onMapPinChangeLocation;
 
       if (this.adaguc.webMapJSCreated) {
         return;
@@ -18119,6 +18606,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
       this.adaguc.webMapJSCreated = true;
       this.adaguc.webMapJS = new 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);
@@ -18127,70 +18617,35 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
       if (listeners) {
         listeners.forEach(function (listener) {
-          _this3.adaguc.webMapJS.addListener(listener.name, function (data) {
-            listener.callbackfunction(_this3.adaguc.webMapJS, data);
+          _this4.adaguc.webMapJS.addListener(listener.name, function (data) {
+            listener.callbackfunction(_this4.adaguc.webMapJS, data);
           }, listener.keep);
         });
       }
 
       this.adaguc.webMapJS.addListener('ondimchange', function () {
-        if (_this3.adaguc && _this3.adaguc.webMapJS) {
-          var timeDimension = _this3.adaguc.webMapJS.getDimension('time');
-
-          if (timeDimension) {
-            onMapChangeDimension({
-              mapId: mapId,
-              origin: 'ReactMapView, 663',
-              dimension: {
-                name: 'time',
-                currentValue: timeDimension.currentValue
-              }
-            });
-          }
-        }
+        _this4.onDimChangeListener();
       }, true);
       this.adaguc.webMapJS.addListener('onmapready', function () {
-        _this3.setState({
+        _this4.setState({
           adagucInitialised: true
         });
       });
       this.adaguc.webMapJS.addListener('aftersetbbox', function (wmjsMap) {
-        /* Update the map after 1000 ms */
-        window.setTimeout(function () {
-          var MapViewBBOX = _this3.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);
+        _this4.onAfterSetBBoxListener(wmjsMap);
       }, true);
       this.adaguc.webMapJS.addListener('onupdatebbox', function (newBbox) {
-        var oldbbox = _this3.adaguc.oldbbox || new 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;
-          _this3.adaguc.oldbbox = new WMBBOX(oldbbox);
-        }
+        _this4.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();
@@ -18215,10 +18670,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props5 = this.props,
-          passiveMap = _this$props5.passiveMap,
-          children = _this$props5.children,
-          onClick = _this$props5.onClick;
+      var _this$props8 = this.props,
+          passiveMap = _this$props8.passiveMap,
+          children = _this$props8.children,
+          onClick = _this$props8.onClick;
       var adagucInitialised = this.state.adagucInitialised;
       var featureLayers = getFeatureLayers(children);
       return /*#__PURE__*/React.createElement("div", {
@@ -18298,7 +18753,7 @@ ReactMapView.defaultProps = {
     top: 11652109.058827976
   },
   shouldAutoFetch: true,
-  showCursor: false,
+  displayMapPin: false,
   onMount: function onMount() {
     return null;
   },
@@ -18485,16 +18940,17 @@ var MapView = function MapView(_a) {
  * @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 = useSelector(function (store) {
     return getMapDimensions(store, mapId);
@@ -18520,6 +18976,9 @@ var MapViewConnect = function MapViewConnect(_a) {
   var animationDelay = useSelector(function (store) {
     return getMapAnimationDelay(store, mapId);
   });
+  var mapPinLocation = useSelector(function (store) {
+    return getPinLocation(store, mapId);
+  });
   var dispatch = useDispatch();
   var mapChangeDimension$1 = React.useCallback(function (mapDimensionPayload) {
     return dispatch(mapChangeDimension(mapDimensionPayload));
@@ -18563,6 +19022,9 @@ var MapViewConnect = function MapViewConnect(_a) {
   var layerError$1 = React.useCallback(function (payload) {
     return dispatch(layerError(payload));
   }, [dispatch]);
+  var mapPinChangeLocation = React.useCallback(function (payload) {
+    return dispatch(setMapPinLocation(payload));
+  }, [dispatch]);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       height: '100%'
@@ -18584,9 +19046,11 @@ var MapViewConnect = function MapViewConnect(_a) {
     },
     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({
@@ -18618,6 +19082,7 @@ var MapViewConnect = function MapViewConnect(_a) {
     onLayerSetDimensions: layerSetDimensions$1,
     onServiceSetLayers: serviceSetLayers$1,
     onLayerSetStyles: layerSetStyles$1,
+    onMapPinChangeLocation: mapPinChangeLocation,
     onMapZoomEnd: function onMapZoomEnd(a) {
       genericSetBbox({
         bbox: a.bbox,
@@ -19208,7 +19673,9 @@ var ConfigurableConnectedMap = function ConfigurableConnectedMap(_ref) {
       _ref$animationPayload = _ref.animationPayload,
       animationPayload = _ref$animationPayload === void 0 ? undefined : _ref$animationPayload,
       _ref$shouldShowZoomCo = _ref.shouldShowZoomControls,
-      shouldShowZoomControls = _ref$shouldShowZoomCo === void 0 ? false : _ref$shouldShowZoomCo;
+      shouldShowZoomControls = _ref$shouldShowZoomCo === void 0 ? false : _ref$shouldShowZoomCo,
+      _ref$displayMapPin = _ref.displayMapPin,
+      displayMapPin = _ref$displayMapPin === void 0 ? false : _ref$displayMapPin;
   var classes = useStyles$4();
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || generateMapId()).current;
@@ -19255,8 +19722,8 @@ var ConfigurableConnectedMap = function ConfigurableConnectedMap(_ref) {
 
       dispatch(mapStartAnimation({
         mapId: mapId,
-        start: moment.utc().subtract(duration, 'minutes'),
-        end: moment.utc(),
+        start: moment.utc().subtract(duration, 'minutes').format(dateFormat),
+        end: moment.utc().format(dateFormat),
         interval: animationPayload && animationPayload.interval ? animationPayload.interval : animationIntervalDefault
       }));
 
@@ -19289,6 +19756,7 @@ var ConfigurableConnectedMap = function ConfigurableConnectedMap(_ref) {
   })), /*#__PURE__*/React__default.createElement(MapViewConnect, {
     controls: {},
     displayTimeInMap: displayTimeInMap,
+    displayMapPin: displayMapPin,
     showScaleBar: false,
     mapId: mapId
   }));
@@ -19656,7 +20124,9 @@ var ConfigurableMapWithSliderConnect = function ConfigurableMapWithSliderConnect
       _ref$shouldShowZoomCo = _ref.shouldShowZoomControls,
       shouldShowZoomControls = _ref$shouldShowZoomCo === void 0 ? true : _ref$shouldShowZoomCo,
       _ref$animationPayload = _ref.animationPayload,
-      animationPayload = _ref$animationPayload === void 0 ? undefined : _ref$animationPayload;
+      animationPayload = _ref$animationPayload === void 0 ? undefined : _ref$animationPayload,
+      _ref$displayMapPin = _ref.displayMapPin,
+      displayMapPin = _ref$displayMapPin === void 0 ? false : _ref$displayMapPin;
   var classes = useStyles$2();
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.mapSliderConnect,
@@ -19681,7 +20151,8 @@ var ConfigurableMapWithSliderConnect = function ConfigurableMapWithSliderConnect
     shouldAutoUpdate: shouldAutoUpdate,
     shouldAnimate: shouldAnimate,
     animationPayload: animationPayload,
-    shouldShowZoomControls: shouldShowZoomControls
+    shouldShowZoomControls: shouldShowZoomControls,
+    displayMapPin: displayMapPin
   }));
 };
 
@@ -19715,6 +20186,7 @@ var componentsLookUp = function componentsLookUp(_ref) {
         return /*#__PURE__*/React__default.createElement(ConfigurableMapWithSliderConnect, Object.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,
@@ -20414,4 +20886,4 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
   }, children)));
 };
 
-export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmRefTimePreset, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, TooltipSelect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, defaultConfigurations, filterNonTimeDimensions, generateLayerId, generateMapId, generateScreenId, generateTimesliderId, getFirstTimeStepForLayerId, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$5 as layerReducer, makeMapPreset, actions$3 as mapActions, constants$1 as mapConstants, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, testLayers, actions$2 as uiActions, types$1 as uiTypes, useStyles$3 as useStyles };
+export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmRefTimePreset, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, TooltipSelect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultConfigurations, filterNonTimeDimensions, generateLayerId, generateMapId, generateScreenId, generateTimesliderId, getFirstTimeStepForLayerId, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$6 as layerReducer, makeMapPreset, actions$3 as mapActions, constants$1 as mapConstants, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, testLayers, actions$2 as uiActions, types$1 as uiTypes, useStyles$3 as useStyles };