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

add JS leaflet/maplibre example files.

Browse Source
This commit is contained in:
Brandon Liu
2022-10-24 20:14:32 +08:00
parent 6a71f48f20
commit d689776a18
2 changed files with 111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
js/examples/maplibre.html Normal file
View File

@@ -0,0 +1,81 @@
<html>
<head>
<title>PMTiles MapLibre 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.3.0/dist/index.js"></script>
<style>
body {
margin: 0;
}
#map {
height:100%; width:100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// add the PMTiles plugin to the maplibregl global.
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles",protocol.tile);
let PMTILES_URL = "https://protomaps.github.io/PMTiles/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({
container: 'map',
zoom: h.maxZoom-2,
center: [h.centerLon, h.centerLat],
style: {
version:8,
sources: {
"example_source": {
type: "vector",
url: "pmtiles://" + PMTILES_URL,
attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
}
},
layers: [
{
"id":"buildings",
"source": "example_source",
"source-layer":"landuse",
"type": "fill",
"paint": {
"fill-color": "steelblue"
}
},
{
"id":"roads",
"source": "example_source",
"source-layer":"roads",
"type": "line",
"paint": {
"line-color": "black"
}
},
{
"id":"mask",
"source": "example_source",
"source-layer":"mask",
"type": "fill",
"paint": {
"fill-color": "white"
}
}
]
}
});
map.showTileBoundaries = true;
})
</script>
</body>
</html>