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

package/index.esm.js

@@ -6704,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;
@@ -6771,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;
@@ -6796,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);
     });
@@ -6897,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() {
@@ -6910,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) {
@@ -7206,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
@@ -7239,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);
               });
@@ -7407,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "9.35.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/ReactMapView/types.d.ts

@@ -46,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;