Question: FileSource JS Example

[ameykshirsagar]

Hi, I am learning how to use PMTiles with a simple file upload form. Can anyone please help me with a working example with MaplibreJS??

Thank you

[ameykshirsagar]

I am trying to make it work using svelte. Here is my App.svelte. After uploading a file, I am getting this error

Uncaught Error: Unimplemented type: 6

Steps to recreate my issue

1. npm create vite@latest
2. Select Svelte. And change directory to project folder.
3. npm i pmtiles
4. npm run dev

<script>
  import {
    PMTiles,
    FileAPISource,
    Protocol
  } from "pmtiles";
  import {
    onMount
  } from "svelte";
  let mapBlob, mapEl, downloadMap, files;

  function onFilesLoad() {
    console.log(files[0]);
    let protocol = new Protocol();
    maplibregl.addProtocol("pmtiles", protocol.tile);
    let PMTILES_URL = new FileAPISource(files[0]);
    const p = new PMTiles(PMTILES_URL)
    protocol.add(p);
    p.getHeader().then(h => {
      const map = new maplibregl.Map({
        container: mapEl,

        zoom: h.maxZoom - 2,
        center: [h.centerLon, h.centerLat],
        style: {
          version: 8,
          sources: {
            "example_source": {
              type: "vector",
              url: "pmtiles://maps.pmtiles",
              attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
            }
          },
          layers: [{
              "id": "buildings",
              "source": "example_source",
              "source-layer": "landuse",
              "type": "fill",
              "paint": {
                "fill-color": "steelblue"
              }
            },
            {
              "id": "roads",
              "source": "example_source",
              "source-layer": "roads",
              "type": "line",
              "paint": {
                "line-color": "black"
              }
            },
            {
              "id": "mask",
              "source": "example_source",
              "source-layer": "mask",
              "type": "fill",
              "paint": {
                "fill-color": "white"
              }
            }
          ]
        }
      });
    })
  }

</script>

<main>
  <input type="file" name="" id="" bind:files={files} on:change={onFilesLoad}>
  <div id="map" bind:this={mapEl}>

  </div>
</main>

<style>

</style>

[bdon]

Do you see http range requests being created in the network console? it looks like it's attempting to parse the MVT protocol buffers but not succeeding.

[kauly]

I have a similar issue with Nextjs: Uncaught Error: Unimplemented type: 3. The tile is rendering without problem in the Pmtiles Viewer.

Two requests are being made and the pmtiles file is being served with the http-server npm package:

[kauly]

The error:

[kauly]

Ok last comment, I put the project in this repo

https://github.com/kauly/pmtiles-testing

[bdon]

How did you generate your archive? It has the metadata field for compression set to 0 (unknown), meaning the browser does not know to decompress the tiles. Please use https://github.com/felt/tippecanoe and specify a .pmtiles extension for the output

[kauly]

I tried so many things but I think that I end up using the python script. The origin is a shape file converted to geojson.

[kauly]

Ok I got a new error using tippecanoe Error: Wrong magic number for PMTiles archive

[kauly]

I think that tippecanoe is ignoring the extension and generating a mbtile

[kauly]

yeah Im using an old version of tippecanoe

[kauly]

Now Im not getting errors but nothing is being rendered. I'm suspecting that the tile has no layers. Is this the right tippecanoe command:

tippecanoe -z12 -o gfpolis.pmtiles --drop-densest-as-needed gfpolis.geojson

[kauly]

I got it now, its just a polygon. Thank you for the tippecanoe tip.

[bdon]

OK, thanks for the notes. Need to double check the issue with python writer here: https://github.com/protomaps/PMTiles/issues/139