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

add maplibre raster DEM example

Browse Source
This commit is contained in:
Brandon Liu
2022-11-03 14:32:35 +08:00
parent cd1374cc33
commit 9385c69326
2 changed files with 73 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
js/examples/maplibre_raster_dem.html Normal file
View File

@@ -0,0 +1,72 @@
<html>
<head>
<title>PMTiles MapLibre Raster DEM Example</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" crossorigin="anonymous">
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/pmtiles@2.4.0/dist/index.js"></script>
<style>
body {
margin: 0;
}
#map {
height:100%; width:100%;
}
#overlay {
position: absolute;
top: 1rem;
left: 1rem;
font: 600 16px sans-serif;
background-color: white;
border-radius: 4px;
padding: 0.5rem;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="overlay">
Foo bar baz
</div>
<script type="text/javascript">
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles",protocol.tile);
let URL = "https://pub-9288c68512ed46eca46ddcade307709b.r2.dev/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',
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>

2
js/examples/openlayers_raster.html
View File

@@ -48,7 +48,7 @@
}
}
const source = new OLPMTilesSource("https://pub-9288c68512ed46eca46ddcade307709b.r2.dev/us-west/terrarium_z9.pmtiles");
const source = new OLPMTilesSource("https://pub-9288c68512ed46eca46ddcade307709b.r2.dev/protomaps-sample-datasets/terrarium_z9.pmtiles");
const rasterLayer = new ol.layer.Tile({
source: new ol.source.XYZ({