Skip to content

Instantly share code, notes, and snippets.

@theSeafarer
Created June 28, 2023 20:30
Show Gist options
  • Save theSeafarer/bfe4c3eb1a3c300e6fb029a2341f0391 to your computer and use it in GitHub Desktop.
Save theSeafarer/bfe4c3eb1a3c300e6fb029a2341f0391 to your computer and use it in GitHub Desktop.
A quick and dirty solution to use [osmdroid/osmdroid]'s MapView in Jetpack Compose.
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalLifecycleOwner
import androidx.compose.ui.viewinterop.AndroidView
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.LifecycleEventObserver
import org.osmdroid.tileprovider.tilesource.TileSourceFactory
import org.osmdroid.views.MapView
@Composable
fun OsmMap(
modifier: Modifier = Modifier,
update: MapView.() -> Unit
) {
var onPause: (() -> Unit)? by remember { mutableStateOf(null) }
var onResume: (() -> Unit)? by remember { mutableStateOf(null) }
val lifecycleOwner = LocalLifecycleOwner.current
DisposableEffect(lifecycleOwner) {
val observer = LifecycleEventObserver { _, event ->
when (event) {
Lifecycle.Event.ON_PAUSE -> onPause?.invoke()
Lifecycle.Event.ON_RESUME -> onResume?.invoke()
else -> {}
}
}
lifecycleOwner.lifecycle.addObserver(observer)
onDispose { lifecycleOwner.lifecycle.removeObserver(observer) }
}
AndroidView(
factory = {
val mapView = MapView(it)
mapView.setTileSource(TileSourceFactory.MAPNIK)
onPause = { mapView.onPause() }
onResume = { mapView.onResume() }
mapView
},
modifier = modifier,
update = {
it.update()
it.invalidate()
},
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment