mapbox / mapbox/mapbox-maps-flutter

Unable to load local raster tiles from device storage in Mapbox Maps Flutter

Open
#890 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Dart
Stars
380
Forks
204
PR merge metrics
No merged PRs in 30d

Description

**Description:**

I'm migrating from flutter_map to mapbox_maps_flutter in my Flutter app. My app requires downloading a zip file containing PNG raster tiles, extracting it to the device's storage, and displaying these tiles offline using Mapbox. While I've successfully implemented this with flutter_map, the performance of GeoJSON rendering is poor, and I'd like to leverage Mapbox's better GeoJSON support.

However, I'm facing issues when trying to load local raster tiles from the device storage using mapbox_maps_flutter. Here's what I've tried:

**Code to Add Raster Layer:**

```
void addRasterLayer() async {
try {
final appDocDir = await getApplicationDocumentsDirectory();
final rasterPath = '${appDocDir.path}/TALHOES/{z}-{x}-{y}.png';

final rasterSource = RasterSource(
id: "raster-source",
tiles: ["file://$rasterPath"], // Absolute path
tileSize: 256,
);

print('Path: $rasterPath');

final rasterLayer = RasterLayer(
id: "raster-layer",
sourceId: "raster-source",
);

mapboxMap?.style.addSource(rasterSource);
mapboxMap?.style.addLayer(rasterLayer);
} catch (e) {
print('Error adding raster layer: $e');
}
}
Map Initialization:

dart
Copy
_onMapCreated(MapboxMap mapboxMap) {
this.mapboxMap = mapboxMap;
mapboxMap.style;
addRasterLayer();
addPolygonLayer();
}
```
**File Structure:**

The PNG files are stored in the device's storage under the path: TALHOES/{z}-{x}-{y}.png.

The files are named according to the z-x-y.png convention (e.g., 0-0-0.png, 1-0-0.png, etc.).

**Problem:**

The raster layer is added without errors (confirmed by logs), but the tiles are not displayed on the map. Only the base map is visible.

I've verified that the PNG files exist in the correct location and are accessible.

**What I've Tried:**

Changing the file extension from .sigma to .png.

Ensuring the directory structure and file paths are correct.

Using different tileSize values (256 and 512).

Adding logs to confirm that the source and layer are added successfully.

**Questions:**

Is it possible to load local raster tiles from device storage using mapbox_maps_flutter?

If yes, what is the correct way to configure the RasterSource and RasterLayer for local files?

Are there any known limitations or additional steps required for offline raster tile support?

**Environment:**

Flutter version: 3.29.0

Mapbox Maps Flutter version: 2.6.1

Platform: Android

**Additional Context:**

The app needs to work offline after the initial download of the raster tiles.

GeoJSON rendering works perfectly with Mapbox, but I need to integrate local raster tiles for a complete solution.

**Steps to Reproduce:**

Download a zip file containing PNG raster tiles.

Extract the zip file to the device's storage under the path: TALHOES/{z}-{x}-{y}.png.

Use the provided code to add the raster layer to the map.

Observe that the raster tiles are not displayed, only the base map.

**Expected Behavior:**
The local raster tiles should be displayed on the map when added using RasterSource and RasterLayer.

**Actual Behavior:**
The raster tiles are not displayed, and only the base map is visible.

**Additional Information:**

I've confirmed that the PNG files exist and are accessible at the specified path.

The same setup works with flutter_map, but I'm migrating to Mapbox for better GeoJSON performance.

**Questions for the Mapbox Team:**

Is loading local raster tiles from device storage supported in mapbox_maps_flutter?

If supported, what is the correct configuration for RasterSource and RasterLayer?

Are there any additional steps or limitations I should be aware of?

This issue is blocking my migration to Mapbox, and I'd appreciate any guidance or support to resolve it. Thank you!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the Android case with the supplied addRasterLayer code, local TALHOES/{z}-{x}-{y}.png files, and mapbox_maps_flutter 2.6.1. Check the RasterSource and RasterLayer support for file-based tiles and offline raster sources; done means establishing whether this configuration is supported and documenting the required setup or limitation.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart
Domain
mobile-dev
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.