@opengeoweb/webmap 15.2.0 → 16.0.0

package/index.esm.js

@@ -938,36 +938,6 @@ var getFirstPartOfDimensionValueSet = function getFirstPartOfDimensionValueSet(i
   return !(inputValue != null && inputValue.indexOf) || !(inputValue != null && inputValue.includes('/')) ? inputValue : inputValue.split('/')[0];
 };
 
-/* *
- * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var fakeMaxAgeResponsesByLayer = {
-  'observation:wis2_air_temperature': 600,
-  'fmi:observation:lightning': 300,
-  'fmi:observation:temperature': 3600,
-  'fmi:observation:dewpoint': 3600,
-  'fmi:observation:temperature_foreign': 3600,
-  'fmi:observation:dewpoint_foreign': 3600,
-  'fmi:observation:cloudceiling': 3600,
-  'fmi:observation:cloudheight': 3600,
-  'fmi:observation:cloudheight_foreign': 3600,
-  'fmi:observation:cloudceiling_foreign': 3600
-};
-
 /**
  * Returns the current time in ms
  * @returns the current time in ms
@@ -1057,6 +1027,8 @@ var WMImage = /*#__PURE__*/function () {
     this._hasError = false;
     this._numFailedAttempts = 0;
     this._imageTimeStampAtError = getCurrentImageTime();
+    this._maxAgeSeconds = undefined;
+    this._loadedAtTime = undefined;
   }
   /**
    * Returns true if the image has been loaded
@@ -1065,7 +1037,10 @@ var WMImage = /*#__PURE__*/function () {
     if (this._isLoading) {
       return false;
     }
-    return this._isLoaded;
+    if (!this._isLoaded) {
+      return false;
+    }
+    return !this.isStale();
   };
   _proto.isLoadedWithoutErrors = function isLoadedWithoutErrors() {
     return this.isLoaded() && !this.hasError();
@@ -1074,25 +1049,14 @@ var WMImage = /*#__PURE__*/function () {
     return !this._isLoaded && !this._isLoading;
   };
   _proto.isStale = function isStale() {
-    if (this._fakeMaxAge === undefined) {
-      try {
-        var layerName = new URL(this.getSrc()).searchParams.get('LAYERS');
-        if (layerName) {
-          var _fakeMaxAgeResponsesB;
-          this._fakeMaxAge = (_fakeMaxAgeResponsesB = fakeMaxAgeResponsesByLayer[layerName]) != null ? _fakeMaxAgeResponsesB : null;
-        } else {
-          this._fakeMaxAge = null;
-        }
-      } catch (_e) {
-        // failed to form URL
-        this._fakeMaxAge = null;
-      }
+    if (!this._isLoaded || this._loadedAtTime === undefined) {
+      return false;
     }
-    if (this._fakeMaxAge === null) {
+    if (this._maxAgeSeconds === null || this._maxAgeSeconds === undefined) {
       return false;
     }
-    var imageAge = getCurrentImageTime() - this._loadStartTime;
-    var maxAge = this._fakeMaxAge * 1000;
+    var imageAge = getCurrentImageTime() - this._loadedAtTime;
+    var maxAge = this._maxAgeSeconds * 1000;
     return imageAge > maxAge;
   }
   /**
@@ -1202,8 +1166,39 @@ var WMImage = /*#__PURE__*/function () {
     }
     this._load();
   };
-  _proto._getImageWithHeaders = function _getImageWithHeaders(url, headers) {
+  WMImage._parseMaxAgeFromCacheControl = function _parseMaxAgeFromCacheControl(cacheControlHeader) {
+    if (!cacheControlHeader) {
+      return null;
+    }
+    var maxAgeMatch = /(?:^|,)\s*max-age=(\d+)/i.exec(cacheControlHeader);
+    if (!maxAgeMatch) {
+      return null;
+    }
+    var parsed = Number(maxAgeMatch[1]);
+    return Number.isFinite(parsed) ? parsed : null;
+  };
+  _proto._setMaxAgeFromResponseHeaders = function _setMaxAgeFromResponseHeaders(response) {
+    this._maxAgeSeconds = WMImage._parseMaxAgeFromCacheControl(response.headers.get('cache-control'));
+  };
+  _proto._updateMaxAgeFromUrl = function _updateMaxAgeFromUrl(url) {
     var _this3 = this;
+    fetch(new Request(url), {
+      method: 'GET',
+      mode: 'cors',
+      cache: 'default',
+      headers: new Headers({
+        Range: 'bytes=0-0'
+      })
+    }).then(function (response) {
+      var _response$body;
+      _this3._setMaxAgeFromResponseHeaders(response);
+      void ((_response$body = response.body) == null ? void 0 : _response$body.cancel());
+    })["catch"](function () {
+      // Keep existing behaviour if headers are not readable.
+    });
+  };
+  _proto._getImageWithHeaders = function _getImageWithHeaders(url, headers) {
+    var _this4 = this;
     var fetchHeaders = new Headers();
     if (headers && headers.length > 0) {
       for (var _iterator = _createForOfIteratorHelperLoose(headers), _step; !(_step = _iterator()).done;) {
@@ -1227,19 +1222,21 @@ var WMImage = /*#__PURE__*/function () {
       return window.btoa(binary);
     };
     fetch(request, options).then(function (response) {
+      _this4._setMaxAgeFromResponseHeaders(response);
       response.arrayBuffer().then(function (buffer) {
         var base64Flag = 'data:image/png;base64,';
         var imageStr = arrayBufferToBase64(buffer);
-        _this3.getElement().src = base64Flag + imageStr;
+        _this4.getElement().src = base64Flag + imageStr;
       })["catch"](function () {
         debugLogger(DebugType.Error);
+        _this4._loadEvent(true);
       });
     })["catch"](function () {
       debugLogger(DebugType.Error, "Unable to fetch image " + url + " with headers [" + JSON.stringify(headers) + "]");
       if (url.startsWith('http://')) {
         debugLogger(DebugType.Error);
       }
-      _this3._loadEvent(true);
+      _this4._loadEvent(true);
     });
   };
   _proto._load = function _load() {
@@ -1247,8 +1244,12 @@ var WMImage = /*#__PURE__*/function () {
     this._loadStartTime = getCurrentImageTime();
     this._hasError = false;
     if (this._isLoaded) {
-      this._loadEvent(false);
-      return;
+      if (!this.isStale()) {
+        this._loadEvent(false);
+        return;
+      }
+      this._isLoaded = false;
+      this._srcLoaded = undefined;
     }
     this._isLoading = true;
     if (!this.srcToLoad) {
@@ -1275,6 +1276,7 @@ var WMImage = /*#__PURE__*/function () {
       this._getImageWithHeaders(this.srcToLoad, this.headers);
     } else if (this.randomize) {
       /* Do a standard img.src url request */
+      this._maxAgeSeconds = null;
       var newSrc = this.srcToLoad;
       if (!this.srcToLoad.includes('?')) {
         newSrc += '?';
@@ -1290,8 +1292,9 @@ var WMImage = /*#__PURE__*/function () {
       }
       this.getElement().src = newSrc;
     } else {
-      // setting src loads the image and the 'load' callback is called when its finished loading
+      // Keep the browser image loading path for rendering reliability.
       this.getElement().src = this.srcToLoad;
+      this._updateMaxAgeFromUrl(this.srcToLoad);
     }
   };
   _proto._loadEvent = function _loadEvent(hasError) {
@@ -1300,6 +1303,7 @@ var WMImage = /*#__PURE__*/function () {
     this._hasError = hasError;
     this._isLoading = false;
     this._isLoaded = true;
+    this._loadedAtTime = hasError ? undefined : getCurrentImageTime();
     this._srcLoaded = this.srcToLoad;
     this._resolveAll();
     (_this$loadEventCallba = this.loadEventCallback) == null || _this$loadEventCallba.call(this, this);
@@ -1425,14 +1429,24 @@ var WMImageStore = /*#__PURE__*/function () {
    * @returns A WMImage which is ready to display. Can have a different extent and resolution then what was asked in srcToLoad
    */;
   _proto.getAltGeoReferencedImage = function getAltGeoReferencedImage(srcToLoad, _extent, _resolution) {
+    var imagesbyGeoRefArraySortByImageLife = this.getAltGeoReferencedImages(srcToLoad, _extent, _resolution);
+    // Now filter out the loaded images, which can be used as alternative
+    var sortByImageLifeFilterdLoaded = imagesbyGeoRefArraySortByImageLife.filter(function (image) {
+      return image.isLoadedWithoutErrors();
+    });
+    // Just return most recent available image: TODO: Possibly make use of extent and resolution to find a better one.
+    // https://gitlab.com/opengeoweb/geoweb-assets/-/issues/4481
+    return sortByImageLifeFilterdLoaded.length > 0 ? sortByImageLifeFilterdLoaded[0] : false;
+  };
+  _proto.getAltGeoReferencedImages = function getAltGeoReferencedImages(srcToLoad, _extent, _resolution) {
     var hashUrl = makeHashUrlForGeoReferencedImage(srcToLoad);
     if (!hashUrl) {
-      return false;
+      return [];
     }
     // Sort the imagesbyGeoRef array
     var imagesbyGeoRefArray = this.imagesbyGeoRef.get(hashUrl);
     if (!imagesbyGeoRefArray || imagesbyGeoRefArray.length === 0) {
-      return false;
+      return [];
     }
     // Clean the set, only keep the most recent images
     var imagesbyGeoRefArraySortByImageLife = imagesbyGeoRefArray.sort(function (imageA, imageB) {
@@ -1446,14 +1460,9 @@ var WMImageStore = /*#__PURE__*/function () {
     }).slice(0, WMIMAGESTORE_MAX_ALTIMAGES_TO_KEEP);
     // Set this array back in the array
     this.imagesbyGeoRef.set(hashUrl, imagesbyGeoRefArraySortByImageLife);
-    // Now filter out the loaded images, which can be used as alternative
-    var sortByImageLifeFilterdLoaded = imagesbyGeoRefArraySortByImageLife.filter(function (image) {
-      return image.isLoadedWithoutErrors();
-    });
-    // Just return most recent available image: TODO: Possibly make use of extent and resolution to find a better one.
-    return sortByImageLifeFilterdLoaded.length > 0 ? sortByImageLifeFilterdLoaded[0] : false;
+    return imagesbyGeoRefArraySortByImageLife;
   };
-  _proto.getGeoReferencedImage = function getGeoReferencedImage(src, geoReference) {
+  _proto.getImageAndSetGeoReference = function getImageAndSetGeoReference(src, geoReference) {
     var image = this.getImage(src);
     if (image) {
       // Make a hashUrl without BBOX
@@ -3137,7 +3146,10 @@ var WMJSDimension = /*#__PURE__*/function () {
     var timeToFind = new Date(timeStamp).toISOString().substring(0, 19) + "Z";
     return this.getClosestValue(timeToFind);
   };
-  _proto.getValueForSpecialString = function getValueForSpecialString(inputValue) {
+  _proto.getValueForSpecialString = function getValueForSpecialString(inputValue, evenWhenOutsideRange) {
+    if (evenWhenOutsideRange === void 0) {
+      evenWhenOutsideRange = false;
+    }
     // Check for special cases like: 'current', 'default, '', 'middle', 'earliest' and 'latest'
     switch (inputValue) {
       case 'current':
@@ -3147,12 +3159,16 @@ var WMJSDimension = /*#__PURE__*/function () {
       case 'middle':
         return this.getMiddleValue();
       case 'earliest':
-      case WMDateTooEarlyString:
         return this.getFirstValue();
       case 'latest':
-      case WMDateTooLateString:
         return this.getLastValue();
     }
+    if (inputValue === WMDateTooEarlyString && evenWhenOutsideRange) {
+      return this.getFirstValue();
+    }
+    if (inputValue === WMDateTooLateString && evenWhenOutsideRange) {
+      return this.getLastValue();
+    }
     return inputValue;
   };
   _proto.getExactMatchingValue = function getExactMatchingValue(inputValue) {
@@ -3180,11 +3196,11 @@ var WMJSDimension = /*#__PURE__*/function () {
     // Just make sure to return the first part if accidently start/stop/res was given.
     var firstPartValue = getFirstPartOfDimensionValueSet(inputValue);
     // Handle  'current', 'default, '', 'middle', 'earliest' and 'latest'
-    var newValue = this.getValueForSpecialString(firstPartValue);
+    var newValue = this.getValueForSpecialString(firstPartValue, evenWhenOutsideRange);
     // Get the exact value as present in the dimension values
     var matchingValue = this.getExactMatchingValue(newValue);
     // Handle  'current', 'default, '', 'middle', 'earliest' and 'latest'
-    return evenWhenOutsideRange ? this.getValueForSpecialString(matchingValue) : matchingValue;
+    return evenWhenOutsideRange ? this.getValueForSpecialString(matchingValue, evenWhenOutsideRange) : matchingValue;
   }
   /**
    * Get dimension value for specified index

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap",
-  "version": "15.2.0",
+  "version": "16.0.0",
   "description": "GeoWeb webmap library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,7 +8,7 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/shared": "15.2.0",
+    "@opengeoweb/shared": "16.0.0",
     "@tanstack/query-core": "^5.69.2",
     "lodash": "^4.17.21",
     "i18next": "^25.0.1",

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

@@ -34,7 +34,8 @@ export default class WMImage {
     _numFailedAttempts: number;
     _loadStartTime: number;
     _loadDuration?: number;
-    _fakeMaxAge?: number | null;
+    _maxAgeSeconds?: number | null;
+    _loadedAtTime?: number;
     _resolveList: ((i: WMImage) => void)[];
     geoReference: WMGeoReference | null;
     hashUrl: string | undefined;
@@ -92,6 +93,9 @@ export default class WMImage {
     loadAwait(): Promise<WMImage>;
     load(): void;
     forceReload(randomize?: boolean): void;
+    private static _parseMaxAgeFromCacheControl;
+    private _setMaxAgeFromResponseHeaders;
+    private _updateMaxAgeFromUrl;
     private _getImageWithHeaders;
     _load(): void;
     _loadEvent(hasError: boolean): void;

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

@@ -49,7 +49,8 @@ export default class WMImageStore {
      * @returns A WMImage which is ready to display. Can have a different extent and resolution then what was asked in srcToLoad
      */
     getAltGeoReferencedImage(srcToLoad: string, _extent: number[], _resolution: number): WMImage | false;
-    getGeoReferencedImage(src: string, geoReference: WMGeoReference): WMImage;
+    getAltGeoReferencedImages(srcToLoad: string, _extent: number[], _resolution: number): WMImage[];
+    getImageAndSetGeoReference(src: string, geoReference: WMGeoReference): WMImage;
     getNumCached(): number;
     /**
      * Get an WMImage object for given URL

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

@@ -74,7 +74,7 @@ export default class WMJSDimension implements Dimension {
     addTimeRangeDurationToValue(value: string): string;
     setTimeRangeDuration(duration: string): void;
     getClosestValueForTime(timeStamp: number): string;
-    getValueForSpecialString(inputValue: string): string;
+    getValueForSpecialString(inputValue: string, evenWhenOutsideRange?: boolean): string;
     getExactMatchingValue(inputValue: string): string;
     getClosestValue(inputValue: string, evenWhenOutsideRange?: boolean): string;
     /**

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

@@ -34,6 +34,7 @@ export interface LayerFoundation extends TiledLayerFoundation {
     type?: string;
     geojson?: FeatureCollection;
     options?: EDRFeatureLayerOptions;
+    showLayerLegend?: boolean;
 }
 export interface LayerOptions extends LayerFoundation {
     id: string;