<html>
<head>
<title>PMTiles MapLibre Example</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.css" crossorigin="anonymous">
<script src="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/pmtiles@3.0.6/dist/pmtiles.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 = "protomaps.pmtiles";
let source = new pmtiles.FetchSource(PMTILES_URL, new Headers({'Content-Language': 'xx'}));
const p = new pmtiles.PMTiles(source);
// this is so we share one instance across the JS code and the map renderer
protocol.add(p);
p.getMetadata().then((m) => {
document.getElementById("description").textContent = m.description;
})
// 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",
filter: ["==",["geometry-type"],"Polygon"],
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;
});
// 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: 'style.json'
});
})
</script>
</body
Hi!
Yesterday I downloaded these PMTiles: https://build.protomaps.com/20250217.pmtiles and the world map didn't contain any countries names and borders, and any cities at all
Today I downloaded these PMTiles: https://build.protomaps.com/20240902.pmtiles
and the map does contain countries names and borders, and cities
This is the index.html I'm using:
Why ?