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

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

• javascript
• css
• leaflet
• mbtiles

• Would very much be interested in knowing how you did that... Care to share some code here? – LBes Commented Aug 14, 2018 at 19:36

2 Answers 2

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./Leaflet/Leaflet.VectorGrid/issues/54

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