Skip to content

ThinkGeo MBTiles Support

ThinkGeo now supports the Mapbox MBTiles data format and the Mapbox Style JSON format through MbTilesLayer, and supports Raster MbTiles through MbTilesRasterLayer.

MbTilesLayer

The MbTilesLayer is a new layer added to the ThinkGeo.Core library that supports the MapBox/OpenMapTiles MBTile vector tile datasource schema and renders the data on the map. This layer does does not write data to the MBTiles file, so this is a readonly layer with no backing datasource object like other layers.

As of this moment, MbTilesLayer reads the MBTiles metadata table to determine the data's properties like the data's extent, max zoomlevel, and starting center point. At this time, only the "bounds" property is used in the GetBoundingBox method. It also reads the tiles table to retrieve the vector data to render on the map.

The MbTilesLayer class reads a MBTiles Style JSON file and parses it into ThinkGeo styles and applies them to a ThinkGeo ZoomLevelSet. The Style JSON adheres to the Mapbox Style Specification, but does not require anything outside of the "layers" property. All other top level properties are ignored.

Example Usage with Desktop Edition

// With ThinkGeo.UI.Wpf or ThinkGeo.UI.WinForms 
private async void MapView_OnLoaded(object sender, RoutedEventArgs e)
{
    // Setup the MapView and Overlay
    MapView.MapUnit = GeographyUnit.Meter;
    var layerOverlay = new LayerOverlay();
    MapView.Overlays.Add(layerOverlay);

    // Create the MbTiles layer by providing the path to the .mbtiles and style json file
    var layer = new MbTilesLayer(@"path\to\sample.mbtiles", @"path\to\sample-style.json");
    layerOverlay.Layers.Add(layer);

    // Set starting extent to the layer's bounding box
    await layer.OpenAsync();
    MapView.CurrentExtent = layer.GetBoundingBox();
    var bgColor = layer.BackgroundColor;
    MapView.Background = new SolidColorBrush(Color.FromArgb(bgColor.A, bgColor.R, bgColor.G, bgColor.B));
}

Example Usage with MAUI Edition

    // With ThinkGeo.UI.Maui
    private bool _initialized;
    private async void MapView_OnSizeChanged(object sender, EventArgs e)
    {
      if (_initialized)
          return;
      _initialized = true;

      MapView.MapUnit = GeographyUnit.Meter;

      var layerOverlay = new LayerOverlay();
      layerOverlay.TileType = TileType.MultiTile;
      MapView.Overlays.Add(layerOverlay);

      var dataFilePath = Path.Combine(FileSystem.Current.AppDataDirectory, "sample.mbtiles");
      var jsonFilePath = Path.Combine(FileSystem.Current.AppDataDirectory, "sample-style.json");

      var layer = new MbTilesLayer(dataFilePath, jsonFilePath);
      layerOverlay.Layers.Add(layer);

      await layer.OpenAsync();
      // set up the MapScale of Center Point
      var bbox = layer.GetBoundingBox();
      MapView.MapScale = MapUtil.GetScale(bbox, MapView.CanvasWidth, GeographyUnit.Meter);
      MapView.CenterPoint = bbox.GetCenterPoint();

      // Set up the background Color
      var bgColor = layer.BackgroundColor;
      MapView.BackgroundColor = new Color(bgColor.R, bgColor.G, bgColor.B, bgColor.A);

      await MapView.RefreshAsync();
  }

MbTilesRasterLayer

The MbTilesRasterLayer is a new layer added to the ThinkGeo.Core library that supports the MapBox/OpenMapTiles MBTile Raster tile datasource schema. It is much more straightforward than MbTilesLayer as it doesn't have a styleJson file involved.

Example Usage with Desktop Edition

// With ThinkGeo.UI.Wpf or ThinkGeo.UI.WinForms 
private async void MapView_OnLoaded(object sender, RoutedEventArgs e)
{
    // Setup the MapView and Overlay
    MapView.MapUnit = GeographyUnit.Meter;
    var layerOverlay = new LayerOverlay();
    MapView.Overlays.Add(layerOverlay);

    // Create the MbTiles layer by providing the path to the .mbtiles and style json file
    var layer = new MbTilesRasterLayer(@"path\to\sample.mbtiles");
    layerOverlay.Layers.Add(layer);

    // Set starting extent to the layer's bounding box
    await layer.OpenAsync();
    MapView.CurrentExtent = layer.GetBoundingBox();
}

Example Usage with MAUI Edition

// With ThinkGeo.UI.Maui
private bool _initialized;
private async void MapView_OnSizeChanged(object sender, EventArgs e)
{
   if (_initialized)
       return;
   _initialized = true;

   MapView.MapUnit = GeographyUnit.Meter;

   var layerOverlay = new LayerOverlay();
   layerOverlay.TileType = TileType.MultiTile;
   MapView.Overlays.Add(layerOverlay);

   var dataFilePath = Path.Combine(FileSystem.Current.AppDataDirectory, "sample.mbtiles");
   var layer = new MbTilesRasterLayer(dataFilePath);
   layerOverlay.Layers.Add(layer);

   await layer.OpenAsync();

   // set up the MapScale of Center Point
   var bbox = layer.GetBoundingBox();
   MapView.MapScale = MapUtil.GetScale(bbox, MapView.CanvasWidth, GeographyUnit.Meter);
   MapView.CenterPoint = bbox.GetCenterPoint();

   await MapView.RefreshAsync();
}

FAQ

I thought we already supported MBTiles?

Previously, we supported MBTiles through the ThinkGeoMBTilesLayer. The problem with this layer is that it only supports styling through our own ThinkGeo StyleJson styling format. The MbTilesLayer uses the standard MBTiles Style JSON format instead, making it easier for users to port over styling from MBTiles Style JSON styles to the ThinkGeo styles.

Does this affect users that already use ThinkGeoMBTilesLayer?

No, as of ThinkGeo.Core v14.1, the old ThinkGeoMBTilesLayer is still supported with no need to change to the new layer, however, users can easily upgrade to the MbTilesLayer with their existing ThinkGeo MBTiles data by simply changing the class and using a standard MBTiles Style JSON file instead of a ThinkGeo Style JSON file. The current hurdle is that our ThinkGeo MBTiles data has different layer and column names compared to MBTiles Style JSON files available online. We will need to create our own style that fits this standard, or modify our current dataset to adhere to an open format.

Where can I get MBTiles data?

  • MapTiler has a whole host of data available, but requires a license or payment based on the type of data you want.

  • OpenZoomStack also has data, but is mostly centered around UK data.

  • MapLibre has a demo tileset available in on their github releases.

How do I create new MbStyle JSON files with my own styles?

  • Maputnik has an online editor that allows you to create styles for your map and then export those styles into MbStyle JSON format.

  • There is also MapTiler, but I have found this less useful over Maputnik.

Known Issues

  • Only a subset of expressions used in the paint properties are supported, mostly pertaining to expressions that depend on feature column values. In the future, we will need to rethink how to better support these expressions, however, the major use cases are covered at this time.