Tippecanoe generated pbf stored on s3 visualised on mapbox-gl

Question

I am working on this project where I need to generate protobuf files with tippecanoe, store them on an s3 bucket and visualise it using mapbox-gl.
I generate the vector tiles using the -e option to write to a folder of my choice, and also with --no-tile-size-limit and --no-tile-compression to avoid any sort of disparity in the way the data is expected. Then I upload all these files to the s3 bucket.
I then try visualising this by modifying the code at https://docs.mapbox.com/mapbox-gl-js/example/third-party/. My code is:

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    zoom: 12,
    center: [-77,38]
});
map.on('load', function() {
    map.addLayer({
        "id": "test",
        "type": "circle",
        "source": {
            "type": "vector",
            "tiles": ["<link_to_my_cloudfront>/{z}/{x}/{y}.pbf"],
            "maxzoom": 11
        },
        "source-layer": "trees",
        "paint": {
            "circle-radius": 3,
            "circle-color": "#000000",
            "circle-stroke-width": 1
        }
    }
});

I can confirm from the metadata file generated by tippecanoe that the id matches what I have here.
The problem is when I load the map. The response of the requests to the pbf files are 200 and the content-type is also application/x-protobuf but the points just do not show up on the map. Am I using some incorrect options or is it just an incompatibility. I have a hard time believing it is the latter because both tippecanoe and mapbox-gl are developed by mapbox and they are known to be quite robust.

Answer 1

Two possibilities that come to mind:

1. The files are being served gzipped, but without the correct content-type. Usually this shows up in the console with an error, something like "Unsupported record type 4".
2. The tiles are being served just fine, but the vector source layer is not trees. You can use https://stevage.github.io/vector-inspector to check that. If you post your actual URL, we can possibly diagnose further.

In general, hosting tiles on S3 is quite complex to get right. See https://github.com/terriajs/boundary-tiles for one configuration.