@opengeoweb/webmap-react 9.34.0 → 9.35.1-spike-oltanstack.0

package/index.esm.js

@@ -1,9 +1,9 @@
-import { legendImageStore, WMImageEventType, webmapUtils, getLegendGraphicURLForLayer, getPixelCoordFromLatLong, WMJSMAP_LONLAT_EPSGCODE, getLatLongFromPixelCoord, LayerType, getWMJSMapById, debugLogger, DebugType, WMLayer, registerWMLayer, WMBBOX, getWMLayerById, WMJSMap, tilesettings } from '@opengeoweb/webmap';
+import { legendImageStore, WMImageEventType, webmapUtils, getLegendGraphicURLForLayer, getPixelCoordFromLatLong, WMJSMAP_LONLAT_EPSGCODE, getLatLongFromPixelCoord, LayerType, getWMJSMapById, debugLogger, DebugType, WMLayer, registerWMLayer, tilesettings, WMBBOX, getWMLayerById, WMJSMap } from '@opengeoweb/webmap';
 export { WEBMAP_NAMESPACE, webmapTranslations } from '@opengeoweb/webmap';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useState, useEffect } from 'react';
-import { CustomTooltip, CanvasComponent, ToolContainerDraggable, CustomIconButton, dateUtils, PROJECTION } from '@opengeoweb/shared';
+import { CustomTooltip, CanvasComponent, useWheelStopPropagation, ToolContainerDraggable, CustomIconButton, dateUtils, PROJECTION } from '@opengeoweb/shared';
 import 'i18next';
 import { useTranslation } from 'react-i18next';
 import { Paper, Box, Typography, Grid2, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$1, FormLabel, Switch, styled, Slider } from '@mui/material';
@@ -981,6 +981,7 @@ var LegendDialog = function LegendDialog(_ref) {
     source = _ref$source === void 0 ? 'app' : _ref$source;
   var _useWebmapReactTransl = useWebmapReactTranslation(),
     t = _useWebmapReactTransl.t;
+  var stopWheelEventPropagationRef = useWheelStopPropagation();
   return jsx(ToolContainerDraggable, {
     startPosition: {
       right: 20,
@@ -1001,6 +1002,7 @@ var LegendDialog = function LegendDialog(_ref) {
         padding: 0.5
       },
       children: layers && layers.length > 0 ? jsx(Box, {
+        ref: stopWheelEventPropagationRef,
         "data-testid": "LegendList",
         sx: {
           display: 'flex',
@@ -6702,16 +6704,7 @@ var makeLayerPropListFromChildren = function makeLayerPropListFromChildren(child
   return myChildren;
 };
 var parseWMJSLayer = function parseWMJSLayer(wmLayer, forceReload) {
-  return new Promise(function (resolve, reject) {
-    var callback = function callback() {
-      if (wmLayer.hasError) {
-        reject(new Error(wmLayer.lastError));
-      } else {
-        resolve(wmLayer);
-      }
-    };
-    wmLayer.parseLayer(callback, forceReload, 'ReactMapView parseWMJSLayer');
-  });
+  return wmLayer.parseLayer(forceReload);
 };
 var setWMLayerPropsBasedOnChildProps = function setWMLayerPropsBasedOnChildProps(child, wmLayer, mapViewProps) {
   var needsRedraw = false;
@@ -6769,7 +6762,7 @@ var setWMLayerPropsBasedOnChildProps = function setWMLayerPropsBasedOnChildProps
 };
 var addWMLayerPropsBasedOnChildProps = function addWMLayerPropsBasedOnChildProps(child, mapId, props, onUpdateLayerInformation) {
   var wmjsMap = getWMJSMapById(mapId);
-  if (!wmjsMap) {
+  if (!wmjsMap || wmjsMap.isDestroyed) {
     return;
   }
   var keepOnTop = child.layerType === LayerType.overLayer || false;
@@ -6794,11 +6787,18 @@ var addWMLayerPropsBasedOnChildProps = function addWMLayerPropsBasedOnChildProps
       if (newWMLayer.hasError === true) {
         child.onLayerError && child.onLayerError(newWMLayer, new Error(newWMLayer.lastError));
       }
-      setWMLayerPropsBasedOnChildProps(child, newWMLayer, props);
-      var layerInfo = getLayerUpdateInfo(newWMLayer, mapId);
-      onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
-      child.onLayerReady && child.onLayerReady(newWMLayer, wmjsMap);
-      wmjsMap.draw();
+      // This ensures that MultiMapViewConnect works properly.
+      setTimeout(function () {
+        var wmjsMap = getWMJSMapById(mapId);
+        if (!wmjsMap || wmjsMap.isDestroyed) {
+          return;
+        }
+        setWMLayerPropsBasedOnChildProps(child, newWMLayer, props);
+        var layerInfo = getLayerUpdateInfo(newWMLayer, mapId);
+        onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
+        child.onLayerReady && child.onLayerReady(newWMLayer, wmjsMap);
+        wmjsMap.draw();
+      }, 1);
     })["catch"](function (e) {
       child.onLayerError && child.onLayerError(e);
     });
@@ -6895,10 +6895,6 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
      */
     _this.onStartRefetchTimer = function (force) {
       var shouldAutoFetch = _this.props.shouldAutoFetch;
-      /* TODO, Maarten Plieger, 2021-09-02
-        This causes many issues, we should improve the update strategy.
-        Certain presets have >20 layers. This causes 20 times parsing the GetCapabilities for a minor update of the store.
-      */
       _this.clearRefetchTimer();
       var autoFetchInterval = Number(shouldAutoFetch); // Default true -> 1 minute
       var refetch = function refetch() {
@@ -6908,20 +6904,40 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
           var mapId = _this.props.mapId;
           var wmjsMap = webmapUtils.getWMJSMapById(mapId);
           var layers = wmjsMap === null || wmjsMap === void 0 ? void 0 : wmjsMap.getLayers();
-          layers === null || layers === void 0 || layers.forEach(function (layer) {
-            if (layer.enabled !== false) {
-              parseWMJSLayer(layer, true).then(function (wmLayer) {
-                var _this2 = _this,
-                  props = _this2.props;
-                var mapId = props.mapId,
-                  onUpdateLayerInformation = props.onUpdateLayerInformation;
-                var layerInfo = getLayerUpdateInfo(wmLayer, mapId);
-                onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
-              })["catch"](function (e) {
-                console.error(e);
-              });
-            }
-          });
+          layers === null || layers === void 0 || layers.forEach( /*#__PURE__*/function () {
+            var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(layer) {
+              var _this2, _props, _mapId, onUpdateLayerInformation, layerInfo;
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    if (!(layer.enabled !== false)) {
+                      _context.next = 13;
+                      break;
+                    }
+                    _context.prev = 1;
+                    _context.next = 4;
+                    return layer.parseLayer();
+                  case 4:
+                    _this2 = _this, _props = _this2.props;
+                    _mapId = _props.mapId, onUpdateLayerInformation = _props.onUpdateLayerInformation;
+                    layerInfo = getLayerUpdateInfo(layer, _mapId);
+                    onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
+                    _context.next = 13;
+                    break;
+                  case 10:
+                    _context.prev = 10;
+                    _context.t0 = _context["catch"](1);
+                    console.error(_context.t0);
+                  case 13:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[1, 10]]);
+            }));
+            return function (_x) {
+              return _ref.apply(this, arguments);
+            };
+          }());
         }
       };
       if (autoFetchInterval > 0) {
@@ -6939,6 +6955,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       adagucInitialised: false
     };
+    _this.tileServerSettings = props.tileServerSettings || ReactMapView.defaultProps.tileServerSettings;
     _this.resize = _this.resize.bind(_this);
     _this.handleWindowResize = _this.handleWindowResize.bind(_this);
     _this.drawDebounced = debounce(_this.drawDebounced, 600);
@@ -7072,7 +7089,15 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         return;
       }
       var mapId = props.mapId,
-        children = props.children;
+        children = props.children,
+        isTimeScrollingEnabled = props.isTimeScrollingEnabled;
+      if (isTimeScrollingEnabled) {
+        var _wmjsMap = webmapUtils.getWMJSMapById(mapId);
+        _wmjsMap === null || _wmjsMap === void 0 || _wmjsMap.detachWheelEvent();
+      } else {
+        var _wmjsMap2 = webmapUtils.getWMJSMapById(mapId);
+        _wmjsMap2 === null || _wmjsMap2 === void 0 || _wmjsMap2.attachWheelEvent();
+      }
       if (prevProps && prevProps.mapId !== props.mapId) {
         console.warn('MapId has changed on an already mounted map!');
         var prevWMJSMap = webmapUtils.getWMJSMapById(prevProps.mapId);
@@ -7195,13 +7220,13 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         // ReactWMJSLayer Layer Childs: Detect all ReactLayers connected to WMJSLayers, remove WMJSLayer if there is no ReactLayer
         var wmjsLayers = wmjsMap.getLayers();
         var onUpdateLayerInformation = props.onUpdateLayerInformation,
-          _mapId = props.mapId;
+          _mapId2 = props.mapId;
         wmjsLayers.forEach(function (wmLayer) {
           var isWMLayerInReactMapViewChildren = myChildren.find(function (child) {
             return child.id === wmLayer.ReactWMJSLayerId;
           });
           if (!isWMLayerInReactMapViewChildren) {
-            removeWMLayerFromMap(wmLayer, _mapId, onUpdateLayerInformation);
+            removeWMLayerFromMap(wmLayer, _mapId2, onUpdateLayerInformation);
           }
         });
         // ReactWMJSLayer BaseLayer Childs: For the baseLayers, detect all ReactLayers connected to WMJSLayers, remove WMJSLayer if there is no ReactLayer
@@ -7228,29 +7253,29 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
           var layerIsInThisMap = wmjsMap.hasLayer(wmLayer);
           if (!layerIsInThisMap) {
             // Add a new layer, it is not in the this map
-            addWMLayerPropsBasedOnChildProps(child, _mapId, props, onUpdateLayerInformation);
+            addWMLayerPropsBasedOnChildProps(child, _mapId2, props, onUpdateLayerInformation);
             needsRedraw = true;
           } else {
             // Handle existing layer
             if (child.name !== undefined && wmLayer.name !== child.name) {
               // Handle layer name change
-              wmLayer.setName(child.name).then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+              wmLayer.setName(child.name).then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
                 var layerInfo;
-                return _regeneratorRuntime().wrap(function _callee$(_context) {
-                  while (1) switch (_context.prev = _context.next) {
+                return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
                     case 0:
-                      _context.next = 2;
-                      return parseWMJSLayer(wmLayer, false);
+                      _context2.next = 2;
+                      return wmLayer.parseLayer();
                     case 2:
-                      layerInfo = getLayerUpdateInfo(wmLayer, _mapId);
+                      layerInfo = getLayerUpdateInfo(wmLayer, _mapId2);
                       setWMLayerPropsBasedOnChildProps(child, wmLayer, props);
                       onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
                       wmjsMap.draw();
                     case 6:
                     case "end":
-                      return _context.stop();
+                      return _context2.stop();
                   }
-                }, _callee);
+                }, _callee2);
               })))["catch"](function (e) {
                 child.onLayerError && child.onLayerError(wmLayer, e);
               });
@@ -7319,7 +7344,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
       if (srs) {
         wmjsMap.setProjection(srs, new WMBBOX(bbox));
       }
-      wmjsMap.setWMTileRendererTileSettings(tilesettings);
+      wmjsMap.setWMTileRendererTileSettings(this.tileServerSettings || tilesettings);
       if (listeners) {
         listeners.forEach(function (listener) {
           wmjsMap.addListener(listener.name, function (data) {
@@ -7396,7 +7421,6 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         mapId = _this$props5.mapId;
       var adagucInitialised = this.state.adagucInitialised;
       var featureLayers = getFeatureLayers(children);
-      // TODO: Improve in https://gitlab.com/opengeoweb/opengeoweb/-/issues/4579
       featureLayers.forEach(function (featureLayer) {
         var wmFeatureLayer = getWMLayerById(featureLayer.id);
         if (!wmFeatureLayer) {
@@ -7490,6 +7514,7 @@ ReactMapView.defaultProps = {
   shouldAutoFetch: true,
   displayMapPin: false,
   disableMapPin: false,
+  tileServerSettings: tilesettings,
   onWMJSMount: function onWMJSMount() {},
   onWMJSUnMount: function onWMJSUnMount() {},
   onMapChangeDimension: function onMapChangeDimension() {
@@ -7760,7 +7785,7 @@ var drawLayerName = function drawLayerName(ctx, bbox, offsetX, offsetY, width, h
 // Re-enable the previousely disabled eslint rule
 /* eslint-enable no-param-reassign */
 
-var _excluded$1 = ["children", "controls", "displayTimeInMap", "onWMJSMount"];
+var _excluded$1 = ["children", "controls", "displayTimeInMap", "onWMJSMount", "isTimeScrollingEnabled"];
 var MapView = function MapView(_ref) {
   var children = _ref.children,
     _ref$controls = _ref.controls,
@@ -7770,6 +7795,7 @@ var MapView = function MapView(_ref) {
     _ref$displayTimeInMap = _ref.displayTimeInMap,
     displayTimeInMap = _ref$displayTimeInMap === void 0 ? true : _ref$displayTimeInMap,
     _onWMJSMount = _ref.onWMJSMount,
+    isTimeScrollingEnabled = _ref.isTimeScrollingEnabled,
     props = _objectWithoutProperties(_ref, _excluded$1);
   var dimensions = props.dimensions,
     mapIdProp = props.mapId;
@@ -7795,7 +7821,8 @@ var MapView = function MapView(_ref) {
     }
   }, [width, height]);
   var reactMapViewProps = _objectSpread2(_objectSpread2({}, props), {}, {
-    mapId: mapId
+    mapId: mapId,
+    isTimeScrollingEnabled: isTimeScrollingEnabled
   });
   return jsxs(Box, {
     ref: ref,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "9.34.0",
+  "version": "9.35.1-spike-oltanstack.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {
@@ -19,7 +19,8 @@
     "react-resize-detector": "^9.1.0",
     "i18next": "^23.11.5",
     "@mui/material": "^6.1.1",
-    "react-i18next": "^15.1.1"
+    "react-i18next": "^15.1.1",
+    "@tanstack/react-query": "^5.61.5"
   },
   "peerDependencies": {
     "react": "18",

package/src/lib/components/MapView/MapView.d.ts

@@ -4,5 +4,6 @@ export interface MapViewProps extends ReactMapViewProps {
     controls?: {
         zoomControls?: boolean;
     };
+    isTimeScrollingEnabled?: boolean;
 }
 export declare const MapView: React.FC<MapViewProps>;

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

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import * as React from 'react';
-import { IWMJSMap, WMLayer, WMBBOX } from '@opengeoweb/webmap';
+import { IWMJSMap, WMLayer, WMBBOX, TileServerSettings } from '@opengeoweb/webmap';
 import { ReactMapViewProps } from './types';
 import type { MapViewLayerProps } from '../MapView';
 export declare const ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION = "ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION";
@@ -21,6 +21,7 @@ export declare class ReactMapView extends React.Component<ReactMapViewProps, Rea
     adaguc: AdagucObjectProp;
     adagucContainerRef: React.RefObject<HTMLDivElement>;
     adagucWebMapJSRef: React.RefObject<HTMLDivElement>;
+    tileServerSettings: TileServerSettings;
     refetchTimer: NodeJS.Timeout | number | null;
     lastRefetched: number | null;
     static defaultProps: {
@@ -34,6 +35,7 @@ export declare class ReactMapView extends React.Component<ReactMapViewProps, Rea
         shouldAutoFetch: boolean;
         displayMapPin: boolean;
         disableMapPin: boolean;
+        tileServerSettings: TileServerSettings;
         onWMJSMount: () => void;
         onWMJSUnMount: () => void;
         onMapChangeDimension: () => void;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Bbox, Dimension, IWMJSMap } from '@opengeoweb/webmap';
+import { Bbox, Dimension, IWMJSMap, TileServerSettings } from '@opengeoweb/webmap';
 import { TFunction } from 'i18next';
 export interface ReactMapViewProps {
     listeners?: {
@@ -8,6 +8,7 @@ export interface ReactMapViewProps {
         keep: boolean;
         callbackfunction: (webMap: IWMJSMap, value: string) => void;
     }[];
+    isTimeScrollingEnabled?: boolean;
     srs?: string;
     bbox?: Bbox;
     children?: React.ReactNode;
@@ -15,6 +16,7 @@ export interface ReactMapViewProps {
     activeLayerId?: string;
     showScaleBar?: boolean;
     showLegend?: boolean;
+    tileServerSettings?: TileServerSettings;
     passiveMap?: boolean;
     displayTimeInMap?: boolean;
     animationDelay?: number;
@@ -44,6 +46,9 @@ export interface MapLocation {
     projectionX?: number;
     projectionY?: number;
     srs?: string;
+    id?: string;
+    serviceId?: string;
+    collectionId?: string;
 }
 export interface MapPinLocationPayload {
     mapId: string;

package/src/lib/components/TanStackDemo/TanStackDemo.GetCapabilitiesLiveUpdate.stories.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const MapViewRadar: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/src/lib/hooks/useHooksGetCapabilities.d.ts

@@ -0,0 +1,46 @@
+import { GetCapabilitiesJson, WMSServiceInfo, LayerTree, LayerProps, WMLayer } from '@opengeoweb/webmap';
+import { UseQueryResult } from '@tanstack/react-query';
+/**
+ * Queries the WMS GetCapabilities. This is the base TanStack hook for the other hooks in this file.
+ *
+ * @param {string} serviceUrl
+ * @returns {UseQueryResult<GetCapabilitiesJson>}
+ */
+export declare const useQueryGetWMSGetCapabilities: (serviceUrl: string) => UseQueryResult<GetCapabilitiesJson>;
+/**
+ * Returns details about the WMS service
+ *
+ * @param {string} serviceUrl
+ * @returns {(WMSServiceInfo | null)}
+ */
+export declare const useQueryGetWMSServiceInfo: (serviceUrl: string) => WMSServiceInfo | null;
+/**
+ * Gets the layer tree in hierarchical order for a WMS service. Cached by TanStack. Uses the same store as in queryWMSGetCapabilities.
+ *
+ * @param {string} serviceUrl
+ * @returns {(LayerTree | null)}
+ */
+export declare const useQueryGetWMSLayersTree: (serviceUrl: string) => LayerTree | null;
+/**
+ * Gets the flat layer list (without hierarchy) for a WMS service. Cached by TanStack. Uses the same store as in queryWMSGetCapabilities.
+ *
+ * @param {string} serviceUrl
+ * @returns {LayerProps[]}
+ */
+export declare const useQueryGetWMSLayers: (serviceUrl: string) => LayerProps[];
+/**
+ * Returns specific layer from the WMS service
+ *
+ * @param {string} serviceUrl
+ * @param {string} name
+ * @returns {(LayerProps | null)}
+ */
+export declare const useQueryGetWMSLayer: (serviceUrl: string, name: string) => LayerProps | null;
+/**
+ * Returns WMLayer instance. The layer will contains parsed dimensions and styles and keeps a state for these properties.
+ *
+ * @param {string} serviceUrl
+ * @param {string} name
+ * @returns {(WMLayer | null)}
+ */
+export declare const useGetWMLayerInstance: (serviceUrl: string, name: string) => WMLayer | null;