mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 02:41:09 +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

30
js/examples/maplibre_raster_dem.html
View File

@@ -2,9 +2,9 @@
<head>
<title>PMTiles MapLibre Raster DEM Example</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.5.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/pmtiles@3.1.0/dist/pmtiles.js"></script>
<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;
@@ -28,26 +28,8 @@
<div id="overlay">
</div>
<script type="text/javascript">
let protocol = new pmtiles.Protocol();
let protocol = new pmtiles.Protocol({metadata: true});
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({
container: "map",
@@ -58,9 +40,7 @@
sources: {
example_source: {
type: "raster-dem",
url: "pmtiles://" + URL,
attribution:
'<a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md">Tilezen Joerd: Attribution</a>',
url: "pmtiles://https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles",
encoding: "terrarium",
},
},