Repository navigation
The 20250217.pmtiles didn't contain any countries names and borders, and any cities at all #385
Description
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:
<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
Why ?
Activity
wipfli commentedon Feb 20, 2025
Probably because the style changed in v4.
Go to https://maps.protomaps.com/#flavorName=light&lang=en&map=0.88/0/0 and click "get style json"
wipfli commentedon Feb 20, 2025
You see here the country names and borders are there and you can choose the display language:
bdon commentedon Feb 21, 2025
I added a
compatible NPM versionscolumn to https://maps.protomaps.com/builds/ to make this clearer. Any other suggestions?raphael10-collab commentedon Feb 25, 2025
If I understand correctly the versions of compatible npm are 4 and 5 : https://maps.protomaps.com/builds/
My npm version is 10.9.2 :
Does it mean it does not work? I do hope I'm wrong...
wipfli commentedon Feb 25, 2025
Can you create a jsbin or stackblitz or similar with the problem you are facing? The above code snippet could be a starting point...
raphael10-collab commentedon Feb 25, 2025
May I keep summing everything up here, instead of duplicating information elsewhere?
The issue is the following:
I'm using this index.html https://gist.github.com/wipfli/7062a865c89e36fa74b0701289c3c6c8#file-index-html
to which I added
<link rel="stylesheet" href="style.json">/srv/worldmap/html/index.html :
and these are the versions of npm and node:
OS: Ubuntu 24.04
With this version of pmtiles : 20240902.pmtiles.0 : https://build.protomaps.com/20240902.pmtiles
everything is fine:
If I download the latest version: 20250224.pmtiles : https://build.protomaps.com/20250224.pmtiles
I removed the previous
style.jsonfile, which was taken from here :https://gist.github.com/wipfli/7062a865c89e36fa74b0701289c3c6c8 ,
and I've put the content of
style.jsonfrom: https://maps.protomaps.com/#flavorName=light&lang=en&map=0.88/0/0But, as you can see, I get no countries names, no borders, and no cities at all :
@wipfli
Do I have to modify something in this index.html file?
bdon commentedon Feb 26, 2025
The versions 4,5 refer to the versions of the
@protomaps/basemapspackage on npm.If you are using the
style.jsoncopied from theGet Style JSONon https://maps.protomaps.com/ it should be compatible with the latest download. You haven't pasted your entire code example where you loadstyle.json.This is not valid code:
The MapLibre style JSON is not a CSS stylesheet, it needs to be loaded in JavaScript.
raphael10-collab commentedon Feb 26, 2025
@bdon
This time I copied the whole
style.json:and, with this
index.html: https://gist.github.com/wipfli/7062a865c89e36fa74b0701289c3c6c8#file-index-html :I get a grey rendering (no maps at all) :
If I use this
style.json: https://gist.github.com/wipfli/7062a865c89e36fa74b0701289c3c6c8#file-style-jsonthe world map appears but without borders, countries names and cities :
bdon commentedon Feb 26, 2025
Did you look at what console errors appear when you get the grey screen?