@opengeoweb/core 2.14.0 → 2.15.0

package/index.esm.js

@@ -13,6 +13,7 @@ import makeStyles from '@mui/styles/makeStyles';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { Sortable, ReactSortable } from 'react-sortablejs';
 import createStyles from '@mui/styles/createStyles';
+import { FixedSizeList } from 'react-window';
 import withStyles from '@mui/styles/withStyles';
 import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
@@ -971,6 +972,8 @@ var createMap = function createMap(_ref) {
       activeMapPresetId = _ref$activeMapPresetI === void 0 ? null : _ref$activeMapPresetI,
       _ref$displayMapPin = _ref.displayMapPin,
       displayMapPin = _ref$displayMapPin === void 0 ? false : _ref$displayMapPin,
+      _ref$disableMapPin = _ref.disableMapPin,
+      disableMapPin = _ref$disableMapPin === void 0 ? false : _ref$disableMapPin,
       _ref$shouldShowZoomCo = _ref.shouldShowZoomControls,
       shouldShowZoomControls = _ref$shouldShowZoomCo === void 0 ? true : _ref$shouldShowZoomCo;
   return {
@@ -998,6 +1001,7 @@ var createMap = function createMap(_ref) {
     isTimeSliderVisible: isTimeSliderVisible,
     activeMapPresetId: activeMapPresetId,
     displayMapPin: displayMapPin,
+    disableMapPin: disableMapPin,
     shouldShowZoomControls: shouldShowZoomControls
   };
 };
@@ -4150,11 +4154,11 @@ var getPinLocation = createSelector(getMapById, function (store) {
  * Example getDisableMapPin(store);
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
- * @returns {boolean} returnType: boolean or undefined
+ * @returns {boolean} returnType: boolean
  */
 
 var getDisableMapPin = createSelector(getMapById, function (store) {
-  return store ? store.disableMapPin : undefined;
+  return store ? store.disableMapPin : false;
 });
 /**
  * Returns the diplay map pin boolean for the current map
@@ -7307,7 +7311,7 @@ var LegendDialog = function LegendDialog(_ref) {
   }, "No layers")));
 };
 
-var IS_LEGEND_OPEN_BY_DEFAULT = true;
+var IS_LEGEND_OPEN_BY_DEFAULT = false;
 
 var LegendConnectComponent = function LegendConnectComponent(_ref) {
   var _ref$showMapId = _ref.showMapId,
@@ -9012,6 +9016,12 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
     }
   };
 
+  React.useEffect(function () {
+    if (!isEqual(preloadedServices, services)) {
+      setServices(preloadedServices);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [preloadedServices]);
   return /*#__PURE__*/React.createElement(Dialog, {
     fullWidth: true,
     maxWidth: "md",
@@ -9126,10 +9136,22 @@ var AddLayersButton = function AddLayersButton(_ref) {
       open = _React$useState2[0],
       setOpen = _React$useState2[1];
 
+  var _React$useState3 = React.useState(shouldFocus),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isTooltipDisabled = _React$useState4[0],
+      setTooltipDisabled = _React$useState4[1];
+
   var handleClose = function handleClose() {
     setOpen(!open);
   };
 
+  var onBlurTooltip = function onBlurTooltip(event) {
+    // enable tooltip again after user blurs
+    if (event.relatedTarget) {
+      setTooltipDisabled(false);
+    }
+  };
+
   React.useEffect(function () {
     if (shouldFocus && ref.current) {
       ref.current.focus();
@@ -9137,7 +9159,9 @@ var AddLayersButton = function AddLayersButton(_ref) {
 
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: tooltip
+    title: tooltip,
+    disableFocusListener: isTooltipDisabled,
+    onBlur: onBlurTooltip
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: handleClose,
     sx: styles$2.button,
@@ -11938,16 +11962,29 @@ var LayerList = function LayerList(_ref) {
       mapLayers = _ref.mapLayers,
       keywordIds = _ref.keywordIds,
       allKeywordsActive = _ref.allKeywordsActive;
+  var layerSelectFilterHeight = 199;
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       numberOfLayers = _React$useState2[0],
       setNumberOfLayers = _React$useState2[1];
 
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      layersFilteredFromService = _React$useState4[0],
+      setLayersFilteredFromService = _React$useState4[1];
+
   React.useEffect(function () {
     setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
       return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).length;
     }, 0));
+    setLayersFilteredFromService(serviceIds.reduce(function (layerList, serviceId) {
+      return layerList.concat(filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer) {
+        return Object.assign(Object.assign({}, layer), {
+          serviceId: serviceId
+        });
+      }));
+    }, []));
   }, [serviceIds, keywordIds, services, searchString, allKeywordsActive]);
   return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "layerList"
@@ -11956,25 +11993,26 @@ var LayerList = function LayerList(_ref) {
       marginBottom: '4px',
       fontSize: '12px'
     }
-  }, numberOfLayers, " results"), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      height: layerSelectHeight - 199,
-      overflow: 'auto'
-    }
-  }, serviceIds.map(function (serviceId) {
-    return filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer, layerIndex) {
-      return /*#__PURE__*/React.createElement(LayerListRow, {
-        key: layer.name,
-        layer: layer,
-        layerIndex: layerIndex,
-        service: services[serviceId],
-        serviceUrl: services[serviceId].serviceUrl,
-        addLayer: addLayer,
-        deleteLayer: deleteLayer,
-        mapLayers: mapLayers
-      });
-    });
-  })));
+  }, numberOfLayers, " results"), /*#__PURE__*/React.createElement(FixedSizeList, {
+    height: layerSelectHeight - layerSelectFilterHeight,
+    itemCount: numberOfLayers,
+    itemSize: 68
+  }, function (_ref2) {
+    var index = _ref2.index,
+        style = _ref2.style;
+    return /*#__PURE__*/React.createElement("div", {
+      style: style,
+      key: layersFilteredFromService[index].name
+    }, /*#__PURE__*/React.createElement(LayerListRow, {
+      layer: layersFilteredFromService[index],
+      layerIndex: index,
+      service: services[layersFilteredFromService[index].serviceId],
+      serviceUrl: services[layersFilteredFromService[index].serviceId].serviceUrl,
+      addLayer: addLayer,
+      deleteLayer: deleteLayer,
+      mapLayers: mapLayers
+    }));
+  }));
 };
 
 /* *
@@ -12796,40 +12834,6 @@ var KeywordFilterResultsListItemConnect = function KeywordFilterResultsListItemC
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var CustomSwitch = withStyles(function (theme) {
-  return {
-    switchBase: {
-      '&$checked': {
-        color: theme.palette.geowebColors.customSlider.thumb
-      },
-      '&$checked + $track': {
-        backgroundColor: theme.palette.geowebColors.buttons.primary["default"].fill
-      }
-    },
-    checked: {},
-    track: {
-      backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
-      opacity: '1 !important'
-    }
-  };
-})(Switch);
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -12866,7 +12870,7 @@ var KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchC
       keywords: keywords
     }));
   }, [allKeywordIds, allKeywordsActive, checkedKeywordIds, dispatch]);
-  return /*#__PURE__*/React.createElement(CustomSwitch, {
+  return /*#__PURE__*/React.createElement(Switch, {
     checked: allKeywordsActive,
     onChange: toggleKeywords,
     "data-testid": "customSwitch"
@@ -14448,31 +14452,6 @@ var useStyles$b = makeStyles(function (theme) {
     disabled: {}
   };
 });
-var TimeStepSwitch = withStyles(function (theme) {
-  return {
-    root: {
-      marginLeft: '18px'
-    },
-    thumb: {
-      width: 20,
-      height: 20,
-      margin: '0 0 0 0'
-    },
-    switchBase: {
-      '&$checked': {
-        color: theme.palette.geowebColors.customSlider.thumb
-      },
-      '&$checked + $track': {
-        backgroundColor: theme.palette.geowebColors.customSlider.switchTrack
-      }
-    },
-    checked: {},
-    track: {
-      backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
-      opacity: '1 !important'
-    }
-  };
-})(Switch);
 
 var TimeStepButton = function TimeStepButton(_ref) {
   var timeStep = _ref.timeStep,
@@ -14575,14 +14554,17 @@ var TimeStepButton = function TimeStepButton(_ref) {
   }, /*#__PURE__*/React.createElement("span", {
     "data-testid": "timestepAutoSwitchTooltip"
   }, /*#__PURE__*/React.createElement(FormControlLabel, {
-    control: /*#__PURE__*/React.createElement(TimeStepSwitch, {
+    control: /*#__PURE__*/React.createElement(Switch, {
       checked: isTimestepAuto,
       onChange: function onChange() {
         return onToggleTimestepAuto();
       },
       disabled: disabled,
       id: "timestepAutoSwitch",
-      disableRipple: true
+      disableRipple: true,
+      sx: {
+        marginLeft: '18px'
+      }
     }),
     label: "Auto",
     labelPlacement: "end",
@@ -20405,8 +20387,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
 
       if (!prevProps || prevProps.disableMapPin !== props.disableMapPin) {
-        if (!(props.disableMapPin === undefined)) {
-          this.adaguc.webMapJS.getMapPin().toggleDisableMapPin();
+        if (props.disableMapPin === true) {
+          this.adaguc.webMapJS.getMapPin().setMapPinDisabled();
+        } else if (props.disableMapPin === false) {
+          this.adaguc.webMapJS.getMapPin().setMapPinEnabled();
         }
       }
       /* Change the animation delay */
@@ -20751,7 +20735,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         _this4.onUpdateBBoxListener(newBbox);
       }, true);
       this.adaguc.webMapJS.addListener('onsetmappin', function (mapPinLatLonCoordinate) {
-        if (onMapPinChangeLocation) {
+        // only change location when mapPin is visible and enabled
+        if (onMapPinChangeLocation && // eslint-disable-next-line react/destructuring-assignment
+        _this4.props.displayMapPin && // eslint-disable-next-line react/destructuring-assignment
+        !_this4.props.disableMapPin) {
           onMapPinChangeLocation({
             mapPinLocation: {
               lat: mapPinLatLonCoordinate.lat,
@@ -20866,6 +20853,7 @@ ReactMapView.defaultProps = {
   },
   shouldAutoFetch: true,
   displayMapPin: false,
+  disableMapPin: false,
   onMount: function onMount() {
     return null;
   },
@@ -21390,7 +21378,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       displayDimensionSelectButtonInMap = _a$displayDimensionSe === void 0 ? true : _a$displayDimensionSe,
       _a$multiLegend = _a.multiLegend,
       multiLegend = _a$multiLegend === void 0 ? true : _a$multiLegend,
-      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend"]);
+      shouldShowLayerManager = _a.shouldShowLayerManager,
+      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager"]);
 
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || generateMapId()).current;
@@ -21419,7 +21408,17 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     dispatch(mapActions$1.setMapPreset({
       mapId: mapId,
       initialProps: initialProps
-    })); // eslint-disable-next-line react-hooks/exhaustive-deps
+    }));
+
+    if (shouldShowLayerManager !== undefined) {
+      dispatch(uiActions.setActiveMapIdForDialog({
+        type: 'layerManager',
+        mapId: mapId,
+        setOpen: shouldShowLayerManager,
+        source: 'app'
+      }));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
   return /*#__PURE__*/React__default.createElement(Box, {
     sx: {
@@ -22437,21 +22436,17 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement("h1", {
     "data-testid": "map-warning-properties-title"
-  }, selectedFeatureProperties.country), selectedFeatureProperties.details[0].event && /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, "Event: ", selectedFeatureProperties.details[0].event), selectedFeatureProperties.details[0].sent && /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, "Sent:", ' ', moment.utc(selectedFeatureProperties.details[0].sent).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].expires && /*#__PURE__*/React__default.createElement("pre", {
+  }, selectedFeatureProperties.areaDesc), selectedFeatureProperties.areaDesc && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Expires:", ' ', moment.utc(selectedFeatureProperties.details[0].expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].web && /*#__PURE__*/React__default.createElement("pre", {
+  }, "event: ", selectedFeatureProperties.languages[2].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Web: ", selectedFeatureProperties.details[0].web), selectedFeatureProperties.details[0].sender && /*#__PURE__*/React__default.createElement("pre", {
+  }, "Sent:", ' ', moment.utc(selectedFeatureProperties.onset).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.expires && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Sender: ", selectedFeatureProperties.details[0].sender), selectedFeatureProperties.details[0].identifier && /*#__PURE__*/React__default.createElement("pre", {
+  }, "Expires:", ' ', moment.utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[2].senderName && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Identifier: ", selectedFeatureProperties.details[0].identifier), selectedFeatureProperties.details[0].area && /*#__PURE__*/React__default.createElement("pre", {
+  }, "Sender: ", selectedFeatureProperties.languages[2].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "area: ", selectedFeatureProperties.details[0].area));
+  }, "Identifier: ", selectedFeatureProperties.identifier));
 };
 
 /* *

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('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/styles/makeStyles'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/styles/makeStyles', '@opengeoweb/webmap', 'react-sortablejs', '@mui/styles/createStyles', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], 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.material, global.shared, global.theme, global.makeStyles, global.webmap, global.reactSortablejs, global.createStyles, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, makeStyles, webmap, reactSortablejs, createStyles, withStyles, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { '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('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/styles/makeStyles'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('react-window'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/styles/makeStyles', '@opengeoweb/webmap', 'react-sortablejs', '@mui/styles/createStyles', 'react-window', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], 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.material, global.shared, global.theme, global.makeStyles, global.webmap, global.reactSortablejs, global.createStyles, global.reactWindow, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
+})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, makeStyles, webmap, reactSortablejs, createStyles, reactWindow, withStyles, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -822,8 +822,10 @@
           activeMapPresetId = _y === void 0 ? null : _y,
           _z = _a.displayMapPin,
           displayMapPin = _z === void 0 ? false : _z,
-          _0 = _a.shouldShowZoomControls,
-          shouldShowZoomControls = _0 === void 0 ? true : _0;
+          _0 = _a.disableMapPin,
+          disableMapPin = _0 === void 0 ? false : _0,
+          _1 = _a.shouldShowZoomControls,
+          shouldShowZoomControls = _1 === void 0 ? true : _1;
       return {
         id: id,
         isAnimating: isAnimating,
@@ -849,6 +851,7 @@
         isTimeSliderVisible: isTimeSliderVisible,
         activeMapPresetId: activeMapPresetId,
         displayMapPin: displayMapPin,
+        disableMapPin: disableMapPin,
         shouldShowZoomControls: shouldShowZoomControls
       };
     };
@@ -4067,11 +4070,11 @@
      * Example getDisableMapPin(store);
      * @param {object} store store: object - store object
      * @param {string} mapId mapId: string - Id of the map
-     * @returns {boolean} returnType: boolean or undefined
+     * @returns {boolean} returnType: boolean
      */
 
     var getDisableMapPin = toolkit.createSelector(getMapById, function (store) {
-      return store ? store.disableMapPin : undefined;
+      return store ? store.disableMapPin : false;
     });
     /**
      * Returns the diplay map pin boolean for the current map
@@ -7433,7 +7436,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var IS_LEGEND_OPEN_BY_DEFAULT = true;
+    var IS_LEGEND_OPEN_BY_DEFAULT = false;
 
     var LegendConnectComponent = function LegendConnectComponent(_a) {
       var _b = _a.showMapId,
@@ -9356,6 +9359,12 @@
         }
       };
 
+      React__namespace.useEffect(function () {
+        if (!_.isEqual(preloadedServices, services)) {
+          setServices(preloadedServices);
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+      }, [preloadedServices]);
       return /*#__PURE__*/React__namespace.createElement(material.Dialog, {
         fullWidth: true,
         maxWidth: "md",
@@ -9485,10 +9494,21 @@
           open = _f[0],
           setOpen = _f[1];
 
+      var _g = __read(React__namespace.useState(shouldFocus), 2),
+          isTooltipDisabled = _g[0],
+          setTooltipDisabled = _g[1];
+
       var handleClose = function handleClose() {
         setOpen(!open);
       };
 
+      var onBlurTooltip = function onBlurTooltip(event) {
+        // enable tooltip again after user blurs
+        if (event.relatedTarget) {
+          setTooltipDisabled(false);
+        }
+      };
+
       React__namespace.useEffect(function () {
         if (shouldFocus && ref.current) {
           ref.current.focus();
@@ -9496,7 +9516,9 @@
 
       }, []);
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: tooltip
+        title: tooltip,
+        disableFocusListener: isTooltipDisabled,
+        onBlur: onBlurTooltip
       }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         onClick: handleClose,
         sx: styles$2.button,
@@ -12437,15 +12459,27 @@
           mapLayers = _a.mapLayers,
           keywordIds = _a.keywordIds,
           allKeywordsActive = _a.allKeywordsActive;
+      var layerSelectFilterHeight = 199;
 
       var _b = __read(React__namespace.useState(0), 2),
           numberOfLayers = _b[0],
           setNumberOfLayers = _b[1];
 
+      var _c = __read(React__namespace.useState([]), 2),
+          layersFilteredFromService = _c[0],
+          setLayersFilteredFromService = _c[1];
+
       React__namespace.useEffect(function () {
         setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
           return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).length;
         }, 0));
+        setLayersFilteredFromService(serviceIds.reduce(function (layerList, serviceId) {
+          return layerList.concat(filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer) {
+            return __assign(__assign({}, layer), {
+              serviceId: serviceId
+            });
+          }));
+        }, []));
       }, [serviceIds, keywordIds, services, searchString, allKeywordsActive]);
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "layerList"
@@ -12454,25 +12488,26 @@
           marginBottom: '4px',
           fontSize: '12px'
         }
-      }, numberOfLayers, " results"), /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: {
-          height: layerSelectHeight - 199,
-          overflow: 'auto'
-        }
-      }, serviceIds.map(function (serviceId) {
-        return filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer, layerIndex) {
-          return /*#__PURE__*/React__namespace.createElement(LayerListRow, {
-            key: layer.name,
-            layer: layer,
-            layerIndex: layerIndex,
-            service: services[serviceId],
-            serviceUrl: services[serviceId].serviceUrl,
-            addLayer: addLayer,
-            deleteLayer: deleteLayer,
-            mapLayers: mapLayers
-          });
-        });
-      })));
+      }, numberOfLayers, " results"), /*#__PURE__*/React__namespace.createElement(reactWindow.FixedSizeList, {
+        height: layerSelectHeight - layerSelectFilterHeight,
+        itemCount: numberOfLayers,
+        itemSize: 68
+      }, function (_a) {
+        var index = _a.index,
+            style = _a.style;
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          style: style,
+          key: layersFilteredFromService[index].name
+        }, /*#__PURE__*/React__namespace.createElement(LayerListRow, {
+          layer: layersFilteredFromService[index],
+          layerIndex: index,
+          service: services[layersFilteredFromService[index].serviceId],
+          serviceUrl: services[layersFilteredFromService[index].serviceId].serviceUrl,
+          addLayer: addLayer,
+          deleteLayer: deleteLayer,
+          mapLayers: mapLayers
+        }));
+      }));
     };
 
     /* *
@@ -13394,40 +13429,6 @@
       });
     };
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
-    var CustomSwitch = withStyles__default["default"](function (theme) {
-      return {
-        switchBase: {
-          '&$checked': {
-            color: theme.palette.geowebColors.customSlider.thumb
-          },
-          '&$checked + $track': {
-            backgroundColor: theme.palette.geowebColors.buttons.primary["default"].fill
-          }
-        },
-        checked: {},
-        track: {
-          backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
-          opacity: '1 !important'
-        }
-      };
-    })(material.Switch);
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -13464,7 +13465,7 @@
           keywords: keywords
         }));
       }, [allKeywordIds, allKeywordsActive, checkedKeywordIds, dispatch]);
-      return /*#__PURE__*/React__namespace.createElement(CustomSwitch, {
+      return /*#__PURE__*/React__namespace.createElement(material.Switch, {
         checked: allKeywordsActive,
         onChange: toggleKeywords,
         "data-testid": "customSwitch"
@@ -15088,31 +15089,6 @@
         disabled: {}
       };
     });
-    var TimeStepSwitch = withStyles__default["default"](function (theme) {
-      return {
-        root: {
-          marginLeft: '18px'
-        },
-        thumb: {
-          width: 20,
-          height: 20,
-          margin: '0 0 0 0'
-        },
-        switchBase: {
-          '&$checked': {
-            color: theme.palette.geowebColors.customSlider.thumb
-          },
-          '&$checked + $track': {
-            backgroundColor: theme.palette.geowebColors.customSlider.switchTrack
-          }
-        },
-        checked: {},
-        track: {
-          backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
-          opacity: '1 !important'
-        }
-      };
-    })(material.Switch);
 
     var TimeStepButton = function TimeStepButton(_a) {
       var timeStep = _a.timeStep,
@@ -15214,14 +15190,17 @@
       }, /*#__PURE__*/React__namespace.createElement("span", {
         "data-testid": "timestepAutoSwitchTooltip"
       }, /*#__PURE__*/React__namespace.createElement(material.FormControlLabel, {
-        control: /*#__PURE__*/React__namespace.createElement(TimeStepSwitch, {
+        control: /*#__PURE__*/React__namespace.createElement(material.Switch, {
           checked: isTimestepAuto,
           onChange: function onChange() {
             return onToggleTimestepAuto();
           },
           disabled: disabled,
           id: "timestepAutoSwitch",
-          disableRipple: true
+          disableRipple: true,
+          sx: {
+            marginLeft: '18px'
+          }
         }),
         label: "Auto",
         labelPlacement: "end",
@@ -21052,8 +21031,10 @@
 
 
         if (!prevProps || prevProps.disableMapPin !== props.disableMapPin) {
-          if (!(props.disableMapPin === undefined)) {
-            this.adaguc.webMapJS.getMapPin().toggleDisableMapPin();
+          if (props.disableMapPin === true) {
+            this.adaguc.webMapJS.getMapPin().setMapPinDisabled();
+          } else if (props.disableMapPin === false) {
+            this.adaguc.webMapJS.getMapPin().setMapPinEnabled();
           }
         }
         /* Change the animation delay */
@@ -21376,7 +21357,10 @@
           _this.onUpdateBBoxListener(newBbox);
         }, true);
         this.adaguc.webMapJS.addListener('onsetmappin', function (mapPinLatLonCoordinate) {
-          if (onMapPinChangeLocation) {
+          // only change location when mapPin is visible and enabled
+          if (onMapPinChangeLocation && // eslint-disable-next-line react/destructuring-assignment
+          _this.props.displayMapPin && // eslint-disable-next-line react/destructuring-assignment
+          !_this.props.disableMapPin) {
             onMapPinChangeLocation({
               mapPinLocation: {
                 lat: mapPinLatLonCoordinate.lat,
@@ -21485,6 +21469,7 @@
         },
         shouldAutoFetch: true,
         displayMapPin: false,
+        disableMapPin: false,
         onMount: function onMount() {
           return null;
         },
@@ -22029,7 +22014,8 @@
           displayDimensionSelectButtonInMap = _o === void 0 ? true : _o,
           _p = _a.multiLegend,
           multiLegend = _p === void 0 ? true : _p,
-          props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend"]);
+          shouldShowLayerManager = _a.shouldShowLayerManager,
+          props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager"]);
 
       var dispatch = reactRedux.useDispatch();
       var mapId = React__default["default"].useRef(id || generateMapId()).current;
@@ -22060,7 +22046,17 @@
         dispatch(mapActions$1.setMapPreset({
           mapId: mapId,
           initialProps: initialProps
-        })); // eslint-disable-next-line react-hooks/exhaustive-deps
+        }));
+
+        if (shouldShowLayerManager !== undefined) {
+          dispatch(uiActions.setActiveMapIdForDialog({
+            type: 'layerManager',
+            mapId: mapId,
+            setOpen: shouldShowLayerManager,
+            source: 'app'
+          }));
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
       }, []);
       return /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
@@ -23131,21 +23127,17 @@
         }
       }, /*#__PURE__*/React__default["default"].createElement("h1", {
         "data-testid": "map-warning-properties-title"
-      }, selectedFeatureProperties.country), selectedFeatureProperties.details[0].event && /*#__PURE__*/React__default["default"].createElement("pre", {
-        "data-testid": "map-warning-properties-row"
-      }, "Event: ", selectedFeatureProperties.details[0].event), selectedFeatureProperties.details[0].sent && /*#__PURE__*/React__default["default"].createElement("pre", {
-        "data-testid": "map-warning-properties-row"
-      }, "Sent:", ' ', moment__default["default"].utc(selectedFeatureProperties.details[0].sent).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].expires && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, selectedFeatureProperties.areaDesc), selectedFeatureProperties.areaDesc && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Expires:", ' ', moment__default["default"].utc(selectedFeatureProperties.details[0].expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].web && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "event: ", selectedFeatureProperties.languages[2].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Web: ", selectedFeatureProperties.details[0].web), selectedFeatureProperties.details[0].sender && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "Sent:", ' ', moment__default["default"].utc(selectedFeatureProperties.onset).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.expires && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Sender: ", selectedFeatureProperties.details[0].sender), selectedFeatureProperties.details[0].identifier && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "Expires:", ' ', moment__default["default"].utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[2].senderName && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "Identifier: ", selectedFeatureProperties.details[0].identifier), selectedFeatureProperties.details[0].area && /*#__PURE__*/React__default["default"].createElement("pre", {
+      }, "Sender: ", selectedFeatureProperties.languages[2].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "area: ", selectedFeatureProperties.details[0].area));
+      }, "Identifier: ", selectedFeatureProperties.identifier));
     };
 
     /* *

package/lib/components/ConfigurableMap/ConfigurableMapConnect.d.ts

@@ -28,5 +28,6 @@ export interface ConfigurableMapConnectProps {
     displayLayerManagerAndLegendButtonInMap?: boolean;
     displayDimensionSelectButtonInMap?: boolean;
     multiLegend?: boolean;
+    shouldShowLayerManager?: boolean;
 }
 export declare const ConfigurableMapConnect: React.FC<ConfigurableMapConnectProps>;

package/lib/components/Legend/LegendConnect.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Source } from '../../store/ui/types';
-export declare const IS_LEGEND_OPEN_BY_DEFAULT = true;
+export declare const IS_LEGEND_OPEN_BY_DEFAULT = false;
 interface LegendConnectProps {
     showMapId?: boolean;
     source?: Source;

package/lib/components/MapView/MapViewConnect.MapPin.stories.d.ts

@@ -3,4 +3,8 @@ export declare const SetMapPinAction: {
     (): React.ReactElement;
     storyName: string;
 };
+export declare const SetMapPinActionDisabled: {
+    (): React.ReactElement;
+    storyName: string;
+};
 export declare const ToggleMapPinAction: () => React.ReactElement;

package/lib/components/MapView/MapViewConnect.stories.d.ts

@@ -9,7 +9,6 @@ export * from './MapViewConnect.SetBaseLayers.stories';
 export * from './MapViewConnect.ToggleControls.stories';
 export * from './MapViewConnect.FeatureLayers.stories';
 export * from './MapViewConnect.MapPin.stories';
-export * from './MapViewConnect.DisableMapPin.stories';
 export * from './MapViewConnect.SelectorTest.stories';
 declare const _default: {
     title: string;

package/lib/components/MapWarning/MapWarningProperties.d.ts

@@ -1,6 +1,21 @@
 import React from 'react';
 interface WarningListProps {
-    selectedFeatureProperties: any;
+    selectedFeatureProperties: {
+        identifier?: string;
+        areaDesc?: string;
+        severity?: string;
+        certainty?: string;
+        onset?: string;
+        expires?: string;
+        languages?: Language[];
+    };
+}
+interface Language {
+    language: string;
+    event: string;
+    senderName: string;
+    headline: string;
+    description: string;
 }
 export declare const MapWarningProperties: React.FC<WarningListProps>;
 export {};

package/lib/components/ReactMapView/ReactMapView.d.ts

@@ -52,6 +52,7 @@ declare class ReactMapView extends React.Component<ReactMapViewProps, ReactMapVi
         };
         shouldAutoFetch: boolean;
         displayMapPin: boolean;
+        disableMapPin: boolean;
         onMount: () => void;
         onUnMount: () => void;
         onMapChangeDimension: () => void;

package/lib/store/mapStore/map/selectors.d.ts

@@ -752,7 +752,7 @@ export declare const getPinLocation: ((state: {
  * Example getDisableMapPin(store);
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
- * @returns {boolean} returnType: boolean or undefined
+ * @returns {boolean} returnType: boolean
  */
 export declare const getDisableMapPin: ((state: {
     syncronizationGroupStore?: import("../../generic/synchronizationGroups/types").SynchronizationGroupState;

package/lib/store/mapStore/map/types.d.ts

@@ -94,6 +94,7 @@ export interface MapPreset {
     toggleTimestepAuto?: boolean;
     animationPayload?: AnimationPayloadType;
     shouldShowLegend?: boolean;
+    shouldShowLayerManager?: boolean;
 }
 export interface MapPresetInitialProps {
     mapPreset: MapPreset;

package/lib/store/mapStore/map/utils.d.ts

@@ -26,9 +26,10 @@ interface CreateMapProps {
     isTimeSliderVisible?: boolean;
     activeMapPresetId?: string;
     displayMapPin?: boolean;
+    disableMapPin?: boolean;
     shouldShowZoomControls?: boolean;
 }
-export declare const createMap: ({ id, isAnimating, animationStartTime, animationEndTime, isAutoUpdating, bbox, srs, baseLayers, overLayers, mapLayers, featureLayers, dimensions, activeLayerId, timeSliderScale, timeStep, animationDelay, timeSliderCenterTime, timeSliderSecondsPerPx, timeSliderDataScaleToSecondsPerPx, isTimestepAuto, isTimeSliderHoverOn, isTimeSliderVisible, activeMapPresetId, displayMapPin, shouldShowZoomControls, }: CreateMapProps) => WebMap;
+export declare const createMap: ({ id, isAnimating, animationStartTime, animationEndTime, isAutoUpdating, bbox, srs, baseLayers, overLayers, mapLayers, featureLayers, dimensions, activeLayerId, timeSliderScale, timeStep, animationDelay, timeSliderCenterTime, timeSliderSecondsPerPx, timeSliderDataScaleToSecondsPerPx, isTimestepAuto, isTimeSliderHoverOn, isTimeSliderVisible, activeMapPresetId, displayMapPin, disableMapPin, shouldShowZoomControls, }: CreateMapProps) => WebMap;
 export declare const checkValidLayersPayload: (layers: Layer[], mapId: string) => boolean;
 /**
  * This will get the map from the map draftstate.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -13,25 +13,26 @@
   "dependencies": {},
   "peerDependencies": {
     "react": "^17.0.2",
-    "@opengeoweb/theme": "2.14.0",
+    "@opengeoweb/theme": "2.15.0",
     "@mui/material": "^5.2.8",
     "@mui/styles": "^5.2.3",
     "moment": "^2.29.0",
     "react-redux": "^8.0.2",
     "react-intl": "^5.17.5",
-    "@opengeoweb/shared": "2.14.0",
+    "lodash": "^4.17.20",
+    "@opengeoweb/shared": "2.15.0",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
-    "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "2.14.0",
+    "@opengeoweb/form-fields": "2.15.0",
     "react-hook-form": "^6.12.1",
     "moment-timezone": "^0.5.31",
     "@mui/lab": "^5.0.0-alpha.64",
     "axios": "^0.25.0",
-    "@opengeoweb/webmap": "2.14.0",
+    "@opengeoweb/webmap": "2.15.0",
     "throttle-debounce": "^3.0.1",
     "proj4": "^2.6.2",
     "react-sortablejs": "^6.0.0",
+    "react-window": "^1.8.7",
     "immer": "^9.0.15",
     "redux-dynamic-modules": "^5.2.0",
     "@reduxjs/toolkit": "^1.8.3",

package/lib/components/CustomSwitch/CustomSwitch.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const CustomSwitch: import("react").JSXElementConstructor<Omit<import("@mui/material").SwitchProps, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"switchBase" | "checked" | "track"> & object>;
-export default CustomSwitch;

package/lib/components/CustomSwitch/CustomSwitch.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/components/CustomSwitch/CustomSwitch.stories.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export declare const CustomSwitchLightTheme: () => React.ReactElement;
-export declare const CustomSwitchDarkTheme: () => React.ReactElement;
-declare const _default: {
-    title: string;
-};
-export default _default;

package/lib/components/CustomSwitch/index.d.ts

@@ -1 +0,0 @@
-export { default as CustomSwitch } from './CustomSwitch';

package/lib/components/MapView/MapViewConnect.DisableMapPin.stories.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-export declare const SetAndDisableMapPinAction: {
-    (): React.ReactElement;
-    storyName: string;
-};