Possible to style MBTiles in a leaflet map?

Question

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 the MBTiles load fine and are identifiable in the browser's inspector console. I'm guessing that because I haven't externally styled the MBTiles with MapBox Studio (or similar), they don't have any style assigned (color, size, etc...).

Is it possible to style .mbtiles with CSS, JS, or otherwise in the html? I've gleaned that usually .mbtiles have an associated style.json file -- is it possible to write my own and call that in the html or javascript for a Leaflet implementation?

Here's the relevant part of my code:

var map = L.map('map', {layers: [ESRIOceanBaseMap]}).setView([33.985, -120.25], 12);
var mb = L.tileLayer.mbTiles('https://raw.githubusercontent.com/evantdailey/map_testing/master/2016668FA.mbtiles', {
    type: 'circle',
    minZoom: 0,
    maxZoom:25
}).addTo(map);

And I was hoping to do something like this in CSS (doesn't seem to work):

#mb {
    color: black
}

If none of the above is possible, is there any other way to style MBTiles for Leaflet without having to go through MapBox Studio and assign styles for every layer? The goal is to programmatically create numerous layers (each containing thousands of points), so individually styling and exporting each layer would not be ideal.

Ruminant

Would very much be interested in knowing how you did that... Care to share some code here? – Berni

Answer 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

Eldrid

Thanks for explaining that -- I had to refer back to the Leaflet.TileLayer documentation to see that TileLayer is for rasters. I wonder if MBTiles or VectorGrid would be faster. – Ruminant

@Eldrid would you mind explaining and detailing a bit more the approach relying on Leaflet.VectorGrid – Berni

@Berni I am not sure I understand fully what you would like. Asking a new question might be more appropriate as you know. If you want to combine MBTiles and Leaflet VectorGrid, as explained above, there is currently no out-of-the-box solution unfortunately. If you want just Leaflet VectorGrid, you have some demo code and API in the repo homepage. See #44325483. You might also be interested in other libs than Leaflet, see #48813474 – Eldrid

@Eldrid I have added a question here: https://mcmap.net/q/1623838/-cannot-render-vector-tiles-mbtiles-file-with-leaflet/1820086 – Berni

Answer 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.

Kwarteng