@opengeoweb/core 4.6.0 → 4.6.1

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/material'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@mui/system'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('react-draggable'), require('re-resizable'), require('@redux-eggs/redux-toolkit'), require('@redux-eggs/saga-extension')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/material', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', '@opengeoweb/form-fields', 'react-hook-form', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@mui/system', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'react-draggable', 're-resizable', '@redux-eggs/redux-toolkit', '@redux-eggs/saga-extension'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.shared, global.theme, global.material, global.webmap, global.reactSortablejs, global.Sortable, global.formFields, global.reactHookForm, global.reactWindow, global.Box, global.Typography, global.Grid, global.system, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.Draggable, global.reResizable, global.reduxToolkit, global.sagaExtension));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, shared, theme, material, webmap, reactSortablejs, Sortable, formFields, reactHookForm, reactWindow, Box, Typography, Grid, system, throttleDebounce, cloneDeep, proj4, turf, Draggable, reResizable, reduxToolkit, sagaExtension) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/material'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@mui/system'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('react-draggable'), require('re-resizable'), require('axios'), require('@opengeoweb/api'), require('@redux-eggs/redux-toolkit'), require('@redux-eggs/saga-extension')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/material', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', '@opengeoweb/form-fields', 'react-hook-form', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@mui/system', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'react-draggable', 're-resizable', 'axios', '@opengeoweb/api', '@redux-eggs/redux-toolkit', '@redux-eggs/saga-extension'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.shared, global.theme, global.material, global.webmap, global.reactSortablejs, global.Sortable, global.formFields, global.reactHookForm, global.reactWindow, global.Box, global.Typography, global.Grid, global.system, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.Draggable, global.reResizable, global.axios, global.api, global.reduxToolkit, global.sagaExtension));
+})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, shared, theme, material, webmap, reactSortablejs, Sortable, formFields, reactHookForm, reactWindow, Box, Typography, Grid, system, throttleDebounce, cloneDeep, proj4, turf, Draggable, reResizable, axios, api, reduxToolkit, sagaExtension) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -37,6 +37,7 @@
     var proj4__default = /*#__PURE__*/_interopDefaultLegacy(proj4);
     var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
     var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
+    var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -4332,6 +4333,47 @@
       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 filterType + "-" + 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;
+        }
+      });
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -4348,17 +4390,13 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
+    var layerSelectFilterAdapter = toolkit.createEntityAdapter();
+    var layerSelectActiveServicesAdapter = toolkit.createEntityAdapter();
     var initialState$1 = {
       filters: {
         searchFilter: '',
-        activeServices: {
-          byId: {},
-          allIds: []
-        },
-        filters: {
-          byId: {},
-          allIds: []
-        }
+        activeServices: layerSelectActiveServicesAdapter.getInitialState(),
+        filters: layerSelectFilterAdapter.getInitialState()
       },
       allServicesEnabled: true,
       activeLayerInfo: {
@@ -4382,66 +4420,68 @@
           draft.allServicesEnabled = allServicesEnabled;
         },
         addFiltersAndActiveServices: function addFiltersAndActiveServices(draft, action) {
-          var _a = action.payload,
-              serviceId = _a.serviceId,
-              serviceName = _a.serviceName,
-              serviceUrl = _a.serviceUrl,
-              _abstract = _a["abstract"],
-              keywords = _a.keywords,
-              scope = _a.scope,
-              groups = _a.groups;
-
-          if (!draft.filters.activeServices.byId[serviceId]) {
-            draft.filters.activeServices.byId[serviceId] = {};
-
-            var addFilters = function addFilters(filterNames, filterType) {
-              filterNames.forEach(function (filterName) {
-                var id = filterType + "-" + 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;
-                }
-              });
+          var _a, _b;
+
+          var _c = action.payload,
+              serviceId = _c.serviceId,
+              serviceName = _c.serviceName,
+              serviceUrl = _c.serviceUrl,
+              _abstract = _c["abstract"],
+              keywords = _c.keywords,
+              scope = _c.scope,
+              groups = _c.groups,
+              isLoading = _c.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 FilterType.Group + "-" + group;
-          }).concat(keywords.map(function (keyword) {
-            return FilterType.Keyword + "-" + 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;
@@ -4449,17 +4489,14 @@
             }
 
             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 e_1, _a;
@@ -4467,12 +4504,12 @@
           var _b = action.payload,
               serviceId = _b.serviceId,
               keywords = _b.filters;
-          draft.filters.activeServices.byId[serviceId].enabled = true;
+          draft.filters.activeServices.entities[serviceId].enabled = true;
 
           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;
-              draft.filters.filters.byId[keyword].amountVisible += 1;
+              draft.filters.filters.entities[keyword].amountVisible += 1;
             }
           } catch (e_1_1) {
             e_1 = {
@@ -4492,12 +4529,12 @@
           var _b = action.payload,
               serviceId = _b.serviceId,
               keywords = _b.filters;
-          draft.filters.activeServices.byId[serviceId].enabled = false;
+          draft.filters.activeServices.entities[serviceId].enabled = false;
 
           try {
             for (var keywords_2 = __values(keywords), keywords_2_1 = keywords_2.next(); !keywords_2_1.done; keywords_2_1 = keywords_2.next()) {
               var keyword = keywords_2_1.value;
-              draft.filters.filters.byId[keyword].amountVisible -= 1;
+              draft.filters.filters.entities[keyword].amountVisible -= 1;
             }
           } catch (e_2_1) {
             e_2 = {
@@ -4514,15 +4551,15 @@
         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;
@@ -4618,21 +4655,30 @@
 
 
     var getSearchFilter = toolkit.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 = toolkit.createSelector(layerSelectStore, function (store) {
-      var _a;
+    var getActiveServices = function getActiveServices(store) {
+      return getActiveServicesDictionary(store);
+    };
+    var getActiveServicesDictionary = layerSelectActiveServicesAdapter.getSelectors(function (store) {
+      var _a, _b;
 
-      return store ? (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId : {};
-    }, 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.activeServices) || {
+        entities: {},
+        ids: []
+      };
+    }).selectEntities;
     /**
      * Returns active services by id
      *
@@ -4643,9 +4689,9 @@
      */
 
     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;
     };
     /**
@@ -4659,10 +4705,10 @@
     var getEnabledServiceIds = toolkit.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);
@@ -4675,17 +4721,17 @@
      */
 
     var getCheckedFilterIds = toolkit.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);
     /**
@@ -4695,12 +4741,19 @@
      * @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 = toolkit.createSelector(layerSelectStore, function (store) {
+    var getAllFilterIds = function getAllFilterIds(store) {
+      return getAllFilterIdsEntity(store);
+    };
+    var getAllFilterIdsEntity = 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: []
+      };
+    }).selectIds;
     /**
      * Returns all filters
      *
@@ -4709,15 +4762,14 @@
      * @returns {array} returnType: array of all filters
      */
 
-    var getAllFilters = toolkit.createSelector(layerSelectStore, function (store) {
-      var filters = store === null || store === void 0 ? void 0 : store.filters.filters.byId;
-
-      if (filters) {
-        return Object.values(filters);
-      }
+    var getAllFilters = layerSelectFilterAdapter.getSelectors(function (store) {
+      var _a, _b;
 
-      return [];
-    });
+      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: []
+      };
+    }).selectAll;
     /**
      * Returns if all keywords are checked
      *
@@ -4729,12 +4781,29 @@
     var isAllFiltersChecked = toolkit.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;
       });
     });
+    /**
+     * Gets a KeywordObject by its id
+     *
+     * 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)
+     */
+
+    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: []
+      };
+    }).selectById;
     /**
      * Returns the active layer info
      *
@@ -8716,7 +8785,8 @@
               keywords: keywords,
               scope: scope,
               groups: groups,
-              "abstract": _abstract
+              "abstract": _abstract,
+              isLoading: false
             }))];
 
           case 1:
@@ -8868,7 +8938,7 @@
             results = _a.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)) return [3
             /*break*/
@@ -8882,7 +8952,7 @@
 
               return effects.put(layerSelectActions.enableActiveService({
                 serviceId: serviceId,
-                filters: service.filterIds
+                filters: service === null || service === void 0 ? void 0 : service.filterIds
               }));
             }))];
 
@@ -12557,18 +12627,36 @@
       var serviceSetLayers = React__namespace.useCallback(function (payload) {
         dispatch(serviceActions.serviceSetLayers(payload));
       }, [dispatch]);
+      var addFiltersAndActiveServices = React__namespace.useCallback(function (payload) {
+        dispatch(layerSelectActions.addFiltersAndActiveServices(payload));
+      }, [dispatch]);
       React__namespace.useEffect(function () {
         if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
           mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
+            var wmService = webmap.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 = webmap.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"]
                 });
@@ -12577,9 +12665,8 @@
               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(__assign(__assign({}, presets.reduce(function (byUrl, preset) {
@@ -12886,7 +12973,9 @@
 
       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;
     };
@@ -12916,7 +13005,9 @@
 
 
       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) {
@@ -14163,7 +14254,7 @@
         var _d = __read(_b, 2),
             b = _d[1];
 
-        return a.serviceName.localeCompare(b.serviceName);
+        return a.serviceName.localeCompare(b === null || b === void 0 ? void 0 : b.serviceName);
       }).reduce(function (r, _a) {
         var _b;
 
@@ -14487,7 +14578,7 @@
       var chip = all ? 'all' : service && service.serviceUrl;
       return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
         title: (service === null || service === void 0 ? void 0 : service["abstract"]) ? "Abstract: " + service["abstract"] : ''
-      }, /*#__PURE__*/React__namespace.createElement(shared.CustomToggleButton, {
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.CustomToggleButton, {
         variant: "boxed",
         selected: isSelected,
         tabIndex: 0,
@@ -14500,7 +14591,7 @@
         },
         disabled: isDisabled,
         sx: style
-      }, service ? service.serviceName : 'All'));
+      }, service ? service.serviceName : 'All')));
     };
 
     /* *
@@ -14674,7 +14765,7 @@
         all: true,
         isSelected: isAllSelected
       }), Object.keys(activeServices).map(function (serviceId) {
-        var _a;
+        var _a, _b;
 
         var service = activeServices[serviceId];
         return /*#__PURE__*/React__namespace.createElement(ServiceChipConnect, {
@@ -14683,7 +14774,7 @@
           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
         });
       })));
     };
@@ -14953,7 +15044,9 @@
     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]];
@@ -15852,7 +15945,8 @@
           left: 0,
           margin: 1,
           zIndex: 50,
-          top: '96px'
+          top: '96px',
+          userSelect: 'none'
         }
       }, props), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         sx: {
@@ -24714,6 +24808,398 @@
       });
     };
 
+    /* *
+     * 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, "" + wmjsMap.getMapPin().getXY().x, "" + wmjsMap.getMapPin().getXY().y, 'text/html'),
+          title: getTitle(layer.id)
+        };
+      });
+    };
+
+    /* *
+     * 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 GetFeatureInfoDialog = function GetFeatureInfoDialog(_a) {
+      var layers = _a.layers,
+          isOpen = _a.isOpen,
+          onClose = _a.onClose,
+          _b = _a.onMouseDown,
+          onMouseDown = _b === void 0 ? function () {} : _b,
+          mapId = _a.mapId,
+          _c = _a.showMapId,
+          showMapId = _c === void 0 ? false : _c,
+          _d = _a.order,
+          order = _d === void 0 ? 0 : _d,
+          _e = _a.source,
+          source = _e === void 0 ? 'app' : _e,
+          mapPinLocation = _a.mapPinLocation;
+      /* Ref and state for maplocation */
+
+      var mapLocationWasChanged = React__default["default"].useRef(false);
+
+      var _f = __read(React__default["default"].useState(false), 2),
+          isInitialMapLocationChanged = _f[0],
+          setInitialMapLocationIsChanged = _f[1];
+      /* Ref, state and update function for results per layer map */
+
+
+      var gfiResultMap = React__default["default"].useRef(new Map()).current;
+
+      var _g = __read(React__default["default"].useState(), 2),
+          triggerRerender = _g[1];
+
+      var updateLayerResult = function updateLayerResult(_a) {
+        var layerId = _a.layerId,
+            data = _a.data,
+            isLoading = _a.isLoading;
+        gfiResultMap.set(layerId, {
+          data: data,
+          isLoading: isLoading
+        });
+        triggerRerender("" + layerId + 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 = api.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, function () {
+          var data, error_1, errorMessage;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                _a.trys.push([0, 2,, 3]);
+
+                updateLayerResult({
+                  layerId: layerId,
+                  data: '',
+                  isLoading: true
+                });
+                return [4
+                /*yield*/
+                , axios__default["default"].get(url)];
+
+              case 1:
+                data = _a.sent().data;
+                updateLayerResult({
+                  layerId: layerId,
+                  data: data,
+                  isLoading: false
+                });
+                return [3
+                /*break*/
+                , 3];
+
+              case 2:
+                error_1 = _a.sent();
+                errorMessage = error_1.message();
+                updateLayerResult({
+                  layerId: layerId,
+                  data: errorMessage,
+                  isLoading: false
+                });
+                return [3
+                /*break*/
+                , 3];
+
+              case 3:
+                return [2
+                /*return*/
+                ];
+            }
+          });
+        });
+      };
+      /*  Wait till the user has clicked the map. */
+
+
+      React__default["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["default"].useEffect(function () {
+        if (isInitialMapLocationChanged && isOpen) {
+          layerToUpdateList.forEach(function (_a) {
+            var url = _a.url,
+                layerId = _a.layerId;
+            fetchLayerInfo(url, layerId);
+          });
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+      }, [debouncedlayerListString]);
+      var hasLayers = layers && layers.length > 0;
+      return /*#__PURE__*/React__default["default"].createElement(shared.ToolContainerDraggable, {
+        startPosition: {
+          right: 10,
+          top: 80
+        },
+        minWidth: 300,
+        onClose: onClose,
+        title: showMapId ? "Event marker info " + 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["default"].createElement(material.Box, {
+        sx: {
+          padding: 0
+        }
+      }, isOpen && hasLayers && isInitialMapLocationChanged && /*#__PURE__*/React__default["default"].createElement(material.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["default"].createElement(material.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["default"].createElement(material.Typography, {
+          variant: "subtitle1"
+        }, title, "\xA0", /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+          sx: {
+            "float": 'right'
+          },
+          size: "small",
+          "aria-label": "Open layer featureinfo in another page",
+          onClick: function onClick() {
+            window.open(url);
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(theme.ExitDomain, null))), !result.isLoading ? /*#__PURE__*/React__default["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-" + layerId,
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: result.data.replace(/<hr\/>/g, '')
+          }
+        }) : /*#__PURE__*/React__default["default"].createElement("div", {
+          "data-testid": "layer-result-loading-" + layerId
+        }, /*#__PURE__*/React__default["default"].createElement(material.CircularProgress, {
+          "data-testid": "spinner",
+          color: "inherit"
+        })));
+      })), hasLayers && !isInitialMapLocationChanged && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        "data-testid": "click-on-map-for-info",
+        variant: "subtitle1",
+        sx: {
+          padding: '10px'
+        }
+      }, "Click on the map for info."), !hasLayers && /*#__PURE__*/React__default["default"].createElement(material.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(_a) {
+      var _b = _a.showMapId,
+          showMapId = _b === void 0 ? false : _b,
+          mapId = _a.mapId;
+      var dispatch = reactRedux.useDispatch();
+      var getFeatureInfoType = "getfeatureinfo-" + mapId;
+      var isMapPinVisible = reactRedux.useSelector(function (store) {
+        return getDisplayMapPin(store, mapId);
+      });
+      var mapPinLocation = reactRedux.useSelector(function (store) {
+        return getPinLocation(store, mapId);
+      });
+      var toggleMapPinIsVisible = React__namespace.useCallback(function (displayMapPin) {
+        dispatch(mapActions$1.toggleMapPinIsVisible({
+          mapId: mapId,
+          displayMapPin: displayMapPin
+        }));
+      }, [dispatch, mapId]);
+      var mapLayers = reactRedux.useSelector(function (store) {
+        return getMapLayers(store, mapId);
+      });
+
+      var _c = useSetupDialog(getFeatureInfoType),
+          dialogOrder = _c.dialogOrder,
+          isDialogOpen = _c.isDialogOpen,
+          uiSource = _c.uiSource,
+          setDialogOrder = _c.setDialogOrder,
+          onCloseDialog = _c.onCloseDialog;
+
+      React__namespace.useEffect(function () {
+        toggleMapPinIsVisible(isDialogOpen);
+      }, [isDialogOpen, toggleMapPinIsVisible, isMapPinVisible]);
+      return /*#__PURE__*/React__namespace.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(_a) {
+      var mapId = _a.mapId,
+          _b = _a.source,
+          source = _b === void 0 ? 'app' : _b;
+      var dispatch = reactRedux.useDispatch();
+      var gfiType = "getfeatureinfo-" + mapId;
+      var isOpenInStore = reactRedux.useSelector(function (store) {
+        return getisDialogOpen(store, gfiType);
+      });
+      var openGfiDialog = React__namespace.useCallback(function () {
+        dispatch(uiActions.setActiveMapIdForDialog({
+          type: gfiType,
+          mapId: mapId,
+          setOpen: !isOpenInStore,
+          source: source,
+          origin: MapActionOrigin.map
+        }));
+      }, [mapId, dispatch, isOpenInStore, source, gfiType]);
+      return /*#__PURE__*/React__namespace.createElement(MapControlButton, {
+        title: "Get information for a specific location",
+        "data-testid": "open-getfeatureinfo",
+        onClick: openGfiDialog,
+        isActive: isOpenInStore
+      }, /*#__PURE__*/React__namespace.createElement(theme.Info, null));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -24737,7 +25223,8 @@
         padding: '5px',
         zIndex: 50,
         color: theme.palette.common.black,
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        userSelect: 'none'
       };
     };
 
@@ -24782,8 +25269,10 @@
           shouldShowLayerManager = _a.shouldShowLayerManager,
           _q = _a.showClock,
           showClock = _q === void 0 ? true : _q,
+          _r = _a.displayGetFeatureInfoButtonInMap,
+          displayGetFeatureInfoButtonInMap = _r === void 0 ? false : _r,
           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 = reactRedux.useDispatch();
       var mapId = React__default["default"].useRef(id || generateMapId()).current;
@@ -24851,6 +25340,8 @@
         multiLegend: multiLegend
       }), displayDimensionSelectButtonInMap && /*#__PURE__*/React__default["default"].createElement(MultiDimensionSelectMapButtonsConnect, {
         mapId: mapId
+      }), displayGetFeatureInfoButtonInMap && /*#__PURE__*/React__default["default"].createElement(GetFeatureInfoButtonConnect, {
+        mapId: mapId
       })), !disableTimeSlider && /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
           position: 'absolute',
@@ -24873,6 +25364,9 @@
         multiLegend: multiLegend
       }), showClock && /*#__PURE__*/React__default["default"].createElement(TimeSliderClockConnect, {
         mapId: mapId
+      }), displayGetFeatureInfoButtonInMap && /*#__PURE__*/React__default["default"].createElement(GetFeatureInfoConnect, {
+        showMapId: true,
+        mapId: mapId
       }), /*#__PURE__*/React__default["default"].createElement(DockedLayerManagerConnect, {
         mapId: mapId,
         bounds: "parent"
@@ -25242,7 +25736,8 @@
             var mapPreset = initialProps.mapPreset;
             return /*#__PURE__*/React__default["default"].createElement(ConfigurableMapConnect, __assign({}, mapPreset, {
               id: id,
-              "data-testid": "coreConfigurableMapConnect"
+              "data-testid": "coreConfigurableMapConnect",
+              displayGetFeatureInfoButtonInMap: true
             }));
           }