Loading .mbtiles into Leaflet that are PBF

Question

I'm new to the offline mapping world and have been trying to work out how to load a .mbtiles file into Leaflet, and it seems that because they're PBF (or maybe I'm lost there), it's not working. I was able to find a .mbtiles file that was a raster, and it loaded fine, but any time I try to load one of the other files (like one downloaded from tilea.io), it fails and I get a tilerror.

Here's the snippet im using, this file works, but if I change to another mbtiles file, it throws an error. I'll add the error below the code

      // when i change the file to another mbtiles file, it breaks,
//but this one works fine as its a raster i assume?
    const coloradoTile = await fetch(
      new URL("./countries-raster.mbtiles", import.meta.url)
    );
    const coloradoBlob = await coloradoTile.blob();
    const coloradoURL = URL.createObjectURL(coloradoBlob);


    const mbtilesLayer = L.tileLayer
      .mbTiles(coloradoURL, {
        minZoom: 0,
        maxZoom: 30,
        tms: true,
        attribution:
          'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
      })
      .addTo(map);

Heres the errors i get:

Answer 1

I actually ended up going a little bit different of a route and creating my own mbtiles file as a raster and it works now. It was something with the vector tiles or something. So for now, this can be considered as resolved as it solves my use case.