vector_map_tiles_mbtiles 1.2.2

Mapbox MBTiles vector tile provider for vector_map_files / flutter_map that can be used for a 100% offline map.

vector_map_tiles_mbtiles

A TileProvider for flutter_map that adds support for MBTiles.

• Supported vector tile format: pbf (sometimes known as mvt)
• If you have raster tiles you can use flutter_map_mbtiles.
• Web is not supported because of its lacking SQLite support.

Getting started

Add the following packages to your pubspec.yaml file:

dependencies:
  flutter_map: ^8.0.0              # in case you don't have it yet
  vector_map_tiles_mbtiles: ^1.2.2 # this package
  mbtiles: ^0.5.0                  # MBTiles package

Usage

1. Open the MBTiles file

The MBTiles file must be stored on the file system and read permission must be granted to the app.

You can use the path_provider package to get the path of the app document directory.

// the tile data is gzip encoded (the default for most pbf mbtiles files)
final mbtiles = MbTiles(path: mbTilesPath, gzip: true);

// OR: in case your protobuf data is not gzip encoded use:
final mbtiles = MbTiles(path: mbTilesPath, gzip: false);

2. Provide mbtiles to the MbTilesVectorTileProvider:

@override
Widget build(BuildContext context) {
  return FlutterMap(
    options: MapOptions(
      minZoom: 8,
      maxZoom: 18,
      initialZoom: 11,
      initialCenter:
      metadata.defaultCenter ?? const LatLng(0, 0),
    ),
    children: [
      VectorTileLayer(
        theme: _theme,
        tileProviders: TileProviders({
          'openmaptiles': MbTilesVectorTileProvider(
            mbtiles: mbtiles,
            silenceTileNotFound: true,
          ),
        }),
        // do not set maximumZoom here to the metadata.maxZoom
        // or tiles won't get over-zoomed.
        maximumZoom: 18,
      ),
    ],
  );
}

Using mbtiles files from Geofabrik

1. MbTiles from Geofabrik are gzip compressed. Set the gzip flag to true

MbTiles(path: file, gzip: true)

2. You need to use a style that is compatible with your tile schema. In this case the tile schema is Shortbread. The tile schema used in the example app is OpenMapTiles. Existing styles can be found at https://shortbread-tiles.org/styles/ or used as hosted style from versatiles.org.

// use the style from versatiles.org
final response = await http.get(
  Uri.parse('https://tiles.versatiles.org/assets/styles/colorful.json'),
);
_theme = ThemeReader().read(
  jsonDecode(response.body) as Map<String, Object?>,
);

When downloaded, apply the theme/style (used ambiguously in vector_map_tiles) in the VectorTileLayer:

VectorTileLayer(
  theme: _theme,
  tileProviders: TileProviders({
    // ...
  }),
),

3. Set the tile provider for the correct source, in this case we want to use the TileProvider for the versatiles-shortbread source.

tileProviders: TileProviders({
  'versatiles-shortbread': MbTilesVectorTileProvider(
    mbtiles: _mbtiles!,
  ),
}),

Additional information

If you need help you can open an issue or join the flutter_map discord server.