@opengeoweb/core 4.6.0 → 4.6.1

package/index.esm.js

@@ -7,7 +7,7 @@ import _, { debounce, isEqual, groupBy, throttle, range } from 'lodash';
 import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { CustomTooltip, ToolButton, ToolContainerDraggable, IS_JEST, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, CustomAccordion, EnableButton, ManagerDeleteButton, AlertBanner, calculateDialogSizeAndPosition, useIsMounted, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
-import { Pause, Play, Add, Copy, Both, None, DragHandle as DragHandle$1, Cached, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Filter, Search, Clear, Close, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { Pause, Play, Add, Copy, Both, None, DragHandle as DragHandle$1, Cached, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Filter, Search, Clear, Close, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { Paper, Box, Typography, IconButton, Grid, MenuItem, Button, Popper, FormControl, InputLabel, List, ListItem, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, LinearProgress, InputAdornment, Backdrop, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, styled, Slider, Menu, useTheme, Snackbar } from '@mui/material';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { ReactSortable } from 'react-sortablejs';
@@ -25,6 +25,8 @@ import proj4 from 'proj4';
 import * as turf from '@turf/turf';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
+import axios from 'axios';
+import { useDebounce } from '@opengeoweb/api';
 import { createStore } from '@redux-eggs/redux-toolkit';
 import { getSagaExtension } from '@redux-eggs/saga-extension';
 
@@ -4422,17 +4424,54 @@ var FilterType;
   FilterType["Group"] = "groups";
 })(FilterType || (FilterType = {}));
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var getFilterId = function getFilterId(filterType, filterName) {
+  return "".concat(filterType, "-").concat(filterName);
+};
+var produceFilters = function produceFilters(filterNames, filterType, draft, layerSelectFilterAdapter) {
+  filterNames.forEach(function (filterName) {
+    var id = getFilterId(filterType, filterName);
+
+    if (!draft.filters.filters.entities[id]) {
+      // If this filter doesn't exit yet, add it
+      layerSelectFilterAdapter.addOne(draft.filters.filters, {
+        id: id,
+        name: filterName,
+        amount: 1,
+        amountVisible: 1,
+        checked: true,
+        type: filterType
+      });
+    } else {
+      // If it exists already, up the amounts
+      draft.filters.filters.entities[id].amount += 1;
+      draft.filters.filters.entities[id].amountVisible += 1;
+    }
+  });
+};
+
+var layerSelectFilterAdapter = createEntityAdapter();
+var layerSelectActiveServicesAdapter = createEntityAdapter();
 var initialState$1 = {
   filters: {
     searchFilter: '',
-    activeServices: {
-      byId: {},
-      allIds: []
-    },
-    filters: {
-      byId: {},
-      allIds: []
-    }
+    activeServices: layerSelectActiveServicesAdapter.getInitialState(),
+    filters: layerSelectFilterAdapter.getInitialState()
   },
   allServicesEnabled: true,
   activeLayerInfo: {
@@ -4456,6 +4495,8 @@ var slice$1 = createSlice({
       draft.allServicesEnabled = allServicesEnabled;
     },
     addFiltersAndActiveServices: function addFiltersAndActiveServices(draft, action) {
+      var _a, _b;
+
       var _action$payload = action.payload,
           serviceId = _action$payload.serviceId,
           serviceName = _action$payload.serviceName,
@@ -4463,59 +4504,59 @@ var slice$1 = createSlice({
           _abstract = _action$payload["abstract"],
           keywords = _action$payload.keywords,
           scope = _action$payload.scope,
-          groups = _action$payload.groups;
-
-      if (!draft.filters.activeServices.byId[serviceId]) {
-        draft.filters.activeServices.byId[serviceId] = {};
-
-        var addFilters = function addFilters(filterNames, filterType) {
-          filterNames.forEach(function (filterName) {
-            var id = "".concat(filterType, "-").concat(filterName);
-
-            if (!draft.filters.filters.byId[id]) {
-              draft.filters.filters.byId[id] = {
-                id: id,
-                name: filterName,
-                amount: 1,
-                amountVisible: 1,
-                checked: true,
-                type: filterType
-              };
-              draft.filters.filters.allIds.push(id);
-            } else {
-              draft.filters.filters.byId[id].amount += 1;
-              draft.filters.filters.byId[id].amountVisible += 1;
-            }
-          });
+          groups = _action$payload.groups,
+          isLoading = _action$payload.isLoading;
+
+      if (isLoading) {
+        // If service is still loading, add without filters
+        draft.filters.activeServices.entities[serviceId] = {
+          serviceId: serviceId,
+          enabled: draft.allServicesEnabled,
+          filterIds: [],
+          scope: scope,
+          serviceName: serviceName,
+          serviceUrl: serviceUrl,
+          "abstract": _abstract,
+          isLoading: isLoading
         };
+      }
 
-        addFilters(groups, FilterType.Group);
-        addFilters(keywords, FilterType.Keyword);
+      if (!isLoading) {
+        // If service is done loading, add with filters
+        if (!((_b = (_a = draft.filters.activeServices.entities[serviceId]) === null || _a === void 0 ? void 0 : _a.filterIds) === null || _b === void 0 ? void 0 : _b.length)) {
+          // If the service has no filters yet, add them
+          produceFilters(groups, FilterType.Group, draft, layerSelectFilterAdapter);
+          produceFilters(keywords, FilterType.Keyword, draft, layerSelectFilterAdapter);
+        }
+
+        var filterIds = groups.map(function (group) {
+          return getFilterId(FilterType.Group, group);
+        }).concat(keywords.map(function (keyword) {
+          return getFilterId(FilterType.Keyword, keyword);
+        }));
+        draft.filters.activeServices.entities[serviceId] = {
+          serviceId: serviceId,
+          enabled: draft.allServicesEnabled,
+          filterIds: filterIds,
+          scope: scope,
+          serviceName: serviceName,
+          serviceUrl: serviceUrl,
+          "abstract": _abstract,
+          isLoading: isLoading
+        };
       }
 
-      var filterIds = groups.map(function (group) {
-        return "".concat(FilterType.Group, "-").concat(group);
-      }).concat(keywords.map(function (keyword) {
-        return "".concat(FilterType.Keyword, "-").concat(keyword);
-      }));
-      draft.filters.activeServices.byId[serviceId] = {
-        serviceId: serviceId,
-        enabled: draft.allServicesEnabled,
-        filterIds: filterIds,
-        scope: scope,
-        serviceName: serviceName,
-        serviceUrl: serviceUrl,
-        "abstract": _abstract
-      };
-      if (!draft.filters.activeServices.allIds.includes(serviceId)) draft.filters.activeServices.allIds.push(serviceId);
+      if (!draft.filters.activeServices.ids.includes(serviceId)) {
+        draft.filters.activeServices.ids.push(serviceId);
+      }
     },
     layerSelectRemoveService: function layerSelectRemoveService(draft, action) {
       var serviceId = action.payload.serviceId; // 1. Find a service that is to be removed
 
-      var foundService = draft.filters.activeServices.byId[serviceId]; // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
+      var foundService = draft.filters.activeServices.entities[serviceId]; // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
 
       foundService.filterIds.forEach(function (filterId) {
-        var foundObject = draft.filters.filters.byId[filterId];
+        var foundObject = draft.filters.filters.entities[filterId];
 
         if (foundObject && foundObject.amount) {
           foundObject.amount -= 1;
@@ -4523,23 +4564,20 @@ var slice$1 = createSlice({
         }
 
         if (foundObject && foundObject.amount === 0) {
-          delete draft.filters.filters.byId[filterId];
-          draft.filters.filters.allIds = draft.filters.filters.allIds.filter(function (serviceId) {
+          delete draft.filters.filters.entities[filterId];
+          draft.filters.filters.ids = draft.filters.filters.ids.filter(function (serviceId) {
             return serviceId !== filterId;
           });
         }
       }); // Finally remove object from activeServices, so if the service is added again later on, new object and keywords will be re-added
 
-      delete draft.filters.activeServices.byId[serviceId];
-      draft.filters.activeServices.allIds = draft.filters.activeServices.allIds.filter(function (id) {
-        return id !== serviceId;
-      });
+      layerSelectActiveServicesAdapter.removeOne(draft.filters.activeServices, serviceId);
     },
     enableActiveService: function enableActiveService(draft, action) {
       var _action$payload2 = action.payload,
           serviceId = _action$payload2.serviceId,
           keywords = _action$payload2.filters;
-      draft.filters.activeServices.byId[serviceId].enabled = true;
+      draft.filters.activeServices.entities[serviceId].enabled = true;
 
       var _iterator = _createForOfIteratorHelper(keywords),
           _step;
@@ -4547,7 +4585,7 @@ var slice$1 = createSlice({
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var keyword = _step.value;
-          draft.filters.filters.byId[keyword].amountVisible += 1;
+          draft.filters.filters.entities[keyword].amountVisible += 1;
         }
       } catch (err) {
         _iterator.e(err);
@@ -4559,7 +4597,7 @@ var slice$1 = createSlice({
       var _action$payload3 = action.payload,
           serviceId = _action$payload3.serviceId,
           keywords = _action$payload3.filters;
-      draft.filters.activeServices.byId[serviceId].enabled = false;
+      draft.filters.activeServices.entities[serviceId].enabled = false;
 
       var _iterator2 = _createForOfIteratorHelper(keywords),
           _step2;
@@ -4567,7 +4605,7 @@ var slice$1 = createSlice({
       try {
         for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
           var keyword = _step2.value;
-          draft.filters.filters.byId[keyword].amountVisible -= 1;
+          draft.filters.filters.entities[keyword].amountVisible -= 1;
         }
       } catch (err) {
         _iterator2.e(err);
@@ -4578,15 +4616,15 @@ var slice$1 = createSlice({
     toggleFilter: function toggleFilter(draft, action) {
       var filterIds = action.payload.filterIds;
       filterIds.forEach(function (filterId) {
-        draft.filters.filters.byId[filterId].checked = !draft.filters.filters.byId[filterId].checked;
+        draft.filters.filters.entities[filterId].checked = !draft.filters.filters.entities[filterId].checked;
       });
     },
     enableOnlyOneFilter: function enableOnlyOneFilter(draft, action) {
       var filterId = action.payload.filterId;
-      draft.filters.filters.allIds.forEach(function (filterId) {
-        draft.filters.filters.byId[filterId].checked = false;
+      draft.filters.filters.ids.forEach(function (filterId) {
+        draft.filters.filters.entities[filterId].checked = false;
       });
-      draft.filters.filters.byId[filterId].checked = true;
+      draft.filters.filters.entities[filterId].checked = true;
     },
     setActiveLayerInfo: function setActiveLayerInfo(draft, action) {
       var layer = action.payload.layer;
@@ -4682,21 +4720,32 @@ var layerSelectStore = function layerSelectStore(store) {
 
 
 var getSearchFilter = createSelector(layerSelectStore, function (store) {
-  return store ? store.filters.searchFilter : '';
+  var _a;
+
+  return ((_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.searchFilter) || '';
 });
 /**
  * Returns active services array
  *
  * Example getActiveServices(store);
  * @param {object} store store: object - store object
- * @returns {object} returnType: object of active services
+ * @returns {ActiveServiceObjectEntities} returnType: ActiveServiceObjectEntitiesobject of active services
  */
+// cast to usable type - selectEntities returns Dictionary<ActiveServiceObject> which is not usable inside of the code
 
-var getActiveServices = createSelector(layerSelectStore, function (store) {
-  var _a;
+var getActiveServices = function getActiveServices(store) {
+  return getActiveServicesDictionary(store);
+};
 
-  return store ? (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId : {};
-}, selectorMemoizationOptions);
+var _layerSelectActiveSer = layerSelectActiveServicesAdapter.getSelectors(function (store) {
+  var _a, _b;
+
+  return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.activeServices) || {
+    entities: {},
+    ids: []
+  };
+}),
+    getActiveServicesDictionary = _layerSelectActiveSer.selectEntities;
 /**
  * Returns active services by id
  *
@@ -4706,10 +4755,11 @@ var getActiveServices = createSelector(layerSelectStore, function (store) {
  * @returns {object} returnType: object of active service
  */
 
+
 var getActiveServiceById = function getActiveServiceById(store, serviceId) {
-  var _a, _b;
+  var _a, _b, _c;
 
-  var enabledServices = ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.activeServices.byId[serviceId]) || {};
+  var enabledServices = ((_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.activeServices) === null || _c === void 0 ? void 0 : _c.entities[serviceId]) || {};
   return enabledServices;
 };
 /**
@@ -4723,10 +4773,10 @@ var getActiveServiceById = function getActiveServiceById(store, serviceId) {
 var getEnabledServiceIds = createSelector(layerSelectStore, function (store) {
   var _a, _b;
 
-  var enabledServices = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.allIds.filter(function (serviceId) {
-    var _a;
+  var enabledServices = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.ids.filter(function (serviceId) {
+    var _a, _b, _c;
 
-    return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId[serviceId].enabled;
+    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices) === null || _b === void 0 ? void 0 : _b.entities[serviceId]) === null || _c === void 0 ? void 0 : _c.enabled;
   })) !== null && _b !== void 0 ? _b : [];
   return enabledServices;
 }, selectorMemoizationOptions);
@@ -4739,17 +4789,17 @@ var getEnabledServiceIds = createSelector(layerSelectStore, function (store) {
  */
 
 var getCheckedFilterIds = createSelector(layerSelectStore, function (store) {
-  var _a, _b;
+  var _a, _b, _c;
 
-  var checkedFilters = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.allIds.filter(function (filterId) {
-    var _a, _b;
+  var checkedFilters = (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.ids.filter(function (filterId) {
+    var _a, _b, _c;
 
-    return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.byId[filterId]) === null || _b === void 0 ? void 0 : _b.checked;
-  })) !== null && _b !== void 0 ? _b : [];
+    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.entities[filterId]) === null || _c === void 0 ? void 0 : _c.checked;
+  })) !== null && _c !== void 0 ? _c : [];
   return checkedFilters.map(function (filterId) {
-    var _a;
+    var _a, _b, _c;
 
-    return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.byId[filterId].id;
+    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.entities[filterId]) === null || _c === void 0 ? void 0 : _c.id;
   });
 }, selectorMemoizationOptions);
 /**
@@ -4759,12 +4809,21 @@ var getCheckedFilterIds = createSelector(layerSelectStore, function (store) {
  * @param {object} store store: object - store object
  * @returns {array} returnType: array of all keyword ids
  */
+// cast to usable type - selectIds returns EntityId[] which is not usable inside of the code
+
+var getAllFilterIds = function getAllFilterIds(store) {
+  return getAllFilterIdsEntity(store);
+};
 
-var getAllFilterIds = createSelector(layerSelectStore, function (store) {
+var _layerSelectFilterAda = layerSelectFilterAdapter.getSelectors(function (store) {
   var _a, _b;
 
-  return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.allIds) !== null && _b !== void 0 ? _b : [];
-}, selectorMemoizationOptions);
+  return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.filters) || {
+    entities: {},
+    ids: []
+  };
+}),
+    getAllFilterIdsEntity = _layerSelectFilterAda.selectIds;
 /**
  * Returns all filters
  *
@@ -4773,40 +4832,43 @@ var getAllFilterIds = createSelector(layerSelectStore, function (store) {
  * @returns {array} returnType: array of all filters
  */
 
-var getAllFilters = createSelector(layerSelectStore, function (store) {
-  var filters = store === null || store === void 0 ? void 0 : store.filters.filters.byId;
-
-  if (filters) {
-    return Object.values(filters);
-  }
 
-  return [];
-});
-/**
- * Returns if all keywords are checked
- *
- * Example isAllKeywordsChecked(store);
- * @param {object} store store: object - store object
- * @returns {array} returnType: boolean if all keywords are checked
- */
+var _layerSelectFilterAda2 = layerSelectFilterAdapter.getSelectors(function (store) {
+  var _a, _b;
 
+  return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.filters) || {
+    entities: {},
+    ids: []
+  };
+}),
+    getAllFilters = _layerSelectFilterAda2.selectAll;
 var isAllFiltersChecked = createSelector(layerSelectStore, function (store) {
   var _a, _b;
 
-  return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.allIds.every(function (filterId) {
+  return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.ids.every(function (filterId) {
     var _a, _b, _c;
 
-    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.byId[filterId]) === null || _c === void 0 ? void 0 : _c.checked;
+    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.entities[filterId]) === null || _c === void 0 ? void 0 : _c.checked;
   });
 });
 /**
- * Returns the active layer info
+ * Gets a KeywordObject by its id
  *
- * Example getActiveLayerInfo(store);
- * @param {object} store store: object - store object
- * @returns {object} returnType: ActiveLayerObject
+ * Example: keywordObject = getKeywordObjectById(store, 'keywordId')
+ * @param {object} store object from which the keyword state will be extracted
+ * @param {string} filterId Id of the keyword
+ * @returns {object} object containing keyword information (id, amount, amountVisible, checked)
  */
 
+var _layerSelectFilterAda3 = layerSelectFilterAdapter.getSelectors(function (store) {
+  var _a, _b;
+
+  return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.filters) || {
+    entities: {},
+    ids: []
+  };
+});
+    _layerSelectFilterAda3.selectById;
 var getActiveLayerInfo = createSelector(layerSelectStore, function (store) {
   return store === null || store === void 0 ? void 0 : store.activeLayerInfo;
 });
@@ -8483,7 +8545,8 @@ function newServiceAddedSaga(capturedAction) {
             keywords: keywords,
             scope: scope,
             groups: groups,
-            "abstract": _abstract
+            "abstract": _abstract,
+            isLoading: false
           }));
 
         case 8:
@@ -8608,7 +8671,7 @@ function layerSelectRemoveServiceSaga(capturedAction) {
           results = _context3.sent;
           services = results;
           servicesEnabled = Object.values(services).find(function (service) {
-            return service.enabled;
+            return service === null || service === void 0 ? void 0 : service.enabled;
           });
 
           if (!(servicesEnabled === undefined)) {
@@ -8624,7 +8687,7 @@ function layerSelectRemoveServiceSaga(capturedAction) {
 
             return put(layerSelectActions.enableActiveService({
               serviceId: serviceId,
-              filters: service.filterIds
+              filters: service === null || service === void 0 ? void 0 : service.filterIds
             }));
           }));
 
@@ -12071,18 +12134,36 @@ var useFetchServices = function useFetchServices(dialogType) {
   var serviceSetLayers = React.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(payload));
   }, [dispatch]);
+  var addFiltersAndActiveServices = React.useCallback(function (payload) {
+    dispatch(layerSelectActions.addFiltersAndActiveServices(payload));
+  }, [dispatch]);
   React.useEffect(function () {
     if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
       mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
+        var wmService = WMGetServiceFromStore(service.url);
+        var scope = service.scope ? service.scope : 'system';
+
+        if (isMounted.current) {
+          addFiltersAndActiveServices({
+            serviceId: wmService.id,
+            serviceName: service.name,
+            serviceUrl: service.url,
+            keywords: [],
+            scope: scope,
+            groups: [],
+            "abstract": service["abstract"] || wmService["abstract"],
+            isLoading: true
+          });
+        }
+
         getLayersFlattenedFromService(service.url).then(function (layers) {
           if (isMounted.current) {
-            var wmService = WMGetServiceFromStore(service.url);
             serviceSetLayers({
               id: wmService.id,
               name: service.name,
               serviceUrl: service.url,
               layers: layers,
-              scope: service.scope ? service.scope : 'system',
+              scope: scope,
               // first try to load the user abstract, otherwise the service abstract
               "abstract": service["abstract"] || wmService["abstract"]
             });
@@ -12091,9 +12172,8 @@ var useFetchServices = function useFetchServices(dialogType) {
           return null;
         });
       });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [isOpenInStore, preloadedServices, serviceSetLayers]);
+    }
+  }, [addFiltersAndActiveServices, isMounted, isOpenInStore, preloadedServices, serviceSetLayers]);
 };
 var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
   return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byUrl, preset) {
@@ -12395,7 +12475,9 @@ var validateServiceName = function validateServiceName(value, services) {
   var ownServiceName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   var serviceName = value === null || value === void 0 ? void 0 : value.toLowerCase();
   var foundName = Object.keys(services).find(function (serviceId) {
-    return services[serviceId].serviceName.toLowerCase() === serviceName && serviceName !== ownServiceName.toLocaleLowerCase();
+    var _a;
+
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName.toLowerCase()) === serviceName && serviceName !== ownServiceName.toLocaleLowerCase();
   });
   return foundName === undefined ? true : VALIDATIONS_NAME_EXISTING;
 };
@@ -12425,7 +12507,9 @@ var validateServiceUrl = function validateServiceUrl(value, services) {
 
 
   var foundUrl = Object.keys(services).find(function (serviceId) {
-    return services[serviceId].serviceUrl === serviceUrl;
+    var _a;
+
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
   });
 
   if (foundUrl) {
@@ -13630,7 +13714,7 @@ var sortByService = function sortByService(serviceObj) {
     var _ref4 = _slicedToArray(_ref2, 2),
         b = _ref4[1];
 
-    return a.serviceName.localeCompare(b.serviceName);
+    return a.serviceName.localeCompare(b === null || b === void 0 ? void 0 : b.serviceName);
   }).reduce(function (r, _ref5) {
     var _ref6 = _slicedToArray(_ref5, 2),
         key = _ref6[0],
@@ -13953,7 +14037,7 @@ var ServiceChip = function ServiceChip(_ref) {
   var chip = all ? 'all' : service && service.serviceUrl;
   return /*#__PURE__*/React.createElement(CustomTooltip, {
     title: (service === null || service === void 0 ? void 0 : service["abstract"]) ? "Abstract: ".concat(service["abstract"]) : ''
-  }, /*#__PURE__*/React.createElement(CustomToggleButton, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CustomToggleButton, {
     variant: "boxed",
     selected: isSelected,
     tabIndex: 0,
@@ -13966,7 +14050,7 @@ var ServiceChip = function ServiceChip(_ref) {
     },
     disabled: isDisabled,
     sx: style
-  }, service ? service.serviceName : 'All'));
+  }, service ? service.serviceName : 'All')));
 };
 
 var ServiceChipConnect = function ServiceChipConnect(_ref) {
@@ -14107,7 +14191,7 @@ var ServiceList = function ServiceList(_ref) {
     all: true,
     isSelected: isAllSelected
   }), Object.keys(activeServices).map(function (serviceId) {
-    var _a;
+    var _a, _b;
 
     var service = activeServices[serviceId];
     return /*#__PURE__*/React.createElement(ServiceChipConnect, {
@@ -14116,7 +14200,7 @@ var ServiceList = function ServiceList(_ref) {
       service: service,
       isSelected: (_a = activeServices[serviceId]) === null || _a === void 0 ? void 0 : _a.enabled,
       isAllSelected: isAllSelected,
-      isDisabled: activeServices[serviceId] === undefined
+      isDisabled: activeServices[serviceId] === undefined || ((_b = activeServices[serviceId]) === null || _b === void 0 ? void 0 : _b.isLoading) === true
     });
   })));
 };
@@ -14369,7 +14453,9 @@ var Rows = function Rows(_ref2) {
 var getService = function getService(services, serviceUrl) {
   var serviceIds = Object.keys(services);
   var serviceIndex = serviceIds.findIndex(function (serviceId) {
-    return services[serviceId].serviceUrl === serviceUrl;
+    var _a;
+
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
   });
   if (serviceIndex < 0) return null;
   return services[serviceIds[serviceIndex]];
@@ -15200,7 +15286,8 @@ var MapControls = function MapControls(_a) {
       left: 0,
       margin: 1,
       zIndex: 50,
-      top: '96px'
+      top: '96px',
+      userSelect: 'none'
     }
   }, props), /*#__PURE__*/React.createElement(Grid, {
     sx: {
@@ -23915,13 +24002,389 @@ var TimeSliderClockConnect = function TimeSliderClockConnect(_ref) {
   });
 };
 
+/* *
+ * 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)
+ * */
+/**
+ * Get the title for this WMS layer based on its layerId. If not defined, layerId is used instead.
+ * @param layerId
+ * @returns Title for the layer
+ */
+
+var getTitle = function getTitle(layerId) {
+  var wmjsLayer = getWMLayerById(layerId);
+  return wmjsLayer ? wmjsLayer.title || wmjsLayer.name : layerId;
+};
+/**
+ * Make a list of GFI Layers to display.
+ * @param layers
+ * @param mapId
+ * @returns
+ */
+
+
+var getLayersToUpdate = function getLayersToUpdate(layers, mapId) {
+  var wmjsMap = getWMJSMapById(mapId);
+  if (!wmjsMap || !layers || layers.length === 0) return [];
+  return layers.filter(function (layer) {
+    return layer && layer.enabled && !!getWMLayerById(layer.id);
+  }).map(function (layer) {
+    /*
+      We need a wmjsLayer to build the getfeatureinfo url (getWMSGetFeatureInfoRequestURL function).
+      But it seems that its dimension are lazely updated (by ReactMapView).
+      Therefore make a clone of this layer and set its dimensions based on the layer object.
+      Otherwise we risk making a getfeatureinfo call with outdated dimension values.
+    */
+    var wmjsLayer = getWMLayerById(layer.id).cloneLayer();
+    layer.dimensions && layer.dimensions.forEach(function (dim) {
+      var wmDim = wmjsLayer.getDimension(dim.name);
+
+      if (wmDim && wmDim.getValue() !== dim.currentValue) {
+        wmDim.setValue(dim.currentValue);
+      }
+    });
+    return {
+      layerId: layer.id,
+      url: wmjsMap.getWMSGetFeatureInfoRequestURL(wmjsLayer, "".concat(wmjsMap.getMapPin().getXY().x), "".concat(wmjsMap.getMapPin().getXY().y), 'text/html'),
+      title: getTitle(layer.id)
+    };
+  });
+};
+
+var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
+  var layers = _ref.layers,
+      isOpen = _ref.isOpen,
+      onClose = _ref.onClose,
+      _ref$onMouseDown = _ref.onMouseDown,
+      onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+      mapId = _ref.mapId,
+      _ref$showMapId = _ref.showMapId,
+      showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source,
+      mapPinLocation = _ref.mapPinLocation;
+
+  /* Ref and state for maplocation */
+  var mapLocationWasChanged = React__default.useRef(false);
+
+  var _React$useState = React__default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isInitialMapLocationChanged = _React$useState2[0],
+      setInitialMapLocationIsChanged = _React$useState2[1];
+  /* Ref, state and update function for results per layer map */
+
+
+  var gfiResultMap = React__default.useRef(new Map()).current;
+
+  var _React$useState3 = React__default.useState(),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      triggerRerender = _React$useState4[1];
+
+  var updateLayerResult = function updateLayerResult(_ref2) {
+    var layerId = _ref2.layerId,
+        data = _ref2.data,
+        isLoading = _ref2.isLoading;
+    gfiResultMap.set(layerId, {
+      data: data,
+      isLoading: isLoading
+    });
+    triggerRerender("".concat(layerId).concat(isLoading));
+  };
+  /* Build a layerlist array with a set of arguments per layer to do the query for */
+
+
+  var layerToUpdateList = getLayersToUpdate(layers, mapId);
+  /*
+    Build a string based on the GFI urls. If this changes for whatever reason we need to update.
+    These strings can change very often, therefore they need to be debounced and only use the most recent result  must be used.
+  */
+
+  var debouncedlayerListString = useDebounce(layerToUpdateList.map(function (layer) {
+    return layer.url;
+  }).join(','), 100);
+  /* Do a GFI call to the server and use the updateLayerResult to provide the results. */
+
+  var fetchLayerInfo = function fetchLayerInfo(url, layerId) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _yield$axios$get, data, errorMessage;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              updateLayerResult({
+                layerId: layerId,
+                data: '',
+                isLoading: true
+              });
+              _context.next = 4;
+              return axios.get(url);
+
+            case 4:
+              _yield$axios$get = _context.sent;
+              data = _yield$axios$get.data;
+              updateLayerResult({
+                layerId: layerId,
+                data: data,
+                isLoading: false
+              });
+              _context.next = 13;
+              break;
+
+            case 9:
+              _context.prev = 9;
+              _context.t0 = _context["catch"](0);
+              errorMessage = _context.t0.message();
+              updateLayerResult({
+                layerId: layerId,
+                data: errorMessage,
+                isLoading: false
+              });
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 9]]);
+    }));
+  };
+  /*  Wait till the user has clicked the map. */
+
+
+  React__default.useEffect(function () {
+    if (mapLocationWasChanged.current !== false) {
+      setInitialMapLocationIsChanged(true);
+    }
+
+    mapLocationWasChanged.current = true;
+  }, [mapPinLocation]);
+  /* For each changed getfeature url string, load new data using WMS GetFeatureInfo */
+
+  React__default.useEffect(function () {
+    if (isInitialMapLocationChanged && isOpen) {
+      layerToUpdateList.forEach(function (_ref3) {
+        var url = _ref3.url,
+            layerId = _ref3.layerId;
+        fetchLayerInfo(url, layerId);
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [debouncedlayerListString]);
+  var hasLayers = layers && layers.length > 0;
+  return /*#__PURE__*/React__default.createElement(ToolContainerDraggable, {
+    startPosition: {
+      right: 10,
+      top: 80
+    },
+    minWidth: 300,
+    onClose: onClose,
+    title: showMapId ? "Event marker info ".concat(mapId) : 'Event marker info',
+    headerSize: "small",
+    initialMaxHeight: 440,
+    isOpen: isOpen,
+    "data-testid": "moveable-getfeatureinfo",
+    bounds: "parent",
+    onMouseDown: onMouseDown,
+    order: order,
+    source: source
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      padding: 0
+    }
+  }, isOpen && hasLayers && isInitialMapLocationChanged && /*#__PURE__*/React__default.createElement(Box, {
+    "data-testid": "GetFeatureInfoList"
+  }, layerToUpdateList.map(function (layer) {
+    var layerId = layer.layerId,
+        title = layer.title,
+        url = layer.url;
+    var result = gfiResultMap.get(layerId);
+    if (!result) return null;
+    return /*#__PURE__*/React__default.createElement(Grid, {
+      key: layerId,
+      sx: {
+        margin: '4px 6px 4px 6px',
+        padding: '6px',
+        backgroundColor: 'geowebColors.cards.cardContainer',
+        border: 'solid 1px',
+        borderColor: 'geowebColors.cards.cardContainerBorder'
+      }
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "subtitle1"
+    }, title, "\xA0", /*#__PURE__*/React__default.createElement(IconButton, {
+      sx: {
+        "float": 'right'
+      },
+      size: "small",
+      "aria-label": "Open layer featureinfo in another page",
+      onClick: function onClick() {
+        window.open(url);
+      }
+    }, /*#__PURE__*/React__default.createElement(ExitDomain, null))), !result.isLoading ? /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        fontSize: '11px',
+        padding: '6px',
+        margin: '0',
+        fontFamily: 'Roboto,Helvetica,Arial,sans-serif',
+        fontWeight: '400',
+        lineHeight: '1.75',
+        letterSpacing: '0.25px'
+      },
+      "data-testid": "layer-result-ready-".concat(layerId),
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML: {
+        __html: result.data.replace(/<hr\/>/g, '')
+      }
+    }) : /*#__PURE__*/React__default.createElement("div", {
+      "data-testid": "layer-result-loading-".concat(layerId)
+    }, /*#__PURE__*/React__default.createElement(CircularProgress, {
+      "data-testid": "spinner",
+      color: "inherit"
+    })));
+  })), hasLayers && !isInitialMapLocationChanged && /*#__PURE__*/React__default.createElement(Typography, {
+    "data-testid": "click-on-map-for-info",
+    variant: "subtitle1",
+    sx: {
+      padding: '10px'
+    }
+  }, "Click on the map for info."), !hasLayers && /*#__PURE__*/React__default.createElement(Typography, {
+    "data-testid": "NoLayers",
+    variant: "subtitle1",
+    sx: {
+      padding: '10px'
+    }
+  }, "No layers added to the map.")));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var GetFeatureInfoConnect = function GetFeatureInfoConnect(_ref) {
+  var _ref$showMapId = _ref.showMapId,
+      showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
+      mapId = _ref.mapId;
+  var dispatch = useDispatch();
+  var getFeatureInfoType = "getfeatureinfo-".concat(mapId);
+  var isMapPinVisible = useSelector(function (store) {
+    return getDisplayMapPin(store, mapId);
+  });
+  var mapPinLocation = useSelector(function (store) {
+    return getPinLocation(store, mapId);
+  });
+  var toggleMapPinIsVisible = React.useCallback(function (displayMapPin) {
+    dispatch(mapActions$1.toggleMapPinIsVisible({
+      mapId: mapId,
+      displayMapPin: displayMapPin
+    }));
+  }, [dispatch, mapId]);
+  var mapLayers = useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  });
+
+  var _useSetupDialog = useSetupDialog(getFeatureInfoType),
+      dialogOrder = _useSetupDialog.dialogOrder,
+      isDialogOpen = _useSetupDialog.isDialogOpen,
+      uiSource = _useSetupDialog.uiSource,
+      setDialogOrder = _useSetupDialog.setDialogOrder,
+      onCloseDialog = _useSetupDialog.onCloseDialog;
+
+  React.useEffect(function () {
+    toggleMapPinIsVisible(isDialogOpen);
+  }, [isDialogOpen, toggleMapPinIsVisible, isMapPinVisible]);
+  return /*#__PURE__*/React.createElement(GetFeatureInfoDialog, {
+    layers: mapLayers,
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    mapId: mapId,
+    showMapId: showMapId,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: uiSource,
+    mapPinLocation: mapPinLocation
+  });
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var GetFeatureInfoButtonConnect = function GetFeatureInfoButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source;
+  var dispatch = useDispatch();
+  var gfiType = "getfeatureinfo-".concat(mapId);
+  var isOpenInStore = useSelector(function (store) {
+    return getisDialogOpen(store, gfiType);
+  });
+  var openGfiDialog = React.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: gfiType,
+      mapId: mapId,
+      setOpen: !isOpenInStore,
+      source: source,
+      origin: MapActionOrigin.map
+    }));
+  }, [mapId, dispatch, isOpenInStore, source, gfiType]);
+  return /*#__PURE__*/React.createElement(MapControlButton, {
+    title: "Get information for a specific location",
+    "data-testid": "open-getfeatureinfo",
+    onClick: openGfiDialog,
+    isActive: isOpenInStore
+  }, /*#__PURE__*/React.createElement(Info, null));
+};
+
 var titleStyle = function titleStyle(theme) {
   return {
     position: 'absolute',
     padding: '5px',
     zIndex: 50,
     color: theme.palette.common.black,
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
+    userSelect: 'none'
   };
 };
 
@@ -23966,8 +24429,10 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       shouldShowLayerManager = _a.shouldShowLayerManager,
       _a$showClock = _a.showClock,
       showClock = _a$showClock === void 0 ? true : _a$showClock,
+      _a$displayGetFeatureI = _a.displayGetFeatureInfoButtonInMap,
+      displayGetFeatureInfoButtonInMap = _a$displayGetFeatureI === void 0 ? false : _a$displayGetFeatureI,
       children = _a.children,
-      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "showClock", "children"]);
+      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "children"]);
 
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || generateMapId()).current;
@@ -24033,6 +24498,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     multiLegend: multiLegend
   }), displayDimensionSelectButtonInMap && /*#__PURE__*/React__default.createElement(MultiDimensionSelectMapButtonsConnect, {
     mapId: mapId
+  }), displayGetFeatureInfoButtonInMap && /*#__PURE__*/React__default.createElement(GetFeatureInfoButtonConnect, {
+    mapId: mapId
   })), !disableTimeSlider && /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       position: 'absolute',
@@ -24055,6 +24522,9 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     multiLegend: multiLegend
   }), showClock && /*#__PURE__*/React__default.createElement(TimeSliderClockConnect, {
     mapId: mapId
+  }), displayGetFeatureInfoButtonInMap && /*#__PURE__*/React__default.createElement(GetFeatureInfoConnect, {
+    showMapId: true,
+    mapId: mapId
   }), /*#__PURE__*/React__default.createElement(DockedLayerManagerConnect, {
     mapId: mapId,
     bounds: "parent"
@@ -24392,7 +24862,8 @@ var componentsLookUp = function componentsLookUp(_ref) {
         var mapPreset = initialProps.mapPreset;
         return /*#__PURE__*/React__default.createElement(ConfigurableMapConnect, Object.assign({}, mapPreset, {
           id: id,
-          "data-testid": "coreConfigurableMapConnect"
+          "data-testid": "coreConfigurableMapConnect",
+          displayGetFeatureInfoButtonInMap: true
         }));
       }