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

121
js/examples/maplibre.html
View File

@@ -19,7 +19,7 @@
<script type="text/javascript">
// add the PMTiles plugin to the maplibregl global.
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles",protocol.tile);
maplibregl.addProtocol("pmtiles", protocol.tile);
// pmtiles extract https://build.protomaps.com/20240807.pmtiles my_area.pmtiles --bbox=11.221144,43.745121,11.287543,43.789306
let PMTILES_URL = "https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles";
@@ -30,65 +30,66 @@
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",
// For standard Z/X/Y tile APIs or Z/X/Y URLs served from go-pmtiles, replace "url" with "tiles" and remove all the pmtiles-related client code.
// tiles: ["https://example.com/{z}/[x}/{y}.mvt"],
// see https://maplibre.org/maplibre-style-spec/sources/#vector
url: "pmtiles://" + PMTILES_URL,
attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
}
},
layers: [
{
"id":"water",
"source": "example_source",
"source-layer":"water",
"type": "fill",
"paint": {
"fill-color": "#80b1d3"
}
},
{
"id":"buildings",
"source": "example_source",
"source-layer":"buildings",
"type": "fill",
"paint": {
"fill-color": "#d9d9d9"
}
},
{
"id":"roads",
"source": "example_source",
"source-layer":"roads",
"type": "line",
"paint": {
"line-color": "#fc8d62"
}
},
{
"id":"pois",
"source": "example_source",
"source-layer":"pois",
"type": "circle",
"paint": {
"circle-color": "#ffffb3"
}
}
]
}
});
map.showTileBoundaries = true;
})
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",
// For standard Z/X/Y tile APIs or Z/X/Y URLs served from go-pmtiles, replace "url" with "tiles" and remove all the pmtiles-related client code.
// tiles: ["https://example.com/{z}/[x}/{y}.mvt"],
// see https://maplibre.org/maplibre-style-spec/sources/#vector
url: "pmtiles://" + PMTILES_URL,
attribution:
'© <a href="https://openstreetmap.org">OpenStreetMap</a>',
},
},
layers: [
{
id: "water",
source: "example_source",
"source-layer": "water",
type: "fill",
paint: {
"fill-color": "#80b1d3",
},
},
{
id: "buildings",
source: "example_source",
"source-layer": "buildings",
type: "fill",
paint: {
"fill-color": "#d9d9d9",
},
},
{
id: "roads",
source: "example_source",
"source-layer": "roads",
type: "line",
paint: {
"line-color": "#fc8d62",
},
},
{
id: "pois",
source: "example_source",
"source-layer": "pois",
type: "circle",
paint: {
"circle-color": "#ffffb3",
},
},
],
},
});
map.showTileBoundaries = true;
});
</script>
</body>
</html>