mirror of
https://github.com/protomaps/PMTiles.git
synced 2026-02-04 02:41:09 +00:00
82 lines
3.2 KiB
HTML
82 lines
3.2 KiB
HTML
<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.10.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>
|