Ways to show offline map

[Golem1132]

Hi.
I'm working on a small project that will allow me to show offline map (loaded from a file stored on a device), add and remove markers, draw lines etc. But I'm stuck at the very first step. Showing said map.
https://github.com/kuwapa/OfflineMapExample/tree/master
I recreated project mentioned above and was successful at that but it created more questions:

1. Where can I get mbtiles files without being forced to create accounts?
2. How can I use mbtiles file generated with Qgis? They can be generated in Qgis but I think they are raster, not vector.
3. Can I use .map files generated by MapsForge?

[louwers]

MBTiles is a file format that packages tiles, both vector and raster tiles work.

There are various projects that can help with making vector tiles, such as Planetiler or Martin.

MapLibre Native supports loading MBTiles directly from disk with the mbtiles:// URI scheme. You can use it in a source https://maplibre.org/maplibre-style-spec/sources/ that you use in one or more layers.

I am not familiar with .map files from MapsForge. We don't support this file format.

[Golem1132]

Thank you. That actually helped. My style.json file lacked this:
"layers": [
{
"id": "maptiler-overlay",
"type": "raster",
"source": "NAME_OF_SOURCE",
"paint": {
"raster-opacity": 1.0
}
}
]

[CodeK1988]

@Golem1132 @louwers hi mate, Did you succeed? I'm stuck and don't know how to load the offline mbtiles map file downloaded by maptiler.

[Golem1132]

I hope this will help you. Repo I linked is kind of helpful. This is how I did it in my test kmm project (only on android side).

First of all you need a proper style.json file.
Without it View won't know what to load and how.
In case of vector source you will need one that might look like this :
https://github.com/kuwapa/OfflineMapExample/blob/master/app/src/main/assets/bright.json
Mine looks like this since it is simple raster map:
"{\n" +
" "version": 8,\n" +
" "name": "test",\n" +
" "zoom": 11.6,\n" +
" "bearing": 0,\n" +
" "pitch": 0,\n" +
" "sources": {\n" +
" "maptiler-overlay-source": {\n" +
" "type": "raster",\n" +
" "tileSize": 256,\n" +
" "url": "mbtiles:///data/user/0/pl.golem.mregion/files/map.mbtiles"\n" +
" }\n" +
" },\n" +
" "layers": [\n" +
" {\n" +
" "id": "maptiler-overlay",\n" +
" "type": "raster",\n" +
" "source": "maptiler-overlay-source",\n" +
" "paint": {\n" +
" "raster-opacity": 1.0\n" +
" }\n" +
" }\n" +
" ]\n" +
"}"

I don't remember where I found my map.mbtiles file but I put it in app files (so it can be reached using filesDir/FILE_NAME.mbtiles)
I just copied the absolutePath of this file.
This is what i get.

TLDR
You need:

1. Proper style.json file (like mine or similar one I linked)
2. mbtiles file that contains map
3. Find a way to put path to your map file in sources (in style.json file)

Here is how it looks in code (I use https://github.com/maplibre/maplibre-compose)

val offline2 = BaseStyle.Json("{\n" +
        "  \"version\": 8,\n" +
        "  \"name\": \"test\",\n" +
        "  \"zoom\": 11.6,\n" +
        "  \"bearing\": 0,\n" +
        "  \"pitch\": 0,\n" +
        "  \"sources\": {\n" +
        "      \"maptiler-overlay-source\": {\n" +
        "          \"type\": \"raster\",\n" +
        "          \"tileSize\": 256,\n" +
        "          \"url\": \"mbtiles:///data/user/0/pl.golem.mregion/files/map.mbtiles\"\n" +
        "      }\n" +
        "  },\n" +
        "  \"layers\": [\n" +
        "      {\n" +
        "          \"id\": \"maptiler-overlay\",\n" +
        "          \"type\": \"raster\",\n" +
        "          \"source\": \"maptiler-overlay-source\",\n" +
        "          \"paint\": {\n" +
        "              \"raster-opacity\": 1.0\n" +
        "          }\n" +
        "      }\n" +
        "  ]\n" +
        "}")

@Composable
fun Map(
    modifier: Modifier = Modifier,
    baseMap: BaseStyle = offline2,
    cameraState: CameraState = rememberCameraState(),
    zoomRange: ClosedRange<Float> = 0f..20f,
    pitchRange: ClosedRange<Float> = 0f..60f,
    gestureOptions: GestureOptions = GestureOptions.Standard,
    special: String = "",
    onMapClick: (Position, DpOffset) -> ClickResult = { _, _ -> ClickResult.Pass }
) {



    MaplibreMap(
        modifier = modifier,
        baseStyle = baseMap,
        cameraState = cameraState,
        onMapClick = onMapClick,
        zoomRange = zoomRange,
        pitchRange = pitchRange,
        options = MapOptions(ornamentOptions = OrnamentOptions(
            isScaleBarEnabled = false,
            isLogoEnabled = false,
            isAttributionEnabled = false
        ), gestureOptions = gestureOptions)
    ) {

    }
}

@Composable
@Preview
fun App() {
    MaterialTheme {
        val backstack = rememberNavBackStack(
            configuration = SavedStateConfiguration {
                serializersModule = SerializersModule {
                    polymorphic(NavKey::class) {
                        subclass(Route.Ticket::class, Route.Ticket.serializer())
                        subclass(Route.Home::class, Route.Home.serializer())
                    }
                }
            },
            elements = arrayOf(Route.Home)
        )

        NavDisplay(
            backStack = backstack,
            entryProvider = entryProvider {

                entry<Route.Home> {
                    Map() { doubles, offset ->
                        ClickResult.Pass
                    }
                }

                entry<Route.Settings> {

                }

                entry<Route.Ticket> {
                    TicketNav(
                        onFinish = {
                            backstack.remove(Route.Ticket)
                        }
                    )
                }
            }
        )
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)

        setContent {
            App()
        }
    }
}

I hope this helps.