Use map in scrollable column

[rlnt]

Hi,
my goal is to display a map snapshot (fixed sized map with a fixed zoom amount showing a marker at a specific location) in a scrollable column. The map's purpose is to display a project location, for which I have the longitude and latitude. The column contains general information about a project, and I want the user to be able to see the location of the project in these details. After they click on it, I want to use a proper map with navigation, but for the details, something like a snapshot is enough.

My problem is that the map doesn't render at all in a scrollable column.
This works:

    Scaffold(
        bottomBar = bottomBar
    ) { innerPadding ->
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxSize()
                .padding(innerPadding)
        ) {
            Text("Some Text")

            MaplibreMap(baseStyle = BaseStyle.Uri("https://tiles.openfreemap.org/styles/liberty"))
        }
    }

This doesn't:

    Scaffold(
        bottomBar = bottomBar
    ) { innerPadding ->
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxSize()
                .padding(innerPadding)
                .verticalScroll(rememberScrollState()) // this is the culprit
        ) {
            Text("Some Text")

            MaplibreMap(baseStyle = BaseStyle.Uri("https://tiles.openfreemap.org/styles/liberty"))
        }
    }

It just doesn't render at all. It's not throwing an error or giving any warning. My guess is that the scroll controls of the column interfere with the drag controls of the map. Since I want a static map, this isn't a huge deal since I want to remove dragging for this instance anyway. But why doesn't it even render?
I also tried adding some print statements to the listener callbacks, and they don't even get called.

        MaplibreMap(
            baseStyle = BaseStyle.Uri("https://tiles.openfreemap.org/styles/liberty"),
            onMapLoadFailed = { print(it) },
            onMapLoadFinished = { print("finish") }
        )

[MarcoSanz12]

I’d suggest using the MapSnapshotter — you configure the region you want to display, add the marker, and it generates a Bitmap. Once it’s loaded, you can draw it inside an Image Composable, and you’ll have the picture ready to show as your thumbnail.

[sargunv]

I agree with the snapshotter suggestion, though we don't have a KMP wrapper for that yet. For now, you can use the underlying MapLibre Native snapshotter API for the platform(s) you target.

But the map not rendering in a scrollable column seems like a bug. Feel free to file an issue for that.