@opengeoweb/core 2.1.2 → 2.2.0

package/{core.esm.js → index.esm.js}

@@ -1,18 +1,20 @@
 import { createSelector } from 'reselect';
+import _, { isEqual, debounce } from 'lodash';
 import moment from 'moment';
 import * as React from 'react';
 import React__default, { useState, Component, useRef, useEffect } from 'react';
 import produce, { produce as produce$1 } from 'immer';
-import { takeLatest, put, select, call } from 'redux-saga/effects';
+import { takeLatest, put, select, call, takeEvery } from 'redux-saga/effects';
 import { WMGetServiceFromStore, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer } from '@opengeoweb/webmap';
-import { 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 { Tooltip, Select, Grid, InputLabel, IconButton, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, Checkbox, SvgIcon, ListItemIcon, Menu, FormControl, ToggleButton, InputAdornment, Switch, ListItemSecondaryAction, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { sliderStyles, CustomSlider, ToolContainerDraggable, useIsMounted } from '@opengeoweb/shared';
-import _ from 'lodash';
-import { Cached, Add, MoreVert, FileCopy, Delete, DragIndicator, ChevronLeft, ChevronRight, Link, LinkOff, DeleteForever } from '@material-ui/icons';
+import { Cached, Add, MoreVert, FileCopy, Delete, DragIndicator, Close, ChevronLeft, ChevronRight, Link, LinkOff, DeleteForever } from '@mui/icons-material';
 import { Sortable, ReactSortable } from 'react-sortablejs';
-import { ToggleButton } from '@material-ui/lab';
-import { debounce } from 'throttle-debounce';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
+import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
 import proj4 from 'proj4';
 import { createStore, DynamicModuleLoader } from 'redux-dynamic-modules';
@@ -387,7 +389,6 @@ 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';
@@ -398,6 +399,7 @@ var WEBMAP_SET_BASELAYERS = 'WEBMAP_SET_BASELAYERS';
 var WEBMAP_ADD_BASELAYER = 'WEBMAP_ADD_BASELAYER';
 var WEBMAP_ADD_AVAILABLE_BASELAYER = 'WEBMAP_ADD_AVAILABLE_BASELAYER';
 var WEBMAP_ADD_AVAILABLE_BASELAYERS = 'WEBMAP_ADD_AVAILABLE_BASELAYERS';
+var WEBMAP_UPDATE_LAYER_INFO = 'WEBMAP_UPDATE_LAYER_INFO';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -536,19 +538,6 @@ 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
  *
@@ -644,6 +633,12 @@ var addAvailableBaseLayers = function addAvailableBaseLayers(payload) {
     payload: payload
   };
 };
+var onUpdateLayerInformation = function onUpdateLayerInformation(payload) {
+  return {
+    type: WEBMAP_UPDATE_LAYER_INFO,
+    payload: payload
+  };
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -742,7 +737,6 @@ var actions$3 = /*#__PURE__*/Object.freeze({
   layerChangeEnabled: layerChangeEnabled,
   layerChangeDimension: layerChangeDimension,
   layerSetDimensions: layerSetDimensions,
-  layerSetStyles: layerSetStyles,
   layerChangeName: layerChangeName,
   layerChangeStyle: layerChangeStyle,
   layerDelete: layerDelete,
@@ -750,6 +744,7 @@ var actions$3 = /*#__PURE__*/Object.freeze({
   layerError: layerError,
   addAvailableBaseLayer: addAvailableBaseLayer,
   addAvailableBaseLayers: addAvailableBaseLayers,
+  onUpdateLayerInformation: onUpdateLayerInformation,
   serviceSetLayers: serviceSetLayers
 });
 
@@ -815,11 +810,6 @@ var generateTimesliderId = function generateTimesliderId() {
   generatedTimesliderIds += 1;
   return "timesliderid_".concat(generatedTimesliderIds);
 };
-var generatedScreenIds = 0;
-var generateScreenId = function generateScreenId() {
-  generatedScreenIds += 1;
-  return "screen_".concat(generatedScreenIds);
-};
 /**
  * Map for registering wmlayers with their id's
  */
@@ -1097,18 +1087,6 @@ 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
  *
@@ -1680,12 +1658,30 @@ var getPreviousTimeStepvalue = function getPreviousTimeStepvalue(value, min) {
   return newValue < min ? min : newValue;
 };
 var getValueFromKeyboardEvent = function getValueFromKeyboardEvent(event, value, min, max) {
-  if (event.ctrlKey || event.metaKey) {
+  var supportFourDirectionNavigation = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+
+  if (!supportFourDirectionNavigation) {
+    if (event.ctrlKey || event.metaKey) {
+      switch (event.key) {
+        case 'ArrowDown':
+          return getPreviousTimeStepvalue(value, min);
+
+        case 'ArrowUp':
+          return getNextTimeStepvalue(value, max);
+
+        default:
+          return null;
+      }
+    }
+  } else {
+    // currently supportFourDirectionNavigation (left/right/up/down) is only used in horizontal slider TimeSliderScaleSlider
     switch (event.key) {
       case 'ArrowDown':
+      case 'ArrowLeft':
         return getPreviousTimeStepvalue(value, min);
 
       case 'ArrowUp':
+      case 'ArrowRight':
         return getNextTimeStepvalue(value, max);
 
       default:
@@ -2091,6 +2087,14 @@ var utils = /*#__PURE__*/Object.freeze({
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
+/* TODO:, move this to a right place https://gitlab.com/opengeoweb/opengeoweb/-/issues/1802 */
+
+var selectorMemoizationOptions = {
+  memoizeOptions: {
+    maxSize: 1000,
+    resultEqualityCheck: isEqual
+  }
+};
 /**
  * Gets the map state by mapId
  *
@@ -2190,7 +2194,7 @@ var getMapLayers = createSelector(getLayerIds, getLayersById, function (layerIds
   return layerIds.map(function (layerId) {
     return layers[layerId];
   });
-});
+}, selectorMemoizationOptions);
 /**
  * Gets an array of baselayers ids for a map
  *
@@ -2216,7 +2220,7 @@ var getMapBaseLayers = createSelector(getMapBaseLayersIds, getLayersById, functi
   return layerIds.map(function (layerId) {
     return layers[layerId];
   });
-});
+}, selectorMemoizationOptions);
 /**
  * Gets and array of overLayers ids for a map
  *
@@ -2242,7 +2246,7 @@ var getMapOverLayers = createSelector(getMapOverLayersIds, getLayersById, functi
   return layerIds.map(function (layerId) {
     return layers[layerId];
   });
-});
+}, selectorMemoizationOptions);
 /**
  * Gets map dimensions
  *
@@ -2588,9 +2592,26 @@ var getAllUniqueDimensions = createSelector(getAllMapIds, function (store) {
  */
 
 var getPinLocation = createSelector(getMapById, function (store) {
-  return store ? store.mapPinLocation : {};
+  return store ? store.mapPinLocation : undefined;
 });
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * */
+
 var servicesStore = function servicesStore(store) {
   return store && store.services ? store.services : null;
 };
@@ -2603,8 +2624,8 @@ var servicesStore = function servicesStore(store) {
  */
 
 
-var getServiceIds = createSelector(servicesStore, function (store) {
-  return store ? store.allIds : [];
+var getServiceIds = createSelector(servicesStore, function (serviceState) {
+  return serviceState ? serviceState.allIds : [];
 });
 /**
  * Gets map services
@@ -2618,38 +2639,74 @@ var getServices = createSelector(servicesStore, function (store) {
   return store ? store.byId : {};
 });
 /**
- * Gets map layers from servicename
+ * Gets the service object by its url
  *
- * Example: layers = getServices(store, 'serviceName')
+ * Example: service = getServiceByName(store, 'serviceName')
  * @param {object} store store: object - Store object
- * @returns {array} returnType: ServiceLayer[]
+ * @returns {Service} returnType: Service
  */
 
-var getServiceLayersByName = function getServiceLayersByName(store, serviceName) {
-  if (store && store.services && store.services.byId && store.services.byId[serviceName] && store.services.byId[serviceName].layers) {
-    return store.services.byId[serviceName].layers;
+var getServiceByName = createSelector([servicesStore, function (state, serviceName) {
+  return serviceName;
+}], function (serviceState, serviceName) {
+  if (serviceState && serviceState.byId && serviceState.byId[serviceName]) {
+    return serviceState.byId[serviceName];
   }
 
   return null;
-};
+});
 /**
- * Gets all keywords from services
+ * Gets the layer from the store using the serviceUrl and layerName
  *
- *   const keywords = useSelector((store) => mapSelectors.getKeywords(store));
- * @param {object} store store: object - Store object
- * @returns {array} returnType: Keyword[]
+ * Example: layers = getLayersFromService(store, 'https://geoservices.knmi.nl/...')
+ * @param {object} store store: object - object from which the layers state will be extracted
+ * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+ * @returns {arrayr} returnType: ServiceLayer[] - All layers within the service object.
  */
 
-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 getLayersFromService$1 = createSelector(getServiceByName, function (service) {
+  return service && service.layers || null;
+});
+/**
+ * Gets the layer from the store using the serviceUrl and layerName
+ *
+ * Example: layer = getLayerFromService(store, 'https://geoservices.knmi.nl/...', 'radar')
+ * @param {object} store store: object - The application store
+ * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+ * @param {string}  layerName layerName: string - Name of the layer in the service
+ * @returns {ServiceLayer} returnType: ServiceLayer - The layer from the service object.
+ */
 
-  var uniqueKeywords = _toConsumableArray(new Set(keywords));
+var getLayerFromService = createSelector(function (store, serviceUrl) {
+  return getLayersFromService$1(store, serviceUrl);
+}, function (store, serviceUrl) {
+  return serviceUrl;
+}, function (store, serviceUrl, layerName) {
+  return layerName;
+}, function (layers, serviceUrl, layerName) {
+  if (!layers) return null;
+  var index = layers.findIndex(function (serviceLayer) {
+    return serviceLayer.name === layerName;
+  });
+
+  if (index === -1) {
+    return null;
+  }
+
+  return layers[index];
+});
+/**
+ * Gets the layers stylelist from the servicestore using the serviceUrl and layerName
+ *
+ * Example: layerStyles = getLayerStyles(store, layerService, layerName);
+ * @param {object} store store: object - store from which the layers state will be extracted
+ * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+ * @param {string}  layerName layerName: string - Name of the layer in the service
+ * @returns {array} returnType: Style[] - array containing layer styles
+ */
 
-  return uniqueKeywords;
+var getLayerStyles = createSelector(getLayerFromService, function (layer) {
+  return layer && layer.styles ? layer.styles : [];
 });
 
 /* *
@@ -2714,7 +2771,6 @@ var selectors = /*#__PURE__*/Object.freeze({
   getLayers: getLayers,
   getBaseLayers: getBaseLayers,
   getOverLayers: getOverLayers,
-  getLayerStyles: getLayerStyles,
   getLayerDimensions: getLayerDimensions,
   getLayerNonTimeDimensions: getLayerNonTimeDimensions,
   getLayerTimeDimension: getLayerTimeDimension,
@@ -2728,8 +2784,10 @@ var selectors = /*#__PURE__*/Object.freeze({
   getAvailableBaseLayersForMap: getAvailableBaseLayersForMap,
   getServiceIds: getServiceIds,
   getServices: getServices,
-  getServiceLayersByName: getServiceLayersByName,
-  getKeywords: getKeywords
+  getServiceByName: getServiceByName,
+  getLayersFromService: getLayersFromService$1,
+  getLayerFromService: getLayerFromService,
+  getLayerStyles: getLayerStyles
 });
 
 /* *
@@ -2778,7 +2836,6 @@ var constants$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -2789,6 +2846,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,
+  WEBMAP_UPDATE_LAYER_INFO: WEBMAP_UPDATE_LAYER_INFO,
   MAP_SERVICES_SET_LAYERS: MAP_SERVICES_SET_LAYERS
 });
 
@@ -2833,8 +2891,8 @@ var UI_ORDER_DIALOG = 'UI_ORDER_DIALOG';
 /**
  * Registers the dialog in the store and creates the dialog state
  *
- * Example: registerDialog({'dialogId1', type: 'legend}) you can optionally specify the activeMapId and whether the dialog is open
- * @param {string} payload {type: 'legend' | 'layerManager' | 'dimensionSelect-elevation', activeMapId?: string, setOpen?: boolean}
+ * Example: registerDialog({'dialogId1', type: 'legend}) you can optionally specify the activeMapId, whether the dialog is open and the souce ('app' or 'module', default is 'app')
+ * @param {string} payload {type: 'legend' | 'layerManager' | 'dimensionSelect-elevation', activeMapId?: string, setOpen?: boolean, source?: Source}
  */
 
 var registerDialog = function registerDialog(payload) {
@@ -3725,18 +3783,6 @@ var reducer$5 = 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;
@@ -3768,6 +3814,23 @@ var reducer$5 = function reducer() {
         });
       }
 
+    case WEBMAP_UPDATE_LAYER_INFO:
+      {
+        var _action$payload12 = action.payload,
+            layerStyle = _action$payload12.layerStyle,
+            layerDimensions = _action$payload12.layerDimensions;
+        var layerStyleAction = {
+          payload: layerStyle,
+          type: WEBMAP_LAYER_CHANGE_STYLE
+        };
+        var intermediateState = layerStyle === null ? state : reducer(state, layerStyleAction);
+        var dimensionsAction = {
+          payload: layerDimensions,
+          type: WEBMAP_LAYER_SET_DIMENSIONS
+        };
+        return layerDimensions === null ? intermediateState : reducer(intermediateState, dimensionsAction);
+      }
+
     default:
       return state;
   }
@@ -3904,6 +3967,7 @@ var reducer$4 = function reducer() {
             linked = _action$payload2.linked;
 
         if (!draft.groups.byId[groupId]) {
+          console.warn("SYNCGROUPS_ADD_TARGET: Group ".concat(groupId, " does not exist."));
           return;
         }
 
@@ -4463,99 +4527,84 @@ var getMapBaseLayerActionsTargets = function getMapBaseLayerActionsTargets(state
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
 var ORIGIN_REACTMAPVIEWPARSELAYER = 'ReactMapViewParseLayer';
-var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, xml2jsonrequestURL, webMapJSInstance, mapProperties, onMapUpdateAllDimensions, onLayerChangeStyle, onServiceSetLayers, onLayerSetStyles, onLayerSetDimensions) {
+var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSInstance, mapProperties, onUpdateLayerInformation) {
   var origin = ORIGIN_REACTMAPVIEWPARSELAYER;
-  var service = WMGetServiceFromStore(wmLayer.service, xml2jsonrequestURL);
+  var service = WMGetServiceFromStore(wmLayer.service);
   /* Update list of layers for service */
 
   var done = function done(layers) {
-    onServiceSetLayers && onServiceSetLayers({
-      id: wmLayer.service,
-      name: wmLayer.title,
-      service: wmLayer.service,
-      layers: layers
-    });
-    /* Update style information in services for a layer */
-
-    onLayerSetStyles && onLayerSetStyles({
-      origin: origin,
-      layerId: wmLayer.id,
-      styles: wmLayer.getStyles()
-    });
-    /* Select first style in service for a layer */
-
-    onLayerChangeStyle && onLayerChangeStyle({
-      origin: origin,
-      layerId: wmLayer.ReactWMJSLayerId,
-      style: wmLayer.currentStyle // || wmjsLayer.getStyles().length > 0 ? wmjsLayer.getStyles()[0].Name.value : 'default'
-
-    });
-    /* Trigger update of all map dimensions */
-
-    onMapUpdateAllDimensions && onMapUpdateAllDimensions({
-      origin: origin,
-      mapId: mapId,
-      dimensions: webMapJSInstance.mapdimensions.map(function (_ref) {
-        var name = _ref.name,
-            units = _ref.units,
-            currentValue = _ref.currentValue,
-            synced = _ref.synced;
-        var reactDim = mapProperties.dimensions && mapProperties.dimensions.find(function (dim) {
-          return dim.name === name;
-        });
-        var newDimValue = reactDim && reactDim.currentValue || currentValue;
-        var newDimSynced = reactDim && reactDim.synced || synced;
-        return {
-          name: name,
-          units: units,
-          currentValue: newDimValue,
-          synced: newDimSynced
-        };
-      })
-    });
-    /* Trigger update layer dimensions */
-
-    onLayerSetDimensions && onLayerSetDimensions({
-      origin: origin,
-      layerId: wmLayer.id,
-      dimensions: wmLayer.dimensions.map(function (_ref2) {
-        var name = _ref2.name,
-            units = _ref2.units,
-            currentValue = _ref2.currentValue,
-            dimMinValue = _ref2.dimMinValue,
-            dimMaxValue = _ref2.dimMaxValue,
-            dimTimeInterval = _ref2.dimTimeInterval,
-            values = _ref2.values,
-            synced = _ref2.synced;
-        return {
-          name: name,
-          units: units,
-          currentValue: currentValue,
-          maxValue: dimMaxValue,
-          minValue: dimMinValue,
-          timeInterval: dimTimeInterval,
-          values: values,
-          synced: synced
-        };
-      })
-    });
+    var updateObject = {
+      origin: ORIGIN_REACTMAPVIEWPARSELAYER,
+      serviceLayers: {
+        id: wmLayer.service,
+        name: wmLayer.title,
+        service: wmLayer.service,
+        layers: layers
+      },
+      layerStyle: {
+        origin: origin,
+        layerId: wmLayer.ReactWMJSLayerId,
+        style: wmLayer.currentStyle
+      },
+      mapDimensions: {
+        origin: origin,
+        mapId: mapId,
+        dimensions: webMapJSInstance.mapdimensions.map(function (_ref) {
+          var name = _ref.name,
+              units = _ref.units,
+              currentValue = _ref.currentValue,
+              synced = _ref.synced;
+          var reactDim = mapProperties.dimensions && mapProperties.dimensions.find(function (dim) {
+            return dim.name === name;
+          });
+          var newDimValue = reactDim && reactDim.currentValue || currentValue;
+          var newDimSynced = reactDim && reactDim.synced || synced;
+          return {
+            name: name,
+            units: units,
+            currentValue: newDimValue,
+            synced: newDimSynced
+          };
+        })
+      },
+      layerDimensions: {
+        origin: origin,
+        layerId: wmLayer.id,
+        dimensions: wmLayer.dimensions.map(function (dim) {
+          var name = dim.name,
+              units = dim.units,
+              synced = dim.synced;
+          return {
+            name: name,
+            units: units,
+            currentValue: dim.getValue(),
+            minValue: dim.getFirstValue(),
+            maxValue: dim.getLastValue(),
+            timeInterval: dim.getDimInterval(),
+            values: dim.getValues(),
+            synced: synced
+          };
+        })
+      }
+    };
+    onUpdateLayerInformation && onUpdateLayerInformation(updateObject);
   };
 
   service.getLayerObjectsFlat(done, function () {// do nothing
-  }, false, null, {
+  }, false, {
     headers: wmLayer.headers
   });
 };
 
-var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
-    _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
+var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
+    _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
     _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(layerActionsSaga),
     _marked4$2 = /*#__PURE__*/regeneratorRuntime.mark(addLayerActionsSaga),
     _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerActionsSaga),
     _marked6$1 = /*#__PURE__*/regeneratorRuntime.mark(moveLayerActionsSaga),
     _marked7$1 = /*#__PURE__*/regeneratorRuntime.mark(setActiveLayerIdActionsSaga),
     _marked8 = /*#__PURE__*/regeneratorRuntime.mark(mapBaseLayerActionsSaga),
-    _marked9 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
+    _marked9 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$4);
 var setTimeValidatorRexexp = new RegExp('^(19|20)\\d\\d-(0[1-9]|1[012])-([012]\\d|3[01])T([01]\\d|2[0-3]):([0-5]\\d):([0-5]\\d)Z$');
 function setTimeSaga(_ref) {
   var payload, value, origin, targets, groups;
@@ -4595,7 +4644,7 @@ function setTimeSaga(_ref) {
           return _context.stop();
       }
     }
-  }, _marked$3);
+  }, _marked$4);
 }
 function setBBoxSaga(_ref2) {
   var payload, targets, groups;
@@ -4622,7 +4671,7 @@ function setBBoxSaga(_ref2) {
           return _context2.stop();
       }
     }
-  }, _marked2$3);
+  }, _marked2$4);
 }
 function layerActionsSaga(_ref3) {
   var payload, type, targets;
@@ -4837,7 +4886,7 @@ function mapBaseLayerActionsSaga(_ref8) {
     }
   }, _marked8);
 }
-function rootSaga$3() {
+function rootSaga$4() {
   return regeneratorRuntime.wrap(function rootSaga$(_context9) {
     while (1) {
       switch (_context9.prev = _context9.next) {
@@ -4897,10 +4946,10 @@ function rootSaga$3() {
   }, _marked9);
 }
 
-var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
-    _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
+var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
+    _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
     _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
-    _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
+    _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
 function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
   var group;
   return regeneratorRuntime.wrap(function updateSourceValueWhenLinkingComponentToGroupSaga$(_context) {
@@ -4967,7 +5016,7 @@ function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdat
           return _context.stop();
       }
     }
-  }, _marked$2);
+  }, _marked$3);
 }
 function addGroupTargetSaga(_ref) {
   var payload, groupId, linked, targetToUpdate;
@@ -4991,7 +5040,7 @@ function addGroupTargetSaga(_ref) {
           return _context2.stop();
       }
     }
-  }, _marked2$2);
+  }, _marked2$3);
 }
 function linkGroupTargetSaga(_ref2) {
   var payload, groupId, linked, targetToUpdate;
@@ -5018,7 +5067,7 @@ function linkGroupTargetSaga(_ref2) {
   }, _marked3$2);
 }
 
-function rootSaga$2() {
+function rootSaga$3() {
   return regeneratorRuntime.wrap(function rootSaga$(_context4) {
     while (1) {
       switch (_context4.prev = _context4.next) {
@@ -5059,10 +5108,10 @@ var synchronizationGroupConfig = {
   reducerMap: {
     syncronizationGroupStore: reducer$4
   },
-  sagas: [rootSaga$3, rootSaga$2]
+  sagas: [rootSaga$4, rootSaga$3]
 };
 
-var useStyles$E = makeStyles(function (theme) {
+var useStyles$I = makeStyles(function (theme) {
   return {
     select: {
       '& ul': {
@@ -5107,6 +5156,9 @@ var TooltipSelect = function TooltipSelect(_a) {
       onChangeMouseWheel = _a$onChangeMouseWheel === void 0 ? function () {} : _a$onChangeMouseWheel,
       props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel"]);
 
+  props.disableUnderline;
+      var otherProps = __rest(props, ["disableUnderline"]);
+
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       selectOpen = _React$useState2[0],
@@ -5117,7 +5169,7 @@ var TooltipSelect = function TooltipSelect(_a) {
       tooltipOpen = _React$useState4[0],
       setTooltipOpen = _React$useState4[1];
 
-  var classes = useStyles$E();
+  var classes = useStyles$I();
 
   var preventDefault = function preventDefault(event) {
     event.preventDefault();
@@ -5178,7 +5230,7 @@ var TooltipSelect = function TooltipSelect(_a) {
         paper: classes.select
       }
     }
-  }, props)));
+  }, otherProps)));
 };
 
 /* *
@@ -5261,12 +5313,14 @@ var reducer$3 = function reducer() {
         var type = action.payload.type;
         var activeMapId = action.payload.activeMapId ? action.payload.activeMapId : '';
         var setOpen = action.payload.setOpen ? action.payload.setOpen : false;
+        var source = action.payload.source ? action.payload.source : 'app';
         return produce$1(state, function (draft) {
           if (!Object.keys(draft.dialogs).includes(type)) {
             draft.dialogs[type] = createUIDialogElement({
               activeMapId: activeMapId,
               type: type,
-              setOpen: setOpen
+              setOpen: setOpen,
+              source: source
             });
           } // // register dialog to order
 
@@ -5295,7 +5349,7 @@ var reducer$3 = function reducer() {
         var _action$payload = action.payload,
             _type2 = _action$payload.type,
             _activeMapId = _action$payload.activeMapId,
-            source = _action$payload.source;
+            _source = _action$payload.source;
 
         if (!state.dialogs[_type2]) {
           return state;
@@ -5305,7 +5359,7 @@ var reducer$3 = function reducer() {
           var isOpen = action.payload.setOpen !== undefined ? action.payload.setOpen : draft.dialogs[_type2].isOpen;
           draft.dialogs[_type2].activeMapId = _activeMapId;
           draft.dialogs[_type2].isOpen = isOpen;
-          draft.dialogs[_type2].source = source;
+          draft.dialogs[_type2].source = _source;
 
           if (isOpen) {
             draft.order = moveToTop(state.order, _type2);
@@ -5452,18 +5506,18 @@ var getDialogIsOrderedOnTop = createSelector(function (store, dialogType) {
   return isOrderedOnTop;
 });
 var getDialogSource = createSelector(getDialogDetailsByType, function (details) {
-  if (details) {
+  if (details && details.source) {
     return details.source;
   }
 
   return 'app';
 });
 
-var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(registerMapUISaga),
-    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(unregisterUIMapSaga),
-    _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
+var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(registerMapUISaga),
+    _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(unregisterUIMapSaga),
+    _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
 function registerMapUISaga() {
-  var fields;
+  var fields, source;
   return regeneratorRuntime.wrap(function registerMapUISaga$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
@@ -5475,23 +5529,29 @@ function registerMapUISaga() {
           fields = _context.sent;
 
           if (!(fields.length === 1)) {
-            _context.next = 6;
+            _context.next = 9;
             break;
           }
 
           _context.next = 6;
+          return select(getDialogSource, 'legend');
+
+        case 6:
+          source = _context.sent;
+          _context.next = 9;
           return put(setActiveMapIdForDialog({
             type: 'legend',
             activeMapId: fields[0],
-            setOpen: true
+            setOpen: true,
+            source: source
           }));
 
-        case 6:
+        case 9:
         case "end":
           return _context.stop();
       }
     }
-  }, _marked$1);
+  }, _marked$2);
 }
 function unregisterUIMapSaga() {
   var fields, activeUI;
@@ -5543,9 +5603,9 @@ function unregisterUIMapSaga() {
           return _context2.stop();
       }
     }
-  }, _marked2$1);
+  }, _marked2$2);
 }
-function rootSaga$1() {
+function rootSaga$2() {
   return regeneratorRuntime.wrap(function rootSaga$(_context3) {
     while (1) {
       switch (_context3.prev = _context3.next) {
@@ -5586,7 +5646,7 @@ var uiModuleConfig = {
   reducerMap: {
     ui: reducer$3
   },
-  sagas: [rootSaga$1]
+  sagas: [rootSaga$2]
 };
 
 /**
@@ -6235,6 +6295,17 @@ var reducer$2 = function reducer() {
         }, state);
       }
 
+    case WEBMAP_UPDATE_LAYER_INFO:
+      {
+        var mapDimensions = action.payload.mapDimensions;
+        if (mapDimensions === null) return state;
+        var mapAction = {
+          payload: mapDimensions,
+          type: WEBMAP_MAP_UPDATE_ALL_DIMENSIONS
+        };
+        return reducer(state, mapAction);
+      }
+
     default:
       return state;
   }
@@ -6275,18 +6346,29 @@ var reducer$1 = function reducer() {
         if (!draft.allIds.includes(action.payload.service)) draft.allIds.push(action.payload.service);
       });
 
+    case WEBMAP_UPDATE_LAYER_INFO:
+      {
+        var serviceLayers = action.payload.serviceLayers;
+        if (serviceLayers === null) return state;
+        var mapAction = {
+          payload: serviceLayers,
+          type: MAP_SERVICES_SET_LAYERS
+        };
+        return reducer(state, mapAction);
+      }
+
     default:
       return state;
   }
 };
 
-var _marked = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
-    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
+var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
+    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
     _marked3 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerSaga),
     _marked4 = /*#__PURE__*/regeneratorRuntime.mark(updateAnimation),
     _marked5 = /*#__PURE__*/regeneratorRuntime.mark(setLayerDimensionsSaga),
     _marked6 = /*#__PURE__*/regeneratorRuntime.mark(toggleAutoUpdateSaga),
-    _marked7 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
+    _marked7 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
 
 var generateTimeList = function generateTimeList(start, end, interval) {
   var timeList = [];
@@ -6336,7 +6418,7 @@ function startAnimationSaga(_ref) {
           return _context.stop();
       }
     }
-  }, _marked);
+  }, _marked$1);
 }
 function stopAnimationSaga(_ref2) {
   var payload, mapId;
@@ -6354,7 +6436,7 @@ function stopAnimationSaga(_ref2) {
           return _context2.stop();
       }
     }
-  }, _marked2);
+  }, _marked2$1);
 }
 function deleteLayerSaga(_ref3) {
   var payload, mapId, layers;
@@ -6455,66 +6537,76 @@ function updateAnimation(mapId, maxValue) {
   }, _marked4);
 }
 function setLayerDimensionsSaga(_ref4) {
-  var payload, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance;
+  var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance;
   return regeneratorRuntime.wrap(function setLayerDimensionsSaga$(_context5) {
     while (1) {
       switch (_context5.prev = _context5.next) {
         case 0:
           payload = _ref4.payload;
           _context5.prev = 1;
-          dimensions = payload.dimensions, layerId = payload.layerId;
-          _context5.next = 5;
-          return select(getLayerById, layerId);
+          layerDimensions = payload.layerDimensions;
+
+          if (layerDimensions) {
+            _context5.next = 5;
+            break;
+          }
+
+          return _context5.abrupt("return");
 
         case 5:
+          dimensions = layerDimensions.dimensions, layerId = layerDimensions.layerId;
+          _context5.next = 8;
+          return select(getLayerById, layerId);
+
+        case 8:
           layer = _context5.sent;
 
           if (layer) {
-            _context5.next = 8;
+            _context5.next = 11;
             break;
           }
 
           return _context5.abrupt("return");
 
-        case 8:
+        case 11:
           newTimeDimension = dimensions.find(function (dimension) {
             return dimension.name === 'time';
           });
           mapId = layer.mapId;
-          _context5.next = 12;
+          _context5.next = 15;
           return select(getActiveLayerId, mapId);
 
-        case 12:
+        case 15:
           activeLayerId = _context5.sent;
-          _context5.next = 15;
+          _context5.next = 18;
           return select(isAutoUpdating, mapId);
 
-        case 15:
+        case 18:
           shouldAutoUpdate = _context5.sent;
-          _context5.next = 18;
+          _context5.next = 21;
           return select(getLayerTimeDimension, layerId);
 
-        case 18:
+        case 21:
           prevTimeDimension = _context5.sent;
-          _context5.next = 21;
+          _context5.next = 24;
           return select(isAnimating, mapId);
 
-        case 21:
+        case 24:
           isAnimating$1 = _context5.sent;
           webmapInstance = getWMJSMapById(mapId);
 
           if (!(layerId === activeLayerId && // only update the active layer
           shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue)) {
-            _context5.next = 31;
+            _context5.next = 34;
             break;
           }
 
           if (isAnimating$1) {
-            _context5.next = 27;
+            _context5.next = 30;
             break;
           }
 
-          _context5.next = 27;
+          _context5.next = 30;
           return put(layerChangeDimension({
             layerId: layerId,
             origin: 'setLayerDimensionSaga',
@@ -6524,39 +6616,39 @@ function setLayerDimensionsSaga(_ref4) {
             }
           }));
 
-        case 27:
-          _context5.next = 29;
+        case 30:
+          _context5.next = 32;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 29:
-          _context5.next = 34;
+        case 32:
+          _context5.next = 37;
           break;
 
-        case 31:
+        case 34:
           if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue)) {
-            _context5.next = 34;
+            _context5.next = 37;
             break;
           }
 
-          _context5.next = 34;
+          _context5.next = 37;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 34:
-          _context5.next = 39;
+        case 37:
+          _context5.next = 42;
           break;
 
-        case 36:
-          _context5.prev = 36;
+        case 39:
+          _context5.prev = 39;
           _context5.t0 = _context5["catch"](1);
           // eslint-disable-next-line no-console
           console.warn(_context5.t0);
 
-        case 39:
+        case 42:
         case "end":
           return _context5.stop();
       }
     }
-  }, _marked5, null, [[1, 36]]);
+  }, _marked5, null, [[1, 39]]);
 }
 function toggleAutoUpdateSaga(_ref5) {
   var payload, shouldAutoUpdate, mapId, layerId, timeDimension;
@@ -6620,7 +6712,7 @@ function toggleAutoUpdateSaga(_ref5) {
     }
   }, _marked6, null, [[1, 17]]);
 }
-function rootSaga() {
+function rootSaga$1() {
   return regeneratorRuntime.wrap(function rootSaga$(_context7) {
     while (1) {
       switch (_context7.prev = _context7.next) {
@@ -6638,7 +6730,7 @@ function rootSaga() {
 
         case 6:
           _context7.next = 8;
-          return takeLatest(WEBMAP_LAYER_SET_DIMENSIONS, setLayerDimensionsSaga);
+          return takeLatest(WEBMAP_UPDATE_LAYER_INFO, setLayerDimensionsSaga);
 
         case 8:
           _context7.next = 10;
@@ -6675,28 +6767,17 @@ var moduleConfig = {
     services: reducer$1,
     layers: reducer$5
   },
-  sagas: [rootSaga]
+  sagas: [rootSaga$1]
 };
 
-/* *
- * 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 initialState = {
   filters: {
-    searchFilter: ''
+    searchFilter: '',
+    activeServices: {
+      byId: {},
+      allIds: []
+    },
+    keywords: []
   }
 };
 var reducer = function reducer() {
@@ -6712,49 +6793,315 @@ var reducer = function reducer() {
         });
       }
 
-    default:
-      return state;
-  }
-};
+    case 'LAYER_SELECT_ADD_KEYWORDS_AND_ACTIVE_SERVICES':
+      {
+        var _action$payload = action.payload,
+            serviceUrl = _action$payload.serviceUrl,
+            keywords = _action$payload.keywords;
+        return produce(state, function (draft) {
+          if (!draft.filters.activeServices.byId[serviceUrl]) {
+            draft.filters.activeServices.byId[serviceUrl] = {};
 
-/* *
- * 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
-  }
-};
+            var _iterator = _createForOfIteratorHelper(keywords),
+                _step;
 
-/* *
- * 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)
+            try {
+              var _loop = function _loop() {
+                var keyword = _step.value;
+                var foundKeyword = draft.filters.keywords.find(function (object) {
+                  return object.id === keyword;
+                });
+
+                if (foundKeyword) {
+                  foundKeyword.amount += 1;
+                  foundKeyword.amountVisible += 1;
+                } else {
+                  var newKeywordObject = {
+                    id: keyword,
+                    amount: 1,
+                    amountVisible: 1,
+                    checked: true
+                  };
+                  draft.filters.keywords.push(newKeywordObject);
+                }
+              };
+
+              for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                _loop();
+              }
+            } catch (err) {
+              _iterator.e(err);
+            } finally {
+              _iterator.f();
+            }
+          }
+
+          draft.filters.activeServices.byId[serviceUrl].id = serviceUrl;
+          draft.filters.activeServices.byId[serviceUrl].enabled = true;
+          draft.filters.activeServices.byId[serviceUrl].keywordsPerService = keywords;
+          if (!draft.filters.activeServices.allIds.includes(serviceUrl)) draft.filters.activeServices.allIds.push(serviceUrl);
+        });
+      }
+
+    case 'LAYER_SELECT_ENABLE_ACTIVE_SERVICE':
+      {
+        var _action$payload2 = action.payload,
+            _serviceUrl = _action$payload2.serviceUrl,
+            _keywords = _action$payload2.keywords;
+        return produce(state, function (draft) {
+          draft.filters.activeServices.byId[_serviceUrl].enabled = true;
+
+          var _iterator2 = _createForOfIteratorHelper(_keywords),
+              _step2;
+
+          try {
+            var _loop2 = function _loop2() {
+              var keyword = _step2.value;
+              var foundObject = draft.filters.keywords.find(function (object) {
+                return object.id === keyword;
+              });
+
+              if (foundObject) {
+                foundObject.amountVisible += 1;
+              }
+            };
+
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              _loop2();
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        });
+      }
+
+    case 'LAYER_SELECT_DISABLE_ACTIVE_SERVICE':
+      {
+        var _action$payload3 = action.payload,
+            _serviceUrl2 = _action$payload3.serviceUrl,
+            _keywords2 = _action$payload3.keywords;
+        return produce(state, function (draft) {
+          draft.filters.activeServices.byId[_serviceUrl2].enabled = false;
+
+          var _iterator3 = _createForOfIteratorHelper(_keywords2),
+              _step3;
+
+          try {
+            var _loop3 = function _loop3() {
+              var keyword = _step3.value;
+              var foundObject = draft.filters.keywords.find(function (object) {
+                return object.id === keyword;
+              });
+
+              if (foundObject && foundObject.amountVisible > 0) {
+                foundObject.amountVisible -= 1;
+              }
+            };
+
+            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+              _loop3();
+            }
+          } catch (err) {
+            _iterator3.e(err);
+          } finally {
+            _iterator3.f();
+          }
+        });
+      }
+
+    case 'LAYER_SELECT_UPDATE_KEYWORDS':
+      {
+        return produce(state, function (draft) {
+          var keywords = action.payload.keywords;
+          draft.filters.keywords = keywords;
+        });
+      }
+
+    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 LAYER_SELECT_SET_SEARCH_FILTER = 'LAYER_SELECT_SET_SEARCH_FILTER';
+var LAYER_SELECT_DISABLE_ACTIVE_SERVICE = 'LAYER_SELECT_DISABLE_ACTIVE_SERVICE';
+var LAYER_SELECT_ENABLE_ACTIVE_SERVICE = 'LAYER_SELECT_ENABLE_ACTIVE_SERVICE';
+var LAYER_SELECT_ADD_KEYWORDS_AND_ACTIVE_SERVICES = 'LAYER_SELECT_ADD_KEYWORDS_AND_ACTIVE_SERVICES';
+var LAYER_SELECT_UPDATE_KEYWORDS = 'LAYER_SELECT_UPDATE_KEYWORDS';
+
+/* *
+ * 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)
+ * */
+/**
+ * Sets the given text to the searchFilter
+ *
+ * Example: setSearchFilter({ filterText: 'hello world' })
+ * @param {string} payload { filterText: string }
+ */
+
+var setSearchFilter = function setSearchFilter(payload) {
+  return {
+    type: LAYER_SELECT_SET_SEARCH_FILTER,
+    payload: payload
+  };
+};
+/**
+ * Activates given service in the activeServices array
+ *
+ * Example: enableActiveService({ serviceId: 'service-1' })
+ * @param {string} payload { serviceId: string }
+ */
+
+var enableActiveService = function enableActiveService(payload) {
+  return {
+    type: LAYER_SELECT_ENABLE_ACTIVE_SERVICE,
+    payload: payload
+  };
+};
+/**
+ * Disables given service in the activeServices array
+ *
+ * Example: disableActiveService({ serviceId: 'service-1' })
+ * @param {string} payload { serviceId: string }
+ */
+
+var disableActiveService = function disableActiveService(payload) {
+  return {
+    type: LAYER_SELECT_DISABLE_ACTIVE_SERVICE,
+    payload: payload
+  };
+};
+/*
+ * Sets the given keywords to Layer Select store
+ *
+ * Example: addKeywordsAndActiveServices({ serviceUrl: 'https://service.wms', keywords: ['keyword1', 'keyword2'] })
+ * @param {string, string[]} payload {serviceUrl: string  keywords: string[] }
+ */
+
+var addKeywordsAndActiveServices = function addKeywordsAndActiveServices(payload) {
+  return {
+    type: LAYER_SELECT_ADD_KEYWORDS_AND_ACTIVE_SERVICES,
+    payload: payload
+  };
+};
+var updateKeywords = function updateKeywords(payload) {
+  return {
+    type: LAYER_SELECT_UPDATE_KEYWORDS,
+    payload: payload
+  };
+};
+
+var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
+    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
+function newServiceAddedSaga(capturedAction) {
+  var addedService, service, keywords;
+  return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          addedService = capturedAction.payload;
+          service = addedService.service;
+          keywords = addedService.layers.reduce(function (keywordAccumulator, layer) {
+            return keywordAccumulator.concat(layer.path, layer.keywords);
+          }, []);
+          _context.next = 5;
+          return put(addKeywordsAndActiveServices({
+            serviceUrl: service,
+            keywords: keywords
+          }));
+
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _marked);
+}
+function rootSaga() {
+  return regeneratorRuntime.wrap(function rootSaga$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return takeEvery(MAP_SERVICES_SET_LAYERS, newServiceAddedSaga);
+
+        case 2:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _marked2);
+}
+
+/* *
+ * 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
+  },
+  sagas: [rootSaga]
+};
+
+/* *
+ * 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];
 
@@ -6784,7 +7131,7 @@ var recurseNodes = function recurseNodes(nodesToRecur) {
     leaf: nodesToRecur.leaf,
     name: nodesToRecur.name,
     title: nodesToRecur.text,
-    path: nodesToRecur.path ? nodesToRecur.path.split('/') : [],
+    path: nodesToRecur.path || [],
     children: [],
     keywords: nodesToRecur.keywords || [],
     "abstract": nodesToRecur["abstract"] || ''
@@ -6817,17 +7164,17 @@ var getLayersFromService = function getLayersFromService(serviceUrl) {
   });
 };
 /**
- * Returns a promise with a webmapjs node structure layers from the WMS GetCapabilities document.
+ * Returns a promise with an array of flattened layerobjects from the WMS GetCapabilities document.
  * @param serviceUrl The URL of the WMS service
  * @param {boolean} forceReload **optional** forceReload: boolean, true will force the layers to be reloaded from the service, defaults to false
  */
 
-var getLayerNodesFromService = function getLayerNodesFromService(serviceUrl) {
+var getLayersFlattenedFromService = function getLayersFlattenedFromService(serviceUrl) {
   var forceReload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return new Promise(function (resolve, reject) {
     var serviceObject = WMGetServiceFromStore(serviceUrl);
-    serviceObject.getNodes(function (nodes) {
-      resolve(nodes.children);
+    serviceObject.getLayerObjectsFlat(function (layers) {
+      resolve(layers);
     }, function (error) {
       reject(new Error(error));
     }, forceReload);
@@ -6858,7 +7205,7 @@ var WMSLayerTreeHeader = function WMSLayerTreeHeader(_ref) {
     container: true,
     direction: "row",
     spacing: 1,
-    justify: "space-between"
+    justifyContent: "space-between"
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React.createElement(InputLabel, {
@@ -6875,7 +7222,8 @@ var WMSLayerTreeHeader = function WMSLayerTreeHeader(_ref) {
     style: {
       padding: 3
     },
-    onClick: onClickReload
+    onClick: onClickReload,
+    size: "large"
   }, /*#__PURE__*/React.createElement(Cached, {
     fontSize: "small"
   })))));
@@ -7412,7 +7760,7 @@ var radarLayer$1 = {
   name: 'RAD_NL25_PCP_CM',
   format: 'image/png',
   enabled: true,
-  style: 'knmiradar/nearest',
+  style: 'radar/nearest',
   id: generateLayerId(),
   layerType: LayerType.mapLayer
 };
@@ -7737,7 +8085,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$D = makeStyles({
+var useStyles$H = makeStyles({
   buttonDiv: {
     position: 'relative'
   },
@@ -7773,7 +8121,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$D();
+  var classes = useStyles$H();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -7884,7 +8232,8 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
     fullWidth: true,
     disabled: loading,
     error: urlError !== '',
-    helperText: urlError
+    helperText: urlError,
+    variant: "standard"
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 2,
@@ -7893,7 +8242,8 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
     "data-testid": "add-service",
     onClick: handleAddServiceURL,
     color: "primary",
-    disabled: loading
+    disabled: loading,
+    size: "large"
   }, /*#__PURE__*/React.createElement(Add, null)), loading && /*#__PURE__*/React.createElement(CircularProgress, {
     size: 35,
     className: classes.loadingButton
@@ -7925,7 +8275,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var useStyles$C = makeStyles(function (theme) {
+var useStyles$G = makeStyles(function (theme) {
   return {
     buttonDiv: {
       position: 'relative'
@@ -7960,7 +8310,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$C();
+  var classes = useStyles$G();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -7984,7 +8334,8 @@ var AddLayersButton = function AddLayersButton(_ref) {
     className: classes.button,
     disableRipple: true,
     "data-testid": "addLayersButton",
-    ref: ref
+    ref: ref,
+    size: "large"
   }, /*#__PURE__*/React.createElement(Add, null))), /*#__PURE__*/React.createElement(AddLayersPopup, {
     open: open,
     handleClose: handleClose,
@@ -8085,7 +8436,7 @@ var widthToWidthClass = function widthToWidthClass(w) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$B = makeStyles(function (theme) {
+var useStyles$F = makeStyles(function (theme) {
   return {
     button: {
       width: '24px',
@@ -8102,7 +8453,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
-  var classes = useStyles$B();
+  var classes = useStyles$F();
   var currentActiveMapId = useSelector(function (store) {
     return getDialogMapId(store, 'layerSelect');
   });
@@ -8124,7 +8475,8 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
     className: classes.button,
     id: "layerSelectButton",
     "data-testid": "layerSelectButton",
-    disableRipple: true
+    disableRipple: true,
+    size: "large"
   }, /*#__PURE__*/React.createElement(Add, null)));
 };
 
@@ -8144,7 +8496,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$A = makeStyles({
+var useStyles$E = makeStyles({
   row: {
     height: '32px'
   },
@@ -8168,7 +8520,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
-  var classes = useStyles$A();
+  var classes = useStyles$E();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -8238,6 +8590,12 @@ var useTooltipContainerStyles = makeStyles(function (theme) {
       color: function color(isEnabled) {
         return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultText.rgba : theme.palette.geowebColors.layerManager.tableRowDisabledText.rgba;
       },
+      '& .MuiOutlinedInput-input': {
+        padding: '6px 24px 6px 8px'
+      },
+      '& .MuiOutlinedInput-notchedOutline': {
+        borderColor: 'transparent!important'
+      },
       '&:hover .MuiSelect-select': {
         backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
       },
@@ -8344,7 +8702,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     direction: "row",
-    justify: "flex-start",
+    justifyContent: "flex-start",
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
@@ -8420,7 +8778,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$z = makeStyles(function (theme) {
+var useStyles$D = makeStyles(function (theme) {
   return createStyles({
     button: {
       height: 28,
@@ -8462,6 +8820,9 @@ var useStyles$z = makeStyles(function (theme) {
           return isActive ? theme.palette.geowebColors.buttons.primaryMouseover.fill : theme.palette.geowebColors.layerManager.tableRowMouseover.rgba;
         }
       }
+    },
+    popper: {
+      pointerEvents: 'none'
     }
   });
 });
@@ -8479,7 +8840,7 @@ var LayerManagerButton = function LayerManagerButton(_a) {
       testId = _a.testId,
       props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId"]);
 
-  var classes = useStyles$z({
+  var classes = useStyles$D({
     isActive: isActive,
     isEnabled: isEnabled
   });
@@ -8490,7 +8851,10 @@ var LayerManagerButton = function LayerManagerButton(_a) {
 
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltipTitle,
-    placement: "top"
+    placement: "top",
+    classes: {
+      popper: classes.popper
+    }
   }, /*#__PURE__*/React.createElement(IconButton, Object.assign({
     size: "small",
     onClick: handleClick,
@@ -8516,7 +8880,7 @@ var LayerManagerButton = function LayerManagerButton(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$y = makeStyles(function (theme) {
+var useStyles$C = makeStyles(function (theme) {
   return createStyles({
     checkbox: {
       color: 'inherit',
@@ -8539,7 +8903,7 @@ var EnableLayer = function EnableLayer(_ref) {
   var isEnabled = _ref.isEnabled,
       title = _ref.title,
       onChangeEnableLayer = _ref.onChangeEnableLayer;
-  var classes = useStyles$y(isEnabled);
+  var classes = useStyles$C(isEnabled);
 
   var onClick = function onClick() {
     onChangeEnableLayer(!isEnabled);
@@ -8595,7 +8959,7 @@ var EnableLayer = function EnableLayer(_ref) {
  * 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 createStyles({
     dropdownEmpty: {
       paddingLeft: 8,
@@ -8618,7 +8982,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$x();
+  var classes = useStyles$B();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
   if (!layers || !layers.length) {
@@ -8675,7 +9039,7 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var useStyles$w = makeStyles(function (theme) {
+var useStyles$A = makeStyles(function (theme) {
   return {
     opacityDiv: {
       height: 'calc(100% - 5px)',
@@ -8736,7 +9100,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$w();
+  var classes = useStyles$A();
   var sliderClasses = sliderStyles();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
@@ -8812,7 +9176,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
     onMouseLeave: onMouseLeave,
     onFocus: onFocus,
     onBlur: onBlur
-  }, /*#__PURE__*/React.createElement("div", null, Math.round(currentOpacity * 100), " %"))), open ? /*#__PURE__*/React.createElement("div", {
+  }, "".concat(Math.round(currentOpacity * 100), "  %"))), open ? /*#__PURE__*/React.createElement("div", {
     className: classes.sliderBackground
   }, /*#__PURE__*/React.createElement("div", {
     className: sliderClasses.sliderHeader
@@ -8848,7 +9212,7 @@ var OpacitySelect = function OpacitySelect(_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({
     icon: {
       minWidth: 32,
@@ -8865,7 +9229,7 @@ var MenuItemButton = function MenuItemButton(_ref) {
   var title = _ref.title,
       tooltipTitle = _ref.tooltipTitle,
       icon = _ref.icon;
-  var classes = useStyles$v();
+  var classes = useStyles$z();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItemIcon, {
     className: "".concat(classes.icon, " icon")
   }, icon), /*#__PURE__*/React.createElement(Tooltip, {
@@ -8877,7 +9241,7 @@ var MenuItemButton = function MenuItemButton(_ref) {
   }, title)));
 };
 
-var useStyles$u = makeStyles(function (theme) {
+var useStyles$y = makeStyles(function (theme) {
   return {
     menu: {
       backgroundColor: theme.palette.geowebColors.background.surface,
@@ -8895,7 +9259,7 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
       onLayerDuplicate = _ref.onLayerDuplicate,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$u();
+  var classes = useStyles$y();
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9020,7 +9384,7 @@ var RenderStyles = function RenderStyles(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$t = makeStyles(function () {
+var useStyles$x = makeStyles(function () {
   return createStyles({
     icon: {
       width: 20,
@@ -9034,7 +9398,7 @@ var DeleteButton = function DeleteButton(_ref) {
       onClickDelete = _ref.onClickDelete,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$t();
+  var classes = useStyles$x();
   return /*#__PURE__*/React.createElement(LayerManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickDelete,
@@ -9062,7 +9426,7 @@ var DeleteButton = function DeleteButton(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$s = makeStyles(function (theme) {
+var useStyles$w = makeStyles(function (theme) {
   return createStyles({
     icon: {
       width: 18,
@@ -9099,7 +9463,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$s({
+  var classes = useStyles$w({
     isActive: isActive,
     isEnabled: isEnabled
   });
@@ -9148,7 +9512,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
  * 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({
     row: {
       background: function background(isEnabled) {
@@ -9199,7 +9563,7 @@ var LayerRow = function LayerRow(_ref) {
       layerActiveLayout = _ref.layerActiveLayout,
       layerManagerWidth = _ref.layerManagerWidth,
       dragHandle = _ref.dragHandle;
-  var classes = useStyles$r(isEnabled);
+  var classes = useStyles$v(isEnabled);
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
   var onClickRow = function onClickRow() {
@@ -9502,11 +9866,14 @@ var DimensionSelectConnect = function DimensionSelectConnect(_ref) {
 var RenderStylesConnect = function RenderStylesConnect(_ref) {
   var layerId = _ref.layerId;
   var dispatch = useDispatch();
+  var layerService = useSelector(function (store) {
+    return getLayerService(store, layerId);
+  });
   var layerName = useSelector(function (store) {
     return getLayerName(store, layerId);
   });
   var layerStyles = useSelector(function (store) {
-    return getLayerStyles(store, layerId);
+    return getLayerStyles(store, layerService, layerName);
   });
   var currentLayerStyle = useSelector(function (store) {
     return getLayerStyle(store, layerId);
@@ -9559,7 +9926,7 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
     return getLayerEnabled(store, layerId);
   });
   var layers = useSelector(function (store) {
-    return getServiceLayersByName(store, layerService);
+    return getLayersFromService$1(store, layerService);
   });
   var layerChangeName$1 = React.useCallback(function (_ref2) {
     var layerId = _ref2.layerId,
@@ -9778,7 +10145,7 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 var TOOLTIP_TITLE = 'Drag a layer up or down';
-var useStyles$q = makeStyles(function (theme) {
+var useStyles$u = makeStyles(function (theme) {
   return {
     dragHandle: {
       cursor: 'grab',
@@ -9786,6 +10153,7 @@ var useStyles$q = makeStyles(function (theme) {
       '&:hover': {
         backgroundColor: 'inherit'
       },
+      height: 32,
       color: function color(_ref) {
         var isDisabled = _ref.isDisabled;
         return isDisabled ? theme.palette.geowebColors.layerManager.tableRowDefaultIcon.rgba : theme.palette.geowebColors.layerManager.tableRowDisabledIcon.fill;
@@ -9801,7 +10169,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$q({
+  var classes = useStyles$u({
     isDisabled: isDisabled
   });
   var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
@@ -9818,7 +10186,7 @@ var DragHandle = function DragHandle(_ref2) {
   });
 };
 
-var useStyles$p = makeStyles(function () {
+var useStyles$t = makeStyles(function () {
   return {
     layerRows: {
       width: '100%',
@@ -9885,7 +10253,7 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
 
   var isSorting = activeDragIndex !== null;
   var isDragDisabled = layerIds.length === 1;
-  var classes = useStyles$p(isSorting);
+  var classes = useStyles$t(isSorting);
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
@@ -10095,7 +10463,7 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$o = makeStyles({
+var useStyles$s = makeStyles({
   layerRow: {
     width: '100%',
     height: '36px'
@@ -10118,7 +10486,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  var classes = useStyles$o();
+  var classes = useStyles$s();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -10147,7 +10515,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
   })));
 };
 
-var useStyles$n = makeStyles({
+var useStyles$r = makeStyles({
   layerRowContainer: {
     position: 'relative',
     width: '100%',
@@ -10182,7 +10550,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$n();
+  var classes = useStyles$r();
 
   var _React$useState = React.useState(LayerManagerWidth.lg),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -10239,72 +10607,686 @@ 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
-}));
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var useButtonStyles = makeStyles(function (theme) {
+  return createStyles({
+    button: {
+      height: '24px',
+      width: function width(_ref) {
+        var _width = _ref.width;
+        return _width ? "".concat(_width, "px") : '24px';
+      },
+      border: 0,
+      backgroundColor: theme.palette.geowebColors.buttons.surfaceIconDefault.fill,
+      borderRadius: '4.5px',
+      textTransform: 'none',
+      '& svg path, svg text': {
+        fill: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
+      },
+      '&:hover': {
+        backgroundColor: theme.palette.geowebColors.buttons.flatMouseover.fill
+      },
+      '&:disabled': {
+        backgroundColor: theme.palette.geowebColors.buttons.disabled.fill,
+        '& svg path, svg text': {
+          fill: theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
+        },
+        border: "1px solid ".concat(theme.palette.geowebColors.buttons.disabled.fill)
+      },
+      '&.Mui-selected': {
+        backgroundColor: theme.palette.geowebColors.buttons.primaryActive.fill,
+        '&:hover': {
+          backgroundColor: theme.palette.geowebColors.buttons.primaryMouseover.fill
+        },
+        '& svg': {
+          backgroundColor: 'transparent'
+        },
+        '& svg path, svg text': {
+          fill: theme.palette.geowebColors.typographyAndIcons.buttonIcon
+        }
+      }
+    }
+  });
+});
+
+var ToggleIconButton = function ToggleIconButton(_a) {
+  var active = _a.active,
+      width = _a.width,
+      children = _a.children,
+      _a$value = _a.value,
+      value = _a$value === void 0 ? 0 : _a$value,
+      props = __rest(_a, ["active", "width", "children", "value"]);
+
+  var classes = useButtonStyles({
+    width: width
+  });
+  return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({
+    className: classes.button,
+    disableRipple: true,
+    selected: active,
+    value: value
+  }, props), children);
+};
+
+/* *
+ * 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 KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source;
+  var dispatch = useDispatch();
+  var currentActiveMapId = useSelector(function (store) {
+    return getDialogMapId(store, 'keywordFilter');
+  });
+  var isOpenInStore = useSelector(function (store) {
+    return getisDialogOpen(store, 'keywordFilter');
+  });
+  var openFilterResultsDialog = React.useCallback(function () {
+    dispatch(setActiveMapIdForDialog({
+      type: 'keywordFilter',
+      activeMapId: mapId,
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: source
+    }));
+  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
+  return /*#__PURE__*/React.createElement(ToggleIconButton, {
+    onClick: openFilterResultsDialog,
+    active: isOpenInStore,
+    id: "keywordFilterButton",
+    "data-testid": "keywordFilterButton",
+    disableRipple: true
+  }, /*#__PURE__*/React.createElement(SvgIcon, {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "M14.155 12.567c1.362 0 2.523.848 2.992 2.043h1.895a1.173 1.173 0 0 1 0 2.346h-1.895A3.213 3.213 0 0 1 14.155 19a3.213 3.213 0 0 1-2.992-2.044h-5.99a1.172 1.172 0 1 1 0-2.346h5.99a3.214 3.214 0 0 1 2.992-2.043zm0 1.755a1.461 1.461 0 1 0 0 2.922 1.461 1.461 0 0 0 0-2.922zM10.06 5c1.362 0 2.524.848 2.992 2.044h5.99a1.173 1.173 0 1 1 0 2.344h-5.99a3.214 3.214 0 0 1-2.992 2.044 3.216 3.216 0 0 1-2.992-2.044H5.173a1.172 1.172 0 1 1 0-2.344h1.895A3.216 3.216 0 0 1 10.06 5zm0 1.754a1.461 1.461 0 1 0 0 2.922 1.461 1.461 0 0 0 0-2.922z",
+    fill: "#FFF",
+    fillRule: "evenodd"
+  }))));
+};
+
+/* *
+ * 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 layerSelectStore = function layerSelectStore(store) {
+  return store && store.layerSelect ? store.layerSelect : null;
+};
+/**
+ * Returns search filter string
+ *
+ * Example getSearchFilter(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: string
+ */
+
+
+var getSearchFilter = createSelector(layerSelectStore, function (store) {
+  return store ? store.filters.searchFilter : '';
+});
+/**
+ * Returns active services array
+ *
+ * Example getActiveServices(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: array of active services
+ */
+
+var getActiveServices = createSelector(layerSelectStore, function (store) {
+  var _a;
+
+  return store ? (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId : {};
+});
+/**
+ * Returns all ids of enabled services
+ *
+ * Example getEnabledServiceIds(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: array of service ids that are enabled
+ */
+
+var getEnabledServiceIds = createSelector(layerSelectStore, function (store) {
+  var _a, _b;
+
+  var enabledServices = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.allIds.filter(function (service) {
+    var _a;
+
+    return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId[service].enabled;
+  })) !== null && _b !== void 0 ? _b : [];
+  return enabledServices.map(function (service) {
+    var _a;
+
+    return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId[service].id;
+  });
+});
+/**
+ * Returns all keywords
+ *
+ * Example getKeywords(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: array of keyword objects
+ */
+
+var getKeywords = createSelector(layerSelectStore, function (store) {
+  return store ? store.filters.keywords : [];
+});
+
+/* *
+ * 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 style = {
+  dialogTitle: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: '16px 16px 20px 16px',
+    ' span': {
+      fontSize: '2.125rem'
+    }
+  },
+  container: function container(theme) {
+    return {
+      '& .MuiDialog-paper': {
+        backgroundColor: theme.palette.geowebColors.cards.cardContainer
+      }
+    };
+  },
+  closeBtn: function closeBtn(theme) {
+    return {
+      color: theme.palette.geowebColors.captions.captionDisabled.color,
+      marginTop: 'auto',
+      marginBottom: 'auto'
+    };
+  },
+  textField: {
+    width: '100%'
+  },
+  dialogContent: {
+    padding: '8px 16px'
+  },
+  footerContent: {
+    padding: '16px'
+  }
+};
+var ADD_HEADING = 'Add a new service';
+var EDIT_HEADING = 'Edit service';
+var SAVE_HEADING = 'Save service';
+
+var getTitleForVariant = function getTitleForVariant(variant) {
+  switch (variant) {
+    case 'add':
+      return ADD_HEADING;
+
+    case 'edit':
+      return EDIT_HEADING;
+
+    default:
+      return SAVE_HEADING;
+  }
+};
+
+var ServicePopup = function ServicePopup(_ref) {
+  var servicePopupVariant = _ref.servicePopupVariant,
+      _ref$hideBackdrop = _ref.hideBackdrop,
+      hideBackdrop = _ref$hideBackdrop === void 0 ? false : _ref$hideBackdrop,
+      isOpen = _ref.isOpen,
+      closePopup = _ref.closePopup,
+      _ref$url = _ref.url,
+      url = _ref$url === void 0 ? '' : _ref$url;
+  return /*#__PURE__*/React.createElement(Dialog, {
+    open: isOpen,
+    hideBackdrop: hideBackdrop,
+    fullWidth: true,
+    maxWidth: "xs",
+    sx: style.container
+  }, /*#__PURE__*/React.createElement(DialogTitle, {
+    sx: style.dialogTitle
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h5",
+    component: "span"
+  }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React.createElement(IconButton, {
+    size: "small",
+    onClick: closePopup,
+    "data-testid": "ClosePopupButtonCross",
+    sx: style.closeBtn
+  }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, {
+    sx: style.dialogContent
+  }, /*#__PURE__*/React.createElement(TextField, {
+    sx: style.textField,
+    variant: "filled",
+    label: "Service name"
+  })), /*#__PURE__*/React.createElement(DialogContent, {
+    sx: style.dialogContent
+  }, /*#__PURE__*/React.createElement(TextField, {
+    sx: style.textField,
+    variant: "filled",
+    label: "Service URL",
+    defaultValue: url,
+    id: "service-url"
+  })), /*#__PURE__*/React.createElement(DialogContent, {
+    sx: style.dialogContent
+  }, /*#__PURE__*/React.createElement(TextField, {
+    sx: style.textField,
+    variant: "filled",
+    multiline: true,
+    rows: 4,
+    label: "Abstracts",
+    helperText: "Short description of what this service does"
+  })), /*#__PURE__*/React.createElement(DialogActions, {
+    sx: style.footerContent
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "tertiary",
+    onClick: closePopup,
+    "data-testid": "ClosePopupButtonCancel",
+    sx: {
+      width: '117px'
+    }
+  }, "cancel"), /*#__PURE__*/React.createElement(Button, {
+    sx: {
+      width: '117px',
+      marginLeft: '16px!important'
+    },
+    variant: "primary"
+  }, "save")));
+};
+
+var isURL = function isURL(string) {
+  return /^https?:\/\//.test(string);
+};
+var useStyles$q = makeStyles(function (theme) {
+  return {
+    iconButton: {
+      color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
+    },
+    saveButton: {
+      color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
+      textTransform: 'none',
+      border: "1px solid ".concat(theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat)
+    }
+  };
+});
+var clearIconPath = 'M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M15.44426,7.26697571 L12.0002861,10.7110482 L8.55573996,7.26697571 C8.19978253,6.9110081 7.62292549,6.9110081 7.26696807,7.26697571 C6.91101064,7.62294331 6.91101064,8.19981687 7.26696807,8.55578447 L10.7115142,11.9998569 L7.26696807,15.4445017 C6.91101064,15.8004693 6.91101064,16.3767705 7.26696807,16.7333104 C7.44494678,16.910722 7.67843653,17 7.91192629,17 C8.14484377,17 8.37776125,16.910722 8.55573996,16.7333104 L12.0002861,13.289238 L15.44426,16.7333104 C15.6222388,16.910722 15.8551562,17 16.088646,17 C16.3221357,17 16.5550532,16.910722 16.7330319,16.7333104 C17.0889894,16.3767705 17.0889894,15.8004693 16.7330319,15.4445017 L13.289058,11.9998569 L16.7330319,8.55578447 C17.0889894,8.19981687 17.0889894,7.62294331 16.7330319,7.26697571 C16.3770745,6.9110081 15.8002175,6.9110081 15.44426,7.26697571 Z';
+var clearIcon = /*#__PURE__*/React__default.createElement(SvgIcon, {
+  style: {
+    width: '24px',
+    height: '24px'
+  },
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React__default.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__default.createElement(SvgIcon, {
+  style: {
+    width: '24px',
+    height: '24px'
+  },
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React__default.createElement("path", {
+  d: searchIconPath
+}));
+
+var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
+  var localSearchString = _ref.localSearchString,
+      onClickClear = _ref.onClickClear;
+
+  var _React$useState = React__default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isPopupOpen = _React$useState2[0],
+      setPopupOpen = _React$useState2[1];
+
+  var classes = useStyles$q();
+  var ClearButton = /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Clear",
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    className: classes.iconButton,
+    edge: "end",
+    onClick: function onClick() {
+      onClickClear();
+    },
+    size: "large"
+  }, clearIcon));
+  if (isURL(localSearchString)) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginRight: '15px'
+    }
+  }, ClearButton), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "outlined",
+    onClick: function onClick() {
+      return setPopupOpen(true);
+    },
+    className: classes.saveButton
+  }, "Save"), /*#__PURE__*/React__default.createElement(ServicePopup, {
+    servicePopupVariant: "save",
+    isOpen: isPopupOpen,
+    closePopup: function closePopup() {
+      return setPopupOpen(false);
+    },
+    url: localSearchString
+  }));
+  if (localSearchString) return ClearButton;
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Search",
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    className: classes.iconButton,
+    edge: "end",
+    size: "large"
+  }, searchIcon));
+};
+
+var SearchField = function SearchField(_ref) {
+  var searchFilter = _ref.searchFilter,
+      setSearchFilter = _ref.setSearchFilter;
 
-var SearchField = function SearchField() {
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      searchString = _React$useState2[0],
-      setSearchString = _React$useState2[1];
+      localSearchString = _React$useState2[0],
+      setLocalSearchString = _React$useState2[1]; // mirror store unless typing a URL
+
+
+  React.useEffect(function () {
+    if (isURL(localSearchString)) return;
+    setLocalSearchString(searchFilter); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchFilter]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  var setSearchFilterDebounced = React.useCallback(debounce(setSearchFilter, 300), []);
+
+  var handleChange = function handleChange(text) {
+    setLocalSearchString(text);
+    if (!isURL(text)) setSearchFilterDebounced(text);else if (searchFilter) setSearchFilterDebounced('');
+  };
 
-  var classes = useStyles$m();
   return /*#__PURE__*/React.createElement(TextField, {
     variant: "filled",
     label: "Search through services or enter a service URL",
-    value: searchString,
+    value: localSearchString,
     onChange: function onChange(e) {
-      return setSearchString(e.target.value);
+      handleChange(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('');
+      }, /*#__PURE__*/React.createElement(SearchFieldButtonContainer, {
+        localSearchString: localSearchString,
+        onClickClear: function onClickClear() {
+          setLocalSearchString('');
+          setSearchFilterDebounced('');
         }
-      }, 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 SearchFieldConnect = function SearchFieldConnect() {
+  var dispatch = useDispatch();
+  var searchFilter = useSelector(function (store) {
+    return getSearchFilter(store);
+  });
+  return /*#__PURE__*/React.createElement(SearchField, {
+    setSearchFilter: function setSearchFilter$1(filterText) {
+      return dispatch(setSearchFilter({
+        filterText: filterText
+      }));
+    },
+    searchFilter: searchFilter
+  });
+};
+
+/* *
+ * 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 filterLayersFromService = function filterLayersFromService(serviceId, services, keywords, searchString) {
+  var activeKeywords = keywords.filter(function (keyword) {
+    return keyword.checked;
+  });
+  var keywordList = activeKeywords.map(function (keyword) {
+    return keyword.id;
+  });
+  var allKeywordsActive = keywords.every(function (keyword) {
+    return keyword.checked;
+  });
+
+  if (searchString === '' && allKeywordsActive) {
+    return services[serviceId].layers.filter(function (layer) {
+      return layer.leaf;
+    });
+  }
+
+  var searchStringArray = searchString.split(' ');
+  return services[serviceId].layers.filter(function (layer) {
+    return searchStringArray.every(function (search) {
+      var layerPathAndKeywords = layer.path.concat(layer.keywords);
+      return (!!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
+        return !keywordList.includes(keyword);
+      }) || allKeywordsActive) && (!!layer.name && layer.name.toLowerCase().includes(search.toLowerCase()) || !!layer.text && layer.text.toLowerCase().includes(search.toLowerCase()) || !!layer["abstract"] && layer["abstract"].toLowerCase().includes(search.toLowerCase()) || !!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
+        return !keyword.toLowerCase().includes(search.toLowerCase());
+      }) || !!layer.path && !layer.path.every(function (group) {
+        return !group.toLowerCase().includes(search.toLowerCase());
+      }) || services[serviceId].name.toLowerCase().includes(search.toLowerCase()));
+    });
+  }).filter(function (layer) {
+    return layer.leaf;
+  });
+};
+
+var useStyles$p = makeStyles(function (theme) {
+  return {
+    layerRow: {
+      background: theme.palette.geowebColors.background.surface,
+      padding: '8px 0px 8px 12px',
+      marginBottom: '4px',
+      height: '64px',
+      border: "solid 1px ".concat(theme.palette.geowebColors.cards.cardContainerBorder)
+    },
+    layerText: {
+      fontSize: '12px',
+      fontWeight: 500,
+      overflow: 'clip',
+      height: '20px',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    },
+    layerName: {
+      fontSize: '12px',
+      height: '24px',
+      maxWidth: '100%',
+      overflow: 'clip',
+      "float": 'left',
+      paddingTop: '6px',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    },
+    layerNameMaxWidth: {
+      maxWidth: '196px'
+    },
+    layerAbstract: {
+      fontSize: '10px',
+      paddingLeft: '200px',
+      overflow: 'clip',
+      height: '30px'
+    },
+    resultCount: {
+      marginBottom: '4px',
+      fontSize: '12px'
+    }
+  };
+});
+
+var LayerList = function LayerList(_ref) {
+  var services = _ref.services,
+      serviceIds = _ref.serviceIds,
+      layerSelectHeight = _ref.layerSelectHeight,
+      searchString = _ref.searchString,
+      keywords = _ref.keywords;
+  var classes = useStyles$p();
+
+  var _React$useState = React.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      numberOfLayers = _React$useState2[0],
+      setNumberOfLayers = _React$useState2[1];
+
+  React.useEffect(function () {
+    setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
+      return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywords, searchString).length;
+    }, 0));
+  }, [serviceIds, keywords, services, searchString]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "layerList"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.resultCount
+  }, numberOfLayers, " results"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: layerSelectHeight - 199,
+      overflow: 'auto'
     }
+  }, serviceIds.map(function (serviceId) {
+    return filterLayersFromService(serviceId, services, keywords, searchString).map(function (layer) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: "".concat(serviceId, "-").concat(layer.name),
+        className: classes.layerRow,
+        "data-testid": "layerListLayerRow"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classes.layerText
+      }, layer.text), /*#__PURE__*/React.createElement("div", null, layer["abstract"] ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classes.layerName, " ").concat(classes.layerNameMaxWidth)
+      }, layer.name), /*#__PURE__*/React.createElement("div", {
+        className: classes.layerAbstract,
+        "data-testid": "layerAbstract"
+      }, layer["abstract"])) : /*#__PURE__*/React.createElement("div", {
+        className: classes.layerName
+      }, layer.name)));
+    });
+  })));
+};
+
+/* *
+ * 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 LayerListConnect = function LayerListConnect(_ref) {
+  var layerSelectHeight = _ref.layerSelectHeight;
+  var services = useSelector(function (store) {
+    return getServices(store);
+  });
+  var enabledServiceIds = useSelector(function (store) {
+    return getEnabledServiceIds(store);
+  });
+  var keywords = useSelector(function (store) {
+    return getKeywords(store);
+  });
+  var searchString = useSelector(function (store) {
+    return getSearchFilter(store);
+  });
+  return /*#__PURE__*/React.createElement(LayerList, {
+    services: services,
+    serviceIds: enabledServiceIds,
+    layerSelectHeight: layerSelectHeight,
+    keywords: keywords,
+    searchString: searchString
   });
 };
 
@@ -10324,52 +11306,131 @@ var SearchField = function SearchField() {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$l = makeStyles(function (theme) {
+var useStyles$o = 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,
+      border: function border(_ref) {
+        var isEnabled = _ref.isEnabled;
+        return isEnabled ? "solid 1px ".concat(theme.palette.geowebColors.buttons.primaryActive.fill) : "solid 1px ".concat(theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat);
+      },
+      backgroundColor: function backgroundColor(_ref2) {
+        var isEnabled = _ref2.isEnabled;
+        return isEnabled ? theme.palette.geowebColors.buttons.primaryActive.fill : theme.palette.geowebColors.buttons.surfaceIconDefault.fill;
+      },
+      color: function color(_ref3) {
+        var isEnabled = _ref3.isEnabled;
+        return isEnabled ? theme.palette.geowebColors.typographyAndIcons.buttonIcon : theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat;
+      },
       "float": 'left',
       whiteSpace: 'nowrap',
       '&:hover': {
-        backgroundColor: theme.palette.geowebColors.buttons.flatMouseover.fill,
+        backgroundColor: function backgroundColor(_ref4) {
+          var isEnabled = _ref4.isEnabled;
+          return isEnabled ? theme.palette.geowebColors.buttons.primaryMouseover.fill : theme.palette.geowebColors.buttons.flatMouseover.fill;
+        },
+        border: function border(_ref5) {
+          var isEnabled = _ref5.isEnabled;
+          return isEnabled ? "solid 1px ".concat(theme.palette.geowebColors.buttons.primaryMouseover.fill) : "solid 1px ".concat(theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat);
+        },
         cursor: 'pointer'
       }
     }
   });
 });
 
-var ServiceChip = function ServiceChip(_ref) {
+var ServiceChip = function ServiceChip(_ref6) {
+  var _ref6$all = _ref6.all,
+      all = _ref6$all === void 0 ? false : _ref6$all,
+      service = _ref6.service,
+      isEnabled = _ref6.isEnabled,
+      toggleChip = _ref6.toggleChip;
+  var classes = useStyles$o({
+    isEnabled: isEnabled
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    className: classes.chip,
+    "data-testid": all ? 'serviceChipAll' : 'serviceChip',
+    onClick: function onClick() {
+      return toggleChip(all ? 'all' : service && service.service);
+    },
+    onKeyPress: function onKeyPress() {
+      return toggleChip(all ? 'all' : service && service.service);
+    }
+  }, service ? service.name : 'All');
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var ServiceChipConnect = function ServiceChipConnect(_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");
-  }
+      service = _ref.service,
+      isEnabled = _ref.isEnabled;
+  var dispatch = useDispatch();
+  var activeServices = useSelector(function (store) {
+    return getActiveServices(store);
+  });
 
-  if (service && service.name) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classes.chip,
-      "data-testid": "serviceChip"
-    }, service.name);
-  }
+  var toggleChip = function toggleChip(service) {
+    if (service === 'all') {
+      if (isEnabled) {
+        Object.values(activeServices).forEach(function (s) {
+          if (s.enabled) dispatch(disableActiveService({
+            serviceUrl: s.id,
+            keywords: s.keywordsPerService
+          }));
+        });
+      } else {
+        Object.values(activeServices).forEach(function (s) {
+          if (!s.enabled) dispatch(enableActiveService({
+            serviceUrl: s.id,
+            keywords: s.keywordsPerService
+          }));
+        });
+      }
+    } else if (isEnabled) {
+      dispatch(disableActiveService({
+        serviceUrl: service,
+        keywords: activeServices[service].keywordsPerService
+      }));
+    } else {
+      dispatch(enableActiveService({
+        serviceUrl: service,
+        keywords: activeServices[service].keywordsPerService
+      }));
+    }
+  };
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.chip
+  return /*#__PURE__*/React.createElement(ServiceChip, {
+    service: service,
+    all: all,
+    toggleChip: toggleChip,
+    isEnabled: isEnabled
   });
 };
 
-var useStyles$k = makeStyles(function (theme) {
+var useStyles$n = makeStyles(function (theme) {
   return createStyles({
     serviceChips: {
       width: '100%',
@@ -10377,22 +11438,37 @@ var useStyles$k = makeStyles(function (theme) {
       alignItems: 'center',
       overflowX: 'visible',
       "float": 'left',
-      paddingLeft: '32px'
+      paddingLeft: '40px',
+      marginRight: function marginRight(_ref) {
+        var margin = _ref.margin;
+        return margin;
+      },
+      marginLeft: function marginLeft(_ref2) {
+        var margin = _ref2.margin;
+        return -margin;
+      },
+      maxWidth: function maxWidth(_ref3) {
+        var maxWidthValue = _ref3.maxWidthValue;
+        return maxWidthValue;
+      },
+      fontSize: '0.875rem'
     },
     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'
+      cursor: 'pointer',
+      marginRight: '-120px',
+      "float": 'left',
+      zIndex: 1,
+      position: 'relative'
     },
     serviceList: {
       height: '32px',
       marginTop: '8px',
       width: '100%',
-      overflowX: 'hidden',
-      marginRight: '-120px'
+      overflow: 'hidden'
     },
     scrollArrowRight: {
       width: '120px',
@@ -10406,10 +11482,10 @@ var useStyles$k = makeStyles(function (theme) {
   });
 });
 
-var ServiceList = function ServiceList(_ref) {
-  var layerSelectWidth = _ref.layerSelectWidth,
-      services = _ref.services;
-  var classes = useStyles$k();
+var ServiceList = function ServiceList(_ref4) {
+  var layerSelectWidth = _ref4.layerSelectWidth,
+      services = _ref4.services,
+      activeServices = _ref4.activeServices;
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -10422,16 +11498,24 @@ var ServiceList = function ServiceList(_ref) {
       setWidth = _React$useState4[1];
 
   var ref = React.useRef(null);
+  var maxWidthValue = ref && ref.current && ref.current.scrollWidth && ref.current.scrollWidth >= layerSelectWidth - margin && ref.current.scrollWidth || layerSelectWidth - 50;
+  var classes = useStyles$n({
+    margin: margin,
+    maxWidthValue: maxWidthValue
+  });
   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]);
+    setWidth(ref.current.scrollWidth + 50);
+    setMargin(Math.max(0, Math.min(width - layerSelectWidth, margin)));
+  }, [services, layerSelectWidth, width, margin]);
+  var isAllEnabled = Object.values(activeServices).every(function (activeService) {
+    return activeService.enabled;
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.serviceList,
     "data-testid": "serviceList"
@@ -10441,20 +11525,20 @@ var ServiceList = function ServiceList(_ref) {
     "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, {
+  }, services && Object.keys(services) && Object.keys(services).length > 0 && /*#__PURE__*/React.createElement(ServiceChipConnect, {
     key: "All",
-    all: true
+    all: true,
+    isEnabled: isAllEnabled
   }), Object.keys(services).map(function (service) {
-    return /*#__PURE__*/React.createElement(ServiceChip, {
+    var _a;
+
+    return /*#__PURE__*/React.createElement(ServiceChipConnect, {
       key: services[service].id,
-      service: services[service]
+      service: services[service],
+      isEnabled: (_a = activeServices[service]) === null || _a === void 0 ? void 0 : _a.enabled
     });
-  })), margin < width - layerSelectWidth - gapRight && /*#__PURE__*/React.createElement(ChevronRight, {
+  })), layerSelectWidth + margin < width && /*#__PURE__*/React.createElement(ChevronRight, {
     className: classes.scrollArrowRight,
     onClick: onRightArrowClick,
     "data-testid": "rightScrollArrow"
@@ -10483,20 +11567,301 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
   var services = useSelector(function (store) {
     return getServices(store);
   });
+  var activeServices = useSelector(function (store) {
+    return getActiveServices(store);
+  });
   return /*#__PURE__*/React.createElement(ServiceList, {
     layerSelectWidth: layerSelectWidth,
-    services: services
+    services: services,
+    activeServices: activeServices
+  });
+};
+
+var useStyles$m = makeStyles(function (theme) {
+  return createStyles({
+    servicesContainer: {
+      width: '300px',
+      height: '380px',
+      position: 'fixed',
+      top: '140px',
+      right: '-72px',
+      backgroundColor: theme.palette.geowebColors.background.surface,
+      boxShadow: theme.shadows[6]
+    },
+    servicesText: {
+      paddingTop: '12px',
+      paddingLeft: '12px'
+    }
+  });
+});
+
+var ServiceOptionsButton = function ServiceOptionsButton() {
+  var classes = useStyles$m();
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      containerOpen = _React$useState2[0],
+      setContainerOpen = _React$useState2[1];
+
+  var toggleContainer = function toggleContainer() {
+    setContainerOpen(!containerOpen);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToggleIconButton, {
+    onClick: toggleContainer,
+    active: containerOpen,
+    "data-testid": "serviceOptionsButton"
+  }, /*#__PURE__*/React.createElement(SvgIcon, {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "M12 16c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0-2c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm0-6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z",
+    fill: "#FFF",
+    fillRule: "evenodd"
+  })))), containerOpen ? /*#__PURE__*/React.createElement(Box, {
+    className: classes.servicesContainer,
+    "data-testid": "container"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: classes.servicesText
+  }, "Services")) : null);
+};
+
+var useStyles$l = makeStyles({
+  serviceList: {
+    height: '48px'
+  },
+  keywordFilterButton: {
+    "float": 'left',
+    position: 'absolute',
+    margin: '12px 0 0 8px',
+    zIndex: 2
+  },
+  serviceOptionsButton: {
+    position: 'absolute',
+    margin: '12px 0 0 calc(100% - 36px)',
+    zIndex: 2
+  },
+  layerSelectContainer: {
+    padding: '0 8px'
+  }
+});
+
+var LayerSelect = function LayerSelect(_ref) {
+  var mapId = _ref.mapId,
+      bounds = _ref.bounds,
+      _ref$onClose = _ref.onClose,
+      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+      showTitle = _ref.showTitle,
+      isOpen = _ref.isOpen,
+      _ref$onMouseDown = _ref.onMouseDown,
+      onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'module' : _ref$source;
+  var classes = useStyles$l();
+
+  var _React$useState = React.useState(500),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      height = _React$useState2[0],
+      setHeight = _React$useState2[1];
+
+  var _React$useState3 = React.useState(750),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      width = _React$useState4[0],
+      setWidth = _React$useState4[1];
+
+  var onChangeSize = function onChangeSize(_ref2) {
+    var height = _ref2.height,
+        width = _ref2.width;
+    setHeight(height);
+    setWidth(width);
+  };
+
+  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+    title: showTitle ? "Layer Select ".concat(mapId) : 'Layer Select',
+    startSize: {
+      width: width,
+      height: height
+    },
+    minWidth: 390,
+    minHeight: 126,
+    startPosition: {
+      top: 150,
+      left: 100
+    },
+    isOpen: isOpen,
+    onChangeSize: onChangeSize,
+    onClose: onClose,
+    headerSize: "small",
+    bounds: bounds,
+    "data-testid": "layerSelectWindow",
+    onMouseDown: onMouseDown,
+    order: order,
+    source: source
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '6px'
+    }
+  }, /*#__PURE__*/React.createElement(SearchFieldConnect, null)), /*#__PURE__*/React.createElement("div", {
+    className: classes.keywordFilterButton
+  }, /*#__PURE__*/React.createElement(KeywordFilterButtonConnect, {
+    mapId: mapId
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classes.serviceOptionsButton
+  }, /*#__PURE__*/React.createElement(ServiceOptionsButton, null)), /*#__PURE__*/React.createElement("div", {
+    className: classes.serviceList
+  }, /*#__PURE__*/React.createElement(ServiceListConnect, {
+    layerSelectWidth: width
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classes.layerSelectContainer
+  }, /*#__PURE__*/React.createElement(LayerListConnect, {
+    layerSelectHeight: height
+  })));
+};
+
+/* *
+ * 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 CustomSwitch = withStyles(function (theme) {
+  return {
+    switchBase: {
+      '&$checked': {
+        color: theme.palette.geowebColors.customSlider.thumb
+      },
+      '&$checked + $track': {
+        backgroundColor: theme.palette.geowebColors.buttons.primary["default"].fill
+      }
+    },
+    checked: {},
+    track: {
+      backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
+      opacity: '1 !important'
+    }
+  };
+})(Switch);
+
+var useStyles$k = makeStyles(function (theme) {
+  return createStyles({
+    listItem: {
+      width: '100%',
+      minWidth: '300px',
+      padding: '0px',
+      paddingLeft: '10px',
+      paddingRight: '50px',
+      fontSize: '12px'
+    },
+    onlyByttonText: {
+      color: theme.palette.geowebColors.buttons.primary["default"].fill,
+      fontSize: '14px',
+      fontWeight: 500
+    },
+    checkbox: {
+      paddingTop: '6px',
+      paddingBottom: '7px',
+      '&&:hover': {
+        backgroundColor: 'transparent'
+      }
+    },
+    listItemIcon: {
+      minWidth: '42px'
+    },
+    listItemText: {
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    }
   });
+});
+
+var FilterListItem = function FilterListItem(_ref) {
+  var index = _ref.index,
+      text = _ref.text,
+      checked = _ref.checked,
+      toggleCheckbox = _ref.toggleCheckbox,
+      selectOnlyOne = _ref.selectOnlyOne;
+  var classes = useStyles$k();
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      hovering = _React$useState2[0],
+      setHovering = _React$useState2[1];
+
+  var handleMouseOver = React.useCallback(function () {
+    setHovering(true);
+  }, []);
+  var handleMouseLeave = React.useCallback(function () {
+    setHovering(false);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleMouseOver,
+    onBlur: handleMouseLeave,
+    "data-testid": "filterResultListItem"
+  }, /*#__PURE__*/React.createElement(ListItem, {
+    className: classes.listItem
+  }, /*#__PURE__*/React.createElement(ListItemIcon, {
+    className: classes.listItemIcon
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    color: "secondary",
+    checked: checked,
+    onChange: function onChange() {
+      return toggleCheckbox(index);
+    },
+    className: classes.checkbox
+  })), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2",
+    className: classes.listItemText
+  }, text), hovering ? /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(IconButton, {
+    style: {
+      backgroundColor: 'transparent'
+    },
+    edge: "end",
+    size: "small",
+    onClick: function onClick() {
+      return selectOnlyOne(index);
+    },
+    "data-testid": "onlyButton"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: classes.onlyByttonText
+  }, "ONLY"))) : null));
 };
 
-var useStyles$j = makeStyles({
-  serviceList: {
-    height: '48px'
-  }
+var useStyles$j = makeStyles(function (theme) {
+  return createStyles({
+    selectAll: {
+      padding: '15px',
+      paddingLeft: '20px'
+    },
+    "switch": {
+      padding: '15px'
+    },
+    selectAllContainer: {
+      backgroundColor: theme.palette.background.paper,
+      position: 'sticky',
+      top: 0,
+      zIndex: 100
+    }
+  });
 });
 
-var LayerSelect = function LayerSelect(_ref) {
-  var mapId = _ref.mapId,
+var KeywordFilterResults = function KeywordFilterResults(_ref) {
+  var keywordObjects = _ref.keywordObjects,
+      mapId = _ref.mapId,
       bounds = _ref.bounds,
       _ref$onClose = _ref.onClose,
       onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
@@ -10507,49 +11872,212 @@ var LayerSelect = function LayerSelect(_ref) {
       _ref$order = _ref.order,
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
-      source = _ref$source === void 0 ? 'module' : _ref$source;
+      source = _ref$source === void 0 ? 'module' : _ref$source,
+      updateKeywords = _ref.updateKeywords;
   var classes = useStyles$j();
 
-  var _React$useState = React.useState(750),
+  var _React$useState = React.useState(true),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      width = _React$useState2[0],
-      setWidth = _React$useState2[1];
+      allSelected = _React$useState2[0],
+      setAllSelected = _React$useState2[1];
 
-  var onChangeSize = function onChangeSize(_ref2) {
-    var width = _ref2.width;
-    setWidth(width);
+  var toggleSelectAll = function toggleSelectAll() {
+    var editedKeywords = keywordObjects.map(function (object) {
+      return Object.assign(Object.assign({}, object), {
+        checked: !allSelected
+      });
+    });
+    setAllSelected(!allSelected);
+    updateKeywords(editedKeywords);
+  };
+
+  var toggleCheckbox = function toggleCheckbox(listIndex) {
+    var editedKeywords = keywordObjects.map(function (object, index) {
+      return listIndex === index ? Object.assign(Object.assign({}, object), {
+        checked: !object.checked
+      }) : object;
+    });
+    updateKeywords(editedKeywords);
   };
 
+  var selectOnlyOne = function selectOnlyOne(listIndex) {
+    var editedKeywords = keywordObjects.map(function (object, index) {
+      return listIndex === index ? Object.assign(Object.assign({}, object), {
+        checked: true
+      }) : Object.assign(Object.assign({}, object), {
+        checked: false
+      });
+    });
+    updateKeywords(editedKeywords);
+  }; // If even one checkbox is unchecked, switch toggleAll off
+  // If all checkboxes becomes checked, switch toggleAll on
+
+
+  React.useEffect(function () {
+    var checked = keywordObjects.every(function (object) {
+      return object.checked === true;
+    });
+    setAllSelected(checked);
+  }, [keywordObjects]);
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
-    title: showTitle ? "Layer Select ".concat(mapId) : 'Layer Select',
+    title: showTitle ? "Filter Results ".concat(mapId) : 'Filter Results',
+    "data-testid": "keywordFilterResults",
     startSize: {
-      width: width,
-      height: 500
-    },
-    minWidth: 300,
-    minHeight: 126,
-    startPosition: {
-      top: 150,
-      left: 100
+      width: 349,
+      height: 600
     },
+    minWidth: 312,
+    minHeight: 192,
     isOpen: isOpen,
-    onChangeSize: onChangeSize,
     onClose: onClose,
     headerSize: "small",
     bounds: bounds,
-    "data-testid": "layerSelectWindow",
     onMouseDown: onMouseDown,
     order: order,
     source: source
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 12,
+    justifyContent: "space-between",
+    alignItems: "center",
+    className: classes.selectAllContainer
+  }, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 6,
+    justifyContent: "flex-start",
+    alignItems: "center",
+    className: classes.selectAll
+  }, "Select all"), /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 6,
+    justifyContent: "flex-end",
+    alignContent: "center",
+    className: classes["switch"]
+  }, /*#__PURE__*/React.createElement(CustomSwitch, {
+    checked: allSelected,
+    onChange: toggleSelectAll,
+    "data-testid": "customSwitch"
+  }))), /*#__PURE__*/React.createElement(List, {
+    dense: true,
     style: {
-      padding: '6px'
+      padding: '0px'
+    }
+  }, keywordObjects.map(function (_ref2, index) {
+    var id = _ref2.id,
+        checked = _ref2.checked,
+        amountVisible = _ref2.amountVisible;
+    if (amountVisible === 0) return null;
+    return /*#__PURE__*/React.createElement(FilterListItem, {
+      key: "".concat(id, "-").concat(index),
+      index: index,
+      text: id,
+      checked: checked,
+      toggleCheckbox: toggleCheckbox,
+      selectOnlyOne: selectOnlyOne
+    });
+  })));
+};
+
+/* *
+ * 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 KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
+  var bounds = _ref.bounds,
+      _ref$showTitle = _ref.showTitle,
+      showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle;
+  var dispatch = useDispatch();
+  var mapId = useSelector(function (store) {
+    return getDialogMapId(store, 'keywordFilter');
+  });
+  var isOpenInStore = useSelector(function (store) {
+    return getisDialogOpen(store, 'keywordFilter');
+  });
+  var onClose = React.useCallback(function () {
+    return dispatch(setToggleOpenDialog({
+      type: 'keywordFilter',
+      setOpen: false
+    }));
+  }, [dispatch]);
+  var isMapPresent = useSelector(function (store) {
+    return getIsMapPresent(store, mapId);
+  });
+  var uiOrder = useSelector(function (store) {
+    return getDialogOrder(store, 'keywordFilter');
+  });
+  var uiSource = useSelector(function (store) {
+    return getDialogSource(store, 'keywordFilter');
+  });
+  var uiIsOrderedOnTop = useSelector(function (store) {
+    return getDialogIsOrderedOnTop(store, 'keywordFilter');
+  });
+  var updateKeywords$1 = React.useCallback(function (keywords) {
+    dispatch(updateKeywords({
+      keywords: keywords
+    }));
+  }, [dispatch]); // Check to ensure the currently active map is still present on screen - if not, close the dialog
+
+  React.useEffect(function () {
+    if (mapId !== '' && !isMapPresent) {
+      onClose();
     }
-  }, /*#__PURE__*/React.createElement(SearchField, null), /*#__PURE__*/React.createElement("div", {
-    className: classes.serviceList
-  }, /*#__PURE__*/React.createElement(ServiceListConnect, {
-    layerSelectWidth: width
-  }))));
+  }, [mapId, isMapPresent, onClose]);
+  var registerDialog$1 = React.useCallback(function () {
+    return dispatch(registerDialog({
+      type: 'keywordFilter',
+      setOpen: false
+    }));
+  }, [dispatch]);
+  var unregisterDialog$1 = React.useCallback(function () {
+    return dispatch(unregisterDialog({
+      type: 'keywordFilter'
+    }));
+  }, [dispatch]);
+  var onOrderDialog = React.useCallback(function () {
+    if (!uiIsOrderedOnTop) {
+      dispatch(orderDialog({
+        type: 'keywordFilter'
+      }));
+    }
+  }, [dispatch, uiIsOrderedOnTop]); // Register this dialog in the store
+
+  React.useEffect(function () {
+    registerDialog$1();
+    return function () {
+      unregisterDialog$1();
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var keywords = useSelector(function (store) {
+    return getKeywords(store);
+  });
+  return /*#__PURE__*/React.createElement(KeywordFilterResults, {
+    keywordObjects: keywords,
+    mapId: mapId,
+    bounds: bounds,
+    isOpen: isOpenInStore,
+    onClose: onClose,
+    showTitle: showTitle,
+    onMouseDown: onOrderDialog,
+    order: uiOrder,
+    source: uiSource,
+    updateKeywords: updateKeywords$1
+  });
 };
 
 /* *
@@ -10648,7 +12176,7 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
   React.useEffect(function () {
     if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
       preloadedServices.forEach(function (service) {
-        getLayerNodesFromService(service.url).then(function (layers) {
+        getLayersFlattenedFromService(service.url).then(function (layers) {
           if (isMounted.current) {
             serviceSetLayers$1({
               id: service.id,
@@ -10664,7 +12192,7 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [isOpenInStore, preloadedServices, serviceSetLayers$1]);
-  return /*#__PURE__*/React.createElement(LayerSelect, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LayerSelect, {
     mapId: mapId,
     bounds: bounds,
     isOpen: isOpenInStore,
@@ -10673,7 +12201,7 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
     onMouseDown: onOrderDialog,
     order: uiOrder,
     source: uiSource
-  });
+  }), /*#__PURE__*/React.createElement(KeywordFilterResultsConnect, null));
 };
 
 /* *
@@ -10727,135 +12255,62 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
     }));
   }, [dispatch]);
   var isMapPresent = useSelector(function (store) {
-    return getIsMapPresent(store, mapId);
-  });
-  var uiOrder = useSelector(function (store) {
-    return getDialogOrder(store, 'layerManager');
-  });
-  var uiSource = useSelector(function (store) {
-    return getDialogSource(store, 'layerManager');
-  });
-  var uiIsOrderedOnTop = useSelector(function (store) {
-    return getDialogIsOrderedOnTop(store, 'layerManager');
-  }); // Check to ensure the currently active map is still present on screen - if not, close the dialog
-
-  React.useEffect(function () {
-    if (mapId !== '' && !isMapPresent) {
-      onClose();
-    }
-  }, [mapId, isMapPresent, onClose]);
-  var registerDialog$1 = React.useCallback(function () {
-    return dispatch(registerDialog({
-      type: 'layerManager',
-      setOpen: false
-    }));
-  }, [dispatch]);
-  var unregisterDialog$1 = React.useCallback(function () {
-    return dispatch(unregisterDialog({
-      type: 'layerManager'
-    }));
-  }, [dispatch]);
-  var onOrderDialog = React.useCallback(function () {
-    if (!uiIsOrderedOnTop) {
-      dispatch(orderDialog({
-        type: 'layerManager'
-      }));
-    }
-  }, [dispatch, uiIsOrderedOnTop]); // Register this dialog in the store
-
-  React.useEffect(function () {
-    registerDialog$1();
-    return function () {
-      unregisterDialog$1();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LayerManager, {
-    mapId: mapId,
-    preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
-    preloadedMapServices: preloadedMapServices,
-    preloadedBaseServices: preloadedBaseServices,
-    bounds: bounds,
-    isOpen: isOpenInStore,
-    onClose: onClose,
-    showTitle: showTitle,
-    onMouseDown: onOrderDialog,
-    order: uiOrder,
-    source: uiSource,
-    layerSelect: layerSelect
-  }), layerSelect && /*#__PURE__*/React.createElement(LayerSelectConnect, null));
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var useButtonStyles = makeStyles(function (theme) {
-  return createStyles({
-    button: {
-      height: '24px',
-      width: function width(_ref) {
-        var _width = _ref.width;
-        return _width ? "".concat(_width, "px") : '24px';
-      },
-      border: 0,
-      backgroundColor: theme.palette.geowebColors.buttons.surfaceIconDefault.fill,
-      borderRadius: '4.5px',
-      textTransform: 'none',
-      '& svg path, svg text': {
-        fill: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
-      },
-      '&:hover': {
-        backgroundColor: theme.palette.geowebColors.buttons.flatMouseover.fill
-      },
-      '&:disabled': {
-        backgroundColor: theme.palette.geowebColors.buttons.disabled.fill,
-        '& svg path, svg text': {
-          fill: theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
-        }
-      },
-      '&.Mui-selected': {
-        backgroundColor: theme.palette.geowebColors.buttons.primaryActive.fill,
-        '&:hover': {
-          backgroundColor: theme.palette.geowebColors.buttons.primaryMouseover.fill
-        },
-        '& svg': {
-          backgroundColor: 'transparent'
-        },
-        '& svg path, svg text': {
-          fill: theme.palette.geowebColors.typographyAndIcons.buttonIcon
-        }
-      }
-    }
+    return getIsMapPresent(store, mapId);
   });
-});
+  var uiOrder = useSelector(function (store) {
+    return getDialogOrder(store, 'layerManager');
+  });
+  var uiSource = useSelector(function (store) {
+    return getDialogSource(store, 'layerManager');
+  });
+  var uiIsOrderedOnTop = useSelector(function (store) {
+    return getDialogIsOrderedOnTop(store, 'layerManager');
+  }); // Check to ensure the currently active map is still present on screen - if not, close the dialog
 
-var ToggleIconButton = function ToggleIconButton(_a) {
-  var active = _a.active,
-      width = _a.width,
-      children = _a.children,
-      props = __rest(_a, ["active", "width", "children"]);
+  React.useEffect(function () {
+    if (mapId !== '' && !isMapPresent) {
+      onClose();
+    }
+  }, [mapId, isMapPresent, onClose]);
+  var registerDialog$1 = React.useCallback(function () {
+    return dispatch(registerDialog({
+      type: 'layerManager',
+      setOpen: false
+    }));
+  }, [dispatch]);
+  var unregisterDialog$1 = React.useCallback(function () {
+    return dispatch(unregisterDialog({
+      type: 'layerManager'
+    }));
+  }, [dispatch]);
+  var onOrderDialog = React.useCallback(function () {
+    if (!uiIsOrderedOnTop) {
+      dispatch(orderDialog({
+        type: 'layerManager'
+      }));
+    }
+  }, [dispatch, uiIsOrderedOnTop]); // Register this dialog in the store
 
-  var classes = useButtonStyles({
-    width: width
-  });
-  return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({
-    className: classes.button,
-    disableRipple: true,
-    selected: active,
-    value: 0
-  }, props), children);
+  React.useEffect(function () {
+    registerDialog$1();
+    return function () {
+      unregisterDialog$1();
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LayerManager, {
+    mapId: mapId,
+    preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
+    preloadedMapServices: preloadedMapServices,
+    preloadedBaseServices: preloadedBaseServices,
+    bounds: bounds,
+    isOpen: isOpenInStore,
+    onClose: onClose,
+    showTitle: showTitle,
+    onMouseDown: onOrderDialog,
+    order: uiOrder,
+    source: uiSource,
+    layerSelect: layerSelect
+  }), layerSelect && /*#__PURE__*/React.createElement(LayerSelectConnect, null));
 };
 
 /* *
@@ -11217,7 +12672,8 @@ var useStyles$h = makeStyles(function () {
       height: '320px',
       margin: '10px',
       marginLeft: '-5px',
-      minWidth: 120
+      minWidth: 120,
+      fontSize: '90%'
     },
     layerName: {
       paddingLeft: '10px',
@@ -11258,11 +12714,10 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
     return null;
   }
 
-  var sortedMarks = _toConsumableArray(marks);
-
-  sortedMarks = sortedMarks.sort(function (a, b) {
+  var sortedMarks = _toConsumableArray(marks).sort(function (a, b) {
     return typeof a.value === 'number' && typeof b.value === 'number' && a.value - b.value;
   });
+
   var adaptedMarks = reverse ? sortedMarks.reverse() : sortedMarks;
   var values = adaptedMarks.map(function (m) {
     return m.value;
@@ -11408,27 +12863,30 @@ var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
   var layerName = wmLayer.getLayerName();
   var marks = marksByDimension(wmsDimension);
   var isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced === true;
+  var tooltipTitle = isLayerDimensionSynced ? 'Click to disconnect layer' : 'Click to connect layer';
+
+  var Icon = function Icon() {
+    return isLayerDimensionSynced ? /*#__PURE__*/React.createElement(Link, {
+      "data-testid": "syncIcon"
+    }) : /*#__PURE__*/React.createElement(LinkOff, {
+      "data-testid": "syncDisIcon"
+    });
+  };
+
   return /*#__PURE__*/React.createElement(Grid, {
     key: layerId,
     item: true,
     xs: "auto"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: tooltipTitle,
+    placement: "top"
   }, /*#__PURE__*/React.createElement(IconButton, {
     "data-testid": "syncButton",
     size: "small",
     onClick: function onClick() {
       return handleSyncChanged(layerId, dimensionName, layerDimension.currentValue, !layerDimension.synced);
     }
-  }, isLayerDimensionSynced ? /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Click to disconnect layer",
-    placement: "top"
-  }, /*#__PURE__*/React.createElement(Link, {
-    "data-testid": "syncIcon"
-  })) : /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Click to connect layer",
-    placement: "top"
-  }, /*#__PURE__*/React.createElement(LinkOff, {
-    "data-testid": "syncDisIcon"
-  }))), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
+  }, /*#__PURE__*/React.createElement(Icon, null))), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
     marks: marks,
     layerName: layerName,
     reverse: dimConfig ? dimConfig.reversed : false,
@@ -11467,7 +12925,9 @@ var DimensionSelectDialogConnect = function DimensionSelectDialogConnect(_ref) {
       onMouseDown = _ref.onMouseDown,
       onToggleDialog = _ref.onToggleDialog,
       _ref$index = _ref.index,
-      index = _ref$index === void 0 ? 0 : _ref$index;
+      index = _ref$index === void 0 ? 0 : _ref$index,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
   var mapDimension = useSelector(function (store) {
     return getMapDimension(store, mapId, dimensionName);
@@ -11522,7 +12982,8 @@ var DimensionSelectDialogConnect = function DimensionSelectDialogConnect(_ref) {
     },
     bounds: "parent",
     onMouseDown: onMouseDown,
-    order: order
+    order: order,
+    source: source
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       padding: 4
@@ -11573,6 +13034,9 @@ var MultiMapSingleDimensionSelectConnect = function MultiMapSingleDimensionSelec
   var uiOrder = useSelector(function (store) {
     return getDialogOrder(store, uiDialogType);
   });
+  var uiSource = useSelector(function (store) {
+    return getDialogSource(store, uiDialogType);
+  });
   var uiIsOrderedOnTop = useSelector(function (store) {
     return getDialogIsOrderedOnTop(store, uiDialogType);
   });
@@ -11625,6 +13089,7 @@ var MultiMapSingleDimensionSelectConnect = function MultiMapSingleDimensionSelec
     onMouseDown: onOrderDialog,
     onToggleDialog: onToggleDialog,
     order: uiOrder,
+    source: uiSource,
     isOpen: isOpen,
     index: index
   });
@@ -11649,7 +13114,9 @@ var MultiMapSingleDimensionSelectConnect = function MultiMapSingleDimensionSelec
 
 var DimensionSelectMapButtonConnect = function DimensionSelectMapButtonConnect(_ref) {
   var mapId = _ref.mapId,
-      dimension = _ref.dimension;
+      dimension = _ref.dimension,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
   var uiDialogType = getDimensionType(dimension);
   var currentActiveMapId = useSelector(function (store) {
@@ -11663,9 +13130,10 @@ var DimensionSelectMapButtonConnect = function DimensionSelectMapButtonConnect(_
     dispatch(setActiveMapIdForDialog({
       type: uiDialogType,
       activeMapId: mapId,
-      setOpen: setOpen
+      setOpen: setOpen,
+      source: source
     }));
-  }, [currentActiveMapId, dispatch, isOpenInStore, uiDialogType, mapId]);
+  }, [currentActiveMapId, dispatch, isOpenInStore, uiDialogType, mapId, source]);
   var isOpen = currentActiveMapId === mapId && isOpenInStore;
   return /*#__PURE__*/React.createElement(DimensionSelectButton, {
     dimension: dimension,
@@ -11692,7 +13160,9 @@ var DimensionSelectMapButtonConnect = function DimensionSelectMapButtonConnect(_
  * */
 
 var MultiDimensionSelectMapButtonsConnect = function MultiDimensionSelectMapButtonsConnect(_ref) {
-  var mapId = _ref.mapId;
+  var mapId = _ref.mapId,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source;
   var dimensions = useSelector(function (store) {
     return getMapDimensions(store, mapId);
   });
@@ -11708,7 +13178,8 @@ var MultiDimensionSelectMapButtonsConnect = function MultiDimensionSelectMapButt
     return /*#__PURE__*/React.createElement(DimensionSelectMapButtonConnect, {
       mapId: mapId,
       dimension: dimension.name,
-      key: dimension.name
+      key: dimension.name,
+      source: source
     });
   }));
 };
@@ -11928,6 +13399,10 @@ var SpeedButton = function SpeedButton(_ref) {
   };
 
   var onKeyDown = function onKeyDown(event) {
+    // disable default Slider behavior
+    event.stopPropagation();
+    event.preventDefault(); // custom logic
+
     if (event.key === 'Tab') {
       setOpen(!open);
     }
@@ -12197,6 +13672,10 @@ var TimeStepButton = function TimeStepButton(_ref) {
   };
 
   var onKeyDown = function onKeyDown(event) {
+    // disable default Slider behavior
+    event.stopPropagation();
+    event.preventDefault(); // custom logic
+
     if (event.key === 'Tab') {
       setOpen(!open);
     }
@@ -13721,55 +15200,54 @@ var useStyles$c = makeStyles(function (theme) {
 });
 
 var thumbComponent = function thumbComponent(props) {
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    React.createElement("span", Object.assign({}, props, {
-      "data-testid": "scaleSliderSliderThumb",
-      tabIndex: 0
-    }), /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("polygon", {
-      transform: "translate(6.5 5.5)",
-      points: "6,0 11,5 11,12 0,12 0,5"
-    })))
-  );
+  var children = props.children,
+      other = __rest(props, ["children"]);
+
+  return /*#__PURE__*/React.createElement(SliderThumb, Object.assign({}, other, {
+    "data-testid": "scaleSliderSliderThumb",
+    tabIndex: 0
+  }), children, /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("polygon", {
+    transform: "translate(6.5 5.5)",
+    points: "6,0 11,5 11,12 0,12 0,5"
+  })));
 };
 
 var marks = [{
-  value: 0.1,
   text: '5 min scale',
-  paddingLeft: '2px'
+  paddingLeft: '2px',
+  value: Scale.Minutes5
 }, {
-  value: 0.35,
   text: '1 h scale',
-  paddingLeft: '25px'
+  paddingLeft: '25px',
+  value: Scale.Hour
 }, {
-  value: 0.6,
   text: '3 h scale',
-  paddingLeft: '45px'
+  paddingLeft: '45px',
+  value: Scale.Hours3
 }, {
-  value: 0.85,
   text: '6 h scale',
-  paddingLeft: '65px'
+  paddingLeft: '65px',
+  value: Scale.Hours6
 }, {
-  value: 1.1,
   text: 'day scale',
-  paddingLeft: '80px'
+  paddingLeft: '80px',
+  value: Scale.Day
 }, {
-  value: 1.35,
   text: 'week scale',
-  paddingLeft: '92px'
+  paddingLeft: '92px',
+  value: Scale.Week
 }, {
-  value: 1.6,
   text: 'month scale',
-  paddingLeft: '107px'
+  paddingLeft: '107px',
+  value: Scale.Month
 }, {
-  value: 1.85,
   text: 'year scale',
-  paddingLeft: '130px'
+  paddingLeft: '130px',
+  value: Scale.Year
 }, {
-  value: 2.1,
   text: 'data scale',
-  paddingLeft: '140px'
+  paddingLeft: '140px',
+  value: Scale.DataScale
 }];
 
 var valueLabelFormat = function valueLabelFormat(value) {
@@ -13787,9 +15265,14 @@ var GeoWebScaleSlider = withStyles(function (theme) {
     thumb: {
       backgroundColor: 'rgba(0,0,0,0)',
       marginTop: 0,
+      width: 12,
+      height: 12,
       color: theme.palette.geowebColors.timeSlider.timeScalePointer.fill,
       '& svg polygon': {
         filter: theme.palette.geowebColors.timeSlider.timeScaleShadowButtonScale.filter
+      },
+      '&:before': {
+        display: 'none'
       }
     },
     valueLabel: {
@@ -13832,77 +15315,59 @@ var GeoWebScaleSlider = withStyles(function (theme) {
     }
   };
 })(Slider);
-
-var getScaleSliderValue = function getScaleSliderValue(value) {
-  if (Math.abs(value - marks[0].value) < 0.0001) {
-    return Scale.Minutes5;
-  }
-
-  if (Math.abs(value - marks[1].value) < 0.0001) {
-    return Scale.Hour;
-  }
-
-  if (Math.abs(value - marks[2].value) < 0.0001) {
-    return Scale.Hours3;
-  }
-
-  if (Math.abs(value - marks[3].value) < 0.0001) {
-    return Scale.Hours6;
-  }
-
-  if (Math.abs(value - marks[4].value) < 0.0001) {
-    return Scale.Day;
-  }
-
-  if (Math.abs(value - marks[5].value) < 0.0001) {
-    return Scale.Week;
-  }
-
-  if (Math.abs(value - marks[6].value) < 0.0001) {
-    return Scale.Month;
-  }
-
-  if (Math.abs(value - marks[7].value) < 0.0001) {
-    return Scale.Year;
-  }
-
-  if (Math.abs(value - marks[8].value) < 0.0001) {
-    return Scale.DataScale;
-  }
-
-  return Scale.Hour;
-};
-
-var scaleValues = Object.keys(Scale).map(function (scale) {
-  return Number(scale);
-});
+var RAIL_GUTTER_OFFSET = 0.4;
 
 var TimeSliderScaleSlider = function TimeSliderScaleSlider(_ref) {
   var layers = _ref.layers,
-      timeSliderScale = _ref.timeSliderScale,
+      _ref$timeSliderScale = _ref.timeSliderScale,
+      timeSliderScale = _ref$timeSliderScale === void 0 ? Scale.Hour : _ref$timeSliderScale,
       centerTime = _ref.centerTime,
       secondsPerPx = _ref.secondsPerPx,
       selectedTime = _ref.selectedTime,
       onChangeTimeSliderScale = _ref.onChangeTimeSliderScale;
   var classes = useStyles$c();
-  var scaleObjectIndex = scaleValues.indexOf(timeSliderScale);
-  var newScaleObject = scaleObjectIndex !== -1 ? marks[scaleObjectIndex] : {
-    value: 0.4,
-    text: '1 h scale'
-  };
-  var newScaleObjectIndex = scaleObjectIndex !== -1 ? scaleObjectIndex : 1;
-  var value = newScaleObject.value,
-      text = newScaleObject.text;
+  var min = 0;
+  var max = marks.length - 1;
+  var value = marks.findIndex(function (mark) {
+    return mark.value === timeSliderScale;
+  });
 
-  var handleChange = function handleChange(event, newValue) {
-    var newScale = getScaleSliderValue(newValue);
-    var scaleToSecPerPx = newScale === 8 ? getScaleToSecondsPerPxForDataScale(layers) : scaleToSecondsPerPx[newScale];
+  var onChangeSliderValue = function onChangeSliderValue(newSliderValue) {
+    var newValue = newSliderValue ? Math.round(newSliderValue) : 0;
+    var newScale = marks.find(function (el) {
+      return el.value === newValue;
+    }).value;
+    var scaleToSecPerPx = newScale === Scale.DataScale ? getScaleToSecondsPerPxForDataScale(layers) : scaleToSecondsPerPx[newScale];
     var newCenterTime = getNewCenterOfFixedPointZoom(selectedTime, secondsPerPx, scaleToSecPerPx, centerTime);
     onChangeTimeSliderScale(newScale, newCenterTime, scaleToSecPerPx);
   };
 
+  var onChange = function onChange(event, value) {
+    if (event.type !== 'keydown') {
+      onChangeSliderValue(value);
+    }
+  };
+
+  var onKeyDown = function onKeyDown(event) {
+    // disable default Slider behavior
+    event.preventDefault();
+    event.stopPropagation(); // custom logic
+
+    var newValue = getValueFromKeyboardEvent(event, value, min, max, true);
+
+    if (newValue !== null) {
+      onChangeSliderValue(newValue);
+    }
+  };
+
+  var _marks$find = marks.find(function (mark) {
+    return mark.value === value;
+  }),
+      paddingLeft = _marks$find.paddingLeft,
+      text = _marks$find.text;
+
   var scaleTextPadding = {
-    paddingLeft: marks[newScaleObjectIndex].paddingLeft
+    paddingLeft: paddingLeft
   };
   return /*#__PURE__*/React.createElement("div", {
     className: classes.Background,
@@ -13913,16 +15378,18 @@ var TimeSliderScaleSlider = function TimeSliderScaleSlider(_ref) {
     style: scaleTextPadding
   }, text)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(GeoWebScaleSlider, {
     "data-testid": "scaleSliderSlider",
-    defaultValue: 1,
+    defaultValue: Scale.Hour,
     value: value,
-    min: 0,
-    step: null,
-    max: 2.3,
+    min: min - RAIL_GUTTER_OFFSET,
+    step: 1,
+    max: max + RAIL_GUTTER_OFFSET,
     getAriaValueText: valueLabelFormat,
-    onChange: handleChange,
-    valueLabelDisplay: "auto",
+    onChange: onChange,
+    onKeyDown: onKeyDown,
     "aria-labelledby": "scale-slider",
-    ThumbComponent: thumbComponent,
+    components: {
+      Thumb: thumbComponent
+    },
     marks: marks,
     track: false
   })));
@@ -14495,7 +15962,7 @@ var TimeSlider = function TimeSlider(_ref) {
     className: styles.scaleSlider
   }, scaleSlider || /*#__PURE__*/React.createElement(TimeSliderScaleSlider, Object.assign({}, defaultProps, {
     selectedTime: defaultProps.selectedTime.unix(),
-    timeSliderScale: 60,
+    timeSliderScale: Scale.Hour,
     onChangeTimeSliderScale: function onChangeTimeSliderScale() {
       return null;
     }
@@ -17965,7 +19432,7 @@ var getDisplayText = function getDisplayText(currentAdagucTime) {
 };
 
 var ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION';
-var defaultxml2jsonrequestURL = 'http://localhost:10000/XML2JSON?';
+var ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO = 'ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO';
 
 var ReactMapView = /*#__PURE__*/function (_React$Component) {
   _inherits(ReactMapView, _React$Component);
@@ -18011,7 +19478,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
         layers.forEach(function (layer) {
           if (layer.enabled !== false) {
-            _this.parseWMJSLayer(layer, true, 'onlydims');
+            _this.parseWMJSLayer(layer, true);
           }
         });
       }, fetchSpeed);
@@ -18023,27 +19490,12 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    _this.parseWMJSLayer = function (wmLayer, forceReload, updateStrategy, child) {
+    _this.parseWMJSLayer = function (wmLayer, forceReload, child) {
       var callback = function callback() {
-        if (updateStrategy === 'all') {
-          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') {
-          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);
-        }
+        var _this$props = _this.props,
+            onUpdateLayerInformation = _this$props.onUpdateLayerInformation,
+            mapId = _this$props.mapId;
+        setServiceMetadata(wmLayer, mapId, _this.adaguc.webMapJS, _this.props, onUpdateLayerInformation);
 
         if (child) {
           if (wmLayer.hasError) {
@@ -18056,8 +19508,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         }
       };
 
-      var xml2jsonrequestURL = _this.props.xml2jsonrequestURL;
-      wmLayer.parseLayer(callback, forceReload, xml2jsonrequestURL);
+      wmLayer.parseLayer(callback, forceReload, 'ReactMapView parseWMJSLayer');
     };
 
     _this.state = {
@@ -18065,7 +19516,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     };
     _this.resize = _this.resize.bind(_assertThisInitialized(_this));
     _this.handleWindowResize = _this.handleWindowResize.bind(_assertThisInitialized(_this));
-    _this.drawDebounced = debounce(600, _this.drawDebounced);
+    _this.drawDebounced = debounce$1(600, _this.drawDebounced);
     _this.checkNewProps = _this.checkNewProps.bind(_assertThisInitialized(_this));
     _this.checkAdaguc = _this.checkAdaguc.bind(_assertThisInitialized(_this));
     _this.onAfterSetBBoxListener = _this.onAfterSetBBoxListener.bind(_assertThisInitialized(_this));
@@ -18080,11 +19531,11 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   _createClass(ReactMapView, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props3 = this.props,
-          onMount = _this$props3.onMount,
-          mapId = _this$props3.mapId,
-          onRegisterAdaguc = _this$props3.onRegisterAdaguc,
-          shouldAutoFetch = _this$props3.shouldAutoFetch;
+      var _this$props2 = this.props,
+          onMount = _this$props2.onMount,
+          mapId = _this$props2.mapId,
+          onRegisterAdaguc = _this$props2.onRegisterAdaguc,
+          shouldAutoFetch = _this$props2.shouldAutoFetch;
       this.checkAdaguc();
       this.checkNewProps(null, this.props);
       window.addEventListener('resize', this.handleWindowResize);
@@ -18106,9 +19557,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props4 = this.props,
-          onUnMount = _this$props4.onUnMount,
-          mapId = _this$props4.mapId;
+      var _this$props3 = this.props,
+          onUnMount = _this$props3.onUnMount,
+          mapId = _this$props3.mapId;
       window.removeEventListener('resize', this.handleWindowResize);
       onUnMount(mapId, this.adaguc.webMapJS);
       this.adaguc.webMapJS.getListener().suspendEvents();
@@ -18116,6 +19567,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
       if (typeof this.adaguc.webMapJS.stopAnimating === 'function') {
         this.adaguc.webMapJS.stopAnimating();
         this.adaguc.webMapJS.destroy();
+        this.adaguc.webMapJSCreated = false;
       }
 
       this.clearRefetchTimer();
@@ -18123,9 +19575,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onDimChangeListener",
     value: function onDimChangeListener() {
-      var _this$props5 = this.props,
-          mapId = _this$props5.mapId,
-          onMapChangeDimension = _this$props5.onMapChangeDimension;
+      var _this$props4 = this.props,
+          mapId = _this$props4.mapId,
+          onMapChangeDimension = _this$props4.onMapChangeDimension;
 
       if (this.adaguc && this.adaguc.webMapJS) {
         var timeDimension = this.adaguc.webMapJS.getDimension('time');
@@ -18147,9 +19599,9 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     value: function onAfterSetBBoxListener(wmjsMap) {
       var _this2 = this;
 
-      var _this$props6 = this.props,
-          mapId = _this$props6.mapId,
-          onMapZoomEnd = _this$props6.onMapZoomEnd;
+      var _this$props5 = this.props,
+          mapId = _this$props5.mapId,
+          onMapZoomEnd = _this$props5.onMapZoomEnd;
       /* Update the map after 100 ms */
 
       window.setTimeout(function () {
@@ -18314,8 +19766,6 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
           this.adaguc.webMapJS.showLayerInfo = props.showLayerInfo;
         }
       }
-      /* Check children */
-
 
       var children = props.children;
 
@@ -18354,23 +19804,29 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
               wmjsLayers[l].remove();
               /* Trigger update of all map dimensions */
 
-              var onMapUpdateAllDimensions = props.onMapUpdateAllDimensions,
+              var onUpdateLayerInformation = props.onUpdateLayerInformation,
                   mapId = props.mapId;
-              onMapUpdateAllDimensions && onMapUpdateAllDimensions({
-                origin: origin,
-                mapId: mapId,
-                dimensions: _this3.adaguc.webMapJS.mapdimensions.map(function (_ref) {
-                  var name = _ref.name,
-                      units = _ref.units,
-                      currentValue = _ref.currentValue,
-                      synced = _ref.synced;
-                  return {
-                    name: name,
-                    units: units,
-                    currentValue: currentValue,
-                    synced: synced
-                  };
-                })
+              onUpdateLayerInformation && onUpdateLayerInformation({
+                origin: ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO,
+                serviceLayers: null,
+                layerStyle: null,
+                layerDimensions: null,
+                mapDimensions: {
+                  origin: origin,
+                  mapId: mapId,
+                  dimensions: _this3.adaguc.webMapJS.mapdimensions.map(function (_ref) {
+                    var name = _ref.name,
+                        units = _ref.units,
+                        currentValue = _ref.currentValue,
+                        synced = _ref.synced;
+                    return {
+                      name: name,
+                      units: units,
+                      currentValue: currentValue,
+                      synced: synced
+                    };
+                  })
+                }
               });
 
               _this3.checkNewProps(prevProps, props);
@@ -18478,9 +19934,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                   }
 
                   if (!isBaselayer) {
-                    newWMLayer.reactWebMapJSLayer = child;
-
-                    _this3.parseWMJSLayer(newWMLayer, false, 'all', child);
+                    _this3.parseWMJSLayer(newWMLayer, false, child);
                   }
 
                   needsRedraw = true;
@@ -18488,7 +19942,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 () {
-                      _this3.parseWMJSLayer(wmLayer, false, 'all', child);
+                      _this3.parseWMJSLayer(wmLayer, false, child);
                     });
                     needsRedraw = true;
                   }
@@ -18592,13 +20046,12 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     value: function checkAdaguc() {
       var _this4 = this;
 
-      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;
+      var _this$props6 = this.props,
+          mapId = _this$props6.mapId,
+          listeners = _this$props6.listeners,
+          srs = _this$props6.srs,
+          bbox = _this$props6.bbox,
+          onMapPinChangeLocation = _this$props6.onMapPinChangeLocation;
 
       if (this.adaguc.webMapJSCreated) {
         return;
@@ -18611,7 +20064,6 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
       registerWMJSMap(this.adaguc.webMapJS, mapId);
       this.adaguc.webMapJS.removeAllLayers();
-      this.adaguc.webMapJS.setXML2JSONURL(xml2jsonrequestURL);
       this.adaguc.webMapJS.setProjection(srs, new WMBBOX(bbox));
       this.adaguc.webMapJS.setWMTileRendererTileSettings(tileRenderSettings);
 
@@ -18670,10 +20122,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props8 = this.props,
-          passiveMap = _this$props8.passiveMap,
-          children = _this$props8.children,
-          onClick = _this$props8.onClick;
+      var _this$props7 = this.props,
+          passiveMap = _this$props7.passiveMap,
+          children = _this$props7.children,
+          onClick = _this$props7.onClick;
       var adagucInitialised = this.state.adagucInitialised;
       var featureLayers = getFeatureLayers(children);
       return /*#__PURE__*/React.createElement("div", {
@@ -18744,7 +20196,6 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 ReactMapView.defaultProps = {
-  xml2jsonrequestURL: defaultxml2jsonrequestURL,
   srs: 'EPSG:3857',
   bbox: {
     left: -2324980.5498391856,
@@ -18763,22 +20214,7 @@ ReactMapView.defaultProps = {
   onMapChangeDimension: function onMapChangeDimension() {
     /* nothing */
   },
-  onMapUpdateAllDimensions: function onMapUpdateAllDimensions() {
-    /* nothing */
-  },
-  onLayerChangeStyle: function onLayerChangeStyle() {
-    /* nothing */
-  },
-  onLayerChangeDimension: function onLayerChangeDimension() {
-    /* nothing */
-  },
-  onLayerSetDimensions: function onLayerSetDimensions() {
-    /* nothing */
-  },
-  onServiceSetLayers: function onServiceSetLayers() {
-    /* nothing */
-  },
-  onLayerSetStyles: function onLayerSetStyles() {
+  onUpdateLayerInformation: function onUpdateLayerInformation() {
     /* nothing */
   },
   onMapZoomEnd: function onMapZoomEnd() {
@@ -18932,6 +20368,7 @@ var MapView = function MapView(_a) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
+var ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION';
 /**
  * Connected component used to display the map and selected layers.
  * Includes options to disable the map controls and legend.
@@ -18980,29 +20417,28 @@ var MapViewConnect = function MapViewConnect(_a) {
     return getPinLocation(store, mapId);
   });
   var dispatch = useDispatch();
+  var map = getWMJSMapById(mapId);
   var mapChangeDimension$1 = React.useCallback(function (mapDimensionPayload) {
-    return dispatch(mapChangeDimension(mapDimensionPayload));
-  }, [dispatch]);
+    if (mapDimensionPayload.dimension) {
+      var dimension = map.getDimension(mapDimensionPayload.dimension.name);
+
+      if (dimension && dimension.currentValue === mapDimensionPayload.dimension.currentValue) {
+        return;
+      }
+    }
+
+    dispatch(mapChangeDimension(mapDimensionPayload));
+  }, [dispatch, map]);
   var setTime$1 = React.useCallback(function (setTimePayload) {
-    return dispatch(setTime(setTimePayload));
-  }, [dispatch]);
-  var layerChangeStyle$1 = React.useCallback(function (payload) {
-    return dispatch(layerChangeStyle(payload));
-  }, [dispatch]);
-  var layerChangeDimension$1 = React.useCallback(function (payload) {
-    return dispatch(layerChangeDimension(payload));
-  }, [dispatch]);
-  var layerSetDimensions$1 = React.useCallback(function (payload) {
-    return dispatch(layerSetDimensions(payload));
-  }, [dispatch]);
-  var mapUpdateAllDimensions = React.useCallback(function (payload) {
-    return dispatch(mapUpdateAllMapDimensions(payload));
-  }, [dispatch]);
-  var serviceSetLayers$1 = React.useCallback(function (payload) {
-    return dispatch(serviceSetLayers(payload));
-  }, [dispatch]);
-  var layerSetStyles$1 = React.useCallback(function (payload) {
-    return dispatch(layerSetStyles(payload));
+    /* Check if the map not already has this value set, otherwise this component will re-render */
+    if (map.getDimension('time').currentValue === setTimePayload.value) {
+      return;
+    }
+
+    dispatch(setTime(setTimePayload));
+  }, [dispatch, map]);
+  var updateLayerInformation = React.useCallback(function (payload) {
+    dispatch(onUpdateLayerInformation(payload));
   }, [dispatch]);
   var registerMap$1 = React.useCallback(function (payload) {
     return dispatch(registerMap(payload));
@@ -19046,7 +20482,7 @@ var MapViewConnect = function MapViewConnect(_a) {
     },
     srs: srs,
     bbox: bbox,
-    mapPinLocation: displayMapPin && Object.keys(mapPinLocation).length ? mapPinLocation : null,
+    mapPinLocation: displayMapPin && mapPinLocation,
     dimensions: mapDimensions,
     activeLayerId: activeLayerId,
     animationDelay: animationDelay,
@@ -19055,33 +20491,14 @@ var MapViewConnect = function MapViewConnect(_a) {
       if (mapDimensionPayload && mapDimensionPayload.dimension && mapDimensionPayload.dimension.name && mapDimensionPayload.dimension.name === 'time') {
         setTime$1({
           sourceId: mapId,
-          origin: "".concat(mapDimensionPayload.origin, "==> MapViewConnect, 184"),
+          origin: "".concat(mapDimensionPayload.origin, "==> ").concat(ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION),
           value: handleMomentISOString(mapDimensionPayload.dimension.currentValue)
         });
       } else {
         mapChangeDimension$1(mapDimensionPayload);
       }
     },
-    onMapUpdateAllDimensions: function onMapUpdateAllDimensions(mapDimensionPayload) {
-      /* Always update all dimensions */
-      mapUpdateAllDimensions(mapDimensionPayload);
-      /* Additionally trigger the setTime action */
-
-      mapDimensionPayload.dimensions.forEach(function (dimension) {
-        if (dimension.name && dimension.name === 'time') {
-          setTime$1({
-            sourceId: mapId,
-            origin: 'MapViewConnect, 220',
-            value: handleMomentISOString(dimension.currentValue)
-          });
-        }
-      });
-    },
-    onLayerChangeStyle: layerChangeStyle$1,
-    onLayerChangeDimension: layerChangeDimension$1,
-    onLayerSetDimensions: layerSetDimensions$1,
-    onServiceSetLayers: serviceSetLayers$1,
-    onLayerSetStyles: layerSetStyles$1,
+    onUpdateLayerInformation: updateLayerInformation,
     onMapPinChangeLocation: mapPinChangeLocation,
     onMapZoomEnd: function onMapZoomEnd(a) {
       genericSetBbox({
@@ -19377,12 +20794,14 @@ var LegendDialog = function LegendDialog(_ref) {
       _ref$showMapId = _ref.showMapId,
       showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
       _ref$order = _ref.order,
-      order = _ref$order === void 0 ? 0 : _ref$order;
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source;
   var classes = useStyles$5();
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     startPosition: {
       right: 20,
-      top: 20
+      top: 50
     },
     minWidth: 100,
     onClose: onClose,
@@ -19393,7 +20812,8 @@ var LegendDialog = function LegendDialog(_ref) {
     "data-testid": "moveable-legend",
     bounds: "parent",
     onMouseDown: onMouseDown,
-    order: order
+    order: order,
+    source: source
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.legendContainer
   }, layers && layers.length > 0 ? /*#__PURE__*/React.createElement("div", {
@@ -19433,7 +20853,9 @@ var LegendDialog = function LegendDialog(_ref) {
 
 var LegendConnectComponent = function LegendConnectComponent(_ref) {
   var _ref$showMapId = _ref.showMapId,
-      showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId;
+      showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
   var initialActiveMapId = useSelector(function (store) {
     return getFirstMapId(store);
@@ -19451,6 +20873,9 @@ var LegendConnectComponent = function LegendConnectComponent(_ref) {
   var uiOrder = useSelector(function (store) {
     return getDialogOrder(store, 'legend');
   });
+  var uiSource = useSelector(function (store) {
+    return getDialogSource(store, 'legend');
+  });
   var uiIsOrderedOnTop = useSelector(function (store) {
     return getDialogIsOrderedOnTop(store, 'legend');
   });
@@ -19465,9 +20890,10 @@ var LegendConnectComponent = function LegendConnectComponent(_ref) {
   var registerDialog$1 = React.useCallback(function (setOpen) {
     return dispatch(registerDialog({
       type: 'legend',
-      setOpen: setOpen
+      setOpen: setOpen,
+      source: source
     }));
-  }, [dispatch]);
+  }, [dispatch, source]);
   var unregisterDialog$1 = React.useCallback(function () {
     return dispatch(unregisterDialog({
       type: 'legend'
@@ -19494,7 +20920,8 @@ var LegendConnectComponent = function LegendConnectComponent(_ref) {
     mapId: mapId,
     showMapId: showMapId,
     onMouseDown: onOrderDialog,
-    order: uiOrder
+    order: uiOrder,
+    source: uiSource
   });
 };
 /**
@@ -19504,6 +20931,7 @@ var LegendConnectComponent = function LegendConnectComponent(_ref) {
  *
  * Expects the following props:
  * @param {boolean} showMapId (optional) showMapId: boolean - show the id of the map in the dialog title of which the legend is shown in te dialog
+ * @param {Source} source (optional) source: Source - default is 'app', 'module' makes sure it will be shown on top of the module
 
  * ``` <LegendConnect legendDialogId={legendDialogId} />```
  */
@@ -19537,7 +20965,9 @@ var LegendConnect = function LegendConnect(_a) {
  * */
 
 var LegendMapButtonConnect = function LegendMapButtonConnect(_ref) {
-  var mapId = _ref.mapId;
+  var mapId = _ref.mapId,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
   var currentActiveMapId = useSelector(function (store) {
     return getDialogMapId(store, 'legend');
@@ -19549,9 +20979,10 @@ var LegendMapButtonConnect = function LegendMapButtonConnect(_ref) {
     dispatch(setActiveMapIdForDialog({
       type: 'legend',
       activeMapId: mapId,
-      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: source
     }));
-  }, [currentActiveMapId, dispatch, isOpenInStore, mapId]);
+  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
   var isOpen = currentActiveMapId === mapId && isOpenInStore;
   return /*#__PURE__*/React.createElement(MapControlButton, {
     title: "Legend",
@@ -19608,22 +21039,6 @@ var generateUniqueLayerIds = function generateUniqueLayerIds(layers, activeLayer
   };
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
 var useStyles$4 = makeStyles(function (theme) {
   return {
     mapTitle: {
@@ -19658,6 +21073,8 @@ var ConfigurableConnectedMap = function ConfigurableConnectedMap(_ref) {
       activeLayerId = _ref.activeLayerId,
       _ref$baseLayer = _ref.baseLayer,
       baseLayer = _ref$baseLayer === void 0 ? baseLayerGrey$1 : _ref$baseLayer,
+      _ref$overLayers = _ref.overLayers,
+      overLayers = _ref$overLayers === void 0 ? [overLayer$1] : _ref$overLayers,
       bbox = _ref.bbox,
       srs = _ref.srs,
       _ref$displayTimeInMap = _ref.displayTimeInMap,
@@ -19681,6 +21098,11 @@ var ConfigurableConnectedMap = function ConfigurableConnectedMap(_ref) {
   var mapId = React__default.useRef(id || generateMapId()).current;
   var baseLayerWithUniqueId = Object.assign(Object.assign({}, baseLayer), {
     id: "baseLayer-".concat(mapId)
+  });
+  var overLayersWithUniqueId = overLayers.map(function (layer) {
+    return Object.assign(Object.assign({}, layer), {
+      id: generateLayerId()
+    });
   }); // make sure all layers have a unique id before going forward
 
   var _generateUniqueLayerI = generateUniqueLayerIds(layers, activeLayerId),
@@ -19701,9 +21123,7 @@ var ConfigurableConnectedMap = function ConfigurableConnectedMap(_ref) {
 
     dispatch(setBaseLayers({
       mapId: mapId,
-      layers: [baseLayerWithUniqueId, Object.assign(Object.assign({}, overLayer$1), {
-        id: generateLayerId()
-      })]
+      layers: [baseLayerWithUniqueId].concat(_toConsumableArray(overLayersWithUniqueId))
     })); // bbox
 
     dispatch(setBbox$1({
@@ -20113,6 +21533,8 @@ var ConfigurableMapWithSliderConnect = function ConfigurableMapWithSliderConnect
       layers = _ref.layers,
       _ref$baseLayer = _ref.baseLayer,
       baseLayer = _ref$baseLayer === void 0 ? undefined : _ref$baseLayer,
+      _ref$overLayers = _ref.overLayers,
+      overLayers = _ref$overLayers === void 0 ? undefined : _ref$overLayers,
       _ref$activeLayerId = _ref.activeLayerId,
       activeLayerId = _ref$activeLayerId === void 0 ? undefined : _ref$activeLayerId,
       _ref$shouldAutoUpdate = _ref.shouldAutoUpdate,
@@ -20146,6 +21568,7 @@ var ConfigurableMapWithSliderConnect = function ConfigurableMapWithSliderConnect
     layers: layers || [],
     activeLayerId: activeLayerId,
     baseLayer: baseLayer,
+    overLayers: overLayers,
     bbox: bbox,
     srs: srs,
     shouldAutoUpdate: shouldAutoUpdate,
@@ -20367,7 +21790,8 @@ var SyncGroupList = function SyncGroupList(_ref) {
         return addNewGroup(groupObject.id);
       } : function () {
         return removeGroup(groupObject.id);
-      }
+      },
+      size: "large"
     }, index === 0 ? /*#__PURE__*/React.createElement(Add, {
       className: classes.iconColor
     }) : /*#__PURE__*/React.createElement(DeleteForever, {
@@ -20886,4 +22310,4 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
   }, children)));
 };
 
-export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmRefTimePreset, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, TooltipSelect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultConfigurations, 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 };
+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, 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 };