Mastering Offline Maps in Flutter: A Deep Dive (Part 4) : Optimization

Lavkant Kachhwaha
Captainfresh Tech
Published in
4 min readJun 5, 2024

Embark on the next chapter of our Flutter adventure! Having achieved offline capability with mapbox_gl, we’ve seamlessly blended flutter_map and the FMTC plugin. Now, brace yourself for Part 4, where we break free from MapBox/Any server dependencies and delve into the FMTC file import and export. Optimize your Map Downloading Experience and Billing Cost and witness your app’s capabilities soar to unprecedented heights! 🚀🌐✨

Introduction

In this blog post, we’ll explore advanced techniques for optimizing offline maps in Flutter. By leveraging FMTC (Flutter Map Tile Caching), we can import and export map data, enabling controlled down-loading and cost reduction in offline mapping apps. Let’s dive in!

This approach not only provides controlled downloading but also mitigates expenses associated with Mapbox or similar tile services. —

How it Works ? TLDR;

The import() method in the RootExternal class of the flutter_map_tile_caching library offers a comprehensive solution for importing FMTC archives. Here's a breakdown of the process:

  1. Temporary Copy: The method copies the specified archive to a temporary location on the device.
  2. Extraction: Once copied, the archive is opened, and the specified stores (or all stores if none are specified) are extracted, along with all necessary tiles. This ensures that the in-use database is seamlessly merged with the imported data.
  3. Space Considerations: It’s important to note that sufficient storage space must be available on the device to duplicate the entire archive and potentially grow the in-use database.
  4. Complex Return Value: Upon completion, the method returns a complex value encapsulated in the ImportResulttypedef. This value provides detailed information about the import operation.
final importResult = await FMTCRoot.external('~/path/to/file.fmtc').import(['storeName']);

Conflict Resolution Strategies

When importing FMTC archives, conflicts may arise, particularly if an importing store shares the same name as an existing store. FMTC offers four resolution strategies to address these conflicts:

  • skip: Skips importing the store.
  • replace: Deletes the existing store, replacing it entirely with the importing store.
  • rename: Appends the current date and time to the name of the importing store to ensure uniqueness.
  • merge: Merges the tiles and metadata of the two conflicting stores.

Importing FMTC Archives

To import FMTC Archives into your Flutter application, follow these steps:

  1. Retrieve FMTC Files: Obtain FMTC files either from a remote server or from locally stored sources.
  2. Initialize Import Service: Initialize the ImportStoreService, which facilitates the import process.
// Initialize ImportStoreService
ImportStoreService importService = ImportStoreService();

3. Import FMTC Models: Use the importStore method to import FMTC models from files.

// Specify list of FMTC files to import
List<File> fmtcFiles = [...];
// Import FMTC models
List<Map<String, String>> importStatus = await importService.importStore(files: fmtcFiles);

4. Handle Import Status: Handle the import status to determine successful or failed imports.

importStatus.forEach((status) {
status.forEach((storeName, successful) {
debugPrint('Imported store: $storeName, Successful: $successful');
});
});

Exporting FMTC Archives : In App Sharing/Saving to Cloud

Exporting FMTC models allows for sharing cached map data across different instances of your application. Here’s how you can export FMTC models:

  1. Retrieve FMTC Models: Access existing FMTC models from your application.
// Access FMTC models
StoreDirectory? baseMapStore = GetIt.instance<ImportStoreService>().getBaseMapStore;
StoreDirectory? bathymetryLayerStore = GetIt.instance<ImportStoreService>().getBathymetryMapStore;

2. Export FMTC Models: Use the export method to export FMTC models to files.

// Specify directory to save exported FMTC models
Directory exportDirectory = Directory('path_to_export_directory');
// Export FMTC models
await baseMapStore!.export.toFileAsync(exportDirectory);
await bathymetryLayerStore!.export.toFileAsync(exportDirectory);

debugPrint('FMTC models exported successfully to: ${exportDirectory.path}');

Once the store is loaded, Rendering part remains the same from earlier blog.

Other possibilities to enhance Offline Maps experiences :

  • Download Manager Integration: Integrating a download manager can streamline the process of downloading and managing FMTC archives within the app, providing users with better control over their offline map data.
  • In-App Sharing of FMTC Archives: Enabling users to share FMTC archives directly within the app facilitates collaboration and allows users to easily exchange map data with others, enhancing user engagement and community interaction.
  • Region-Wise Sharing of FMTC Data: Offering the ability to share FMTC data region-wise allows users to selectively share specific map regions, optimizing data sharing and reducing file sizes for more efficient distribution.
  • Cloud Integration for FMTC Archives: Uploading FMTC archives to cloud servers and then downloading them to devices enables seamless synchronization of map data across multiple devices and provides a reliable backup solution, ensuring data persistence and accessibility.

Conclusion

In this blog post, we’ve learned how to use FMTC (Flutter Map Tile Caching) to import and export map data, enabling controlled loading and cost reduction in offline mapping apps. By importing FMTC archives, we seamlessly merge pre-cached map data into our app, while exporting allows for sharing and backup. With conflict resolution strategies, we can handle conflicting data effortlessly. Armed with FMTC, developers can optimize their mapping experience and reduce operational costs, making their apps more efficient and user-friendly. So, dive into FMTC and elevate your Flutter app’s mapping capabilities! 🌐🚀

Stay tuned and happy coding!

If you’ve found this post helpful, a few claps would mean a lot! Your support keeps the Flutter community thriving. Thanks for being a part of our journey! 👋🚀

https://www.linkedin.com/in/lavkant-kachhawaha-075a90b4/

--

--