@opengeoweb/core 2.1.2 → 2.1.3

package/core.esm.js

@@ -3,16 +3,16 @@ 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 { 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, Switch, ListItemSecondaryAction, Slider, FormControlLabel, Popover, useMediaQuery, useTheme } from '@material-ui/core';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { sliderStyles, CustomSlider, ToolContainerDraggable, useIsMounted } from '@opengeoweb/shared';
-import _ from 'lodash';
-import { Cached, Add, MoreVert, FileCopy, Delete, DragIndicator, ChevronLeft, ChevronRight, Link, LinkOff, DeleteForever } from '@material-ui/icons';
+import _, { debounce } from 'lodash';
+import { Cached, Add, MoreVert, FileCopy, Delete, DragIndicator, Close, ChevronLeft, ChevronRight, Link, LinkOff, DeleteForever } from '@material-ui/icons';
 import { Sortable, ReactSortable } from 'react-sortablejs';
 import { ToggleButton } from '@material-ui/lab';
-import { debounce } from 'throttle-debounce';
+import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
 import proj4 from 'proj4';
 import { createStore, DynamicModuleLoader } from 'redux-dynamic-modules';
@@ -1680,12 +1680,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:
@@ -2588,9 +2606,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;
 };
@@ -2632,25 +2667,6 @@ var getServiceLayersByName = function getServiceLayersByName(store, serviceName)
 
   return null;
 };
-/**
- * Gets all keywords from services
- *
- *   const keywords = useSelector((store) => mapSelectors.getKeywords(store));
- * @param {object} store store: object - Store object
- * @returns {array} returnType: Keyword[]
- */
-
-var getKeywords = createSelector(servicesStore, function (store) {
-  var keywords = store ? store.allIds.flatMap(function (id) {
-    return store.byId[id].layers.flatMap(function (layer) {
-      return layer.keywords;
-    });
-  }) : null;
-
-  var uniqueKeywords = _toConsumableArray(new Set(keywords));
-
-  return uniqueKeywords;
-});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2728,8 +2744,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getAvailableBaseLayersForMap: getAvailableBaseLayersForMap,
   getServiceIds: getServiceIds,
   getServices: getServices,
-  getServiceLayersByName: getServiceLayersByName,
-  getKeywords: getKeywords
+  getServiceLayersByName: getServiceLayersByName
 });
 
 /* *
@@ -2833,8 +2848,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) {
@@ -4463,9 +4478,9 @@ 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, onMapUpdateAllDimensions, onLayerChangeStyle, onServiceSetLayers, onLayerSetStyles, onLayerSetDimensions) {
   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) {
@@ -4542,20 +4557,20 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, xml2jsonreq
   };
 
   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 +4610,7 @@ function setTimeSaga(_ref) {
           return _context.stop();
       }
     }
-  }, _marked$3);
+  }, _marked$4);
 }
 function setBBoxSaga(_ref2) {
   var payload, targets, groups;
@@ -4622,7 +4637,7 @@ function setBBoxSaga(_ref2) {
           return _context2.stop();
       }
     }
-  }, _marked2$3);
+  }, _marked2$4);
 }
 function layerActionsSaga(_ref3) {
   var payload, type, targets;
@@ -4837,7 +4852,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 +4912,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 +4982,7 @@ function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdat
           return _context.stop();
       }
     }
-  }, _marked$2);
+  }, _marked$3);
 }
 function addGroupTargetSaga(_ref) {
   var payload, groupId, linked, targetToUpdate;
@@ -4991,7 +5006,7 @@ function addGroupTargetSaga(_ref) {
           return _context2.stop();
       }
     }
-  }, _marked2$2);
+  }, _marked2$3);
 }
 function linkGroupTargetSaga(_ref2) {
   var payload, groupId, linked, targetToUpdate;
@@ -5018,7 +5033,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 +5074,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$J = makeStyles(function (theme) {
   return {
     select: {
       '& ul': {
@@ -5117,7 +5132,7 @@ var TooltipSelect = function TooltipSelect(_a) {
       tooltipOpen = _React$useState4[0],
       setTooltipOpen = _React$useState4[1];
 
-  var classes = useStyles$E();
+  var classes = useStyles$J();
 
   var preventDefault = function preventDefault(event) {
     event.preventDefault();
@@ -5261,12 +5276,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 +5312,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 +5322,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 +5469,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 +5492,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 +5566,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 +5609,7 @@ var uiModuleConfig = {
   reducerMap: {
     ui: reducer$3
   },
-  sagas: [rootSaga$1]
+  sagas: [rootSaga$2]
 };
 
 /**
@@ -6280,13 +6303,13 @@ var reducer$1 = function reducer() {
   }
 };
 
-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 +6359,7 @@ function startAnimationSaga(_ref) {
           return _context.stop();
       }
     }
-  }, _marked);
+  }, _marked$1);
 }
 function stopAnimationSaga(_ref2) {
   var payload, mapId;
@@ -6354,7 +6377,7 @@ function stopAnimationSaga(_ref2) {
           return _context2.stop();
       }
     }
-  }, _marked2);
+  }, _marked2$1);
 }
 function deleteLayerSaga(_ref3) {
   var payload, mapId, layers;
@@ -6620,7 +6643,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) {
@@ -6675,28 +6698,14 @@ 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: '',
+    keywords: [],
+    addedServices: []
   }
 };
 var reducer = function reducer() {
@@ -6712,11 +6721,171 @@ var reducer = function reducer() {
         });
       }
 
+    case 'LAYER_SELECT_ADD_NEW_KEYWORDS':
+      {
+        return produce(state, function (draft) {
+          var _action$payload = action.payload,
+              serviceName = _action$payload.serviceName,
+              keywords = _action$payload.keywords; // If store does not contain keywords from a service, add keywords and service Name
+
+          if (!draft.filters.addedServices.includes(serviceName)) {
+            draft.filters.addedServices.push(serviceName);
+
+            var _iterator = _createForOfIteratorHelper(keywords),
+                _step;
+
+            try {
+              var _loop = function _loop() {
+                var keyword = _step.value;
+                var foundObject = draft.filters.keywords.find(function (object) {
+                  return object.id === keyword;
+                });
+
+                if (foundObject) {
+                  foundObject.amount += 1;
+                  foundObject.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();
+            }
+          }
+        });
+      }
+
     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_ADD_NEW_KEYWORDS = 'LAYER_SELECT_ADD_NEW_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
+  };
+};
+/**
+ * Sets the given keywords to Layer Select store
+ *
+ * Example: addNewKeywords({ keywords: ['keyword1', 'keyword2'] })
+ * @param {string[]} payload { keywords: string[] }
+ */
+
+var addNewKeywords = function addNewKeywords(payload) {
+  return {
+    type: LAYER_SELECT_ADD_NEW_KEYWORDS,
+    payload: payload
+  };
+};
+
+var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
+    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
+function newServiceAddedSaga(capturedAction) {
+  var addedService, serviceName, keywords;
+  return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          addedService = capturedAction.payload;
+          serviceName = addedService.name;
+          keywords = addedService.layers.reduce(function (keywordAccumulator, layer) {
+            if (!layer.keywords) {
+              return keywordAccumulator;
+            }
+
+            return keywordAccumulator.concat(layer.keywords);
+          }, []);
+
+          if (!(keywords.length > 0)) {
+            _context.next = 6;
+            break;
+          }
+
+          _context.next = 6;
+          return put(addNewKeywords({
+            serviceName: serviceName,
+            keywords: keywords
+          }));
+
+        case 6:
+        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.
@@ -6737,7 +6906,8 @@ var layerSelectConfig = {
   id: 'layerSelect-module',
   reducerMap: {
     layerSelect: reducer
-  }
+  },
+  sagas: [rootSaga]
 };
 
 /* *
@@ -7737,7 +7907,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$D = makeStyles({
+var useStyles$I = makeStyles({
   buttonDiv: {
     position: 'relative'
   },
@@ -7773,7 +7943,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$I();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -7925,7 +8095,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var useStyles$C = makeStyles(function (theme) {
+var useStyles$H = makeStyles(function (theme) {
   return {
     buttonDiv: {
       position: 'relative'
@@ -7960,7 +8130,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$H();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8085,7 +8255,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$G = makeStyles(function (theme) {
   return {
     button: {
       width: '24px',
@@ -8102,7 +8272,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$G();
   var currentActiveMapId = useSelector(function (store) {
     return getDialogMapId(store, 'layerSelect');
   });
@@ -8144,7 +8314,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$F = makeStyles({
   row: {
     height: '32px'
   },
@@ -8168,7 +8338,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$F();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -8420,7 +8590,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$E = makeStyles(function (theme) {
   return createStyles({
     button: {
       height: 28,
@@ -8479,7 +8649,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$E({
     isActive: isActive,
     isEnabled: isEnabled
   });
@@ -8516,7 +8686,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$D = makeStyles(function (theme) {
   return createStyles({
     checkbox: {
       color: 'inherit',
@@ -8539,7 +8709,7 @@ var EnableLayer = function EnableLayer(_ref) {
   var isEnabled = _ref.isEnabled,
       title = _ref.title,
       onChangeEnableLayer = _ref.onChangeEnableLayer;
-  var classes = useStyles$y(isEnabled);
+  var classes = useStyles$D(isEnabled);
 
   var onClick = function onClick() {
     onChangeEnableLayer(!isEnabled);
@@ -8595,7 +8765,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$C = makeStyles(function (theme) {
   return createStyles({
     dropdownEmpty: {
       paddingLeft: 8,
@@ -8618,7 +8788,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$C();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
   if (!layers || !layers.length) {
@@ -8675,7 +8845,7 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var useStyles$w = makeStyles(function (theme) {
+var useStyles$B = makeStyles(function (theme) {
   return {
     opacityDiv: {
       height: 'calc(100% - 5px)',
@@ -8736,7 +8906,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$B();
   var sliderClasses = sliderStyles();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
@@ -8848,7 +9018,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$A = makeStyles(function (theme) {
   return createStyles({
     icon: {
       minWidth: 32,
@@ -8865,7 +9035,7 @@ var MenuItemButton = function MenuItemButton(_ref) {
   var title = _ref.title,
       tooltipTitle = _ref.tooltipTitle,
       icon = _ref.icon;
-  var classes = useStyles$v();
+  var classes = useStyles$A();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItemIcon, {
     className: "".concat(classes.icon, " icon")
   }, icon), /*#__PURE__*/React.createElement(Tooltip, {
@@ -8877,7 +9047,7 @@ var MenuItemButton = function MenuItemButton(_ref) {
   }, title)));
 };
 
-var useStyles$u = makeStyles(function (theme) {
+var useStyles$z = makeStyles(function (theme) {
   return {
     menu: {
       backgroundColor: theme.palette.geowebColors.background.surface,
@@ -8895,7 +9065,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$z();
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9020,7 +9190,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$y = makeStyles(function () {
   return createStyles({
     icon: {
       width: 20,
@@ -9034,7 +9204,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$y();
   return /*#__PURE__*/React.createElement(LayerManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickDelete,
@@ -9062,7 +9232,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$x = makeStyles(function (theme) {
   return createStyles({
     icon: {
       width: 18,
@@ -9099,7 +9269,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$x({
     isActive: isActive,
     isEnabled: isEnabled
   });
@@ -9148,7 +9318,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$w = makeStyles(function (theme) {
   return createStyles({
     row: {
       background: function background(isEnabled) {
@@ -9199,7 +9369,7 @@ var LayerRow = function LayerRow(_ref) {
       layerActiveLayout = _ref.layerActiveLayout,
       layerManagerWidth = _ref.layerManagerWidth,
       dragHandle = _ref.dragHandle;
-  var classes = useStyles$r(isEnabled);
+  var classes = useStyles$w(isEnabled);
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
   var onClickRow = function onClickRow() {
@@ -9778,7 +9948,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$v = makeStyles(function (theme) {
   return {
     dragHandle: {
       cursor: 'grab',
@@ -9801,7 +9971,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$v({
     isDisabled: isDisabled
   });
   var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
@@ -9818,7 +9988,7 @@ var DragHandle = function DragHandle(_ref2) {
   });
 };
 
-var useStyles$p = makeStyles(function () {
+var useStyles$u = makeStyles(function () {
   return {
     layerRows: {
       width: '100%',
@@ -9885,7 +10055,7 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
 
   var isSorting = activeDragIndex !== null;
   var isDragDisabled = layerIds.length === 1;
-  var classes = useStyles$p(isSorting);
+  var classes = useStyles$u(isSorting);
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
@@ -10095,7 +10265,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$t = makeStyles({
   layerRow: {
     width: '100%',
     height: '36px'
@@ -10118,7 +10288,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$t();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -10147,7 +10317,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
   })));
 };
 
-var useStyles$n = makeStyles({
+var useStyles$s = makeStyles({
   layerRowContainer: {
     position: 'relative',
     width: '100%',
@@ -10182,7 +10352,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$s();
 
   var _React$useState = React.useState(LayerManagerWidth.lg),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -10239,73 +10409,551 @@ var LayerManager = function LayerManager(_ref) {
   }))));
 };
 
-var useStyles$m = makeStyles(function (theme) {
-  return {
-    iconButton: {
-      color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
-    }
-  };
-});
-var clearIconPath = 'M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M15.44426,7.26697571 L12.0002861,10.7110482 L8.55573996,7.26697571 C8.19978253,6.9110081 7.62292549,6.9110081 7.26696807,7.26697571 C6.91101064,7.62294331 6.91101064,8.19981687 7.26696807,8.55578447 L10.7115142,11.9998569 L7.26696807,15.4445017 C6.91101064,15.8004693 6.91101064,16.3767705 7.26696807,16.7333104 C7.44494678,16.910722 7.67843653,17 7.91192629,17 C8.14484377,17 8.37776125,16.910722 8.55573996,16.7333104 L12.0002861,13.289238 L15.44426,16.7333104 C15.6222388,16.910722 15.8551562,17 16.088646,17 C16.3221357,17 16.5550532,16.910722 16.7330319,16.7333104 C17.0889894,16.3767705 17.0889894,15.8004693 16.7330319,15.4445017 L13.289058,11.9998569 L16.7330319,8.55578447 C17.0889894,8.19981687 17.0889894,7.62294331 16.7330319,7.26697571 C16.3770745,6.9110081 15.8002175,6.9110081 15.44426,7.26697571 Z';
-var clearIcon = /*#__PURE__*/React.createElement(SvgIcon, {
-  style: {
-    width: '24px',
-    height: '24px'
-  },
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React.createElement("path", {
-  d: clearIconPath
-}));
-var searchIconPath = 'M7.81701445,12.5845372 L7.81701445,12.5845372 C7.17924024,11.946763 6.82932049,11.100321 6.82932049,10.1993044 C6.82932049,9.29828785 7.17924024,8.45077582 7.81701445,7.8140717 C8.47405029,7.15703585 9.3376137,6.82851792 10.2022472,6.82851792 C11.0658106,6.82851792 11.929374,7.15703585 12.5874799,7.8140717 C13.9026217,9.12921348 13.9026217,11.2693954 12.5874799,12.5845372 C11.9497057,13.2212413 11.1021937,13.5722311 10.2022472,13.5722311 C9.3012306,13.5722311 8.45371857,13.2212413 7.81701445,12.5845372 M19.5858748,17.581862 L15.4681648,13.465222 C16.9513109,11.0735688 16.6613162,7.88683788 14.5874799,5.81300161 C12.1690744,3.39566613 8.23434992,3.39566613 5.81594436,5.81300161 C4.64419476,6.9847512 4,8.54280364 4,10.1993044 C4,11.8558052 4.64419476,13.4138577 5.81594436,14.5845372 C6.98769395,15.7562868 8.5446763,16.4015516 10.2022472,16.4015516 C11.376137,16.4015516 12.4965222,16.0719636 13.4681648,15.4662921 L17.5837346,19.582932 C17.8608882,19.8590155 18.2225789,19.9970572 18.5853398,19.9970572 C18.9470305,19.9970572 19.3087212,19.8590155 19.5858748,19.582932 C20.1380417,19.029695 20.1380417,18.135099 19.5858748,17.581862';
-var searchIcon = /*#__PURE__*/React.createElement(SvgIcon, {
-  style: {
-    width: '24px',
-    height: '24px'
-  },
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React.createElement("path", {
-  d: searchIconPath
-}));
-
-var SearchField = function SearchField() {
-  var _React$useState = React.useState(''),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      searchString = _React$useState2[0],
-      setSearchString = _React$useState2[1];
-
-  var classes = useStyles$m();
-  return /*#__PURE__*/React.createElement(TextField, {
-    variant: "filled",
-    label: "Search through services or enter a service URL",
-    value: searchString,
-    onChange: function onChange(e) {
-      return setSearchString(e.target.value);
-    },
-    autoFocus: true,
-    fullWidth: true,
-    InputProps: {
-      endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
-        position: "end"
-      }, searchString ? /*#__PURE__*/React.createElement(Tooltip, {
-        title: "Clear",
-        placement: "top"
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        className: classes.iconButton,
-        edge: "end",
-        onClick: function onClick() {
-          return setSearchString('');
-        }
-      }, clearIcon)) : /*#__PURE__*/React.createElement(Tooltip, {
-        title: "Search",
-        placement: "top"
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        className: classes.iconButton,
-        edge: "end"
-      }, searchIcon)))
-    }
-  });
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var useButtonStyles = makeStyles(function (theme) {
+  return createStyles({
+    button: {
+      height: '24px',
+      width: function width(_ref) {
+        var _width = _ref.width;
+        return _width ? "".concat(_width, "px") : '24px';
+      },
+      border: 0,
+      backgroundColor: theme.palette.geowebColors.buttons.surfaceIconDefault.fill,
+      borderRadius: '4.5px',
+      textTransform: 'none',
+      '& svg path, svg text': {
+        fill: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
+      },
+      '&:hover': {
+        backgroundColor: theme.palette.geowebColors.buttons.flatMouseover.fill
+      },
+      '&:disabled': {
+        backgroundColor: theme.palette.geowebColors.buttons.disabled.fill,
+        '& svg path, svg text': {
+          fill: theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
+        }
+      },
+      '&.Mui-selected': {
+        backgroundColor: theme.palette.geowebColors.buttons.primaryActive.fill,
+        '&:hover': {
+          backgroundColor: theme.palette.geowebColors.buttons.primaryMouseover.fill
+        },
+        '& svg': {
+          backgroundColor: 'transparent'
+        },
+        '& svg path, svg text': {
+          fill: theme.palette.geowebColors.typographyAndIcons.buttonIcon
+        }
+      }
+    }
+  });
+});
+
+var ToggleIconButton = function ToggleIconButton(_a) {
+  var active = _a.active,
+      width = _a.width,
+      children = _a.children,
+      props = __rest(_a, ["active", "width", "children"]);
+
+  var classes = useButtonStyles({
+    width: width
+  });
+  return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({
+    className: classes.button,
+    disableRipple: true,
+    selected: active,
+    value: 0
+  }, 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;
+};
+
+var getSearchFilter = createSelector(layerSelectStore, function (store) {
+  return store ? store.filters.searchFilter : '';
+});
+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 useStyles$r = makeStyles(function (theme) {
+  return createStyles({
+    dialogTitle: {
+      display: 'flex',
+      justifyContent: 'space-between'
+    },
+    textField: {
+      width: '100%'
+    },
+    button: {
+      '&.MuiButton-containedPrimary': {
+        backgroundColor: theme.palette.geowebColors.buttons.primary.fill
+      },
+      '&.MuiButton-outlined': {
+        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
+      }
+    },
+    container: {
+      '& .MuiDialog-paper': {
+        backgroundColor: theme.palette.geowebColors.cards.cardContainer
+      }
+    }
+  });
+});
+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;
+  var classes = useStyles$r();
+  return /*#__PURE__*/React.createElement(Dialog, {
+    open: isOpen,
+    disableBackdropClick: true,
+    hideBackdrop: hideBackdrop,
+    fullWidth: true,
+    maxWidth: "xs",
+    className: classes.container
+  }, /*#__PURE__*/React.createElement(DialogTitle, {
+    className: classes.dialogTitle,
+    disableTypography: true
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h5"
+  }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React.createElement(IconButton, {
+    size: "small",
+    onClick: closePopup,
+    "data-testid": "ClosePopupButtonCross"
+  }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(TextField, {
+    className: classes.textField,
+    variant: "filled",
+    label: "Service name"
+  })), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(TextField, {
+    className: classes.textField,
+    variant: "filled",
+    label: "Service URL",
+    defaultValue: url,
+    id: "service-url"
+  })), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(TextField, {
+    className: classes.textField,
+    variant: "filled",
+    multiline: true,
+    rows: 4,
+    label: "Abstracts",
+    helperText: "Short description of what this service does"
+  })), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "outlined",
+    className: classes.button,
+    onClick: closePopup,
+    "data-testid": "ClosePopupButtonCancel"
+  }, "cancel"), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    color: "primary",
+    className: classes.button
+  }, "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();
+    }
+  }, 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"
+  }, searchIcon));
+};
+
+var SearchField = function SearchField(_ref) {
+  var searchFilter = _ref.searchFilter,
+      setSearchFilter = _ref.setSearchFilter;
+
+  var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      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('');
+  };
+
+  return /*#__PURE__*/React.createElement(TextField, {
+    variant: "filled",
+    label: "Search through services or enter a service URL",
+    value: localSearchString,
+    onChange: function onChange(e) {
+      handleChange(e.target.value);
+    },
+    autoFocus: true,
+    fullWidth: true,
+    InputProps: {
+      endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
+        position: "end"
+      }, /*#__PURE__*/React.createElement(SearchFieldButtonContainer, {
+        localSearchString: localSearchString,
+        onClickClear: function onClickClear() {
+          setLocalSearchString('');
+          setSearchFilterDebounced('');
+        }
+      }))
+    }
+  });
+};
+
+/* *
+ * 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
+  });
+};
+
+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;
+  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 + services[serviceId].layers.length;
+    }, 0));
+  }, [serviceIds, services]);
+  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 services[serviceId].layers.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 allServiceIds = useSelector(function (store) {
+    return getServiceIds(store);
+  });
+  var allServices = useSelector(function (store) {
+    return getServices(store);
+  });
+  return /*#__PURE__*/React.createElement(LayerList, {
+    services: allServices,
+    serviceIds: allServiceIds,
+    layerSelectHeight: layerSelectHeight
+  });
 };
 
 /* *
@@ -10324,7 +10972,7 @@ 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',
@@ -10348,7 +10996,7 @@ var ServiceChip = function ServiceChip(_ref) {
   var _ref$all = _ref.all,
       all = _ref$all === void 0 ? false : _ref$all,
       service = _ref.service;
-  var classes = useStyles$l();
+  var classes = useStyles$o();
 
   if (all) {
     return /*#__PURE__*/React.createElement("div", {
@@ -10369,7 +11017,7 @@ var ServiceChip = function ServiceChip(_ref) {
   });
 };
 
-var useStyles$k = makeStyles(function (theme) {
+var useStyles$n = makeStyles(function (theme) {
   return createStyles({
     serviceChips: {
       width: '100%',
@@ -10377,22 +11025,36 @@ 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;
+      }
     },
     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 +11068,9 @@ 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;
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -10422,16 +11083,21 @@ 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]);
   return /*#__PURE__*/React.createElement("div", {
     className: classes.serviceList,
     "data-testid": "serviceList"
@@ -10441,10 +11107,6 @@ 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, {
     key: "All",
@@ -10454,7 +11116,7 @@ var ServiceList = function ServiceList(_ref) {
       key: services[service].id,
       service: services[service]
     });
-  })), margin < width - layerSelectWidth - gapRight && /*#__PURE__*/React.createElement(ChevronRight, {
+  })), layerSelectWidth + margin < width && /*#__PURE__*/React.createElement(ChevronRight, {
     className: classes.scrollArrowRight,
     onClick: onRightArrowClick,
     "data-testid": "rightScrollArrow"
@@ -10489,9 +11151,72 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
   });
 };
 
-var useStyles$j = makeStyles({
+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'
   }
 });
 
@@ -10508,48 +11233,421 @@ var LayerSelect = function LayerSelect(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'module' : _ref$source;
+  var classes = useStyles$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.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.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, {
+    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);
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: classes.onlyByttonText
+  }, "ONLY"))) : null));
+};
+
+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 KeywordFilterResults = function KeywordFilterResults(_ref) {
+  var arrayOfKeywordObjects = _ref.arrayOfKeywordObjects,
+      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$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 _React$useState3 = React.useState(arrayOfKeywordObjects),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      keywordObjects = _React$useState4[0],
+      setKeywordObjects = _React$useState4[1];
+
+  var toggleSelectAll = function toggleSelectAll() {
+    var editedKeywords = keywordObjects.map(function (object) {
+      return Object.assign(Object.assign({}, object), {
+        checked: !allSelected
+      });
+    });
+    setKeywordObjects(editedKeywords);
+    setAllSelected(!allSelected);
+  };
+
+  var toggleCheckbox = function toggleCheckbox(listIndex) {
+    var editedKeywords = keywordObjects.map(function (object, index) {
+      return listIndex === index ? Object.assign(Object.assign({}, object), {
+        checked: !object.checked
+      }) : object;
+    });
+    setKeywordObjects(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
+      });
+    });
+    setKeywordObjects(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]);
+  React.useEffect(function () {
+    setKeywordObjects(arrayOfKeywordObjects);
+  }, [arrayOfKeywordObjects]);
+  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+    title: showTitle ? "Filter Results ".concat(mapId) : 'Filter Results',
+    "data-testid": "keywordFilterResults",
+    startSize: {
+      width: 349,
+      height: 600
+    },
+    minWidth: 312,
+    minHeight: 192,
+    isOpen: isOpen,
+    onClose: onClose,
+    headerSize: "small",
+    bounds: bounds,
+    onMouseDown: onMouseDown,
+    order: order,
+    source: source
+  }, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 12,
+    justify: "space-between",
+    alignItems: "center",
+    className: classes.selectAllContainer
+  }, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 6,
+    justify: "flex-start",
+    alignItems: "center",
+    className: classes.selectAll
+  }, "Select all"), /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 6,
+    justify: "flex-end",
+    alignContent: "center",
+    className: classes["switch"]
+  }, /*#__PURE__*/React.createElement(CustomSwitch, {
+    checked: allSelected,
+    onChange: toggleSelectAll
+  }))), /*#__PURE__*/React.createElement(List, {
+    dense: true,
+    style: {
+      padding: '0px'
+    }
+  }, keywordObjects.map(function (_ref2, index) {
+    var id = _ref2.id,
+        checked = _ref2.checked;
+    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');
+  }); // Check to ensure the currently active map is still present on screen - if not, close the dialog
 
-  var onChangeSize = function onChangeSize(_ref2) {
-    var width = _ref2.width;
-    setWidth(width);
-  };
+  React.useEffect(function () {
+    if (mapId !== '' && !isMapPresent) {
+      onClose();
+    }
+  }, [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
 
-  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
-    title: showTitle ? "Layer Select ".concat(mapId) : 'Layer Select',
-    startSize: {
-      width: width,
-      height: 500
-    },
-    minWidth: 300,
-    minHeight: 126,
-    startPosition: {
-      top: 150,
-      left: 100
-    },
-    isOpen: isOpen,
-    onChangeSize: onChangeSize,
-    onClose: onClose,
-    headerSize: "small",
+  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, {
+    arrayOfKeywordObjects: keywords,
+    mapId: mapId,
     bounds: bounds,
-    "data-testid": "layerSelectWindow",
-    onMouseDown: onMouseDown,
-    order: order,
-    source: source
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: '6px'
-    }
-  }, /*#__PURE__*/React.createElement(SearchField, null), /*#__PURE__*/React.createElement("div", {
-    className: classes.serviceList
-  }, /*#__PURE__*/React.createElement(ServiceListConnect, {
-    layerSelectWidth: width
-  }))));
+    isOpen: isOpenInStore,
+    onClose: onClose,
+    showTitle: showTitle,
+    onMouseDown: onOrderDialog,
+    order: uiOrder,
+    source: uiSource
+  });
 };
 
 /* *
@@ -10664,7 +11762,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 +11771,7 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
     onMouseDown: onOrderDialog,
     order: uiOrder,
     source: uiSource
-  });
+  }), /*#__PURE__*/React.createElement(KeywordFilterResultsConnect, null));
 };
 
 /* *
@@ -10785,79 +11883,6 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
   }), layerSelect && /*#__PURE__*/React.createElement(LayerSelectConnect, null));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var useButtonStyles = makeStyles(function (theme) {
-  return createStyles({
-    button: {
-      height: '24px',
-      width: function width(_ref) {
-        var _width = _ref.width;
-        return _width ? "".concat(_width, "px") : '24px';
-      },
-      border: 0,
-      backgroundColor: theme.palette.geowebColors.buttons.surfaceIconDefault.fill,
-      borderRadius: '4.5px',
-      textTransform: 'none',
-      '& svg path, svg text': {
-        fill: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
-      },
-      '&:hover': {
-        backgroundColor: theme.palette.geowebColors.buttons.flatMouseover.fill
-      },
-      '&:disabled': {
-        backgroundColor: theme.palette.geowebColors.buttons.disabled.fill,
-        '& svg path, svg text': {
-          fill: theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
-        }
-      },
-      '&.Mui-selected': {
-        backgroundColor: theme.palette.geowebColors.buttons.primaryActive.fill,
-        '&:hover': {
-          backgroundColor: theme.palette.geowebColors.buttons.primaryMouseover.fill
-        },
-        '& svg': {
-          backgroundColor: 'transparent'
-        },
-        '& svg path, svg text': {
-          fill: theme.palette.geowebColors.typographyAndIcons.buttonIcon
-        }
-      }
-    }
-  });
-});
-
-var ToggleIconButton = function ToggleIconButton(_a) {
-  var active = _a.active,
-      width = _a.width,
-      children = _a.children,
-      props = __rest(_a, ["active", "width", "children"]);
-
-  var classes = useButtonStyles({
-    width: width
-  });
-  return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({
-    className: classes.button,
-    disableRipple: true,
-    selected: active,
-    value: 0
-  }, props), children);
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -11467,7 +12492,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 +12549,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 +12601,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 +12656,7 @@ var MultiMapSingleDimensionSelectConnect = function MultiMapSingleDimensionSelec
     onMouseDown: onOrderDialog,
     onToggleDialog: onToggleDialog,
     order: uiOrder,
+    source: uiSource,
     isOpen: isOpen,
     index: index
   });
@@ -11649,7 +12681,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 +12697,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 +12727,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 +12745,8 @@ var MultiDimensionSelectMapButtonsConnect = function MultiDimensionSelectMapButt
     return /*#__PURE__*/React.createElement(DimensionSelectMapButtonConnect, {
       mapId: mapId,
       dimension: dimension.name,
-      key: dimension.name
+      key: dimension.name,
+      source: source
     });
   }));
 };
@@ -13735,41 +14773,41 @@ var thumbComponent = function thumbComponent(props) {
 };
 
 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) {
@@ -13832,77 +14870,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,14 +14933,14 @@ 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,
     marks: marks,
@@ -14495,7 +15515,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 +18985,6 @@ var getDisplayText = function getDisplayText(currentAdagucTime) {
 };
 
 var ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION';
-var defaultxml2jsonrequestURL = 'http://localhost:10000/XML2JSON?';
 
 var ReactMapView = /*#__PURE__*/function (_React$Component) {
   _inherits(ReactMapView, _React$Component);
@@ -18032,17 +19051,15 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
               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);
+          setServiceMetadata(wmLayer, mapId, _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);
+          setServiceMetadata(wmLayer, _mapId, _this.adaguc.webMapJS, _this.props, null, null, null, null, _onLayerSetDimensions);
         }
 
         if (child) {
@@ -18056,8 +19073,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         }
       };
 
-      var xml2jsonrequestURL = _this.props.xml2jsonrequestURL;
-      wmLayer.parseLayer(callback, forceReload, xml2jsonrequestURL);
+      wmLayer.parseLayer(callback, forceReload);
     };
 
     _this.state = {
@@ -18065,7 +19081,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));
@@ -18478,8 +19494,6 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                   }
 
                   if (!isBaselayer) {
-                    newWMLayer.reactWebMapJSLayer = child;
-
                     _this3.parseWMJSLayer(newWMLayer, false, 'all', child);
                   }
 
@@ -18595,7 +19609,6 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
       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;
@@ -18611,7 +19624,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);
 
@@ -18744,7 +19756,6 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 ReactMapView.defaultProps = {
-  xml2jsonrequestURL: defaultxml2jsonrequestURL,
   srs: 'EPSG:3857',
   bbox: {
     left: -2324980.5498391856,
@@ -19046,7 +20057,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,
@@ -19377,7 +20388,9 @@ 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: {
@@ -19393,7 +20406,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 +20447,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 +20467,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 +20484,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 +20514,8 @@ var LegendConnectComponent = function LegendConnectComponent(_ref) {
     mapId: mapId,
     showMapId: showMapId,
     onMouseDown: onOrderDialog,
-    order: uiOrder
+    order: uiOrder,
+    source: uiSource
   });
 };
 /**
@@ -19504,6 +20525,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 +20559,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 +20573,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 +20633,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 +20667,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 +20692,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 +20717,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 +21127,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 +21162,7 @@ var ConfigurableMapWithSliderConnect = function ConfigurableMapWithSliderConnect
     layers: layers || [],
     activeLayerId: activeLayerId,
     baseLayer: baseLayer,
+    overLayers: overLayers,
     bbox: bbox,
     srs: srs,
     shouldAutoUpdate: shouldAutoUpdate,