How to style a single Mapbox Vector Tile?

1
votes

I would like to take a single Vector Tile extracted from an MBTiles file and style it according to a Mapbox Style Specification, in an offline environment.

Research:

Mapbox has a Static Api which does exactly what I want but obviously requires internet access.

Mapbox also has the Mapbox-Gl-Native and Mapbox-Gl-JS libraries that seem great for generating maps from vector tiles but I can't seem to find a way to generate a single static image instead of an entire map. Is there a way?

Tessera is a tile server that is able to style the vector data but only works with a tm2 project, or mapnik stylesheet

Background: Using Telerik Rad Map WPF Control or any Map control for .NET WPF, I would like to use vector.mbtiles as the offline map source.

I am able to extract a single vector tile from the mbtiles and deserialize it into usable information using mapbox-vector-tile-cs and have even been able to create a rudimentary bitmap image from the data and supply that to telerik and it is able to draw simple geographical maps but ciy and street labels require more complex code to prevent labels from overlapping each other and being angled correctly.

What I can currently do:

  • Use a custom Telerik TiledProvider and a custom Telerik TiledMapSource
  • Extract vector tile from mbtiles
  • Deserialize vector tile into a C# class
  • Use vector data to create a bitmap of the data without labels

My Question:

Is there an existing library in any language, or even an executable that is able to style a single vector file efficiently according to a Mapbox Style Specification, or any configurable style specification?

Any help would be useful. I have already begun a port of the Mapbox-Gl-Native library which has been difficult since it targets mobile platforms and does a lot that I do not require, and I am having trouble figuring out how to simplify it to only deal with one tile requests. Telerik only asks for a bitmap at a specific x/y/zoom, so that is all I need to accomplish.

2
.nettelerikmapbox-glmbtilesvector-tiles

2 Answers

2
votes

You can use tilelive-copy or tl to generate raster image from vector tiles. You can use a TM2 Style (supported by the former version of Mapbox Studio) or a Mapnik XML stylesheet. TM2style allows you to use CartoCSS to define the styling rules.

You can then pass in the boundary of your tile and the zoom level:

./node_modules/tl/bin/tl.js copy -z 13 -Z 13 -b "-77.34027 38.7665218926 -.8420375202 39.1199273249" tmstyle://./stations-style.tm2 file://./tile-export

You'll have to install the corresponding tilelive protocols and tl beforehand:

npm i tilelive-tmsource tilelive-tmstyle tilelive-file tl

The "awesome vector tiles" repo contains a list of rendering alternatives for mapbox vector tiles. Maybe you'll find it useful.

Here is another useful resource about generating raster images from vector sources: https://www.azavea.com/blog/2015/05/29/converting-mapbox-studio-vector-tiles-to-rasters-2/

0
votes

I also found another solution. NET-Mapnik is a .Net solution that allows you to style a vector tile according to mapnik xml style. This is the best WPF solution I have found so far. I am able to use a sqlite connection to grab a vector tile from an mbtiles file, use Net-Mapnik to style and return it to telerik as a bitmap stream.