@opengeoweb/core 19.1.1 → 19.3.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 { useDispatch, useSelector, connect, useStore, shallowEqual, 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, PUBLIC_WARNING_DRAW_TOOL_ID, 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, fromLonLat } 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"
 		},
 		{
@@ -2940,6 +2944,9 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
   var layerType = useSelector(function (store) {
     return layerSelectors.getLayerType(store, layerId);
   });
+  var isFeatureSyncLayer = useSelector(function (store) {
+    return layerSelectors.getIsFeatureSyncLayer(store, layerId);
+  });
   var isLayerEnabled = useSelector(function (store) {
     return layerSelectors.getLayerEnabled(store, layerId);
   });
@@ -2956,6 +2963,9 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
   var onDelete = React.useCallback(function (_ref3) {
     var mapId = _ref3.mapId,
       layerId = _ref3.layerId;
+    if (isFeatureSyncLayer) {
+      return;
+    }
     if (layerType === LayerType.edrFeatureLayer) {
       void confirmationDialog({
         title: t('delete-dialog-title'),
@@ -2974,16 +2984,17 @@ var DeleteLayerConnect = function DeleteLayerConnect(_ref) {
         layerId: layerId
       });
     }
-  }, [layerType, confirmationDialog, t, layerDelete]);
+  }, [isFeatureSyncLayer, layerType, confirmationDialog, t, layerDelete]);
   return jsx(CustomIconButton, {
     "data-testid": "deleteButton",
+    disabled: isFeatureSyncLayer,
     onClick: function onClick() {
       return onDelete({
         mapId: mapId,
         layerId: layerId
       });
     },
-    shouldShowAsDisabled: !isLayerEnabled,
+    shouldShowAsDisabled: !isLayerEnabled || isFeatureSyncLayer,
     tooltipTitle: nonEmptyTooltipTitle,
     children: icon
   });
@@ -3206,13 +3217,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,
@@ -3273,10 +3284,15 @@ var useLoadDurationLabel = function useLoadDurationLabel(mapId, layerId) {
 var SelectableFeatures = function SelectableFeatures(_ref) {
   var layerId = _ref.layerId,
     isSelectable = _ref.isSelectable,
-    onToggleSelectable = _ref.onToggleSelectable;
+    onToggleSelectable = _ref.onToggleSelectable,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var _useCoreTranslation = useCoreTranslation(),
     t = _useCoreTranslation.t;
   var onClickCheckbox = function onClickCheckbox() {
+    if (disabled) {
+      return;
+    }
     onToggleSelectable();
   };
   return jsx(ListItem, {
@@ -3287,7 +3303,9 @@ var SelectableFeatures = function SelectableFeatures(_ref) {
       borderBottom: '1px solid #E0E0E0'
     },
     children: jsxs(ListItemButton, {
+      "data-testid": "selectablefeatures-checkbox-" + layerId,
       disableGutters: true,
+      disabled: disabled,
       onClick: function onClick() {
         return onClickCheckbox();
       },
@@ -3312,8 +3330,8 @@ var SelectableFeatures = function SelectableFeatures(_ref) {
         },
         children: jsx(Checkbox, {
           checked: isSelectable,
-          "data-testid": "selectablefeatures-checkbox-" + layerId,
           disableRipple: true,
+          disabled: disabled,
           name: "selectablefeatures-checkbox-" + layerId,
           tabIndex: -1
         })
@@ -3323,7 +3341,8 @@ var SelectableFeatures = function SelectableFeatures(_ref) {
 };
 
 var SelectableFeaturesCheckboxConnect = function SelectableFeaturesCheckboxConnect(_ref) {
-  var layerId = _ref.layerId;
+  var layerId = _ref.layerId,
+    disabled = _ref.disabled;
   var dispatch = useDispatch();
   var isSelectable = useSelector(function (store) {
     return layerSelectors.getIsLayerSelectable(store, layerId);
@@ -3334,6 +3353,7 @@ var SelectableFeaturesCheckboxConnect = function SelectableFeaturesCheckboxConne
     }));
   }, [dispatch, layerId]);
   return jsx(SelectableFeatures, {
+    disabled: disabled,
     isSelectable: isSelectable,
     layerId: layerId,
     onToggleSelectable: toggleSelectable
@@ -3345,9 +3365,14 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
     layerId = _ref.layerId,
     _ref$isFeatureLayer = _ref.isFeatureLayer,
     isFeatureLayer = _ref$isFeatureLayer === void 0 ? false : _ref$isFeatureLayer,
+    _ref$isFeatureSyncLay = _ref.isFeatureSyncLayer,
+    isFeatureSyncLayer = _ref$isFeatureSyncLay === void 0 ? false : _ref$isFeatureSyncLay,
     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 +3390,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: {
@@ -3378,19 +3406,28 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
     menuItems: [{
       text: t('layermanager-layer-duplicate'),
       action: onClickDuplicate,
-      icon: jsx(Copy, {})
+      icon: jsx(Copy, {}),
+      isDisabled: isFeatureSyncLayer
     }, {
       text: t('layermanager-layer-duplicate-to-other-maps'),
       action: onClickCopyToOtherMaps,
-      icon: jsx(Copy, {})
+      icon: jsx(Copy, {}),
+      isDisabled: isFeatureSyncLayer
     }, {
       text: t('layermanager-layer-remove-from-other-maps'),
       action: onClickRemoveFromOtherMaps,
-      icon: jsx(Delete, {})
+      icon: jsx(Delete, {}),
+      isDisabled: isFeatureSyncLayer
+    }, {
+      text: t('layermanager-layer-zoom-to-extent'),
+      action: onClickZoomToExtent,
+      icon: jsx(ZoomToLayer, {}),
+      isDisabled: !canZoomToLayerExtent
     }],
     menuPosition: "bottom",
     tooltipTitle: nonEmptyTooltipTitle,
     children: !!isFeatureLayer && jsx(SelectableFeaturesCheckboxConnect, {
+      disabled: isFeatureSyncLayer,
       layerId: layerId
     })
   });
@@ -4283,16 +4320,38 @@ 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 isFeatureSyncLayer = useSelector(function (store) {
+    return layerSelectors.getIsFeatureSyncLayer(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 +4395,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,8 +4450,10 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
     }));
   }, [dispatch, layerId]);
   return jsx(LayerManagerMenuButton, {
+    canZoomToLayerExtent: canZoomToLayerExtent,
     icon: icon,
     isFeatureLayer: isFeatureLayer,
+    isFeatureSyncLayer: isFeatureSyncLayer,
     layerId: layerId,
     mapId: mapId,
     onLayerCopyToOtherMaps: copyLayerToOtherMaps,
@@ -4359,6 +4464,7 @@ var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_ref)
       });
     },
     onLayerRemoveFromOtherMaps: removeLayerFromAllMaps,
+    onLayerZoomToExtent: zoomToLayerExtent,
     tooltipTitle: tooltipTitle
   });
 };
@@ -5897,24 +6003,30 @@ var useFetchServices = function useFetchServices(dialogType, preloadedServices,
     shouldDisableFetch = false;
   }
   var dispatch = useDispatch();
+  var store = useStore();
   var isOpenInStore = useSelector(function (store) {
     return uiSelectors.getisDialogOpen(store, dialogType);
   });
-  var services = useSelector(function (store) {
-    return serviceSelectors.getServiceIds(store);
-  });
   var fetchInitialServices = useCallback(function (services) {
     dispatch(serviceActions.fetchInitialServices({
       services: services
     }));
   }, [dispatch]);
   useEffect(function () {
-    if (!shouldDisableFetch && isOpenInStore && preloadedServices && preloadedServices.length > 0 && !services.length) {
+    if (!shouldDisableFetch && isOpenInStore && preloadedServices && preloadedServices.length > 0) {
       var allServicesToLoad = mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices());
-      void getServicesToLoad(allServicesToLoad).then(fetchInitialServices);
+      void getServicesToLoad(allServicesToLoad).then(function (servicesToLoad) {
+        var currentServiceIds = serviceSelectors.getServiceIds(store.getState());
+        var missingServices = servicesToLoad.filter(function (service) {
+          return !currentServiceIds.includes(service.id);
+        });
+        if (missingServices.length > 0) {
+          fetchInitialServices(missingServices);
+        }
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpenInStore, services]);
+  }, [isOpenInStore]);
 };
 var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
   return Object.values(Object.assign({}, presets.reduce(function (byUrl, preset) {
@@ -7794,7 +7906,9 @@ var createLinkedFeatureCollection = function createLinkedFeatureCollection(linke
       var isSelected = selectedFeatureIds == null ? void 0 : selectedFeatureIds.has((_getGeoFeatureSelecti = getGeoFeatureSelectionKey(geoFeature)) != null ? _getGeoFeatureSelecti : '');
       var existingProperties = geoFeature.properties && typeof geoFeature.properties === 'object' ? geoFeature.properties : {};
       return Object.assign({}, geoFeature, {
-        properties: Object.assign({}, existingProperties, isSelected ? {
+        properties: Object.assign({}, existingProperties, {
+          sourceLayerId: featureLayer.id
+        }, isSelected ? {
           highlightSelectedFeature: true
         } : undefined, featureLayer.originalId ? {
           originalId: featureLayer.originalId
@@ -8292,6 +8406,7 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref2
       } : undefined,
       featureCollection: !layer.isInEditMode ? displayGeojson : undefined,
       hoverSelect: hoverSelect,
+      layerId: layerId,
       opacity: layer.opacity,
       style: style,
       visible: layer.enabled,
@@ -8519,6 +8634,32 @@ var sanitizeHTML = function sanitizeHTML(htmlToBeSanitized) {
   };
 };
 
+var getMapPinLocation = function getMapPinLocation(mapPinLocation, map) {
+  if (!mapPinLocation) {
+    return undefined;
+  }
+  if (mapPinLocation.projectionX !== undefined && mapPinLocation.projectionY !== undefined && mapPinLocation.resolution !== undefined && mapPinLocation.srs) {
+    return mapPinLocation;
+  }
+  if (!map) {
+    return mapPinLocation;
+  }
+  var view = map.getView();
+  var projection = view == null ? void 0 : view.getProjection();
+  var resolution = view == null ? void 0 : view.getResolution();
+  if (!projection || resolution === undefined) {
+    return mapPinLocation;
+  }
+  var _fromLonLat = fromLonLat([mapPinLocation.lon, mapPinLocation.lat], projection),
+    projectionX = _fromLonLat[0],
+    projectionY = _fromLonLat[1];
+  return Object.assign({}, mapPinLocation, {
+    projectionX: projectionX,
+    projectionY: projectionY,
+    resolution: resolution,
+    srs: projection.getCode()
+  });
+};
 var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
   var layers = _ref.layers,
     isOpen = _ref.isOpen,
@@ -8535,8 +8676,10 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
     mapPinLocation = _ref.mapPinLocation;
   var _useCoreTranslation = useCoreTranslation(),
     t = _useCoreTranslation.t;
+  var _React$useContext = React.useContext(MapContext),
+    map = _React$useContext.map;
   /* Ref, state and update function for results per layer map */
-  var gfiResultMap = React.useRef(new Map()).current;
+  var gfiResultMap = React.useRef(new globalThis.Map()).current;
   // eslint-disable-next-line react/hook-use-state
   var _React$useState = React.useState(),
     triggerRerender = _React$useState[1];
@@ -8551,7 +8694,10 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
     triggerRerender("" + layerId + isLoading);
   };
   /* Build a layerlist array with a set of arguments per layer to do the query for */
-  var layerToUpdateList = isOpen && mapPinLocation ? getLayersToUpdate(mapPinLocation, layers) : [];
+  var mapPinLocationCoordinates = React.useMemo(function () {
+    return getMapPinLocation(mapPinLocation, map);
+  }, [map, mapPinLocation]);
+  var layerToUpdateList = isOpen && mapPinLocationCoordinates ? getLayersToUpdate(mapPinLocationCoordinates, layers) : [];
   /*
     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.
@@ -8615,7 +8761,7 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
   }();
   /* For each changed getfeature url string, load new data using WMS GetFeatureInfo */
   React.useEffect(function () {
-    if (mapPinLocation && isOpen) {
+    if (mapPinLocationCoordinates && isOpen) {
       layerToUpdateList.forEach(function (_ref4) {
         var url = _ref4.url,
           layerId = _ref4.layerId;
@@ -8645,7 +8791,7 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
       sx: {
         padding: 0
       },
-      children: [!!isOpen && !!hasLayers && !!mapPinLocation && jsx(Box, {
+      children: [!!isOpen && !!hasLayers && !!mapPinLocationCoordinates && jsx(Box, {
         "data-testid": "GetFeatureInfoList",
         ref: stopWheelEventPropagationRef,
         children: layerToUpdateList.map(function (layer) {
@@ -8698,7 +8844,7 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
             })]
           }, layerId);
         })
-      }), !!hasLayers && !mapPinLocation && jsx(Typography, {
+      }), !!hasLayers && !mapPinLocationCoordinates && jsx(Typography, {
         "data-testid": "click-on-map-for-info",
         sx: {
           padding: '10px'
@@ -8859,11 +9005,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,
@@ -8965,12 +9116,24 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
     });
     return visibilityById;
   }, [layersState]);
-  var warningDialogFeatureLayers = useSelector(function (state) {
+  var allWarningDialogFeatureLayers = useSelector(function (state) {
     return genericSelectors.selectFeatureSyncLayersForPanel(state, 'warning-dialog');
   });
+  var warningDialogFeatureLayers = React.useMemo(function () {
+    return allWarningDialogFeatureLayers.filter(function (layer) {
+      return layer.mapId === mapId;
+    });
+  }, [allWarningDialogFeatureLayers, mapId]);
   var warningDialogFeatures = React.useMemo(function () {
     return createWarningDialogFeatureLayers(warningDialogFeatureLayers);
   }, [warningDialogFeatureLayers]);
+  var hasPublicWarningDrawLayer = featureLayers.some(function (layer) {
+    var _layer$id;
+    return (_layer$id = layer.id) == null ? void 0 : _layer$id.startsWith("drawLayer-" + PUBLIC_WARNING_DRAW_TOOL_ID + "-");
+  });
+  var warningDialogFeaturesForHighlight = React.useMemo(function () {
+    return hasPublicWarningDrawLayer ? [] : warningDialogFeatures;
+  }, [hasPublicWarningDrawLayer, warningDialogFeatures]);
   var warningDialogFeatureKeys = React.useMemo(function () {
     return createWarningDialogFeatureKeys(warningDialogFeatures);
   }, [warningDialogFeatures]);
@@ -8979,11 +9142,6 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
   var linkedFeaturesFromState = useSelector(function (store) {
     return genericSelectors.selectLinkedFeatureLayersForMap(store, mapId);
   });
-  // Form-specific features (draft/edit geometries) from linked panels.
-  // Kept separate from linkedFeatures so edit-mode filtering can be applied.
-  var linkedFormFeaturesFromState = useSelector(function (store) {
-    return genericSelectors.selectLinkedFormFeaturesForMap(store, mapId);
-  });
   // Raw shared-data payload grouped per linked panel id.
   // Needed for ownership lookup (feature key -> panel id(s)) when routing
   // selection/hover updates back to the correct source panel(s).
@@ -9014,19 +9172,6 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
       return featureCollection.features.length > 0;
     });
   }, [featureSyncLayerVisibilityById, linkedFeaturesFromState, selectedFeatureIdsByLayerKey, warningDialogFeatureKeys]);
-  var linkedFormFeatures = React.useMemo(function () {
-    return {
-      type: 'FeatureCollection',
-      features: linkedFormFeaturesFromState.flatMap(function (feature) {
-        var _feature$geoJSON$feat;
-        // Filter out any form features currently in Edit mode
-        if ((_feature$geoJSON$feat = feature.geoJSON.features[0]) != null && (_feature$geoJSON$feat = _feature$geoJSON$feat.properties) != null && _feature$geoJSON$feat.inEditMode) {
-          return [];
-        }
-        return feature.geoJSON.features;
-      })
-    };
-  }, [linkedFormFeaturesFromState]);
   var srs = useSelector(function (store) {
     return mapSelectors.getSrs(store, mapId);
   });
@@ -9115,20 +9260,43 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
   var disableMapPin = useSelector(function (store) {
     return mapSelectors.getDisableMapPin(store, mapId);
   });
+  var isCurrentMapDrawToolActive = useSelector(function (state) {
+    return drawingToolSelectors.selectAllDrawingTools(state).some(function (tool) {
+      var _layerSelectors$getLa;
+      if (!tool.activeDrawModeId) {
+        return false;
+      }
+      return ((_layerSelectors$getLa = layerSelectors.getLayerById(state, tool.geoJSONLayerId)) == null ? void 0 : _layerSelectors$getLa.mapId) === mapId;
+    });
+  });
+  var drawToolLayerIds = useSelector(function (state) {
+    return drawingToolSelectors.selectAllDrawingTools(state).map(function (tool) {
+      return tool.geoJSONLayerId;
+    }).filter(function (layerId) {
+      return Boolean(layerId);
+    });
+  }, shallowEqual);
+  var shouldHandleMapPinClick = React.useCallback(function (event) {
+    var clickedLayerIds = new Set();
+    event.map.forEachFeatureAtPixel(event.pixel, function (_feature, layerAtPixel) {
+      var layerId = layerAtPixel == null ? void 0 : layerAtPixel.get('layerId');
+      if (typeof layerId === 'string') {
+        clickedLayerIds.add(layerId);
+      }
+    });
+    return !drawToolLayerIds.some(function (layerId) {
+      return clickedLayerIds.has(layerId);
+    });
+  }, [drawToolLayerIds]);
   var mapPinChangeLocation = React.useCallback(function (clickedLocation) {
-    var _hoverLinkedFeature$g, _hoverLinkedFeature$g2;
-    if (disableMapPin) {
+    var _hoverLinkedFeature$g, _hoverLinkedFeature$g2, _hoverLinkedFeature$g3;
+    if (disableMapPin || isCurrentMapDrawToolActive) {
       return;
     }
     var mapPinLocation = getCenterOfLinkedFeature(hoverLinkedFeature, srs) || clickedLocation;
     var selectedFeatureId = (hoverLinkedFeature == null || (_hoverLinkedFeature$g = hoverLinkedFeature.getId()) == null ? void 0 : _hoverLinkedFeature$g.toString()) || (hoverLinkedFeature == null || (_hoverLinkedFeature$g2 = hoverLinkedFeature.get('originalId')) == null ? void 0 : _hoverLinkedFeature$g2.toString()) || '';
-    var shouldMirrorSelectionToDrawLayer = hoverLinkedFeature && hoverLinkedFeature.get('isReadonly') !== true;
-    if (shouldMirrorSelectionToDrawLayer) {
-      dispatch(layerActions.setSelectedFeatures({
-        layerId: "drawlayer-" + mapId,
-        selectedFeatureIds: selectedFeatureId ? [selectedFeatureId] : []
-      }));
-    }
+    var hoveredFeatureSourceLayerId = hoverLinkedFeature == null || (_hoverLinkedFeature$g3 = hoverLinkedFeature.get('sourceLayerId')) == null ? void 0 : _hoverLinkedFeature$g3.toString();
+    var isHoveredFeatureSyncLayer = hoveredFeatureSourceLayerId ? layerSelectors.getIsFeatureSyncLayer(store.getState(), hoveredFeatureSourceLayerId) : false;
     var state = store.getState();
     var directlyLinkedPanelIds = genericSelectors.selectLinkedPanelIdsForMap(state, mapId);
     var connectedMapIds = new Set([mapId]);
@@ -9160,6 +9328,13 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
     });
     var targetPanelIds = getFeatureSelectionTargetPanelIds(selectedFeatureId, featureOwnerPanelIdsById, directlyLinkedPanelIds);
     var mapIdsToUpdate = directlyLinkedMapIds.size > 0 ? Array.from(directlyLinkedMapIds) : [mapId];
+    var shouldMirrorSelectionToDrawLayer = hoverLinkedFeature && hoverLinkedFeature.get('isReadonly') !== true && !isHoveredFeatureSyncLayer && targetPanelIds.length === 0;
+    if (shouldMirrorSelectionToDrawLayer) {
+      dispatch(layerActions.setSelectedFeatures({
+        layerId: "drawlayer-" + mapId,
+        selectedFeatureIds: selectedFeatureId ? [selectedFeatureId] : []
+      }));
+    }
     if (targetPanelIds.length > 0) {
       directlyLinkedPanelIds.forEach(function (panelId) {
         var featureIdForPanel = targetPanelIds.includes(panelId) ? selectedFeatureId : '';
@@ -9178,7 +9353,7 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
         mapPinLocation: mapPinLocation
       }));
     });
-  }, [dispatch, featureOwnerPanelIdsById, disableMapPin, hoverLinkedFeature, mapId, setSelectedFeatureIdsForPanel, srs, store]);
+  }, [dispatch, featureOwnerPanelIdsById, disableMapPin, hoverLinkedFeature, isCurrentMapDrawToolActive, mapId, setSelectedFeatureIdsForPanel, srs, store]);
   var isActiveWindowId = useSelector(function (store) {
     return uiSelectors.getIsActiveWindowId(store, mapId);
   });
@@ -9227,8 +9402,8 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
     };
   }, [view, mapId, srs, dispatch]);
   var featureProperties = React.useMemo(function () {
-    var _hoverLinkedFeature$g3;
-    return (_hoverLinkedFeature$g3 = hoverLinkedFeature == null || hoverLinkedFeature.getProperties == null ? void 0 : hoverLinkedFeature.getProperties()) != null ? _hoverLinkedFeature$g3 : {};
+    var _hoverLinkedFeature$g4;
+    return (_hoverLinkedFeature$g4 = hoverLinkedFeature == null || hoverLinkedFeature.getProperties == null ? void 0 : hoverLinkedFeature.getProperties()) != null ? _hoverLinkedFeature$g4 : {};
   }, [hoverLinkedFeature]);
   var hoverIdFromFeature = hoverLinkedFeature == null ? void 0 : hoverLinkedFeature.get('originalId');
   var hoverId = typeof hoverIdFromFeature === 'string' && hoverIdFromFeature || (typeof (featureProperties == null ? void 0 : featureProperties.originalId) === 'string' ? featureProperties.originalId : undefined);
@@ -9377,7 +9552,7 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
   }, [isSearchDialogOpen]);
   useFitAndHighlightWarningFeature({
     view: view,
-    warningDialogFeatures: warningDialogFeatures,
+    warningDialogFeatures: warningDialogFeaturesForHighlight,
     srs: srs,
     mapId: mapId
   });
@@ -9398,23 +9573,12 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
       })
     };
   }, [hoveredLinkedFeatureIds, linkedFeatureCollections]);
-  var filteredLinkedFormFeatures = React.useMemo(function () {
-    return {
-      type: 'FeatureCollection',
-      features: linkedFormFeatures.features.filter(function (feature) {
-        var _feature$properties2;
-        var featureId = feature.id !== undefined ? String(feature.id) : undefined;
-        var originalId = typeof ((_feature$properties2 = feature.properties) == null ? void 0 : _feature$properties2.originalId) === 'string' ? feature.properties.originalId : undefined;
-        return !(featureId && warningDialogFeatureKeys.has(featureId) || originalId && warningDialogFeatureKeys.has(originalId));
-      })
-    };
-  }, [linkedFormFeatures, warningDialogFeatureKeys]);
   var combinedLinkedFeatures = React.useMemo(function () {
     return {
       type: 'FeatureCollection',
-      features: [].concat(linkedFeatureCollectionsWithHover.features, filteredLinkedFormFeatures.features)
+      features: linkedFeatureCollectionsWithHover.features
     };
-  }, [linkedFeatureCollectionsWithHover, filteredLinkedFormFeatures]);
+  }, [linkedFeatureCollectionsWithHover]);
   return jsx(TimeContext.Provider, {
     value: prefetchTimespan,
     children: jsxs(OpenLayersMapView, {
@@ -9464,7 +9628,8 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
           disableMapPin: disableMapPin,
           displayMapPin: displayMapPin,
           mapPinLocation: mapPinLocation,
-          selectLocation: mapPinChangeLocation
+          selectLocation: mapPinChangeLocation,
+          shouldHandleClick: shouldHandleMapPinClick
         })]
       }), jsxs(MapControls, {
         "data-testid": "mapControls",

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

@@ -1,16 +1,19 @@
 import React from 'react';
-interface LayerManagerButtonProps {
+interface LayerManagerMenuButtonProps {
     mapId: string;
     layerId?: string;
     isFeatureLayer?: boolean;
+    isFeatureSyncLayer?: boolean;
     onLayerDuplicate?: (payload: {
         mapId: string;
         layerId: string;
     }) => void;
     onLayerCopyToOtherMaps?: () => void;
     onLayerRemoveFromOtherMaps?: () => void;
+    onLayerZoomToExtent?: () => void;
+    canZoomToLayerExtent?: boolean;
     tooltipTitle?: string;
     icon?: React.ReactNode;
 }
-declare const LayerManagerMenuButton: React.FC<LayerManagerButtonProps>;
+declare const LayerManagerMenuButton: React.FC<LayerManagerMenuButtonProps>;
 export default LayerManagerMenuButton;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-interface LayerManagerButtonProps {
+interface LayerManagerMenuButtonConnectProps {
     mapId: string;
     layerId?: string;
     tooltipTitle?: string;
     icon?: React.ReactNode;
 }
-declare const LayerManagerMenuButtonConnect: React.FC<LayerManagerButtonProps>;
+declare const LayerManagerMenuButtonConnect: React.FC<LayerManagerMenuButtonConnectProps>;
 export default LayerManagerMenuButtonConnect;

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

@@ -3,6 +3,7 @@ interface SelectableFeaturesProps {
     layerId: string;
     isSelectable: boolean;
     onToggleSelectable: () => void;
+    disabled?: boolean;
 }
 declare const SelectableFeatures: React.FC<SelectableFeaturesProps>;
 export default SelectableFeatures;

package/dist/src/lib/components/LayerManager/LayerContainerRow/LayerRow/SelectableFeaturesCheckbox/SelectableFeaturesCheckboxConnect.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface SelectableFeaturesCheckboxConnectProps {
     layerId: string;
+    disabled?: boolean;
 }
 declare const SelectableFeaturesCheckboxConnect: React.FC<SelectableFeaturesCheckboxConnectProps>;
 export default SelectableFeaturesCheckboxConnect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "19.1.1",
+  "version": "19.3.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -28,7 +28,7 @@
     "@opengeoweb/webmap-react": "*",
     "@opengeoweb/webmap": "*",
     "@opengeoweb/theme": "*",
-    "axios": "^1.16.0",
+    "axios": "^1.18.0",
     "@opengeoweb/layer-select": "*",
     "lodash": "^4.18.1",
     "ol": "^10.4.0",