From af2eef34a48d98438b9575c0378a11c9f9f74066 Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Mon, 21 Oct 2024 19:15:12 +0200
Subject: [PATCH] Use the pmtiles-protocol package for the pmtiles example

---
 examples/pmtiles.js | 54 +++------------------------------------------
 package-lock.json   | 33 +++++++++++++++++++++------
 package.json        |  2 +-
 3 files changed, 30 insertions(+), 59 deletions(-)

diff --git a/examples/pmtiles.js b/examples/pmtiles.js
index 73fcfdd7..985bf56c 100644
--- a/examples/pmtiles.js
+++ b/examples/pmtiles.js
@@ -1,55 +1,7 @@
 import 'ol/ol.css';
-import {PMTiles} from 'pmtiles';
 import {apply} from 'ol-mapbox-style';
+import {register as registerPMTiles} from 'pmtiles-protocol';
 
-// Generic transformRequest function that can be used with any style
-// that uses pmtiles:// URLs for sources and tiles
-let styleUrl;
-const pmtilesByUrl = {};
-const tileUrlRegex = /^pmtiles:\/\/(.+)\/([0-9]+)\/([0-9]+)\/([0-9]+).mvt$/;
-const tileCoordRegex = /\/([0-9]+)\/([0-9]+)\/([0-9]+).mvt$/;
-const transformRequest = async (url, type) => {
-  // Workaround for broken URL handling in Safari
-  url = url.replace(/^pmtiles:\/\/http(s?)\/\//, 'pmtiles://http$1://');
+registerPMTiles();
 
-  if (type === 'Style') {
-    styleUrl = url;
-  }
-  /** @type {PMTiles} */
-  let pmtiles;
-  if (url.startsWith('pmtiles://')) {
-    const baseUrl = url.slice(10).replace(tileCoordRegex, '');
-    if (!pmtilesByUrl[baseUrl]) {
-      pmtilesByUrl[baseUrl] = new PMTiles(
-        new URL(url.slice(10), styleUrl).href,
-      );
-    }
-    pmtiles = pmtilesByUrl[baseUrl];
-  }
-  if (!pmtiles) {
-    return url;
-  }
-  if (type === 'Source') {
-    const tileJson = await pmtiles.getTileJson(url);
-    return `data:application/json,${encodeURIComponent(
-      JSON.stringify(tileJson),
-    )}`;
-  }
-  if (type === 'Tiles') {
-    const [, baseUrl, z, x, y] = url.match(tileUrlRegex);
-    const tileResult = await pmtilesByUrl[baseUrl].getZxy(
-      Number(z),
-      Number(x),
-      Number(y),
-    );
-    const data = tileResult?.data ?? new ArrayBuffer(0);
-    const objectUrl = URL.createObjectURL(new Blob([data]));
-    window.setTimeout(() => URL.revokeObjectURL(objectUrl), 10000);
-    return objectUrl;
-  }
-  return url;
-};
-
-apply('map', 'data/protomaps-dark-style.json', {
-  transformRequest,
-});
+apply('map', 'data/protomaps-dark-style.json');
diff --git a/package-lock.json b/package-lock.json
index b055fb31..f12ef912 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "mini-css-extract-plugin": "^2.4.4",
         "mocha": "^10.0.0",
         "nanoassert": "^2.0.0",
-        "pmtiles": "^3.2.0",
+        "pmtiles-protocol": "^1.0.1",
         "puppeteer": "^23.0.2",
         "remove-flow-types-loader": "^1.1.0",
         "rollup": "^2.70.2",
@@ -1404,9 +1404,9 @@
       "dev": true
     },
     "node_modules/@types/leaflet": {
-      "version": "1.9.12",
-      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.12.tgz",
-      "integrity": "sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==",
+      "version": "1.9.13",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.13.tgz",
+      "integrity": "sha512-wwLL4VKKwYlLmhMQRc/8HT5/8HgkzZyETG0hG3nbsSiHKSdxBWZnHqEkRIOOtpyUks3gbc81dk9WgQMC6bicDw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -9368,6 +9368,16 @@
         "fflate": "^0.8.0"
       }
     },
+    "node_modules/pmtiles-protocol": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pmtiles-protocol/-/pmtiles-protocol-1.0.1.tgz",
+      "integrity": "sha512-/YDSgflm111IDO6l3ZelSjVeEwnkX0vz2a3g3POdWmHxZmIayTAXNyusN9YbvtzgdTN0r5M1m7oYhjGyaPCNkw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "pmtiles": "^3.2.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.33",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
@@ -14139,9 +14149,9 @@
       "dev": true
     },
     "@types/leaflet": {
-      "version": "1.9.12",
-      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.12.tgz",
-      "integrity": "sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==",
+      "version": "1.9.13",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.13.tgz",
+      "integrity": "sha512-wwLL4VKKwYlLmhMQRc/8HT5/8HgkzZyETG0hG3nbsSiHKSdxBWZnHqEkRIOOtpyUks3gbc81dk9WgQMC6bicDw==",
       "dev": true,
       "requires": {
         "@types/geojson": "*"
@@ -20091,6 +20101,15 @@
         "fflate": "^0.8.0"
       }
     },
+    "pmtiles-protocol": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pmtiles-protocol/-/pmtiles-protocol-1.0.1.tgz",
+      "integrity": "sha512-/YDSgflm111IDO6l3ZelSjVeEwnkX0vz2a3g3POdWmHxZmIayTAXNyusN9YbvtzgdTN0r5M1m7oYhjGyaPCNkw==",
+      "dev": true,
+      "requires": {
+        "pmtiles": "^3.2.0"
+      }
+    },
     "postcss": {
       "version": "8.4.33",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
diff --git a/package.json b/package.json
index 3f38ca44..a60761b8 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "mini-css-extract-plugin": "^2.4.4",
     "mocha": "^10.0.0",
     "nanoassert": "^2.0.0",
-    "pmtiles": "^3.2.0",
+    "pmtiles-protocol": "^1.0.1",
     "puppeteer": "^23.0.2",
     "remove-flow-types-loader": "^1.1.0",
     "rollup": "^2.70.2",