From eb52e70215203b9679492d6eb24cb38c952712a3 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar 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 | 65 +++++++++++---------------------------------- package.json | 2 +- 3 files changed, 19 insertions(+), 102 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..7812da38 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": "file://../pmtiles-protocol", "puppeteer": "^23.0.2", "remove-flow-types-loader": "^1.1.0", "rollup": "^2.70.2", @@ -64,6 +64,14 @@ "ol": "*" } }, + "../pmtiles-protocol": { + "version": "1.0.0", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "pmtiles": "^3.2.0" + } + }, "node_modules/@aashutoshrathi/word-wrap": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz", @@ -1403,16 +1411,6 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "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==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/geojson": "*" - } - }, "node_modules/@types/mdast": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz", @@ -5172,13 +5170,6 @@ "pend": "~1.2.0" } }, - "node_modules/fflate": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", - "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==", - "dev": true, - "license": "MIT" - }, "node_modules/file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -9357,16 +9348,9 @@ "node": ">=4" } }, - "node_modules/pmtiles": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-3.2.0.tgz", - "integrity": "sha512-4v3Nw5xeMxaUReLZQTz3PyM4VM/Lx/Xp/rc2GGEWMl0nqAmcb+gjyi+eOTwfPu8LnB0ash36hz0dV76uYvih5A==", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "@types/leaflet": "^1.9.8", - "fflate": "^0.8.0" - } + "node_modules/pmtiles-protocol": { + "resolved": "../pmtiles-protocol", + "link": true }, "node_modules/postcss": { "version": "8.4.33", @@ -14138,15 +14122,6 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "dev": true }, - "@types/leaflet": { - "version": "1.9.12", - "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.12.tgz", - "integrity": "sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==", - "dev": true, - "requires": { - "@types/geojson": "*" - } - }, "@types/mdast": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz", @@ -17006,12 +16981,6 @@ "pend": "~1.2.0" } }, - "fflate": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", - "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==", - "dev": true - }, "file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -20081,14 +20050,10 @@ "find-up": "^2.1.0" } }, - "pmtiles": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-3.2.0.tgz", - "integrity": "sha512-4v3Nw5xeMxaUReLZQTz3PyM4VM/Lx/Xp/rc2GGEWMl0nqAmcb+gjyi+eOTwfPu8LnB0ash36hz0dV76uYvih5A==", - "dev": true, + "pmtiles-protocol": { + "version": "file:../pmtiles-protocol", "requires": { - "@types/leaflet": "^1.9.8", - "fflate": "^0.8.0" + "pmtiles": "^3.2.0" } }, "postcss": { diff --git a/package.json b/package.json index 3f38ca44..81d48225 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": "file://../pmtiles-protocol", "puppeteer": "^23.0.2", "remove-flow-types-loader": "^1.1.0", "rollup": "^2.70.2",