Understanding Style JSON, MVT and MBTiles
Modern map rendering is fast, lightweight, and data-driven. Much of that is thanks to Mapbox Vector Tiles (MVT) and the Style JSON specification. If you’ve ever wondered how these work together, and how MBTiles fits into the picture, this post breaks it down.
Tip
To see live examples using Style JSON, MVT and MBTiles, just clone the HowDoI samples, run the solution and then click on the various MVT and MBTiles samples in the left panel.
While the sample above is using ThinkGeo Desktop for WPF, the Style JSON, MVT and MBTiles functionality work the same in our Mobile and Web components.
What Is Style JSON?
In the world of Vector Tile data, the Style JSON document defines exactly how your map looks and behaves - it’s essentially a stylesheet for your vector tiles.
A style.json file specifies:
Data sources (e.g., vector tile URLs or MBTiles files)
Layers (roads, water, land, buildings, etc.)
Paint and layout rules (colors, line widths, font styles)
Zoom-level behavior (when features appear or disappear)
Think of it like CSS for maps. Instead of styling HTML elements, it styles geographic features such as polygons, lines, and points. In-depth details on the Mapbox/MapLibre style specs can be found here and here.
Here’s a simple example snippet:
{
"sources": {
"mytiles": {
"type": "vector",
"url": "mbtiles://local/my_map.mbtiles"
}
},
"layers": [
{
"id": "roads",
"type": "line",
"source": "mytiles",
"source-layer": "roads",
"paint": {
"line-color": "#ff6600",
"line-width": 2
}
}
]
}
When a mapping engine like ThinkGeo UI reads this file, it knows where to fetch tiles and how to draw them - producing a consistent, high-performance visualization.
Mapbox Vector Tiles (MVT): The Data Format Behind the Scenes
Mapbox Vector Tiles are compact, binary-encoded representations of geographic data. Unlike raster tiles (which are pre-rendered images), vector tiles contain raw geometry and attributes that can be styled dynamically on the client side.
Key benefits of MVT include:
Small file sizes: Efficient binary encoding reduces bandwidth usage.
Dynamic styling: You can change colors, labels, or visibility instantly without re-downloading tiles.
Scalability: Works seamlessly across zoom levels with high precision.
Interactivity: Allows hover effects, feature querying, and more.
MVT files usually have the .pbf extension and are usually served from a tile server, but can also be read from a local MBTiles container.
MBTiles: The Container Format
While MVT defines what the data looks like, MBTiles defines how it’s stored and distributed. An MBTiles file is a SQLite database that packages tiles (vector or raster) into a single portable file. It’s a perfect format for offline maps, local caching, or distribution without an internet connection. You can check out this post for more details on MBTiles and ThinkGeo.
Typical MBTiles tables include:
tiles: holds each tile (e.g., vector.pbfdata)metadata: contains descriptive information (bounds, attribution, min/max zoom, etc.)
An MBTiles file can store either:
Raster tiles (PNG/JPEG images)
Vector tiles (MVT/PBF data)
When paired with a style.json, ThinkGeo UI can render MBTiles-based maps locally which is ideal for offline or air-gapped environments.
Using style.json in ThinkGeo UI
Starting with ThinkGeo UI 14.4, our enhanced MvtTilesAsyncLayer and VectorMbTilesAsyncLayer fully support style.json files, custom projections and caching. This means you can easily apply Mapbox/MapLibre compatible styles to your own datasets on the Desktop, Web and Mobile whether you’re in an online or offline environment.
Here’s a quick example using the MvtTilesAsyncLayer and style.json. Note: this code snippet is from our Desktop ‘HowDoI’ samples that you can download from here:
// Create an overlay to hold the MVT Layer.
_layerOverlay = new LayerOverlay();
_layerOverlay.TileType = TileType.MultiTile;
// Create the MVT Layer - all you need to do is
_mvtLayer = new MvtTilesAsyncLayer("https://demotiles.maplibre.org/style.json");
// Add the MVT Layer to your overlay.
_layerOverlay.Layers.Add(_mvtLayer);
That’s all there is to it. There’s really just one line of code to instantiate the MvtTilesAsyncLayer passing in the location of the style.json file. Inside the style.json file will be links to the vector tile service and other data sources.
To render your local MBTiles data, you have 2 options. The simplest is to just use the VectorMbTilesAsyncLayer and pass in the path to your .mbtiles files and .json file:
// Create a new overlay that will hold our new layer
var layerOverlay = new LayerOverlay();
// Create an offline basemap using vector tiles stored locally in our MBTiles file and also set the styling though a json file
var mbTilesLayer = new ThinkGeoMBTilesLayer(@"./Data/MBTiles/Frisco.mbtiles", new Uri(@"./Data/Json/thinkgeo-world-streets-dark.json", UriKind.Relative));
// Add the MbTiles layer to our overlay.
layerOverlay.Layers.Add(mbTilesLayer);
Alternatively, you can also render a local MBTiles file using the MvtTilesAsyncLayer assuming your style.json file has a source defined using a local mbtiles:// path like the json below:
Connect With Us
We hope you found today’s post useful. If you have questions or topics you'd like us to cover in future posts, we’d love to hear from you! Email us at sales@thinkgeo.com or schedule a meeting to talk in person. We always enjoy connecting with our customers, learning how you’re using ThinkGeo, and exploring new ways to improve our products.
About ThinkGeo
We are a GIS software company founded in 2004 and located in Frisco, TX. Our clients are in more than 40 industries including agriculture, energy, transportation, government, engineering, IT, and defense. We pride ourselves on our excellent service and transparency. ThinkGeo offers a variety of products and services to meet almost any GIS application need. We can even help you develop your next project - anywhere from a few hours of consulting to outsourcing an entire project. To learn more, email us at sales@thinkgeo.com, or call us direct at 1-214-449-0330.
