@opengeoweb/webmap 2.1.4 → 2.3.0

package/index.esm.js

@@ -492,6 +492,14 @@ var addStylesForLayer = function addStylesForLayer(layerObjectFromWMS) {
   });
 };
 
+/**
+ * Returns the current time in ms
+ * @returns the current time in ms
+ */
+
+var getCurrentImageTime = function getCurrentImageTime() {
+  return new Date().getTime();
+};
 /**
  * WMImage provides an API to the HTML image element. It is used for caching and easier access to images.
  */
@@ -513,6 +521,8 @@ var WMImage = /*#__PURE__*/function () {
     this._isLoaded = undefined;
     this._isLoading = undefined;
     this._hasError = undefined;
+    this._imageTimeStampAtError = getCurrentImageTime();
+    this._numFailedAttempts = 0;
     this.srcToLoad = src;
     this.loadEventCallback = callback;
     this.el = new Image();
@@ -531,6 +541,9 @@ var WMImage = /*#__PURE__*/function () {
     this.hasError = this.hasError.bind(this);
     this._load = this._load.bind(this);
     this.load = this.load.bind(this);
+    this.forceReload = this.forceReload.bind(this);
+    this.getLastErrorMSecondsAgo = this.getLastErrorMSecondsAgo.bind(this);
+    this.getNumFailedAttempts = this.getNumFailedAttempts.bind(this);
     this._loadEvent = this._loadEvent.bind(this);
     this.getWidth = this.getWidth.bind(this);
     this.getHeight = this.getHeight.bind(this);
@@ -541,6 +554,9 @@ var WMImage = /*#__PURE__*/function () {
       _this._loadEvent(false);
     });
     this.el.addEventListener('error', function () {
+      _this._imageTimeStampAtError = getCurrentImageTime();
+      _this._numFailedAttempts += 1;
+
       _this._loadEvent(true);
     });
 
@@ -560,6 +576,8 @@ var WMImage = /*#__PURE__*/function () {
       this._isLoaded = false;
       this._isLoading = false;
       this._hasError = false;
+      this._numFailedAttempts = 0;
+      this._imageTimeStampAtError = getCurrentImageTime();
     }
     /**
      * Returns true if the image has been loaded
@@ -580,6 +598,25 @@ var WMImage = /*#__PURE__*/function () {
     value: function isLoading() {
       return this._isLoading;
     }
+    /**
+     * Get the amount of milliseconds since the image experienced an image load.
+     * @returns milliseconds since the image had an error
+     */
+
+  }, {
+    key: "getLastErrorMSecondsAgo",
+    value: function getLastErrorMSecondsAgo() {
+      return getCurrentImageTime() - this._imageTimeStampAtError;
+    }
+    /**
+     * @returns The number of failed attempts for this image
+     */
+
+  }, {
+    key: "getNumFailedAttempts",
+    value: function getNumFailedAttempts() {
+      return this._numFailedAttempts;
+    }
     /**
      * Set source of image, but it will not load the image yet.
      * @param src URL of the image to load
@@ -605,6 +642,8 @@ var WMImage = /*#__PURE__*/function () {
         return;
       }
 
+      this._numFailedAttempts = 0;
+      this._imageTimeStampAtError = getCurrentImageTime();
       this._isLoaded = false;
     }
     /**
@@ -644,6 +683,14 @@ var WMImage = /*#__PURE__*/function () {
       this._load();
     }
   }, {
+    key: "forceReload",
+    value: function forceReload() {
+      this._isLoaded = false;
+      this._srcLoaded = undefined;
+
+      this._load();
+    }
+  }, {
     key: "_getImageWithHeaders",
     value: function _getImageWithHeaders(url, headers) {
       var _this2 = this;
@@ -714,8 +761,12 @@ var WMImage = /*#__PURE__*/function () {
         var hostName = "".concat(splittedHREF[0], "//").concat(splittedHREF[1], "/");
         this.srcToLoad = hostName + this.srcToLoad;
       }
+      /*
+       * If the image has already loaded this source succesfully (without error), simply trigger the loadevent.
+       */
 
-      if (this.srcToLoad === this._srcLoaded) {
+
+      if (this.srcToLoad === this._srcLoaded && !this._hasError) {
         this._loadEvent(false);
 
         return;
@@ -1337,13 +1388,14 @@ var addAlternativeImage = function addAlternativeImage(newLayer) {
   /* It is not in the list, so add it */
 
   if (imageIsAlreadyIndex === -1) {
-    sharedImagesList[sigImageUrl].push(newLayer);
-  }
-  /* Ensure that the oldest images are removed, keep a maximum of 10 images per signature url */
+    /* Ensure that the oldest images are removed, keep a maximum of 10 images per signature url */
+    while (sharedImagesList[sigImageUrl].length >= 10) {
+      sharedImagesList[sigImageUrl].pop();
+    }
+    /* Add it to the beginning of the array for efficieny in searching at a later stage */
 
 
-  while (sharedImagesList[sigImageUrl].length > 10) {
-    sharedImagesList[sigImageUrl].splice(0, 1);
+    sharedImagesList[sigImageUrl].unshift(newLayer);
   }
 };
 /**
@@ -1368,38 +1420,17 @@ var removeAlternativeImage = function removeAlternativeImage(imageUrl) {
   }
 };
 /**
- * Algorithm two determine how much two bboxes are similar
- * @param rect1
- * @param rect2
- * @returns
- */
-
-var geClosestBBox = function geClosestBBox(rect1, rect2) {
-  var diffTLX = rect1.left - rect2.left;
-  var diffTLY = rect1.top - rect2.top;
-  var diffBRX = rect1.right - rect2.right;
-  var diffBRY = rect1.bottom - rect2.bottom;
-  return Math.sqrt(diffTLX * diffTLX + diffTLY * diffTLY) + Math.sqrt(diffBRX * diffBRX + diffBRY * diffBRY);
-};
-/**
- * Sort the imageslist by overlapping area, highest area first
+ * Sort the imageslist by imagedate, newewst image first.
  * @param imagesList
- * @param bbox
  * @returns
  */
 
-var sortByOverlappingArea = function sortByOverlappingArea(imagesList, bbox) {
-  var toSort = imagesList.map(function (im) {
-    return {
-      dist: geClosestBBox(im.bbox, bbox),
-      image: im
-    };
-  });
-  var sorted = toSort.sort(function (a, b) {
-    return a.dist > b.dist ? 1 : -1;
+var sortByImageDate = function sortByImageDate(imagesList) {
+  var sorted = imagesList.sort(function (a, b) {
+    return a.imageAge < b.imageAge ? 1 : -1;
   });
   return sorted.map(function (i) {
-    return i.image;
+    return i;
   });
 };
 /**
@@ -1410,17 +1441,18 @@ var sortByOverlappingArea = function sortByOverlappingArea(imagesList, bbox) {
  * @returns A canvasLayer, containing the new image source with its geo properties
  */
 
-var getAlternativeImage = function getAlternativeImage(imageUrl, imageStore, bbox) {
+var getAlternativeImage = function getAlternativeImage(imageUrl, imageStore, // eslint-disable-next-line no-unused-vars
+_bbox) {
   var sigImageUrl = makeQueryStringWithoutGeoInfo(imageUrl);
   var imagesForUrl = sharedImagesList[sigImageUrl];
 
   if (imagesForUrl && imagesForUrl.length > 0) {
-    var sortedImagesForUrl = sortByOverlappingArea(imagesForUrl, bbox);
-    /* Find the first image in this list which is also loaded */
+    var sortedImagesForUrl = sortByImageDate(imagesForUrl);
+    /* Find the first image in this list which is also loaded and has no error */
 
     var index = sortedImagesForUrl.findIndex(function (altImage) {
       var cachedImage = imageStore.getImageForSrc(altImage.imageSource);
-      return cachedImage && cachedImage.isLoaded();
+      return cachedImage && cachedImage.isLoaded() && !cachedImage.isLoading() && !cachedImage.hasError();
     });
     if (index !== -1) return sortedImagesForUrl[index];
   }
@@ -1588,16 +1620,29 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
       for (var j = 0; j < this.layers.length; j += 1) {
         var imageToDisplay = this._imageStore.getImageForSrc(this.layers[j].imageSource);
 
-        if (!imageToDisplay || imageToDisplay.isLoaded() === false) {
-          /* Find closest image */
+        if (imageToDisplay && imageToDisplay.isLoaded() && !imageToDisplay.isLoading() && !imageToDisplay.hasError()) {
+          // Draw this image, it is loaded and OK
+          this._drawImage(this.layers[j]);
+        } else {
+          /**
+           * Check if this image has an error.
+           * If the error has occured some time ago, and the amount of retries is low, just retry to load the image.
+           */
+          if (imageToDisplay.hasError()) {
+            if (imageToDisplay.isLoading() === false && imageToDisplay.getLastErrorMSecondsAgo() > 5000) {
+              if (imageToDisplay.getNumFailedAttempts() < 10) {
+                imageToDisplay.forceReload();
+              }
+            }
+          }
+          /* Find closest alternative and display instead image */
+
+
           var im = getAlternativeImage(this.layers[j].imageSource, this._imageStore, this._currentnewbbox);
 
           if (im) {
             this._drawImage(im);
           }
-        } else {
-          // Draw
-          this._drawImage(this.layers[j]);
         }
       }
 
@@ -1687,6 +1732,7 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
 
       var newLayer = {
         imageSource: imageSource,
+        imageAge: getCurrentImageTime(),
         opacity: opacity,
         bbox: {
           left: bbox.left,
@@ -1907,8 +1953,9 @@ var WMJSAnimate = /*#__PURE__*/function () {
         for (var i = 0; i < this._map.animationList[nextStep].requests.length; i += 1) {
           var url = this._map.animationList[nextStep].requests[i].url;
           var image = getMapImageStore.getImageForSrc(url);
+          /* Get a loaded image which has no error */
 
-          if (image && image.isLoaded()) {
+          if (image && image.isLoaded() && !image.isLoading() && !image.hasError()) {
             numReady += 1;
           } else {
             /* Check if a similar image is available instead, then we can continue with the smoother animation */
@@ -1916,11 +1963,14 @@ var WMJSAnimate = /*#__PURE__*/function () {
 
             if (im) {
               numReady += 1;
+            } else if (!(image && image.isLoading())) {
+              /* No alternatives and current image is not loading, so lets continue the animation */
+              numReady += 1;
             }
           }
         }
 
-        if (numReady === this._map.animationList[nextStep].requests.length) {
+        if (numReady >= this._map.animationList[nextStep].requests.length) {
           continueAnimation = true;
         }
 
@@ -1974,9 +2024,11 @@ var WMJSAnimate = /*#__PURE__*/function () {
                 this._map.setDimension(animationStep.name, animationStep.value, false);
 
                 this._map.animationList[index].imagesInPrefetch = prefetch(this._map.animationList[index].requests);
-                getNumImagesLoading += this._map.animationList[index].imagesInPrefetch.length; // imageStore.getNumImagesLoading();
+                getNumImagesLoading = this._imageStore.getNumImagesLoading();
 
-                if (getNumImagesLoading > maxSimultaneousLoads - 1) break;
+                if (getNumImagesLoading > maxSimultaneousLoads - 1) {
+                  break;
+                }
               }
             }
           }
@@ -2877,6 +2929,7 @@ var WMJSDimension = /*#__PURE__*/function () {
     this.initialize = this.initialize.bind(this);
     this.getValue = this.getValue.bind(this);
     this.setValue = this.setValue.bind(this);
+    this.getValues = this.setValue.bind(this);
     this.setClosestValue = this.setClosestValue.bind(this);
     this.addTimeRangeDurationToValue = this.addTimeRangeDurationToValue.bind(this);
     this.setTimeRangeDuration = this.setTimeRangeDuration.bind(this);
@@ -2885,6 +2938,7 @@ var WMJSDimension = /*#__PURE__*/function () {
     this.get = this.get.bind(this);
     this.getFirstValue = this.getFirstValue.bind(this);
     this.getLastValue = this.getLastValue.bind(this);
+    this.getDimInterval = this.getDimInterval.bind(this);
     this.getIndexForValue = this.getIndexForValue.bind(this);
     this.size = this.size.bind(this);
     this.clone = this.clone.bind(this);
@@ -3159,6 +3213,17 @@ var WMJSDimension = /*#__PURE__*/function () {
 
       this.currentValue = value;
     }
+    /**
+     * Returns values of the dimension, according to values defined in WMS specification, e.g. 2011-01-01T00:00:00Z/2012-01-01T00:00:00Z/P1M or list of values.
+     * @returns
+     */
+
+  }, {
+    key: "getValues",
+    value: function getValues() {
+      this.initialize();
+      return this.values;
+    }
   }, {
     key: "setClosestValue",
     value: function setClosestValue() {
@@ -3301,6 +3366,17 @@ var WMJSDimension = /*#__PURE__*/function () {
       if (this._type === 'anyvalue') return this._allValues[index];
       return null;
     }
+    /**
+     * Hint about the timestep size / time resolution of this dimension.
+     * @returns The dimTimeInterval
+     */
+
+  }, {
+    key: "getDimInterval",
+    value: function getDimInterval() {
+      this.initialize();
+      return this.dimTimeInterval;
+    }
     /**
      * Shorthand functionf or getValueForIndex
      */
@@ -3499,6 +3575,7 @@ var MapPin = /*#__PURE__*/function () {
     this.geoPosX = null;
     this.geoPosY = null;
     this.displayMapPin = true;
+    this.disableMapPin = false;
 
     this.redrawMap = function () {
       _this._map.draw();
@@ -3519,6 +3596,8 @@ var MapPin = /*#__PURE__*/function () {
       var x = _x;
       var y = _y;
       if (!x || !y) return;
+      if (_this.disableMapPin && !_bbox) return; // we still want to update the pin position when the bbox changes.
+
       _this.x = parseInt(x, 10);
       _this.y = parseInt(y, 10);
       _this.exactX = parseFloat(x);
@@ -3543,6 +3622,12 @@ var MapPin = /*#__PURE__*/function () {
       _this.setMapPin(newpos.x, newpos.y);
     };
 
+    this.toggleDisableMapPin = function () {
+      _this.disableMapPin = !_this.disableMapPin;
+
+      _this.redrawMap();
+    };
+
     this.showMapPin = function () {
       _this.displayMapPin = true;
 
@@ -3562,7 +3647,7 @@ var MapPin = /*#__PURE__*/function () {
     key: "drawMarker",
     value: function drawMarker(ctx) {
       if (isDefined(this.x) && isDefined(this.y)) {
-        WMDrawMarker(ctx, this.x, this.y, '#051039');
+        WMDrawMarker(ctx, this.x, this.y, this.disableMapPin ? '#808080' : '#051039');
       }
     }
   }]);
@@ -5127,7 +5212,6 @@ var WMJSMap = /*#__PURE__*/function () {
       this.mainElement.style.width = "".concat(this.width, "px");
       this.mainElement.style.height = "".concat(this.height, "px");
       this.setBBOX(this.resizeBBOX);
-      this.mapPin.repositionMapPin();
       this.showBoundingBox();
       this.divBuffer.resize(this.getWidth().toString(), this.getHeight().toString());
       this.repositionLegendGraphic();
@@ -6724,6 +6808,7 @@ var WMJSMap = /*#__PURE__*/function () {
 
       this.updateBBOX.setBBOX(this.bbox);
       this.drawnBBOX.setBBOX(this.bbox);
+      this.mapPin.repositionMapPin(this.bbox);
       /* Undo part */
 
       if (this.DoRedo === 0 && this.DoUndo === 0) {
@@ -7513,7 +7598,7 @@ rootNode, path) {
 
     if (layers[j].Layer) {
       nodeObject.children = [];
-      recursivelyFindLayer(toArray(layers[j].Layer), nodeObject.children, path + layers[j].Title.value);
+      recursivelyFindLayer(toArray(layers[j].Layer), nodeObject.children, [].concat(_toConsumableArray(path), [layers[j].Title.value]));
     }
   } // Sort nodes alphabetically.
 
@@ -7841,7 +7926,7 @@ var WMJSService = /*#__PURE__*/function () {
           nodeStructure.text = I18n.unnamed_service.text;
         }
 
-        recursivelyFindLayer(WMSLayers, nodeStructure.children, '');
+        recursivelyFindLayer(WMSLayers, nodeStructure.children, []);
         succes(nodeStructure);
       };
 

package/index.umd.js

@@ -455,6 +455,14 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
+  /**
+   * Returns the current time in ms
+   * @returns the current time in ms
+   */
+
+  var getCurrentImageTime = function getCurrentImageTime() {
+    return new Date().getTime();
+  };
   /**
    * WMImage provides an API to the HTML image element. It is used for caching and easier access to images.
    */
@@ -476,6 +484,8 @@
       this._isLoaded = undefined;
       this._isLoading = undefined;
       this._hasError = undefined;
+      this._imageTimeStampAtError = getCurrentImageTime();
+      this._numFailedAttempts = 0;
       this.srcToLoad = src;
       this.loadEventCallback = callback;
       this.el = new Image();
@@ -494,6 +504,9 @@
       this.hasError = this.hasError.bind(this);
       this._load = this._load.bind(this);
       this.load = this.load.bind(this);
+      this.forceReload = this.forceReload.bind(this);
+      this.getLastErrorMSecondsAgo = this.getLastErrorMSecondsAgo.bind(this);
+      this.getNumFailedAttempts = this.getNumFailedAttempts.bind(this);
       this._loadEvent = this._loadEvent.bind(this);
       this.getWidth = this.getWidth.bind(this);
       this.getHeight = this.getHeight.bind(this);
@@ -504,6 +517,9 @@
         _this._loadEvent(false);
       });
       this.el.addEventListener('error', function () {
+        _this._imageTimeStampAtError = getCurrentImageTime();
+        _this._numFailedAttempts += 1;
+
         _this._loadEvent(true);
       });
 
@@ -521,6 +537,8 @@
       this._isLoaded = false;
       this._isLoading = false;
       this._hasError = false;
+      this._numFailedAttempts = 0;
+      this._imageTimeStampAtError = getCurrentImageTime();
     };
     /**
      * Returns true if the image has been loaded
@@ -539,6 +557,23 @@
     WMImage.prototype.isLoading = function () {
       return this._isLoading;
     };
+    /**
+     * Get the amount of milliseconds since the image experienced an image load.
+     * @returns milliseconds since the image had an error
+     */
+
+
+    WMImage.prototype.getLastErrorMSecondsAgo = function () {
+      return getCurrentImageTime() - this._imageTimeStampAtError;
+    };
+    /**
+     * @returns The number of failed attempts for this image
+     */
+
+
+    WMImage.prototype.getNumFailedAttempts = function () {
+      return this._numFailedAttempts;
+    };
     /**
      * Set source of image, but it will not load the image yet.
      * @param src URL of the image to load
@@ -563,6 +598,8 @@
         return;
       }
 
+      this._numFailedAttempts = 0;
+      this._imageTimeStampAtError = getCurrentImageTime();
       this._isLoaded = false;
     };
     /**
@@ -598,6 +635,13 @@
       this._load();
     };
 
+    WMImage.prototype.forceReload = function () {
+      this._isLoaded = false;
+      this._srcLoaded = undefined;
+
+      this._load();
+    };
+
     WMImage.prototype._getImageWithHeaders = function (url, headers) {
       var _this = this;
 
@@ -666,8 +710,12 @@
         var hostName = splittedHREF[0] + "//" + splittedHREF[1] + "/";
         this.srcToLoad = hostName + this.srcToLoad;
       }
+      /*
+       * If the image has already loaded this source succesfully (without error), simply trigger the loadevent.
+       */
+
 
-      if (this.srcToLoad === this._srcLoaded) {
+      if (this.srcToLoad === this._srcLoaded && !this._hasError) {
         this._loadEvent(false);
 
         return;
@@ -1329,13 +1377,14 @@
     /* It is not in the list, so add it */
 
     if (imageIsAlreadyIndex === -1) {
-      sharedImagesList[sigImageUrl].push(newLayer);
-    }
-    /* Ensure that the oldest images are removed, keep a maximum of 10 images per signature url */
+      /* Ensure that the oldest images are removed, keep a maximum of 10 images per signature url */
+      while (sharedImagesList[sigImageUrl].length >= 10) {
+        sharedImagesList[sigImageUrl].pop();
+      }
+      /* Add it to the beginning of the array for efficieny in searching at a later stage */
 
 
-    while (sharedImagesList[sigImageUrl].length > 10) {
-      sharedImagesList[sigImageUrl].splice(0, 1);
+      sharedImagesList[sigImageUrl].unshift(newLayer);
     }
   };
   /**
@@ -1360,38 +1409,17 @@
     }
   };
   /**
-   * Algorithm two determine how much two bboxes are similar
-   * @param rect1
-   * @param rect2
-   * @returns
-   */
-
-  var geClosestBBox = function geClosestBBox(rect1, rect2) {
-    var diffTLX = rect1.left - rect2.left;
-    var diffTLY = rect1.top - rect2.top;
-    var diffBRX = rect1.right - rect2.right;
-    var diffBRY = rect1.bottom - rect2.bottom;
-    return Math.sqrt(diffTLX * diffTLX + diffTLY * diffTLY) + Math.sqrt(diffBRX * diffBRX + diffBRY * diffBRY);
-  };
-  /**
-   * Sort the imageslist by overlapping area, highest area first
+   * Sort the imageslist by imagedate, newewst image first.
    * @param imagesList
-   * @param bbox
    * @returns
    */
 
-  var sortByOverlappingArea = function sortByOverlappingArea(imagesList, bbox) {
-    var toSort = imagesList.map(function (im) {
-      return {
-        dist: geClosestBBox(im.bbox, bbox),
-        image: im
-      };
-    });
-    var sorted = toSort.sort(function (a, b) {
-      return a.dist > b.dist ? 1 : -1;
+  var sortByImageDate = function sortByImageDate(imagesList) {
+    var sorted = imagesList.sort(function (a, b) {
+      return a.imageAge < b.imageAge ? 1 : -1;
     });
     return sorted.map(function (i) {
-      return i.image;
+      return i;
     });
   };
   /**
@@ -1402,17 +1430,18 @@
    * @returns A canvasLayer, containing the new image source with its geo properties
    */
 
-  var getAlternativeImage = function getAlternativeImage(imageUrl, imageStore, bbox) {
+  var getAlternativeImage = function getAlternativeImage(imageUrl, imageStore, // eslint-disable-next-line no-unused-vars
+  _bbox) {
     var sigImageUrl = makeQueryStringWithoutGeoInfo(imageUrl);
     var imagesForUrl = sharedImagesList[sigImageUrl];
 
     if (imagesForUrl && imagesForUrl.length > 0) {
-      var sortedImagesForUrl = sortByOverlappingArea(imagesForUrl, bbox);
-      /* Find the first image in this list which is also loaded */
+      var sortedImagesForUrl = sortByImageDate(imagesForUrl);
+      /* Find the first image in this list which is also loaded and has no error */
 
       var index = sortedImagesForUrl.findIndex(function (altImage) {
         var cachedImage = imageStore.getImageForSrc(altImage.imageSource);
-        return cachedImage && cachedImage.isLoaded();
+        return cachedImage && cachedImage.isLoaded() && !cachedImage.isLoading() && !cachedImage.hasError();
       });
       if (index !== -1) return sortedImagesForUrl[index];
     }
@@ -1573,16 +1602,29 @@
       for (var j = 0; j < this.layers.length; j += 1) {
         var imageToDisplay = this._imageStore.getImageForSrc(this.layers[j].imageSource);
 
-        if (!imageToDisplay || imageToDisplay.isLoaded() === false) {
-          /* Find closest image */
+        if (imageToDisplay && imageToDisplay.isLoaded() && !imageToDisplay.isLoading() && !imageToDisplay.hasError()) {
+          // Draw this image, it is loaded and OK
+          this._drawImage(this.layers[j]);
+        } else {
+          /**
+           * Check if this image has an error.
+           * If the error has occured some time ago, and the amount of retries is low, just retry to load the image.
+           */
+          if (imageToDisplay.hasError()) {
+            if (imageToDisplay.isLoading() === false && imageToDisplay.getLastErrorMSecondsAgo() > 5000) {
+              if (imageToDisplay.getNumFailedAttempts() < 10) {
+                imageToDisplay.forceReload();
+              }
+            }
+          }
+          /* Find closest alternative and display instead image */
+
+
           var im = getAlternativeImage(this.layers[j].imageSource, this._imageStore, this._currentnewbbox);
 
           if (im) {
             this._drawImage(im);
           }
-        } else {
-          // Draw
-          this._drawImage(this.layers[j]);
         }
       }
 
@@ -1669,6 +1711,7 @@
 
       var newLayer = {
         imageSource: imageSource,
+        imageAge: getCurrentImageTime(),
         opacity: opacity,
         bbox: {
           left: bbox.left,
@@ -1897,8 +1940,9 @@
         for (var i = 0; i < this._map.animationList[nextStep].requests.length; i += 1) {
           var url = this._map.animationList[nextStep].requests[i].url;
           var image = getMapImageStore.getImageForSrc(url);
+          /* Get a loaded image which has no error */
 
-          if (image && image.isLoaded()) {
+          if (image && image.isLoaded() && !image.isLoading() && !image.hasError()) {
             numReady += 1;
           } else {
             /* Check if a similar image is available instead, then we can continue with the smoother animation */
@@ -1906,11 +1950,14 @@
 
             if (im) {
               numReady += 1;
+            } else if (!(image && image.isLoading())) {
+              /* No alternatives and current image is not loading, so lets continue the animation */
+              numReady += 1;
             }
           }
         }
 
-        if (numReady === this._map.animationList[nextStep].requests.length) {
+        if (numReady >= this._map.animationList[nextStep].requests.length) {
           continueAnimation = true;
         }
 
@@ -1963,9 +2010,11 @@
                 this._map.setDimension(animationStep.name, animationStep.value, false);
 
                 this._map.animationList[index].imagesInPrefetch = prefetch(this._map.animationList[index].requests);
-                getNumImagesLoading += this._map.animationList[index].imagesInPrefetch.length; // imageStore.getNumImagesLoading();
+                getNumImagesLoading = this._imageStore.getNumImagesLoading();
 
-                if (getNumImagesLoading > maxSimultaneousLoads - 1) break;
+                if (getNumImagesLoading > maxSimultaneousLoads - 1) {
+                  break;
+                }
               }
             }
           }
@@ -2903,6 +2952,7 @@
       this.initialize = this.initialize.bind(this);
       this.getValue = this.getValue.bind(this);
       this.setValue = this.setValue.bind(this);
+      this.getValues = this.setValue.bind(this);
       this.setClosestValue = this.setClosestValue.bind(this);
       this.addTimeRangeDurationToValue = this.addTimeRangeDurationToValue.bind(this);
       this.setTimeRangeDuration = this.setTimeRangeDuration.bind(this);
@@ -2911,6 +2961,7 @@
       this.get = this.get.bind(this);
       this.getFirstValue = this.getFirstValue.bind(this);
       this.getLastValue = this.getLastValue.bind(this);
+      this.getDimInterval = this.getDimInterval.bind(this);
       this.getIndexForValue = this.getIndexForValue.bind(this);
       this.size = this.size.bind(this);
       this.clone = this.clone.bind(this);
@@ -3189,6 +3240,16 @@
 
       this.currentValue = value;
     };
+    /**
+     * Returns values of the dimension, according to values defined in WMS specification, e.g. 2011-01-01T00:00:00Z/2012-01-01T00:00:00Z/P1M or list of values.
+     * @returns
+     */
+
+
+    WMJSDimension.prototype.getValues = function () {
+      this.initialize();
+      return this.values;
+    };
 
     WMJSDimension.prototype.setClosestValue = function (newValue, evenWhenOutsideRange) {
       if (newValue === void 0) {
@@ -3335,6 +3396,16 @@
       if (this._type === 'anyvalue') return this._allValues[index];
       return null;
     };
+    /**
+     * Hint about the timestep size / time resolution of this dimension.
+     * @returns The dimTimeInterval
+     */
+
+
+    WMJSDimension.prototype.getDimInterval = function () {
+      this.initialize();
+      return this.dimTimeInterval;
+    };
     /**
      * Shorthand functionf or getValueForIndex
      */
@@ -3549,6 +3620,7 @@
       this.geoPosX = null;
       this.geoPosY = null;
       this.displayMapPin = true;
+      this.disableMapPin = false;
 
       this.redrawMap = function () {
         _this._map.draw();
@@ -3569,6 +3641,8 @@
         var x = _x;
         var y = _y;
         if (!x || !y) return;
+        if (_this.disableMapPin && !_bbox) return; // we still want to update the pin position when the bbox changes.
+
         _this.x = parseInt(x, 10);
         _this.y = parseInt(y, 10);
         _this.exactX = parseFloat(x);
@@ -3593,6 +3667,12 @@
         _this.setMapPin(newpos.x, newpos.y);
       };
 
+      this.toggleDisableMapPin = function () {
+        _this.disableMapPin = !_this.disableMapPin;
+
+        _this.redrawMap();
+      };
+
       this.showMapPin = function () {
         _this.displayMapPin = true;
 
@@ -3610,7 +3690,7 @@
 
     MapPin.prototype.drawMarker = function (ctx) {
       if (isDefined(this.x) && isDefined(this.y)) {
-        WMDrawMarker(ctx, this.x, this.y, '#051039');
+        WMDrawMarker(ctx, this.x, this.y, this.disableMapPin ? '#808080' : '#051039');
       }
     };
 
@@ -5140,7 +5220,6 @@
       this.mainElement.style.width = this.width + "px";
       this.mainElement.style.height = this.height + "px";
       this.setBBOX(this.resizeBBOX);
-      this.mapPin.repositionMapPin();
       this.showBoundingBox();
       this.divBuffer.resize(this.getWidth().toString(), this.getHeight().toString());
       this.repositionLegendGraphic();
@@ -6678,6 +6757,7 @@
 
       this.updateBBOX.setBBOX(this.bbox);
       this.drawnBBOX.setBBOX(this.bbox);
+      this.mapPin.repositionMapPin(this.bbox);
       /* Undo part */
 
       if (this.DoRedo === 0 && this.DoUndo === 0) {
@@ -7485,7 +7565,7 @@
 
       if (layers[j].Layer) {
         nodeObject.children = [];
-        recursivelyFindLayer(toArray(layers[j].Layer), nodeObject.children, path + layers[j].Title.value);
+        recursivelyFindLayer(toArray(layers[j].Layer), nodeObject.children, __spreadArray(__spreadArray([], __read(path)), [layers[j].Title.value]));
       }
     } // Sort nodes alphabetically.
 
@@ -7805,7 +7885,7 @@
           nodeStructure.text = I18n.unnamed_service.text;
         }
 
-        recursivelyFindLayer(WMSLayers, nodeStructure.children, '');
+        recursivelyFindLayer(WMSLayers, nodeStructure.children, []);
         succes(nodeStructure);
       };
 

package/lib/components/WMCanvasBuffer.d.ts

@@ -18,6 +18,7 @@ interface CanvasBBOX {
 export interface CanvasGeoLayer {
     bbox: CanvasBBOX;
     opacity: number;
+    imageAge: number;
     imageSource: string;
 }
 /**
@@ -49,12 +50,11 @@ export declare const getSharedImagesList: () => Record<string, CanvasGeoLayer[]>
  */
 export declare const geClosestBBox: (rect1: CanvasBBOX, rect2: CanvasBBOX) => number;
 /**
- * Sort the imageslist by overlapping area, highest area first
+ * Sort the imageslist by imagedate, newewst image first.
  * @param imagesList
- * @param bbox
  * @returns
  */
-export declare const sortByOverlappingArea: (imagesList: CanvasGeoLayer[], bbox: CanvasBBOX) => CanvasGeoLayer[];
+export declare const sortByImageDate: (imagesList: CanvasGeoLayer[]) => CanvasGeoLayer[];
 /**
  * Function to find the an alternative available image for an image url that is not yet loaded
  * @param imageUrl The image source / url to find an alternative for
@@ -62,7 +62,7 @@ export declare const sortByOverlappingArea: (imagesList: CanvasGeoLayer[], bbox:
  * @param bbox The boundingbox to search this image for
  * @returns A canvasLayer, containing the new image source with its geo properties
  */
-export declare const getAlternativeImage: (imageUrl: string, imageStore: WMImageStore, bbox: CanvasBBOX) => CanvasGeoLayer;
+export declare const getAlternativeImage: (imageUrl: string, imageStore: WMImageStore, _bbox: CanvasBBOX) => CanvasGeoLayer;
 export default class WMCanvasBuffer {
     canvas: HTMLCanvasElement;
     _ctx: CanvasRenderingContext2D;

package/lib/components/WMImage.d.ts

@@ -2,6 +2,11 @@ export interface WMImageOptions {
     randomizer?: boolean;
     headers: Headers[];
 }
+/**
+ * Returns the current time in ms
+ * @returns the current time in ms
+ */
+export declare const getCurrentImageTime: () => number;
 /**
  * WMImage provides an API to the HTML image element. It is used for caching and easier access to images.
  */
@@ -16,6 +21,8 @@ export default class WMImage {
     loadEventCallback: (image: WMImage) => void;
     el: HTMLImageElement;
     headers: Headers[];
+    _imageTimeStampAtError: number;
+    _numFailedAttempts: number;
     /**
      *
      * @param src Optionally set the source URL to load
@@ -32,6 +39,15 @@ export default class WMImage {
      * Returns true if the image is still loading
      */
     isLoading(): boolean;
+    /**
+     * Get the amount of milliseconds since the image experienced an image load.
+     * @returns milliseconds since the image had an error
+     */
+    getLastErrorMSecondsAgo(): number;
+    /**
+     * @returns The number of failed attempts for this image
+     */
+    getNumFailedAttempts(): number;
     /**
      * Set source of image, but it will not load the image yet.
      * @param src URL of the image to load
@@ -54,6 +70,7 @@ export default class WMImage {
      * Start loading the image
      */
     load(): void;
+    forceReload(): void;
     private _getImageWithHeaders;
     private _load;
     private _loadEvent;

package/lib/components/WMJSDimension.d.ts

@@ -1,3 +1,4 @@
+import { DateInterval } from './WMTime';
 interface WMJSDimensionConfig {
     name?: string;
     units?: string;
@@ -24,15 +25,15 @@ export default class WMJSDimension {
     synced: boolean;
     used?: boolean;
     values?: string;
-    timeRangeDuration?: any;
+    private timeRangeDuration?;
     private _initialized;
     private _timeRangeDurationDate;
     private _allDates;
     private _type;
     private _allValues;
-    dimMinValue: string;
-    dimMaxValue: string;
-    dimTimeInterval: any;
+    private dimMinValue;
+    private dimMaxValue;
+    private dimTimeInterval;
     constructor(config?: WMJSDimensionConfig);
     generateAllValues(): number[];
     setTimeValuesForReferenceTime(referenceTimeValueToSet: string, referenceTimeDim: WMJSDimension): void;
@@ -49,6 +50,11 @@ export default class WMJSDimension {
      * @param forceValue When set to false,check if the given value is outside range, and do nothing if this is the case
      */
     setValue(value: string, forceValue?: boolean): void;
+    /**
+     * Returns values of the dimension, according to values defined in WMS specification, e.g. 2011-01-01T00:00:00Z/2012-01-01T00:00:00Z/P1M or list of values.
+     * @returns
+     */
+    getValues(): string;
     setClosestValue(newValue?: any, evenWhenOutsideRange?: boolean): void;
     addTimeRangeDurationToValue(value: string): string;
     setTimeRangeDuration(duration: string): void;
@@ -57,6 +63,11 @@ export default class WMJSDimension {
      * Get dimension value for specified index
      */
     getValueForIndex(index: number): string;
+    /**
+     * Hint about the timestep size / time resolution of this dimension.
+     * @returns The dimTimeInterval
+     */
+    getDimInterval(): DateInterval;
     /**
      * Shorthand functionf or getValueForIndex
      */

package/lib/components/WMJSService.d.ts

@@ -21,14 +21,14 @@ interface NodeObject {
     text: string;
     leaf: boolean;
     name?: string;
-    path?: string;
+    path?: string[];
     children?: [];
     keywords?: string[];
     abstract?: string;
     styles?: Style[];
 }
 export declare const sortByKey: (array: NodeObject[], key: string) => NodeObject[];
-export declare const recursivelyFindLayer: (layers: any[], rootNode: any[], path: string) => void;
+export declare const recursivelyFindLayer: (layers: any[], rootNode: any[], path: string[]) => void;
 /**
  * WMJSService Class
  *

package/lib/components/WMMapPin.d.ts

@@ -9,15 +9,17 @@ declare class MapPin {
     private geoPosX;
     private geoPosY;
     displayMapPin: boolean;
+    disableMapPin: boolean;
     constructor(_map: WMJSMap);
     redrawMap: () => void;
     drawMarker(ctx: CanvasRenderingContext2D): void;
-    repositionMapPin: (_bbox?: WMBBOX) => void;
+    repositionMapPin: (_bbox: WMBBOX) => void;
     setMapPin: (_x: number, _y: number, _bbox?: WMBBOX) => void;
     positionMapPinByLatLon: (coord: {
         x: number;
         y: number;
     }) => void;
+    toggleDisableMapPin: () => void;
     showMapPin: () => void;
     hideMapPin: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap",
-  "version": "2.1.4",
+  "version": "2.3.0",
   "description": "GeoWeb webmap library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {