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

15
js/examples/leaflet.html
View File

@@ -15,16 +15,19 @@
<body> <body>
<div id="map"></div> <div id="map"></div>
<script type="text/javascript"> <script type="text/javascript">
const map = L.map('map').setView([0, 0], 0); const map = L.map("map").setView([0, 0], 0);
const p = new pmtiles.PMTiles("https://pmtiles.io/stamen_toner(raster)CC-BY+ODbL_z3.pmtiles") const p = new pmtiles.PMTiles(
p.getHeader().then(h => { "https://pmtiles.io/stamen_toner(raster)CC-BY+ODbL_z3.pmtiles"
);
p.getHeader().then((h) => {
let layer = pmtiles.leafletRasterLayer(p, { let layer = pmtiles.leafletRasterLayer(p, {
maxzoom:h.maxZoom, maxzoom: h.maxZoom,
attribution:'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.' attribution:
'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
}); });
layer.addTo(map); layer.addTo(map);
}) });
</script> </script>
</body> </body>
</html> </html>

81
js/examples/maplibre.html
View File

@@ -19,7 +19,7 @@
<script type="text/javascript"> <script type="text/javascript">
// add the PMTiles plugin to the maplibregl global. // add the PMTiles plugin to the maplibregl global.
let protocol = new pmtiles.Protocol(); 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 // 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"; let PMTILES_URL = "https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles";
@@ -30,65 +30,66 @@
protocol.add(p); protocol.add(p);
// we first fetch the header so we can get the center lon, lat of the map. // we first fetch the header so we can get the center lon, lat of the map.
p.getHeader().then(h => { p.getHeader().then((h) => {
const map = new maplibregl.Map({ const map = new maplibregl.Map({
container: 'map', container: "map",
zoom: h.maxZoom-2, zoom: h.maxZoom - 2,
center: [h.centerLon, h.centerLat], center: [h.centerLon, h.centerLat],
style: { style: {
version:8, version: 8,
sources: { sources: {
"example_source": { example_source: {
type: "vector", 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. // 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"], // tiles: ["https://example.com/{z}/[x}/{y}.mvt"],
// see https://maplibre.org/maplibre-style-spec/sources/#vector // see https://maplibre.org/maplibre-style-spec/sources/#vector
url: "pmtiles://" + PMTILES_URL, url: "pmtiles://" + PMTILES_URL,
attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>' attribution:
} '© <a href="https://openstreetmap.org">OpenStreetMap</a>',
},
}, },
layers: [ layers: [
{ {
"id":"water", id: "water",
"source": "example_source", source: "example_source",
"source-layer":"water", "source-layer": "water",
"type": "fill", type: "fill",
"paint": { paint: {
"fill-color": "#80b1d3" "fill-color": "#80b1d3",
} },
}, },
{ {
"id":"buildings", id: "buildings",
"source": "example_source", source: "example_source",
"source-layer":"buildings", "source-layer": "buildings",
"type": "fill", type: "fill",
"paint": { paint: {
"fill-color": "#d9d9d9" "fill-color": "#d9d9d9",
} },
}, },
{ {
"id":"roads", id: "roads",
"source": "example_source", source: "example_source",
"source-layer":"roads", "source-layer": "roads",
"type": "line", type: "line",
"paint": { paint: {
"line-color": "#fc8d62" "line-color": "#fc8d62",
} },
}, },
{ {
"id":"pois", id: "pois",
"source": "example_source", source: "example_source",
"source-layer":"pois", "source-layer": "pois",
"type": "circle", type: "circle",
"paint": { paint: {
"circle-color": "#ffffb3" "circle-color": "#ffffb3",
} },
} },
] ],
} },
}); });
map.showTileBoundaries = true; map.showTileBoundaries = true;
}) });
</script> </script>
</body> </body>
</html> </html>

53
js/examples/maplibre_raster_dem.html
View File

@@ -29,40 +29,51 @@
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
let protocol = new pmtiles.Protocol(); let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles",protocol.tile); maplibregl.addProtocol("pmtiles", protocol.tile);
let URL = "https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles"; 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 => { fetch(URL, { method: "HEAD" }).then((resp) => {
let length = resp.headers.get("Content-Length"); let length = resp.headers.get("Content-Length");
document.getElementById("overlay").innerHTML = `<a href="${URL}">${URL}</a> (${formatBytes(length)})`; document.getElementById(
}) "overlay"
).innerHTML = `<a href="${URL}">${URL}</a> (${formatBytes(length)})`;
});
const map = new maplibregl.Map({ const map = new maplibregl.Map({
container: 'map', container: "map",
zoom: 0, zoom: 0,
center: [0,0], center: [0, 0],
style: { style: {
version:8, version: 8,
sources: { sources: {
"example_source": { example_source: {
type: "raster-dem", type: "raster-dem",
url: "pmtiles://" + URL, url: "pmtiles://" + URL,
attribution: '<a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md">Tilezen Joerd: Attribution</a>', attribution:
encoding:"terrarium" '<a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md">Tilezen Joerd: Attribution</a>',
} encoding: "terrarium",
},
}, },
layers: [ layers: [
{ {
"id":"dem", id: "dem",
"source": "example_source", source: "example_source",
"source-layer":"landuse", "source-layer": "landuse",
"type": "hillshade" type: "hillshade",
} },
] ],
} },
}) });
</script> </script>
</body> </body>
</html> </html>