From 3472fd89f99d0755460266c05404d93d2fa8507c Mon Sep 17 00:00:00 2001 From: Brandon Liu Date: Sun, 22 Sep 2024 19:04:50 +0800 Subject: [PATCH] Option to load metadata in MapLibre adapter [#247] (#461) * Option to load metadata in MapLibre adapter [#247] * pass metadata: true to new Protocol() to make an extra request and populate attribution + vector_layers * js 3.2.0 [#247] * simplify examples * update leaflet and maplibre versions * add maplibre_headers.html example for custom headers [#397] --- js/CHANGELOG.md | 5 ++ js/adapters.ts | 17 +++- js/examples/leaflet.html | 4 +- js/examples/maplibre.html | 123 ++++++++++++--------------- js/examples/maplibre_headers.html | 97 +++++++++++++++++++++ js/examples/maplibre_raster_dem.html | 30 ++----- js/package-lock.json | 4 +- js/package.json | 2 +- 8 files changed, 183 insertions(+), 99 deletions(-) create mode 100644 js/examples/maplibre_headers.html diff --git a/js/CHANGELOG.md b/js/CHANGELOG.md index 8a7c4b3..ffcb9af 100644 --- a/js/CHANGELOG.md +++ b/js/CHANGELOG.md @@ -1,3 +1,8 @@ +3.2.0 +* MapLibre `Protocol` constructor takes an options object. +* add protocol option `metadata:boolean` that controls whether TileJSON metadata is fetched synchronously on map load. [#247] + * This populates the attribution field and is required for some inspector applications to work. + 3.1.0 * disable brower caching if Chrome + Windows is detected in user agent to work around https://issues.chromium.org/issues/40542704 [#384, #442, #445] * add getTileJson to PMTiles [#239] diff --git a/js/adapters.ts b/js/adapters.ts index 0e81a2c..e31c454 100644 --- a/js/adapters.ts +++ b/js/adapters.ts @@ -166,9 +166,17 @@ const v3compat = export class Protocol { /** @hidden */ tiles: Map; + metadata: boolean; - constructor() { + /** + * Initialize the MapLibre PMTiles protocol. + * + * * metadata: also load the metadata section of the PMTiles. required for some "inspect" functionality + * and to automatically populate the map attribution. Requires an extra HTTP request. + */ + constructor(options?: { metadata: boolean }) { this.tiles = new Map(); + this.metadata = options?.metadata || false; } /** @@ -201,8 +209,13 @@ export class Protocol { this.tiles.set(pmtilesUrl, instance); } - const h = await instance.getHeader(); + if (this.metadata) { + return { + data: await instance.getTileJson(params.url), + }; + } + const h = await instance.getHeader(); return { data: { tiles: [`${params.url}/{z}/{x}/{y}`], diff --git a/js/examples/leaflet.html b/js/examples/leaflet.html index 577ab72..d9be12e 100644 --- a/js/examples/leaflet.html +++ b/js/examples/leaflet.html @@ -2,9 +2,9 @@ PMTiles Leaflet Example - + - + + + +
+ + + diff --git a/js/examples/maplibre_raster_dem.html b/js/examples/maplibre_raster_dem.html index a5f19db..822a580 100644 --- a/js/examples/maplibre_raster_dem.html +++ b/js/examples/maplibre_raster_dem.html @@ -2,9 +2,9 @@ PMTiles MapLibre Raster DEM Example - - - + + +