How to display custom styled vector tiles with Mapbox GL JS?

0
votes

I am planning the development of a map service, where I'd like to display a list of markers on top of a custom "base layer" consisting in vector tiles rendered with TileServer-GL. I understand that TileServer-GL render vector tiles based on an .mbtiles tileset and style with a .json style file made for instance with Maputnik. When comes the step of displaying that into an interactive map, for instance with Mapbox GL JS, I understand that you can specify the tiles served by TileServer-GL as a third party source (https://docs.mapbox.com/mapbox-gl-js/example/third-party/), but it seems that you then need to add layers one by one, and specifying the style of each layer. But I thought that's what the tile server already does! Have I misunderstood anything?

Thanks for your help

1
gismapbox-gl-jstileserver-gl

1 Answers

0
votes

I'm not exactly sure what you're asking, but basically you will:

  1. Construct a Mapbox GL style file (.json) which refers to all the layers you have created, where they are hosted, and how you want each of them displayed.
  2. Initialise a map object that loads that style file:
const map = new mapboxgl.Map({
  // ...
  style: 'http://localhost:8000/style.json
});