MBTiles is blank on the Map

[lagrandecode]

Please I need someone to help me out. I have been trying to load mbtiles on the map but to no avail. I actually can't figure out my mistake. i diclared var mbtiles.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
// import 'package:flutter_map_mbtiles/flutter_map_mbtiles.dart';
import 'package:latlong2/latlong.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:flutter_map_mbtiles/flutter_map_mbtiles.dart';
import 'package:file_picker/file_picker.dart';
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  var mbtiles;

  // var mbtiles;

  Future<void> pickMBTiles() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles(type: FileType.any);
    if (result != null && result.files.single.path != null) {
      final path = result.files.single.path!;
      final loadedMbTiles = await mbtiles.open(path);
      setState(() {
        mbtiles = loadedMbTiles;
      });
    }else{
      print("Failed to load MBTiles.");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Map with MBTiles'),
        actions: [
          IconButton(
            icon: Icon(Icons.folder_open),
            onPressed: pickMBTiles,
          ),
        ],
      ),
      body: FlutterMap(
        options: MapOptions(
          initialCenter: LatLng(43.724049, -79.511818),
          initialZoom: 14.2,
        ),
        children: [
          if (mbtiles != null)
            TileLayer(
              tileProvider: MbTilesTileProvider(
                silenceTileNotFound: !kDebugMode,
                mbtiles: mbtiles!,
              ),
            )
          else
            TileLayer(
              urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
              userAgentPackageName: 'com.example.app',
            ),
          RichAttributionWidget(
            attributions: [
              TextSourceAttribution(
                'OpenStreetMap contributors',
                onTap: () => launchUrl(Uri.parse('https://openstreetmap.org/copyright')),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

[JaffaKetchup]

@josxha Can you take a look at this? Might be a good idea to convert this to a discussion or take it to your repo if you think that's more appropriate.

[josxha]

@lagrandecode check the console output for any errors or warnings. A common mistake is either missing read permission or the use of a MBTiles archive with vector tiles when the plugin expects raster tiles.

[lagrandecode]

this is my error

lib/main.dart:572:3: Error: 'MbTiles' isn't a type.
  MbTiles? mbtiles;
  ^^^^^^^
lib/main.dart:596:35: Error: The method 'MbTiles' isn't defined for the class '_MapScreenState'.
 - '_MapScreenState' is from 'package:suvmap/main.dart' ('lib/main.dart').
Try correcting the name to the name of an existing method, or defining a method named 'MbTiles'.
      final loadedMbTiles = await MbTiles().open(mbtilesFile.path);
                                  ^^^^^^^

import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_mbtiles/flutter_map_mbtiles.dart';
import 'package:latlong2/latlong.dart';
import 'package:path_provider/path_provider.dart';
import 'package:url_launcher/url_launcher.dart';



void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  String? mbtilesPath;
  MbTiles? mbtiles;


  @override
  void initState() {
    super.initState();
    loadMBTilesFromAssets(); // Load MBTiles when the app starts
  }

  // Function to load MBTiles from assets and save to the cache directory
  Future<void> loadMBTilesFromAssets() async {
    try {
      const mbtilesAssetPath = 'assets/maps/seun.mbtiles';
      final dir = await getTemporaryDirectory();
      final mbtilesFile = File('${dir.path}/seun.mbtiles');

      // Check if the file already exists to avoid unnecessary writes
      if (!mbtilesFile.existsSync()) {
        ByteData data = await rootBundle.load(mbtilesAssetPath);
        List<int> bytes = data.buffer.asUint8List();
        await mbtilesFile.writeAsBytes(bytes);
      }

      // Open the MBTiles file
      final loadedMbTiles = await MbTiles().open(mbtilesFile.path);

      setState(() {
        mbtiles = loadedMbTiles;
        mbtilesPath = mbtilesFile.path;
      });

      print("MBTiles loaded successfully from assets!");
    } catch (e) {
      print("Error loading MBTiles from assets: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Map with MBTiles (Assets)'),
      ),
      body: FlutterMap(
        options: MapOptions(
          initialCenter: LatLng(43.724049, -79.511818),
          initialZoom: 14.2,
        ),
        children: [
          if (mbtilesPath != null)
            TileLayer(
              tileProvider: MbTilesTileProvider(
                silenceTileNotFound: !kDebugMode,
                mbtiles: mbtiles,
              ),
            )
          else
            TileLayer(
              urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
              userAgentPackageName: 'com.example.app',
            ),
          RichAttributionWidget(
            attributions: [
              TextSourceAttribution(
                'OpenStreetMap contributors',
                onTap: () => launchUrl(Uri.parse('https://openstreetmap.org/copyright')),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

[lagrandecode]

I was able to do it with this code:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  String? mbtilesPath;
  MbTiles? mbtiles;

  @override
  void initState() {
    super.initState();
    loadMBTilesFromAssets(); // Load MBTiles when the app starts
  }

  // Function to load MBTiles from assets and save to the cache directory
  Future<void> loadMBTilesFromAssets() async {
    try {
      const mbtilesAssetPath = 'assets/maps/vexc1.mbtiles';
      final dir = await getTemporaryDirectory();
      final mbtilesFile = File('${dir.path}/vexc1.mbtiles');

      // Check if the file already exists to avoid unnecessary writes
      if (!mbtilesFile.existsSync()) {
        ByteData data = await rootBundle.load(mbtilesAssetPath);
        List<int> bytes = data.buffer.asUint8List();
        await mbtilesFile.writeAsBytes(bytes);
      }

      // Initialize the MbTiles object using the correct constructor
      final loadedMbTiles = MbTiles(mbtilesPath: mbtilesFile.path);

      setState(() {
        mbtiles = loadedMbTiles; // Correctly assign the MbTiles object
        mbtilesPath = mbtilesFile.path;
      });

      print("MBTiles loaded successfully from assets!");
    } catch (e) {
      print("Error loading MBTiles from assets: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Map with MBTiles (Assets)'),
      ),
      body: FlutterMap(
        options: MapOptions(
          initialCenter: LatLng(43.724049, -79.511818), // Initial location
          initialZoom: 14.2, // Initial zoom level
        ),
        children: [
          TileLayer(
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            userAgentPackageName: 'com.example.app',
          ),

          // Show MBTiles if loaded, otherwise fallback to OpenStreetMap
          if (mbtiles != null)
            TileLayer(
              tileProvider: MbTilesTileProvider(
                silenceTileNotFound: !kDebugMode,
                mbtiles: mbtiles!,

              ),
            ),
          RichAttributionWidget(
            attributions: [
              TextSourceAttribution(
                'OpenStreetMap contributors',
                onTap: () => launchUrl(Uri.parse('https://openstreetmap.org/copyright')),
              ),
            ],
          ),
        ],
      ),
    );
  }

}
class MbTilesTileProvider extends TileProvider {
  /// Create a new [MbTilesTileProvider] instance with an MBTiles instance.
  MbTilesTileProvider({
    required this.mbtiles,
    this.silenceTileNotFound = !kDebugMode,
  }) : _createdInternally = false;

  /// Create a new [MbTilesTileProvider] instance by providing the path of the
  /// MBTiles file.
  /// The MBTiles database will be opened internally.
  MbTilesTileProvider.fromPath({
    required String path,
    this.silenceTileNotFound = !kDebugMode,
  })  : mbtiles = MbTiles(mbtilesPath: path),
        _createdInternally = true;

  /// MBTiles database
  final MbTiles mbtiles;

  /// If the MBTiles file was created internally, the connection gets closed
  /// on [dispose].
  final bool _createdInternally;

  /// Set to true if you don't want to throw exceptions for tiles that are
  /// not found.
  ///
  /// Defaults to false in debug mode and to true else.
  final bool silenceTileNotFound;

  @override
  ImageProvider getImage(TileCoordinates coordinates, TileLayer options) =>
      MbTilesImageProvider(
        coordinates: coordinates,
        mbtiles: mbtiles,
        silenceTileNotFound: silenceTileNotFound,
      );

  @override
  void dispose() {
    if (_createdInternally) mbtiles.dispose();
    super.dispose();
  }
}
class MbTilesImageProvider extends ImageProvider<MbTilesImageProvider> {
  /// Default constructor for the [MbTilesImageProvider]
  const MbTilesImageProvider({
    required this.coordinates,
    required this.mbtiles,
    required this.silenceTileNotFound,
  });

  /// The tile coordinates of the requested tile image
  final TileCoordinates coordinates;

  /// MBTiles database
  final MbTiles mbtiles;

  /// Whether an exception should get thrown if a tile is not found.
  final bool silenceTileNotFound;

  @override
  Future<MbTilesImageProvider> obtainKey(ImageConfiguration configuration) {
    return Future.value(this);
  }

  @override
  ImageStreamCompleter loadImage(
      MbTilesImageProvider key,
      ImageDecoderCallback decode,
      ) {
    final chunkEvents = StreamController<ImageChunkEvent>();

    return MultiFrameImageStreamCompleter(
      // ignore: discarded_futures, not actually but the lint thinks so
      codec: _loadAsync(key, chunkEvents, decode),
      chunkEvents: chunkEvents.stream,
      scale: 1,
      debugLabel: coordinates.toString(),
      informationCollector: () => [
        DiagnosticsProperty('Current provider', key),
      ],
    );
  }

  Future<Codec> _loadAsync(
      MbTilesImageProvider key,
      StreamController<ImageChunkEvent> chunkEvents,
      ImageDecoderCallback decode,
      ) async {
    final tmsY = ((1 << coordinates.z) - 1) - coordinates.y;
    final bytes = mbtiles.getTile(z: coordinates.z, x: coordinates.x, y: tmsY);
    if (bytes == null) {
      if (silenceTileNotFound) {
        return decode(
          await ImmutableBuffer.fromUint8List(TileProvider.transparentImage),
        );
      }
      throw Exception(
        'Tile could not be found in MBTiles '
            '(z:${coordinates.z}, x:${coordinates.x}, y:${coordinates.y})',
      );
    }
    return decode(await ImmutableBuffer.fromUint8List(bytes));
  }
}