@opengeoweb/webmap 6.1.1 → 8.0.0

package/index.esm.js

@@ -529,6 +529,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -18272,6 +18278,11 @@ var WMImage = /*#__PURE__*/function () {
     value: function isLoadedWithoutErrors() {
       return this.isLoaded() && !this.hasError();
     }
+  }, {
+    key: "hasNotStartedLoading",
+    value: function hasNotStartedLoading() {
+      return !this._isLoaded && !this._isLoading;
+    }
     /**
      * Returns true if the image is still loading
      */
@@ -19178,7 +19189,7 @@ var WMCanvasBuffer = /*#__PURE__*/function () {
          * Check if this image has an error.
          * If the error has occured some time ago, and the amount of retries is low, just retry to load the image.
          */
-        if (imageToDisplay.hasError() && imageToDisplay.isLoading() === false && imageToDisplay.getLastErrorMSecondsAgo() > 5000 && imageToDisplay.getNumFailedAttempts() < 10) {
+        if ((imageToDisplay === null || imageToDisplay === void 0 ? void 0 : imageToDisplay.hasError()) && imageToDisplay.isLoading() === false && imageToDisplay.getLastErrorMSecondsAgo() > 5000 && imageToDisplay.getNumFailedAttempts() < 10) {
           imageToDisplay.forceReload();
         }
         /* Find closest alternative and display instead image */
@@ -19321,7 +19332,7 @@ var prefetch = function prefetch(requests) {
     var image = getMapImageStore.getImage(request.url, {
       headers: request.headers
     });
-    if (image.isLoaded() === false && image.isLoading() === false) {
+    if (image.hasNotStartedLoading()) {
       prefetching.push(image);
       image.load();
     }
@@ -25586,6 +25597,17 @@ function _typeof(o) {
   }, _typeof(o);
 }
 
+function toInteger(dirtyNumber) {
+  if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
+    return NaN;
+  }
+  var number = Number(dirtyNumber);
+  if (isNaN(number)) {
+    return number;
+  }
+  return number < 0 ? Math.ceil(number) : Math.floor(number);
+}
+
 function requiredArgs(required, args) {
   if (args.length < required) {
     throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
@@ -25643,6 +25665,112 @@ function toDate(argument) {
   }
 }
 
+/**
+ * Days in 1 week.
+ *
+ * @name daysInWeek
+ * @constant
+ * @type {number}
+ * @default
+ */
+
+/**
+ * Milliseconds in 1 minute
+ *
+ * @name millisecondsInMinute
+ * @constant
+ * @type {number}
+ * @default
+ */
+var millisecondsInMinute = 60000;
+
+/**
+ * Milliseconds in 1 hour
+ *
+ * @name millisecondsInHour
+ * @constant
+ * @type {number}
+ * @default
+ */
+var millisecondsInHour = 3600000;
+
+/**
+ * @name isDate
+ * @category Common Helpers
+ * @summary Is the given value a date?
+ *
+ * @description
+ * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
+ *
+ * @param {*} value - the value to check
+ * @returns {boolean} true if the given value is a date
+ * @throws {TypeError} 1 arguments required
+ *
+ * @example
+ * // For a valid date:
+ * const result = isDate(new Date())
+ * //=> true
+ *
+ * @example
+ * // For an invalid date:
+ * const result = isDate(new Date(NaN))
+ * //=> true
+ *
+ * @example
+ * // For some value:
+ * const result = isDate('2014-02-31')
+ * //=> false
+ *
+ * @example
+ * // For an object:
+ * const result = isDate({})
+ * //=> false
+ */
+function isDate(value) {
+  requiredArgs(1, arguments);
+  return value instanceof Date || _typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Date]';
+}
+
+/**
+ * @name isValid
+ * @category Common Helpers
+ * @summary Is the given date valid?
+ *
+ * @description
+ * Returns false if argument is Invalid Date and true otherwise.
+ * Argument is converted to Date using `toDate`. See [toDate]{@link https://date-fns.org/docs/toDate}
+ * Invalid Date is a Date, whose time value is NaN.
+ *
+ * Time value of Date: http://es5.github.io/#x15.9.1.1
+ *
+ * @param {*} date - the date to check
+ * @returns {Boolean} the date is valid
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // For the valid date:
+ * const result = isValid(new Date(2014, 1, 31))
+ * //=> true
+ *
+ * @example
+ * // For the value, convertable into a date:
+ * const result = isValid(1393804800000)
+ * //=> true
+ *
+ * @example
+ * // For the invalid date:
+ * const result = isValid(new Date(''))
+ * //=> false
+ */
+function isValid(dirtyDate) {
+  requiredArgs(1, arguments);
+  if (!isDate(dirtyDate) && typeof dirtyDate !== 'number') {
+    return false;
+  }
+  var date = toDate(dirtyDate);
+  return !isNaN(Number(date));
+}
+
 /**
  * @name isWithinInterval
  * @category Interval Helpers
@@ -25695,6 +25823,232 @@ function isWithinInterval(dirtyDate, interval) {
   return time >= startTime && time <= endTime;
 }
 
+/**
+ * @name parseISO
+ * @category Common Helpers
+ * @summary Parse ISO string
+ *
+ * @description
+ * Parse the given string in ISO 8601 format and return an instance of Date.
+ *
+ * Function accepts complete ISO 8601 formats as well as partial implementations.
+ * ISO 8601: http://en.wikipedia.org/wiki/ISO_8601
+ *
+ * If the argument isn't a string, the function cannot parse the string or
+ * the values are invalid, it returns Invalid Date.
+ *
+ * @param {String} argument - the value to convert
+ * @param {Object} [options] - an object with options.
+ * @param {0|1|2} [options.additionalDigits=2] - the additional number of digits in the extended year format
+ * @returns {Date} the parsed date in the local time zone
+ * @throws {TypeError} 1 argument required
+ * @throws {RangeError} `options.additionalDigits` must be 0, 1 or 2
+ *
+ * @example
+ * // Convert string '2014-02-11T11:30:30' to date:
+ * const result = parseISO('2014-02-11T11:30:30')
+ * //=> Tue Feb 11 2014 11:30:30
+ *
+ * @example
+ * // Convert string '+02014101' to date,
+ * // if the additional number of digits in the extended year format is 1:
+ * const result = parseISO('+02014101', { additionalDigits: 1 })
+ * //=> Fri Apr 11 2014 00:00:00
+ */
+function parseISO(argument, options) {
+  var _options$additionalDi;
+  requiredArgs(1, arguments);
+  var additionalDigits = toInteger((_options$additionalDi = options === null || options === void 0 ? void 0 : options.additionalDigits) !== null && _options$additionalDi !== void 0 ? _options$additionalDi : 2);
+  if (additionalDigits !== 2 && additionalDigits !== 1 && additionalDigits !== 0) {
+    throw new RangeError('additionalDigits must be 0, 1 or 2');
+  }
+  if (!(typeof argument === 'string' || Object.prototype.toString.call(argument) === '[object String]')) {
+    return new Date(NaN);
+  }
+  var dateStrings = splitDateString(argument);
+  var date;
+  if (dateStrings.date) {
+    var parseYearResult = parseYear(dateStrings.date, additionalDigits);
+    date = parseDate(parseYearResult.restDateString, parseYearResult.year);
+  }
+  if (!date || isNaN(date.getTime())) {
+    return new Date(NaN);
+  }
+  var timestamp = date.getTime();
+  var time = 0;
+  var offset;
+  if (dateStrings.time) {
+    time = parseTime(dateStrings.time);
+    if (isNaN(time)) {
+      return new Date(NaN);
+    }
+  }
+  if (dateStrings.timezone) {
+    offset = parseTimezone(dateStrings.timezone);
+    if (isNaN(offset)) {
+      return new Date(NaN);
+    }
+  } else {
+    var dirtyDate = new Date(timestamp + time);
+    // js parsed string assuming it's in UTC timezone
+    // but we need it to be parsed in our timezone
+    // so we use utc values to build date in our timezone.
+    // Year values from 0 to 99 map to the years 1900 to 1999
+    // so set year explicitly with setFullYear.
+    var result = new Date(0);
+    result.setFullYear(dirtyDate.getUTCFullYear(), dirtyDate.getUTCMonth(), dirtyDate.getUTCDate());
+    result.setHours(dirtyDate.getUTCHours(), dirtyDate.getUTCMinutes(), dirtyDate.getUTCSeconds(), dirtyDate.getUTCMilliseconds());
+    return result;
+  }
+  return new Date(timestamp + time + offset);
+}
+var patterns = {
+  dateTimeDelimiter: /[T ]/,
+  timeZoneDelimiter: /[Z ]/i,
+  timezone: /([Z+-].*)$/
+};
+var dateRegex = /^-?(?:(\d{3})|(\d{2})(?:-?(\d{2}))?|W(\d{2})(?:-?(\d{1}))?|)$/;
+var timeRegex = /^(\d{2}(?:[.,]\d*)?)(?::?(\d{2}(?:[.,]\d*)?))?(?::?(\d{2}(?:[.,]\d*)?))?$/;
+var timezoneRegex = /^([+-])(\d{2})(?::?(\d{2}))?$/;
+function splitDateString(dateString) {
+  var dateStrings = {};
+  var array = dateString.split(patterns.dateTimeDelimiter);
+  var timeString;
+
+  // The regex match should only return at maximum two array elements.
+  // [date], [time], or [date, time].
+  if (array.length > 2) {
+    return dateStrings;
+  }
+  if (/:/.test(array[0])) {
+    timeString = array[0];
+  } else {
+    dateStrings.date = array[0];
+    timeString = array[1];
+    if (patterns.timeZoneDelimiter.test(dateStrings.date)) {
+      dateStrings.date = dateString.split(patterns.timeZoneDelimiter)[0];
+      timeString = dateString.substr(dateStrings.date.length, dateString.length);
+    }
+  }
+  if (timeString) {
+    var token = patterns.timezone.exec(timeString);
+    if (token) {
+      dateStrings.time = timeString.replace(token[1], '');
+      dateStrings.timezone = token[1];
+    } else {
+      dateStrings.time = timeString;
+    }
+  }
+  return dateStrings;
+}
+function parseYear(dateString, additionalDigits) {
+  var regex = new RegExp('^(?:(\\d{4}|[+-]\\d{' + (4 + additionalDigits) + '})|(\\d{2}|[+-]\\d{' + (2 + additionalDigits) + '})$)');
+  var captures = dateString.match(regex);
+  // Invalid ISO-formatted year
+  if (!captures) return {
+    year: NaN,
+    restDateString: ''
+  };
+  var year = captures[1] ? parseInt(captures[1]) : null;
+  var century = captures[2] ? parseInt(captures[2]) : null;
+
+  // either year or century is null, not both
+  return {
+    year: century === null ? year : century * 100,
+    restDateString: dateString.slice((captures[1] || captures[2]).length)
+  };
+}
+function parseDate(dateString, year) {
+  // Invalid ISO-formatted year
+  if (year === null) return new Date(NaN);
+  var captures = dateString.match(dateRegex);
+  // Invalid ISO-formatted string
+  if (!captures) return new Date(NaN);
+  var isWeekDate = !!captures[4];
+  var dayOfYear = parseDateUnit(captures[1]);
+  var month = parseDateUnit(captures[2]) - 1;
+  var day = parseDateUnit(captures[3]);
+  var week = parseDateUnit(captures[4]);
+  var dayOfWeek = parseDateUnit(captures[5]) - 1;
+  if (isWeekDate) {
+    if (!validateWeekDate(year, week, dayOfWeek)) {
+      return new Date(NaN);
+    }
+    return dayOfISOWeekYear(year, week, dayOfWeek);
+  } else {
+    var date = new Date(0);
+    if (!validateDate(year, month, day) || !validateDayOfYearDate(year, dayOfYear)) {
+      return new Date(NaN);
+    }
+    date.setUTCFullYear(year, month, Math.max(dayOfYear, day));
+    return date;
+  }
+}
+function parseDateUnit(value) {
+  return value ? parseInt(value) : 1;
+}
+function parseTime(timeString) {
+  var captures = timeString.match(timeRegex);
+  if (!captures) return NaN; // Invalid ISO-formatted time
+
+  var hours = parseTimeUnit(captures[1]);
+  var minutes = parseTimeUnit(captures[2]);
+  var seconds = parseTimeUnit(captures[3]);
+  if (!validateTime(hours, minutes, seconds)) {
+    return NaN;
+  }
+  return hours * millisecondsInHour + minutes * millisecondsInMinute + seconds * 1000;
+}
+function parseTimeUnit(value) {
+  return value && parseFloat(value.replace(',', '.')) || 0;
+}
+function parseTimezone(timezoneString) {
+  if (timezoneString === 'Z') return 0;
+  var captures = timezoneString.match(timezoneRegex);
+  if (!captures) return 0;
+  var sign = captures[1] === '+' ? -1 : 1;
+  var hours = parseInt(captures[2]);
+  var minutes = captures[3] && parseInt(captures[3]) || 0;
+  if (!validateTimezone(hours, minutes)) {
+    return NaN;
+  }
+  return sign * (hours * millisecondsInHour + minutes * millisecondsInMinute);
+}
+function dayOfISOWeekYear(isoWeekYear, week, day) {
+  var date = new Date(0);
+  date.setUTCFullYear(isoWeekYear, 0, 4);
+  var fourthOfJanuaryDay = date.getUTCDay() || 7;
+  var diff = (week - 1) * 7 + day + 1 - fourthOfJanuaryDay;
+  date.setUTCDate(date.getUTCDate() + diff);
+  return date;
+}
+
+// Validation functions
+
+// February is null to handle the leap year (using ||)
+var daysInMonths = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+function isLeapYearIndex(year) {
+  return year % 400 === 0 || year % 4 === 0 && year % 100 !== 0;
+}
+function validateDate(year, month, date) {
+  return month >= 0 && month <= 11 && date >= 1 && date <= (daysInMonths[month] || (isLeapYearIndex(year) ? 29 : 28));
+}
+function validateDayOfYearDate(year, dayOfYear) {
+  return dayOfYear >= 1 && dayOfYear <= (isLeapYearIndex(year) ? 366 : 365);
+}
+function validateWeekDate(_year, week, day) {
+  return week >= 1 && week <= 53 && day >= 0 && day <= 6;
+}
+function validateTime(hours, minutes, seconds) {
+  if (hours === 24) {
+    return minutes === 0 && seconds === 0;
+  }
+  return seconds >= 0 && seconds < 60 && minutes >= 0 && minutes < 60 && hours >= 0 && hours < 25;
+}
+function validateTimezone(_hours, minutes) {
+  return minutes >= 0 && minutes <= 59;
+}
+
 /** ************************************************ */
 /* Object to store a time duration / time interval */
 /** ************************************************ */
@@ -28560,6 +28914,7 @@ var WMJSMap = /*#__PURE__*/function () {
       (_b = this.layers) === null || _b === void 0 ? void 0 : _b.forEach(function (layer) {
         var _a;
         if (layer.service && layer.enabled && layer.isConfigured) {
+          layer.prefetchImages();
           var requestURL = (_a = buildWMSGetMapRequest(_this9, layer)) === null || _a === void 0 ? void 0 : _a.url;
           if (requestURL) {
             _this9.divBuffer.setSrc(currentLayerIndex, requestURL, {
@@ -30895,6 +31250,23 @@ var WMGetServiceFromStore = function WMGetServiceFromStore(serviceName) {
   return service;
 };
 
+/* *
+ * 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 _WMLayer_instances, _WMLayer_prefetchImage;
 var LayerType;
 (function (LayerType) {
   LayerType["mapLayer"] = "mapLayer";
@@ -30909,18 +31281,17 @@ var LayerType;
  * @param layerDimNamesToRemove A set of dimensions names which are flagged for removal, this function removes the dimension from the set if found in the layer.
  */
 var addDimsForLayer = function addDimsForLayer(layerProps, layer, layerDimNamesToRemove) {
-  /* Information from the WMS GetCapabilities document */
-  var layerDims = layerProps.dimensions || [];
+  var _a;
   /* Loop through all the dims from the WMS GetCapabilities document for this layer */
-  var _loop = function _loop() {
+  (_a = layerProps.dimensions) === null || _a === void 0 ? void 0 : _a.forEach(function (layerDimension) {
     /* Obtain layerDim info from the GetCapabilities document and put into a WMSLayerDimInfo object  */
-    var dimName = (layerDims[d].name || '').toLowerCase();
+    var dimName = (layerDimension.name || '').toLowerCase();
     var layerDim = {
       name: dimName,
-      units: layerDims[d].units || '',
-      unitSymbol: layerDims[d].unitSymbol || '',
-      value: layerDims[d].values || '',
-      "default": layerDims[d].currentValue,
+      units: layerDimension.units || '',
+      unitSymbol: layerDimension.unitSymbol || '',
+      value: layerDimension.values || '',
+      "default": layerDimension.currentValue,
       isRefTimeDimension: dimName === 'reference_time'
     };
     /* Flag that this dim should not be removed from the layer */
@@ -30961,10 +31332,7 @@ var addDimsForLayer = function addDimsForLayer(layerProps, layer, layerDimNamesT
       dimensionToUpdate.reInitializeValues(dimensionToUpdate.values);
       dimensionToUpdate.setClosestValue(currentValue);
     }
-  };
-  for (var d = 0; d < layerDims.length; d += 1) {
-    _loop();
-  }
+  });
 };
 /**
  * Helper function to configure the WMS Styles from the WMS GetCapabilities document.
@@ -31036,7 +31404,10 @@ var configureGeographicBoundingBox = function configureGeographicBoundingBox(lay
 };
 var WMLayer = /*#__PURE__*/function () {
   function WMLayer(options) {
+    var _this = this;
     _classCallCheck(this, WMLayer);
+    var _a;
+    _WMLayer_instances.add(this);
     this.init = this.init.bind(this);
     this.getLayerName = this.getLayerName.bind(this);
     this.toggleAutoUpdate = this.toggleAutoUpdate.bind(this);
@@ -31117,10 +31488,10 @@ var WMLayer = /*#__PURE__*/function () {
       if (options.transparent === false) {
         this.transparent = false;
       }
-      if (options.dimensions && options.dimensions.length) {
-        for (var d = 0; d < options.dimensions.length; d += 1) {
-          this.dimensions.push(new WMJSDimension(options.dimensions[d]));
-        }
+      if ((_a = options.dimensions) === null || _a === void 0 ? void 0 : _a.length) {
+        options.dimensions.forEach(function (dimension) {
+          _this.dimensions.push(new WMJSDimension(dimension));
+        });
       }
       if (isDefined(options.onReady)) {
         this.onReady = options.onReady;
@@ -31182,12 +31553,12 @@ var WMLayer = /*#__PURE__*/function () {
   }, {
     key: "toggleAutoUpdate",
     value: function toggleAutoUpdate() {
-      var _this = this;
+      var _this2 = this;
       this.autoupdate = !this.autoupdate;
       if (this.autoupdate) {
         var numDeltaMS = 60000;
         this.timer = setInterval(function () {
-          _this.parseLayer(undefined, true, 'WMLayer toggleAutoUpdate');
+          _this2.parseLayer(undefined, true, 'WMLayer toggleAutoUpdate');
         }, numDeltaMS);
       } else {
         clearInterval(this.timer);
@@ -31196,14 +31567,14 @@ var WMLayer = /*#__PURE__*/function () {
   }, {
     key: "setAutoUpdate",
     value: function setAutoUpdate(val, interval, callback) {
-      var _this2 = this;
+      var _this3 = this;
       if (val !== this.autoupdate) {
         this.autoupdate = val;
         if (!val) {
           clearInterval(this.timer);
         } else {
           this.timer = setInterval(function () {
-            _this2.parseLayer(callback, true, 'WMLayer setAutoUpdate');
+            _this3.parseLayer(callback, true, 'WMLayer setAutoUpdate');
           }, interval);
         }
       }
@@ -31262,18 +31633,15 @@ var WMLayer = /*#__PURE__*/function () {
     key: "handleReferenceTime",
     value: function handleReferenceTime(name, value) {
       var updateMapDimensions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      if (name === 'reference_time') {
-        var timeDim = this.getDimension('time');
-        var referenceTimeDim = this.getDimension(name);
-        if (timeDim) {
-          timeDim.setTimeValuesForReferenceTime(value, referenceTimeDim);
-          if (updateMapDimensions) {
-            if (this.parentMap) {
-              if (this.enabled !== false) {
-                this.parentMap.getListener().triggerEvent('ondimchange', 'time');
-              }
-            }
-          }
+      if (name !== 'reference_time') {
+        return;
+      }
+      var timeDim = this.getDimension('time');
+      var referenceTimeDim = this.getDimension(name);
+      if (timeDim) {
+        timeDim.setTimeValuesForReferenceTime(value, referenceTimeDim);
+        if (updateMapDimensions && this.parentMap && this.enabled !== false) {
+          this.parentMap.getListener().triggerEvent('ondimchange', 'time');
         }
       }
     }
@@ -31289,27 +31657,20 @@ var WMLayer = /*#__PURE__*/function () {
       if (!isDefined(value)) {
         return;
       }
-      var dimIndex = this.dimensions.findIndex(function (dim) {
-        return dim.name === name;
-      });
-      if (dimIndex < 0) {
+      var dim = this.getDimension(name);
+      if (!dim) {
         return;
       }
-      var dim = this.dimensions[dimIndex];
       dim.setValue(value);
       this.handleReferenceTime(name, value, updateMapDimensions);
-      if (updateMapDimensions) {
-        if (dim.linked === true) {
-          if (this.parentMap) {
-            this.parentMap.setDimension(name, dim.getValue());
-          }
-        }
+      if (updateMapDimensions && dim.linked === true && this.parentMap) {
+        this.parentMap.setDimension(name, dim.getValue());
       }
     }
   }, {
     key: "__parseGetCapForLayer",
     value: function __parseGetCapForLayer(getcapabilitiesjson, layerDoneCallback, fail) {
-      var _this3 = this;
+      var _this4 = this;
       if (!getcapabilitiesjson) {
         this.title = I18n.service_has_error.text;
         this["abstract"] = I18n.not_available_message.text;
@@ -31399,36 +31760,36 @@ var WMLayer = /*#__PURE__*/function () {
       this.path = '';
       // Function will be called when the layer with the right name is found in the getcap doc
       var populateLayerFromTreeElement = function populateLayerFromTreeElement(jsonlayer) {
-        _this3.title = jsonlayer.title || jsonlayer.name || '';
-        _this3["abstract"] = jsonlayer["abstract"] || I18n.not_available_message.text;
-        _this3.path = jsonlayer.path.join('/');
+        _this4.title = jsonlayer.title || jsonlayer.name || '';
+        _this4["abstract"] = jsonlayer["abstract"] || I18n.not_available_message.text;
+        _this4.path = jsonlayer.path.join('/');
         /** ***************** Go through styles **************** */
-        configureStyles(jsonlayer, _this3);
+        configureStyles(jsonlayer, _this4);
         /** ***************** Go through Dimensions **************** */
-        configureDimensions(jsonlayer, _this3);
+        configureDimensions(jsonlayer, _this4);
         /** ***************** Go through geographicBoundingBox **************** */
-        configureGeographicBoundingBox(jsonlayer, _this3);
-        _this3.queryable = jsonlayer.queryable || false;
+        configureGeographicBoundingBox(jsonlayer, _this4);
+        _this4.queryable = jsonlayer.queryable || false;
         if (jsonlayer.crs) {
           jsonlayer.crs.forEach(function (p) {
             var wmProjection = new WMProjection();
             wmProjection.srs = p.name || '';
             if (p.bbox) {
-              var swapBBOX = _this3.version === WMSVersion.version130 && wmProjection.srs === 'EPSG:4326' && _this3.wms130bboxcompatibilitymode === false;
+              var swapBBOX = _this4.version === WMSVersion.version130 && wmProjection.srs === 'EPSG:4326' && _this4.wms130bboxcompatibilitymode === false;
               if (swapBBOX) {
                 wmProjection.bbox.setBBOX(p.bbox.bottom, p.bbox.left, p.bbox.top, p.bbox.right);
               } else {
                 wmProjection.bbox.setBBOX(p.bbox.left, p.bbox.bottom, p.bbox.right, p.bbox.top);
               }
             }
-            _this3.projectionProperties.push(wmProjection);
+            _this4.projectionProperties.push(wmProjection);
           });
         }
       };
       var layerTreeStructure = buildLayerTreeFromNestedWMSLayer(rootLayer);
       /* Recursively walk the layertree until a child is found with the corresponding name */
       var findTreeNode = function findTreeNode(tree) {
-        if (tree.name === _this3.name) {
+        if (tree.name === _this4.name) {
           return tree;
         }
         if (tree.children) {
@@ -31473,7 +31834,7 @@ var WMLayer = /*#__PURE__*/function () {
     value: function parseLayer(_layerDoneCallback, forceReload,
     // eslint-disable-next-line no-unused-vars
     origin) {
-      var _this4 = this;
+      var _this5 = this;
       this.hasError = false;
       var layerDoneCallback = function layerDoneCallback(__layer) {
         if (isDefined(_layerDoneCallback)) {
@@ -31488,19 +31849,19 @@ var WMLayer = /*#__PURE__*/function () {
         }
       };
       var fail = function fail(_layer, message) {
-        _this4.hasError = true;
-        _this4.lastError = message;
-        _this4.title = I18n.service_has_error.text;
+        _this5.hasError = true;
+        _this5.lastError = message;
+        _this5.title = I18n.service_has_error.text;
         layerDoneCallback(_layer);
-        if (isDefined(_this4._options.failure)) {
-          _this4._options.failure(_layer, message);
+        if (isDefined(_this5._options.failure)) {
+          _this5._options.failure(_layer, message);
         }
       };
       var callback = function callback(data) {
-        _this4.__parseGetCapForLayer(data, layerDoneCallback, fail);
+        _this5.__parseGetCapForLayer(data, layerDoneCallback, fail);
       };
       var requestfail = function requestfail() {
-        fail(_this4, I18n.no_capability_element_found.text);
+        fail(_this5, I18n.no_capability_element_found.text);
       };
       var options = {
         headers: {}
@@ -31523,10 +31884,10 @@ var WMLayer = /*#__PURE__*/function () {
   }, {
     key: "parseLayerPromise",
     value: function parseLayerPromise() {
-      var _this5 = this;
+      var _this6 = this;
       var forceReload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       return new Promise(function (resolve, reject) {
-        _this5.parseLayer(function (layer) {
+        _this6.parseLayer(function (layer) {
           if (layer.hasError === true) {
             debug(DebugType.Error, "[ERROR] Parse layer failed, Reason [".concat(layer.lastError, "]"));
             reject(layer);
@@ -31631,13 +31992,9 @@ var WMLayer = /*#__PURE__*/function () {
   }, {
     key: "getDimension",
     value: function getDimension(name) {
-      var dimIndex = this.dimensions.findIndex(function (dim) {
+      return this.dimensions.find(function (dim) {
         return dim.name === name;
       });
-      if (dimIndex < 0) {
-        return undefined;
-      }
-      return this.dimensions[dimIndex];
     }
     /**
      * Returns the Coordinate Reference Systems for this layer
@@ -31707,9 +32064,51 @@ var WMLayer = /*#__PURE__*/function () {
         this.parentMap.displayLayer(this, this.enabled);
       }
     }
+  }, {
+    key: "prefetchImages",
+    value: function prefetchImages() {
+      var _this7 = this;
+      var timeDimension = this.getDimension('time');
+      if (!timeDimension) {
+        return;
+      }
+      var currentTime = timeDimension.currentValue;
+      var currentTimeIndex = timeDimension.getIndexForValue(currentTime);
+      var lastIndex = timeDimension.size();
+      if (currentTimeIndex < 0 || lastIndex <= 0) {
+        return;
+      }
+      var COUNT_IMAGES_TO_PRELOAD_BEFORE_AND_AFTER_CURRENT_TIME = 10;
+      lodash.exports.range(1, COUNT_IMAGES_TO_PRELOAD_BEFORE_AND_AFTER_CURRENT_TIME).forEach(function (offset) {
+        var nextImageIndex = currentTimeIndex + offset;
+        if (nextImageIndex < lastIndex) {
+          __classPrivateFieldGet(_this7, _WMLayer_instances, "m", _WMLayer_prefetchImage).call(_this7, timeDimension, nextImageIndex, currentTime);
+        }
+        var previousImageIndex = currentTimeIndex - offset;
+        if (previousImageIndex >= 0) {
+          __classPrivateFieldGet(_this7, _WMLayer_instances, "m", _WMLayer_prefetchImage).call(_this7, timeDimension, previousImageIndex, currentTime);
+        }
+      });
+    }
   }]);
   return WMLayer;
 }();
+_WMLayer_instances = new WeakSet(), _WMLayer_prefetchImage = function _WMLayer_prefetchImage(timeDimension, index, currentTime) {
+  var time = timeDimension.getValueForIndex(index);
+  var timeIsNotAValidIsoString = typeof time !== 'string' || !isValid(parseISO(time));
+  if (timeIsNotAValidIsoString) {
+    return;
+  }
+  timeDimension.setValue(time);
+  var request = buildWMSGetMapRequest(this.parentMap, this);
+  if (request) {
+    var image = getMapImageStore.getImage(request.url);
+    if (image.hasNotStartedLoading()) {
+      image.load();
+    }
+  }
+  timeDimension.setValue(currentTime);
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -31888,13 +32287,7 @@ var defaultReduxLayerRadarColor = {
   enabled: true,
   layerType: LayerType.mapLayer,
   dimensions: [],
-  styles: [{
-    title: 'rainbow/nearest',
-    name: 'rainbow/nearest',
-    legendURL: 'https://geoservices.knmi.nl/wms?dataset=RADAR&SERVICE=WMS&&version=1.1.1&service=WMS&request=GetLegendGraphic&layer=RAD_NL25_PCP_CM&format=image/png&STYLE=precip-rainbow/nearest',
-    "abstract": 'No abstract available'
-  }],
-  id: 'layerid_1'
+  id: generateLayerId()
 };
 var multiDimensionLayer = {
   service: 'https://testservice',
@@ -32931,4 +33324,4 @@ var getCapabilities = /*#__PURE__*/Object.freeze({
   getLayersFlattenedFromService: getLayersFlattenedFromService
 });
 
-export { DateInterval, DebugType, EPSGCode, I18n, LayerType, ParseISOTimeRangeDuration, URLDecode, URLEncode, WMBBOX, WMDateOutSideRange, WMDateTooEarlyString, WMDateTooLateString, WMEmptyLayerName, WMEmptyLayerTitle, WMGetServiceFromStore, WMImage, WMImageEventType, WMJSDimension, WMJSMap, WMJSService, WMJScheckURL, WMLayer, WMTimer, clearImageCache, debug, 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, generateLayerId, generateMapId, generateTimesliderId, getCapabilities, getLegendGraphicURLForLayer, getMapImageStore, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, isDefined, legendImageStore, mockGetCapabilities, parseISO8601DateToDate, parseISO8601IntervalToDateInterval, registerWMJSMap, registerWMLayer, tilesettings, toArray, unRegisterAllWMJSLayersAndMaps, unRegisterWMJSLayer, unRegisterWMJSMap, testSettings as webmapTestSettings, utils as webmapUtils };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap",
-  "version": "6.1.1",
+  "version": "8.0.0",
   "description": "GeoWeb webmap library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -12,8 +12,9 @@
   "main": "./index.esm.js",
   "dependencies": {},
   "peerDependencies": {
-    "@opengeoweb/shared": "6.1.1",
+    "@opengeoweb/shared": "8.0.0",
     "date-fns": "2.30.0",
+    "immer": "9.0.21",
     "lodash": "4.17.21",
     "moment": "2.29.4",
     "proj4": "2.9.0",

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

@@ -36,6 +36,7 @@ export default class WMImage {
      */
     isLoaded(): boolean;
     isLoadedWithoutErrors(): boolean;
+    hasNotStartedLoading(): boolean;
     /**
      * Returns true if the image is still loading
      */

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

@@ -1,5 +1,5 @@
 import type WMJSMap from './WMJSMap';
-import WMLayer from './WMLayer';
+import type WMLayer from './WMLayer';
 export declare const getBBOXandProjString: (map: WMJSMap, layer: WMLayer) => string;
 export declare const buildWMSGetMapRequest: (map: WMJSMap, layer: WMLayer) => {
     url: string;

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

@@ -65,6 +65,7 @@ export declare const configureStyles: (layerProps: LayerProps, wmLayer: WMLayer)
 export declare const configureDimensions: (layerProps: LayerProps, wmLayer: WMLayer) => void;
 export declare const configureGeographicBoundingBox: (layerProps: LayerProps, wmLayer: WMLayer) => void;
 export default class WMLayer {
+    #private;
     id: string;
     name?: string;
     ReactWMJSLayerId?: string;
@@ -162,7 +163,7 @@ export default class WMLayer {
      */
     getStyleObject(styleName: string, nextPrev: number): Style;
     getStyle(): string;
-    getDimension(name: string): WMJSDimension;
+    getDimension(name: string): WMJSDimension | undefined;
     /**
      * Returns the Coordinate Reference Systems for this layer
      * @returns List of WMProjection objects
@@ -184,4 +185,5 @@ export default class WMLayer {
     getProjection(srsName: string): WMProjection;
     setSLDURL(url: string): void;
     display(displayornot: boolean): void;
+    prefetchImages(): void;
 }

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

@@ -1,4 +1,5 @@
 export * as webmapTestSettings from './testSettings';
 export * from './tilesettings';
 export * as webmapUtils from './utils';
+export * from './utils';
 export * from './getCapabilities';

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

@@ -1,22 +1,6 @@
-import { CoordinateReferenceSystem, Dimension, LayerFoundation, LayerOptions, LayerType, Style, WMLayer } from '../components';
-export declare const defaultReduxLayerRadarColor: {
-    service: string;
-    name: string;
-    title: string;
-    format: string;
-    style: string;
-    enabled: boolean;
-    layerType: LayerType;
-    dimensions: never[];
-    styles: {
-        title: string;
-        name: string;
-        legendURL: string;
-        abstract: string;
-    }[];
-    id: string;
-};
-export declare const multiDimensionLayer: LayerFoundation;
+import { CoordinateReferenceSystem, Dimension, LayerFoundation, LayerOptions, Style, WMLayer } from '../components';
+export declare const defaultReduxLayerRadarColor: LayerOptions;
+export declare const multiDimensionLayer: LayerOptions;
 export declare const WmdefaultReduxLayerRadarKNMI: WMLayer;
 export declare const defaultReduxLayerRadarKNMI: LayerFoundation & {
     styles: Style[];

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

@@ -1,19 +1,5 @@
-import { LayerType } from '../components/WMLayer';
-export declare const defaultReduxLayerRadarKNMI: {
-    service: string;
-    name: string;
-    title: string;
-    format: string;
-    style: string;
-    enabled: boolean;
-    layerType: LayerType;
-    dimensions: {
-        name: string;
-        units: string;
-        currentValue: string;
-    }[];
-    id: string;
-};
+import { LayerOptions, LayerType } from '../components/WMLayer';
+export declare const defaultReduxLayerRadarKNMI: LayerOptions;
 export declare const multiDimensionLayer: {
     service: string;
     id: string;