@opengeoweb/core 2.1.2 → 2.1.3

package/core.umd.js

@@ -1548,13 +1548,33 @@
     var newValue = value - 1;
     return newValue < min ? min : newValue;
   };
-  var getValueFromKeyboardEvent = function getValueFromKeyboardEvent(event, value, min, max) {
-    if (event.ctrlKey || event.metaKey) {
+  var getValueFromKeyboardEvent = function getValueFromKeyboardEvent(event, value, min, max, supportFourDirectionNavigation) {
+    if (supportFourDirectionNavigation === void 0) {
+      supportFourDirectionNavigation = 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:
@@ -2458,7 +2478,7 @@
    */
 
   var getPinLocation = reselect.createSelector(getMapById, function (store) {
-    return store ? store.mapPinLocation : {};
+    return store ? store.mapPinLocation : undefined;
   });
 
   /* *
@@ -2519,25 +2539,6 @@
 
     return null;
   };
-  /**
-   * Gets all keywords from services
-   *
-   *   const keywords = useSelector((store) => mapSelectors.getKeywords(store));
-   * @param {object} store store: object - Store object
-   * @returns {array} returnType: Keyword[]
-   */
-
-  var getKeywords = reselect.createSelector(servicesStore, function (store) {
-    var keywords = store ? store.allIds.flatMap(function (id) {
-      return store.byId[id].layers.flatMap(function (layer) {
-        return layer.keywords;
-      });
-    }) : null;
-
-    var uniqueKeywords = __spreadArray([], __read(new Set(keywords)));
-
-    return uniqueKeywords;
-  });
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2615,8 +2616,7 @@
     getAvailableBaseLayersForMap: getAvailableBaseLayersForMap,
     getServiceIds: getServiceIds,
     getServices: getServices,
-    getServiceLayersByName: getServiceLayersByName,
-    getKeywords: getKeywords
+    getServiceLayersByName: getServiceLayersByName
   });
 
   /* *
@@ -2720,8 +2720,8 @@
   /**
    * 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) {
@@ -4340,9 +4340,9 @@
    * 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 = webmap.WMGetServiceFromStore(wmLayer.service, xml2jsonrequestURL);
+    var service = webmap.WMGetServiceFromStore(wmLayer.service);
     /* Update list of layers for service */
 
     var done = function done(layers) {
@@ -4419,7 +4419,7 @@
     };
 
     service.getLayerObjectsFlat(done, function () {// do nothing
-    }, false, null, {
+    }, false, {
       headers: wmLayer.headers
     });
   };
@@ -4728,7 +4728,7 @@
       }
     });
   }
-  function rootSaga$3() {
+  function rootSaga$4() {
     return __generator(this, function (_a) {
       switch (_a.label) {
         case 0:
@@ -4973,7 +4973,7 @@
     });
   }
 
-  function rootSaga$2() {
+  function rootSaga$3() {
     return __generator(this, function (_a) {
       switch (_a.label) {
         case 0:
@@ -5019,7 +5019,7 @@
     reducerMap: {
       syncronizationGroupStore: reducer$4
     },
-    sagas: [rootSaga$3, rootSaga$2]
+    sagas: [rootSaga$4, rootSaga$3]
   };
 
   /* *
@@ -5038,7 +5038,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$E = core.makeStyles(function (theme) {
+  var useStyles$J = core.makeStyles(function (theme) {
     return {
       select: {
         '& ul': {
@@ -5091,7 +5091,7 @@
         tooltipOpen = _f[0],
         setTooltipOpen = _f[1];
 
-    var classes = useStyles$E();
+    var classes = useStyles$J();
 
     var preventDefault = function preventDefault(event) {
       event.preventDefault();
@@ -5254,12 +5254,14 @@
           var type_1 = action.payload.type;
           var activeMapId_1 = action.payload.activeMapId ? action.payload.activeMapId : '';
           var setOpen_1 = action.payload.setOpen ? action.payload.setOpen : false;
+          var source_1 = action.payload.source ? action.payload.source : 'app';
           return produce.produce(state, function (draft) {
             if (!Object.keys(draft.dialogs).includes(type_1)) {
               draft.dialogs[type_1] = createUIDialogElement({
                 activeMapId: activeMapId_1,
                 type: type_1,
-                setOpen: setOpen_1
+                setOpen: setOpen_1,
+                source: source_1
               });
             } // // register dialog to order
 
@@ -5288,7 +5290,7 @@
           var _a = action.payload,
               type_3 = _a.type,
               activeMapId_2 = _a.activeMapId,
-              source_1 = _a.source;
+              source_2 = _a.source;
 
           if (!state.dialogs[type_3]) {
             return state;
@@ -5298,7 +5300,7 @@
             var isOpen = action.payload.setOpen !== undefined ? action.payload.setOpen : draft.dialogs[type_3].isOpen;
             draft.dialogs[type_3].activeMapId = activeMapId_2;
             draft.dialogs[type_3].isOpen = isOpen;
-            draft.dialogs[type_3].source = source_1;
+            draft.dialogs[type_3].source = source_2;
 
             if (isOpen) {
               draft.order = moveToTop(state.order, type_3);
@@ -5445,7 +5447,7 @@
     return isOrderedOnTop;
   });
   var getDialogSource = reselect.createSelector(getDialogDetailsByType, function (details) {
-    if (details) {
+    if (details && details.source) {
       return details.source;
     }
 
@@ -5469,7 +5471,7 @@
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
   function registerMapUISaga() {
-    var fields;
+    var fields, source;
     return __generator(this, function (_a) {
       switch (_a.label) {
         case 0:
@@ -5481,23 +5483,28 @@
           fields = _a.sent();
           if (!(fields.length === 1)) return [3
           /*break*/
-          , 3]; // if first map is in store, we open the legend for it
+          , 4];
+          return [4
+          /*yield*/
+          , effects.select(getDialogSource, 'legend')];
 
+        case 2:
+          source = _a.sent();
           return [4
           /*yield*/
           , effects.put(setActiveMapIdForDialog({
             type: 'legend',
             activeMapId: fields[0],
-            setOpen: true
+            setOpen: true,
+            source: source
           }))];
 
-        case 2:
-          // if first map is in store, we open the legend for it
+        case 3:
           _a.sent();
 
-          _a.label = 3;
+          _a.label = 4;
 
-        case 3:
+        case 4:
           return [2
           /*return*/
           ];
@@ -5566,7 +5573,7 @@
       }
     });
   }
-  function rootSaga$1() {
+  function rootSaga$2() {
     return __generator(this, function (_a) {
       switch (_a.label) {
         case 0:
@@ -5612,7 +5619,7 @@
     reducerMap: {
       ui: reducer$3
     },
-    sagas: [rootSaga$1]
+    sagas: [rootSaga$2]
   };
 
   /* *
@@ -6712,7 +6719,7 @@
       }
     });
   }
-  function rootSaga() {
+  function rootSaga$1() {
     return __generator(this, function (_a) {
       switch (_a.label) {
         case 0:
@@ -6781,7 +6788,7 @@
       services: reducer$1,
       layers: reducer$5
     },
-    sagas: [rootSaga]
+    sagas: [rootSaga$1]
   };
 
   /* *
@@ -6802,7 +6809,9 @@
    * */
   var initialState = {
     filters: {
-      searchFilter: ''
+      searchFilter: '',
+      keywords: [],
+      addedServices: []
     }
   };
   var reducer = function reducer(state, action) {
@@ -6819,11 +6828,195 @@
           });
         }
 
+      case 'LAYER_SELECT_ADD_NEW_KEYWORDS':
+        {
+          return produce__default["default"](state, function (draft) {
+            var e_1, _a;
+
+            var _b = action.payload,
+                serviceName = _b.serviceName,
+                keywords = _b.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 _loop_1 = function _loop_1(keyword) {
+                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);
+                }
+              };
+
+              try {
+                for (var keywords_1 = __values(keywords), keywords_1_1 = keywords_1.next(); !keywords_1_1.done; keywords_1_1 = keywords_1.next()) {
+                  var keyword = keywords_1_1.value;
+
+                  _loop_1(keyword);
+                }
+              } catch (e_1_1) {
+                e_1 = {
+                  error: e_1_1
+                };
+              } finally {
+                try {
+                  if (keywords_1_1 && !keywords_1_1.done && (_a = keywords_1["return"])) _a.call(keywords_1);
+                } finally {
+                  if (e_1) throw e_1.error;
+                }
+              }
+            }
+          });
+        }
+
       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
+    };
+  };
+
+  /* *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *     http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2022 - Finnish Meteorological Institute (FMI)
+   * */
+  function newServiceAddedSaga(capturedAction) {
+    var addedService, serviceName, keywords;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        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)) return [3
+          /*break*/
+          , 2];
+          return [4
+          /*yield*/
+          , effects.put(addNewKeywords({
+            serviceName: serviceName,
+            keywords: keywords
+          }))];
+
+        case 1:
+          _a.sent();
+
+          _a.label = 2;
+
+        case 2:
+          return [2
+          /*return*/
+          ];
+      }
+    });
+  }
+  function rootSaga() {
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          return [4
+          /*yield*/
+          , effects.takeEvery(MAP_SERVICES_SET_LAYERS, newServiceAddedSaga)];
+
+        case 1:
+          _a.sent();
+
+          return [2
+          /*return*/
+          ];
+      }
+    });
+  }
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -6844,7 +7037,8 @@
     id: 'layerSelect-module',
     reducerMap: {
       layerSelect: reducer
-    }
+    },
+    sagas: [rootSaga]
   };
 
   /* *
@@ -7879,7 +8073,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$D = core.makeStyles({
+  var useStyles$I = core.makeStyles({
     buttonDiv: {
       position: 'relative'
     },
@@ -7915,7 +8109,7 @@
         handleClose = _a.handleClose,
         _e = _a.layerType,
         layerType = _e === void 0 ? LayerType.mapLayer : _e;
-    var classes = useStyles$D();
+    var classes = useStyles$I();
 
     var _f = __read(React__namespace.useState(''), 2),
         serviceURL = _f[0],
@@ -8078,7 +8272,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$C = core.makeStyles(function (theme) {
+  var useStyles$H = core.makeStyles(function (theme) {
     return {
       buttonDiv: {
         position: 'relative'
@@ -8113,7 +8307,7 @@
         _f = _a.shouldFocus,
         shouldFocus = _f === void 0 ? false : _f;
     var ref = React__namespace.useRef(null);
-    var classes = useStyles$C();
+    var classes = useStyles$H();
 
     var _g = __read(React__namespace.useState(false), 2),
         open = _g[0],
@@ -8237,7 +8431,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$B = core.makeStyles(function (theme) {
+  var useStyles$G = core.makeStyles(function (theme) {
     return {
       button: {
         width: '24px',
@@ -8254,7 +8448,7 @@
         _b = _a.source,
         source = _b === void 0 ? 'app' : _b;
     var dispatch = reactRedux.useDispatch();
-    var classes = useStyles$B();
+    var classes = useStyles$G();
     var currentActiveMapId = reactRedux.useSelector(function (store) {
       return getDialogMapId(store, 'layerSelect');
     });
@@ -8296,7 +8490,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$A = core.makeStyles({
+  var useStyles$F = core.makeStyles({
     row: {
       height: '32px'
     },
@@ -8320,7 +8514,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _e = _a.layerSelect,
         layerSelect = _e === void 0 ? false : _e;
-    var classes = useStyles$A();
+    var classes = useStyles$F();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(core.Grid, {
       container: true,
@@ -8588,7 +8782,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$z = core.makeStyles(function (theme) {
+  var useStyles$E = core.makeStyles(function (theme) {
     return core.createStyles({
       button: {
         height: 28,
@@ -8647,7 +8841,7 @@
         testId = _a.testId,
         props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId"]);
 
-    var classes = useStyles$z({
+    var classes = useStyles$E({
       isActive: isActive,
       isEnabled: isEnabled
     });
@@ -8684,7 +8878,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$y = core.makeStyles(function (theme) {
+  var useStyles$D = core.makeStyles(function (theme) {
     return core.createStyles({
       checkbox: {
         color: 'inherit',
@@ -8707,7 +8901,7 @@
     var isEnabled = _a.isEnabled,
         title = _a.title,
         onChangeEnableLayer = _a.onChangeEnableLayer;
-    var classes = useStyles$y(isEnabled);
+    var classes = useStyles$D(isEnabled);
 
     var onClick = function onClick() {
       onChangeEnableLayer(!isEnabled);
@@ -8763,7 +8957,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$x = core.makeStyles(function (theme) {
+  var useStyles$C = core.makeStyles(function (theme) {
     return core.createStyles({
       dropdownEmpty: {
         paddingLeft: 8,
@@ -8786,7 +8980,7 @@
         layers = _b === void 0 ? [] : _b,
         _c = _a.isEnabled,
         isEnabled = _c === void 0 ? true : _c;
-    var classes = useStyles$x();
+    var classes = useStyles$C();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
     if (!layers || !layers.length) {
@@ -8859,7 +9053,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$w = core.makeStyles(function (theme) {
+  var useStyles$B = core.makeStyles(function (theme) {
     return {
       opacityDiv: {
         height: 'calc(100% - 5px)',
@@ -8920,7 +9114,7 @@
         onLayerChangeOpacity = _a.onLayerChangeOpacity,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$w();
+    var classes = useStyles$B();
     var sliderClasses = shared.sliderStyles();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
@@ -9030,7 +9224,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$v = core.makeStyles(function (theme) {
+  var useStyles$A = core.makeStyles(function (theme) {
     return core.createStyles({
       icon: {
         minWidth: 32,
@@ -9047,7 +9241,7 @@
     var title = _a.title,
         tooltipTitle = _a.tooltipTitle,
         icon = _a.icon;
-    var classes = useStyles$v();
+    var classes = useStyles$A();
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(core.ListItemIcon, {
       className: classes.icon + " icon"
     }, icon), /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
@@ -9075,7 +9269,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$u = core.makeStyles(function (theme) {
+  var useStyles$z = core.makeStyles(function (theme) {
     return {
       menu: {
         backgroundColor: theme.palette.geowebColors.background.surface,
@@ -9093,7 +9287,7 @@
         onLayerDuplicate = _a.onLayerDuplicate,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$u();
+    var classes = useStyles$z();
 
     var _c = __read(React__namespace.useState(null), 2),
         anchorEl = _c[0],
@@ -9217,7 +9411,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$t = core.makeStyles(function () {
+  var useStyles$y = core.makeStyles(function () {
     return core.createStyles({
       icon: {
         width: 20,
@@ -9231,7 +9425,7 @@
         onClickDelete = _a.onClickDelete,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$t();
+    var classes = useStyles$y();
     return /*#__PURE__*/React__namespace.createElement(LayerManagerButton, {
       tooltipTitle: tooltipTitle,
       onClick: onClickDelete,
@@ -9259,7 +9453,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$s = core.makeStyles(function (theme) {
+  var useStyles$x = core.makeStyles(function (theme) {
     return core.createStyles({
       icon: {
         width: 18,
@@ -9296,7 +9490,7 @@
         isActive = _c === void 0 ? false : _c,
         _d = _a.isEnabled,
         isEnabled = _d === void 0 ? true : _d;
-    var classes = useStyles$s({
+    var classes = useStyles$x({
       isActive: isActive,
       isEnabled: isEnabled
     });
@@ -9345,7 +9539,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$r = core.makeStyles(function (theme) {
+  var useStyles$w = core.makeStyles(function (theme) {
     return core.createStyles({
       row: {
         background: function background(isEnabled) {
@@ -9397,7 +9591,7 @@
         layerActiveLayout = _a.layerActiveLayout,
         layerManagerWidth = _a.layerManagerWidth,
         dragHandle = _a.dragHandle;
-    var classes = useStyles$r(isEnabled);
+    var classes = useStyles$w(isEnabled);
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
     var onClickRow = function onClickRow() {
@@ -9976,7 +10170,7 @@
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
   var TOOLTIP_TITLE = 'Drag a layer up or down';
-  var useStyles$q = core.makeStyles(function (theme) {
+  var useStyles$v = core.makeStyles(function (theme) {
     return {
       dragHandle: {
         cursor: 'grab',
@@ -9999,7 +10193,7 @@
         index = _c === void 0 ? undefined : _c,
         _d = _a.hideTooltip,
         hideTooltip = _d === void 0 ? false : _d;
-    var classes = useStyles$q({
+    var classes = useStyles$v({
       isDisabled: isDisabled
     });
     var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
@@ -10032,7 +10226,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$p = core.makeStyles(function () {
+  var useStyles$u = core.makeStyles(function () {
     return {
       layerRows: {
         width: '100%',
@@ -10098,7 +10292,7 @@
 
     var isSorting = activeDragIndex !== null;
     var isDragDisabled = layerIds.length === 1;
-    var classes = useStyles$p(isSorting);
+    var classes = useStyles$u(isSorting);
     return /*#__PURE__*/React__namespace.createElement(core.Grid, {
       container: true,
       item: true,
@@ -10308,7 +10502,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$o = core.makeStyles({
+  var useStyles$t = core.makeStyles({
     layerRow: {
       width: '100%',
       height: '36px'
@@ -10331,7 +10525,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _d = _a.tooltip,
         tooltip = _d === void 0 ? '' : _d;
-    var classes = useStyles$o();
+    var classes = useStyles$t();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(core.Grid, {
       container: true,
@@ -10376,7 +10570,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$n = core.makeStyles({
+  var useStyles$s = core.makeStyles({
     layerRowContainer: {
       position: 'relative',
       width: '100%',
@@ -10411,7 +10605,7 @@
         layerSelect = _e === void 0 ? false : _e,
         _f = _a.showAddLayersTooltip,
         showAddLayersTooltip = _f === void 0 ? true : _f;
-    var classes = useStyles$n();
+    var classes = useStyles$s();
 
     var _g = __read(React__namespace.useState(LayerManagerWidth.lg), 2),
         layerManagerWidth = _g[0],
@@ -10483,72 +10677,962 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$m = core.makeStyles(function (theme) {
-    return {
-      iconButton: {
-        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
+  var useButtonStyles = core.makeStyles(function (theme) {
+    return core.createStyles({
+      button: {
+        height: '24px',
+        width: function width(_a) {
+          var width = _a.width;
+          return width ? 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 clearIconPath = 'M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M15.44426,7.26697571 L12.0002861,10.7110482 L8.55573996,7.26697571 C8.19978253,6.9110081 7.62292549,6.9110081 7.26696807,7.26697571 C6.91101064,7.62294331 6.91101064,8.19981687 7.26696807,8.55578447 L10.7115142,11.9998569 L7.26696807,15.4445017 C6.91101064,15.8004693 6.91101064,16.3767705 7.26696807,16.7333104 C7.44494678,16.910722 7.67843653,17 7.91192629,17 C8.14484377,17 8.37776125,16.910722 8.55573996,16.7333104 L12.0002861,13.289238 L15.44426,16.7333104 C15.6222388,16.910722 15.8551562,17 16.088646,17 C16.3221357,17 16.5550532,16.910722 16.7330319,16.7333104 C17.0889894,16.3767705 17.0889894,15.8004693 16.7330319,15.4445017 L13.289058,11.9998569 L16.7330319,8.55578447 C17.0889894,8.19981687 17.0889894,7.62294331 16.7330319,7.26697571 C16.3770745,6.9110081 15.8002175,6.9110081 15.44426,7.26697571 Z';
-  var clearIcon = /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
-    style: {
-      width: '24px',
-      height: '24px'
-    },
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: clearIconPath
-  }));
-  var searchIconPath = 'M7.81701445,12.5845372 L7.81701445,12.5845372 C7.17924024,11.946763 6.82932049,11.100321 6.82932049,10.1993044 C6.82932049,9.29828785 7.17924024,8.45077582 7.81701445,7.8140717 C8.47405029,7.15703585 9.3376137,6.82851792 10.2022472,6.82851792 C11.0658106,6.82851792 11.929374,7.15703585 12.5874799,7.8140717 C13.9026217,9.12921348 13.9026217,11.2693954 12.5874799,12.5845372 C11.9497057,13.2212413 11.1021937,13.5722311 10.2022472,13.5722311 C9.3012306,13.5722311 8.45371857,13.2212413 7.81701445,12.5845372 M19.5858748,17.581862 L15.4681648,13.465222 C16.9513109,11.0735688 16.6613162,7.88683788 14.5874799,5.81300161 C12.1690744,3.39566613 8.23434992,3.39566613 5.81594436,5.81300161 C4.64419476,6.9847512 4,8.54280364 4,10.1993044 C4,11.8558052 4.64419476,13.4138577 5.81594436,14.5845372 C6.98769395,15.7562868 8.5446763,16.4015516 10.2022472,16.4015516 C11.376137,16.4015516 12.4965222,16.0719636 13.4681648,15.4662921 L17.5837346,19.582932 C17.8608882,19.8590155 18.2225789,19.9970572 18.5853398,19.9970572 C18.9470305,19.9970572 19.3087212,19.8590155 19.5858748,19.582932 C20.1380417,19.029695 20.1380417,18.135099 19.5858748,17.581862';
-  var searchIcon = /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
-    style: {
-      width: '24px',
-      height: '24px'
-    },
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: searchIconPath
-  }));
 
-  var SearchField = function SearchField() {
-    var _a = __read(React__namespace.useState(''), 2),
-        searchString = _a[0],
-        setSearchString = _a[1];
+  var ToggleIconButton = function ToggleIconButton(_a) {
+    var active = _a.active,
+        width = _a.width,
+        children = _a.children,
+        props = __rest(_a, ["active", "width", "children"]);
 
-    var classes = useStyles$m();
-    return /*#__PURE__*/React__namespace.createElement(core.TextField, {
+    var classes = useButtonStyles({
+      width: width
+    });
+    return /*#__PURE__*/React__namespace.createElement(lab.ToggleButton, __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(_a) {
+    var mapId = _a.mapId,
+        _b = _a.source,
+        source = _b === void 0 ? 'app' : _b;
+    var dispatch = reactRedux.useDispatch();
+    var currentActiveMapId = reactRedux.useSelector(function (store) {
+      return getDialogMapId(store, 'keywordFilter');
+    });
+    var isOpenInStore = reactRedux.useSelector(function (store) {
+      return getisDialogOpen(store, 'keywordFilter');
+    });
+    var openFilterResultsDialog = React__namespace.useCallback(function () {
+      dispatch(setActiveMapIdForDialog({
+        type: 'keywordFilter',
+        activeMapId: mapId,
+        setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+        source: source
+      }));
+    }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
+    return /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
+      onClick: openFilterResultsDialog,
+      active: isOpenInStore,
+      id: "keywordFilterButton",
+      "data-testid": "keywordFilterButton",
+      disableRipple: true
+    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.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 = reselect.createSelector(layerSelectStore, function (store) {
+    return store ? store.filters.searchFilter : '';
+  });
+  var getKeywords = reselect.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 = core.makeStyles(function (theme) {
+    return core.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(_a) {
+    var servicePopupVariant = _a.servicePopupVariant,
+        _b = _a.hideBackdrop,
+        hideBackdrop = _b === void 0 ? false : _b,
+        isOpen = _a.isOpen,
+        closePopup = _a.closePopup,
+        _c = _a.url,
+        url = _c === void 0 ? '' : _c;
+    var classes = useStyles$r();
+    return /*#__PURE__*/React__namespace.createElement(core.Dialog, {
+      open: isOpen,
+      disableBackdropClick: true,
+      hideBackdrop: hideBackdrop,
+      fullWidth: true,
+      maxWidth: "xs",
+      className: classes.container
+    }, /*#__PURE__*/React__namespace.createElement(core.DialogTitle, {
+      className: classes.dialogTitle,
+      disableTypography: true
+    }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+      variant: "h5"
+    }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+      size: "small",
+      onClick: closePopup,
+      "data-testid": "ClosePopupButtonCross"
+    }, /*#__PURE__*/React__namespace.createElement(icons.Close, null))), /*#__PURE__*/React__namespace.createElement(core.DialogContent, null, /*#__PURE__*/React__namespace.createElement(core.TextField, {
+      className: classes.textField,
+      variant: "filled",
+      label: "Service name"
+    })), /*#__PURE__*/React__namespace.createElement(core.DialogContent, null, /*#__PURE__*/React__namespace.createElement(core.TextField, {
+      className: classes.textField,
+      variant: "filled",
+      label: "Service URL",
+      defaultValue: url,
+      id: "service-url"
+    })), /*#__PURE__*/React__namespace.createElement(core.DialogContent, null, /*#__PURE__*/React__namespace.createElement(core.TextField, {
+      className: classes.textField,
+      variant: "filled",
+      multiline: true,
+      rows: 4,
+      label: "Abstracts",
+      helperText: "Short description of what this service does"
+    })), /*#__PURE__*/React__namespace.createElement(core.DialogActions, null, /*#__PURE__*/React__namespace.createElement(core.Button, {
+      variant: "outlined",
+      className: classes.button,
+      onClick: closePopup,
+      "data-testid": "ClosePopupButtonCancel"
+    }, "cancel"), /*#__PURE__*/React__namespace.createElement(core.Button, {
+      variant: "contained",
+      color: "primary",
+      className: classes.button
+    }, "save")));
+  };
+
+  /* *
+   * 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 isURL = function isURL(string) {
+    return /^https?:\/\//.test(string);
+  };
+  var useStyles$q = core.makeStyles(function (theme) {
+    return {
+      iconButton: {
+        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
+      },
+      saveButton: {
+        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
+        textTransform: 'none',
+        border: "1px solid " + 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["default"].createElement(core.SvgIcon, {
+    style: {
+      width: '24px',
+      height: '24px'
+    },
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["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["default"].createElement(core.SvgIcon, {
+    style: {
+      width: '24px',
+      height: '24px'
+    },
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: searchIconPath
+  }));
+
+  var SearchFieldButtonContainer = function SearchFieldButtonContainer(_a) {
+    var localSearchString = _a.localSearchString,
+        onClickClear = _a.onClickClear;
+
+    var _b = __read(React__default["default"].useState(false), 2),
+        isPopupOpen = _b[0],
+        setPopupOpen = _b[1];
+
+    var classes = useStyles$q();
+    var ClearButton = /*#__PURE__*/React__default["default"].createElement(core.Tooltip, {
+      title: "Clear",
+      placement: "top"
+    }, /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+      className: classes.iconButton,
+      edge: "end",
+      onClick: function onClick() {
+        onClickClear();
+      }
+    }, clearIcon));
+    if (isURL(localSearchString)) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, ClearButton), /*#__PURE__*/React__default["default"].createElement(core.Button, {
+      variant: "outlined",
+      onClick: function onClick() {
+        return setPopupOpen(true);
+      },
+      className: classes.saveButton
+    }, "Save"), /*#__PURE__*/React__default["default"].createElement(ServicePopup, {
+      servicePopupVariant: "save",
+      isOpen: isPopupOpen,
+      closePopup: function closePopup() {
+        return setPopupOpen(false);
+      },
+      url: localSearchString
+    }));
+    if (localSearchString) return ClearButton;
+    return /*#__PURE__*/React__default["default"].createElement(core.Tooltip, {
+      title: "Search",
+      placement: "top"
+    }, /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+      className: classes.iconButton,
+      edge: "end"
+    }, searchIcon));
+  };
+
+  /* *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *     http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2021 - Finnish Meteorological Institute (FMI)
+   * */
+
+  var SearchField = function SearchField(_a) {
+    var searchFilter = _a.searchFilter,
+        setSearchFilter = _a.setSearchFilter;
+
+    var _b = __read(React__namespace.useState(''), 2),
+        localSearchString = _b[0],
+        setLocalSearchString = _b[1]; // mirror store unless typing a URL
+
+
+    React__namespace.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__namespace.useCallback(_.debounce(setSearchFilter, 300), []);
+
+    var handleChange = function handleChange(text) {
+      setLocalSearchString(text);
+      if (!isURL(text)) setSearchFilterDebounced(text);else if (searchFilter) setSearchFilterDebounced('');
+    };
+
+    return /*#__PURE__*/React__namespace.createElement(core.TextField, {
       variant: "filled",
       label: "Search through services or enter a service URL",
-      value: searchString,
+      value: localSearchString,
       onChange: function onChange(e) {
-        return setSearchString(e.target.value);
+        handleChange(e.target.value);
+      },
+      autoFocus: true,
+      fullWidth: true,
+      InputProps: {
+        endAdornment: /*#__PURE__*/React__namespace.createElement(core.InputAdornment, {
+          position: "end"
+        }, /*#__PURE__*/React__namespace.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 = reactRedux.useDispatch();
+    var searchFilter = reactRedux.useSelector(function (store) {
+      return getSearchFilter(store);
+    });
+    return /*#__PURE__*/React__namespace.createElement(SearchField, {
+      setSearchFilter: function setSearchFilter$1(filterText) {
+        return dispatch(setSearchFilter({
+          filterText: filterText
+        }));
+      },
+      searchFilter: searchFilter
+    });
+  };
+
+  /* *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *     http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2021 - Finnish Meteorological Institute (FMI)
+   * */
+  var useStyles$p = core.makeStyles(function (theme) {
+    return {
+      layerRow: {
+        background: theme.palette.geowebColors.background.surface,
+        padding: '8px 0px 8px 12px',
+        marginBottom: '4px',
+        height: '64px',
+        border: "solid 1px " + 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(_a) {
+    var services = _a.services,
+        serviceIds = _a.serviceIds,
+        layerSelectHeight = _a.layerSelectHeight;
+    var classes = useStyles$p();
+
+    var _b = __read(React__namespace.useState(0), 2),
+        numberOfLayers = _b[0],
+        setNumberOfLayers = _b[1];
+
+    React__namespace.useEffect(function () {
+      setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
+        return totalNumberOfLayers + services[serviceId].layers.length;
+      }, 0));
+    }, [serviceIds, services]);
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      "data-testid": "layerList"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: classes.resultCount
+    }, numberOfLayers, " results"), /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        height: layerSelectHeight - 199,
+        overflow: 'auto'
+      }
+    }, serviceIds.map(function (serviceId) {
+      return services[serviceId].layers.map(function (layer) {
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          key: serviceId + "-" + layer.name,
+          className: classes.layerRow,
+          "data-testid": "layerListLayerRow"
+        }, /*#__PURE__*/React__namespace.createElement("div", {
+          className: classes.layerText
+        }, layer.text), /*#__PURE__*/React__namespace.createElement("div", null, layer["abstract"] ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
+          className: classes.layerName + " " + classes.layerNameMaxWidth
+        }, layer.name), /*#__PURE__*/React__namespace.createElement("div", {
+          className: classes.layerAbstract,
+          "data-testid": "layerAbstract"
+        }, layer["abstract"])) : /*#__PURE__*/React__namespace.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(_a) {
+    var layerSelectHeight = _a.layerSelectHeight;
+    var allServiceIds = reactRedux.useSelector(function (store) {
+      return getServiceIds(store);
+    });
+    var allServices = reactRedux.useSelector(function (store) {
+      return getServices(store);
+    });
+    return /*#__PURE__*/React__namespace.createElement(LayerList, {
+      services: allServices,
+      serviceIds: allServiceIds,
+      layerSelectHeight: layerSelectHeight
+    });
+  };
+
+  /* *
+   * 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$o = core.makeStyles(function (theme) {
+    return core.createStyles({
+      chip: {
+        height: '32px',
+        margin: '0 8px 0 0',
+        padding: '5px 12px 7px',
+        borderRadius: '20px',
+        border: "solid 1px " + theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
+        backgroundColor: theme.palette.geowebColors.buttons.surfaceIconDefault.fill,
+        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
+        "float": 'left',
+        whiteSpace: 'nowrap',
+        '&:hover': {
+          backgroundColor: theme.palette.geowebColors.buttons.flatMouseover.fill,
+          cursor: 'pointer'
+        }
+      }
+    });
+  });
+
+  var ServiceChip = function ServiceChip(_a) {
+    var _b = _a.all,
+        all = _b === void 0 ? false : _b,
+        service = _a.service;
+    var classes = useStyles$o();
+
+    if (all) {
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: classes.chip,
+        "data-testid": "serviceChipAll"
+      }, "All");
+    }
+
+    if (service && service.name) {
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: classes.chip,
+        "data-testid": "serviceChip"
+      }, service.name);
+    }
+
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: classes.chip
+    });
+  };
+
+  /* *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *     http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2021 - Finnish Meteorological Institute (FMI)
+   * */
+  var useStyles$n = core.makeStyles(function (theme) {
+    return core.createStyles({
+      serviceChips: {
+        width: '100%',
+        display: 'inline-flex',
+        alignItems: 'center',
+        overflowX: 'visible',
+        "float": 'left',
+        paddingLeft: '40px',
+        marginRight: function marginRight(_a) {
+          var margin = _a.margin;
+          return margin;
+        },
+        marginLeft: function marginLeft(_a) {
+          var margin = _a.margin;
+          return -margin;
+        },
+        maxWidth: function maxWidth(_a) {
+          var maxWidthValue = _a.maxWidthValue;
+          return maxWidthValue;
+        }
+      },
+      scrollArrowLeft: {
+        width: '120px',
+        marginBottom: '-12px',
+        height: '34px',
+        backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
+        cursor: 'pointer',
+        marginRight: '-120px',
+        "float": 'left',
+        zIndex: 1,
+        position: 'relative'
+      },
+      serviceList: {
+        height: '32px',
+        marginTop: '8px',
+        width: '100%',
+        overflow: 'hidden'
+      },
+      scrollArrowRight: {
+        width: '120px',
+        marginBottom: '-12px',
+        height: '34px',
+        backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
+        right: '0px',
+        position: 'fixed',
+        cursor: 'pointer'
+      }
+    });
+  });
+
+  var ServiceList = function ServiceList(_a) {
+    var layerSelectWidth = _a.layerSelectWidth,
+        services = _a.services;
+
+    var _b = __read(React__namespace.useState(0), 2),
+        margin = _b[0],
+        setMargin = _b[1];
+
+    var _c = __read(React__namespace.useState(0), 2),
+        width = _c[0],
+        setWidth = _c[1];
+
+    var ref = React__namespace.useRef(null);
+    var 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__namespace.useCallback(function () {
+      setMargin(Math.max(0, margin - 100));
+    }, [margin]);
+    var onRightArrowClick = React__namespace.useCallback(function () {
+      setMargin(Math.min(width - layerSelectWidth, margin + 100));
+    }, [margin, layerSelectWidth, width]);
+    React__namespace.useEffect(function () {
+      setWidth(ref.current.scrollWidth + 50);
+      setMargin(Math.max(0, Math.min(width - layerSelectWidth, margin)));
+    }, [services, layerSelectWidth, width, margin]);
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: classes.serviceList,
+      "data-testid": "serviceList"
+    }, margin !== 0 && /*#__PURE__*/React__namespace.createElement(icons.ChevronLeft, {
+      className: classes.scrollArrowLeft,
+      onClick: onLeftArrowClick,
+      "data-testid": "leftScrollArrow"
+    }), /*#__PURE__*/React__namespace.createElement("div", {
+      className: classes.serviceChips,
+      ref: ref
+    }, services && Object.keys(services) && Object.keys(services).length > 0 && /*#__PURE__*/React__namespace.createElement(ServiceChip, {
+      key: "All",
+      all: true
+    }), Object.keys(services).map(function (service) {
+      return /*#__PURE__*/React__namespace.createElement(ServiceChip, {
+        key: services[service].id,
+        service: services[service]
+      });
+    })), layerSelectWidth + margin < width && /*#__PURE__*/React__namespace.createElement(icons.ChevronRight, {
+      className: classes.scrollArrowRight,
+      onClick: onRightArrowClick,
+      "data-testid": "rightScrollArrow"
+    }));
+  };
+
+  /* *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *     http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2021 - Finnish Meteorological Institute (FMI)
+   * */
+
+  var ServiceListConnect = function ServiceListConnect(_a) {
+    var layerSelectWidth = _a.layerSelectWidth;
+    var services = reactRedux.useSelector(function (store) {
+      return getServices(store);
+    });
+    return /*#__PURE__*/React__namespace.createElement(ServiceList, {
+      layerSelectWidth: layerSelectWidth,
+      services: services
+    });
+  };
+
+  /* *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *     http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2021 - Finnish Meteorological Institute (FMI)
+   * */
+  var useStyles$m = core.makeStyles(function (theme) {
+    return core.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 _a = __read(React__namespace.useState(false), 2),
+        containerOpen = _a[0],
+        setContainerOpen = _a[1];
+
+    var toggleContainer = function toggleContainer() {
+      setContainerOpen(!containerOpen);
+    };
+
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
+      onClick: toggleContainer,
+      active: containerOpen,
+      "data-testid": "serviceOptionsButton"
+    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.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__namespace.createElement(core.Box, {
+      className: classes.servicesContainer,
+      "data-testid": "container"
+    }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+      className: classes.servicesText
+    }, "Services")) : 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 useStyles$l = core.makeStyles({
+    serviceList: {
+      height: '48px'
+    },
+    keywordFilterButton: {
+      "float": 'left',
+      position: 'absolute',
+      margin: '12px 0 0 8px',
+      zIndex: 2
+    },
+    serviceOptionsButton: {
+      position: 'absolute',
+      margin: '12px 0 0 calc(100% - 36px)',
+      zIndex: 2
+    },
+    layerSelectContainer: {
+      padding: '0 8px'
+    }
+  });
+
+  var LayerSelect = function LayerSelect(_a) {
+    var mapId = _a.mapId,
+        bounds = _a.bounds,
+        _b = _a.onClose,
+        onClose = _b === void 0 ? function () {} : _b,
+        showTitle = _a.showTitle,
+        isOpen = _a.isOpen,
+        _c = _a.onMouseDown,
+        onMouseDown = _c === void 0 ? function () {} : _c,
+        _d = _a.order,
+        order = _d === void 0 ? 0 : _d,
+        _e = _a.source,
+        source = _e === void 0 ? 'module' : _e;
+    var classes = useStyles$l();
+
+    var _f = __read(React__namespace.useState(500), 2),
+        height = _f[0],
+        setHeight = _f[1];
+
+    var _g = __read(React__namespace.useState(750), 2),
+        width = _g[0],
+        setWidth = _g[1];
+
+    var onChangeSize = function onChangeSize(_a) {
+      var height = _a.height,
+          width = _a.width;
+      setHeight(height);
+      setWidth(width);
+    };
+
+    return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
+      title: showTitle ? "Layer Select " + mapId : 'Layer Select',
+      startSize: {
+        width: width,
+        height: height
+      },
+      minWidth: 390,
+      minHeight: 126,
+      startPosition: {
+        top: 150,
+        left: 100
       },
-      autoFocus: true,
-      fullWidth: true,
-      InputProps: {
-        endAdornment: /*#__PURE__*/React__namespace.createElement(core.InputAdornment, {
-          position: "end"
-        }, searchString ? /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
-          title: "Clear",
-          placement: "top"
-        }, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
-          className: classes.iconButton,
-          edge: "end",
-          onClick: function onClick() {
-            return setSearchString('');
-          }
-        }, clearIcon)) : /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
-          title: "Search",
-          placement: "top"
-        }, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
-          className: classes.iconButton,
-          edge: "end"
-        }, searchIcon)))
+      isOpen: isOpen,
+      onChangeSize: onChangeSize,
+      onClose: onClose,
+      headerSize: "small",
+      bounds: bounds,
+      "data-testid": "layerSelectWindow",
+      onMouseDown: onMouseDown,
+      order: order,
+      source: source
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        padding: '6px'
       }
-    });
+    }, /*#__PURE__*/React__namespace.createElement(SearchFieldConnect, null)), /*#__PURE__*/React__namespace.createElement("div", {
+      className: classes.keywordFilterButton
+    }, /*#__PURE__*/React__namespace.createElement(KeywordFilterButtonConnect, {
+      mapId: mapId
+    })), /*#__PURE__*/React__namespace.createElement("div", {
+      className: classes.serviceOptionsButton
+    }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsButton, null)), /*#__PURE__*/React__namespace.createElement("div", {
+      className: classes.serviceList
+    }, /*#__PURE__*/React__namespace.createElement(ServiceListConnect, {
+      layerSelectWidth: width
+    })), /*#__PURE__*/React__namespace.createElement("div", {
+      className: classes.layerSelectContainer
+    }, /*#__PURE__*/React__namespace.createElement(LayerListConnect, {
+      layerSelectHeight: height
+    })));
   };
 
   /* *
@@ -10567,50 +11651,23 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$l = core.makeStyles(function (theme) {
-    return core.createStyles({
-      chip: {
-        height: '32px',
-        margin: '0 8px 0 0',
-        padding: '5px 12px 7px',
-        borderRadius: '20px',
-        border: "solid 1px " + theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
-        backgroundColor: theme.palette.geowebColors.buttons.surfaceIconDefault.fill,
-        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
-        "float": 'left',
-        whiteSpace: 'nowrap',
-        '&:hover': {
-          backgroundColor: theme.palette.geowebColors.buttons.flatMouseover.fill,
-          cursor: 'pointer'
+  var CustomSwitch = core.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'
       }
-    });
-  });
-
-  var ServiceChip = function ServiceChip(_a) {
-    var _b = _a.all,
-        all = _b === void 0 ? false : _b,
-        service = _a.service;
-    var classes = useStyles$l();
-
-    if (all) {
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.chip,
-        "data-testid": "serviceChipAll"
-      }, "All");
-    }
-
-    if (service && service.name) {
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.chip,
-        "data-testid": "serviceChip"
-      }, service.name);
-    }
-
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.chip
-    });
-  };
+    };
+  })(core.Switch);
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -10630,92 +11687,86 @@
    * */
   var useStyles$k = core.makeStyles(function (theme) {
     return core.createStyles({
-      serviceChips: {
+      listItem: {
         width: '100%',
-        display: 'inline-flex',
-        alignItems: 'center',
-        overflowX: 'visible',
-        "float": 'left',
-        paddingLeft: '32px'
+        minWidth: '300px',
+        padding: '0px',
+        paddingLeft: '10px',
+        paddingRight: '50px',
+        fontSize: '12px'
       },
-      scrollArrowLeft: {
-        width: '120px',
-        marginBottom: '-12px',
-        height: '34px',
-        backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
-        marginLeft: '-100%',
-        cursor: 'pointer'
+      onlyByttonText: {
+        color: theme.palette.geowebColors.buttons.primary.fill,
+        fontSize: '14px',
+        fontWeight: 500
       },
-      serviceList: {
-        height: '32px',
-        marginTop: '8px',
-        width: '100%',
-        overflowX: 'hidden',
-        marginRight: '-120px'
+      checkbox: {
+        paddingTop: '6px',
+        paddingBottom: '7px',
+        '&&:hover': {
+          backgroundColor: 'transparent'
+        }
       },
-      scrollArrowRight: {
-        width: '120px',
-        marginBottom: '-12px',
-        height: '34px',
-        backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
-        right: '0px',
-        position: 'fixed',
-        cursor: 'pointer'
+      listItemIcon: {
+        minWidth: '42px'
+      },
+      listItemText: {
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden'
       }
     });
   });
 
-  var ServiceList = function ServiceList(_a) {
-    var layerSelectWidth = _a.layerSelectWidth,
-        services = _a.services;
+  var FilterListItem = function FilterListItem(_a) {
+    var index = _a.index,
+        text = _a.text,
+        checked = _a.checked,
+        toggleCheckbox = _a.toggleCheckbox,
+        selectOnlyOne = _a.selectOnlyOne;
     var classes = useStyles$k();
 
-    var _b = __read(React__namespace.useState(0), 2),
-        margin = _b[0],
-        setMargin = _b[1];
-
-    var _c = __read(React__namespace.useState(0), 2),
-        width = _c[0],
-        setWidth = _c[1];
+    var _b = __read(React__namespace.useState(false), 2),
+        hovering = _b[0],
+        setHovering = _b[1];
 
-    var ref = React__namespace.useRef(null);
-    var onLeftArrowClick = React__namespace.useCallback(function () {
-      setMargin(Math.max(0, margin - 100));
-    }, [margin]);
-    var onRightArrowClick = React__namespace.useCallback(function () {
-      setMargin(Math.min(width - layerSelectWidth, margin + 100));
-    }, [margin, layerSelectWidth, width]);
-    var gapRight = 35;
-    React__namespace.useEffect(function () {
-      setWidth(ref.current.scrollWidth + gapRight);
-    }, [services, layerSelectWidth]);
+    var handleMouseOver = React__namespace.useCallback(function () {
+      setHovering(true);
+    }, []);
+    var handleMouseLeave = React__namespace.useCallback(function () {
+      setHovering(false);
+    }, []);
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.serviceList,
-      "data-testid": "serviceList"
-    }, margin !== 0 && /*#__PURE__*/React__namespace.createElement(icons.ChevronLeft, {
-      className: classes.scrollArrowLeft,
-      onClick: onLeftArrowClick,
-      "data-testid": "leftScrollArrow"
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.serviceChips,
+      onMouseOver: handleMouseOver,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleMouseOver,
+      onBlur: handleMouseLeave,
+      "data-testid": "filterResultListItem"
+    }, /*#__PURE__*/React__namespace.createElement(core.ListItem, {
+      className: classes.listItem
+    }, /*#__PURE__*/React__namespace.createElement(core.ListItemIcon, {
+      className: classes.listItemIcon
+    }, /*#__PURE__*/React__namespace.createElement(core.Checkbox, {
+      checked: checked,
+      onChange: function onChange() {
+        return toggleCheckbox(index);
+      },
+      className: classes.checkbox
+    })), /*#__PURE__*/React__namespace.createElement(core.Typography, {
+      variant: "body2",
+      className: classes.listItemText
+    }, text), hovering ? /*#__PURE__*/React__namespace.createElement(core.ListItemSecondaryAction, null, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
       style: {
-        marginLeft: -margin + "px",
-        marginRight: margin + "px"
+        backgroundColor: 'transparent'
       },
-      ref: ref
-    }, services && Object.keys(services) && Object.keys(services).length > 0 && /*#__PURE__*/React__namespace.createElement(ServiceChip, {
-      key: "All",
-      all: true
-    }), Object.keys(services).map(function (service) {
-      return /*#__PURE__*/React__namespace.createElement(ServiceChip, {
-        key: services[service].id,
-        service: services[service]
-      });
-    })), margin < width - layerSelectWidth - gapRight && /*#__PURE__*/React__namespace.createElement(icons.ChevronRight, {
-      className: classes.scrollArrowRight,
-      onClick: onRightArrowClick,
-      "data-testid": "rightScrollArrow"
-    }));
+      edge: "end",
+      size: "small",
+      onClick: function onClick() {
+        return selectOnlyOne(index);
+      }
+    }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+      className: classes.onlyByttonText
+    }, "ONLY"))) : null));
   };
 
   /* *
@@ -10734,16 +11785,146 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-
-  var ServiceListConnect = function ServiceListConnect(_a) {
-    var layerSelectWidth = _a.layerSelectWidth;
-    var services = reactRedux.useSelector(function (store) {
-      return getServices(store);
-    });
-    return /*#__PURE__*/React__namespace.createElement(ServiceList, {
-      layerSelectWidth: layerSelectWidth,
-      services: services
+  var useStyles$j = core.makeStyles(function (theme) {
+    return core.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(_a) {
+    var arrayOfKeywordObjects = _a.arrayOfKeywordObjects,
+        mapId = _a.mapId,
+        bounds = _a.bounds,
+        _b = _a.onClose,
+        onClose = _b === void 0 ? function () {} : _b,
+        showTitle = _a.showTitle,
+        isOpen = _a.isOpen,
+        _c = _a.onMouseDown,
+        onMouseDown = _c === void 0 ? function () {} : _c,
+        _d = _a.order,
+        order = _d === void 0 ? 0 : _d,
+        _e = _a.source,
+        source = _e === void 0 ? 'module' : _e;
+    var classes = useStyles$j();
+
+    var _f = __read(React__namespace.useState(true), 2),
+        allSelected = _f[0],
+        setAllSelected = _f[1];
+
+    var _g = __read(React__namespace.useState(arrayOfKeywordObjects), 2),
+        keywordObjects = _g[0],
+        setKeywordObjects = _g[1];
+
+    var toggleSelectAll = function toggleSelectAll() {
+      var editedKeywords = keywordObjects.map(function (object) {
+        return __assign(__assign({}, object), {
+          checked: !allSelected
+        });
+      });
+      setKeywordObjects(editedKeywords);
+      setAllSelected(!allSelected);
+    };
+
+    var toggleCheckbox = function toggleCheckbox(listIndex) {
+      var editedKeywords = keywordObjects.map(function (object, index) {
+        return listIndex === index ? __assign(__assign({}, object), {
+          checked: !object.checked
+        }) : object;
+      });
+      setKeywordObjects(editedKeywords);
+    };
+
+    var selectOnlyOne = function selectOnlyOne(listIndex) {
+      var editedKeywords = keywordObjects.map(function (object, index) {
+        return listIndex === index ? __assign(__assign({}, object), {
+          checked: true
+        }) : __assign(__assign({}, object), {
+          checked: false
+        });
+      });
+      setKeywordObjects(editedKeywords);
+    }; // If even one checkbox is unchecked, switch toggleAll off
+    // If all checkboxes becomes checked, switch toggleAll on
+
+
+    React__namespace.useEffect(function () {
+      var checked = keywordObjects.every(function (object) {
+        return object.checked === true;
+      });
+      setAllSelected(checked);
+    }, [keywordObjects]);
+    React__namespace.useEffect(function () {
+      setKeywordObjects(arrayOfKeywordObjects);
+    }, [arrayOfKeywordObjects]);
+    return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
+      title: showTitle ? "Filter Results " + 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__namespace.createElement(core.Grid, {
+      container: true,
+      item: true,
+      xs: 12,
+      justify: "space-between",
+      alignItems: "center",
+      className: classes.selectAllContainer
+    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+      container: true,
+      item: true,
+      xs: 6,
+      justify: "flex-start",
+      alignItems: "center",
+      className: classes.selectAll
+    }, "Select all"), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+      container: true,
+      item: true,
+      xs: 6,
+      justify: "flex-end",
+      alignContent: "center",
+      className: classes["switch"]
+    }, /*#__PURE__*/React__namespace.createElement(CustomSwitch, {
+      checked: allSelected,
+      onChange: toggleSelectAll
+    }))), /*#__PURE__*/React__namespace.createElement(core.List, {
+      dense: true,
+      style: {
+        padding: '0px'
+      }
+    }, keywordObjects.map(function (_a, index) {
+      var id = _a.id,
+          checked = _a.checked;
+      return /*#__PURE__*/React__namespace.createElement(FilterListItem, {
+        key: id + "-" + index,
+        index: index,
+        text: id,
+        checked: checked,
+        toggleCheckbox: toggleCheckbox,
+        selectOnlyOne: selectOnlyOne
+      });
+    })));
   };
 
   /* *
@@ -10761,67 +11942,82 @@
    *
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
-   * */
-  var useStyles$j = core.makeStyles({
-    serviceList: {
-      height: '48px'
-    }
-  });
-
-  var LayerSelect = function LayerSelect(_a) {
-    var mapId = _a.mapId,
-        bounds = _a.bounds,
-        _b = _a.onClose,
-        onClose = _b === void 0 ? function () {} : _b,
-        showTitle = _a.showTitle,
-        isOpen = _a.isOpen,
-        _c = _a.onMouseDown,
-        onMouseDown = _c === void 0 ? function () {} : _c,
-        _d = _a.order,
-        order = _d === void 0 ? 0 : _d,
-        _e = _a.source,
-        source = _e === void 0 ? 'module' : _e;
-    var classes = useStyles$j();
+   * */
 
-    var _f = __read(React__namespace.useState(750), 2),
-        width = _f[0],
-        setWidth = _f[1];
+  var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_a) {
+    var bounds = _a.bounds,
+        _b = _a.showTitle,
+        showTitle = _b === void 0 ? false : _b;
+    var dispatch = reactRedux.useDispatch();
+    var mapId = reactRedux.useSelector(function (store) {
+      return getDialogMapId(store, 'keywordFilter');
+    });
+    var isOpenInStore = reactRedux.useSelector(function (store) {
+      return getisDialogOpen(store, 'keywordFilter');
+    });
+    var onClose = React__namespace.useCallback(function () {
+      return dispatch(setToggleOpenDialog({
+        type: 'keywordFilter',
+        setOpen: false
+      }));
+    }, [dispatch]);
+    var isMapPresent = reactRedux.useSelector(function (store) {
+      return getIsMapPresent(store, mapId);
+    });
+    var uiOrder = reactRedux.useSelector(function (store) {
+      return getDialogOrder(store, 'keywordFilter');
+    });
+    var uiSource = reactRedux.useSelector(function (store) {
+      return getDialogSource(store, 'keywordFilter');
+    });
+    var uiIsOrderedOnTop = reactRedux.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(_a) {
-      var width = _a.width;
-      setWidth(width);
-    };
+    React__namespace.useEffect(function () {
+      if (mapId !== '' && !isMapPresent) {
+        onClose();
+      }
+    }, [mapId, isMapPresent, onClose]);
+    var registerDialog$1 = React__namespace.useCallback(function () {
+      return dispatch(registerDialog({
+        type: 'keywordFilter',
+        setOpen: false
+      }));
+    }, [dispatch]);
+    var unregisterDialog$1 = React__namespace.useCallback(function () {
+      return dispatch(unregisterDialog({
+        type: 'keywordFilter'
+      }));
+    }, [dispatch]);
+    var onOrderDialog = React__namespace.useCallback(function () {
+      if (!uiIsOrderedOnTop) {
+        dispatch(orderDialog({
+          type: 'keywordFilter'
+        }));
+      }
+    }, [dispatch, uiIsOrderedOnTop]); // Register this dialog in the store
 
-    return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
-      title: showTitle ? "Layer Select " + 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__namespace.useEffect(function () {
+      registerDialog$1();
+      return function () {
+        unregisterDialog$1();
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var keywords = reactRedux.useSelector(function (store) {
+      return getKeywords(store);
+    });
+    return /*#__PURE__*/React__namespace.createElement(KeywordFilterResults, {
+      arrayOfKeywordObjects: keywords,
+      mapId: mapId,
       bounds: bounds,
-      "data-testid": "layerSelectWindow",
-      onMouseDown: onMouseDown,
-      order: order,
-      source: source
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        padding: '6px'
-      }
-    }, /*#__PURE__*/React__namespace.createElement(SearchField, null), /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.serviceList
-    }, /*#__PURE__*/React__namespace.createElement(ServiceListConnect, {
-      layerSelectWidth: width
-    }))));
+      isOpen: isOpenInStore,
+      onClose: onClose,
+      showTitle: showTitle,
+      onMouseDown: onOrderDialog,
+      order: uiOrder,
+      source: uiSource
+    });
   };
 
   /* *
@@ -10933,7 +12129,7 @@
       } // eslint-disable-next-line react-hooks/exhaustive-deps
 
     }, [isOpenInStore, preloadedServices, serviceSetLayers$1]);
-    return /*#__PURE__*/React__namespace.createElement(LayerSelect, {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(LayerSelect, {
       mapId: mapId,
       bounds: bounds,
       isOpen: isOpenInStore,
@@ -10942,7 +12138,7 @@
       onMouseDown: onOrderDialog,
       order: uiOrder,
       source: uiSource
-    });
+    }), /*#__PURE__*/React__namespace.createElement(KeywordFilterResultsConnect, null));
   };
 
   /* *
@@ -11054,79 +12250,6 @@
     }), layerSelect && /*#__PURE__*/React__namespace.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 = core.makeStyles(function (theme) {
-    return core.createStyles({
-      button: {
-        height: '24px',
-        width: function width(_a) {
-          var width = _a.width;
-          return width ? 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__namespace.createElement(lab.ToggleButton, __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.
@@ -11734,7 +12857,9 @@
         onMouseDown = _a.onMouseDown,
         onToggleDialog = _a.onToggleDialog,
         _c = _a.index,
-        index = _c === void 0 ? 0 : _c;
+        index = _c === void 0 ? 0 : _c,
+        _d = _a.source,
+        source = _d === void 0 ? 'app' : _d;
     var dispatch = reactRedux.useDispatch();
     var mapDimension = reactRedux.useSelector(function (store) {
       return getMapDimension(store, mapId, dimensionName);
@@ -11789,7 +12914,8 @@
       },
       bounds: "parent",
       onMouseDown: onMouseDown,
-      order: order
+      order: order,
+      source: source
     }, /*#__PURE__*/React__namespace.createElement("div", {
       style: {
         padding: 4
@@ -11840,6 +12966,9 @@
     var uiOrder = reactRedux.useSelector(function (store) {
       return getDialogOrder(store, uiDialogType);
     });
+    var uiSource = reactRedux.useSelector(function (store) {
+      return getDialogSource(store, uiDialogType);
+    });
     var uiIsOrderedOnTop = reactRedux.useSelector(function (store) {
       return getDialogIsOrderedOnTop(store, uiDialogType);
     });
@@ -11892,6 +13021,7 @@
       onMouseDown: onOrderDialog,
       onToggleDialog: onToggleDialog,
       order: uiOrder,
+      source: uiSource,
       isOpen: isOpen,
       index: index
     });
@@ -11916,7 +13046,9 @@
 
   var DimensionSelectMapButtonConnect = function DimensionSelectMapButtonConnect(_a) {
     var mapId = _a.mapId,
-        dimension = _a.dimension;
+        dimension = _a.dimension,
+        _b = _a.source,
+        source = _b === void 0 ? 'app' : _b;
     var dispatch = reactRedux.useDispatch();
     var uiDialogType = getDimensionType(dimension);
     var currentActiveMapId = reactRedux.useSelector(function (store) {
@@ -11930,9 +13062,10 @@
       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__namespace.createElement(DimensionSelectButton, {
       dimension: dimension,
@@ -11959,7 +13092,9 @@
    * */
 
   var MultiDimensionSelectMapButtonsConnect = function MultiDimensionSelectMapButtonsConnect(_a) {
-    var mapId = _a.mapId;
+    var mapId = _a.mapId,
+        _b = _a.source,
+        source = _b === void 0 ? 'app' : _b;
     var dimensions = reactRedux.useSelector(function (store) {
       return getMapDimensions(store, mapId);
     });
@@ -11975,7 +13110,8 @@
       return /*#__PURE__*/React__namespace.createElement(DimensionSelectMapButtonConnect, {
         mapId: mapId,
         dimension: dimension.name,
-        key: dimension.name
+        key: dimension.name,
+        source: source
       });
     }));
   };
@@ -14069,41 +15205,41 @@
   };
 
   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) {
@@ -14166,77 +15302,59 @@
       }
     };
   })(core.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(_a) {
     var layers = _a.layers,
-        timeSliderScale = _a.timeSliderScale,
+        _b = _a.timeSliderScale,
+        timeSliderScale = _b === void 0 ? Scale.Hour : _b,
         centerTime = _a.centerTime,
         secondsPerPx = _a.secondsPerPx,
         selectedTime = _a.selectedTime,
         onChangeTimeSliderScale = _a.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 _c = marks.find(function (mark) {
+      return mark.value === value;
+    }),
+        paddingLeft = _c.paddingLeft,
+        text = _c.text;
+
     var scaleTextPadding = {
-      paddingLeft: marks[newScaleObjectIndex].paddingLeft
+      paddingLeft: paddingLeft
     };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.Background,
@@ -14247,14 +15365,14 @@
       style: scaleTextPadding
     }, text)), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.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,
@@ -14847,7 +15965,7 @@
       className: styles.scaleSlider
     }, scaleSlider || /*#__PURE__*/React__namespace.createElement(TimeSliderScaleSlider, __assign({}, defaultProps, {
       selectedTime: defaultProps.selectedTime.unix(),
-      timeSliderScale: 60,
+      timeSliderScale: Scale.Hour,
       onChangeTimeSliderScale: function onChangeTimeSliderScale() {
         return null;
       }
@@ -18308,7 +19426,6 @@
   };
 
   var ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION';
-  var defaultxml2jsonrequestURL = 'http://localhost:10000/XML2JSON?';
 
   var ReactMapView =
   /** @class */
@@ -18372,17 +19489,15 @@
                 onLayerSetDimensions = _a.onLayerSetDimensions,
                 onServiceSetLayers = _a.onServiceSetLayers,
                 onLayerSetStyles = _a.onLayerSetStyles,
-                xml2jsonrequestURL_1 = _a.xml2jsonrequestURL,
                 mapId = _a.mapId;
-            setServiceMetadata(wmLayer, mapId, xml2jsonrequestURL_1, _this.adaguc.webMapJS, _this.props, onMapUpdateAllDimensions, onLayerChangeStyle, onServiceSetLayers, onLayerSetStyles, onLayerSetDimensions);
+            setServiceMetadata(wmLayer, mapId, _this.adaguc.webMapJS, _this.props, onMapUpdateAllDimensions, onLayerChangeStyle, onServiceSetLayers, onLayerSetStyles, onLayerSetDimensions);
           }
 
           if (updateStrategy === 'onlydims') {
             var _b = _this.props,
                 onLayerSetDimensions = _b.onLayerSetDimensions,
-                xml2jsonrequestURL_2 = _b.xml2jsonrequestURL,
                 mapId = _b.mapId;
-            setServiceMetadata(wmLayer, mapId, xml2jsonrequestURL_2, _this.adaguc.webMapJS, _this.props, null, null, null, null, onLayerSetDimensions);
+            setServiceMetadata(wmLayer, mapId, _this.adaguc.webMapJS, _this.props, null, null, null, null, onLayerSetDimensions);
           }
 
           if (child) {
@@ -18396,8 +19511,7 @@
           }
         };
 
-        var xml2jsonrequestURL = _this.props.xml2jsonrequestURL;
-        wmLayer.parseLayer(callback, forceReload, xml2jsonrequestURL);
+        wmLayer.parseLayer(callback, forceReload);
       };
 
       _this.state = {
@@ -18796,7 +19910,6 @@
                 }
 
                 if (!isBaselayer) {
-                  newWMLayer.reactWebMapJSLayer = child;
                   this_3.parseWMJSLayer(newWMLayer, false, 'all', child);
                 }
 
@@ -18904,7 +20017,6 @@
       var _a = this.props,
           mapId = _a.mapId,
           listeners = _a.listeners,
-          xml2jsonrequestURL = _a.xml2jsonrequestURL,
           srs = _a.srs,
           bbox = _a.bbox,
           onMapPinChangeLocation = _a.onMapPinChangeLocation;
@@ -18920,7 +20032,6 @@
 
       registerWMJSMap(this.adaguc.webMapJS, mapId);
       this.adaguc.webMapJS.removeAllLayers();
-      this.adaguc.webMapJS.setXML2JSONURL(xml2jsonrequestURL);
       this.adaguc.webMapJS.setProjection(srs, new webmap.WMBBOX(bbox));
       this.adaguc.webMapJS.setWMTileRendererTileSettings(tileRenderSettings);
 
@@ -19047,7 +20158,6 @@
     };
 
     ReactMapView.defaultProps = {
-      xml2jsonrequestURL: defaultxml2jsonrequestURL,
       srs: 'EPSG:3857',
       bbox: {
         left: -2324980.5498391856,
@@ -19352,7 +20462,7 @@
       },
       srs: srs,
       bbox: bbox,
-      mapPinLocation: displayMapPin && Object.keys(mapPinLocation).length ? mapPinLocation : null,
+      mapPinLocation: displayMapPin && mapPinLocation,
       dimensions: mapDimensions,
       activeLayerId: activeLayerId,
       animationDelay: animationDelay,
@@ -19696,7 +20806,9 @@
         _c = _a.showMapId,
         showMapId = _c === void 0 ? false : _c,
         _d = _a.order,
-        order = _d === void 0 ? 0 : _d;
+        order = _d === void 0 ? 0 : _d,
+        _e = _a.source,
+        source = _e === void 0 ? 'app' : _e;
     var classes = useStyles$5();
     return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
       startPosition: {
@@ -19712,7 +20824,8 @@
       "data-testid": "moveable-legend",
       bounds: "parent",
       onMouseDown: onMouseDown,
-      order: order
+      order: order,
+      source: source
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.legendContainer
     }, layers && layers.length > 0 ? /*#__PURE__*/React__namespace.createElement("div", {
@@ -19752,7 +20865,9 @@
 
   var LegendConnectComponent = function LegendConnectComponent(_a) {
     var _b = _a.showMapId,
-        showMapId = _b === void 0 ? false : _b;
+        showMapId = _b === void 0 ? false : _b,
+        _c = _a.source,
+        source = _c === void 0 ? 'app' : _c;
     var dispatch = reactRedux.useDispatch();
     var initialActiveMapId = reactRedux.useSelector(function (store) {
       return getFirstMapId(store);
@@ -19770,6 +20885,9 @@
     var uiOrder = reactRedux.useSelector(function (store) {
       return getDialogOrder(store, 'legend');
     });
+    var uiSource = reactRedux.useSelector(function (store) {
+      return getDialogSource(store, 'legend');
+    });
     var uiIsOrderedOnTop = reactRedux.useSelector(function (store) {
       return getDialogIsOrderedOnTop(store, 'legend');
     });
@@ -19784,9 +20902,10 @@
     var registerDialog$1 = React__namespace.useCallback(function (setOpen) {
       return dispatch(registerDialog({
         type: 'legend',
-        setOpen: setOpen
+        setOpen: setOpen,
+        source: source
       }));
-    }, [dispatch]);
+    }, [dispatch, source]);
     var unregisterDialog$1 = React__namespace.useCallback(function () {
       return dispatch(unregisterDialog({
         type: 'legend'
@@ -19813,7 +20932,8 @@
       mapId: mapId,
       showMapId: showMapId,
       onMouseDown: onOrderDialog,
-      order: uiOrder
+      order: uiOrder,
+      source: uiSource
     });
   };
   /**
@@ -19823,6 +20943,7 @@
    *
    * 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} />```
    */
@@ -19856,7 +20977,9 @@
    * */
 
   var LegendMapButtonConnect = function LegendMapButtonConnect(_a) {
-    var mapId = _a.mapId;
+    var mapId = _a.mapId,
+        _b = _a.source,
+        source = _b === void 0 ? 'app' : _b;
     var dispatch = reactRedux.useDispatch();
     var currentActiveMapId = reactRedux.useSelector(function (store) {
       return getDialogMapId(store, 'legend');
@@ -19868,9 +20991,10 @@
       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__namespace.createElement(MapControlButton, {
       title: "Legend",
@@ -19977,36 +21101,43 @@
         activeLayerId = _a.activeLayerId,
         _b = _a.baseLayer,
         baseLayer = _b === void 0 ? baseLayerGrey$1 : _b,
+        _c = _a.overLayers,
+        overLayers = _c === void 0 ? [overLayer$1] : _c,
         bbox = _a.bbox,
         srs = _a.srs,
-        _c = _a.displayTimeInMap,
-        displayTimeInMap = _c === void 0 ? false : _c,
-        _d = _a.displayLayerManagerButtonInMap,
-        displayLayerManagerButtonInMap = _d === void 0 ? true : _d,
-        _e = _a.displayDimensionSelectButtonInMap,
-        displayDimensionSelectButtonInMap = _e === void 0 ? true : _e,
-        _f = _a.shouldAutoUpdate,
-        shouldAutoUpdate = _f === void 0 ? false : _f,
-        _g = _a.shouldAnimate,
-        shouldAnimate = _g === void 0 ? false : _g,
-        _h = _a.animationPayload,
-        animationPayload = _h === void 0 ? undefined : _h,
-        _j = _a.shouldShowZoomControls,
-        shouldShowZoomControls = _j === void 0 ? false : _j,
-        _k = _a.displayMapPin,
-        displayMapPin = _k === void 0 ? false : _k;
+        _d = _a.displayTimeInMap,
+        displayTimeInMap = _d === void 0 ? false : _d,
+        _e = _a.displayLayerManagerButtonInMap,
+        displayLayerManagerButtonInMap = _e === void 0 ? true : _e,
+        _f = _a.displayDimensionSelectButtonInMap,
+        displayDimensionSelectButtonInMap = _f === void 0 ? true : _f,
+        _g = _a.shouldAutoUpdate,
+        shouldAutoUpdate = _g === void 0 ? false : _g,
+        _h = _a.shouldAnimate,
+        shouldAnimate = _h === void 0 ? false : _h,
+        _j = _a.animationPayload,
+        animationPayload = _j === void 0 ? undefined : _j,
+        _k = _a.shouldShowZoomControls,
+        shouldShowZoomControls = _k === void 0 ? false : _k,
+        _l = _a.displayMapPin,
+        displayMapPin = _l === void 0 ? false : _l;
     var classes = useStyles$4();
     var dispatch = reactRedux.useDispatch();
     var mapId = React__default["default"].useRef(id || generateMapId()).current;
 
     var baseLayerWithUniqueId = __assign(__assign({}, baseLayer), {
       id: "baseLayer-" + mapId
-    }); // make sure all layers have a unique id before going forward
+    });
 
+    var overLayersWithUniqueId = overLayers.map(function (layer) {
+      return __assign(__assign({}, layer), {
+        id: generateLayerId()
+      });
+    }); // make sure all layers have a unique id before going forward
 
-    var _l = generateUniqueLayerIds(layers, activeLayerId),
-        layersNewIds = _l.layersNewIds,
-        activeLayerNewId = _l.activeLayerNewId;
+    var _m = generateUniqueLayerIds(layers, activeLayerId),
+        layersNewIds = _m.layersNewIds,
+        activeLayerNewId = _m.activeLayerNewId;
 
     React__default["default"].useEffect(function () {
       // set layers
@@ -20022,9 +21153,7 @@
 
       dispatch(setBaseLayers({
         mapId: mapId,
-        layers: [baseLayerWithUniqueId, __assign(__assign({}, overLayer$1), {
-          id: generateLayerId()
-        })]
+        layers: __spreadArray([baseLayerWithUniqueId], __read(overLayersWithUniqueId))
       })); // bbox
 
       dispatch(setBbox$1({
@@ -20466,20 +21595,22 @@
         layers = _a.layers,
         _b = _a.baseLayer,
         baseLayer = _b === void 0 ? undefined : _b,
-        _c = _a.activeLayerId,
-        activeLayerId = _c === void 0 ? undefined : _c,
-        _d = _a.shouldAutoUpdate,
-        shouldAutoUpdate = _d === void 0 ? false : _d,
-        _e = _a.shouldAnimate,
-        shouldAnimate = _e === void 0 ? false : _e,
+        _c = _a.overLayers,
+        overLayers = _c === void 0 ? undefined : _c,
+        _d = _a.activeLayerId,
+        activeLayerId = _d === void 0 ? undefined : _d,
+        _e = _a.shouldAutoUpdate,
+        shouldAutoUpdate = _e === void 0 ? false : _e,
+        _f = _a.shouldAnimate,
+        shouldAnimate = _f === void 0 ? false : _f,
         bbox = _a.bbox,
         srs = _a.srs,
-        _f = _a.shouldShowZoomControls,
-        shouldShowZoomControls = _f === void 0 ? true : _f,
-        _g = _a.animationPayload,
-        animationPayload = _g === void 0 ? undefined : _g,
-        _h = _a.displayMapPin,
-        displayMapPin = _h === void 0 ? false : _h;
+        _g = _a.shouldShowZoomControls,
+        shouldShowZoomControls = _g === void 0 ? true : _g,
+        _h = _a.animationPayload,
+        animationPayload = _h === void 0 ? undefined : _h,
+        _j = _a.displayMapPin,
+        displayMapPin = _j === void 0 ? false : _j;
     var classes = useStyles$2();
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: classes.mapSliderConnect,
@@ -20499,6 +21630,7 @@
       layers: layers || [],
       activeLayerId: activeLayerId,
       baseLayer: baseLayer,
+      overLayers: overLayers,
       bbox: bbox,
       srs: srs,
       shouldAutoUpdate: shouldAutoUpdate,