@opengeoweb/webmap 9.10.1 → 9.11.0

package/index.esm.js

@@ -463,52 +463,6 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
   };
 }
 
-/* *
- * 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 WMEmptyLayerName = 'empty_layer';
-var WMEmptyLayerTitle = 'empty layer';
-var WMDateOutSideRange = 'outside range';
-var WMDateTooEarlyString = 'date too early';
-var WMDateTooLateString = 'date too late';
-var WMSVersion = {
-  version100: '1.0.0',
-  version111: '1.1.1',
-  version130: '1.3.0'
-};
-var WMProj4Defs = [['EPSG:4326', '+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees'], ['EPSG:4269', '+title=NAD83 (long/lat) +proj=longlat +a=6378137.0 +b=6356752.31414036 +ellps=GRS80 +datum=NAD83 +units=degrees'], ['EPSG:3575', '+proj=laea +lat_0=90 +lon_0=10 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs'], ['EPSG:3785', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs'], ['EPSG:3857', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs'], ['EPSG:3411', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 +x_0=0 +y_0=0 +a=6378273 +b=6356889.449 +units=m +no_defs'], ['EPSG:3412', '+proj=stere +lat_0=-90 +lat_ts=-70 +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=6378273 +b=6356889.449 +units=m +no_defs'], ['EPSG:28992', '+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +no_defs  <>'], ['EPSG:32661', '+proj=stere +lat_0=90 +lat_ts=90 +lon_0=0 +k=0.994 +x_0=2000000 +y_0=2000000 +ellps=WGS84 +datum=WGS84 +units=m +no_defs'], ['EPSG:102100', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs'], ['EPSG:3067', '+proj=utm +zone=35 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs']];
-var epsgDescriptionLookup = {
-  'EPSG:3411': 'NSIDC Sea Ice Polar Stereographic North',
-  'EPSG:3412': 'NSIDC Sea Ice Polar Stereographic South',
-  'EPSG:3575': 'Lambert azimuthal equal-area projection Europe',
-  'EPSG:3785': 'Mercator (deprecated)',
-  'EPSG:3857': 'Mercator',
-  'EPSG:4258': 'ETRS89',
-  'EPSG:4326': 'World Lat lon WGS84',
-  'CRS:84': 'World Lat lon WGS84',
-  'EPSG:25831': 'ETRS89 / UTM zone 31N',
-  'EPSG:25832': 'ETRS89 / UTM zone 32N',
-  'EPSG:28992': 'Dutch Amersfoort / RD New',
-  'EPSG:32661': 'Polar Stereographic WGS 84 / UPS North',
-  'EPSG:3067': 'ETRS89 / TM35FIN(E,N) -- Finland'
-};
-var mapImageStoreLength = 1000;
-var bgImageStoreLength = 360;
-var legendImageStoreLength = 500;
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -557,6 +511,54 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+/* *
+ * 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 WMEmptyLayerName = 'empty_layer';
+var WMEmptyLayerTitle = 'empty layer';
+var WMDateOutSideRange = 'outside range';
+var WMDateTooEarlyString = 'date too early';
+var WMDateTooLateString = 'date too late';
+var WMSVersion = {
+  version100: '1.0.0',
+  version111: '1.1.1',
+  version130: '1.3.0'
+};
+var WMProj4Defs = [['EPSG:4326', '+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees'], ['EPSG:4269', '+title=NAD83 (long/lat) +proj=longlat +a=6378137.0 +b=6356752.31414036 +ellps=GRS80 +datum=NAD83 +units=degrees'], ['EPSG:3575', '+proj=laea +lat_0=90 +lon_0=10 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs'], ['EPSG:3785', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs'], ['EPSG:3857', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs'], ['EPSG:3411', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 +x_0=0 +y_0=0 +a=6378273 +b=6356889.449 +units=m +no_defs'], ['EPSG:3412', '+proj=stere +lat_0=-90 +lat_ts=-70 +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=6378273 +b=6356889.449 +units=m +no_defs'], ['EPSG:28992', '+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +no_defs  <>'], ['EPSG:32661', '+proj=stere +lat_0=90 +lat_ts=90 +lon_0=0 +k=0.994 +x_0=2000000 +y_0=2000000 +ellps=WGS84 +datum=WGS84 +units=m +no_defs'], ['EPSG:102100', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs'], ['EPSG:3067', '+proj=utm +zone=35 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs']];
+var epsgDescriptionLookup = {
+  'EPSG:3411': 'NSIDC Sea Ice Polar Stereographic North',
+  'EPSG:3412': 'NSIDC Sea Ice Polar Stereographic South',
+  'EPSG:3575': 'Lambert azimuthal equal-area projection Europe',
+  'EPSG:3785': 'Mercator (deprecated)',
+  'EPSG:3857': 'Mercator',
+  'EPSG:4258': 'ETRS89',
+  'EPSG:4326': 'World Lat lon WGS84',
+  'CRS:84': 'World Lat lon WGS84',
+  'EPSG:25831': 'ETRS89 / UTM zone 31N',
+  'EPSG:25832': 'ETRS89 / UTM zone 32N',
+  'EPSG:28992': 'Dutch Amersfoort / RD New',
+  'EPSG:32661': 'Polar Stereographic WGS 84 / UPS North',
+  'EPSG:3067': 'ETRS89 / TM35FIN(E,N) -- Finland'
+};
+var mapImageStoreLength = 1000;
+var bgImageStoreLength = 360;
+var legendImageStoreLength = 500;
+var EVENT_GETCAPABILITIES_START = 'onstartgetcapabilities';
+var EVENT_GETCAPABILITIES_READY = 'onreadygetcapabilities';
+
 /* debug helper */
 var enableConsoleDebugging = false;
 var DebugType;
@@ -779,7 +781,7 @@ var dateToISO8601 = function dateToISO8601(date) {
   return iso;
 };
 /**
- * Helper function to figure out the styles from the WMS layer object from the WMS GetCapabilties document
+ * Helper function to figure out the styles from the WMS layer object from the WMS GetCapabilities document
  * @param layerObjectFromWMS The layer object from the WMS GetCapabilities JSON document
  * @returns Style[] Array of style objects.
  */
@@ -1486,9 +1488,6 @@ var WMImageStore = /*#__PURE__*/function () {
   }]);
   return WMImageStore;
 }();
-var getMapImageStore = new WMImageStore(mapImageStoreLength, {
-  id: 'getMapImageStore'
-});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1623,142 +1622,204 @@ var WMProjection = /*#__PURE__*/_createClass(function WMProjection() {
   this.srs = 'EPSG:4326';
 });
 
-var CallBackFunction = /*#__PURE__*/_createClass(function CallBackFunction() {
-  _classCallCheck(this, CallBackFunction);
-  this.name = undefined;
-  this.functionpointer = undefined;
-  this.finished = 0;
-  this.keepOnCall = false;
-});
 var WMListener = /*#__PURE__*/function () {
   function WMListener() {
     _classCallCheck(this, WMListener);
-    this._callBacks = [];
-    this._suspendedEvents = [];
-    this.addToCallback = this.addToCallback.bind(this);
-    this.removeEvents = this.removeEvents.bind(this);
+    this.addEventListener = this.addEventListener.bind(this);
+    this.removeEventListener = this.removeEventListener.bind(this);
+    this.removeEventListeners = this.removeEventListeners.bind(this);
+    this.triggerEvent = this.triggerEvent.bind(this);
+    this.destroy = this.destroy.bind(this);
     this.suspendEvent = this.suspendEvent.bind(this);
     this.resumeEvent = this.resumeEvent.bind(this);
     this.suspendEvents = this.suspendEvents.bind(this);
     this.resumeEvents = this.resumeEvents.bind(this);
-    this.triggerEvent = this.triggerEvent.bind(this);
-    this.destroy = this.destroy.bind(this);
-    this._allEventsSuspended = false;
+    // Deprecated routines:
+    this.removeEvents = this.removeEvents.bind(this);
+    this._suspendAllEvents = false;
+    this.registeredEvents = new Map();
+    this._suspendedEvents = new Map();
   }
-  /* Add multiple functions which will be called after the event with the same name is triggered */
+  /**
+   * Remove events by name and function.
+   * @param name Event name
+   * @param f  Function pointer to check
+   */
   _createClass(WMListener, [{
-    key: "addToCallback",
-    value: function addToCallback(name, functionpointer) {
-      var keepOnCall = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      var cbp = -1; /* callbackpointer */
-      for (var j = 0; j < this._callBacks.length; j += 1) {
-        // A callback list index pointer. if finished==1, then this index may be replaced by a new one.
-        if (this._callBacks[j].finished === 1) {
-          cbp = j;
-          break;
-        }
-        // If the current callback already exist, we will simply keep it
-        if (this._callBacks[j].name === name && this._callBacks[j].functionpointer === functionpointer) {
-          this._callBacks[j].keepOnCall = keepOnCall;
-          return false;
-        }
-      }
-      if (cbp === -1) {
-        cbp = this._callBacks.length;
-        this._callBacks.push(new CallBackFunction());
-      }
-      this._callBacks[cbp].name = name;
-      this._callBacks[cbp].functionpointer = functionpointer;
-      this._callBacks[cbp].finished = 0;
-      this._callBacks[cbp].keepOnCall = keepOnCall;
-      return true;
+    key: "removeEventListener",
+    value: function removeEventListener(name, f) {
+      return this.removeEvents(name, f);
     }
+    /**
+     * Remove all events by name
+     * @param name Event name
+     */
   }, {
-    key: "removeEvents",
-    value: function removeEvents(name, f) {
-      var _iterator = _createForOfIteratorHelper(this._callBacks),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var callBack = _step.value;
-          if (callBack.finished === 0) {
-            if (callBack.name === name) {
-              if (!f) {
-                callBack.finished = 1;
-              } else if (callBack.functionpointer === f) {
-                callBack.finished = 1;
-              }
-            }
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
+    key: "removeEventListeners",
+    value: function removeEventListeners(name) {
+      return this.removeEvents(name);
+    }
+    /**
+     * Add multiple functions which will be called after the event with the same name is triggered
+     * @param name: The name of the event to register
+     * @param function: The function to trigger
+     * @param keepOnCall: When false, this event name and function combination is removed once triggered.
+     *                    When true Otherwise keep the event and allow it to be triggered multiple times
+     * @return: true if the event is registerd, false if it already was registered
+     */
+  }, {
+    key: "addEventListener",
+    value: function addEventListener(name, functionpointer) {
+      var keepOnCall = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+      var events = this.registeredEvents.get(name);
+      // This event name has no function callbacks associated, just add it.
+      if (!events || (events === null || events === void 0 ? void 0 : events.length) === 0) {
+        this.registeredEvents.set(name, [{
+          name: name,
+          functionpointer: functionpointer,
+          keepOnCall: keepOnCall,
+          finished: 0
+        }]);
+        return true;
+      }
+      // Check if this function callback was already associated. If so, do nothing.
+      if ((events === null || events === void 0 ? void 0 : events.findIndex(function (c) {
+        return c.functionpointer === functionpointer;
+      })) !== -1) {
+        return false;
       }
+      events.push({
+        name: name,
+        functionpointer: functionpointer,
+        keepOnCall: keepOnCall,
+        finished: 0
+      });
+      return true;
     }
+    /**
+     * Destroys this listener, deregistering all events
+     */
   }, {
     key: "destroy",
     value: function destroy() {
-      this._callBacks.length = 0;
+      this.registeredEvents.clear();
     }
+    /**
+     * Suspend a specific event by name, triggers will not be called
+     * @param name
+     */
   }, {
     key: "suspendEvent",
     value: function suspendEvent(name) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      this._suspendedEvents[name] = true;
+      this._suspendedEvents.set(name, true);
     }
+    /**
+     * Resume a specific event by name, resuming normal operation
+     * @param name
+     */
   }, {
     key: "resumeEvent",
     value: function resumeEvent(name) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      this._suspendedEvents[name] = false;
+      this._suspendedEvents.set(name, false);
     }
+    /**
+     * This listener will not listen to any triggers
+     */
   }, {
     key: "suspendEvents",
     value: function suspendEvents() {
-      this._allEventsSuspended = true;
+      this._suspendAllEvents = true;
     }
+    /**
+     * Resume event listening
+     */
   }, {
     key: "resumeEvents",
     value: function resumeEvents() {
-      this._allEventsSuspended = false;
+      this._suspendAllEvents = false;
     }
-    // Trigger an event with a name
+    /**
+     * Trigger an event with custom parameters
+     * @param name The name of the event to trigger
+     * @param param The parameters to provide to the associated function
+     * @returns The results of the function.
+     */
   }, {
     key: "triggerEvent",
     value: function triggerEvent(name, param) {
-      if (this._allEventsSuspended === true ||
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      this._suspendedEvents[name] === true) {
+      if (this._suspendAllEvents === true || this._suspendedEvents.get(name) === true) {
         return [];
       }
       var returnList = [];
-      var _iterator2 = _createForOfIteratorHelper(this._callBacks),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var callBack = _step2.value;
-          if (callBack.finished === 0) {
-            if (callBack.name === name) {
-              if (callBack.keepOnCall === false) {
-                callBack.finished = 1;
+      var events = this.registeredEvents.get(name);
+      if (events && events.length > 0) {
+        var _iterator = _createForOfIteratorHelper(events),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var myEvent = _step.value;
+            if (myEvent.finished === 0) {
+              // Mark the following as finished: it needs to be removed
+              if (myEvent.keepOnCall === false) {
+                myEvent.finished = 1;
               }
               try {
-                returnList.push(callBack.functionpointer(param, this));
+                returnList.push(myEvent.functionpointer(param));
               } catch (e) {
                 debugLogger(DebugType.Error, "Error for event [".concat(name, "]: "), param, e);
               }
             }
           }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
         }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
       }
+      // Now remove all finished events
+      this.removeFinishedEvents();
       return returnList;
     }
+  }, {
+    key: "removeFinishedEvents",
+    value: function removeFinishedEvents() {
+      var _this = this;
+      this.registeredEvents.forEach(function (callbacks, name) {
+        _this.registeredEvents.set(name, callbacks.filter(function (c) {
+          return !c.finished;
+        }));
+      });
+    }
+  }, {
+    key: "removeEvents",
+    value: function removeEvents(name, f) {
+      var numberOfRemovedEvents = 0;
+      var events = this.registeredEvents.get(name);
+      if (events && events.length > 0) {
+        var _iterator2 = _createForOfIteratorHelper(events),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var myEvent = _step2.value;
+            if (myEvent.finished === 0) {
+              if (!f) {
+                myEvent.finished = 1;
+                numberOfRemovedEvents += 1;
+              } else if (myEvent.functionpointer === f) {
+                myEvent.finished = 1;
+                numberOfRemovedEvents += 1;
+              }
+            }
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
+      this.removeFinishedEvents();
+      return numberOfRemovedEvents;
+    }
   }]);
   return WMListener;
 }();
@@ -1866,7 +1927,7 @@ _bbox) {
   return undefined;
 };
 var WMCanvasBuffer = /*#__PURE__*/function () {
-  function WMCanvasBuffer(webmapJSCallback, _imageStore, w, h, internalCallbacks) {
+  function WMCanvasBuffer(webMapJS, w, h, internalCallbacks) {
     var _this = this;
     _classCallCheck(this, WMCanvasBuffer);
     this.canvas = document.createElement('canvas');
@@ -1875,17 +1936,14 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
     this._ctx = this.canvas.getContext('2d');
     this._ctx.canvas.width = w;
     this._ctx.canvas.height = h;
-    this._imageStore = _imageStore;
+    this._imageStore = webMapJS.getImageStore();
     this.ready = true;
     this.layers = [];
-    this._defaultImage = new WMImage('webmapjs/img/stoploading.png', function () {
-      _this._statDivBufferImageLoaded();
-    });
     this._currentbbox = undefined;
     this._currentnewbbox = undefined;
     this._width = w;
     this._height = h;
-    this._webmapJSCallback = webmapJSCallback;
+    this._webMapJS = webMapJS;
     this._internalCallbacks = internalCallbacks;
     /* Bind */
     this.getCanvasContext = this.getCanvasContext.bind(this);
@@ -1899,6 +1957,9 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
     this.setBBOX = this.setBBOX.bind(this);
     this.getBuffer = this.getBuffer.bind(this);
     this._drawImage = this._drawImage.bind(this);
+    this.isImageStoreLoading = this.isImageStoreLoading.bind(this);
+    this._display = this._display.bind(this);
+    this.destroy = this.destroy.bind(this);
     this._imageStore.addImageEventCallback(function (image, id, imageEventType) {
       if (imageEventType === WMImageEventType.Loaded) {
         _this.imageLoadComplete(image);
@@ -1909,6 +1970,7 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
     }, 'WMCanvasBuffer');
     this._errorList = [];
     this.animationFrameRequest = ANIMATIONFRAMEREQUEST_DONE;
+    this._isBufferLoading = false;
   }
   _createClass(WMCanvasBuffer, [{
     key: "getCanvasContext",
@@ -1922,10 +1984,14 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
   }, {
     key: "imageLoadComplete",
     value: function imageLoadComplete(image) {
+      if (!this._webMapJS) {
+        return;
+      }
       this._statDivBufferImageLoaded();
-      this._webmapJSCallback.triggerEvent('onimageload', undefined);
-      this._webmapJSCallback.triggerEvent('onimagebufferimageload', image);
+      this._webMapJS.getListener().triggerEvent('onimageload', undefined);
+      this._webMapJS.getListener().triggerEvent('onimagebufferimageload', image);
       this.display();
+      this.checkIfLoading();
     }
     /**
      * Checks if all images are loaded, if so it will call finishedLoading
@@ -1992,17 +2058,24 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
     key: "display",
     value: function display() {
       var _this2 = this;
+      if (!this._webMapJS) {
+        return;
+      }
       // Check if the response from window.requestAnimationFrame is set. If this is the case, debounce the next display.
       if (this.animationFrameRequest !== ANIMATIONFRAMEREQUEST_DONE) {
         clearTimeout(this.timerHandle);
         this.timerHandle = setTimeout(function () {
-          _this2._display();
+          if (_this2._webMapJS) {
+            _this2._display();
+          }
         }, 100);
         return;
       }
       // Display the next frame based on window.requestAnimationFrame, e.g. when the screen is ready to display.
       this.animationFrameRequest = window.requestAnimationFrame(function () {
-        _this2._display();
+        if (_this2._webMapJS) {
+          _this2._display();
+        }
       });
     }
   }, {
@@ -2010,6 +2083,10 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
     value: function _display() {
       var _this3 = this;
       var _a, _b, _c, _d, _e, _f;
+      if (!this.ready) {
+        return;
+      }
+      this.ready = false;
       // Frame is displayed, so reset animationFrameRequest back to default.
       this.animationFrameRequest = ANIMATIONFRAMEREQUEST_DONE;
       this._ctx.globalAlpha = 1;
@@ -2017,7 +2094,7 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
       this._ctx.beginPath();
       this._ctx.fillRect(0, 0, this._width, this._height);
       this._ctx.fill();
-      this._webmapJSCallback.triggerEvent('beforecanvasstartdraw', this._ctx);
+      this._webMapJS.getListener().triggerEvent('beforecanvasstartdraw', this._ctx);
       if (this._internalCallbacks && this._internalCallbacks.beforecanvasstartdraw) {
         this._internalCallbacks.beforecanvasstartdraw(this._ctx);
       }
@@ -2028,37 +2105,39 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
         if (imageToDisplay === null || imageToDisplay === void 0 ? void 0 : imageToDisplay.isLoadedWithoutErrors()) {
           // Draw this image, it is loaded and OK
           _this3._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 === 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 */
-        var im = getAlternativeImage(layer.imageSource, _this3._imageStore, _this3._currentnewbbox);
-        if (im) {
-          _this3._drawImage(im);
+        } 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 === 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 */
+          var im = getAlternativeImage(layer.imageSource, _this3._imageStore, _this3._currentnewbbox);
+          if (im) {
+            _this3._drawImage(im);
+          }
         }
       });
       this._ctx.globalAlpha = 1;
       /* Display errors */
       if (this._errorList.length > 0) {
-        this._webmapJSCallback.triggerEvent('canvasonerror', this._errorList);
+        this._webMapJS.getListener().triggerEvent('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);
+      this._webMapJS.getListener().triggerEvent('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);
+      this._webMapJS.getListener().triggerEvent('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);
+      this.ready = true;
     }
   }, {
     key: "finishedLoading",
     value: function finishedLoading() {
       if (this.ready) {
+        // console.log('finishedLoading');
         return;
       }
       this.ready = true;
@@ -2146,6 +2225,24 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
       if (!image.isLoaded() && !image.isLoading()) {
         image.load();
       }
+      this.checkIfLoading();
+    }
+  }, {
+    key: "checkIfLoading",
+    value: function checkIfLoading() {
+      var isLoading = this.isImageStoreLoading();
+      if (!isLoading && this._isBufferLoading) {
+        this._isBufferLoading = false;
+        this._webMapJS.getListener().triggerEvent('onloadready');
+      } else if (isLoading && !this._isBufferLoading) {
+        this._isBufferLoading = true;
+        this._webMapJS.getListener().triggerEvent('onloadstart');
+      }
+    }
+  }, {
+    key: "isImageStoreLoading",
+    value: function isImageStoreLoading() {
+      return this._imageStore.getNumImagesLoading() !== 0;
     }
   }, {
     key: "_getPixelCoordFromGeoCoord",
@@ -2164,6 +2261,13 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
       this._currentnewbbox = newbbox;
       this.display();
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      clearTimeout(this.timerHandle);
+      cancelAnimationFrame(this.animationFrameRequest);
+      this._webMapJS = null;
+    }
   }, {
     key: "getBuffer",
     value: function getBuffer() {
@@ -2184,20 +2288,20 @@ function prefetchImagesForAnimation(wmMap) {
     var indexOfNextAnimationStep = (wmMap.currentAnimationStep + offset) % countAnimationSteps;
     return animationSteps[indexOfNextAnimationStep];
   });
-  prefetchLayerImagesInOrderWithUrls(animationStepsInOrder, maxImagesToPrefetch);
+  prefetchLayerImagesInOrderWithUrls(wmMap, animationStepsInOrder, maxImagesToPrefetch);
 }
-function prefetchLayerImagesInOrderWithUrls(animationStepsInOrder, maxImagesToPrefetch) {
+function prefetchLayerImagesInOrderWithUrls(wmMap, animationStepsInOrder, maxImagesToPrefetch) {
   var _iterator = _createForOfIteratorHelper(animationStepsInOrder),
     _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var animationStep = _step.value;
       // dont prefetch if already prefetching too many images
-      var countImagesLoading = getMapImageStore.getNumImagesLoading();
+      var countImagesLoading = wmMap.getMapImageStore.getNumImagesLoading();
       if (countImagesLoading > maxImagesToPrefetch - 1) {
         break;
       }
-      prefetchLayerImagesForTime(animationStep.requests || []);
+      prefetchLayerImagesForTime(wmMap, animationStep.requests || []);
     }
   } catch (err) {
     _iterator.e(err);
@@ -2212,12 +2316,12 @@ function prefetchLayerImagesInOrder(wmMap, timesToPrefetchInOrder, maxImagesToPr
     for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
       var timeToPrefetch = _step2.value;
       // dont prefetch if already prefetching too many images
-      var countImagesLoading = getMapImageStore.getNumImagesLoading();
+      var countImagesLoading = wmMap.getMapImageStore.getNumImagesLoading();
       if (countImagesLoading > maxImagesToPrefetch - 1) {
         break;
       }
       var layersImageUrls = getLayersImageUrlsForTime(wmMap, timeToPrefetch);
-      prefetchLayerImagesForTime(layersImageUrls);
+      prefetchLayerImagesForTime(wmMap, layersImageUrls);
     }
   } catch (err) {
     _iterator2.e(err);
@@ -2232,9 +2336,9 @@ function getLayersImageUrlsForTime(wmMap, timeToPrefetch) {
   }]);
   return layersImageUrls;
 }
-function prefetchLayerImagesForTime(requests) {
+function prefetchLayerImagesForTime(wmMap, requests) {
   requests.forEach(function (request) {
-    var image = getMapImageStore.getImage(request.url, {
+    var image = wmMap.getMapImageStore.getImage(request.url, {
       headers: request.headers
     });
     if (image.hasNotStartedLoading()) {
@@ -2331,7 +2435,6 @@ 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();
@@ -2422,14 +2525,14 @@ var WMJSAnimate = /*#__PURE__*/function () {
       var numberOfImagesReadyForNextAnimationStep = 0;
       layersImageUrls.forEach(function (request) {
         var url = request.url;
-        var image = getMapImageStore.getImageForSrc(url);
+        var image = _this._map.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());
+        var alternativeImage = getAlternativeImage(url, _this._map.getMapImageStore, _this._map.getDrawBBOX());
         if (alternativeImage) {
           numberOfImagesReadyForNextAnimationStep += 1;
           return;
@@ -4409,10 +4512,6 @@ var getErrorsToDisplay = function getErrorsToDisplay(canvasErrors, getLayerBySer
     return list;
   }, []);
 };
-var clearImageCache = function clearImageCache() {
-  getMapImageStore.clear();
-  getLegendImageStore().clear();
-};
 /**
 /**
   * WMJSMap class
@@ -4669,11 +4768,16 @@ var WMJSMap = /*#__PURE__*/function () {
     this._adagucBeforeCanvasDisplay = this._adagucBeforeCanvasDisplay.bind(this);
     this.displayScaleBarInMap = this.displayScaleBarInMap.bind(this);
     this.configureMapDimensions = this.configureMapDimensions.bind(this);
+    this.getImageStore = this.getImageStore.bind(this);
+    this.clearImageCache = this.clearImageCache.bind(this);
     this.mapPin = new MapPin(this);
     this.loadingDiv = document.createElement('div');
     this.loadingDiv.className = 'WMJSDivBuffer-loading';
     this.enableAutoPrefetching = true;
     this.isProjectionSupported = isProjectionSupported.bind(this);
+    this.getMapImageStore = new WMImageStore(mapImageStoreLength, {
+      id: this.getId()
+    });
     this.init();
   }
   _createClass(WMJSMap, [{
@@ -5147,7 +5251,7 @@ var WMJSMap = /*#__PURE__*/function () {
       this.bbox.top = 90;
       this.srs = 'EPSG:4326';
       // IMAGE buffer
-      this.divBuffer = new WMCanvasBuffer(this.callBack, getMapImageStore, this.getWidth(), this.getHeight(), {
+      this.divBuffer = new WMCanvasBuffer(this, this.getWidth(), this.getHeight(), {
         beforecanvasstartdraw: this._adagucBeforeDraw,
         beforecanvasdisplay: this._adagucBeforeCanvasDisplay,
         canvasonerror: function canvasonerror(e) {
@@ -5160,8 +5264,8 @@ var WMJSMap = /*#__PURE__*/function () {
           _this3.draw('legendImageStore loaded');
         }
       }, this.internalMapId);
-      this.callBack.addToCallback('display', this.display, true);
-      this.callBack.addToCallback('draw', function () {
+      this.callBack.addEventListener('display', this.display, true);
+      this.callBack.addEventListener('draw', function () {
         debugLogger(DebugType.Log);
       }, true);
       bgMapImageStore.addImageEventCallback(function (image, id, imageEventType) {
@@ -6103,9 +6207,11 @@ var WMJSMap = /*#__PURE__*/function () {
       this.detachEvents();
       this.callBack.destroy();
       this.callBack = null;
-      getMapImageStore.removeEventCallback(this.internalMapId);
+      this.getMapImageStore.removeEventCallback(this.internalMapId);
       bgMapImageStore.removeEventCallback(this.internalMapId);
       getLegendImageStore().removeEventCallback(this.internalMapId);
+      this.divBuffer.destroy();
+      this.divBuffer = null;
       this.internalMapId = '';
       this.mainElement.removeChild(this.baseDiv);
       this.baseDiv.innerHTML = '';
@@ -7136,7 +7242,7 @@ var WMJSMap = /*#__PURE__*/function () {
     // 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);
+      return this.callBack.addEventListener(name, f, keep);
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   }, {
@@ -7145,7 +7251,7 @@ var WMJSMap = /*#__PURE__*/function () {
       if (this.isDestroyed) {
         return;
       }
-      this.callBack.removeEvents(name, f);
+      this.callBack.removeEventListener(name, f);
     }
   }, {
     key: "getListener",
@@ -7386,6 +7492,17 @@ var WMJSMap = /*#__PURE__*/function () {
     value: function getDrawBBOX() {
       return this.bbox;
     }
+  }, {
+    key: "getImageStore",
+    value: function getImageStore() {
+      return this.getMapImageStore;
+    }
+  }, {
+    key: "clearImageCache",
+    value: function clearImageCache() {
+      this.getMapImageStore.clear();
+      getLegendImageStore().clear();
+    }
   }]);
   return WMJSMap;
 }();
@@ -7954,6 +8071,7 @@ var WMXMLParser = function WMXMLParser(url, headers) {
   });
 };
 
+var wmServiceListener = new WMListener();
 var loadGetCapabilitiesViaProxy = function loadGetCapabilitiesViaProxy(url, succes, fail, xml2jsonrequestURL) {
   var getcapreq = "".concat(xml2jsonrequestURL, "request=");
   getcapreq += URLEncode(url);
@@ -8208,6 +8326,7 @@ var WMJSService = /*#__PURE__*/function () {
         this.functionCallbackList.push(_cf);
         /* Fail functions */
         var fail = function fail(jsonData) {
+          wmServiceListener.triggerEvent(EVENT_GETCAPABILITIES_READY, _this.service);
           _this.busy = false;
           var current;
           while (current = _this.functionCallbackList.pop()) {
@@ -8216,6 +8335,7 @@ var WMJSService = /*#__PURE__*/function () {
         };
         /* Success functions */
         var succes = function succes(jsonData) {
+          wmServiceListener.triggerEvent(EVENT_GETCAPABILITIES_READY, _this.service);
           _this.busy = false;
           _this.getcapabilitiesDoc = jsonData;
           try {
@@ -8263,6 +8383,7 @@ var WMJSService = /*#__PURE__*/function () {
             current.callback(jsonData);
           }
         };
+        wmServiceListener.triggerEvent(EVENT_GETCAPABILITIES_START, this.service);
         WMJSGetCapabilities(this.service, succes, fail, options);
       } else {
         succescallback(this.getcapabilitiesDoc);
@@ -9004,7 +9125,7 @@ var WMLayer = /*#__PURE__*/function () {
     }
     /**
      * A Promise to parse the layer, it will fetch the WMS GetCapabilities document, configure the layer and resolve to a WMLayer object
-     * @param forceReload Do not use the cache of the WMS GetCapabilties document, but instead fetch new data from the server
+     * @param forceReload Do not use the cache of the WMS GetCapabilities document, but instead fetch new data from the server
      * @returns WMLayer object
      */
   }, {
@@ -9220,6 +9341,39 @@ var WMLayer = /*#__PURE__*/function () {
   return WMLayer;
 }();
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * */
+var defaultAnimationDelayAtStart = 250;
+var defaultDelay = 1000; // [ms]
+var defaultTimeStep = 60;
+var defaultSecondsPerPx = 80;
+var defaultTimeSpan = 24 * 3600;
+var speedFactors = [0.1, 0.2, 0.5, 1, 2, 4, 8, 16]; // Declares available animation speed multipliers for default delay
+
+var mapConstants = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  defaultAnimationDelayAtStart: defaultAnimationDelayAtStart,
+  defaultDelay: defaultDelay,
+  defaultTimeStep: defaultTimeStep,
+  defaultSecondsPerPx: defaultSecondsPerPx,
+  defaultTimeSpan: defaultTimeSpan,
+  speedFactors: speedFactors
+});
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -9362,6 +9516,36 @@ var getWMJSTimeDimensionForLayerId = function getWMJSTimeDimensionForLayerId(lay
   }
   return wmLayer.getDimension('time');
 };
+/**
+ * Clears the image store for all maps
+ */
+var clearImageCacheForAllMaps = function clearImageCacheForAllMaps() {
+  getWMJSMapIds().forEach(function (id) {
+    var map = getWMJSMapById(id);
+    if (map && !map.isDestroyed) {
+      map.clearImageCache();
+    }
+  });
+};
+var roundWithTimeStep = function roundWithTimeStep(unixTime, timeStep, type) {
+  var adjustedTimeStep = timeStep * 60;
+  if (!type || type === 'round') {
+    return Math.round(unixTime / adjustedTimeStep) * adjustedTimeStep;
+  }
+  if (type === 'floor') {
+    return Math.floor(unixTime / adjustedTimeStep) * adjustedTimeStep;
+  }
+  if (type === 'ceil') {
+    return Math.ceil(unixTime / adjustedTimeStep) * adjustedTimeStep;
+  }
+  return undefined;
+};
+/**
+ * Returns speed delay for given speedFactor. For options, see defined above in "speedFactors"
+ */
+var getSpeedDelay = function getSpeedDelay(speedFactor) {
+  return defaultDelay / speedFactor;
+};
 
 var utils = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9377,7 +9561,10 @@ var utils = /*#__PURE__*/Object.freeze({
   getWMJSMapById: getWMJSMapById,
   getWMJSMapIds: getWMJSMapIds,
   getWMJSDimensionForLayerAndDimension: getWMJSDimensionForLayerAndDimension,
-  getWMJSTimeDimensionForLayerId: getWMJSTimeDimensionForLayerId
+  getWMJSTimeDimensionForLayerId: getWMJSTimeDimensionForLayerId,
+  clearImageCacheForAllMaps: clearImageCacheForAllMaps,
+  roundWithTimeStep: roundWithTimeStep,
+  getSpeedDelay: getSpeedDelay
 });
 
 /* *
@@ -10536,4 +10723,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, WMProj4Defs, WMSVersion, bgImageStoreLength, buildWMSGetMapRequest, clearImageCache, debugLogger, defaultReduxLayerRadarKNMI, epsgDescriptionLookup, generateLayerId, generateMapId, generateTimesliderId, getAlternativeImage, getBBOXandProjString, getCapabilities, getLegendGraphicURLForLayer, getMapImageStore, getUriWithParam, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSMapIds, getWMJSTimeDimensionForLayerId, getWMLayerById, handleMomentISOString, isDefined, isProjectionSupported, legendImageStore, legendImageStoreLength, mapImageStoreLength, mockGetCapabilities, multiDimensionLayer, parseISO8601DateToDate, parseISO8601IntervalToDateInterval, registerWMJSMap, registerWMLayer, tilesettings, toArray, unRegisterAllWMJSLayersAndMaps, unRegisterWMJSLayer, unRegisterWMJSMap, testSettings as webmapTestSettings, utils as webmapUtils };
+export { DateInterval, DebugType, EPSGCode, EVENT_GETCAPABILITIES_READY, EVENT_GETCAPABILITIES_START, I18n, LayerType, ParseISOTimeRangeDuration, URLDecode, URLEncode, WMBBOX, WMDateOutSideRange, WMDateTooEarlyString, WMDateTooLateString, WMEmptyLayerName, WMEmptyLayerTitle, WMGetServiceFromStore, WMImage, WMImageEventType, WMJSDimension, WMJSMap, WMJSService, WMJScheckURL, WMLayer, WMProj4Defs, WMSVersion, bgImageStoreLength, buildWMSGetMapRequest, clearImageCacheForAllMaps, debugLogger, defaultReduxLayerRadarKNMI, epsgDescriptionLookup, generateLayerId, generateMapId, generateTimesliderId, getAlternativeImage, getBBOXandProjString, getCapabilities, getLegendGraphicURLForLayer, getSpeedDelay, getUriWithParam, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSMapIds, getWMJSTimeDimensionForLayerId, getWMLayerById, handleMomentISOString, isDefined, isProjectionSupported, legendImageStore, legendImageStoreLength, mapConstants, mapImageStoreLength, mockGetCapabilities, multiDimensionLayer, parseISO8601DateToDate, parseISO8601IntervalToDateInterval, registerWMJSMap, registerWMLayer, roundWithTimeStep, speedFactors, tilesettings, toArray, unRegisterAllWMJSLayersAndMaps, unRegisterWMJSLayer, unRegisterWMJSMap, testSettings as webmapTestSettings, utils as webmapUtils, wmServiceListener };

package/package.json

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

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

@@ -4,7 +4,6 @@ export default class WMJSAnimate {
     private _map;
     private _divAnimationInfo;
     private _callBack;
-    private _imageStore;
     private isNextTimeCloseToWallClockTime;
     private animationTimer;
     private animateBusy;

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

@@ -2,8 +2,8 @@
 import WMImage from './WMImage';
 import WMImageStore from './WMImageStore';
 import WMBBOX from './WMBBOX';
-import WMListener from './WMListener';
 import { LinkedInfo, LinkedInfoContent, WMPosition } from './types';
+import type WMJSMap from './WMJSMap';
 interface InternalCallback {
     beforecanvasstartdraw?: (context: CanvasRenderingContext2D) => void;
     beforecanvasdisplay?: (context: CanvasRenderingContext2D) => void;
@@ -70,12 +70,11 @@ export default class WMCanvasBuffer {
     _imageStore: WMImageStore;
     ready: boolean;
     layers: CanvasGeoLayer[];
-    _defaultImage: WMImage;
     _currentbbox: WMBBOX;
     _currentnewbbox: WMBBOX;
     _width: number;
     _height: number;
-    _webmapJSCallback: WMListener;
+    _webMapJS: WMJSMap;
     nrLoading: number;
     onLoadReadyFunction: (param: unknown) => void;
     _internalCallbacks: InternalCallback;
@@ -84,7 +83,8 @@ export default class WMCanvasBuffer {
     animationFrameRequest: number;
     timerHandle: NodeJS.Timeout;
     _errorList: LinkedInfo[];
-    constructor(webmapJSCallback: WMListener, _imageStore: WMImageStore, w: number, h: number, internalCallbacks: InternalCallback);
+    _isBufferLoading: boolean;
+    constructor(webMapJS: WMJSMap, w: number, h: number, internalCallbacks: InternalCallback);
     getCanvasContext(): CanvasRenderingContext2D;
     /**
      * Triggered by the WMImageStore when an image completes loading
@@ -113,8 +113,11 @@ export default class WMCanvasBuffer {
      * @returns Void
      */
     setSrc(layerIndex: number, imageSource: string, linkedInfo: LinkedInfoContent, opacity: number, bbox: WMBBOX): void;
+    checkIfLoading(): void;
+    isImageStoreLoading(): boolean;
     _getPixelCoordFromGeoCoord(coordinates: WMPosition, b: WMBBOX): WMPosition;
     setBBOX(newbbox: WMBBOX, loadedbbox: WMBBOX): void;
+    destroy(): void;
     getBuffer(): HTMLCanvasElement;
 }
 export {};

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

@@ -27,3 +27,5 @@ export declare const epsgDescriptionLookup: {
 export declare const mapImageStoreLength = 1000;
 export declare const bgImageStoreLength = 360;
 export declare const legendImageStoreLength = 500;
+export declare const EVENT_GETCAPABILITIES_START = "onstartgetcapabilities";
+export declare const EVENT_GETCAPABILITIES_READY = "onreadygetcapabilities";

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

@@ -42,4 +42,3 @@ export default class WMImageStore {
      */
     getImage(src: string, loadOptions?: WMImageOptions): WMImage;
 }
-export declare const getMapImageStore: WMImageStore;

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

@@ -1,3 +1,4 @@
+import WMImageStore from './WMImageStore';
 import WMBBOX from './WMBBOX';
 import WMListener from './WMListener';
 import { proj4 } from './WMJSExternalDependencies';
@@ -8,7 +9,6 @@ import { AnimationStep, Dimension, LinkedInfo } from './types';
 export declare const detectLeftButton: (evt: MouseEvent) => boolean;
 export declare const detectRightButton: (evt: MouseEvent) => boolean;
 export declare const getErrorsToDisplay: (canvasErrors: LinkedInfo[], getLayerByServiceAndName: (layerservice: string, layername: string) => WMLayer) => string[];
-export declare const clearImageCache: () => void;
 /**
 /**
   * WMJSMap class
@@ -113,6 +113,7 @@ export default class WMJSMap {
     private needsRedraw;
     private buildLayerDimsBusy;
     isProjectionSupported: (srs: string) => boolean;
+    getMapImageStore: WMImageStore;
     constructor(_element: HTMLElement);
     setWMTileRendererTileSettings(_WMTileRendererTileSettings: unknown): void;
     /**
@@ -316,4 +317,6 @@ export default class WMJSMap {
     showBoundingBox(_bbox?: WMBBOX, _mapbbox?: WMBBOX): void;
     hideBoundingBox(): void;
     getDrawBBOX(): WMBBOX;
+    getImageStore(): WMImageStore;
+    clearImageCache(): void;
 }

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

@@ -1,4 +1,6 @@
 import { LayerProps, LayerTree, WMSLayerFromGetCapabilities } from './types';
+import WMListener from './WMListener';
+export declare const wmServiceListener: WMListener;
 export interface GetCapabilitiesJson {
     WMS_Capabilities?: any;
     WMT_MS_Capabilities?: any;

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

@@ -60,7 +60,7 @@ export declare const getUriAddParam: (baseUrl: string, params: Record<string, an
  */
 export declare const dateToISO8601: (date: Date) => string;
 /**
- * Helper function to figure out the styles from the WMS layer object from the WMS GetCapabilties document
+ * Helper function to figure out the styles from the WMS layer object from the WMS GetCapabilities document
  * @param layerObjectFromWMS The layer object from the WMS GetCapabilities JSON document
  * @returns Style[] Array of style objects.
  */

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

@@ -140,7 +140,7 @@ export default class WMLayer {
     parseLayer(_layerDoneCallback: (layer: WMLayer) => void, forceReload: boolean, origin: string): void;
     /**
      * A Promise to parse the layer, it will fetch the WMS GetCapabilities document, configure the layer and resolve to a WMLayer object
-     * @param forceReload Do not use the cache of the WMS GetCapabilties document, but instead fetch new data from the server
+     * @param forceReload Do not use the cache of the WMS GetCapabilities document, but instead fetch new data from the server
      * @returns WMLayer object
      */
     parseLayerPromise(forceReload?: boolean): Promise<WMLayer>;

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

@@ -1,21 +1,57 @@
-export interface CallBack {
-    name: string;
-    finished: number;
-    keepOnCall: boolean;
-    functionpointer: (param?: unknown, that?: unknown) => void;
-}
-export type SuspendedEvent = Record<string, boolean>;
 export default class WMListener {
-    private _callBacks;
+    private registeredEvents;
     private _suspendedEvents;
-    private _allEventsSuspended;
+    private _suspendAllEvents;
     constructor();
-    addToCallback(name: string, functionpointer: (param: unknown) => void, keepOnCall?: boolean): boolean;
-    removeEvents(name: string, f: (param?: unknown) => unknown): void;
+    /**
+     * Remove events by name and function.
+     * @param name Event name
+     * @param f  Function pointer to check
+     */
+    removeEventListener(name: string, f: (param?: unknown) => unknown): number;
+    /**
+     * Remove all events by name
+     * @param name Event name
+     */
+    removeEventListeners(name: string): number;
+    /**
+     * Add multiple functions which will be called after the event with the same name is triggered
+     * @param name: The name of the event to register
+     * @param function: The function to trigger
+     * @param keepOnCall: When false, this event name and function combination is removed once triggered.
+     *                    When true Otherwise keep the event and allow it to be triggered multiple times
+     * @return: true if the event is registerd, false if it already was registered
+     */
+    addEventListener(name: string, functionpointer: (param: unknown) => void, keepOnCall?: boolean): boolean;
+    /**
+     * Destroys this listener, deregistering all events
+     */
     destroy(): void;
+    /**
+     * Suspend a specific event by name, triggers will not be called
+     * @param name
+     */
     suspendEvent(name: string): void;
+    /**
+     * Resume a specific event by name, resuming normal operation
+     * @param name
+     */
     resumeEvent(name: string): void;
+    /**
+     * This listener will not listen to any triggers
+     */
     suspendEvents(): void;
+    /**
+     * Resume event listening
+     */
     resumeEvents(): void;
+    /**
+     * Trigger an event with custom parameters
+     * @param name The name of the event to trigger
+     * @param param The parameters to provide to the associated function
+     * @returns The results of the function.
+     */
     triggerEvent(name: string, param?: unknown): unknown[];
+    private removeFinishedEvents;
+    removeEvents(name: string, f?: (param?: unknown) => unknown): number;
 }

package/src/lib/components/WMListener.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,19 +1,19 @@
-import WMJSMap, { clearImageCache } from './WMJSMap';
+import WMJSMap from './WMJSMap';
 import { isDefined, WMJScheckURL, URLDecode, URLEncode, toArray, debugLogger, DebugType, getUriWithParam } from './WMJSTools';
 import WMGetServiceFromStore from './WMGetServiceFromStore';
 import { parseISO8601DateToDate, DateInterval, parseISO8601IntervalToDateInterval, ParseISOTimeRangeDuration } from './WMTime';
 import I18n from '../utils/I18n/lang.en';
 import WMImage from './WMImage';
 import { getLegendGraphicURLForLayer, legendImageStore } from './WMLegend';
-import { getMapImageStore, WMImageEventType } from './WMImageStore';
-import { WMJSService } from './WMJSService';
+import { WMImageEventType } from './WMImageStore';
+import { WMJSService, wmServiceListener } from './WMJSService';
 import { getAlternativeImage } from './WMCanvasBuffer';
 export { default as WMJSDimension, handleMomentISOString, } from './WMJSDimension';
 export { default as WMLayer, LayerType } from './WMLayer';
 export type { LayerOptions, LayerFoundation } from './WMLayer';
 export { default as WMBBOX } from './WMBBOX';
 export type { Bbox } from './WMBBOX';
-export { WMJSMap, DateInterval, parseISO8601IntervalToDateInterval, ParseISOTimeRangeDuration, isDefined, WMGetServiceFromStore, WMJScheckURL, URLEncode, URLDecode, parseISO8601DateToDate, I18n, toArray, getLegendGraphicURLForLayer, legendImageStore, WMImage, debugLogger, DebugType, WMImageEventType, WMJSService, getMapImageStore, clearImageCache, getUriWithParam, getAlternativeImage, };
+export { WMJSMap, DateInterval, parseISO8601IntervalToDateInterval, ParseISOTimeRangeDuration, isDefined, WMGetServiceFromStore, WMJScheckURL, URLEncode, URLDecode, parseISO8601DateToDate, I18n, toArray, getLegendGraphicURLForLayer, legendImageStore, WMImage, debugLogger, DebugType, WMImageEventType, WMJSService, getUriWithParam, getAlternativeImage, wmServiceListener, };
 export * from './types';
 export * from './WMTimeTypes';
 export * from './WMConstants';

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

@@ -97,7 +97,7 @@ export interface WMSBoundingBox {
     };
 }
 /**
- * This interface is for reading from the WMS GetCapabilties document, which can have different structures for V1.1.1 and V1.3.0
+ * This interface is for reading from the WMS GetCapabilities document, which can have different structures for V1.1.1 and V1.3.0
  */
 export interface WMSLayerFromGetCapabilities {
     attr: {

package/src/lib/utils/index.d.ts

@@ -4,3 +4,6 @@ export * as webmapUtils from './utils';
 export * from './utils';
 export * from './testUtils';
 export * from './getCapabilities';
+export type { SpeedFactorType } from './mapConstants';
+export * as mapConstants from './mapConstants';
+export { speedFactors } from './mapConstants';

package/src/lib/utils/mapConstants.d.ts

@@ -0,0 +1,7 @@
+export declare const defaultAnimationDelayAtStart = 250;
+export declare const defaultDelay = 1000;
+export declare const defaultTimeStep = 60;
+export declare const defaultSecondsPerPx = 80;
+export declare const defaultTimeSpan: number;
+export type SpeedFactorType = 0.1 | 0.2 | 0.5 | 1 | 2 | 4 | 8 | 16;
+export declare const speedFactors: SpeedFactorType[];

package/src/lib/utils/utils.d.ts

@@ -1,4 +1,5 @@
 import type { WMJSDimension, WMJSMap, WMLayer } from '../components';
+import { SpeedFactorType } from './mapConstants';
 export declare const generateLayerId: () => string;
 export declare const generateMapId: () => string;
 export declare const generateTimesliderId: () => string;
@@ -44,3 +45,12 @@ export declare const getWMJSDimensionForLayerAndDimension: (layerId: string, dim
  * @return: The WMJSDimension if found, otherwise null
  */
 export declare const getWMJSTimeDimensionForLayerId: (layerId: string) => WMJSDimension;
+/**
+ * Clears the image store for all maps
+ */
+export declare const clearImageCacheForAllMaps: () => void;
+export declare const roundWithTimeStep: (unixTime: number, timeStep: number, type?: string) => number;
+/**
+ * Returns speed delay for given speedFactor. For options, see defined above in "speedFactors"
+ */
+export declare const getSpeedDelay: (speedFactor: SpeedFactorType) => number;