Unable to build working pmtile from different sources

I tried to convert different sources into pmtiles without success. The conversion works fine without any errors but the generated pmtiles are not working.

Step to reproduce

Attempt 1 Download mbtiles from openmaptiles.org Convert into pmtiles

pmtiles convert switzerland.mbtiles switzerland.pmtiles

Attempt 2 Download pbf from download.geofabrik.de Convert into mbtiles

tilemaker --input switzerland-latest.osm.pbf --output switzerland.mbtiles --config ./resources/config-openmaptiles.json --process ./resources/process-openmaptiles.lua

And convert into pmtiles pmtiles convert switzerland.mbtiles switzerland.pmtiles

The methods just described do not raise any problems in the conversion process, but the pmtiles files don't seem to work. The converted files are available on google cloud:

Online mbtiles

Converted from openmaptiles.org mbtiles -> pmtiles https://storage.googleapis.com/bucket-swiss-map/pmtiles/switzerland.pmtiles

Converted from geofrabrik pbf -> mbtiles -> pmtiles https://storage.googleapis.com/bucket-swiss-map/pmtiles/switzerland-new.pmtiles

Some code attemp using pmtiles and protomaps


<html>
    <head>
        <title>PMTiles Leaflet Example</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.0/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.9.0/dist/leaflet.js"></script>
        <script src="https://unpkg.com/protomaps@latest/dist/protomaps.min.js"></script>
         <!--<script src="https://unpkg.com/pmtiles@2.4.0/dist/index.js"></script>-->
        <style>
            body,
            #map {
                height: 100vh;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <!--  <script type="text/javascript">
            const map = L.map('map').setView([0, 0], 0);
            let url = "https://storage.googleapis.com/bucket-swiss-map/pmtiles/switzerland-new.pmtiles";
            const p = new pmtiles.PMTiles(url)
            p.getHeader().then(h => {
                let layer = pmtiles.leafletRasterLayer(p, {
                    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>.'
                });
                layer.addTo(map);
            })
      </script>-->
      <script type="text/javascript">
            const startLatLng = [46.003, 8.951];
            const latDelta = 0.01;
            const lngDelta = latDelta * 1.75;
            const markers = new Array(9).fill(undefined).map((_, i) => L.marker([startLatLng[0] + Math.floor(i / 3) * latDelta, startLatLng[1] + (i % 3) * lngDelta]));

            const map = L.map("map").setView(startLatLng, 13);
            let url = "https://storage.googleapis.com/bucket-swiss-map/pmtiles/switzerland-new.pmtiles";
            let layer = protomaps.leafletLayer({ url: url });
            layer.addTo(map);

            L.featureGroup(markers).addTo(map);
        </script>
    </body>
</html>

Using the online tool https://protomaps.github.io/PMTiles/ I cannot display any map. I also tried with a leaflet client but without success. Note: If I download small area from https://app.protomaps.com/downloads it works!!!

Any suggestions?

protomaps / PMTiles

Unable to build working pmtile from different sources #95

Step to reproduce

Online mbtiles