Alternate mapping library - osmdroid

Unfortunately some issues have come to light with the MapLibre API not working correctly in some emulators on some devices, possibly due to graphics card incompatibilities. Also a bug has been discovered in which Ramani Maps crashes when used with the navigation API and Symbols. A fix for this bug should be forthcoming but it cannot be guaranteed within the lifetime of the MAD module. Therefore, if you are having problems with MapLibre/Ramani, I am introducing an alternate mapping API which you can use as an alternative - osmdroid. This is an older library, not currently in active development (last release was last year) which is not Compose-based but I have provided a simple Compose wrapper for it.

Using osmdroid

You need to include osmdroid into your project:

• Add an entry to the [libraries] section of your version catalog (libs.versions.toml):

  osmdroid = { group = "org.osmdroid", name = "osmdroid-android", version.ref="osmdroid" }

• Add a version to the [versions] section of your version catalog:

  osmdroid = "6.1.20"

• Include it in your dependencies in the app build.gradle.kts:

  dependencies {
      ...
      implementation(libs.osmdroid)
      ...
  }

You should also add this AndroidView-based osmdroid composable to your project:

import android.preference.PreferenceManager
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView
import org.osmdroid.config.Configuration
import org.osmdroid.tileprovider.tilesource.OnlineTileSourceBase
import org.osmdroid.tileprovider.tilesource.TileSourceFactory
import org.osmdroid.util.GeoPoint
import org.osmdroid.views.MapView
import org.osmdroid.views.overlay.Marker

data class Poi(val latLon: GeoPoint, val title: String, val description: String)

@Composable
fun OsmdroidComposable(
    modifier: Modifier,
    latLon: GeoPoint,
    zoom: Double = 14.0,
    tileSource: OnlineTileSourceBase = TileSourceFactory.MAPNIK,
    poiList: List = listOf()
) {

    AndroidView(
        modifier = modifier,
        factory = { ctx ->
            // This line sets the user agent, a requirement to download OSM maps
            Configuration.getInstance()
                .load(ctx, PreferenceManager.getDefaultSharedPreferences(ctx))

            val map1 = MapView(ctx).apply {
                isClickable = true
                setMultiTouchControls(true)
            }
            map1
        },
        update = { view ->
            view.setTileSource(tileSource)
            view.controller.setZoom(zoom)
            view.controller.setCenter(latLon)
            view.overlays.clear()
            view.overlays.addAll(poiList.map {
                Marker(view).apply {
                    position = it.latLon
                    title = it.title
                    snippet = it.description
                }
            })
        }
    )
}

To use it, include it in your composable hierarchy:

OsmdroidComposable(
    modifier = Modifier.fillMaxSize(),
    latLon = GeoPoint(51.05, -0.705),
    zoom = 14.0
)

A full example is available at the GitHub repository:

https://github.com/nwcourses/OsmdroidCompose

More on osmdroid

Like MapLibre and Ramani Maps, osmdroid uses OpenStreetMap maps. These are downloaded from the OpenStreetMap tile server. It can use various tile sources, representing different styles of tiled map. The default one is the MAPNIK style - the default style for OpenStreetMap. Other available styles include OpenTopoMap, which shows contours and hill shading. Here is an example of using a custom style (OpenTopoMap):

OsmdroidComposable(
    modifier = Modifier.fillMaxSize(),
    latLon = GeoPoint(51.05, -0.705),
    zoom = 14.0,
    tileSource = TileSourceFactory.OpenTopo
)