osmdroid approach with Jetpack Compose.

README.md

Works as expected, however it has some issues with visibility updates such as with AnimatedVisibility blocks, which clears the contents.

However, if you are not hiding the map at any moment, works great. Also works lazyly with LazyColumn or LazyRow.

Feel free to suggest changes.

layout_map.xml

<?xml version="1.0" encoding="utf-8"?>
<org.osmdroid.views.MapView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

MapLifecycle.kt

import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalLifecycleOwner
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.LifecycleEventObserver
import org.osmdroid.views.MapView

@Composable
fun rememberMapViewWithLifecycle(): MapView {
    val context = LocalContext.current
    val mapView = remember {
        MapView(context).apply {
            id = R.id.map
        }
    }

    // Makes MapView follow the lifecycle of this composable
    val lifecycleObserver = rememberMapLifecycleObserver(mapView)
    val lifecycle = LocalLifecycleOwner.current.lifecycle
    DisposableEffect(lifecycle) {
        lifecycle.addObserver(lifecycleObserver)
        onDispose {
            lifecycle.removeObserver(lifecycleObserver)
        }
    }

    return mapView
}

@Composable
fun rememberMapLifecycleObserver(mapView: MapView): LifecycleEventObserver =
    remember(mapView) {
        LifecycleEventObserver { _, event ->
            when (event) {
                Lifecycle.Event.ON_RESUME -> mapView.onResume()
                Lifecycle.Event.ON_PAUSE -> mapView.onPause()
                else -> {}
            }
        }
    }

MapView.kt

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView
import org.osmdroid.views.MapView

/**
 * A composable Google Map.
 * @author Arnau Mora
 * @since 20211230
 * @param modifier Modifiers to apply to the map.
 * @param onLoad This will get called once the map has been loaded.
 */
@Composable
fun MapView(
    modifier: Modifier = Modifier,
    onLoad: ((map: MapView) -> Unit)? = null
) {
    val mapViewState = rememberMapViewWithLifecycle()

    AndroidView(
        { mapViewState },
        modifier
    ) { mapView -> onLoad?.invoke(mapView) }
}

Thanks, I think it's what I need<3

Hi, when running a preview on the MapView() composable, I only get an empty grid. How can I fix this problem?

Hi, when running a preview on the MapView() composable, I only get an empty grid. How can I fix this problem?

Salma, try add following snippet to your Activity onCreate method (before setContent {...}):
Configuration.getInstance().load(
applicationContext,
PreferenceManager.getDefaultSharedPreferences(applicationContext)
)

Example you can see here https://github.com/Trevol/wiresag/blob/intelligent_environment_viz/app/src/main/java/com/example/wiresag/WireSagActivity.kt#L46

Thank you so much for your reply!

Hey, what license do you publish this to?

Hi, one more question: do you know where I can download tiles (.sqlite) for supporting offline mode in specific countries?

Hi!
How to use MapLifecycle.kt to draw a simply map by adding GeoPoint lat, lon, zoom etc
I was looking in wiresag that you mention above but is too complex for me to figure out