Difficulty adding a Raster Layer

[jg-develop]

On top of my base layer, I would like to add a Raster Layer from tiles stored in the resource bundle of my iOS/Android app. I'd like to do it programatically in Kotlin, but happy to do it in JSON if that's the only way. Would somebody be able to provide me an example please to point me in the right direction; I've really struggled to get it correct. Thank you for your help.

[sargunv]

Could you share the code you've tried, and the error or issues you've encountered?

[jg-develop]

Forgive me if this is a long way from the mark, but I tried this sort of thing:

        MaplibreMap(styleUri = "https://tiles.openfreemap.org/styles/liberty") {
            val source = rememberRasterSource(
                id = "RasSource",
                uri = Res.getUri("files/tile_{z}_{x}_{y}.png"),
                tileSize = 256
            )

            RasterLayer(
                id = "RasLayer",
                source = source,
                minZoom = 16F,
                maxZoom = 22F,
                visible = true,
            )
        }

And the error is:
org.jetbrains.compose.resources.MissingResourceException: Missing resource with path: composeResources/myapp.composeapp.generated.resources/files/tile_{z}{x}{y}.png

[sargunv]

Ah yeah, you'll want to provide a URI to a TileJSON resource, and then that TileJSON resource contains the templated path to the tiles. Related issue, see my comment here.

Not 100% sure if that's doable with local tile PNGs; if it doesn't work feel free to open an issue about it

[jg-develop]

Thanks for pointing me at that example. I've update my code and put it below. It doesn't produce an error in the log, but it also doesn't work. Should I raise an issue?

MaplibreMap(styleUri = "https://tiles.openfreemap.org/styles/liberty") {
val source = rememberRasterSource(
id = "RasSource",
uri = Res.getUri("files/TileSource.json"),
tileSize = 256
)

            RasterLayer(
                id = "RasLayer",
                source = source,
                minZoom = 10F,
                maxZoom = 22F,
            )

)

With TileSource.json being:
{
"tiles": [
"asset://files/tile_{z}{x}{y}.png"
],
"tileSize": 256,
"minzoom": 0,
"maxzoom": 22
}

FYI. I changed my asset: to https://tile.openstreetmap.org/{z}/{x}/{y}.png and it worked with no other changes to any files. So it does look like asset: is not working.

Thanks for your support.

[sargunv]

The demo app now showcases how to display tiles from assets bundled in your app. It requires new functionality available in the next snapshot, or in the upcoming v0.7.0. See https://github.com/sargunv/maplibre-compose/blob/6d220680570d2f67ba505b2cf0d82ce423244861/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/demos/LocalTilesDemo.kt#L33-L53