mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 10:51:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Option to load metadata in MapLibre adapter [#247] (#461)

Browse Source 
* 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]
This commit is contained in:
Brandon Liu
2024-09-22 19:04:50 +08:00
committed by GitHub
parent c7db819b2e
commit 3472fd89f9
8 changed files with 183 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
js/CHANGELOG.md
View File

@@ -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 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] * 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] * add getTileJson to PMTiles [#239]

17
js/adapters.ts
View File

@@ -166,9 +166,17 @@ const v3compat =
export class Protocol { export class Protocol {
/** @hidden */ /** @hidden */
tiles: Map<string, PMTiles>; tiles: Map<string, PMTiles>;
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<string, PMTiles>(); this.tiles = new Map<string, PMTiles>();
this.metadata = options?.metadata || false;
} }
/** /**
@@ -201,8 +209,13 @@ export class Protocol {
this.tiles.set(pmtilesUrl, instance); 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 { return {
data: { data: {
tiles: [`${params.url}/{z}/{x}/{y}`], tiles: [`${params.url}/{z}/{x}/{y}`],

4
js/examples/leaflet.html
View File

@@ -2,9 +2,9 @@
<head> <head>
<title>PMTiles Leaflet Example</title> <title>PMTiles Leaflet Example</title>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.0/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet@1.9.0/dist/leaflet.js"></script>
<script src="https://unpkg.com/pmtiles@3.1.0/dist/pmtiles.js"></script> <script src="https://unpkg.com/pmtiles@3.2.0/dist/pmtiles.js"></script>
<style> <style>
body, #map { body, #map {
height:100vh; height:100vh;

29
js/examples/maplibre.html
View File

@@ -2,9 +2,9 @@
<head> <head>
<title>PMTiles MapLibre Example</title> <title>PMTiles MapLibre Example</title>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css" crossorigin="anonymous">
<script src="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/pmtiles@3.1.0/dist/pmtiles.js"></script> <script src="https://unpkg.com/pmtiles@3.2.0/dist/pmtiles.js"></script>
<style> <style>
body { body {
margin: 0; margin: 0;
@@ -18,23 +18,15 @@
<div id="map"></div> <div id="map"></div>
<script type="text/javascript"> <script type="text/javascript">
// add the PMTiles plugin to the maplibregl global. // add the PMTiles plugin to the maplibregl global.
let protocol = new pmtiles.Protocol(); // setting metadata = true fills out the "attribution" field of the source, and is required for some inspector applications,
// but requires an additional blocking HTTP request before loading the map.
let protocol = new pmtiles.Protocol({metadata: true});
maplibregl.addProtocol("pmtiles", protocol.tile); maplibregl.addProtocol("pmtiles", protocol.tile);
// pmtiles extract https://build.protomaps.com/20240807.pmtiles my_area.pmtiles --bbox=11.221144,43.745121,11.287543,43.789306
let PMTILES_URL = "https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles";
const p = new pmtiles.PMTiles(PMTILES_URL);
// this is so we share one instance across the JS code and the map renderer
protocol.add(p);
// we first fetch the header so we can get the center lon, lat of the map.
p.getHeader().then((h) => {
const map = new maplibregl.Map({ const map = new maplibregl.Map({
container: "map", container: "map",
zoom: h.maxZoom - 2, zoom: 13,
center: [h.centerLon, h.centerLat], center: [11.2543435, 43.7672134],
style: { style: {
version: 8, version: 8,
sources: { sources: {
@@ -43,9 +35,7 @@
// For standard Z/X/Y tile APIs or Z/X/Y URLs served from go-pmtiles, replace "url" with "tiles" and remove all the pmtiles-related client code. // For standard Z/X/Y tile APIs or Z/X/Y URLs served from go-pmtiles, replace "url" with "tiles" and remove all the pmtiles-related client code.
// tiles: ["https://example.com/{z}/[x}/{y}.mvt"], // tiles: ["https://example.com/{z}/[x}/{y}.mvt"],
// see https://maplibre.org/maplibre-style-spec/sources/#vector // see https://maplibre.org/maplibre-style-spec/sources/#vector
url: "pmtiles://" + PMTILES_URL, url: "pmtiles://https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles",
attribution:
'© <a href="https://openstreetmap.org">OpenStreetMap</a>',
}, },
}, },
layers: [ layers: [
@@ -89,7 +79,6 @@
}, },
}); });
map.showTileBoundaries = true; map.showTileBoundaries = true;
});
</script> </script>
</body> </body>
</html> </html>

97
js/examples/maplibre_headers.html Normal file
View File

@@ -0,0 +1,97 @@
<html>
<head>
<title>PMTiles MapLibre Example</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css" crossorigin="anonymous">
<script src="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/pmtiles@3.2.0/dist/pmtiles.js"></script>
<style>
body {
margin: 0;
}
#map {
height:100%; width:100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Advanced MapLibre example demonstrating PMTiles JavaScript API + pmtiles:// protocol.
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles", protocol.tile);
let PMTILES_URL = "https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles";
let source = new pmtiles.FetchSource(PMTILES_URL, new Headers({'Content-Language': 'xx'}));
const p = new pmtiles.PMTiles(source);
// this is so we share one instance across the JS code and the map renderer
protocol.add(p);
// we first fetch the header so we can get the center lon, lat of the map.
p.getHeader().then((h) => {
const map = new maplibregl.Map({
container: "map",
zoom: h.maxZoom - 2,
center: [h.centerLon, h.centerLat],
style: {
version: 8,
sources: {
example_source: {
type: "vector",
// For standard Z/X/Y tile APIs or Z/X/Y URLs served from go-pmtiles, replace "url" with "tiles" and remove all the pmtiles-related client code.
// tiles: ["https://example.com/{z}/[x}/{y}.mvt"],
// see https://maplibre.org/maplibre-style-spec/sources/#vector
url: "pmtiles://" + PMTILES_URL,
attribution:
'© <a href="https://openstreetmap.org">OpenStreetMap</a>',
},
},
layers: [
{
id: "water",
source: "example_source",
"source-layer": "water",
type: "fill",
paint: {
"fill-color": "#80b1d3",
},
},
{
id: "buildings",
source: "example_source",
"source-layer": "buildings",
type: "fill",
paint: {
"fill-color": "#d9d9d9",
},
},
{
id: "roads",
source: "example_source",
"source-layer": "roads",
type: "line",
paint: {
"line-color": "#fc8d62",
},
},
{
id: "pois",
source: "example_source",
"source-layer": "pois",
type: "circle",
paint: {
"circle-color": "#ffffb3",
},
},
],
},
});
map.showTileBoundaries = true;
});
</script>
</body>
</html>

30
js/examples/maplibre_raster_dem.html
View File

@@ -2,9 +2,9 @@
<head> <head>
<title>PMTiles MapLibre Raster DEM Example</title> <title>PMTiles MapLibre Raster DEM Example</title>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css" crossorigin="anonymous">
<script src="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/pmtiles@3.1.0/dist/pmtiles.js"></script> <script src="https://unpkg.com/pmtiles@3.2.0/dist/pmtiles.js"></script>
<style> <style>
body { body {
margin: 0; margin: 0;
@@ -28,26 +28,8 @@
<div id="overlay"> <div id="overlay">
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
let protocol = new pmtiles.Protocol(); let protocol = new pmtiles.Protocol({metadata: true});
maplibregl.addProtocol("pmtiles", protocol.tile); maplibregl.addProtocol("pmtiles", protocol.tile);
let URL =
"https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles";
function formatBytes(a, b = 2) {
if (!+a) return "0 Bytes";
const c = 0 > b ? 0 : b,
d = Math.floor(Math.log(a) / Math.log(1024));
return `${parseFloat((a / Math.pow(1024, d)).toFixed(c))} ${
["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][d]
}`;
}
fetch(URL, { method: "HEAD" }).then((resp) => {
let length = resp.headers.get("Content-Length");
document.getElementById(
"overlay"
).innerHTML = `<a href="${URL}">${URL}</a> (${formatBytes(length)})`;
});
const map = new maplibregl.Map({ const map = new maplibregl.Map({
container: "map", container: "map",
@@ -58,9 +40,7 @@
sources: { sources: {
example_source: { example_source: {
type: "raster-dem", type: "raster-dem",
url: "pmtiles://" + URL, url: "pmtiles://https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles",
attribution:
'<a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md">Tilezen Joerd: Attribution</a>',
encoding: "terrarium", encoding: "terrarium",
}, },
}, },

4
js/package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "pmtiles", "name": "pmtiles",
"version": "3.1.0", "version": "3.2.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "pmtiles", "name": "pmtiles",
"version": "3.1.0", "version": "3.2.0",
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"dependencies": { "dependencies": {
"@types/leaflet": "^1.9.8", "@types/leaflet": "^1.9.8",

2
js/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "pmtiles", "name": "pmtiles",
"version": "3.1.0", "version": "3.2.0",
"description": "PMTiles archive decoder for browsers", "description": "PMTiles archive decoder for browsers",
"type": "module", "type": "module",
"exports": { "exports": {