pmtiles created from polygon not visible

[sumew]

I want to use maplibre-gl-js to display a detailed admin map in an environment where the network bandwidth is very low. I have started with a geojson polygon of detailed admin maps and have converted to pmtiles with the intention of hosting it in cloudflare. The problem is I can't seem to get it to display. I used this example and replaced the provided pmtiles with mine
https://github.com/protomaps/PMTiles/blob/main/js/examples/maplibre.html

It looks like one cannot simply create tiles out of polygongs and use it as a source but I don't know what else is missing from my tiles. What is the minimum set of things I need to project my polygons on an empty world map?

Thanks for all the help!

[bdon]

Can you share your MapLibre JSON style or your created pmtiles? it's impossible to debug what is going on without those.

[sumew]

Here's my code, it shows me the borders when I add them as geojson but when I convert them to tiles (tippecanue + pmtiles) nothing shows

import maplibregl from 'maplibre-gl';
import * as pmtiles from 'pmtiles';


let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles", protocol.tile);

let PMTILES_URL = "http://127.0.0.1:8080/eth.pmtiles";

const p = new pmtiles.PMTiles(PMTILES_URL)

protocol.add(p);

p.getHeader().then(h => {
  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json'
  });
  map.on('load', () => {

    //works
    map.addSource('borders', {
      type: 'geojson',
      data: 'http://127.0.0.1:8081/eth.geojson'
    });

    /*
     * Doesn't work, created pmtiles from the above geojson with
     * tippecanoe -z10 -l borders -o eth.mbtiles --coalesce-densest-as-needed eth.geojson
     * pmtiles convert eth.mbtiles eth.pmtiles
     */
    map.addSource('borders', {
      type: 'vector',
      url: "pmtiles://http://127.0.0.1:8081/eth.pmtiles",
    });

    map.addLayer({
      "id": "country_borders",
      "type": "line",
      "source": "borders",
      "layout": { "line-join": "round" },
      "paint": {
        "line-color": "#9e9cab",
        "line-dasharray": [5, 1],
        "line-width": { "base": 1, "stops": [[4, 0.4], [5, 1], [12, 1.8]] }
      }
    })
  })
})

[bdon]

please share your eth.pmtiles so we can debug it or inspect it with https://protomaps.github.io/PMTiles/ and verify it appears

[sumew]

It shows the outline of the entire polygon when I inspect it on the PMTiles viewer but not the inner polygons, I do see the attributes are present though so the information for the inner polygons is there but isn't visible. I guess the issue is with my layers then? Here's the geojson and the pmtiles

This was what the geojson looks like.

An the pmtiles using the PMTiles viewer

[bdon]

This is just a styling issue, in your custom style you need to visualize the borders (lines) of the polygons instead of only the fill to distinguish the internal polygons.

[sumew]

I found the problem. I needed to provide a source-layer property in my layer.

      map.addLayer({
        "id": 'borders',
        "type": 'line',
        "source": 'borders',
        "source-layer": 'borders',
        "layout": { ...},
        "paint": {...}
      });