@maptrip/map-tiles 1.1.1 → 1.2.0

package/lib/core/VectorTileLoader.ts

@@ -0,0 +1,165 @@
+import type {
+  SuccessCallback,
+  TileQueueItem,
+  Tile,
+  MapTilesProperties,
+} from "../types/interfaces.js";
+
+class VectorTileLoader {
+  private _properties: typeof VectorTileLoader.DEFAULT_PROPERTIES;
+  private _tiles: TileQueueItem[];
+  private _numLoading: number;
+
+  constructor(properties: MapTilesProperties) {
+    this._properties = properties
+      ? { ...VectorTileLoader.DEFAULT_PROPERTIES, ...properties }
+      : VectorTileLoader.DEFAULT_PROPERTIES;
+
+    this._tiles = [];
+    this._numLoading = 0;
+  }
+
+  queue(
+    tile: Tile,
+    successCallback: SuccessCallback,
+    errorCallback: ErrorCallback
+  ): void {
+    this._tiles.push({
+      tile: tile,
+      successCallback: successCallback,
+      errorCallback: errorCallback,
+    });
+  }
+
+  loadNext(): void {
+    if (this._numLoading >= this._properties!.parallelDownloads! || 0) {
+      return;
+    }
+
+    if (this._tiles.length > 0) {
+      // filter all files with wrong zoom levels
+      let latestZoom = this._tiles[this._tiles.length - 1].tile.z;
+      this._tiles = this._tiles.filter((tile) => tile.tile.z === latestZoom);
+
+      // load the first tile
+      let next = this._tiles.shift();
+      if (!next) {
+        return;
+      }
+
+      // load all URLs for that tile
+      this.loadAllUrls(next, next.tile.urls);
+    }
+  }
+
+  /**
+   * Checks if a HTTP Request is successful
+   *
+   * @param {XMLHttpRequest} httpRequest
+   *
+   * @return {boolean}
+   */
+  isHttpRequestSuccessful(httpRequest: XMLHttpRequest): boolean {
+    return (
+      httpRequest.readyState === XMLHttpRequest.DONE &&
+      httpRequest.status === 200 &&
+      httpRequest.responseText.length > 0
+    );
+  }
+
+  /**
+   * Checks if a HTTP Request has failed (there was a timeout or the status code is an error)
+   *
+   * @param {XMLHttpRequest} httpRequest
+   *
+   * @return {boolean}
+   */
+  isHttpRequestFailed(httpRequest: XMLHttpRequest): boolean {
+    return (
+      this.isHttpRequestTimeout(httpRequest) ||
+      (httpRequest.readyState === XMLHttpRequest.DONE &&
+        httpRequest.status >= 400)
+    );
+  }
+
+  /**
+   * Checks if a HTTP Request has timed out
+   *
+   * @param {XMLHttpRequest} httpRequest
+   *
+   * @return {boolean}
+   */
+  isHttpRequestTimeout(httpRequest: XMLHttpRequest): boolean {
+    return (
+      httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 0
+    );
+  }
+
+  loadAllUrls(tile: TileQueueItem, urls: string[]): void {
+    var url = urls.pop();
+
+    if (!url) {
+      console.error("URl is null or undefined");
+      return;
+    }
+
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState !== XMLHttpRequest.DONE) {
+        return;
+      }
+
+      if (this.isHttpRequestSuccessful(xhr)) {
+        var json = JSON.parse(xhr.responseText); // XXX bei Fehlern des Data Servers kommt hier kein JSON sondern XML!
+
+        if (!tile.tile.json) {
+          tile.tile.json = json;
+        } else {
+          if (json && json.features && Array.isArray(json.features)) {
+            //@ts-ignore
+            tile.tile.json.features = tile.tile.json.features.concat(
+              json.features
+            );
+          } else {
+            console.error("Invalid GeoJSON data structure received");
+          }
+        }
+
+        if (urls.length === 0) {
+          // no more URLs left, so call the callback
+          tile.successCallback(tile.tile.json);
+        } else {
+          // load the remaining URLs
+          this.loadAllUrls(tile, urls);
+        }
+      }
+
+      if (this.isHttpRequestFailed(xhr) || this.isHttpRequestTimeout(xhr)) {
+        tile.errorCallback(xhr.responseText);
+      }
+
+      this._numLoading--;
+      this.loadNext();
+    };
+
+    xhr.ontimeout = () => {
+      tile.errorCallback(xhr.responseText);
+      this._numLoading--;
+      this.loadNext();
+    };
+
+    xhr.open("GET", url || "", true);
+    xhr.setRequestHeader("Authorization", `Bearer ${tile.tile.token}`);
+    xhr.timeout = this._properties!.timeout || 0;
+    xhr.send(null);
+
+    this._numLoading++;
+  }
+
+  static DEFAULT_PROPERTIES = {
+    timeout: 5000,
+    parallelDownloads: 12,
+  };
+}
+
+export { VectorTileLoader };