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

Prettier on JavaScript examples [#383] (#438)

Browse Source
This commit is contained in:
Brandon Liu
2024-09-02 14:20:48 +08:00
committed by GitHub
parent 0fd91faf72
commit 2dd5bb7937
3 changed files with 114 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
js/examples/maplibre_raster_dem.html
View File

@@ -29,40 +29,51 @@
</div>
<script type="text/javascript">
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles",protocol.tile);
let URL = "https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles";
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]}`}
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)})`;
})
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',
zoom: 0,
center: [0,0],
style: {
version:8,
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>',
encoding:"terrarium"
}
},
layers: [
{
"id":"dem",
"source": "example_source",
"source-layer":"landuse",
"type": "hillshade"
}
]
}
})
container: "map",
zoom: 0,
center: [0, 0],
style: {
version: 8,
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>',
encoding: "terrarium",
},
},
layers: [
{
id: "dem",
source: "example_source",
"source-layer": "landuse",
type: "hillshade",
},
],
},
});
</script>
</body>
</html>