Converting GeoJSON to Vector Tiles on the fly w/ MapBox GL JS?

Question

My map's source file is GeoJSON, but it is very large and very slow. Is there a way to convert this to vector tiles on the fly using MapBox GL JS? (Load the GeoJSON, pre-process the file into vector tiles, and show use the vector tiles as the base map.) It seems that vector tiles are much faster.

I've tried all the GeoJSON-VT tutorials and examples that I could, like the one on MapBox's site, but it just says that GeoJSON-VT works under the hood, so it isn't much help. The others mostly apply to Leaflet, not MapBox GL JS.

Meanwhile, every example I find that uses a large dataset always does so via vector tiles:

map.addSource('x', {
        "type": "vector",
        "url": "url"
    });

For reference, I am loading my file using this method:

map.addSource('x', {
        type: 'geojson',
        data: 'file.geojson'
    });

Answer 1

In case your GeoJSON file is static, you could use mapbox/tippecanoe to convert the GeoJSON to an .mbtiles file. You could then either upload the file to Mapbox as a tileset (about tilesets) or you could serve your own vector tile source from a web server using the .mbtiles file (reference implementation).

If your GeoJSON file is more dynamic, things get a little bit more complicated. I have never used it, but Mapbox Dataset API might be a good solution for that.

Answer 2

To the best of my knowledge, Mapbox-GL-JS uses GeoJSON-VT to automatically convert client-side-loaded GeoJSON files into vector tiles within the browser - so it's already doing what you're asking for.

If this is still "slow", probably the problem is the actual loading and processing - so pre-generating and serving vector tiles is the right answer.