@opengeoweb/webmap 6.0.4 → 6.1.0

package/index.esm.js

@@ -17870,14 +17870,14 @@ var getCorrectWMSDimName = function getCorrectWMSDimName(origDimName) {
 /* Returns all dimensions with its current values as URL */
 var getMapDimURL = function getMapDimURL(layer) {
   var request = '';
-  for (var j = 0; j < layer.dimensions.length; j += 1) {
-    var currentValue = layer.dimensions[j].getValue();
-    request += "&".concat(getCorrectWMSDimName(layer.dimensions[j].name));
+  layer.dimensions.forEach(function (dimension) {
+    var currentValue = dimension.getValue();
+    request += "&".concat(getCorrectWMSDimName(dimension.name));
     request += "=".concat(URLEncode(currentValue));
     if (currentValue === WMDateOutSideRange || currentValue === WMDateTooEarlyString || currentValue === WMDateTooLateString) {
       throw new Error(WMDateOutSideRange);
     }
-  }
+  });
   return request;
 };
 /**
@@ -18262,6 +18262,11 @@ var WMImage = /*#__PURE__*/function () {
       }
       return this._isLoaded;
     }
+  }, {
+    key: "isLoadedWithoutErrors",
+    value: function isLoadedWithoutErrors() {
+      return this.isLoaded() && !this.hasError();
+    }
     /**
      * Returns true if the image is still loading
      */
@@ -18393,6 +18398,7 @@ var WMImage = /*#__PURE__*/function () {
   }, {
     key: "_load",
     value: function _load() {
+      var _a;
       this._hasError = false;
       if (this._isLoaded === true) {
         this._loadEvent(false);
@@ -18418,7 +18424,7 @@ var WMImage = /*#__PURE__*/function () {
         this._loadEvent(false);
         return;
       }
-      if (this.headers && this.headers.length > 0) {
+      if ((_a = this.headers) === null || _a === void 0 ? void 0 : _a.length) {
         /* Get an image which needs headers */
         this._getImageWithHeaders(this.srcToLoad, this.headers);
       } else if (this.randomize) {
@@ -18430,19 +18436,19 @@ var WMImage = /*#__PURE__*/function () {
         newSrc += "random=".concat(Math.random());
         this.getElement().src = newSrc;
       } else {
+        // setting src loads the image and the 'load' callback is called when its finished loading
         this.getElement().src = this.srcToLoad;
       }
     }
   }, {
     key: "_loadEvent",
     value: function _loadEvent(hasError) {
+      var _a;
       this._hasError = hasError;
       this._isLoading = false;
       this._isLoaded = true;
       this._srcLoaded = this.srcToLoad;
-      if (isDefined(this.loadEventCallback)) {
-        this.loadEventCallback(this);
-      }
+      (_a = this.loadEventCallback) === null || _a === void 0 ? void 0 : _a.call(this, this);
     }
     /**
      * Get the width of the current image
@@ -18954,20 +18960,19 @@ var makeQueryStringWithoutGeoInfo = function makeQueryStringWithoutGeoInfo(image
  * @param newLayer A canvaslayer object to add.
  */
 var addAlternativeImage = function addAlternativeImage(newLayer) {
+  var _a;
   /* Get a signature for images which belong to each other */
   var sigImageUrl = makeQueryStringWithoutGeoInfo(newLayer.imageSource);
   /* Make an entry for these images in the sharedImagesList */
-  if (!sharedImagesList[sigImageUrl]) {
-    sharedImagesList[sigImageUrl] = [];
-  }
+  (_a = sharedImagesList[sigImageUrl]) !== null && _a !== void 0 ? _a : sharedImagesList[sigImageUrl] = [];
   /* Get the images for this signature */
   var imagesForUrl = sharedImagesList[sigImageUrl];
   /* Check if the image is not already in the sharedImagesList */
-  var imageIsAlreadyIndex = imagesForUrl.findIndex(function (i) {
+  var imageIsAlreadyIndex = imagesForUrl.find(function (i) {
     return i.imageSource === newLayer.imageSource;
   });
   /* It is not in the list, so add it */
-  if (imageIsAlreadyIndex === -1) {
+  if (!imageIsAlreadyIndex) {
     /* Ensure that the oldest images are removed, keep a maximum of 10 images per signature url */
     while (sharedImagesList[sigImageUrl].length >= 10) {
       sharedImagesList[sigImageUrl].pop();
@@ -19019,18 +19024,14 @@ var getAlternativeImage = function getAlternativeImage(imageUrl, imageStore,
 _bbox) {
   var sigImageUrl = makeQueryStringWithoutGeoInfo(imageUrl);
   var imagesForUrl = sharedImagesList[sigImageUrl];
-  if (imagesForUrl && imagesForUrl.length > 0) {
+  if (imagesForUrl === null || imagesForUrl === void 0 ? void 0 : imagesForUrl.length) {
     var sortedImagesForUrl = sortByImageDate(imagesForUrl);
-    /* Find the first image in this list which is also loaded and has no error */
-    var index = sortedImagesForUrl.findIndex(function (altImage) {
+    return sortedImagesForUrl.find(function (altImage) {
       var cachedImage = imageStore.getImageForSrc(altImage.imageSource);
-      return cachedImage && cachedImage.isLoaded() && !cachedImage.isLoading() && !cachedImage.hasError();
+      return cachedImage === null || cachedImage === void 0 ? void 0 : cachedImage.isLoadedWithoutErrors();
     });
-    if (index !== -1) {
-      return sortedImagesForUrl[index];
-    }
   }
-  return null;
+  return undefined;
 };
 var WMCanvasBuffer = /*#__PURE__*/function () {
   function WMCanvasBuffer(webmapJSCallback, _imageStore, w, h, internalCallbacks) {
@@ -19148,6 +19149,8 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
   }, {
     key: "display",
     value: function display() {
+      var _this2 = this;
+      var _a, _b, _c, _d, _e, _f;
       this._ctx.globalAlpha = 1;
       this._ctx.fillStyle = 'white';
       this._ctx.beginPath();
@@ -19159,47 +19162,37 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
       }
       /* Reset errors */
       this._errorList.length = 0;
-      for (var j = 0; j < this.layers.length; j += 1) {
-        var imageToDisplay = this._imageStore.getImageForSrc(this.layers[j].imageSource);
-        if (imageToDisplay && imageToDisplay.isLoaded() && !imageToDisplay.isLoading() && !imageToDisplay.hasError()) {
+      this.layers.forEach(function (layer) {
+        var imageToDisplay = _this2._imageStore.getImageForSrc(layer.imageSource);
+        if (imageToDisplay === null || imageToDisplay === void 0 ? void 0 : imageToDisplay.isLoadedWithoutErrors()) {
           // Draw this image, it is loaded and OK
-          this._drawImage(this.layers[j]);
-        } else {
-          /**
-           * Check if this image has an error.
-           * If the error has occured some time ago, and the amount of retries is low, just retry to load the image.
-           */
-          if (imageToDisplay.hasError()) {
-            if (imageToDisplay.isLoading() === false && imageToDisplay.getLastErrorMSecondsAgo() > 5000) {
-              if (imageToDisplay.getNumFailedAttempts() < 10) {
-                imageToDisplay.forceReload();
-              }
-            }
-          }
-          /* Find closest alternative and display instead image */
-          var im = getAlternativeImage(this.layers[j].imageSource, this._imageStore, this._currentnewbbox);
-          if (im) {
-            this._drawImage(im);
-          }
+          _this2._drawImage(layer);
+          return;
         }
-      }
+        /**
+         * 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) {
+          imageToDisplay.forceReload();
+        }
+        /* Find closest alternative and display instead image */
+        var im = getAlternativeImage(layer.imageSource, _this2._imageStore, _this2._currentnewbbox);
+        if (im) {
+          _this2._drawImage(im);
+        }
+      });
       this._ctx.globalAlpha = 1;
       /* Display errors */
       if (this._errorList.length > 0) {
         this._webmapJSCallback.triggerEvent('canvasonerror', this._errorList);
-        if (this._internalCallbacks && this._internalCallbacks.canvasonerror) {
-          this._internalCallbacks.canvasonerror(this._errorList);
-        }
+        (_b = (_a = this._internalCallbacks) === null || _a === void 0 ? void 0 : _a.canvasonerror) === null || _b === void 0 ? void 0 : _b.call(_a, this._errorList);
       }
       this._webmapJSCallback.triggerEvent('beforecanvasdisplay', this._ctx);
-      if (this._internalCallbacks && this._internalCallbacks.beforecanvasdisplay) {
-        this._internalCallbacks.beforecanvasdisplay(this._ctx);
-      }
+      (_d = (_c = this._internalCallbacks) === null || _c === void 0 ? void 0 : _c.beforecanvasdisplay) === null || _d === void 0 ? void 0 : _d.call(_c, this._ctx);
       this.canvas.style.display = 'inline-block';
       this._webmapJSCallback.triggerEvent('aftercanvasdisplay', this._ctx);
-      if (this._internalCallbacks && this._internalCallbacks.aftercanvasdisplay) {
-        this._internalCallbacks.aftercanvasdisplay(this._ctx);
-      }
+      (_f = (_e = this._internalCallbacks) === null || _e === void 0 ? void 0 : _e.aftercanvasdisplay) === null || _f === void 0 ? void 0 : _f.call(_e, this._ctx);
     }
   }, {
     key: "finishedLoading",
@@ -19250,12 +19243,13 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
   }, {
     key: "setSrc",
     value: function setSrc(layerIndex, imageSource, linkedInfo, opacity, bbox) {
+      var _a, _b;
       if (!isDefined(imageSource)) {
         debug(DebugType.Warning);
         return;
       }
       /* HTTP Headers for the image, necessary in case of certain authentication forms */
-      var headers = linkedInfo && linkedInfo.layer && linkedInfo.layer.headers ? linkedInfo.layer.headers : [];
+      var headers = (_b = (_a = linkedInfo === null || linkedInfo === void 0 ? void 0 : linkedInfo.layer) === null || _a === void 0 ? void 0 : _a.headers) !== null && _b !== void 0 ? _b : [];
       /* Make a new CanvasLayer */
       var newLayer = {
         imageSource: imageSource,
@@ -19318,24 +19312,24 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var prefetch = function prefetch(requests) {
   var prefetching = [];
-  for (var j = 0; j < requests.length; j += 1) {
-    var image = getMapImageStore.getImage(requests[j].url, {
-      headers: requests[j].headers
+  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();
     }
-  }
+  });
   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._imageStore = getMapImageStore;
     this._divAnimationInfo = document.createElement('div');
     _map.currentAnimationStep = 0;
     _map.animationList = undefined;
@@ -19362,10 +19356,10 @@ var WMJSAnimate = /*#__PURE__*/function () {
     /* Bind */
     this._animate = this._animate.bind(this);
     this._animateLoop = this._animateLoop.bind(this);
-    this.checkAnimation = this.checkAnimation.bind(this);
+    this.prefetchImagesForAnimationSteps = this.prefetchImagesForAnimationSteps.bind(this);
     this.stopAnimating = this.stopAnimating.bind(this);
     _map.stopAnimating = this.stopAnimating;
-    _map.checkAnimation = this.checkAnimation;
+    _map.checkAnimation = this.prefetchImagesForAnimationSteps;
   }
   _createClass(WMJSAnimate, [{
     key: "isCurrentAnimationTimeCloseToWallClockTime",
@@ -19409,67 +19403,70 @@ var WMJSAnimate = /*#__PURE__*/function () {
       this._map.setDimension(animationStep.name, animationStep.value, false);
       this._callBack.triggerEvent('ondimchange');
       this._callBack.triggerEvent('onnextanimationstep', this._map);
-      this._map._pdraw();
+      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 === this._map.animationList.length - 1) {
+      } 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.checkAnimation();
-      if (this._map.mouseHoverAnimationBox === false) {
-        this._animate();
-        var nextStep = this._map.currentAnimationStep + 1;
-        if (nextStep >= this._map.animationList.length) {
-          nextStep = 0;
-        }
-        var continueAnimation = false;
-        var numReady = 0;
-        var animationStep = this._map.animationList[nextStep];
-        this._map.setDimension(animationStep.name, animationStep.value, false);
-        this._map.animationList[nextStep].requests = this._map.getWMSRequests();
-        animationStep = this._map.animationList[this._map.currentAnimationStep];
-        this._map.setDimension(animationStep.name, animationStep.value, false);
-        for (var i = 0; i < this._map.animationList[nextStep].requests.length; i += 1) {
-          var url = this._map.animationList[nextStep].requests[i].url;
-          var image = getMapImageStore.getImageForSrc(url);
-          /* Get a loaded image which has no error */
-          if (image && image.isLoaded() && !image.isLoading() && !image.hasError()) {
-            numReady += 1;
-          } else {
-            /* Check if a similar image is available instead, then we can continue with the smoother animation */
-            var im = getAlternativeImage(url, getMapImageStore, this._map.getDrawBBOX());
-            if (im) {
-              numReady += 1;
-            } else if (!(image && image.isLoading())) {
-              /* No alternatives and current image is not loading, so lets continue the animation */
-              numReady += 1;
-            }
-          }
+      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;
         }
-        if (numReady >= this._map.animationList[nextStep].requests.length) {
-          continueAnimation = true;
+        /* 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;
         }
-        if (continueAnimation) {
-          this._map.currentAnimationStep = nextStep;
+        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: "checkAnimation",
-    value: function checkAnimation() {
+    key: "prefetchImagesForAnimationSteps",
+    value: function prefetchImagesForAnimationSteps() {
       if (this._map.isAnimating === false) {
         this._map.isAnimatingLoopRunning = false;
         return;
@@ -19477,37 +19474,32 @@ var WMJSAnimate = /*#__PURE__*/function () {
       if (!this._map.animationTimer) {
         this._map.animationTimer = new WMTimer();
       }
-      if (this._map.mouseHoverAnimationBox === false) {
-        var maxSimultaneousLoads = 4;
-        var getNumImagesLoading = this._imageStore.getNumImagesLoading();
-        if (getNumImagesLoading < maxSimultaneousLoads) {
-          var numberPreCacheSteps = this._map.animationList.length;
-          if (this._map.animationList.length > 0) {
-            for (var j = 0; j < numberPreCacheSteps; j += 1) {
-              var index = j + this._map.currentAnimationStep;
-              while (index < 0) {
-                index += this._map.animationList.length;
-              }
-              while (index >= this._map.animationList.length) {
-                index -= this._map.animationList.length;
-              }
-              if (index < 0) {
-                index = 0;
-              }
-              if (index >= 0) {
-                var animationStep = this._map.animationList[index];
-                this._map.setDimension(animationStep.name, animationStep.value, false);
-                this._map.animationList[index].requests = this._map.getWMSRequests();
-                animationStep = this._map.animationList[this._map.currentAnimationStep];
-                this._map.setDimension(animationStep.name, animationStep.value, false);
-                this._map.animationList[index].imagesInPrefetch = prefetch(this._map.animationList[index].requests);
-                getNumImagesLoading = this._imageStore.getNumImagesLoading();
-                if (getNumImagesLoading > maxSimultaneousLoads - 1) {
-                  break;
-                }
-              }
-            }
+      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) {
@@ -19528,6 +19520,18 @@ var WMJSAnimate = /*#__PURE__*/function () {
       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;
 }();
@@ -19818,10 +19822,6 @@ var getLegendGraphicURLForLayer = function getLegendGraphicURLForLayer(layer) {
     if (!legendURL) {
       return undefined;
     }
-    // For THREDDS WMS we need to add layers=
-    if (!legendURL.includes('&layers=')) {
-      legendURL += "&layers=".concat(URLEncode(layer.name), "&");
-    }
     try {
       if (layer.legendIsDimensionDependent === true) {
         legendURL += "".concat(getMapDimURL(layer), "&");
@@ -26973,11 +26973,9 @@ var getBBOXandProjString = function getBBOXandProjString(map, layer) {
 };
 // Build a valid WMS request for a certain layer
 var buildWMSGetMapRequest = function buildWMSGetMapRequest(map, layer) {
-  if (!isDefined(layer.name)) {
-    return {
-      url: undefined,
-      headers: null
-    };
+  var _a;
+  if (!isDefined(layer.name) || layer.name.length < 1) {
+    return undefined;
   }
   var _map$getProjection2 = map.getProjection(),
     srs = _map$getProjection2.srs;
@@ -26985,15 +26983,7 @@ var buildWMSGetMapRequest = function buildWMSGetMapRequest(map, layer) {
   var _map$getSize = map.getSize(),
     width = _map$getSize.width,
     height = _map$getSize.height;
-  if (!layer.format) {
-    layer.format = 'image/png';
-  }
-  if (layer.name.length < 1) {
-    return {
-      url: undefined,
-      headers: null
-    };
-  }
+  (_a = layer.format) !== null && _a !== void 0 ? _a : layer.format = 'image/png';
   // GetFeatureInfo timeseries in the mapview
   if (srs === 'GFI:TIME_ELEVATION') {
     var x = 707;
@@ -27059,10 +27049,7 @@ var buildWMSGetMapRequest = function buildWMSGetMapRequest(map, layer) {
   try {
     request += getMapDimURL(layer);
   } catch (e) {
-    return {
-      url: null,
-      headers: null
-    };
+    return undefined;
   }
   // Handle WMS extensions
   request += layer.wmsextensions.url;
@@ -27377,7 +27364,7 @@ var WMJSMap = /*#__PURE__*/function () {
     this._onResumeSuspendCallbackFunction = this._onResumeSuspendCallbackFunction.bind(this);
     this._animFrameRedraw = this._animFrameRedraw.bind(this);
     this.getWMSRequests = this.getWMSRequests.bind(this);
-    this._pdraw = this._pdraw.bind(this);
+    this.addLayersToCanvasAndDisplayThem = this.addLayersToCanvasAndDisplayThem.bind(this);
     this._updateBoundingBox = this._updateBoundingBox.bind(this);
     this.redrawBuffer = this.redrawBuffer.bind(this);
     this.addBaseLayers = this.addBaseLayers.bind(this);
@@ -28451,7 +28438,7 @@ var WMJSMap = /*#__PURE__*/function () {
         debug(DebugType.Log);
         return;
       }
-      this._animFrameRedraw();
+      this._draw(this._animationList);
     }
     /**
      * API Function called to draw the layers, fires getmap request and shows the layers on the screen
@@ -28475,46 +28462,41 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "_drawAndLoad",
     value: function _drawAndLoad(animationList) {
+      var _this7 = this;
       if (this.width < 4 || this.height < 4) {
         this._drawReady();
         return;
       }
       this.callBack.triggerEvent('beforedraw');
-      if (this.isAnimating === false) {
-        if (animationList !== undefined) {
-          if (_typeof$1(animationList) === 'object') {
-            if (animationList.length > 0) {
-              // Ensure the time dimension has been loaded for the map before starting animation
-              var timeDim = this.getDimension('time');
-              if (!timeDim) {
-                return;
-              }
-              var selectedTime = timeDim.currentValue;
-              this.isAnimating = true;
-              this.callBack.triggerEvent('onstartanimation', this);
-              this.currentAnimationStep = this.initialAnimationStep;
-              this.animationList = [];
-              this.mouseHoverAnimationBox = false;
-              for (var j = 0; j < animationList.length; j += 1) {
-                if (selectedTime && animationList[j].value === selectedTime) {
-                  this.currentAnimationStep = j;
-                }
-                var animationListObject = {
-                  name: animationList[j].name,
-                  value: animationList[j].value,
-                  requests: []
-                };
-                this.setDimension(animationList[j].name, animationList[j].value, false);
-                animationListObject.requests = this.getWMSRequests();
-                this.animationList.push(animationListObject);
-              }
-              this.setDimension(this.animationList[this.currentAnimationStep].name, this.animationList[this.currentAnimationStep].value, false);
-              this.wmAnimate.checkAnimation();
-            }
-          }
+      if (this.isAnimating === false && animationList !== undefined && _typeof$1(animationList) === 'object' && animationList.length > 0) {
+        // Ensure the time dimension has been loaded for the map before starting animation
+        var timeDim = this.getDimension('time');
+        if (!timeDim) {
+          return;
         }
+        var selectedTime = timeDim.currentValue;
+        this.isAnimating = true;
+        this.callBack.triggerEvent('onstartanimation', this);
+        this.currentAnimationStep = this.initialAnimationStep;
+        this.animationList = [];
+        this.mouseHoverAnimationBox = false;
+        animationList.forEach(function (animationStepWithoutRequests, j) {
+          if (selectedTime && animationStepWithoutRequests.value === selectedTime) {
+            _this7.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);
+        });
+        this.setDimension(this.animationList[this.currentAnimationStep].name, this.animationList[this.currentAnimationStep].value, false);
+        this.wmAnimate.prefetchImagesForAnimationSteps();
       }
-      this._pdraw();
+      this.addLayersToCanvasAndDisplayThem();
     }
   }, {
     key: "_onLayersReadyCallbackFunction",
@@ -28535,70 +28517,65 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "getWMSRequests",
     value: function getWMSRequests() {
+      var _this8 = this;
       var requests = [];
-      var n = this.getNumLayers();
-      for (var j = 0; j < n; j += 1) {
-        if (this.layers[j].service && this.layers[j].enabled) {
-          var request = buildWMSGetMapRequest(this, this.layers[j]);
-          if (request.url) {
+      this.layers.forEach(function (layer) {
+        if (layer.service && layer.enabled) {
+          var request = buildWMSGetMapRequest(_this8, layer);
+          if (request === null || request === void 0 ? void 0 : request.url) {
             requests.push(request);
           }
         }
-      }
+      });
       return requests;
     }
   }, {
-    key: "_pdraw",
-    value: function _pdraw() {
-      var _this7 = this;
-      var loadLayers = function loadLayers() {
-        debug(DebugType.Log);
-        _this7.divBuffer.reset();
-        var currentLayerIndex = 0;
-        _this7.numBaseLayers = 0;
-        if (_this7.baseLayers) {
-          for (var l = 0; l < _this7.baseLayers.length; l += 1) {
-            if (_this7.baseLayers[l].enabled && _this7.baseLayers[l].keepOnTop === false && _this7.baseLayers[l].type && _this7.baseLayers[l].type !== 'twms') {
-              _this7.numBaseLayers += 1;
-              var requestURL = buildWMSGetMapRequest(_this7, _this7.baseLayers[l]).url;
-              if (requestURL) {
-                _this7.divBuffer.setSrc(currentLayerIndex, requestURL, {
-                  layer: _this7.baseLayers[l]
-                }, _this7.baseLayers[l].opacity, _this7.getDrawBBOX());
-                currentLayerIndex += 1;
-              }
-            }
+    key: "addLayersToCanvasAndDisplayThem",
+    value: function addLayersToCanvasAndDisplayThem() {
+      var _this9 = this;
+      var _a, _b, _c;
+      debug(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;
+          if (requestURL) {
+            _this9.divBuffer.setSrc(currentLayerIndex, requestURL, {
+              layer: baseLayer
+            }, baseLayer.opacity, _this9.getDrawBBOX());
+            currentLayerIndex += 1;
           }
         }
-        /* Loop through all layers */
-        for (var j = 0; j < _this7.getNumLayers(); j += 1) {
-          if (_this7.layers[j].service && _this7.layers[j].enabled && _this7.layers[j].isConfigured) {
-            var _requestURL = buildWMSGetMapRequest(_this7, _this7.layers[j]).url;
-            if (_requestURL) {
-              _this7.divBuffer.setSrc(currentLayerIndex, _requestURL, {
-                layer: _this7.layers[j]
-              }, _this7.layers[j].opacity, _this7.getDrawBBOX());
-              currentLayerIndex += 1;
-            }
+      });
+      /* 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;
+          if (requestURL) {
+            _this9.divBuffer.setSrc(currentLayerIndex, requestURL, {
+              layer: layer
+            }, layer.opacity, _this9.getDrawBBOX());
+            currentLayerIndex += 1;
           }
         }
-        if (_this7.baseLayers) {
-          for (var _l = 0; _l < _this7.baseLayers.length; _l += 1) {
-            if (_this7.baseLayers[_l].enabled) {
-              if (_this7.baseLayers[_l].keepOnTop === true) {
-                var _requestURL2 = buildWMSGetMapRequest(_this7, _this7.baseLayers[_l]).url;
-                if (_requestURL2) {
-                  _this7.divBuffer.setSrc(currentLayerIndex, _requestURL2, {
-                    layer: _this7.baseLayers[_l]
-                  }, _this7.baseLayers[_l].opacity, _this7.getDrawBBOX());
-                  currentLayerIndex += 1;
-                }
-              }
-            }
+      });
+      (_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;
+          if (requestURL) {
+            _this9.divBuffer.setSrc(currentLayerIndex, requestURL, {
+              layer: baseLayer
+            }, baseLayer.opacity, _this9.getDrawBBOX());
+            currentLayerIndex += 1;
           }
         }
-      };
-      loadLayers();
+      });
       this.divBuffer.display();
       this.callBack.triggerEvent('onmapready', this);
     }
@@ -28788,27 +28765,24 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "_buildLayerDims",
     value: function _buildLayerDims() {
+      var _this10 = this;
       if (this.buildLayerDimsBusy === true) {
         return;
       }
-      for (var k = 0; k < this.mapdimensions.length; k += 1) {
-        var mapDim = this.mapdimensions[k];
-        for (var j = 0; j < this.layers.length; j += 1) {
-          for (var i = 0; i < this.layers[j].dimensions.length; i += 1) {
-            var layerDim = this.layers[j].dimensions[i];
-            if (layerDim.linked === true) {
-              if (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);
-                }
-                this.buildLayerDimsBusy = true;
-                layerDim.setClosestValue(mapDim.currentValue);
-                this.buildLayerDimsBusy = false;
+      this.mapdimensions.forEach(function (mapDim) {
+        _this10.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;
+              layerDim.setClosestValue(mapDim.currentValue);
+              _this10.buildLayerDimsBusy = false;
             }
-          }
-        }
-      }
+          });
+        });
+      });
     }
   }, {
     key: "getMapMode",
@@ -29520,7 +29494,7 @@ var WMJSMap = /*#__PURE__*/function () {
   }, {
     key: "zoomTo",
     value: function zoomTo(_newbbox) {
-      var _this8 = this;
+      var _this11 = this;
       debug(DebugType.Log);
       var setOrigBox = false;
       var newbbox = new WMBBOX(_newbbox);
@@ -29561,14 +29535,14 @@ var WMJSMap = /*#__PURE__*/function () {
       this._updateBoundingBox(this.bbox);
       this.drawnBBOX.setBBOX(this.bbox);
       var resetMapPinAndDialogs = function resetMapPinAndDialogs() {
-        for (var j = 0; j < _this8.gfiDialogList.length; j += 1) {
-          var newpos = _this8.getPixelCoordFromGeoCoord({
-            x: _this8.gfiDialogList[j].geoPosX,
-            y: _this8.gfiDialogList[j].geoPosY
+        for (var j = 0; j < _this11.gfiDialogList.length; j += 1) {
+          var newpos = _this11.getPixelCoordFromGeoCoord({
+            x: _this11.gfiDialogList[j].geoPosX,
+            y: _this11.gfiDialogList[j].geoPosY
           });
-          if (_this8.gfiDialogList[j].hasBeenDragged === false) {
-            if (_this8.gfiDialogList[j].moveToMouseCursor === true) {
-              _this8.gfiDialogList[j].setXY(_this8.gfiDialogList[j].origX + newpos.x, _this8.gfiDialogList[j].origY + newpos.y);
+          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);
             }
           }
         }
@@ -29721,10 +29695,13 @@ var WMJSMap = /*#__PURE__*/function () {
     // listeners:
   }, {
     key: "addListener",
-    value: function addListener(name, f) {
+    value: function addListener(name,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    f) {
       var keep = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       return this.callBack.addToCallback(name, f, keep);
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   }, {
     key: "removeListener",
     value: function removeListener(name, f) {
@@ -29948,6 +29925,30 @@ var WMJSMap = /*#__PURE__*/function () {
   return WMJSMap;
 }();
 
+/* *
+ * 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)
+ * */
+/**
+ * Global service store for re-use of services
+ */
+var WMServiceStore = [];
+var WMServiceStoreXML2JSONRequest = {
+  proxy: 'Check WMJSGlobals WMJSServiceStoreXML2JSONRequest'
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -30351,30 +30352,6 @@ var I18n = {
   }
 };
 
-/* *
- * 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)
- * */
-/**
- * Global service store for re-use of services
- */
-var WMServiceStore = [];
-var WMServiceStoreXML2JSONRequest = {
-  proxy: 'Check WMJSGlobals WMJSServiceStoreXML2JSONRequest'
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -30918,6 +30895,7 @@ var LayerType;
   LayerType["mapLayer"] = "mapLayer";
   LayerType["baseLayer"] = "baseLayer";
   LayerType["overLayer"] = "overLayer";
+  LayerType["featureLayer"] = "featureLayer";
 })(LayerType || (LayerType = {}));
 /**
  * Helper function to figure out the dimensions from the WMS layer object (From WMS GetCapabilities). Parses both WMS 1.1.1 and WMS 1.3.0.
@@ -31597,9 +31575,7 @@ var WMLayer = /*#__PURE__*/function () {
         this.legendGraphic = this.styles[0].legendURL;
       }
       /* Check if this legenURL has already a Layer Property set. If so set the Layer to the name of this layer */
-      this.legendGraphic = getUriWithParam(this.legendGraphic, {
-        layer: this.name
-      });
+      this.legendGraphic = getUriWithParam(this.legendGraphic);
     }
   }, {
     key: "getStyles",
@@ -31746,6 +31722,269 @@ var WMLayer = /*#__PURE__*/function () {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
+var generatedLayerIds = 0;
+var generateLayerId = function generateLayerId() {
+  generatedLayerIds += 1;
+  return "layerid_".concat(generatedLayerIds);
+};
+var generatedMapIds = 0;
+var generateMapId = function generateMapId() {
+  generatedMapIds += 1;
+  return "mapid_".concat(generatedMapIds);
+};
+var generatedTimesliderIds = 0;
+var generateTimesliderId = function generateTimesliderId() {
+  generatedTimesliderIds += 1;
+  return "timesliderid_".concat(generatedTimesliderIds);
+};
+/**
+ * Map for registering wmlayers with their id's
+ */
+var registeredWMLayersForReactLayerId = {};
+/**
+ * Registers a WMJSLayer in a lookuptable with a layerId
+ * @param {WMLayer} wmLayer
+ * @param {string} layerId
+ */
+var registerWMLayer = function registerWMLayer(wmLayer, layerId) {
+  registeredWMLayersForReactLayerId[layerId] = wmLayer;
+};
+/**
+ * Get the WMLayer from the lookuptable with layerId
+ * @param {string} layerId
+ */
+var getWMLayerById = function getWMLayerById(layerId) {
+  return registeredWMLayersForReactLayerId[layerId];
+};
+var unRegisterWMJSLayer = function unRegisterWMJSLayer(layerId) {
+  var layer = registeredWMLayersForReactLayerId[layerId];
+  if (layer) {
+    delete registeredWMLayersForReactLayerId[layerId];
+  }
+};
+var unRegisterAllWMJSLayersAndMaps = function unRegisterAllWMJSLayersAndMaps() {
+  var allLayerIds = Object.keys(registeredWMLayersForReactLayerId);
+  allLayerIds.forEach(function (layerId) {
+    unRegisterWMJSLayer(layerId);
+  });
+  var allMapIds = Object.keys(registeredWMMapForReactMapId);
+  allMapIds.forEach(function (mapId) {
+    unRegisterWMJSMap(mapId);
+  });
+};
+/**
+ * Map for registering wmlayers with their id's
+ */
+var registeredWMMapForReactMapId = {};
+/**
+ * Registers a WMJSMap in a lookuptable with a wmjsMapId
+ * @param {WMJSMap} wmjsMap
+ * @param {string} wmjsMapId
+ */
+var registerWMJSMap = function registerWMJSMap(wmjsMap, wmjsMapId) {
+  if (registeredWMMapForReactMapId[wmjsMapId]) {
+    console.warn("Map with id ".concat(wmjsMapId, " already made"));
+  }
+  registeredWMMapForReactMapId[wmjsMapId] = wmjsMap;
+};
+var unRegisterWMJSMap = function unRegisterWMJSMap(wmjsMapId) {
+  var wmjsMap = registeredWMMapForReactMapId[wmjsMapId];
+  if (wmjsMap) {
+    wmjsMap.getListener().suspendEvents();
+    try {
+      wmjsMap.stopAnimating && wmjsMap.stopAnimating();
+    } catch (e) {
+      console.warn(e);
+    }
+    Object.keys(registeredWMLayersForReactLayerId).forEach(function (layerId) {
+      var wmLayer = getWMLayerById(layerId);
+      if (wmLayer.parentMap === wmjsMap) {
+        unRegisterWMJSLayer(layerId);
+      }
+    });
+    wmjsMap.destroy();
+    delete registeredWMMapForReactMapId[wmjsMapId];
+  }
+};
+/**
+ * Get the wmjsMap from the lookuptable with wmjsMapId
+ * @param {string} wmjsMapId
+ */
+var getWMJSMapById = function getWMJSMapById(wmjsMapId) {
+  return registeredWMMapForReactMapId[wmjsMapId];
+};
+/**
+ * Returns the WMJSDimension object for given layerId and dimension name
+ * @param layerId The layerId
+ * @param dimensionName The dimension to lookup
+ */
+var getWMJSDimensionForLayerAndDimension = function getWMJSDimensionForLayerAndDimension(layerId, dimensionName) {
+  var wmLayer = getWMLayerById(layerId);
+  if (!wmLayer || !dimensionName) {
+    return undefined;
+  }
+  var wmjsDimension = wmLayer.getDimension(dimensionName);
+  if (!wmjsDimension) {
+    return undefined;
+  }
+  return wmjsDimension;
+};
+/**
+ * Gets the WMJSTimeDimension for given activeLayerId and dimensions list
+ * @param layerId: The layer id to search the WMJSDimension for
+ * @return: The WMJSDimension if found, otherwise null
+ */
+var getWMJSTimeDimensionForLayerId = function getWMJSTimeDimensionForLayerId(layerId) {
+  var wmLayer = getWMLayerById(layerId);
+  if (!wmLayer) {
+    return null;
+  }
+  return wmLayer.getDimension('time');
+};
+
+var utils = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  generateLayerId: generateLayerId,
+  generateMapId: generateMapId,
+  generateTimesliderId: generateTimesliderId,
+  registerWMLayer: registerWMLayer,
+  getWMLayerById: getWMLayerById,
+  unRegisterWMJSLayer: unRegisterWMJSLayer,
+  unRegisterAllWMJSLayersAndMaps: unRegisterAllWMJSLayersAndMaps,
+  registerWMJSMap: registerWMJSMap,
+  unRegisterWMJSMap: unRegisterWMJSMap,
+  getWMJSMapById: getWMJSMapById,
+  getWMJSDimensionForLayerAndDimension: getWMJSDimensionForLayerAndDimension,
+  getWMJSTimeDimensionForLayerId: getWMJSTimeDimensionForLayerId
+});
+
+/* *
+ * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var multiDimensionLayer = {
+  service: 'https://testservice',
+  id: 'multiDimensionLayerMock',
+  name: 'MULTI_DIMENSION_LAYER',
+  title: 'MULTI_DIMENSION_LAYER',
+  layerType: LayerType.mapLayer,
+  enabled: true,
+  dimensions: [{
+    name: 'flight level',
+    units: 'hft',
+    currentValue: '625',
+    values: '25,325,625'
+  }, {
+    name: 'elevation',
+    units: 'meters',
+    currentValue: '9000',
+    values: '1000,5000,9000'
+  }, {
+    name: 'time',
+    units: 'ISO8601',
+    currentValue: '2020-03-13T14:40:00Z'
+  }]
+};
+var WmdefaultReduxLayerRadarKNMI = new WMLayer({
+  service: 'https://testservice',
+  name: 'RADNL_OPER_R___25PCPRR_L3_KNMI',
+  title: 'RADNL_OPER_R___25PCPRR_L3_KNMI',
+  format: 'image/png',
+  style: 'knmiradar/nearest',
+  enabled: true,
+  layerType: LayerType.mapLayer,
+  dimensions: [{
+    name: 'time',
+    units: 'ISO8601',
+    currentValue: '2020-03-13T13:30:00Z'
+  }],
+  id: 'layerid_3'
+});
+var defaultReduxLayerRadarKNMI = {
+  service: 'https://testservice',
+  name: 'RADNL_OPER_R___25PCPRR_L3_KNMI',
+  title: 'RADNL_OPER_R___25PCPRR_L3_KNMI',
+  format: 'image/png',
+  style: 'knmiradar/nearest',
+  enabled: true,
+  layerType: LayerType.mapLayer,
+  dimensions: [{
+    name: 'time',
+    units: 'ISO8601',
+    currentValue: '2020-03-13T13:30:00Z'
+  }],
+  styles: [{
+    title: 'knmiradar/nearest',
+    name: 'knmiradar/nearest',
+    legendURL: 'https://geoservices.knmi.nl/wms?dataset=RADAR&SERVICE=WMS&&version=1.1.1&service=WMS&request=GetLegendGraphic&layer=RADNL_OPER_R___25PCPRR_L3_KNMI&format=image/png&STYLE=knmiradar/nearest',
+    "abstract": 'No abstract available'
+  }, {
+    title: 'precip/nearest',
+    name: 'precip/nearest',
+    legendURL: 'https://geoservices.knmi.nl/wms?dataset=RADAR&SERVICE=WMS&&version=1.1.1&service=WMS&request=GetLegendGraphic&layer=RADNL_OPER_R___25PCPRR_L3_KNMI&format=image/png&STYLE=precip/nearest',
+    "abstract": 'No abstract available'
+  }, {
+    title: 'precip-transparent/nearest',
+    name: 'precip-transparent/nearest',
+    legendURL: 'https://geoservices.knmi.nl/wms?dataset=RADAR&SERVICE=WMS&&version=1.1.1&service=WMS&request=GetLegendGraphic&layer=RADNL_OPER_R___25PCPRR_L3_KNMI&format=image/png&STYLE=precip-transparent/nearest',
+    "abstract": 'No abstract available'
+  }, {
+    title: 'precip-gray/nearest',
+    name: 'precip-gray/nearest',
+    legendURL: 'https://geoservices.knmi.nl/wms?dataset=RADAR&SERVICE=WMS&&version=1.1.1&service=WMS&request=GetLegendGraphic&layer=RADNL_OPER_R___25PCPRR_L3_KNMI&format=image/png&STYLE=precip-gray/nearest',
+    "abstract": 'No abstract available'
+  }, {
+    title: 'precip-rainbow/nearest',
+    name: 'precip-rainbow/nearest',
+    legendURL: 'https://geoservices.knmi.nl/wms?dataset=RADAR&SERVICE=WMS&&version=1.1.1&service=WMS&request=GetLegendGraphic&layer=RADNL_OPER_R___25PCPRR_L3_KNMI&format=image/png&STYLE=precip-rainbow/nearest',
+    "abstract": 'No abstract available'
+  }, {
+    title: 'precip-blue/nearest',
+    name: 'precip-blue/nearest',
+    legendURL: 'https://geoservices.knmi.nl/wms?dataset=RADAR&SERVICE=WMS&&version=1.1.1&service=WMS&request=GetLegendGraphic&layer=RADNL_OPER_R___25PCPRR_L3_KNMI&format=image/png&STYLE=precip-blue/nearest',
+    "abstract": 'No abstract available'
+  }, {
+    title: 'precip-blue-transparent/nearest',
+    name: 'precip-blue-transparent/nearest',
+    legendURL: 'https://geoservices.knmi.nl/wms?dataset=RADAR&SERVICE=WMS&&version=1.1.1&service=WMS&request=GetLegendGraphic&layer=RADNL_OPER_R___25PCPRR_L3_KNMI&format=image/png&STYLE=precip-blue-transparent/nearest',
+    "abstract": 'No abstract available'
+  }, {
+    title: 'pseudoradar/nearest',
+    name: 'pseudoradar/nearest',
+    legendURL: 'https://geoservices.knmi.nl/wms?dataset=RADAR&SERVICE=WMS&&version=1.1.1&service=WMS&request=GetLegendGraphic&layer=RADNL_OPER_R___25PCPRR_L3_KNMI&format=image/png&STYLE=pseudoradar/nearest',
+    "abstract": 'No abstract available'
+  }],
+  id: 'layerid_2'
+};
+var makeGeoservicesRadarLayer = function makeGeoservicesRadarLayer(dimensions) {
+  return new WMLayer({
+    service: 'https://geoservices.knmi.nl/wms?dataset=RADAR&',
+    name: 'RAD_NL25_PCP_CM',
+    format: 'image/png',
+    enabled: true,
+    style: 'radar/nearest',
+    id: generateLayerId(),
+    layerType: LayerType.mapLayer,
+    title: 'RAD_NL25_PCP_CM',
+    dimensions: dimensions !== null && dimensions !== void 0 ? dimensions : [{
+      name: 'time',
+      units: 'ISO8601',
+      currentValue: '2021-04-15T00:00:00Z'
+    }]
+  });
+};
 var WmMultiDimensionLayer = new WMLayer({
   service: 'https://testservice',
   id: 'multiDimensionLayerMock',
@@ -31954,6 +32193,10 @@ var styleListForRADNL25PCPCMLayer = [{
 
 var testSettings = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  multiDimensionLayer: multiDimensionLayer,
+  WmdefaultReduxLayerRadarKNMI: WmdefaultReduxLayerRadarKNMI,
+  defaultReduxLayerRadarKNMI: defaultReduxLayerRadarKNMI,
+  makeGeoservicesRadarLayer: makeGeoservicesRadarLayer,
   WmMultiDimensionLayer: WmMultiDimensionLayer,
   layerWithoutTimeDimension: layerWithoutTimeDimension,
   WmLayerWithoutTimeDimension: WmLayerWithoutTimeDimension,
@@ -31977,6 +32220,19 @@ var testSettings = /*#__PURE__*/Object.freeze({
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
+var EPSGCode;
+(function (EPSGCode) {
+  EPSGCode["EPSG3857"] = "EPSG:3857";
+  EPSGCode["EPSG28992"] = "EPSG:28992";
+  EPSGCode["TODO_EPSG4326"] = "TODO__EPSG:4326";
+  EPSGCode["EPSG3411"] = "EPSG:3411";
+  EPSGCode["EPSG32661"] = "EPSG:32661";
+  EPSGCode["EPSG54030"] = "EPSG:54030";
+  EPSGCode["EPSG4326"] = "EPSG:4326";
+  EPSGCode["EPSG4258"] = "EPSG:4258";
+  EPSGCode["EPSG3412"] = "EPSG:3412";
+  EPSGCode["EPSG3575"] = "EPSG:3575";
+})(EPSGCode || (EPSGCode = {}));
 var tilesettings = {
   WorldMap_Light_Grey_Canvas: {
     'EPSG:3857': {
@@ -32312,158 +32568,6 @@ var tilesettings = {
   }
 };
 
-/* *
- * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * */
-var generatedLayerIds = 0;
-var generateLayerId = function generateLayerId() {
-  generatedLayerIds += 1;
-  return "layerid_".concat(generatedLayerIds);
-};
-var generatedMapIds = 0;
-var generateMapId = function generateMapId() {
-  generatedMapIds += 1;
-  return "mapid_".concat(generatedMapIds);
-};
-var generatedTimesliderIds = 0;
-var generateTimesliderId = function generateTimesliderId() {
-  generatedTimesliderIds += 1;
-  return "timesliderid_".concat(generatedTimesliderIds);
-};
-/**
- * Map for registering wmlayers with their id's
- */
-var registeredWMLayersForReactLayerId = {};
-/**
- * Registers a WMJSLayer in a lookuptable with a layerId
- * @param {WMLayer} wmLayer
- * @param {string} layerId
- */
-var registerWMLayer = function registerWMLayer(wmLayer, layerId) {
-  registeredWMLayersForReactLayerId[layerId] = wmLayer;
-};
-/**
- * Get the WMLayer from the lookuptable with layerId
- * @param {string} layerId
- */
-var getWMLayerById = function getWMLayerById(layerId) {
-  return registeredWMLayersForReactLayerId[layerId];
-};
-var unRegisterWMJSLayer = function unRegisterWMJSLayer(layerId) {
-  var layer = registeredWMLayersForReactLayerId[layerId];
-  if (layer) {
-    delete registeredWMLayersForReactLayerId[layerId];
-  }
-};
-var unRegisterAllWMJSLayersAndMaps = function unRegisterAllWMJSLayersAndMaps() {
-  var allLayerIds = Object.keys(registeredWMLayersForReactLayerId);
-  allLayerIds.forEach(function (layerId) {
-    unRegisterWMJSLayer(layerId);
-  });
-  var allMapIds = Object.keys(registeredWMMapForReactMapId);
-  allMapIds.forEach(function (mapId) {
-    unRegisterWMJSMap(mapId);
-  });
-};
-/**
- * Map for registering wmlayers with their id's
- */
-var registeredWMMapForReactMapId = {};
-/**
- * Registers a WMJSMap in a lookuptable with a wmjsMapId
- * @param {WMJSMap} wmjsMap
- * @param {string} wmjsMapId
- */
-var registerWMJSMap = function registerWMJSMap(wmjsMap, wmjsMapId) {
-  if (registeredWMMapForReactMapId[wmjsMapId]) {
-    console.warn("Map with id ".concat(wmjsMapId, " already made"));
-  }
-  registeredWMMapForReactMapId[wmjsMapId] = wmjsMap;
-};
-var unRegisterWMJSMap = function unRegisterWMJSMap(wmjsMapId) {
-  var wmjsMap = registeredWMMapForReactMapId[wmjsMapId];
-  if (wmjsMap) {
-    wmjsMap.getListener().suspendEvents();
-    try {
-      wmjsMap.stopAnimating && wmjsMap.stopAnimating();
-    } catch (e) {
-      console.warn(e);
-    }
-    Object.keys(registeredWMLayersForReactLayerId).forEach(function (layerId) {
-      var wmLayer = getWMLayerById(layerId);
-      if (wmLayer.parentMap === wmjsMap) {
-        unRegisterWMJSLayer(layerId);
-      }
-    });
-    wmjsMap.destroy();
-    delete registeredWMMapForReactMapId[wmjsMapId];
-  }
-};
-/**
- * Get the wmjsMap from the lookuptable with wmjsMapId
- * @param {string} wmjsMapId
- */
-var getWMJSMapById = function getWMJSMapById(wmjsMapId) {
-  return registeredWMMapForReactMapId[wmjsMapId];
-};
-/**
- * Returns the WMJSDimension object for given layerId and dimension name
- * @param layerId The layerId
- * @param dimensionName The dimension to lookup
- */
-var getWMJSDimensionForLayerAndDimension = function getWMJSDimensionForLayerAndDimension(layerId, dimensionName) {
-  var wmLayer = getWMLayerById(layerId);
-  if (!wmLayer || !dimensionName) {
-    return undefined;
-  }
-  var wmjsDimension = wmLayer.getDimension(dimensionName);
-  if (!wmjsDimension) {
-    return undefined;
-  }
-  return wmjsDimension;
-};
-/**
- * Gets the WMJSTimeDimension for given activeLayerId and dimensions list
- * @param layerId: The layer id to search the WMJSDimension for
- * @return: The WMJSDimension if found, otherwise null
- */
-var getWMJSTimeDimensionForLayerId = function getWMJSTimeDimensionForLayerId(layerId) {
-  var wmLayer = getWMLayerById(layerId);
-  if (!wmLayer) {
-    return null;
-  }
-  return wmLayer.getDimension('time');
-};
-
-var utils = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  generateLayerId: generateLayerId,
-  generateMapId: generateMapId,
-  generateTimesliderId: generateTimesliderId,
-  registerWMLayer: registerWMLayer,
-  getWMLayerById: getWMLayerById,
-  unRegisterWMJSLayer: unRegisterWMJSLayer,
-  unRegisterAllWMJSLayersAndMaps: unRegisterAllWMJSLayersAndMaps,
-  registerWMJSMap: registerWMJSMap,
-  unRegisterWMJSMap: unRegisterWMJSMap,
-  getWMJSMapById: getWMJSMapById,
-  getWMJSDimensionForLayerAndDimension: getWMJSDimensionForLayerAndDimension,
-  getWMJSTimeDimensionForLayerId: getWMJSTimeDimensionForLayerId
-});
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -32804,4 +32908,4 @@ var getCapabilities = /*#__PURE__*/Object.freeze({
   getLayersFlattenedFromService: getLayersFlattenedFromService
 });
 
-export { DateInterval, DebugType, I18n, LayerType, ParseISOTimeRangeDuration, URLDecode, URLEncode, WMBBOX, WMDateOutSideRange, WMDateTooEarlyString, WMDateTooLateString, WMEmptyLayerName, WMEmptyLayerTitle, WMGetServiceFromStore, WMImage, WMImageEventType, WMJSDimension, WMJSMap, WMJSService, WMJScheckURL, WMLayer, WMTimer, clearImageCache, debug, getCapabilities, getLegendGraphicURLForLayer, getMapImageStore, isDefined, legendImageStore, mockGetCapabilities, parseISO8601DateToDate, parseISO8601IntervalToDateInterval, tilesettings, toArray, 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, debug, getCapabilities, getLegendGraphicURLForLayer, getMapImageStore, isDefined, legendImageStore, mockGetCapabilities, parseISO8601DateToDate, parseISO8601IntervalToDateInterval, tilesettings, toArray, testSettings as webmapTestSettings, utils as webmapUtils };