@opengeoweb/core 19.1.1 → 19.2.0

package/dist/index.esm.js

@@ -2,18 +2,19 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FormControl, MenuItem, Grid, InputLabel, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItemButton, ListItemText, DialogContentText, TextField, InputAdornment, Button, useTheme, Tooltip, ListItem, ListItemIcon, Checkbox, Popper, Fade, styled, LinearProgress, Autocomplete, Switch, Select } from '@mui/material';
 import React, { useMemo, useState, useCallback, useEffect, useContext } from 'react';
 import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, TooltipSelect, CustomIconButton, CustomDialog, CustomTooltip, ToggleMenu, AlertIcon, useConfirmationDialog, useScrollingInIsolation, sliderHeaderStyle, CustomSlider, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, PROJECTION, calculateStartSize, useWheelStopPropagation, ToolContainerDraggable, dateUtils, sessionStorageProvider, useDebounce, usePrevious } from '@opengeoweb/shared';
-import { webmapUtils, queryWMSLayersTree, invalidateWMSGetCapabilities, LayerType, WMDefaultStyleName, queryWMSServiceInfo, queryWMSLayers, getWMSServiceId, handleDateUtilsISOString, generateLayerId, WMJSDimension, getWMLayerById, getMapDimURL, WMLayer } from '@opengeoweb/webmap';
+import { webmapUtils, queryWMSLayersTree, invalidateWMSGetCapabilities, LayerType, WMDefaultStyleName, WMJSMAP_LONLAT_EPSGCODE, queryWMSServiceInfo, queryWMSLayers, getWMSServiceId, handleDateUtilsISOString, generateLayerId, WMJSDimension, getWMLayerById, getMapDimURL, WMLayer } from '@opengeoweb/webmap';
 import _, { isEqual, isArray, range, zip, throttle } from 'lodash';
 import { useDispatch, useSelector, connect, useStore, Provider } from 'react-redux';
 import { mapSelectors, layerSelectors, layerActions, layerTypes, filterLayers, mapActions, mapEnums, loadingIndicatorSelectors, layerUtils, serviceSelectors, serviceActions, uiSelectors, uiTypes, useSetupDialog, getUserAddedServices, uiActions, genericActions, drawingToolSelectors, syncGroupsSelectors, syncConstants, getViewObjectForSyncGroup, getViewObjectForMapId, loadingIndicatorActions, genericSelectors, defaultLayers, getSingularDrawtoolDrawLayerId, syncGroupsSelector, syncGroupsActions, routerUtils, mapUtils } from '@opengeoweb/store';
 import i18n from 'i18next';
 import { useTranslation, Trans, I18nextProvider } from 'react-i18next';
 import { TIME_SLIDER_NAMESPACE, timesliderTranslations, defaultTimeSpan, AnimationLengthButton, AnimationLength, AutoUpdateButton, BackwardForwardStepButton, NowButton, handleSetNowEvent, PlayButton, defaultTimeStep, SpeedButton, TimeSpanButton, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, TimeStepButton, OptionsMenuButton, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, onsetNewDateDebounced, getFilteredTime, defaultSecondsPerPx, moveSelectedTimePx, TimeSlider } from '@opengeoweb/time-slider';
-import { webmapReactTranslations, WEBMAP_REACT_NAMESPACE, webmapTranslations, WEBMAP_NAMESPACE, openLayersGetMapImageStore, LayerInfoButton, useEDRGetCollectionDetails, useStacCollection, getRendersAsStyles, defaultEdrStyles, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, Clock, LegendDialog, LegendButton, MapContext, emptyGeoJSON, MapFeatureClass, setMapCenter, makeTimeList, useGetWMLayerInstance, getIsInsideAcceptanceTime, OpenLayersLayer, isGeoJSONGeometryEmpty, OpenLayersFeatureLayer, OpenLayersMapDraw, MapMeasure, useSetIntervalWhenVisible, TimeContext, OpenLayersMapView, WMSLayer, genericOpenLayersFeatureStyle, OpenLayersGetFeatureInfo, MapControls, OpenLayersZoomControl, getLayerUpdateInfo, publicLayers } from '@opengeoweb/webmap-react';
-import { Cached, Add, MapAdd, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, ColumnCollapsed, ColumnCollapse, DragHandle as DragHandle$1, None, FastForward, AutoUpdateActive, Both, Delete, Visibility, VisibilityOff, Copy, Overlayers, WorldMapProjection, Layers, Search, Exclamation, MyLocation, Airplane, Region, Pinned, Close, ExitDomain, LocationInfo, Measure, Options, Info, ThemeWrapper, lightTheme, FlagBritain, FlagNetherlands, FlagFinland, FlagNorway } from '@opengeoweb/theme';
+import { webmapReactTranslations, WEBMAP_REACT_NAMESPACE, webmapTranslations, WEBMAP_NAMESPACE, openLayersGetMapImageStore, LayerInfoButton, useGetWMLayerInstance, useEDRGetCollectionDetails, useStacCollection, getRendersAsStyles, defaultEdrStyles, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, Clock, LegendDialog, LegendButton, MapContext, emptyGeoJSON, MapFeatureClass, setMapCenter, makeTimeList, getIsInsideAcceptanceTime, OpenLayersLayer, isGeoJSONGeometryEmpty, OpenLayersFeatureLayer, OpenLayersMapDraw, MapMeasure, useSetIntervalWhenVisible, TimeContext, OpenLayersMapView, WMSLayer, genericOpenLayersFeatureStyle, OpenLayersGetFeatureInfo, MapControls, OpenLayersZoomControl, getLayerUpdateInfo, publicLayers } from '@opengeoweb/webmap-react';
+import { Cached, Add, MapAdd, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, ColumnCollapsed, ColumnCollapse, DragHandle as DragHandle$1, None, FastForward, AutoUpdateActive, Both, Delete, Visibility, VisibilityOff, Copy, ZoomToLayer, Overlayers, WorldMapProjection, Layers, Search, Exclamation, MyLocation, Airplane, Region, Pinned, Close, ExitDomain, LocationInfo, Measure, Options, Info, ThemeWrapper, lightTheme, FlagBritain, FlagNetherlands, FlagFinland, FlagNorway } from '@opengeoweb/theme';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
 import { Box as Box$1, Stack } from '@mui/system';
+import { transformExtent, toLonLat } from 'ol/proj';
 import { LayerSelectButtonConnect, LayerSelectConnect, DataExplorerButtonConnect } from '@opengeoweb/layer-select';
 import { unByKey } from 'ol/Observable';
 import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -22,7 +23,6 @@ import { bbox } from '@turf/turf';
 import proj4 from 'proj4';
 import { getIntersection } from 'ol/extent';
 import GeoJSON from 'ol/format/GeoJSON';
-import { toLonLat } from 'ol/proj';
 import axios from 'axios';
 import { ImageWMS } from 'ol/source';
 import DOMPurify from 'dompurify';
@@ -73,6 +73,7 @@ var en = {
 	"layermanager-layer-duplicate": "Duplicate layer",
 	"layermanager-layer-duplicate-to-other-maps": "Copy layer to other maps",
 	"layermanager-layer-remove-from-other-maps": "Remove layer from other maps",
+	"layermanager-layer-zoom-to-extent": "Zoom to layer",
 	"layermanager-options": "Options",
 	"layermanager-baselayers-tooltip": "Add base layers",
 	"layermanager-header-button-small": "small",
@@ -169,6 +170,7 @@ var fi = {
 	"layermanager-layer-duplicate": "Monista karttataso",
 	"layermanager-layer-duplicate-to-other-maps": "Kopioi karttataso muihin karttoihin",
 	"layermanager-layer-remove-from-other-maps": "Poista karttataso muista kartoista",
+	"layermanager-layer-zoom-to-extent": "Zoomaa karttatasoon",
 	"layermanager-options": "Valinnat",
 	"layermanager-baselayers-tooltip": "Lisää pohjakartta",
 	"layermanager-header-button-small": "Pieni",
@@ -256,6 +258,7 @@ var no = {
 	"layermanager-layer-duplicate": "Duplikat lag",
 	"layermanager-layer-duplicate-to-other-maps": "Kopier lag til andre kart",
 	"layermanager-layer-remove-from-other-maps": "Fjern lag fra andre kart",
+	"layermanager-layer-zoom-to-extent": "Zoom til lag",
 	"layermanager-options": "Laginnstillinger",
 	"layermanager-baselayers-tooltip": "Legg til basislag",
 	"layermanager-header-button-small": "liten",
@@ -344,6 +347,7 @@ var nl = {
 	"layermanager-layer-duplicate": "Dupliceren",
 	"layermanager-layer-duplicate-to-other-maps": "Kopieer laag naar andere kaarten",
 	"layermanager-layer-remove-from-other-maps": "Verwijder laag van andere kaarten",
+	"layermanager-layer-zoom-to-extent": "Zoom naar laag",
 	"layermanager-options": "Opties",
 	"layermanager-baselayers-tooltip": "Basislagen toevoegen",
 	"layermanager-header-button-small": "klein",
@@ -838,7 +842,7 @@ var preset = {
 		},
 		{
 			name: "KNMIgeoservicesObs",
-			url: "https://geoservices.knmi.nl/adagucserver?dataset=OBS",
+			url: "https://geoservices.knmi.nl/adagucserver?dataset=10-minute-in-situ-meteorological-observations",
 			id: "KNMIgeoservicesObs"
 		},
 		{
@@ -3206,13 +3210,13 @@ var LoadDuration = function LoadDuration(_ref) {
     title: tooltipText,
     children: jsxs(Typography, {
       component: "div",
-      variant: "subtitle2",
       sx: {
         whiteSpace: 'nowrap',
         fontSize: 12,
         width: '100%',
         textAlign: 'center'
       },
+      variant: "subtitle2",
       children: [percentage < 100 && jsx(LoadingIndicatorProgressBar, {
         height: 4,
         progressPercentage: percentage,
@@ -3348,6 +3352,9 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
     onLayerDuplicate = _ref.onLayerDuplicate,
     onLayerCopyToOtherMaps = _ref.onLayerCopyToOtherMaps,
     onLayerRemoveFromOtherMaps = _ref.onLayerRemoveFromOtherMaps,
+    onLayerZoomToExtent = _ref.onLayerZoomToExtent,
+    _ref$canZoomToLayerEx = _ref.canZoomToLayerExtent,
+    canZoomToLayerExtent = _ref$canZoomToLayerEx === void 0 ? true : _ref$canZoomToLayerEx,
     tooltipTitle = _ref.tooltipTitle,
     icon = _ref.icon;
   var _useCoreTranslation = useCoreTranslation(),
@@ -3365,6 +3372,9 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
   var onClickRemoveFromOtherMaps = function onClickRemoveFromOtherMaps() {
     onLayerRemoveFromOtherMaps == null || onLayerRemoveFromOtherMaps();
   };
+  var onClickZoomToExtent = function onClickZoomToExtent() {
+    onLayerZoomToExtent == null || onLayerZoomToExtent();
+  };
   return jsx(ToggleMenu, {
     buttonIcon: icon,
     buttonSx: {
@@ -3387,6 +3397,11 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
       text: t('layermanager-layer-remove-from-other-maps'),
       action: onClickRemoveFromOtherMaps,
       icon: jsx(Delete, {})
+    }, {
+      text: t('layermanager-layer-zoom-to-extent'),
+      action: onClickZoomToExtent,
+      icon: jsx(ZoomToLayer, {}),
+      isDisabled: !canZoomToLayerExtent
     }],
     menuPosition: "bottom",
     tooltipTitle: nonEmptyTooltipTitle,
@@ -4283,16 +4298,35 @@ var Accordion = function Accordion(_ref0) {
   });
 };
 
+var wmLayerHasZoomExtent = function wmLayerHasZoomExtent(wmLayer, mapSrs) {
+  if (!wmLayer) {
+    return false;
+  }
+  var crs = wmLayer.getCRSByName(mapSrs);
+  if (crs != null && crs.bbox) {
+    return true;
+  }
+  return !!wmLayer.geographicBoundingBox;
+};
 var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref) {
   var layerId = _ref.layerId,
     mapId = _ref.mapId,
     tooltipTitle = _ref.tooltipTitle,
     icon = _ref.icon;
   var dispatch = useDispatch();
+  var layer = useSelector(function (store) {
+    return layerSelectors.getLayerById(store, layerId);
+  });
   var layerType = useSelector(function (store) {
     return layerSelectors.getLayerType(store, layerId);
   });
   var isFeatureLayer = layerType === LayerType.featureLayer;
+  var mapSrs = useSelector(function (store) {
+    return mapSelectors.getSrs(store, mapId);
+  });
+  var _useGetWMLayerInstanc = useGetWMLayerInstance(layer),
+    wmLayer = _useGetWMLayerInstanc.wmLayer;
+  var canZoomToLayerExtent = !!(layerId && mapSrs && wmLayerHasZoomExtent(wmLayer, mapSrs));
   // get all map ids
   var allMapIds = useSelector(mapSelectors.getAllMapIds);
   var allOtherMapIdsExceptCurrentOne = allMapIds.filter(function (id) {
@@ -4336,6 +4370,50 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
       }));
     });
   }, [dispatch, allLayers, mapId, layerId]);
+  var zoomToLayerExtent = React.useCallback(function () {
+    if (!layerId || !mapSrs || !wmLayer) {
+      return;
+    }
+    var crs = wmLayer.getCRSByName(mapSrs);
+    if (crs != null && crs.bbox) {
+      var _crs$bbox$getExtent = crs.bbox.getExtent(),
+        left = _crs$bbox$getExtent[0],
+        bottom = _crs$bbox$getExtent[1],
+        right = _crs$bbox$getExtent[2],
+        top = _crs$bbox$getExtent[3];
+      dispatch(mapActions.setBbox({
+        mapId: mapId,
+        srs: mapSrs,
+        bbox: {
+          left: left,
+          bottom: bottom,
+          right: right,
+          top: top
+        },
+        origin: layerTypes.LayerActionOrigin.layerManager
+      }));
+      return;
+    }
+    var geo = wmLayer.geographicBoundingBox;
+    if (geo) {
+      var _transformExtent = transformExtent([parseFloat(geo.west), parseFloat(geo.south), parseFloat(geo.east), parseFloat(geo.north)], WMJSMAP_LONLAT_EPSGCODE, mapSrs),
+        _left = _transformExtent[0],
+        _bottom = _transformExtent[1],
+        _right = _transformExtent[2],
+        _top = _transformExtent[3];
+      dispatch(mapActions.setBbox({
+        mapId: mapId,
+        srs: mapSrs,
+        bbox: {
+          left: _left,
+          bottom: _bottom,
+          right: _right,
+          top: _top
+        },
+        origin: layerTypes.LayerActionOrigin.layerManager
+      }));
+    }
+  }, [dispatch, layerId, mapId, mapSrs, wmLayer]);
   var duplicateLayer = React.useCallback(function (_ref3) {
     var newLayerId = _ref3.newLayerId,
       mapId = _ref3.mapId;
@@ -4347,6 +4425,7 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
     }));
   }, [dispatch, layerId]);
   return jsx(LayerManagerMenuButton, {
+    canZoomToLayerExtent: canZoomToLayerExtent,
     icon: icon,
     isFeatureLayer: isFeatureLayer,
     layerId: layerId,
@@ -4359,6 +4438,7 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
       });
     },
     onLayerRemoveFromOtherMaps: removeLayerFromAllMaps,
+    onLayerZoomToExtent: zoomToLayerExtent,
     tooltipTitle: tooltipTitle
   });
 };
@@ -8859,11 +8939,16 @@ var MapOptionsButtonConnect = function MapOptionsButtonConnect(_ref) {
   var isFeatureInfoActive = useSelector(function (store) {
     return uiSelectors.getisDialogOpen(store, gfiType);
   });
+  var previousIsMeasureToolActive = usePrevious(isMeasureToolActive);
+  var previousIsFeatureInfoActive = usePrevious(isFeatureInfoActive);
   React.useEffect(function () {
     if (!isMapOptionsOpen && (isMeasureToolActive || isFeatureInfoActive)) {
       setIsMapOptionsOpen(true);
     }
-  }, [isFeatureInfoActive, isMapOptionsOpen, isMeasureToolActive]);
+    if (isMapOptionsOpen && !isMeasureToolActive && !isFeatureInfoActive && (previousIsMeasureToolActive || previousIsFeatureInfoActive)) {
+      setIsMapOptionsOpen(false);
+    }
+  }, [isFeatureInfoActive, isMapOptionsOpen, isMeasureToolActive, previousIsFeatureInfoActive, previousIsMeasureToolActive]);
   return getFeatureInfo && measureTool ? jsxs(Stack, {
     direction: "row",
     spacing: 1,

package/dist/src/lib/components/LayerManager/LayerContainerRow/LayerRow/Menubutton/MenuButton.d.ts

@@ -9,6 +9,8 @@ interface LayerManagerButtonProps {
     }) => void;
     onLayerCopyToOtherMaps?: () => void;
     onLayerRemoveFromOtherMaps?: () => void;
+    onLayerZoomToExtent?: () => void;
+    canZoomToLayerExtent?: boolean;
     tooltipTitle?: string;
     icon?: React.ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "19.1.1",
+  "version": "19.2.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {