Help using offline map sources

[StudentLW1]

What are you trying to achieve?

I have made an offline map in QGis with the intention of adding it to my compose app using maplibre compose.
I currently have a mbtiles file containing raster tiles of my map and am unsure if i need a style json considering they are raster tiles.
How do i connect this mbtiles map to maplibre? Is it possible?

Thanks

Affected Platform(s)

• Android
• iOS
• Desktop - macOS (JVM)
• Desktop - Linux (JVM)
• Desktop - Windows (JVM)
• Browser (JS)
• Browser (Wasm)

Library Version

0.12.1

What have you tried?

I have looked this up and I get results for other versions of maplibre (see additional context) and I'm not sure how comparable they are especially with compose being cross platform.
Some mention just have it in assets, copy it out to internal storage and use mbtiles:// uri to access it but I think thats a native thing rather than a compose thing.
Theres also Martin but that looks like its for desktop and i'm trying to have this be just mobile.

Additional context

These are for native:
Maplibre-react-native discussion: Link
Native medium story: Link

[TonyGnk]

Keep an eye on #435

[StudentLW1]

Nice! Is there much movement on that?
I see the last reply is from last year although in the body you mention that theres already a workaround.
Thanks for the reply!

[TonyGnk]

Unfortunately no real movement — it's still open, no active implementation. The upstream issue that's blocking it (loading mbtiles directly from APK assets) was filed on maplibre-native in June 2025 and is also still open.

That said, you're unblocked with the current workaround. Fair warning: the Medium article I wrote was based on Ramani Maps, which is a different Compose wrapper than maplibre-compose. The core idea is the same but some of the API calls differ — so here's the approach adjusted for maplibre-compose:

The key limitation: you can't point mbtiles:// directly at your APK assets folder on Android. You need to copy the file to internal storage first, then use mbtiles:///absolute/path/to/file.mbtiles.

Step 1 — Copy to internal storage (do this once, skip if file exists):

fun copyAssetToInternal(context: Context, assetFileName: String): File {
    val outputFile = File(context.filesDir, assetFileName)
    if (!outputFile.exists()) {
        context.assets.open(assetFileName).use { input ->
            outputFile.outputStream().use { output -> input.copyTo(output) }
        }
    }
    return outputFile
}

Step 2 — Since yours are raster tiles, you need a minimal style JSON. The key difference from vector tiles: use "tiles" (a list with the mbtiles path) instead of "url", and the layer type is "raster":

fun generateRasterStyle(mbtilesAbsolutePath: String) = """
{
  "version": 8,
  "sources": {
    "raster-tiles": {
      "type": "raster",
      "tiles": ["mbtiles:///$mbtilesAbsolutePath"],
      "tileSize": 256
    }
  },
  "layers": [{
    "id": "raster-layer",
    "type": "raster",
    "source": "raster-tiles"
  }]
}
""".trimIndent()

Step 3 — Wire it up in maplibre-compose:

@Composable
fun MyMap() {
    val context = LocalContext.current
    val styleUri = remember {
        val mbtilesFile = copyAssetToInternal(context, "your_map.mbtiles")
        val styleJson = generateRasterStyle(mbtilesFile.absolutePath)
        val styleFile = File(context.filesDir, "style.json").also { it.writeText(styleJson) }
        Uri.fromFile(styleFile).toString()
    }
    MaplibreMap(
        modifier = Modifier.fillMaxSize(),
        styleUri = styleUri,
        // set your camera position here
    )
}

[StudentLW1]

Cheers! I appreciate the help, I'll give that a go :)
EDIT: It works, many thanks 😄