@opengeoweb/webmap 7.0.0 → 8.1.0

package/index.esm.js

@@ -529,6 +529,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -17749,7 +17755,7 @@ var DebugType;
   DebugType[DebugType["Warning"] = 1] = "Warning";
   DebugType[DebugType["Error"] = 2] = "Error";
 })(DebugType || (DebugType = {}));
-var debug = function debug(type, message) {
+var debugLogger = function debugLogger(type, message) {
 };
 /**
  * Checks if variable is defined or not
@@ -17847,7 +17853,7 @@ var URLEncode = function URLEncode(plaintext) {
     } else {
       var charCode = ch.charCodeAt(0);
       if (charCode > 255) {
-        debug(DebugType.Warning);
+        debugLogger(DebugType.Warning);
         encoded += '+';
       } else {
         encoded += '%';
@@ -18272,6 +18278,11 @@ var WMImage = /*#__PURE__*/function () {
     value: function isLoadedWithoutErrors() {
       return this.isLoaded() && !this.hasError();
     }
+  }, {
+    key: "hasNotStartedLoading",
+    value: function hasNotStartedLoading() {
+      return !this._isLoaded && !this._isLoading;
+    }
     /**
      * Returns true if the image is still loading
      */
@@ -18306,7 +18317,7 @@ var WMImage = /*#__PURE__*/function () {
     key: "setSource",
     value: function setSource(src, options) {
       if (this._isLoading) {
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
         return;
       }
       this.srcToLoad = src;
@@ -18393,9 +18404,9 @@ var WMImage = /*#__PURE__*/function () {
           _this2.getElement().src = base64Flag + imageStr;
         });
       })["catch"](function () {
-        debug(DebugType.Error, "Unable to fetch image ".concat(url, " with headers [").concat(JSON.stringify(headers), "]"));
+        debugLogger(DebugType.Error, "Unable to fetch image ".concat(url, " with headers [").concat(JSON.stringify(headers), "]"));
         if (url.startsWith('http://')) {
-          debug(DebugType.Error);
+          debugLogger(DebugType.Error);
         }
         _this2._loadEvent(true);
       });
@@ -18547,11 +18558,11 @@ var WMImageStore = /*#__PURE__*/function () {
     key: "addImageEventCallback",
     value: function addImageEventCallback(callback, id) {
       if (!id) {
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
         return;
       }
       if (!callback) {
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
         return;
       }
       this._loadEventCallbackList.push({
@@ -18892,7 +18903,7 @@ var WMListener = /*#__PURE__*/function () {
             try {
               returnList.push(this._callBacks[j].functionpointer(param, this));
             } catch (e) {
-              debug(DebugType.Error);
+              debugLogger(DebugType.Error);
             }
           }
         }
@@ -19148,7 +19159,7 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
         this._ctx.drawImage(imageElement, imageX, imageY, imageW, imageH);
         if (enableConsoleDebugging) ;
       } catch (e) {
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
       }
     }
   }, {
@@ -19178,7 +19189,7 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
          * 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() && imageToDisplay.isLoading() === false && imageToDisplay.getLastErrorMSecondsAgo() > 5000 && imageToDisplay.getNumFailedAttempts() < 10) {
+        if ((imageToDisplay === null || imageToDisplay === void 0 ? void 0 : imageToDisplay.hasError()) && imageToDisplay.isLoading() === false && imageToDisplay.getLastErrorMSecondsAgo() > 5000 && imageToDisplay.getNumFailedAttempts() < 10) {
           imageToDisplay.forceReload();
         }
         /* Find closest alternative and display instead image */
@@ -19209,7 +19220,7 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
       for (var j = 0; j < this.layers.length; j += 1) {
         var image = this._imageStore.getImageForSrc(this.layers[j].imageSource);
         if (image.hasError()) {
-          debug(DebugType.Error, "image error: ".concat(image.getSrc()));
+          debugLogger(DebugType.Error, "image error: ".concat(image.getSrc()));
         }
       }
       try {
@@ -19217,7 +19228,7 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
           this.onLoadReadyFunction(this);
         }
       } catch (e) {
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
       }
     }
   }, {
@@ -19250,7 +19261,7 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
     value: function setSrc(layerIndex, imageSource, linkedInfo, opacity, bbox) {
       var _a, _b;
       if (!isDefined(imageSource)) {
-        debug(DebugType.Warning);
+        debugLogger(DebugType.Warning);
         return;
       }
       /* HTTP Headers for the image, necessary in case of certain authentication forms */
@@ -19308,258 +19319,1001 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
   return WMCanvasBuffer;
 }();
 
-/**
- * Prefetches given requests
- *
- * @param requests An array of requests to prefetch
- * @return The list of images in prefetch
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+function toInteger(dirtyNumber) {
+  if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
+    return NaN;
+  }
+  var number = Number(dirtyNumber);
+  if (isNaN(number)) {
+    return number;
+  }
+  return number < 0 ? Math.ceil(number) : Math.floor(number);
+}
+
+function requiredArgs(required, args) {
+  if (args.length < required) {
+    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
+  }
+}
+
+/**
+ * @name toDate
+ * @category Common Helpers
+ * @summary Convert the given argument to an instance of Date.
+ *
+ * @description
+ * Convert the given argument to an instance of Date.
+ *
+ * If the argument is an instance of Date, the function returns its clone.
+ *
+ * If the argument is a number, it is treated as a timestamp.
+ *
+ * If the argument is none of the above, the function returns Invalid Date.
+ *
+ * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
+ *
+ * @param {Date|Number} argument - the value to convert
+ * @returns {Date} the parsed date in the local time zone
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // Clone the date:
+ * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
+ * //=> Tue Feb 11 2014 11:30:30
+ *
+ * @example
+ * // Convert the timestamp to date:
+ * const result = toDate(1392098430000)
+ * //=> Tue Feb 11 2014 11:30:30
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-var prefetch = function prefetch(requests) {
-  var prefetching = [];
-  requests.forEach(function (request) {
-    var image = getMapImageStore.getImage(request.url, {
-      headers: request.headers
-    });
-    if (image.isLoaded() === false && image.isLoading() === false) {
-      prefetching.push(image);
-      image.load();
+function toDate(argument) {
+  requiredArgs(1, arguments);
+  var argStr = Object.prototype.toString.call(argument);
+
+  // Clone the date
+  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {
+    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
+    return new Date(argument.getTime());
+  } else if (typeof argument === 'number' || argStr === '[object Number]') {
+    return new Date(argument);
+  } else {
+    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
+      // eslint-disable-next-line no-console
+      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");
+      // eslint-disable-next-line no-console
+      console.warn(new Error().stack);
     }
-  });
-  return prefetching;
-};
-var WMJSAnimate = /*#__PURE__*/function () {
-  function WMJSAnimate(_map) {
-    _classCallCheck(this, WMJSAnimate);
-    this._imageStore = getMapImageStore;
-    this.isNextTimeCloseToWallClockTime = false;
-    _map.animationDelay = 100;
-    this._callBack = _map.getListener();
-    this._divAnimationInfo = document.createElement('div');
-    _map.currentAnimationStep = 0;
-    _map.animationList = undefined;
-    _map.isAnimating = false;
-    _map.setAnimationDelay = function (delay) {
-      if (delay < 1) {
-        delay = 1;
-      }
-      _map.animationDelay = delay;
-    };
-    this.isNextTimeCloseToWallClockTime = false;
-    this._divAnimationInfo.style.zIndex = '10000';
-    this._divAnimationInfo.style.background = 'none';
-    this._divAnimationInfo.style.position = 'absolute';
-    this._divAnimationInfo.style.border = 'none';
-    this._divAnimationInfo.style.margin = '0px';
-    this._divAnimationInfo.style.padding = '0px';
-    this._divAnimationInfo.style.lineHeight = '14px';
-    this._divAnimationInfo.style.fontFamily = '"Courier New", "Lucida Console", Monospace';
-    this._divAnimationInfo.style.fontSize = '10px';
-    _map.getBaseElement().append(this._divAnimationInfo);
-    _map.isAnimatingLoopRunning = false;
-    this._map = _map;
-    /* Bind */
-    this._animate = this._animate.bind(this);
-    this._animateLoop = this._animateLoop.bind(this);
-    this.prefetchImagesForAnimationSteps = this.prefetchImagesForAnimationSteps.bind(this);
-    this.stopAnimating = this.stopAnimating.bind(this);
-    _map.stopAnimating = this.stopAnimating;
-    _map.checkAnimation = this.prefetchImagesForAnimationSteps;
+    return new Date(NaN);
   }
-  _createClass(WMJSAnimate, [{
-    key: "isCurrentAnimationTimeCloseToWallClockTime",
-    value: function isCurrentAnimationTimeCloseToWallClockTime() {
-      if (this.isNextTimeCloseToWallClockTime) {
-        this.isNextTimeCloseToWallClockTime = false;
-        return true;
-      }
-      var currentAnimationStep = this._map.animationList[this._map.currentAnimationStep];
-      var nextAnimationStep = this._map.animationList[this._map.currentAnimationStep + 1 >= this._map.animationList.length ? 0 : this._map.currentAnimationStep + 1];
-      var wallClockTime = new Date();
-      var currentAnimationTime = new Date(currentAnimationStep.value);
-      var nextAnimationTime = new Date(nextAnimationStep.value);
-      if (dateUtils.isBetween(wallClockTime, currentAnimationTime, nextAnimationTime)) {
-        var timeDiff1 = dateUtils.differenceInMinutes(currentAnimationTime, wallClockTime);
-        var timeDiff2 = dateUtils.differenceInMinutes(nextAnimationTime, wallClockTime);
-        if (Math.abs(timeDiff1) < Math.abs(timeDiff2)) {
-          // Wall clock time is closer to current animation step time than to the next animation step time
-          this.isNextTimeCloseToWallClockTime = false;
-          return true;
-        }
-        // Wall clock time is closer to next animation step time than to the current animation step time
-        this.isNextTimeCloseToWallClockTime = true;
-      }
-      return false;
-    }
-  }, {
-    key: "_animate",
-    value: function _animate() {
-      if (this._map.isAnimating === false) {
-        return;
-      }
-      if (this._map.animateBusy === true) {
-        return;
-      }
-      var animationStep = this._map.animationList[this._map.currentAnimationStep];
-      if (!animationStep) {
-        debug(DebugType.Error, "No animation step for ".concat(this._map.currentAnimationStep));
-        return;
-      }
-      this._map.setDimension(animationStep.name, animationStep.value, false);
-      this._callBack.triggerEvent('ondimchange');
-      this._callBack.triggerEvent('onnextanimationstep', this._map);
-      this._map.addLayersToCanvasAndDisplayThem();
-      this._map.animateBusy = false;
-    }
-  }, {
-    key: "_animateLoop",
-    value: function _animateLoop() {
-      var _this = this;
-      if (this._map.isAnimating === false) {
-        this._map.isAnimatingLoopRunning = false;
-        return;
-      }
-      var animationDelay = this._map.animationDelay;
-      var animationSteps = this._map.animationList;
-      if (this._map.currentAnimationStep === 0) {
-        animationDelay *= 3;
-      } else if (this._map.currentAnimationStep === animationSteps.length - 1) {
-        animationDelay *= 5;
-      } else if (this.isCurrentAnimationTimeCloseToWallClockTime()) {
-        animationDelay *= 5;
-      }
-      // set up timer for next animation step
-      this._map.animationTimer.init(animationDelay, this._animateLoop);
-      this.prefetchImagesForAnimationSteps();
-      if (this._map.mouseHoverAnimationBox !== false) {
-        return;
-      }
-      this._animate();
-      var nextAnimationStepIndex = this._map.currentAnimationStep + 1;
-      if (nextAnimationStepIndex >= animationSteps.length) {
-        nextAnimationStepIndex = 0;
-      }
-      // get urls for images in next animation step
-      var nextAnimationStep = animationSteps[nextAnimationStepIndex];
-      nextAnimationStep.requests = this.getRequestsForAnimationStep(animationSteps, nextAnimationStepIndex);
-      // if images for next animation step is ready or haven't started loading
-      // change map animation step to next step
-      var numberOfImagesReadyForNextAnimationStep = 0;
-      nextAnimationStep.requests.forEach(function (request) {
-        var url = request.url;
-        var image = getMapImageStore.getImageForSrc(url);
-        /* Get a loaded image which has no error */
-        if (image === null || image === void 0 ? void 0 : image.isLoadedWithoutErrors()) {
-          numberOfImagesReadyForNextAnimationStep += 1;
-          return;
-        }
-        /* Check if a similar image is available instead, then we can continue with the smoother animation */
-        var alternativeImage = getAlternativeImage(url, getMapImageStore, _this._map.getDrawBBOX());
-        if (alternativeImage) {
-          numberOfImagesReadyForNextAnimationStep += 1;
-          return;
-        }
-        var imageHasntStartedLoading = !(image === null || image === void 0 ? void 0 : image.isLoading());
-        if (imageHasntStartedLoading) {
-          /* No alternatives and current image is not loading, so lets continue the animation */
-          numberOfImagesReadyForNextAnimationStep += 1;
-        }
-      });
-      if (numberOfImagesReadyForNextAnimationStep >= nextAnimationStep.requests.length) {
-        this._map.currentAnimationStep = nextAnimationStepIndex;
-      }
-    }
-  }, {
-    key: "prefetchImagesForAnimationSteps",
-    value: function prefetchImagesForAnimationSteps() {
-      if (this._map.isAnimating === false) {
-        this._map.isAnimatingLoopRunning = false;
-        return;
-      }
-      if (!this._map.animationTimer) {
-        this._map.animationTimer = new WMTimer();
-      }
-      var animationSteps = this._map.animationList;
-      var countAnimationSteps = animationSteps === null || animationSteps === void 0 ? void 0 : animationSteps.length;
-      if (countAnimationSteps && this._map.mouseHoverAnimationBox === false) {
-        for (var j = 0; j < countAnimationSteps; j += 1) {
-          // dont prefetch if already prefetching too many images
-          var maxSimultaneousLoads = 4;
-          var countImagesLoading = this._imageStore.getNumImagesLoading();
-          if (countImagesLoading > maxSimultaneousLoads - 1) {
-            break;
-          }
-          // start prefecthing images for the next animation step first
-          var index = j + this._map.currentAnimationStep;
-          while (index < 0) {
-            index += countAnimationSteps;
-          }
-          while (index >= countAnimationSteps) {
-            index -= countAnimationSteps;
-          }
-          if (index < 0) {
-            index = 0;
-          }
-          // get urls for animation step
-          var animationStep = animationSteps[index];
-          animationStep.requests = this.getRequestsForAnimationStep(animationSteps, index);
-          // prefetch images for animation step
-          animationStep.imagesInPrefetch = prefetch(animationStep.requests);
-        }
-      }
-      if (this._map.isAnimatingLoopRunning === false) {
-        this._map.isAnimatingLoopRunning = true;
-        this._animateLoop();
-      }
-    }
-  }, {
-    key: "stopAnimating",
-    value: function stopAnimating() {
-      if (this._map.isAnimating === false) {
-        return;
-      }
-      this._map._animationList = undefined;
-      this._divAnimationInfo.style.display = 'none';
-      this._map.isAnimating = false;
-      this._map.animateBusy = false;
-      this._map.rebuildMapDimensions();
-      this._callBack.triggerEvent('onstopanimation', this._map);
-    }
-  }, {
-    key: "getRequestsForAnimationStep",
-    value: function getRequestsForAnimationStep(animationSteps, index) {
-      // get urls for animation step
-      var animationStep = animationSteps[index];
-      this._map.setDimension(animationStep.name, animationStep.value, false);
-      var requests = this._map.getWMSRequests();
-      // set map back to correct dimension
-      var animationStepShownOnMap = animationSteps[this._map.currentAnimationStep];
-      this._map.setDimension(animationStepShownOnMap.name, animationStepShownOnMap.value, false);
-      return requests;
-    }
-  }]);
-  return WMJSAnimate;
-}();
+}
 
-var WMTileRenderer = /*#__PURE__*/function () {
-  function WMTileRenderer() {
-    _classCallCheck(this, WMTileRenderer);
+/**
+ * @name addDays
+ * @category Day Helpers
+ * @summary Add the specified number of days to the given date.
+ *
+ * @description
+ * Add the specified number of days to the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of days to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} - the new date with the days added
+ * @throws {TypeError} - 2 arguments required
+ *
+ * @example
+ * // Add 10 days to 1 September 2014:
+ * const result = addDays(new Date(2014, 8, 1), 10)
+ * //=> Thu Sep 11 2014 00:00:00
+ */
+function addDays(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var date = toDate(dirtyDate);
+  var amount = toInteger(dirtyAmount);
+  if (isNaN(amount)) {
+    return new Date(NaN);
   }
-  _createClass(WMTileRenderer, [{
-    key: "render",
-    value: function render(currentBBOX, newBBOX, srs, width, height, ctx, bgMapImageStore,
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
-    tileOptions, layerName) {
-      var renderedURLs = {};
-      var imagesToRender = [];
-      if (!layerName) {
-        debug(DebugType.Error);
-        return undefined;
-      }
-      /* Temporal mappings from bgmaps.cgi service names to names defined here */
-      if (layerName === 'streetmap') {
-        layerName = 'OSM';
-      }
+  if (!amount) {
+    // If 0 days, no-op to avoid changing times in the hour before end of DST
+    return date;
+  }
+  date.setDate(date.getDate() + amount);
+  return date;
+}
+
+/**
+ * @name addMonths
+ * @category Month Helpers
+ * @summary Add the specified number of months to the given date.
+ *
+ * @description
+ * Add the specified number of months to the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of months to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the months added
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Add 5 months to 1 September 2014:
+ * const result = addMonths(new Date(2014, 8, 1), 5)
+ * //=> Sun Feb 01 2015 00:00:00
+ */
+function addMonths(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var date = toDate(dirtyDate);
+  var amount = toInteger(dirtyAmount);
+  if (isNaN(amount)) {
+    return new Date(NaN);
+  }
+  if (!amount) {
+    // If 0 months, no-op to avoid changing times in the hour before end of DST
+    return date;
+  }
+  var dayOfMonth = date.getDate();
+
+  // The JS Date object supports date math by accepting out-of-bounds values for
+  // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and
+  // new Date(2020, 13, 1) returns 1 Feb 2021.  This is *almost* the behavior we
+  // want except that dates will wrap around the end of a month, meaning that
+  // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So
+  // we'll default to the end of the desired month by adding 1 to the desired
+  // month and using a date of 0 to back up one day to the end of the desired
+  // month.
+  var endOfDesiredMonth = new Date(date.getTime());
+  endOfDesiredMonth.setMonth(date.getMonth() + amount + 1, 0);
+  var daysInMonth = endOfDesiredMonth.getDate();
+  if (dayOfMonth >= daysInMonth) {
+    // If we're already at the end of the month, then this is the correct date
+    // and we're done.
+    return endOfDesiredMonth;
+  } else {
+    // Otherwise, we now know that setting the original day-of-month value won't
+    // cause an overflow, so set the desired day-of-month. Note that we can't
+    // just set the date of `endOfDesiredMonth` because that object may have had
+    // its time changed in the unusual case where where a DST transition was on
+    // the last day of the month and its local time was in the hour skipped or
+    // repeated next to a DST transition.  So we use `date` instead which is
+    // guaranteed to still have the original time.
+    date.setFullYear(endOfDesiredMonth.getFullYear(), endOfDesiredMonth.getMonth(), dayOfMonth);
+    return date;
+  }
+}
+
+/**
+ * @name add
+ * @category Common Helpers
+ * @summary Add the specified years, months, weeks, days, hours, minutes and seconds to the given date.
+ *
+ * @description
+ * Add the specified years, months, weeks, days, hours, minutes and seconds to the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Duration} duration - the object with years, months, weeks, days, hours, minutes and seconds to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ *
+ * | Key            | Description                        |
+ * |----------------|------------------------------------|
+ * | years          | Amount of years to be added        |
+ * | months         | Amount of months to be added       |
+ * | weeks          | Amount of weeks to be added        |
+ * | days           | Amount of days to be added         |
+ * | hours          | Amount of hours to be added        |
+ * | minutes        | Amount of minutes to be added      |
+ * | seconds        | Amount of seconds to be added      |
+ *
+ * All values default to 0
+ *
+ * @returns {Date} the new date with the seconds added
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Add the following duration to 1 September 2014, 10:19:50
+ * const result = add(new Date(2014, 8, 1, 10, 19, 50), {
+ *   years: 2,
+ *   months: 9,
+ *   weeks: 1,
+ *   days: 7,
+ *   hours: 5,
+ *   minutes: 9,
+ *   seconds: 30,
+ * })
+ * //=> Thu Jun 15 2017 15:29:20
+ */
+function add(dirtyDate, duration) {
+  requiredArgs(2, arguments);
+  if (!duration || _typeof(duration) !== 'object') return new Date(NaN);
+  var years = duration.years ? toInteger(duration.years) : 0;
+  var months = duration.months ? toInteger(duration.months) : 0;
+  var weeks = duration.weeks ? toInteger(duration.weeks) : 0;
+  var days = duration.days ? toInteger(duration.days) : 0;
+  var hours = duration.hours ? toInteger(duration.hours) : 0;
+  var minutes = duration.minutes ? toInteger(duration.minutes) : 0;
+  var seconds = duration.seconds ? toInteger(duration.seconds) : 0;
+
+  // Add years and months
+  var date = toDate(dirtyDate);
+  var dateWithMonths = months || years ? addMonths(date, months + years * 12) : date;
+
+  // Add weeks and days
+  var dateWithDays = days || weeks ? addDays(dateWithMonths, days + weeks * 7) : dateWithMonths;
+
+  // Add days, hours, minutes and seconds
+  var minutesToAdd = minutes + hours * 60;
+  var secondsToAdd = seconds + minutesToAdd * 60;
+  var msToAdd = secondsToAdd * 1000;
+  var finalDate = new Date(dateWithDays.getTime() + msToAdd);
+  return finalDate;
+}
+
+/**
+ * Days in 1 week.
+ *
+ * @name daysInWeek
+ * @constant
+ * @type {number}
+ * @default
+ */
+
+/**
+ * Milliseconds in 1 minute
+ *
+ * @name millisecondsInMinute
+ * @constant
+ * @type {number}
+ * @default
+ */
+var millisecondsInMinute = 60000;
+
+/**
+ * Milliseconds in 1 hour
+ *
+ * @name millisecondsInHour
+ * @constant
+ * @type {number}
+ * @default
+ */
+var millisecondsInHour = 3600000;
+
+/**
+ * @name isDate
+ * @category Common Helpers
+ * @summary Is the given value a date?
+ *
+ * @description
+ * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
+ *
+ * @param {*} value - the value to check
+ * @returns {boolean} true if the given value is a date
+ * @throws {TypeError} 1 arguments required
+ *
+ * @example
+ * // For a valid date:
+ * const result = isDate(new Date())
+ * //=> true
+ *
+ * @example
+ * // For an invalid date:
+ * const result = isDate(new Date(NaN))
+ * //=> true
+ *
+ * @example
+ * // For some value:
+ * const result = isDate('2014-02-31')
+ * //=> false
+ *
+ * @example
+ * // For an object:
+ * const result = isDate({})
+ * //=> false
+ */
+function isDate(value) {
+  requiredArgs(1, arguments);
+  return value instanceof Date || _typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Date]';
+}
+
+/**
+ * @name isValid
+ * @category Common Helpers
+ * @summary Is the given date valid?
+ *
+ * @description
+ * Returns false if argument is Invalid Date and true otherwise.
+ * Argument is converted to Date using `toDate`. See [toDate]{@link https://date-fns.org/docs/toDate}
+ * Invalid Date is a Date, whose time value is NaN.
+ *
+ * Time value of Date: http://es5.github.io/#x15.9.1.1
+ *
+ * @param {*} date - the date to check
+ * @returns {Boolean} the date is valid
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // For the valid date:
+ * const result = isValid(new Date(2014, 1, 31))
+ * //=> true
+ *
+ * @example
+ * // For the value, convertable into a date:
+ * const result = isValid(1393804800000)
+ * //=> true
+ *
+ * @example
+ * // For the invalid date:
+ * const result = isValid(new Date(''))
+ * //=> false
+ */
+function isValid(dirtyDate) {
+  requiredArgs(1, arguments);
+  if (!isDate(dirtyDate) && typeof dirtyDate !== 'number') {
+    return false;
+  }
+  var date = toDate(dirtyDate);
+  return !isNaN(Number(date));
+}
+
+/**
+ * @name isWithinInterval
+ * @category Interval Helpers
+ * @summary Is the given date within the interval?
+ *
+ * @description
+ * Is the given date within the interval? (Including start and end.)
+ *
+ * @param {Date|Number} date - the date to check
+ * @param {Interval} interval - the interval to check
+ * @returns {Boolean} the date is within the interval
+ * @throws {TypeError} 2 arguments required
+ * @throws {RangeError} The start of an interval cannot be after its end
+ * @throws {RangeError} Date in interval cannot be `Invalid Date`
+ *
+ * @example
+ * // For the date within the interval:
+ * isWithinInterval(new Date(2014, 0, 3), {
+ *   start: new Date(2014, 0, 1),
+ *   end: new Date(2014, 0, 7)
+ * })
+ * //=> true
+ *
+ * @example
+ * // For the date outside of the interval:
+ * isWithinInterval(new Date(2014, 0, 10), {
+ *   start: new Date(2014, 0, 1),
+ *   end: new Date(2014, 0, 7)
+ * })
+ * //=> false
+ *
+ * @example
+ * // For date equal to interval start:
+ * isWithinInterval(date, { start, end: date }) // => true
+ *
+ * @example
+ * // For date equal to interval end:
+ * isWithinInterval(date, { start: date, end }) // => true
+ */
+function isWithinInterval(dirtyDate, interval) {
+  requiredArgs(2, arguments);
+  var time = toDate(dirtyDate).getTime();
+  var startTime = toDate(interval.start).getTime();
+  var endTime = toDate(interval.end).getTime();
+
+  // Throw an exception if start date is after end date or if any date is `Invalid Date`
+  if (!(startTime <= endTime)) {
+    throw new RangeError('Invalid interval');
+  }
+  return time >= startTime && time <= endTime;
+}
+
+/**
+ * @name subDays
+ * @category Day Helpers
+ * @summary Subtract the specified number of days from the given date.
+ *
+ * @description
+ * Subtract the specified number of days from the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of days to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the days subtracted
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Subtract 10 days from 1 September 2014:
+ * const result = subDays(new Date(2014, 8, 1), 10)
+ * //=> Fri Aug 22 2014 00:00:00
+ */
+function subDays(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var amount = toInteger(dirtyAmount);
+  return addDays(dirtyDate, -amount);
+}
+
+/**
+ * @name parseISO
+ * @category Common Helpers
+ * @summary Parse ISO string
+ *
+ * @description
+ * Parse the given string in ISO 8601 format and return an instance of Date.
+ *
+ * Function accepts complete ISO 8601 formats as well as partial implementations.
+ * ISO 8601: http://en.wikipedia.org/wiki/ISO_8601
+ *
+ * If the argument isn't a string, the function cannot parse the string or
+ * the values are invalid, it returns Invalid Date.
+ *
+ * @param {String} argument - the value to convert
+ * @param {Object} [options] - an object with options.
+ * @param {0|1|2} [options.additionalDigits=2] - the additional number of digits in the extended year format
+ * @returns {Date} the parsed date in the local time zone
+ * @throws {TypeError} 1 argument required
+ * @throws {RangeError} `options.additionalDigits` must be 0, 1 or 2
+ *
+ * @example
+ * // Convert string '2014-02-11T11:30:30' to date:
+ * const result = parseISO('2014-02-11T11:30:30')
+ * //=> Tue Feb 11 2014 11:30:30
+ *
+ * @example
+ * // Convert string '+02014101' to date,
+ * // if the additional number of digits in the extended year format is 1:
+ * const result = parseISO('+02014101', { additionalDigits: 1 })
+ * //=> Fri Apr 11 2014 00:00:00
+ */
+function parseISO(argument, options) {
+  var _options$additionalDi;
+  requiredArgs(1, arguments);
+  var additionalDigits = toInteger((_options$additionalDi = options === null || options === void 0 ? void 0 : options.additionalDigits) !== null && _options$additionalDi !== void 0 ? _options$additionalDi : 2);
+  if (additionalDigits !== 2 && additionalDigits !== 1 && additionalDigits !== 0) {
+    throw new RangeError('additionalDigits must be 0, 1 or 2');
+  }
+  if (!(typeof argument === 'string' || Object.prototype.toString.call(argument) === '[object String]')) {
+    return new Date(NaN);
+  }
+  var dateStrings = splitDateString(argument);
+  var date;
+  if (dateStrings.date) {
+    var parseYearResult = parseYear(dateStrings.date, additionalDigits);
+    date = parseDate(parseYearResult.restDateString, parseYearResult.year);
+  }
+  if (!date || isNaN(date.getTime())) {
+    return new Date(NaN);
+  }
+  var timestamp = date.getTime();
+  var time = 0;
+  var offset;
+  if (dateStrings.time) {
+    time = parseTime(dateStrings.time);
+    if (isNaN(time)) {
+      return new Date(NaN);
+    }
+  }
+  if (dateStrings.timezone) {
+    offset = parseTimezone(dateStrings.timezone);
+    if (isNaN(offset)) {
+      return new Date(NaN);
+    }
+  } else {
+    var dirtyDate = new Date(timestamp + time);
+    // js parsed string assuming it's in UTC timezone
+    // but we need it to be parsed in our timezone
+    // so we use utc values to build date in our timezone.
+    // Year values from 0 to 99 map to the years 1900 to 1999
+    // so set year explicitly with setFullYear.
+    var result = new Date(0);
+    result.setFullYear(dirtyDate.getUTCFullYear(), dirtyDate.getUTCMonth(), dirtyDate.getUTCDate());
+    result.setHours(dirtyDate.getUTCHours(), dirtyDate.getUTCMinutes(), dirtyDate.getUTCSeconds(), dirtyDate.getUTCMilliseconds());
+    return result;
+  }
+  return new Date(timestamp + time + offset);
+}
+var patterns = {
+  dateTimeDelimiter: /[T ]/,
+  timeZoneDelimiter: /[Z ]/i,
+  timezone: /([Z+-].*)$/
+};
+var dateRegex = /^-?(?:(\d{3})|(\d{2})(?:-?(\d{2}))?|W(\d{2})(?:-?(\d{1}))?|)$/;
+var timeRegex = /^(\d{2}(?:[.,]\d*)?)(?::?(\d{2}(?:[.,]\d*)?))?(?::?(\d{2}(?:[.,]\d*)?))?$/;
+var timezoneRegex = /^([+-])(\d{2})(?::?(\d{2}))?$/;
+function splitDateString(dateString) {
+  var dateStrings = {};
+  var array = dateString.split(patterns.dateTimeDelimiter);
+  var timeString;
+
+  // The regex match should only return at maximum two array elements.
+  // [date], [time], or [date, time].
+  if (array.length > 2) {
+    return dateStrings;
+  }
+  if (/:/.test(array[0])) {
+    timeString = array[0];
+  } else {
+    dateStrings.date = array[0];
+    timeString = array[1];
+    if (patterns.timeZoneDelimiter.test(dateStrings.date)) {
+      dateStrings.date = dateString.split(patterns.timeZoneDelimiter)[0];
+      timeString = dateString.substr(dateStrings.date.length, dateString.length);
+    }
+  }
+  if (timeString) {
+    var token = patterns.timezone.exec(timeString);
+    if (token) {
+      dateStrings.time = timeString.replace(token[1], '');
+      dateStrings.timezone = token[1];
+    } else {
+      dateStrings.time = timeString;
+    }
+  }
+  return dateStrings;
+}
+function parseYear(dateString, additionalDigits) {
+  var regex = new RegExp('^(?:(\\d{4}|[+-]\\d{' + (4 + additionalDigits) + '})|(\\d{2}|[+-]\\d{' + (2 + additionalDigits) + '})$)');
+  var captures = dateString.match(regex);
+  // Invalid ISO-formatted year
+  if (!captures) return {
+    year: NaN,
+    restDateString: ''
+  };
+  var year = captures[1] ? parseInt(captures[1]) : null;
+  var century = captures[2] ? parseInt(captures[2]) : null;
+
+  // either year or century is null, not both
+  return {
+    year: century === null ? year : century * 100,
+    restDateString: dateString.slice((captures[1] || captures[2]).length)
+  };
+}
+function parseDate(dateString, year) {
+  // Invalid ISO-formatted year
+  if (year === null) return new Date(NaN);
+  var captures = dateString.match(dateRegex);
+  // Invalid ISO-formatted string
+  if (!captures) return new Date(NaN);
+  var isWeekDate = !!captures[4];
+  var dayOfYear = parseDateUnit(captures[1]);
+  var month = parseDateUnit(captures[2]) - 1;
+  var day = parseDateUnit(captures[3]);
+  var week = parseDateUnit(captures[4]);
+  var dayOfWeek = parseDateUnit(captures[5]) - 1;
+  if (isWeekDate) {
+    if (!validateWeekDate(year, week, dayOfWeek)) {
+      return new Date(NaN);
+    }
+    return dayOfISOWeekYear(year, week, dayOfWeek);
+  } else {
+    var date = new Date(0);
+    if (!validateDate(year, month, day) || !validateDayOfYearDate(year, dayOfYear)) {
+      return new Date(NaN);
+    }
+    date.setUTCFullYear(year, month, Math.max(dayOfYear, day));
+    return date;
+  }
+}
+function parseDateUnit(value) {
+  return value ? parseInt(value) : 1;
+}
+function parseTime(timeString) {
+  var captures = timeString.match(timeRegex);
+  if (!captures) return NaN; // Invalid ISO-formatted time
+
+  var hours = parseTimeUnit(captures[1]);
+  var minutes = parseTimeUnit(captures[2]);
+  var seconds = parseTimeUnit(captures[3]);
+  if (!validateTime(hours, minutes, seconds)) {
+    return NaN;
+  }
+  return hours * millisecondsInHour + minutes * millisecondsInMinute + seconds * 1000;
+}
+function parseTimeUnit(value) {
+  return value && parseFloat(value.replace(',', '.')) || 0;
+}
+function parseTimezone(timezoneString) {
+  if (timezoneString === 'Z') return 0;
+  var captures = timezoneString.match(timezoneRegex);
+  if (!captures) return 0;
+  var sign = captures[1] === '+' ? -1 : 1;
+  var hours = parseInt(captures[2]);
+  var minutes = captures[3] && parseInt(captures[3]) || 0;
+  if (!validateTimezone(hours, minutes)) {
+    return NaN;
+  }
+  return sign * (hours * millisecondsInHour + minutes * millisecondsInMinute);
+}
+function dayOfISOWeekYear(isoWeekYear, week, day) {
+  var date = new Date(0);
+  date.setUTCFullYear(isoWeekYear, 0, 4);
+  var fourthOfJanuaryDay = date.getUTCDay() || 7;
+  var diff = (week - 1) * 7 + day + 1 - fourthOfJanuaryDay;
+  date.setUTCDate(date.getUTCDate() + diff);
+  return date;
+}
+
+// Validation functions
+
+// February is null to handle the leap year (using ||)
+var daysInMonths = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+function isLeapYearIndex(year) {
+  return year % 400 === 0 || year % 4 === 0 && year % 100 !== 0;
+}
+function validateDate(year, month, date) {
+  return month >= 0 && month <= 11 && date >= 1 && date <= (daysInMonths[month] || (isLeapYearIndex(year) ? 29 : 28));
+}
+function validateDayOfYearDate(year, dayOfYear) {
+  return dayOfYear >= 1 && dayOfYear <= (isLeapYearIndex(year) ? 366 : 365);
+}
+function validateWeekDate(_year, week, day) {
+  return week >= 1 && week <= 53 && day >= 0 && day <= 6;
+}
+function validateTime(hours, minutes, seconds) {
+  if (hours === 24) {
+    return minutes === 0 && seconds === 0;
+  }
+  return seconds >= 0 && seconds < 60 && minutes >= 0 && minutes < 60 && hours >= 0 && hours < 25;
+}
+function validateTimezone(_hours, minutes) {
+  return minutes >= 0 && minutes <= 59;
+}
+
+/**
+ * @name subMonths
+ * @category Month Helpers
+ * @summary Subtract the specified number of months from the given date.
+ *
+ * @description
+ * Subtract the specified number of months from the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of months to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the months subtracted
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Subtract 5 months from 1 February 2015:
+ * const result = subMonths(new Date(2015, 1, 1), 5)
+ * //=> Mon Sep 01 2014 00:00:00
+ */
+function subMonths(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var amount = toInteger(dirtyAmount);
+  return addMonths(dirtyDate, -amount);
+}
+
+/**
+ * @name sub
+ * @category Common Helpers
+ * @summary Subtract the specified years, months, weeks, days, hours, minutes and seconds from the given date.
+ *
+ * @description
+ * Subtract the specified years, months, weeks, days, hours, minutes and seconds from the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Duration} duration - the object with years, months, weeks, days, hours, minutes and seconds to be subtracted
+ *
+ * | Key     | Description                        |
+ * |---------|------------------------------------|
+ * | years   | Amount of years to be subtracted   |
+ * | months  | Amount of months to be subtracted  |
+ * | weeks   | Amount of weeks to be subtracted   |
+ * | days    | Amount of days to be subtracted    |
+ * | hours   | Amount of hours to be subtracted   |
+ * | minutes | Amount of minutes to be subtracted |
+ * | seconds | Amount of seconds to be subtracted |
+ *
+ * All values default to 0
+ *
+ * @returns {Date} the new date with the seconds subtracted
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Subtract the following duration from 15 June 2017 15:29:20
+ * const result = sub(new Date(2017, 5, 15, 15, 29, 20), {
+ *   years: 2,
+ *   months: 9,
+ *   weeks: 1,
+ *   days: 7,
+ *   hours: 5,
+ *   minutes: 9,
+ *   seconds: 30
+ * })
+ * //=> Mon Sep 1 2014 10:19:50
+ */
+function sub(date, duration) {
+  requiredArgs(2, arguments);
+  if (!duration || _typeof(duration) !== 'object') return new Date(NaN);
+  var years = duration.years ? toInteger(duration.years) : 0;
+  var months = duration.months ? toInteger(duration.months) : 0;
+  var weeks = duration.weeks ? toInteger(duration.weeks) : 0;
+  var days = duration.days ? toInteger(duration.days) : 0;
+  var hours = duration.hours ? toInteger(duration.hours) : 0;
+  var minutes = duration.minutes ? toInteger(duration.minutes) : 0;
+  var seconds = duration.seconds ? toInteger(duration.seconds) : 0;
+
+  // Subtract years and months
+  var dateWithoutMonths = subMonths(date, months + years * 12);
+
+  // Subtract weeks and days
+  var dateWithoutDays = subDays(dateWithoutMonths, days + weeks * 7);
+
+  // Subtract hours, minutes and seconds
+  var minutestoSub = minutes + hours * 60;
+  var secondstoSub = seconds + minutestoSub * 60;
+  var mstoSub = secondstoSub * 1000;
+  var finalDate = new Date(dateWithoutDays.getTime() - mstoSub);
+  return finalDate;
+}
+
+var MAX_IMAGES_TO_PREFETCH_DEFAULT = 8;
+function prefetchImagesForAnimation(wmMap) {
+  var maxImagesToPrefetch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAX_IMAGES_TO_PREFETCH_DEFAULT;
+  var animationSteps = wmMap.animationList;
+  var countAnimationSteps = animationSteps.length;
+  var timesToPrefetchInOrder = lodash.exports.range(0, countAnimationSteps).map(function (offset) {
+    // start prefecthing images for the next animation step first
+    // when reaching end of animation, start from the beginning
+    var indexOfNextAnimationStep = (wmMap.currentAnimationStep + offset) % countAnimationSteps;
+    return animationSteps[indexOfNextAnimationStep].value;
+  });
+  var currentTime = animationSteps[wmMap.currentAnimationStep].value;
+  prefetchLayerImagesInOrder(wmMap, timesToPrefetchInOrder, maxImagesToPrefetch, currentTime);
+}
+function prefetchLayerImagesInOrder(wmMap, timesToPrefetchInOrder, maxImagesToPrefetch, currentTime) {
+  var _iterator = _createForOfIteratorHelper(timesToPrefetchInOrder),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var timeToPrefetch = _step.value;
+      // dont prefetch if already prefetching too many images
+      var countImagesLoading = getMapImageStore.getNumImagesLoading();
+      if (countImagesLoading > maxImagesToPrefetch - 1) {
+        break;
+      }
+      var layersImageUrls = getLayersImageUrlsForTime(wmMap, timeToPrefetch, currentTime);
+      prefetchLayerImagesForTime(layersImageUrls);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+}
+function getLayersImageUrlsForTime(wmMap, timeToPrefetch, currentTime) {
+  // get urls for layers at time
+  wmMap.setTimeDimension(timeToPrefetch, false);
+  var layersImageUrls = wmMap.getWMSRequests();
+  // set map back to correct time
+  wmMap.setTimeDimension(currentTime, false);
+  return layersImageUrls;
+}
+function prefetchLayerImagesForTime(requests) {
+  requests.forEach(function (request) {
+    var image = getMapImageStore.getImage(request.url, {
+      headers: request.headers
+    });
+    if (image.hasNotStartedLoading()) {
+      image.load();
+    }
+  });
+}
+function prefetchImagesForNonAnimation(wmMap) {
+  var maxImagesToPrefetch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAX_IMAGES_TO_PREFETCH_DEFAULT;
+  var timestepInMinutes = wmMap.timestepInMinutes;
+  var timeDimension = wmMap.getDimension('time');
+  if (!timeDimension || !timestepInMinutes) {
+    return;
+  }
+  var currentValue = timeDimension.currentValue;
+  var currentTimeIsoString = timeDimension.getClosestValue(currentValue);
+  var currentTime = parseISO(currentTimeIsoString);
+  if (!isValid(currentTime)) {
+    return;
+  }
+  var maxTimesToPrefetchIfOneLayer = maxImagesToPrefetch / 2;
+  var timesToPrefetchInOrder = lodash.exports.range(0, maxTimesToPrefetchIfOneLayer).flatMap(function (offset) {
+    var duration = {
+      minutes: timestepInMinutes * offset
+    };
+    var nextTime = add(currentTime, duration).toISOString();
+    var previousTime = sub(currentTime, duration).toISOString();
+    return [nextTime, previousTime];
+  });
+  prefetchLayerImagesInOrder(wmMap, timesToPrefetchInOrder, maxImagesToPrefetch, currentTime.toISOString());
+}
+
+/* *
+ * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * */
+var _WMJSAnimate_instances, _WMJSAnimate_animate;
+var WMJSAnimate = /*#__PURE__*/function () {
+  function WMJSAnimate(_map) {
+    _classCallCheck(this, WMJSAnimate);
+    _WMJSAnimate_instances.add(this);
+    this._imageStore = getMapImageStore;
+    this.isNextTimeCloseToWallClockTime = false;
+    _map.animationDelay = 100;
+    this._callBack = _map.getListener();
+    this._divAnimationInfo = document.createElement('div');
+    _map.currentAnimationStep = 0;
+    _map.animationList = undefined;
+    _map.isAnimating = false;
+    _map.setAnimationDelay = function (delay) {
+      if (delay < 1) {
+        delay = 1;
+      }
+      _map.animationDelay = delay;
+    };
+    this.isNextTimeCloseToWallClockTime = false;
+    this._divAnimationInfo.style.zIndex = '10000';
+    this._divAnimationInfo.style.background = 'none';
+    this._divAnimationInfo.style.position = 'absolute';
+    this._divAnimationInfo.style.border = 'none';
+    this._divAnimationInfo.style.margin = '0px';
+    this._divAnimationInfo.style.padding = '0px';
+    this._divAnimationInfo.style.lineHeight = '14px';
+    this._divAnimationInfo.style.fontFamily = '"Courier New", "Lucida Console", Monospace';
+    this._divAnimationInfo.style.fontSize = '10px';
+    _map.getBaseElement().append(this._divAnimationInfo);
+    this._map = _map;
+    /* Bind */
+    this.loopAnimation = this.loopAnimation.bind(this);
+    this.stopAnimating = this.stopAnimating.bind(this);
+    _map.stopAnimating = this.stopAnimating;
+  }
+  _createClass(WMJSAnimate, [{
+    key: "isCurrentAnimationTimeCloseToWallClockTime",
+    value: function isCurrentAnimationTimeCloseToWallClockTime() {
+      if (this.isNextTimeCloseToWallClockTime) {
+        this.isNextTimeCloseToWallClockTime = false;
+        return true;
+      }
+      var currentAnimationStep = this._map.animationList[this._map.currentAnimationStep];
+      var nextAnimationStep = this._map.animationList[this._map.currentAnimationStep + 1 >= this._map.animationList.length ? 0 : this._map.currentAnimationStep + 1];
+      var wallClockTime = new Date();
+      var currentAnimationTime = new Date(currentAnimationStep.value);
+      var nextAnimationTime = new Date(nextAnimationStep.value);
+      if (dateUtils.isBetween(wallClockTime, currentAnimationTime, nextAnimationTime)) {
+        var timeDiff1 = dateUtils.differenceInMinutes(currentAnimationTime, wallClockTime);
+        var timeDiff2 = dateUtils.differenceInMinutes(nextAnimationTime, wallClockTime);
+        if (Math.abs(timeDiff1) < Math.abs(timeDiff2)) {
+          // Wall clock time is closer to current animation step time than to the next animation step time
+          this.isNextTimeCloseToWallClockTime = false;
+          return true;
+        }
+        // Wall clock time is closer to next animation step time than to the current animation step time
+        this.isNextTimeCloseToWallClockTime = true;
+      }
+      return false;
+    }
+  }, {
+    key: "loopAnimation",
+    value: function loopAnimation() {
+      var _this = this;
+      if (this._map.isAnimating === false) {
+        return;
+      }
+      var animationDelay = this._map.animationDelay;
+      var animationSteps = this._map.animationList;
+      if (this._map.currentAnimationStep === 0) {
+        animationDelay *= 3;
+      } else if (this._map.currentAnimationStep === animationSteps.length - 1) {
+        animationDelay *= 5;
+      } else if (this.isCurrentAnimationTimeCloseToWallClockTime()) {
+        animationDelay *= 5;
+      }
+      // set up timer for next animation step
+      this._map.animationTimer.init(animationDelay, this.loopAnimation);
+      prefetchImagesForAnimation(this._map);
+      if (this._map.mouseHoverAnimationBox !== false) {
+        return;
+      }
+      __classPrivateFieldGet(this, _WMJSAnimate_instances, "m", _WMJSAnimate_animate).call(this);
+      var nextAnimationStepIndex = this._map.currentAnimationStep + 1;
+      if (nextAnimationStepIndex >= animationSteps.length) {
+        nextAnimationStepIndex = 0;
+      }
+      // get urls for images in next animation step
+      var layersImageUrls = getLayersImageUrlsForTime(this._map, animationSteps[nextAnimationStepIndex].value, animationSteps[this._map.currentAnimationStep].value);
+      // if images for next animation step is ready or haven't started loading
+      // change map animation step to next step
+      var numberOfImagesReadyForNextAnimationStep = 0;
+      layersImageUrls.forEach(function (request) {
+        var url = request.url;
+        var image = getMapImageStore.getImageForSrc(url);
+        /* Get a loaded image which has no error */
+        if (image === null || image === void 0 ? void 0 : image.isLoadedWithoutErrors()) {
+          numberOfImagesReadyForNextAnimationStep += 1;
+          return;
+        }
+        /* Check if a similar image is available instead, then we can continue with the smoother animation */
+        var alternativeImage = getAlternativeImage(url, getMapImageStore, _this._map.getDrawBBOX());
+        if (alternativeImage) {
+          numberOfImagesReadyForNextAnimationStep += 1;
+          return;
+        }
+        var imageHasntStartedLoading = !(image === null || image === void 0 ? void 0 : image.isLoading());
+        if (imageHasntStartedLoading) {
+          /* No alternatives and current image is not loading, so lets continue the animation */
+          numberOfImagesReadyForNextAnimationStep += 1;
+        }
+      });
+      if (numberOfImagesReadyForNextAnimationStep >= layersImageUrls.length) {
+        this._map.currentAnimationStep = nextAnimationStepIndex;
+      }
+    }
+  }, {
+    key: "stopAnimating",
+    value: function stopAnimating() {
+      if (this._map.isAnimating === false) {
+        return;
+      }
+      this._map._animationList = undefined;
+      this._divAnimationInfo.style.display = 'none';
+      this._map.isAnimating = false;
+      this._map.animateBusy = false;
+      this._map.rebuildMapDimensions();
+      this._callBack.triggerEvent('onstopanimation', this._map);
+    }
+  }]);
+  return WMJSAnimate;
+}();
+_WMJSAnimate_instances = new WeakSet(), _WMJSAnimate_animate = function _WMJSAnimate_animate() {
+  if (this._map.isAnimating === false) {
+    return;
+  }
+  if (this._map.animateBusy === true) {
+    return;
+  }
+  var animationStep = this._map.animationList[this._map.currentAnimationStep];
+  if (!animationStep) {
+    debugLogger(DebugType.Error, "No animation step for ".concat(this._map.currentAnimationStep));
+    return;
+  }
+  this._map.setDimension(animationStep.name, animationStep.value, false);
+  this._callBack.triggerEvent('ondimchange');
+  this._callBack.triggerEvent('onnextanimationstep', this._map);
+  this._map.addLayersToCanvasAndDisplayThem();
+  this._map.animateBusy = false;
+};
+
+var WMTileRenderer = /*#__PURE__*/function () {
+  function WMTileRenderer() {
+    _classCallCheck(this, WMTileRenderer);
+  }
+  _createClass(WMTileRenderer, [{
+    key: "render",
+    value: function render(currentBBOX, newBBOX, srs, width, height, ctx, bgMapImageStore,
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+    tileOptions, layerName) {
+      var renderedURLs = {};
+      var imagesToRender = [];
+      if (!layerName) {
+        debugLogger(DebugType.Error);
+        return undefined;
+      }
+      /* Temporal mappings from bgmaps.cgi service names to names defined here */
+      if (layerName === 'streetmap') {
+        layerName = 'OSM';
+      }
       if (layerName === 'pdok') {
         layerName = 'OSM';
       }
@@ -19568,7 +20322,7 @@ var WMTileRenderer = /*#__PURE__*/function () {
       }
       var tileLayer = tileOptions[layerName];
       if (!tileLayer) {
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
         return undefined;
       }
       var tileSettings = tileLayer[srs];
@@ -19758,11 +20512,11 @@ var WMTileRenderer = /*#__PURE__*/function () {
           tilenright = numTilesAtLevelX;
         }
         if (tilentop - tilenbottom > 20) {
-          debug(DebugType.Error);
+          debugLogger(DebugType.Error);
           return;
         }
         if (tilenright - tilenleft > 20) {
-          debug(DebugType.Error);
+          debugLogger(DebugType.Error);
           return;
         }
         for (var ty = tilenbottom - 1; ty < tilentop; ty += 1) {
@@ -19884,7 +20638,7 @@ var drawLegend = function drawLegend(canvasContext, width, height, layers) {
             try {
               ctx.drawImage(el, legendX, legendY);
             } catch (e) {
-              debug(DebugType.Error);
+              debugLogger(DebugType.Error);
             }
           }
         }
@@ -25576,125 +26330,6 @@ var moment$1 = {exports: {}};
 
 var moment = moment$1.exports;
 
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function requiredArgs(required, args) {
-  if (args.length < required) {
-    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
-  }
-}
-
-/**
- * @name toDate
- * @category Common Helpers
- * @summary Convert the given argument to an instance of Date.
- *
- * @description
- * Convert the given argument to an instance of Date.
- *
- * If the argument is an instance of Date, the function returns its clone.
- *
- * If the argument is a number, it is treated as a timestamp.
- *
- * If the argument is none of the above, the function returns Invalid Date.
- *
- * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
- *
- * @param {Date|Number} argument - the value to convert
- * @returns {Date} the parsed date in the local time zone
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // Clone the date:
- * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
- * //=> Tue Feb 11 2014 11:30:30
- *
- * @example
- * // Convert the timestamp to date:
- * const result = toDate(1392098430000)
- * //=> Tue Feb 11 2014 11:30:30
- */
-function toDate(argument) {
-  requiredArgs(1, arguments);
-  var argStr = Object.prototype.toString.call(argument);
-
-  // Clone the date
-  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {
-    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
-    return new Date(argument.getTime());
-  } else if (typeof argument === 'number' || argStr === '[object Number]') {
-    return new Date(argument);
-  } else {
-    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
-      // eslint-disable-next-line no-console
-      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");
-      // eslint-disable-next-line no-console
-      console.warn(new Error().stack);
-    }
-    return new Date(NaN);
-  }
-}
-
-/**
- * @name isWithinInterval
- * @category Interval Helpers
- * @summary Is the given date within the interval?
- *
- * @description
- * Is the given date within the interval? (Including start and end.)
- *
- * @param {Date|Number} date - the date to check
- * @param {Interval} interval - the interval to check
- * @returns {Boolean} the date is within the interval
- * @throws {TypeError} 2 arguments required
- * @throws {RangeError} The start of an interval cannot be after its end
- * @throws {RangeError} Date in interval cannot be `Invalid Date`
- *
- * @example
- * // For the date within the interval:
- * isWithinInterval(new Date(2014, 0, 3), {
- *   start: new Date(2014, 0, 1),
- *   end: new Date(2014, 0, 7)
- * })
- * //=> true
- *
- * @example
- * // For the date outside of the interval:
- * isWithinInterval(new Date(2014, 0, 10), {
- *   start: new Date(2014, 0, 1),
- *   end: new Date(2014, 0, 7)
- * })
- * //=> false
- *
- * @example
- * // For date equal to interval start:
- * isWithinInterval(date, { start, end: date }) // => true
- *
- * @example
- * // For date equal to interval end:
- * isWithinInterval(date, { start: date, end }) // => true
- */
-function isWithinInterval(dirtyDate, interval) {
-  requiredArgs(2, arguments);
-  var time = toDate(dirtyDate).getTime();
-  var startTime = toDate(interval.start).getTime();
-  var endTime = toDate(interval.end).getTime();
-
-  // Throw an exception if start date is after end date or if any date is `Invalid Date`
-  if (!(startTime <= endTime)) {
-    throw new RangeError('Invalid interval');
-  }
-  return time >= startTime && time <= endTime;
-}
-
 /** ************************************************ */
 /* Object to store a time duration / time interval */
 /** ************************************************ */
@@ -25824,7 +26459,7 @@ var parseISO8601DateToDate = function parseISO8601DateToDate(unvalidatedIsotime)
   };
   var isotime = makeISO8601StringFromFlexibleWMSDateString(unvalidatedIsotime);
   if (!isValidISOTime(isotime)) {
-    debug(DebugType.Warning);
+    debugLogger(DebugType.Warning);
     return undefined;
   }
   var _getTimeValues = getTimeValues(isotime),
@@ -26076,14 +26711,14 @@ var ParseISOTimeRangeDuration = /*#__PURE__*/function () {
     this.startTime = parseISO8601DateToDate(times[0]);
     this.stopTime = parseISO8601DateToDate(times[1]);
     if (!this.startTime || !this.stopTime) {
-      debug(DebugType.Warning);
+      debugLogger(DebugType.Warning);
       return;
     }
     /* Try to get the time interval. If not available default to 1 minute */
     var timeIntervalString = times[2] || 'PT1M';
     this.timeInterval = parseISO8601IntervalToDateInterval(timeIntervalString);
     if (!this.timeInterval) {
-      debug(DebugType.Warning);
+      debugLogger(DebugType.Warning);
       return;
     }
     // Calculate the number if steps
@@ -26109,7 +26744,7 @@ var ParseISOTimeRangeDuration = /*#__PURE__*/function () {
         return null;
       }
       if (!this.timeInterval) {
-        debug(DebugType.Warning);
+        debugLogger(DebugType.Warning);
         return null;
       }
       if (this.timeInterval.isRegularInterval === false) {
@@ -26302,7 +26937,7 @@ var WMJSDimension = /*#__PURE__*/function () {
       if (!referenceTimeValueToSet) {
         this.reInitializeValues(this.values);
         this.setClosestValue(null);
-        debug(DebugType.Warning);
+        debugLogger(DebugType.Warning);
         return;
       }
       /*
@@ -26598,7 +27233,7 @@ var WMJSDimension = /*#__PURE__*/function () {
         value = this.getValueForIndex(index);
       } catch (e) {
         if (typeof e.message === 'number') {
-          if (e.message === 0) {
+          if (e.message === '0') {
             value = WMDateTooEarlyString;
           } else {
             value = WMDateTooLateString;
@@ -26763,7 +27398,7 @@ var WMJSDimension = /*#__PURE__*/function () {
           }
           return foundIndex;
         } catch (e) {
-          debug(DebugType.Error);
+          debugLogger(DebugType.Error);
           return -1;
         }
       }
@@ -26902,7 +27537,7 @@ var MapPin = /*#__PURE__*/function () {
       _this.redrawMap();
     };
     this.positionMapPinByLatLon = function (coord) {
-      debug(DebugType.Log, "positionMapPinByLatLon at ".concat(coord.x, ",").concat(coord.y));
+      debugLogger(DebugType.Log, "positionMapPinByLatLon at ".concat(coord.x, ",").concat(coord.y));
       var newpos = _this._map.getPixelCoordFromLatLong(coord);
       _this.setMapPin(newpos.x, newpos.y);
     };
@@ -27902,7 +28537,7 @@ var WMJSMap = /*#__PURE__*/function () {
       }, this.internalMapId);
       this.callBack.addToCallback('display', this.display, true);
       this.callBack.addToCallback('draw', function () {
-        debug(DebugType.Log);
+        debugLogger(DebugType.Log);
       }, true);
       bgMapImageStore.addImageEventCallback(function (image, id, imageEventType) {
         if (imageEventType === WMImageEventType.Loaded) {
@@ -27917,16 +28552,16 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "rebuildMapDimensions",
     value: function rebuildMapDimensions() {
-      for (var i = 0; i < this.layers.length; i += 1) {
-        for (var j = 0; j < this.layers[i].dimensions.length; j += 1) {
-          var dim = this.layers[i].dimensions[j];
-          var mapdim = this.getDimension(dim.name);
+      var _this4 = this;
+      this.layers.forEach(function (layer) {
+        layer.dimensions.forEach(function (dim) {
+          var mapdim = _this4.getDimension(dim.name);
           if (!isDefined(mapdim)) {
             var newdim = dim.clone();
-            this.mapdimensions.push(newdim);
+            _this4.mapdimensions.push(newdim);
           }
-        }
-      }
+        });
+      });
       this.callBack.triggerEvent('onmapdimupdate');
     }
   }, {
@@ -28085,9 +28720,9 @@ var WMJSMap = /*#__PURE__*/function () {
         }
       } else {
         try {
-          debug(DebugType.Error, "WebMapJS warning: moveLayerDown: layer '".concat(layerToMove.name, "' not found."));
+          debugLogger(DebugType.Error, "WebMapJS warning: moveLayerDown: layer '".concat(layerToMove.name, "' not found."));
         } catch (e) {
-          debug(DebugType.Error);
+          debugLogger(DebugType.Error);
         }
       }
     }
@@ -28105,9 +28740,9 @@ var WMJSMap = /*#__PURE__*/function () {
         }
       } else {
         try {
-          debug(DebugType.Error, "WebMapJS: moveLayers: layer '".concat(_layerA.name, "' not found."));
+          debugLogger(DebugType.Error, "WebMapJS: moveLayers: layer '".concat(_layerA.name, "' not found."));
         } catch (e) {
-          debug(DebugType.Error);
+          debugLogger(DebugType.Error);
         }
       }
     }
@@ -28124,19 +28759,19 @@ var WMJSMap = /*#__PURE__*/function () {
         }
       } else {
         try {
-          debug(DebugType.Error, "WebMapJS: moveLayerUp: layer '".concat(layerToMove.name, "' not found."));
+          debugLogger(DebugType.Error, "WebMapJS: moveLayerUp: layer '".concat(layerToMove.name, "' not found."));
         } catch (e) {
-          debug(DebugType.Error);
+          debugLogger(DebugType.Error);
         }
       }
     }
   }, {
     key: "configureMapDimensions",
     value: function configureMapDimensions(layer) {
-      var _this4 = this;
+      var _this5 = this;
       layer.dimensions.forEach(function (dimension) {
-        var mapDim = _this4.getDimension(dimension.name);
-        if (isDefined(mapDim) && isDefined(mapDim.currentValue) && dimension.linked) {
+        var mapDim = _this5.getDimension(dimension.name);
+        if ((mapDim === null || mapDim === void 0 ? void 0 : mapDim.currentValue) !== undefined && dimension.linked) {
           dimension.setClosestValue(mapDim.currentValue);
         }
       });
@@ -28148,25 +28783,25 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "addLayer",
     value: function addLayer(layer) {
-      var _this5 = this;
+      var _this6 = this;
       return new Promise(function (resolve, reject) {
         if (!isDefined(layer)) {
-          debug(DebugType.Warning);
+          debugLogger(DebugType.Warning);
           reject(new Error('undefined layer'));
           return;
         }
         if (!layer.constructor) {
-          debug(DebugType.Warning);
+          debugLogger(DebugType.Warning);
           reject(new Error('layer has no constructor'));
           return;
         }
         /* Set a reference in the layer to this map */
-        layer.parentMap = _this5;
-        _this5.layers.push(layer);
+        layer.parentMap = _this6;
+        _this6.layers.push(layer);
         var done = function done(layerCallback) {
-          _this5.configureMapDimensions(layerCallback);
-          _this5.callBack.triggerEvent('onlayeradd');
-          resolve(_this5);
+          _this6.configureMapDimensions(layerCallback);
+          _this6.callBack.triggerEvent('onlayeradd');
+          resolve(_this6);
         };
         layer.parseLayer(done, undefined, 'WMJSMap addLayer');
       });
@@ -28256,8 +28891,8 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "setSize",
     value: function setSize(w, h) {
-      var _this6 = this;
-      debug(DebugType.Log, 'setSize', w, h, this.initialized);
+      var _this7 = this;
+      debugLogger(DebugType.Log, 'setSize', w, h, this.initialized);
       if (w < 4 || h < 4 || this.initialized === false) {
         return;
       }
@@ -28273,9 +28908,9 @@ var WMJSMap = /*#__PURE__*/function () {
         return;
       }
       this._resizeTimer.init(200, function () {
-        _this6._resizeTimerBusy = false;
-        _this6._setSize(_this6.resizeWidth, _this6.resizeHeight);
-        _this6.draw('resizeTimer');
+        _this7._resizeTimerBusy = false;
+        _this7._setSize(_this7.resizeWidth, _this7.resizeHeight);
+        _this7.draw('resizeTimer');
       });
     }
   }, {
@@ -28287,7 +28922,7 @@ var WMJSMap = /*#__PURE__*/function () {
       if (w < 4 || h < 4) {
         return;
       }
-      debug(DebugType.Log);
+      debugLogger(DebugType.Log);
       var projinfo = this.getProjection();
       this.width = w;
       this.height = h;
@@ -28298,7 +28933,7 @@ var WMJSMap = /*#__PURE__*/function () {
         this.height = 4;
       }
       if (!projinfo.srs || !projinfo.bbox) {
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
         projinfo.srs = 'EPSG:4326';
         projinfo.bbox.left = -180;
         projinfo.bbox.bottom = -90;
@@ -28396,7 +29031,7 @@ var WMJSMap = /*#__PURE__*/function () {
           this.divDimInfo.style.display = 'none';
         }
       } catch (e) {
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
       }
     }
   }, {
@@ -28440,7 +29075,7 @@ var WMJSMap = /*#__PURE__*/function () {
         }
       }
       if (this.isAnimating) {
-        debug(DebugType.Log);
+        debugLogger(DebugType.Log);
         return;
       }
       this._draw(this._animationList);
@@ -28451,7 +29086,7 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "_draw",
     value: function _draw(animationList) {
-      debug(DebugType.Log);
+      debugLogger(DebugType.Log);
       this.drawnBBOX.setBBOX(this.bbox);
       this._drawAndLoad(animationList);
     }
@@ -28467,7 +29102,7 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "_drawAndLoad",
     value: function _drawAndLoad(animationList) {
-      var _this7 = this;
+      var _this8 = this;
       if (this.width < 4 || this.height < 4) {
         this._drawReady();
         return;
@@ -28487,19 +29122,20 @@ var WMJSMap = /*#__PURE__*/function () {
         this.mouseHoverAnimationBox = false;
         animationList.forEach(function (animationStepWithoutRequests, j) {
           if (selectedTime && animationStepWithoutRequests.value === selectedTime) {
-            _this7.currentAnimationStep = j;
+            _this8.currentAnimationStep = j;
           }
           var animationStep = {
             name: animationStepWithoutRequests.name,
             value: animationStepWithoutRequests.value,
             requests: []
           };
-          _this7.setDimension(animationStepWithoutRequests.name, animationStepWithoutRequests.value, false);
-          animationStep.requests = _this7.getWMSRequests();
-          _this7.animationList.push(animationStep);
+          _this8.setDimension(animationStepWithoutRequests.name, animationStepWithoutRequests.value, false);
+          animationStep.requests = _this8.getWMSRequests();
+          _this8.animationList.push(animationStep);
         });
         this.setDimension(this.animationList[this.currentAnimationStep].name, this.animationList[this.currentAnimationStep].value, false);
-        this.wmAnimate.prefetchImagesForAnimationSteps();
+        this.animationTimer = new WMTimer();
+        this.wmAnimate.loopAnimation();
       }
       this.addLayersToCanvasAndDisplayThem();
     }
@@ -28511,7 +29147,7 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "_onMapReadyCallbackFunction",
     value: function _onMapReadyCallbackFunction() {
-      debug(DebugType.Log);
+      debugLogger(DebugType.Log);
       this.draw('onmapready callback');
     }
   }, {
@@ -28522,11 +29158,11 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "getWMSRequests",
     value: function getWMSRequests() {
-      var _this8 = this;
+      var _this9 = this;
       var requests = [];
       this.layers.forEach(function (layer) {
         if (layer.service && layer.enabled) {
-          var request = buildWMSGetMapRequest(_this8, layer);
+          var request = buildWMSGetMapRequest(_this9, layer);
           if (request === null || request === void 0 ? void 0 : request.url) {
             requests.push(request);
           }
@@ -28537,34 +29173,37 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "addLayersToCanvasAndDisplayThem",
     value: function addLayersToCanvasAndDisplayThem() {
-      var _this9 = this;
+      var _this10 = this;
       var _a, _b, _c;
-      debug(DebugType.Log);
+      debugLogger(DebugType.Log);
       this.divBuffer.reset();
       var currentLayerIndex = 0;
       this.numBaseLayers = 0;
       (_a = this.baseLayers) === null || _a === void 0 ? void 0 : _a.forEach(function (baseLayer) {
         var _a;
         if (baseLayer.enabled && baseLayer.keepOnTop === false && baseLayer.type && baseLayer.type !== 'twms') {
-          _this9.numBaseLayers += 1;
-          var requestURL = (_a = buildWMSGetMapRequest(_this9, baseLayer)) === null || _a === void 0 ? void 0 : _a.url;
+          _this10.numBaseLayers += 1;
+          var requestURL = (_a = buildWMSGetMapRequest(_this10, baseLayer)) === null || _a === void 0 ? void 0 : _a.url;
           if (requestURL) {
-            _this9.divBuffer.setSrc(currentLayerIndex, requestURL, {
+            _this10.divBuffer.setSrc(currentLayerIndex, requestURL, {
               layer: baseLayer
-            }, baseLayer.opacity, _this9.getDrawBBOX());
+            }, baseLayer.opacity, _this10.getDrawBBOX());
             currentLayerIndex += 1;
           }
         }
       });
+      if (!this.isAnimating) {
+        prefetchImagesForNonAnimation(this);
+      }
       /* Loop through all layers */
       (_b = this.layers) === null || _b === void 0 ? void 0 : _b.forEach(function (layer) {
         var _a;
         if (layer.service && layer.enabled && layer.isConfigured) {
-          var requestURL = (_a = buildWMSGetMapRequest(_this9, layer)) === null || _a === void 0 ? void 0 : _a.url;
+          var requestURL = (_a = buildWMSGetMapRequest(_this10, layer)) === null || _a === void 0 ? void 0 : _a.url;
           if (requestURL) {
-            _this9.divBuffer.setSrc(currentLayerIndex, requestURL, {
+            _this10.divBuffer.setSrc(currentLayerIndex, requestURL, {
               layer: layer
-            }, layer.opacity, _this9.getDrawBBOX());
+            }, layer.opacity, _this10.getDrawBBOX());
             currentLayerIndex += 1;
           }
         }
@@ -28572,11 +29211,11 @@ var WMJSMap = /*#__PURE__*/function () {
       (_c = this.baseLayers) === null || _c === void 0 ? void 0 : _c.forEach(function (baseLayer) {
         var _a;
         if (baseLayer.enabled && baseLayer.keepOnTop === true) {
-          var requestURL = (_a = buildWMSGetMapRequest(_this9, baseLayer)) === null || _a === void 0 ? void 0 : _a.url;
+          var requestURL = (_a = buildWMSGetMapRequest(_this10, baseLayer)) === null || _a === void 0 ? void 0 : _a.url;
           if (requestURL) {
-            _this9.divBuffer.setSrc(currentLayerIndex, requestURL, {
+            _this10.divBuffer.setSrc(currentLayerIndex, requestURL, {
               layer: baseLayer
-            }, baseLayer.opacity, _this9.getDrawBBOX());
+            }, baseLayer.opacity, _this10.getDrawBBOX());
             currentLayerIndex += 1;
           }
         }
@@ -28608,7 +29247,7 @@ var WMJSMap = /*#__PURE__*/function () {
     key: "redrawBuffer",
     value: function redrawBuffer() {
       this.divBuffer.display();
-      debug(DebugType.Log);
+      debugLogger(DebugType.Log);
       this.drawnBBOX.setBBOX(this.bbox);
       this.draw();
     }
@@ -28770,20 +29409,20 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "_buildLayerDims",
     value: function _buildLayerDims() {
-      var _this10 = this;
+      var _this11 = this;
       if (this.buildLayerDimsBusy === true) {
         return;
       }
       this.mapdimensions.forEach(function (mapDim) {
-        _this10.layers.forEach(function (layer) {
+        _this11.layers.forEach(function (layer) {
           layer.dimensions.forEach(function (layerDim) {
             if (layerDim.linked === true && layerDim.name === mapDim.name) {
               if (mapDim.currentValue === 'current' || mapDim.currentValue === 'default' || mapDim.currentValue === '' || mapDim.currentValue === 'earliest' || mapDim.currentValue === 'middle' || mapDim.currentValue === 'latest') {
                 mapDim.currentValue = layerDim.getClosestValue(mapDim.currentValue);
               }
-              _this10.buildLayerDimsBusy = true;
+              _this11.buildLayerDimsBusy = true;
               layerDim.setClosestValue(mapDim.currentValue);
-              _this10.buildLayerDimsBusy = false;
+              _this11.buildLayerDimsBusy = false;
             }
           });
         });
@@ -28826,7 +29465,7 @@ var WMJSMap = /*#__PURE__*/function () {
       } catch (e) {
         return undefined;
       }
-      debug(DebugType.Log);
+      debugLogger(DebugType.Log);
       return request;
     }
     /* End of GetFeature info handling */
@@ -29177,7 +29816,7 @@ var WMJSMap = /*#__PURE__*/function () {
           this.callBack.triggerEvent('onmousemove', [undefined, undefined]);
           this.updateMouseCursorCoordinates(undefined);
         } catch (e) {
-          debug(DebugType.Error);
+          debugLogger(DebugType.Error);
         }
         this.mouseUpX = this.mouseX;
         this.mouseUpY = this.mouseY;
@@ -29317,7 +29956,7 @@ var WMJSMap = /*#__PURE__*/function () {
         this.gfiDialogList[j].origY = this.gfiDialogList[j].y;
       }
       this.mapPanning = 1;
-      debug(DebugType.Log);
+      debugLogger(DebugType.Log);
       this.bbox.setBBOX(this.drawnBBOX);
       this.updateBBOX.setBBOX(this.drawnBBOX);
       this.mapPanStartGeoCoords = this.getGeoCoordFromPixelCoord({
@@ -29499,8 +30138,8 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "zoomTo",
     value: function zoomTo(_newbbox) {
-      var _this11 = this;
-      debug(DebugType.Log);
+      var _this12 = this;
+      debugLogger(DebugType.Log);
       var setOrigBox = false;
       var newbbox = new WMBBOX(_newbbox);
       // Maintain aspect ratio
@@ -29515,7 +30154,7 @@ var WMJSMap = /*#__PURE__*/function () {
         setOrigBox = true;
       }
       if (setOrigBox === true) {
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
         ratio = 1;
       }
       if (ratio < 0) {
@@ -29540,14 +30179,14 @@ var WMJSMap = /*#__PURE__*/function () {
       this._updateBoundingBox(this.bbox);
       this.drawnBBOX.setBBOX(this.bbox);
       var resetMapPinAndDialogs = function resetMapPinAndDialogs() {
-        for (var j = 0; j < _this11.gfiDialogList.length; j += 1) {
-          var newpos = _this11.getPixelCoordFromGeoCoord({
-            x: _this11.gfiDialogList[j].geoPosX,
-            y: _this11.gfiDialogList[j].geoPosY
+        for (var j = 0; j < _this12.gfiDialogList.length; j += 1) {
+          var newpos = _this12.getPixelCoordFromGeoCoord({
+            x: _this12.gfiDialogList[j].geoPosX,
+            y: _this12.gfiDialogList[j].geoPosY
           });
-          if (_this11.gfiDialogList[j].hasBeenDragged === false) {
-            if (_this11.gfiDialogList[j].moveToMouseCursor === true) {
-              _this11.gfiDialogList[j].setXY(_this11.gfiDialogList[j].origX + newpos.x, _this11.gfiDialogList[j].origY + newpos.y);
+          if (_this12.gfiDialogList[j].hasBeenDragged === false) {
+            if (_this12.gfiDialogList[j].moveToMouseCursor === true) {
+              _this12.gfiDialogList[j].setXY(_this12.gfiDialogList[j].origX + newpos.x, _this12.gfiDialogList[j].origY + newpos.y);
             }
           }
         }
@@ -29616,7 +30255,7 @@ var WMJSMap = /*#__PURE__*/function () {
         }
         result = proj4(this.longlat, this.proj4.projection, [p.x, p.y]);
       } catch (e) {
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
         return undefined;
       }
       return this.getPixelCoordFromGeoCoord({
@@ -29745,14 +30384,19 @@ var WMJSMap = /*#__PURE__*/function () {
       }
       return undefined;
     }
+  }, {
+    key: "setTimeDimension",
+    value: function setTimeDimension(value, triggerEvent) {
+      this.setDimension('time', value, triggerEvent);
+    }
   }, {
     key: "setDimension",
     value: function setDimension(name, value) {
       var triggerEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
       var adjustLayerDims = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-      debug(DebugType.Log);
+      debugLogger(DebugType.Log);
       if (!isDefined(name) || !isDefined(value)) {
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
         return;
       }
       var dim = this.getDimension(name);
@@ -29801,14 +30445,14 @@ var WMJSMap = /*#__PURE__*/function () {
           return;
         }
       }
-      debug(DebugType.Error, "WebMapJS: Unable to find the correct bbox with current map projection ".concat(this.srs, " for layer ").concat(layer.title, ". Using default bbox instead."));
+      debugLogger(DebugType.Error, "WebMapJS: Unable to find the correct bbox with current map projection ".concat(this.srs, " for layer ").concat(layer.title, ". Using default bbox instead."));
       this.zoomTo(this.defaultBBOX);
       this.draw('zoomTolayer');
     }
   }, {
     key: "setBBOX",
     value: function setBBOX(left, bottom, right, top) {
-      debug(DebugType.Log);
+      debugLogger(DebugType.Log);
       this.bbox.setBBOX(left, bottom, right, top);
       this.resizeBBOX.setBBOX(this.bbox);
       this.wMFlyToBBox.flyZoomToBBOXFly.setBBOX(this.bbox);
@@ -30475,7 +31119,7 @@ var loadGetCapabilitiesViaProxy = function loadGetCapabilitiesViaProxy(url, succ
     fetch(getcapreq, {}).then(function (result) {
       return result.text();
     }).then(function (result) {
-      debug(DebugType.Log, 'loadGetCapabilitiesViaProxy succesfully finished');
+      debugLogger(DebugType.Log, 'loadGetCapabilitiesViaProxy succesfully finished');
       succes(result);
     })["catch"](function () {
       fail("Request failed for ".concat(getcapreq));
@@ -30507,7 +31151,7 @@ var WMJSGetCapabilities = function WMJSGetCapabilities(service, succes, fail, op
     return;
   }
   if (service.length === 0) {
-    debug(DebugType.Error);
+    debugLogger(DebugType.Error);
     fail(I18n.service_url_empty.text);
     return;
   }
@@ -30521,7 +31165,7 @@ var WMJSGetCapabilities = function WMJSGetCapabilities(service, succes, fail, op
     service = hostName + service;
   }
   if (!service.startsWith('http://') && !service.startsWith('https:') && !service.startsWith('//')) {
-    debug(DebugType.Error);
+    debugLogger(DebugType.Error);
     fail(I18n.service_url_empty.text);
     return;
   }
@@ -30529,7 +31173,7 @@ var WMJSGetCapabilities = function WMJSGetCapabilities(service, succes, fail, op
     // eslint-disable-next-line no-param-reassign
     service += '?';
   }
-  debug(DebugType.Log);
+  debugLogger(DebugType.Log);
   var addParams = disableCache ? {
     random: Math.random()
   } : {};
@@ -30538,7 +31182,7 @@ var WMJSGetCapabilities = function WMJSGetCapabilities(service, succes, fail, op
     try {
       succes(data);
     } catch (e) {
-      debug(DebugType.Error);
+      debugLogger(DebugType.Error, e.message);
     }
   })["catch"](function () {
     loadGetCapabilitiesViaProxy(url, succes, function () {
@@ -30822,7 +31466,7 @@ var WMJSService = /*#__PURE__*/function () {
       if (!failure) {
         // eslint-disable-next-line no-param-reassign
         failure = function failure(msg) {
-          debug(DebugType.Error);
+          debugLogger(DebugType.Error);
         };
       }
       var parse = function parse(jsonData) {
@@ -30830,7 +31474,7 @@ var WMJSService = /*#__PURE__*/function () {
         try {
           _this2.version = _this2.checkVersion(jsonData);
         } catch (e) {
-          failure(e);
+          failure(e.message);
           return;
         }
         var layerTreeStructure = buildLayerTreeFromNestedWMSLayer(rootLayer);
@@ -30909,18 +31553,17 @@ var LayerType;
  * @param layerDimNamesToRemove A set of dimensions names which are flagged for removal, this function removes the dimension from the set if found in the layer.
  */
 var addDimsForLayer = function addDimsForLayer(layerProps, layer, layerDimNamesToRemove) {
-  /* Information from the WMS GetCapabilities document */
-  var layerDims = layerProps.dimensions || [];
+  var _a;
   /* Loop through all the dims from the WMS GetCapabilities document for this layer */
-  var _loop = function _loop() {
+  (_a = layerProps.dimensions) === null || _a === void 0 ? void 0 : _a.forEach(function (layerDimension) {
     /* Obtain layerDim info from the GetCapabilities document and put into a WMSLayerDimInfo object  */
-    var dimName = (layerDims[d].name || '').toLowerCase();
+    var dimName = (layerDimension.name || '').toLowerCase();
     var layerDim = {
       name: dimName,
-      units: layerDims[d].units || '',
-      unitSymbol: layerDims[d].unitSymbol || '',
-      value: layerDims[d].values || '',
-      "default": layerDims[d].currentValue,
+      units: layerDimension.units || '',
+      unitSymbol: layerDimension.unitSymbol || '',
+      value: layerDimension.values || '',
+      "default": layerDimension.currentValue,
       isRefTimeDimension: dimName === 'reference_time'
     };
     /* Flag that this dim should not be removed from the layer */
@@ -30961,10 +31604,7 @@ var addDimsForLayer = function addDimsForLayer(layerProps, layer, layerDimNamesT
       dimensionToUpdate.reInitializeValues(dimensionToUpdate.values);
       dimensionToUpdate.setClosestValue(currentValue);
     }
-  };
-  for (var d = 0; d < layerDims.length; d += 1) {
-    _loop();
-  }
+  });
 };
 /**
  * Helper function to configure the WMS Styles from the WMS GetCapabilities document.
@@ -31036,7 +31676,9 @@ var configureGeographicBoundingBox = function configureGeographicBoundingBox(lay
 };
 var WMLayer = /*#__PURE__*/function () {
   function WMLayer(options) {
+    var _this = this;
     _classCallCheck(this, WMLayer);
+    var _a;
     this.init = this.init.bind(this);
     this.getLayerName = this.getLayerName.bind(this);
     this.toggleAutoUpdate = this.toggleAutoUpdate.bind(this);
@@ -31117,10 +31759,10 @@ var WMLayer = /*#__PURE__*/function () {
       if (options.transparent === false) {
         this.transparent = false;
       }
-      if (options.dimensions && options.dimensions.length) {
-        for (var d = 0; d < options.dimensions.length; d += 1) {
-          this.dimensions.push(new WMJSDimension(options.dimensions[d]));
-        }
+      if ((_a = options.dimensions) === null || _a === void 0 ? void 0 : _a.length) {
+        options.dimensions.forEach(function (dimension) {
+          _this.dimensions.push(new WMJSDimension(dimension));
+        });
       }
       if (isDefined(options.onReady)) {
         this.onReady = options.onReady;
@@ -31182,12 +31824,12 @@ var WMLayer = /*#__PURE__*/function () {
   }, {
     key: "toggleAutoUpdate",
     value: function toggleAutoUpdate() {
-      var _this = this;
+      var _this2 = this;
       this.autoupdate = !this.autoupdate;
       if (this.autoupdate) {
         var numDeltaMS = 60000;
         this.timer = setInterval(function () {
-          _this.parseLayer(undefined, true, 'WMLayer toggleAutoUpdate');
+          _this2.parseLayer(undefined, true, 'WMLayer toggleAutoUpdate');
         }, numDeltaMS);
       } else {
         clearInterval(this.timer);
@@ -31196,14 +31838,14 @@ var WMLayer = /*#__PURE__*/function () {
   }, {
     key: "setAutoUpdate",
     value: function setAutoUpdate(val, interval, callback) {
-      var _this2 = this;
+      var _this3 = this;
       if (val !== this.autoupdate) {
         this.autoupdate = val;
         if (!val) {
           clearInterval(this.timer);
         } else {
           this.timer = setInterval(function () {
-            _this2.parseLayer(callback, true, 'WMLayer setAutoUpdate');
+            _this3.parseLayer(callback, true, 'WMLayer setAutoUpdate');
           }, interval);
         }
       }
@@ -31262,18 +31904,15 @@ var WMLayer = /*#__PURE__*/function () {
     key: "handleReferenceTime",
     value: function handleReferenceTime(name, value) {
       var updateMapDimensions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      if (name === 'reference_time') {
-        var timeDim = this.getDimension('time');
-        var referenceTimeDim = this.getDimension(name);
-        if (timeDim) {
-          timeDim.setTimeValuesForReferenceTime(value, referenceTimeDim);
-          if (updateMapDimensions) {
-            if (this.parentMap) {
-              if (this.enabled !== false) {
-                this.parentMap.getListener().triggerEvent('ondimchange', 'time');
-              }
-            }
-          }
+      if (name !== 'reference_time') {
+        return;
+      }
+      var timeDim = this.getDimension('time');
+      var referenceTimeDim = this.getDimension(name);
+      if (timeDim) {
+        timeDim.setTimeValuesForReferenceTime(value, referenceTimeDim);
+        if (updateMapDimensions && this.parentMap && this.enabled !== false) {
+          this.parentMap.getListener().triggerEvent('ondimchange', 'time');
         }
       }
     }
@@ -31289,27 +31928,20 @@ var WMLayer = /*#__PURE__*/function () {
       if (!isDefined(value)) {
         return;
       }
-      var dimIndex = this.dimensions.findIndex(function (dim) {
-        return dim.name === name;
-      });
-      if (dimIndex < 0) {
+      var dim = this.getDimension(name);
+      if (!dim) {
         return;
       }
-      var dim = this.dimensions[dimIndex];
       dim.setValue(value);
       this.handleReferenceTime(name, value, updateMapDimensions);
-      if (updateMapDimensions) {
-        if (dim.linked === true) {
-          if (this.parentMap) {
-            this.parentMap.setDimension(name, dim.getValue());
-          }
-        }
+      if (updateMapDimensions && dim.linked === true && this.parentMap) {
+        this.parentMap.setDimension(name, dim.getValue());
       }
     }
   }, {
     key: "__parseGetCapForLayer",
     value: function __parseGetCapForLayer(getcapabilitiesjson, layerDoneCallback, fail) {
-      var _this3 = this;
+      var _this4 = this;
       if (!getcapabilitiesjson) {
         this.title = I18n.service_has_error.text;
         this["abstract"] = I18n.not_available_message.text;
@@ -31350,7 +31982,7 @@ var WMLayer = /*#__PURE__*/function () {
           }
         }
       } catch (e) {
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
       }
       if (this.name === undefined || this.name.length < 1) {
         this.title = WMEmptyLayerTitle;
@@ -31366,7 +31998,7 @@ var WMLayer = /*#__PURE__*/function () {
       }
       if (!isDefined(this.getmapURL)) {
         this.getmapURL = this.service;
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
       }
       this.getfeatureinfoURL = undefined;
       try {
@@ -31376,7 +32008,7 @@ var WMLayer = /*#__PURE__*/function () {
       }
       if (!isDefined(this.getfeatureinfoURL)) {
         this.getfeatureinfoURL = this.service;
-        debug(DebugType.Error);
+        debugLogger(DebugType.Error);
       }
       this.getlegendgraphicURL = undefined;
       try {
@@ -31399,36 +32031,36 @@ var WMLayer = /*#__PURE__*/function () {
       this.path = '';
       // Function will be called when the layer with the right name is found in the getcap doc
       var populateLayerFromTreeElement = function populateLayerFromTreeElement(jsonlayer) {
-        _this3.title = jsonlayer.title || jsonlayer.name || '';
-        _this3["abstract"] = jsonlayer["abstract"] || I18n.not_available_message.text;
-        _this3.path = jsonlayer.path.join('/');
+        _this4.title = jsonlayer.title || jsonlayer.name || '';
+        _this4["abstract"] = jsonlayer["abstract"] || I18n.not_available_message.text;
+        _this4.path = jsonlayer.path.join('/');
         /** ***************** Go through styles **************** */
-        configureStyles(jsonlayer, _this3);
+        configureStyles(jsonlayer, _this4);
         /** ***************** Go through Dimensions **************** */
-        configureDimensions(jsonlayer, _this3);
+        configureDimensions(jsonlayer, _this4);
         /** ***************** Go through geographicBoundingBox **************** */
-        configureGeographicBoundingBox(jsonlayer, _this3);
-        _this3.queryable = jsonlayer.queryable || false;
+        configureGeographicBoundingBox(jsonlayer, _this4);
+        _this4.queryable = jsonlayer.queryable || false;
         if (jsonlayer.crs) {
           jsonlayer.crs.forEach(function (p) {
             var wmProjection = new WMProjection();
             wmProjection.srs = p.name || '';
             if (p.bbox) {
-              var swapBBOX = _this3.version === WMSVersion.version130 && wmProjection.srs === 'EPSG:4326' && _this3.wms130bboxcompatibilitymode === false;
+              var swapBBOX = _this4.version === WMSVersion.version130 && wmProjection.srs === 'EPSG:4326' && _this4.wms130bboxcompatibilitymode === false;
               if (swapBBOX) {
                 wmProjection.bbox.setBBOX(p.bbox.bottom, p.bbox.left, p.bbox.top, p.bbox.right);
               } else {
                 wmProjection.bbox.setBBOX(p.bbox.left, p.bbox.bottom, p.bbox.right, p.bbox.top);
               }
             }
-            _this3.projectionProperties.push(wmProjection);
+            _this4.projectionProperties.push(wmProjection);
           });
         }
       };
       var layerTreeStructure = buildLayerTreeFromNestedWMSLayer(rootLayer);
       /* Recursively walk the layertree until a child is found with the corresponding name */
       var findTreeNode = function findTreeNode(tree) {
-        if (tree.name === _this3.name) {
+        if (tree.name === _this4.name) {
           return tree;
         }
         if (tree.children) {
@@ -31473,7 +32105,7 @@ var WMLayer = /*#__PURE__*/function () {
     value: function parseLayer(_layerDoneCallback, forceReload,
     // eslint-disable-next-line no-unused-vars
     origin) {
-      var _this4 = this;
+      var _this5 = this;
       this.hasError = false;
       var layerDoneCallback = function layerDoneCallback(__layer) {
         if (isDefined(_layerDoneCallback)) {
@@ -31483,24 +32115,24 @@ var WMLayer = /*#__PURE__*/function () {
             _layerDoneCallback(__layer);
             // console.timeEnd(origin);
           } catch (e) {
-            debug(DebugType.Error);
+            debugLogger(DebugType.Error, e.message);
           }
         }
       };
       var fail = function fail(_layer, message) {
-        _this4.hasError = true;
-        _this4.lastError = message;
-        _this4.title = I18n.service_has_error.text;
+        _this5.hasError = true;
+        _this5.lastError = message;
+        _this5.title = I18n.service_has_error.text;
         layerDoneCallback(_layer);
-        if (isDefined(_this4._options.failure)) {
-          _this4._options.failure(_layer, message);
+        if (isDefined(_this5._options.failure)) {
+          _this5._options.failure(_layer, message);
         }
       };
       var callback = function callback(data) {
-        _this4.__parseGetCapForLayer(data, layerDoneCallback, fail);
+        _this5.__parseGetCapForLayer(data, layerDoneCallback, fail);
       };
       var requestfail = function requestfail() {
-        fail(_this4, I18n.no_capability_element_found.text);
+        fail(_this5, I18n.no_capability_element_found.text);
       };
       var options = {
         headers: {}
@@ -31523,12 +32155,12 @@ var WMLayer = /*#__PURE__*/function () {
   }, {
     key: "parseLayerPromise",
     value: function parseLayerPromise() {
-      var _this5 = this;
+      var _this6 = this;
       var forceReload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       return new Promise(function (resolve, reject) {
-        _this5.parseLayer(function (layer) {
+        _this6.parseLayer(function (layer) {
           if (layer.hasError === true) {
-            debug(DebugType.Error, "[ERROR] Parse layer failed, Reason [".concat(layer.lastError, "]"));
+            debugLogger(DebugType.Error, "[ERROR] Parse layer failed, Reason [".concat(layer.lastError, "]"));
             reject(layer);
           } else {
             resolve(layer);
@@ -31539,7 +32171,7 @@ var WMLayer = /*#__PURE__*/function () {
   }, {
     key: "cloneLayer",
     value: function cloneLayer() {
-      return new WMLayer(this);
+      return new WMLayer(this._options);
     }
     /**
      * Set or change the name of this layer. This involves re-parsing the WMS GetCapabilities document and updating the affected layer properties. When done, it resolves the WMLayer
@@ -31559,11 +32191,11 @@ var WMLayer = /*#__PURE__*/function () {
   }, {
     key: "setStyle",
     value: function setStyle(styleName) {
-      debug(DebugType.Log);
+      debugLogger(DebugType.Log);
       if (!this.styles || this.styles.length === 0) {
         this.currentStyle = '';
         this.legendGraphic = '';
-        debug(DebugType.Log);
+        debugLogger(DebugType.Log);
         return;
       }
       var styleFound = false;
@@ -31575,7 +32207,7 @@ var WMLayer = /*#__PURE__*/function () {
         }
       }
       if (!styleFound) {
-        debug(DebugType.Log, "WMLayer::setStyle: Style ".concat(styleName, " not found, setting style ").concat(this.styles[0].name));
+        debugLogger(DebugType.Log, "WMLayer::setStyle: Style ".concat(styleName, " not found, setting style ").concat(this.styles[0].name));
         this.currentStyle = this.styles[0].name;
         this.legendGraphic = this.styles[0].legendURL;
       }
@@ -31631,13 +32263,9 @@ var WMLayer = /*#__PURE__*/function () {
   }, {
     key: "getDimension",
     value: function getDimension(name) {
-      var dimIndex = this.dimensions.findIndex(function (dim) {
+      return this.dimensions.find(function (dim) {
         return dim.name === name;
       });
-      if (dimIndex < 0) {
-        return undefined;
-      }
-      return this.dimensions[dimIndex];
     }
     /**
      * Returns the Coordinate Reference Systems for this layer
@@ -31888,12 +32516,6 @@ var defaultReduxLayerRadarColor = {
   enabled: true,
   layerType: LayerType.mapLayer,
   dimensions: [],
-  styles: [{
-    title: 'rainbow/nearest',
-    name: 'rainbow/nearest',
-    legendURL: 'https://geoservices.knmi.nl/wms?dataset=RADAR&SERVICE=WMS&&version=1.1.1&service=WMS&request=GetLegendGraphic&layer=RAD_NL25_PCP_CM&format=image/png&STYLE=precip-rainbow/nearest',
-    "abstract": 'No abstract available'
-  }],
   id: generateLayerId()
 };
 var multiDimensionLayer = {
@@ -32931,4 +33553,4 @@ var getCapabilities = /*#__PURE__*/Object.freeze({
   getLayersFlattenedFromService: getLayersFlattenedFromService
 });
 
-export { DateInterval, DebugType, EPSGCode, I18n, LayerType, ParseISOTimeRangeDuration, URLDecode, URLEncode, WMBBOX, WMDateOutSideRange, WMDateTooEarlyString, WMDateTooLateString, WMEmptyLayerName, WMEmptyLayerTitle, WMGetServiceFromStore, WMImage, WMImageEventType, WMJSDimension, WMJSMap, WMJSService, WMJScheckURL, WMLayer, WMTimer, clearImageCache, debug, generateLayerId, generateMapId, generateTimesliderId, getCapabilities, getLegendGraphicURLForLayer, getMapImageStore, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, isDefined, legendImageStore, mockGetCapabilities, parseISO8601DateToDate, parseISO8601IntervalToDateInterval, registerWMJSMap, registerWMLayer, tilesettings, toArray, unRegisterAllWMJSLayersAndMaps, unRegisterWMJSLayer, unRegisterWMJSMap, testSettings as webmapTestSettings, utils as webmapUtils };
+export { DateInterval, DebugType, EPSGCode, I18n, LayerType, ParseISOTimeRangeDuration, URLDecode, URLEncode, WMBBOX, WMDateOutSideRange, WMDateTooEarlyString, WMDateTooLateString, WMEmptyLayerName, WMEmptyLayerTitle, WMGetServiceFromStore, WMImage, WMImageEventType, WMJSDimension, WMJSMap, WMJSService, WMJScheckURL, WMLayer, WMTimer, clearImageCache, debugLogger, generateLayerId, generateMapId, generateTimesliderId, getCapabilities, getLegendGraphicURLForLayer, getMapImageStore, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, isDefined, legendImageStore, mockGetCapabilities, parseISO8601DateToDate, parseISO8601IntervalToDateInterval, registerWMJSMap, registerWMLayer, tilesettings, toArray, unRegisterAllWMJSLayersAndMaps, unRegisterWMJSLayer, unRegisterWMJSMap, testSettings as webmapTestSettings, utils as webmapUtils };