javascriptcssleafletmbtiles

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

Solution

  • 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