Get/list source-layers from Mapbox GL JS vector source

Question

In Mapbox GL JS I am adding a vector tile source from a locally hosted mbtiles file. Adding this source to my map instance is easy like below.

map.addSource("polylinesSource",{
      "type":"vector",      
      "tiles": [
       "http://localhost:8000/polylinesJoined/{z}/{x}/{y}.pbf"
      ]
    })

The source-layers from this service will be dynamic and I am hoping for a way to reference all those layers once the source is loaded. Is it possible to list all the layers in a source once loaded?

Answer 1

This is surprisingly fiddly to do. Mapbox-GL-JS doesn't expose any methods to list the vector tile source layers available within a tileset.

I built vector inspector to solve this exact problem. The code here shows you the process for extracting that information from a .pbf: https://github.com/stevage/vector-inspector-api/blob/master/server.js

Alternatively, since you have the local mbtiles file, another option is to extract it locally. Using another tool I built, tileinfo.

Also, if you serve the tiles using something like tessera you can access the layers info directly at the TileJSON endpoint.