Possible To Style Mbtiles In A Leaflet Map?

I'm trying to display a .mbtiles layer (created by Tippecanoe) in a Leaflet map. The tiles are loaded with Leaflet.TileLayer.MBTiles. So far nothing is visible on the map, although

Solution 1:

MBTiles format can be used for vector or raster data. In the case of MBTiles set created by tippecanoe, it contains vector data.

Although it might not be explicitly written, Leaflet.TileLayer.MBTiles plugin handles only raster tiles (PNG or JPG) (as of today).

To render vector data (which enable you to style it at runtime), you should have a look at Leaflet.VectorGrid plugin. Unfortunately, it does not currently work out-of-the-box with vector MBTiles set.

If you are interested, you can have a look at https://github.com/Leaflet/Leaflet.VectorGrid/issues/54

Solution 2:

The MBTiles specification says: "The zoom_level, tile_column, and tile_row columns MUST encode the location of the tile, following the Tile Map Service Specification". This means that the Y numbering goes form south to north, which is the opposite compared to the numbering generally used in WMTS services, like OpenStreetMap. To switch between both Y axis directions, use Y' = 2^zoom - 1 - Y. I encoutered some examples where MBTiles were wrongly numbered, with the effect that the region on the opposite side of the equator is displayed. And this may not be included at all in a particular tile set, which would leave you with an empty map. Check if this is also the source of your problem.