The 20250217.pmtiles didn't contain any countries names and borders, and any cities at all #401

raphael10-collab · 2025-02-20T09:16:40Z

raphael10-collab
Feb 20, 2025

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/[email protected]/dist/maplibre-gl.css" crossorigin="anonymous">
        <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/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 ?

Answered by bdon

Feb 26, 2025

That is intentional, because the object at demo-bucket.protomaps.com is not intended to be hotlinked arbitrarily. You should host your .pmtiles yourself and configure CORS.

View full answer

wipfli · 2025-02-20T09:48:19Z

wipfli
Feb 20, 2025
Collaborator Sponsor

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"

0 replies

wipfli · 2025-02-20T09:49:44Z

wipfli
Feb 20, 2025
Collaborator Sponsor

You see here the country names and borders are there and you can choose the display language:

0 replies

bdon · 2025-02-21T08:04:49Z

bdon
Feb 21, 2025
Maintainer

I added a compatible NPM versions column to https://maps.protomaps.com/builds/ to make this clearer. Any other suggestions?

0 replies

raphael10-collab · 2025-02-25T13:10:33Z

raphael10-collab
Feb 25, 2025
Author

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 :

root@WorldMap:~# npm version
{
  npm: '10.9.2',
  node: '22.14.0',
  acorn: '8.14.0',
  ada: '2.9.2',
  amaro: '0.3.0',
  ares: '1.34.4',
  brotli: '1.1.0',
  cjs_module_lexer: '1.4.1',
  cldr: '46.0',
  icu: '76.1',
  llhttp: '9.2.1',
  modules: '127',
  napi: '10',
  nbytes: '0.1.1',
  ncrypto: '0.0.1',
  nghttp2: '1.64.0',
  nghttp3: '1.6.0',
  ngtcp2: '1.10.0',
  openssl: '3.0.15+quic',
  simdjson: '3.10.1',
  simdutf: '6.0.3',
  sqlite: '3.47.2',
  tz: '2024b',
  undici: '6.21.1',
  unicode: '16.0',
  uv: '1.49.2',
  uvwasi: '0.0.21',
  v8: '12.4.254.21-node.22',
  zlib: '1.3.0.1-motley-82a5fec'
}

Does it mean it does not work? I do hope I'm wrong...

0 replies

wipfli · 2025-02-25T13:30:37Z

wipfli
Feb 25, 2025
Collaborator Sponsor

Can you create a jsbin or stackblitz or similar with the problem you are facing? The above code snippet could be a starting point...

0 replies

raphael10-collab · 2025-02-25T15:50:21Z

raphael10-collab
Feb 25, 2025
Author

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 :

<html>
    <head>
        <title>PMTiles MapLibre Example</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" crossorigin="anonymous">
        <link rel="stylesheet" href="style.json">
        <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/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";

            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: 'style.json'
                });
            })
        </script>
    </body>
</html>

and these are the versions of npm and node:

root@WorldMap:/srv/worldmap/html# npm version
{
  npm: '10.9.2',
  node: '22.14.0',
  acorn: '8.14.0',
  ada: '2.9.2',
  amaro: '0.3.0',
  ares: '1.34.4',
  brotli: '1.1.0',
  cjs_module_lexer: '1.4.1',
  cldr: '46.0',
  icu: '76.1',
  llhttp: '9.2.1',
  modules: '127',
  napi: '10',
  nbytes: '0.1.1',
  ncrypto: '0.0.1',
  nghttp2: '1.64.0',
  nghttp3: '1.6.0',
  ngtcp2: '1.10.0',
  openssl: '3.0.15+quic',
  simdjson: '3.10.1',
  simdutf: '6.0.3',
  sqlite: '3.47.2',
  tz: '2024b',
  undici: '6.21.1',
  unicode: '16.0',
  uv: '1.49.2',
  uvwasi: '0.0.21',
  v8: '12.4.254.21-node.22',
  zlib: '1.3.0.1-motley-82a5fec'
}

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

root@WorldMap:/srv/worldmap/html# rm protomaps.pmtiles


root@WorldMap:/srv/worldmap/html# axel https://build.protomaps.com/20250224.pmtiles
Initializing download: https://build.protomaps.com/20250224.pmtiles
File size: 124.115 Gigabyte(s) (133266938191 bytes)
Opening output file 20250224.pmtiles
Starting download

    [  0%] [0                                          1                                          .2                                          3                                           ] [ 997.0B/s] [1547d 1[  0%] [0                                          1                                          .2                                          3                                           ] [   1.9KB/s] [773d12
[100%] [..............................................................................................................................................................................] [  36.4MB/s] [00:00]



root@WorldMap:/srv/worldmap/html# ls -lah
total 125G
drwxr-xr-x  3 root root 4.0K Feb 25 16:45 .
drwxr-xr-x  3 root root 4.0K Feb 24 12:20 ..
-rw-r--r--  1 root root 125G Feb 25 16:45 20250224.pmtiles


root@WorldMap:/srv/worldmap/html# mv 20250224.pmtiles protomaps.pmtiles
root@WorldMap:/srv/worldmap/html#

I removed the previous style.json file, which was taken from here :
https://gist.github.com/wipfli/7062a865c89e36fa74b0701289c3c6c8 ,
and I've put the content of style.json from: https://maps.protomaps.com/#flavorName=light&lang=en&map=0.88/0/0

But, 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?

0 replies

bdon · 2025-02-26T04:41:36Z

bdon
Feb 26, 2025
Maintainer

My npm version is 10.9.2

The versions 4,5 refer to the versions of the @protomaps/basemaps package on npm.

If you are using the style.json copied from the Get Style JSON on https://maps.protomaps.com/ it should be compatible with the latest download. You haven't pasted your entire code example where you load style.json.

This is not valid code:

<link rel="stylesheet" href="style.json">

The MapLibre style JSON is not a CSS stylesheet, it needs to be loaded in JavaScript.

0 replies

raphael10-collab · 2025-02-26T07:34:42Z

raphael10-collab
Feb 26, 2025
Author

@bdon

This time I copied the whole style.json :

root@WorldMap:/srv/worldmap/html# tail style.json 
            "paint": {
                "text-color": "#a3a3a3",
                "text-halo-color": "#e2dfda",
                "text-halo-width": 1
            }
        }
    ],
    "sprite": "https://protomaps.github.io/basemaps-assets/sprites/v4/light",
    "glyphs": "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf"
}
root@WorldMap:/srv/worldmap/html#

and, with this index.html : https://gist.github.com/wipfli/7062a865c89e36fa74b0701289c3c6c8#file-index-html :

<html>
    <head>
        <title>PMTiles MapLibre Example</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" crossorigin="anonymous">
        <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/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";

            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: 'style.json'             // <---------  in this way it should be loaded in JavaScript 
                });
            })
        </script>
    </body>
</html>

I get a grey rendering (no maps at all) :

If I use this style.json : https://gist.github.com/wipfli/7062a865c89e36fa74b0701289c3c6c8#file-style-json
the world map appears but without borders, countries names and cities :

0 replies

bdon · 2025-02-26T08:11:12Z

bdon
Feb 26, 2025
Maintainer

Did you look at what console errors appear when you get the grey screen?

1 reply

raphael10-collab Feb 26, 2025
Author

I get this errors message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://demo-bucket.protomaps.com/v4.pmtiles. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 206.

TypeError: NetworkError when attempting to fetch resource.

But the map is visible when using webkit2gtk:

So the CORS header problem is a problem with the above settings with google chrome and with mozilla firefox

wipfli · 2025-02-26T08:52:59Z

wipfli
Feb 26, 2025
Collaborator Sponsor

@raphael10-collab please provide a jsbin or stackblitz or similar. It is too difficult to debug on someone else's environment and gists are also not well suited.

8 replies

wipfli Feb 26, 2025
Collaborator Sponsor

@bdon I think we should remove this PMTILES_URL stuff from the example

            let PMTILES_URL = "protomaps.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: 'style.json'
                });
            })

should be

                const map = new maplibregl.Map({
                    container: 'map',
                    style: 'style.json'
                });

raphael10-collab Feb 26, 2025
Author

With these changes I still have the same CORS issue ( #401 (reply in thread) ) for Firefox and Chrome. With WebKit2Gtk this problem is not present

raphael10-collab Feb 26, 2025
Author

I have to rectify:

now with Google Chrome the map is correctly visible :

this is the index.html I'm using with the latest style.json file ( taken from https://maps.protomaps.com/#flavorName=light&lang=en&map=0.88/0/0 ) :

<html>
    <head>
        <title>PMTiles MapLibre Example</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="maplibre-gl.css">
        <script src="maplibre-gl.js"></script>
        <script src="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);


            const map = new maplibregl.Map({
                container: 'map',
                style: 'style.json'
            });
        </script>
    </body>
</html>

But the CORS problem persists with Mozilla FireFox :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://demo-bucket.protomaps.com/v4.pmtiles. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 206.
TypeError: NetworkError when attempting to fetch resource.

bdon Feb 26, 2025
Maintainer

That is intentional, because the object at demo-bucket.protomaps.com is not intended to be hotlinked arbitrarily. You should host your .pmtiles yourself and configure CORS.

Answer selected by bdon

raphael10-collab Feb 27, 2025
Author

I'm hosting .pmtiles my self

This is my /etc/nginx/sites-available/default configuration :

server {    
        server_name myserver.name;

        root /srv/worldmap/html;
    
        index index.html;


        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;

                autoindex on;
                autoindex_exact_size off;
                autoindex_localtime on;

                add_header 'Access-Control-Allow-Origin' "$http_origin" always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,Range,User-Agent,X-Requested-With' always;

                if ($request_method = 'OPTIONS') {
                    # Tell client that this pre-flight info is valid for 20 days
                    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
                    add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,Range,User-Agent,X-Requested-With' always;
                    add_header 'Access-Control-Max-Age' 1728000;
                    add_header 'Content-Type' 'text/plain charset=UTF-8';
                    add_header 'Content-Length' 0;
                    return 204;
                }
        }
}

.pmtiles that I'm hosting :

root@WorldMap:~# ls -lah /srv/worldmap/html/
total 125G
drwxr-xr-x  3 root root 4.0K Feb 27 12:48 .
drwxr-xr-x  3 root root 4.0K Feb 24 12:20 ..
-rwxr-xr-x  1 root root 1.3K Feb 24 19:01 OLDindex.html
-rw-r--r--  1 root root 404K Feb 26 08:14 OLDstyle.json
-rw-r--r--  1 root root  850 Feb 26 11:15 index.html
-rw-r--r--  1 root root  68K Feb 24 18:57 maplibre-gl.css
-rw-r--r--  1 root root 889K Feb 24 18:55 maplibre-gl.js
-rw-r--r--  1 root root 1.8K Feb 25 17:43 mapview.css
drwxr-xr-x 31 root root 4.0K Feb 26 09:10 node_modules
-rw-r--r--  1 root root  16K Feb 26 09:08 package-lock.json
-rw-r--r--  1 root root   93 Feb 26 09:08 package.json
-rw-r--r--  1 root root  48K Feb 24 19:00 pmtiles.js
-rw-r--r--  1 root root 125G Feb 25 16:45 protomaps.pmtiles                 //    <----------------------------
-rw-r--r--  1 root root 404K Feb 26 11:17 style.json
root@WorldMap:~#

And /srv/worldmap/html/index.html :

<html>
    <head>
        <title>PMTiles MapLibre Example</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="maplibre-gl.css">
        <script src="maplibre-gl.js"></script>
        <script src="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);


            const map = new maplibregl.Map({
                container: 'map',
                style: 'style.json'
            });
        </script>
    </body>
</html>

And, with this nginx configuration, no issues at all with Google Chrome and with WebKit2Gtk, but with Firefox Mozilla "CORS Issue"

bdon Mar 4, 2025
Maintainer

If you fix the NGINX configuration then can you please open a PR in the docs?

Uh oh!

The 20250217.pmtiles didn't contain any countries names and borders, and any cities at all #401

Uh oh!

Uh oh!

raphael10-collab Feb 20, 2025

Replies: 10 comments · 9 replies

Uh oh!

wipfli Feb 20, 2025 Collaborator Sponsor

Uh oh!

wipfli Feb 20, 2025 Collaborator Sponsor

Uh oh!

bdon Feb 21, 2025 Maintainer

Uh oh!

raphael10-collab Feb 25, 2025 Author

Uh oh!

wipfli Feb 25, 2025 Collaborator Sponsor

Uh oh!

Uh oh!

raphael10-collab Feb 25, 2025 Author

Uh oh!

bdon Feb 26, 2025 Maintainer

Uh oh!

Uh oh!

raphael10-collab Feb 26, 2025 Author

Uh oh!

bdon Feb 26, 2025 Maintainer

Uh oh!

Uh oh!

raphael10-collab Feb 26, 2025 Author

Uh oh!

wipfli Feb 26, 2025 Collaborator Sponsor

Uh oh!

wipfli Feb 26, 2025 Collaborator Sponsor

Uh oh!

Uh oh!

raphael10-collab Feb 26, 2025 Author

Uh oh!

Uh oh!

raphael10-collab Feb 26, 2025 Author

Uh oh!

bdon Feb 26, 2025 Maintainer

Uh oh!

Uh oh!

raphael10-collab Feb 27, 2025 Author

Uh oh!

bdon Mar 4, 2025 Maintainer

raphael10-collab
Feb 20, 2025

Replies: 10 comments 9 replies

wipfli
Feb 20, 2025
Collaborator Sponsor

wipfli
Feb 20, 2025
Collaborator Sponsor

bdon
Feb 21, 2025
Maintainer

raphael10-collab
Feb 25, 2025
Author

wipfli
Feb 25, 2025
Collaborator Sponsor

raphael10-collab
Feb 25, 2025
Author

bdon
Feb 26, 2025
Maintainer

raphael10-collab
Feb 26, 2025
Author

bdon
Feb 26, 2025
Maintainer

raphael10-collab Feb 26, 2025
Author

wipfli
Feb 26, 2025
Collaborator Sponsor

wipfli Feb 26, 2025
Collaborator Sponsor

raphael10-collab Feb 26, 2025
Author

raphael10-collab Feb 26, 2025
Author

bdon Feb 26, 2025
Maintainer

raphael10-collab Feb 27, 2025
Author

bdon Mar 4, 2025
Maintainer