How to generate vector tiles and how to display it in leaflet

Question

My data consists of many elements and attibutes, so I can't send entire json to client-side because it's too slow reading and displaying data.

At this point I need to make tiles from data. I have worked with tippecanoe, and it's so good but it "only" generates *.mbtiles (vector data inside *.pbf), and Leaflet 1.0.2 can't work with this format, so I tried to extract into zoom folders z/x/y with mbutil, but it seems that resulted *.pbf tiles are not correct because I've tried with Mapbox gl js and doesn't work well.

So first question is:

someone know how can I generate *.pbf tiles correctly from geojson files? I've tried some of options showed here: awesome-vector-tiles

And someone know if there's some plugin for Leaflet 1.0.2 that can work with vector tiles in *.mbtiles, *.pbf or *.json?

I've tried with mapbox-gl-leaflet, vectorgrid and tangram.

Thank you very much for your help

Answer 1

You can serve Mapbox vector tiles from a Tippecanoe generated .mbtiles file using TileServer-GL. Using Docker makes this task even easier.

Assuming you have already generated a file called geo.mbtiles using Tippecanoe in your current directory:

docker run -it -v $(pwd):/data -p 8080:80 klokantech/tileserver-gl geo.mbtiles

This will spin up a server, and it will give you an endpoint that serves .pbf vector tiles. These can be rendered with Mapbox GL, Leaflet.VectorGrid, etc.

Answer 2

https://github.com/tangrams/tangram

Tangram: WebGL Maps for Vector Data

you can display vector tiles using this JS library with leaflet

Thanks

Answer 3

You can use tippecanoe with the -e option to generate *.pbf files in the proper directory structure. See https://github.com/mapbox/tippecanoe#output-tileset