How to display vector tiles generated by geojson-vt in leaflet?

Question

I have a lot of GeoJSON spatial data that I want to display on a leaflet map. Around 35,000 GeoJSON objects.

Because the amount of points can get very large, I wanted to use the geojson-vt library to tile my data on the client side.

Right now I have successfully tiled my data using the geojson-vt library:

var geoJson = {}; // Request to get data via API call not shown here

var tileOptions = {
        maxZoom: 18, 
        tolerance: 5, 
        extent: 4096,
        buffer: 64, 
        debug: 0, 
        indexMaxZoom: 0, 
        indexMaxPoints: 100000, 
    };

var tileIndex = geojsonvt(geoJson, tileOptions);

How do I integrate the vector tile data generated by geojson-vt to my Leaflet map?

Are there any recommended plugins or libraries that can help?

Answer 1

This plugin for leaflet really helped me out, it's a great start and it works with Leaflet 1.0 and higher. I current use it in a mapping application with the current version of Leaflet and it works great. https://github.com/brandonxiang/leaflet-geojson-vt/tree/leaflet1.0.0

Answer 2

In this example, it is shown how to render geojson-vt in a leaflet map by using L.CanvasTiles.

The problem is that Sumbera's CanvasTiles extension depicted in that example works only up to leaflet 0.7. I haven't found a repo for CanvasTiles in particular, much less an npm package for it.