Marker

Marker is an overlay in OSM, see official. You can add a marker with simple code like the example below.

@Composable
fun MarkerPage() {
    // define marker state
    val depokMarkerState = rememberMarkerState(
        geoPoint = GeoPoint(-6.3970066, 106.8224316)
    )

    OpenStreetMap(
        modifier = Modifier.fillMaxSize(),
        cameraState = cameraState
    ) {
        // add marker here
        Marker(
            state = depokMarkerState // add marker state
        )
    }
}

---

MarkerState

Is a state that can control the position and rotation of the marker.

val depokMarkerState = rememberMarkerState(
    geoPoint = Coordinates.depok,
    rotation = 90f // default is 0f
)

Icon

By default, Marker already has an icon from OSM. However, you can change the icon with a drawable.

@Composable
fun MarkerPage() {

    // define marker icon
    val depokIcon: Drawable? by remember {
        mutableStateOf(context.getDrawable(R.drawable.custom_marker_icon))
    }

    OpenStreetMap(
        modifier = Modifier.fillMaxSize(),
        cameraState = cameraState
    ) {
        Marker(
            state = depokMarkerState,
            icon = depokIcon
        )
    }
}

InfoWindow

OSM supports InfoWindow, see the official javadoc. For OSM for android compose, it also supports InfoWindow with Compose node. You can create InfoWindow in various shapes using Compose.

val depokMarkerState = rememberMarkerState(
    geoPoint = Coordinates.depok,
    rotation = 90f
)

val depokIcon: Drawable? by remember {
    mutableStateOf(context.getDrawable(R.drawable.round_eject_24))
}

OpenStreetMap(
    modifier = Modifier.fillMaxSize(),
    cameraState = cameraState
) {
    Marker(
        state = depokMarkerState,
        icon = depokIcon,
        title = "Depok", // add title
        snippet = "Jawa barat" // add snippet
    ) {

        // create info window node
        Column(
            modifier = Modifier
                .size(100.dp)
                .background(color = Color.Gray, shape = RoundedCornerShape(7.dp)),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // setup content of info window
            Text(text = it.title)
            Text(text = it.snippet, fontSize = 10.sp)
        }
    }
}