maplibre-tilepackage-protocol 1.2.0 → 1.2.2

package/eslint.config.mjs

@@ -0,0 +1,28 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {
+    rules: {
+      semi: "error",
+      "no-var": "error",
+      "prefer-const": "error",
+    },
+    languageOptions: {
+      ecmaVersion: 2017,
+      sourceType: "module",
+      globals: globals.browser,
+    },
+    plugins: {
+      prettier: {
+        "prettier/prettier": "error",
+        //"linebreak-style": ["error", "windows"],
+        "no-console": ["error", { allow: ["info", "warn", "error"] }],
+        "no-unused-vars": ["error", { vars: "all", args: "none" }],
+        semi: ["error", "always"],
+      },
+    },
+  },
+  pluginJs.configs.recommended,
+];

package/package.json

@@ -1,43 +1,42 @@
-{
-  "name": "maplibre-tilepackage-protocol",
-  "version": "1.2.0",
-  "description": "Maplibre-gl-js protocol for reading VTPK and TPKX files",
-  "homepage": "https://github.com/spatialillusions/maplibre-tilepackage-protocol#readme",
-  "bugs": {
-    "url": "https://github.com/spatialillusions/maplibre-tilepackage-protocol/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/spatialillusions/maplibre-tilepackage-protocol.git"
-  },
-  "license": "MIT",
-  "author": "Måns Beckman",
-  "type": "module",
-  "main": "src/index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c",
-    "build:esm": "rollup -c --configPlugin @rollup/plugin-node-resolve",
-    "demo": "npm run build"
-  },
-  "dependencies": {
-    "@mapbox/point-geometry": "^0.1.0",
-    "@mapbox/vector-tile": "^1.3.1",
-    "@maplibre/vt-pbf": "^4.1.0",
-    "fflate": "^0.8.2",
-    "maplibre-local-glyphs": "^1.2.0",
-    "pbf": "^3.2.1"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^26.0.3",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "rollup": "^4.53.3"
-  },
-  "module": "dist/index.esm.js",
-  "exports": {
-    ".": {
-      "import": "./dist/index.esm.js",
-      "require": "./src/index.js"
-    }
-  }
-}
+{
+  "name": "maplibre-tilepackage-protocol",
+  "version": "1.2.2",
+  "description": "Maplibre-gl-js protocol for reading VTPK and TPKX files",
+  "homepage": "https://github.com/spatialillusions/maplibre-tilepackage-protocol#readme",
+  "bugs": {
+    "url": "https://github.com/spatialillusions/maplibre-tilepackage-protocol/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/spatialillusions/maplibre-tilepackage-protocol.git"
+  },
+  "license": "MIT",
+  "author": "Måns Beckman",
+  "type": "module",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup -c",
+    "build:esm": "rollup -c --configPlugin @rollup/plugin-node-resolve",
+    "demo": "npm run build"
+  },
+  "dependencies": {
+    "@mapbox/point-geometry": "^0.1.0",
+    "@mapbox/vector-tile": "^1.3.1",
+    "@maplibre/vt-pbf": "^4.1.0",
+    "fflate": "^0.8.3",
+    "pbf": "^3.2.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^26.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "rollup": "^4.59.0"
+  },
+  "module": "dist/index.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./src/index.js"
+    }
+  }
+}

package/rollup.config.mjs

@@ -8,7 +8,6 @@ const externals = [
   "pbf",
   "@mapbox/point-geometry",
   "@maplibre/vt-pbf",
-  "maplibre-local-glyphs",
 ];
 
 function onwarn(warning) {

package/src/get-header-and-filelist.js

@@ -1,4 +1,5 @@
-import getJsonFromFile from "./get-json-from-file.js";
+import getJsonFromFile from "./zip/get-json-from-file.js";
+import getFilelistFromTilePackage from "./zip/get-filelist.js";
 
 function xmlToJson(xmlString) {
   const parser = new DOMParser();
@@ -71,132 +72,9 @@ export function jsonToHeader(json, files, etag) {
  */
 export default async function getHeaderAndFileList(source) {
   const key = source.getKey();
-  const fileSize = await source.getSize();
-  const resp = await source.getBytes(fileSize - 98, 98);
-  let v = new DataView(resp.data, 0, 98);
-  let entriesCentralDirectory, sizeCentralDirectory, offsetCentralDirectory;
-  //let bigZip64 = false;
-  if (v.getUint32(0, true) === 0x06064b50) {
-    // This is a ZIP64 tilepackage
-    //bigZip64 = true;
-    entriesCentralDirectory = Number(v.getBigUint64(32, true));
-    sizeCentralDirectory = Number(v.getBigUint64(40, true));
-    offsetCentralDirectory = Number(v.getBigUint64(48, true));
-  } else {
-    v = new DataView(resp.data, 98 - 22, 22);
-    if (v.getUint32(0, true) === 0x06054b50) {
-      // This is a ordinary zip archive
-      entriesCentralDirectory = Number(v.getUint16(10, true));
-      sizeCentralDirectory = Number(v.getUint32(12, true));
-      offsetCentralDirectory = Number(v.getUint32(16, true));
-    } else {
-      throw new Error("Wrong magic number for Zip archive");
-    }
-  }
-
-  const centralDirectory = await source.getBytes(
-    offsetCentralDirectory,
-    sizeCentralDirectory,
-  );
-
-  v = new DataView(centralDirectory.data, 0, sizeCentralDirectory);
-  if (v.getUint32(0, true) !== 0x02014b50) {
-    throw new Error("Wrong magic number for Central Directory archive");
-  }
-
-  let entryStart = 0;
-  const tilePackageFiles = {};
-  for (let i = 0; i < entriesCentralDirectory; i++) {
-    if (entryStart >= sizeCentralDirectory) break;
-    /*
-        central file header signature   4 bytes  (0x02014b50)
-        version made by                 2 bytes
-        version needed to extract       2 bytes
-        general purpose bit flag        2 bytes
-        compression method              2 bytes
-        last mod file time              2 bytes
-        last mod file date              2 bytes
-        crc-32                          4 bytes
-        compressed size                 4 bytes
-        uncompressed size               4 bytes
-        file name length                2 bytes
-        extra field length              2 bytes
-        file comment length             2 bytes
-        disk number start               2 bytes
-        internal file attributes        2 bytes
-        external file attributes        4 bytes
-        relative offset of local header 4 bytes
-
-        file name (variable size)
-        extra field (variable size)
-        file comment (variable size)
-    */
-    let sizeFile = v.getUint32(entryStart + 20, true);
-
-    const sizeFileName = v.getUint16(entryStart + 28, true);
-
-    const sizeExtraField = v.getUint16(entryStart + 30, true);
-
-    const sizeComment = v.getUint16(entryStart + 32, true);
-
-    let relativeOffset = v.getUint32(entryStart + 42, true);
-
-    const vFilename = new DataView(
-      centralDirectory.data,
-      entryStart + 46,
-      sizeFileName,
-    );
-    const decoder = new TextDecoder("utf-8");
-    const filename = decoder.decode(vFilename);
-
-    if (
-      (sizeFile == 0xffffffff || relativeOffset == 0xffffffff) &&
-      sizeExtraField > 0
-    ) {
-      const vExtended = new DataView(
-        centralDirectory.data,
-        entryStart + 46 + sizeFileName,
-        32,
-      );
-      if (vExtended.getUint16(0, true) == 0x0001) {
-        /*
-        Value      Size       Description
-        -----      ----       -----------
-(ZIP64) 0x0001     2 bytes    Tag for this "extra" block type
-        Size       2 bytes    Size of this "extra" block
-        Original 
-        Size       8 bytes    Original uncompressed file size
-        Compressed
-        Size       8 bytes    Size of compressed data
-        Relative Header
-        Offset     8 bytes    Offset of local header record
-        Disk Start
-        Number     4 bytes    Number of the disk on which
-                              this file starts
-      */
-
-        let j = 0;
-        if (sizeFile == 0xffffffff) {
-          sizeFile = Number(vExtended.getBigUint64(4, true));
-          j += 8;
-        }
-        if (relativeOffset == 0xffffffff) {
-          relativeOffset = Number(vExtended.getBigUint64(4 + j, true));
-        }
-      }
-    }
-
-    tilePackageFiles[filename] = {
-      filename: filename,
-      size: sizeFile,
-      relativeOffset: relativeOffset,
-      absoluteOffset: relativeOffset + 30 + filename.length,
-    };
-    entryStart += 46 + sizeFileName + sizeExtraField + sizeComment;
-  }
-
+  const { files: tilePackageFiles, etag } =
+    await getFilelistFromTilePackage(source);
   let root = {};
-
   if (key.indexOf(".tpkx") !== -1) {
     // TPKX
     root = await getJsonFromFile("root.json", tilePackageFiles, source);
@@ -278,11 +156,9 @@ export default async function getHeaderAndFileList(source) {
       coverageMap[0][0][0] = "blob";
       calculateCoverage(0, 0, 0, tilemap.index, coverageMap);
       root.coverageMap = coverageMap;
-    } else {
-      // Coverage map unavailable (either disabled or missing tilemap/root.json)
     }
   }
 
-  const header = jsonToHeader(root, tilePackageFiles, resp.etag);
+  const header = jsonToHeader(root, tilePackageFiles, etag);
   return [header, ""];
 }

package/src/get-json-from-file.js

@@ -1,12 +1 @@
-export default async function getJsonFromFile(file, tilePackageFiles, source) {
-  const decoder = new TextDecoder("utf-8");
-  if (tilePackageFiles[file]) {
-    const fileOffset = tilePackageFiles[file].absoluteOffset;
-    const fileJSON = await source.getBytes(
-      fileOffset,
-      tilePackageFiles[file].size,
-    );
-    return JSON.parse(decoder.decode(fileJSON.data));
-  }
-  return {};
-}
+export { default } from "./zip/get-json-from-file.js";

package/src/index.js

@@ -3,7 +3,7 @@ export * from "./source.js";
 import { FetchSource } from "./source.js";
 import subdivideVectorTile from "./tilecutter/subdivide.js";
 import defaultDecompress from "./default-decompress.js";
-import getJsonFromFile from "./get-json-from-file.js";
+import getJsonFromFile from "./zip/get-json-from-file.js";
 import SharedPromiseCache from "./shared-promise-cache.js";
 
 function calculateFilename(z, x, y, header) {
@@ -12,7 +12,12 @@ function calculateFilename(z, x, y, header) {
   const baseCol = Math.floor(x / 128) * 128;
   const rowHex = baseRow.toString(16).padStart(4, "0");
   const colHex = baseCol.toString(16).padStart(4, "0");
-  let basePath = header.type === "tpkx" ? "tile" : "p12/tile";
+  let basePath;
+  if (header.type === "tpkx") {
+    basePath = `tile`;
+  } else {
+    basePath = `p12/tile`;
+  }
   return `${basePath}/L${zoom}/R${rowHex}C${colHex}.bundle`;
 }
 
@@ -22,6 +27,10 @@ function getTileInfoFromTileIndex(tileIndex, z, x, y) {
   return tileIndex[row][col];
 }
 
+/**
+ * Error thrown when a response for TilePackage over HTTP does not match previous, cached parts of the archive.
+ * The default TilePackage implementation will catch this error once internally and retry a request.
+ */
 class EtagMismatch extends Error {
   constructor(message) {
     super(message);
@@ -34,25 +43,23 @@ export class TilePackage {
     // Default coverageCheck enabled; disable with coverageCheck:false
     this.coverageCheck = 1;
     if (options && options.coverageCheck === false) this.coverageCheck = 0;
-    // Max dz guard (skip subdivision beyond this): default 8
-    this.maxDz =
-      options && typeof options.maxDz === "number" ? options.maxDz : 8;
     if (typeof source === "string") {
-      const opts = this.coverageCheck
-        ? { coverageCheck: this.coverageCheck }
-        : undefined;
-      this.source = new FetchSource(source, opts);
+      this.source = new FetchSource(source, this.coverageCheck);
     } else {
       this.source = source;
-      // Propagate default coverageCheck to existing Source instances if undefined
-      if (this.source && this.source.coverageCheck === undefined) {
-        this.source.coverageCheck = this.coverageCheck;
-      }
     }
-    this.decompress =
-      options && options.decompress ? options.decompress : defaultDecompress;
-    this.cache =
-      options && options.cache ? options.cache : new SharedPromiseCache();
+
+    if (options && options.decompress) {
+      this.decompress = options.decompress;
+    } else {
+      this.decompress = defaultDecompress;
+    }
+
+    if (options && options.cache) {
+      this.cache = options.cache;
+    } else {
+      this.cache = new SharedPromiseCache();
+    }
   }
 
   async getHeader() {
@@ -169,6 +176,7 @@ export class TilePackage {
 
   async getMetadataAttempt() {
     const header = await this.cache.getHeader(this.source);
+
     let metadata = {};
     if (header.packageType === "vtpk") {
       const resp = await this.source.getBytes(
@@ -177,10 +185,12 @@ export class TilePackage {
         undefined,
         header.etag,
       );
+
       const decoder = new TextDecoder("utf-8");
       metadata = JSON.parse(decoder.decode(resp.data));
     }
     metadata.name = header.name;
+
     return metadata;
   }
 
@@ -198,7 +208,10 @@ export class TilePackage {
 
   async getResourceAttempt(file, signal) {
     const header = await this.cache.getHeader(this.source);
-    if (!header.files[file]) return undefined;
+    if (!header.files[file]) {
+      return undefined;
+    }
+
     const resource = await this.cache.getResource(
       this.source,
       file,
@@ -238,49 +251,36 @@ export class TilePackage {
         header.files,
         this.source,
       );
-      if (style.sources && style.sources.esri) {
-        delete style.sources.esri.url;
-        style.sources.esri.tiles = [`tilepackage://${sourceKey}/{z}/{x}/{y}`];
-        style.sources.esri.type = style.sources.esri.type || "vector";
-        style.sources.esri.minzoom = header.minZoom || 0;
-        style.sources.esri.maxzoom = header.maxZoom || 22;
-      }
-      for (const k in style.sources) {
-        const src = style.sources[k];
-        if (
-          src &&
-          typeof src.url === "string" &&
-          src.url.startsWith("tilepackage://")
-        ) {
-          delete src.url;
-          if (!src.tiles)
-            src.tiles = [`tilepackage://${sourceKey}/{z}/{x}/{y}`];
-        }
-      }
-      if (metadata.copyrightText)
+      style.sources.esri.url = `tilepackage://${sourceKey}`;
+      style.sources.esri.minzoom = 0; //header.maxZoom || 22;
+      style.sources.esri.maxzoom = header.maxZoom || 22;
+      if (metadata.copyrightText) {
         style.sources.esri.attribution = metadata.copyrightText;
+      }
       style.glyphs = `tilepackage://${sourceKey}/{fontstack}/{range}`;
       style.sprite = `tilepackage://${sourceKey}/sprite`;
-      if (this.debug)
-        console.debug(
-          "[tilepackage style] rewritten esri source",
-          style.sources.esri,
-        );
       return style;
-    }
-    return {
-      version: 8,
-      sources: {
-        esri: {
-          type: "raster",
-          tileSize: header.tileSize || 256,
-          tiles: [`tilepackage://${sourceKey}/{z}/{x}/{y}`],
-          maxzoom: header.maxZoom || 22,
-          minzoom: header.minZoom || 0,
+    } else {
+      const style = {
+        version: 8,
+        sources: {
+          esri: {
+            type: "raster",
+            tileSize: header.tileSize || 256,
+            url: `tilepackage://${sourceKey}`,
+            maxzoom: header.maxZoom || 22,
+          },
         },
-      },
-      layers: [{ id: "tilepackageraster", type: "raster", source: "esri" }],
-    };
+        layers: [
+          {
+            id: "tilepackageraster",
+            type: "raster",
+            source: "esri",
+          },
+        ],
+      };
+      return style;
+    }
   }
 
   async getStyle() {
@@ -299,6 +299,7 @@ export class TilePackage {
     const header = await this.getHeader();
     const metadata = await this.getMetadata();
     const ext = header.tileType;
+
     const tileJson = {
       tilejson: "3.0.0",
       scheme: "xyz",
@@ -307,11 +308,21 @@ export class TilePackage {
       version: header.version,
       bounds: [header.minLon, header.minLat, header.maxLon, header.maxLat],
     };
-    if (metadata.vector_layers) tileJson.vector_layers = metadata.vector_layers;
-    if (metadata.attribution) tileJson.attribution = metadata.attribution;
-    if (metadata.description) tileJson.description = metadata.description;
-    if (header.minZoom) tileJson.minzoom = header.minZoom;
-    if (header.maxZoom) tileJson.maxzoom = header.maxZoom;
+    if (metadata.vector_layers) {
+      tileJson.vector_layers = metadata.vector_layers;
+    }
+    if (metadata.attribution) {
+      tileJson.attribution = metadata.attribution;
+    }
+    if (metadata.description) {
+      tileJson.description = metadata.description;
+    }
+    if (header.minZoom) {
+      tileJson.minzoom = header.minZoom;
+    }
+    if (header.maxZoom) {
+      tileJson.maxzoom = header.maxZoom;
+    }
     return tileJson;
   }
 }

package/src/maplibre-gl-js-protocol.js

@@ -1,5 +1,4 @@
 import { TilePackage } from "./index.js";
-import protocolGlyphs from "maplibre-local-glyphs";
 
 function stringEndsIn(string, endings) {
   for (let i = 0; i < endings.length; i++) {
@@ -172,14 +171,6 @@ export class Protocol {
               };
             }
 
-            // Fallback to local glyphs since we couldn't load the coorect from the vtpk
-            const fallback = await protocolGlyphs({
-              url: `glyphs://${result[2]}/${result[3]}`,
-            });
-            if (fallback) {
-              return fallback;
-            }
-
             return { data: null };
           }
         }

package/src/source.js

@@ -21,9 +21,11 @@ export class FileSource extends Source {
   constructor(file, options) {
     super();
     this.file = file;
+    this.coverageCheck = 1;
     if (options && options.coverageCheck) {
       this.coverageCheck = options.coverageCheck;
     }
+    //console.log("Tilepackage FileSource initialized", this.file);
   }
 
   getKey() {
@@ -66,6 +68,7 @@ export class FetchSource extends Source {
     if (isWindows && isChromiumBased) {
       this.chromeWindowsNoCache = true;
     }
+    this.coverageCheck = 1;
     if (options && options.coverageCheck) {
       this.coverageCheck = options.coverageCheck;
     }