Skip to content

Polyline and Polygon

Polyline

See official doc here

@Composable
fun PolylinePage() {

    val cameraState = rememberCameraState {
        geoPoint = Coordinates.depok
        zoom = 12.0
    }

    // define polyline
    val geoPoint = remember {
        listOf(Coordinates.bekasi, Coordinates.depok, Coordinates.tangerang)
    }

    OpenStreetMap(
        modifier = Modifier.fillMaxSize(),
        cameraState = cameraState
    ) {
        // add polyline
        Polyline(geoPoints = geoPoint)
    }
}

Caps and color polyline

OpenStreetMap(
    modifier = Modifier.fillMaxSize(),
    cameraState = cameraState
) {
    Polyline(
        geoPoints = geoPoint,
        color = Color.Red, // line color
        cap = PolylineCap.ROUND, // end and start cap
        width = 18f // width
    )
}

Fully customizable with android.graphics.Paint

    OpenStreetMap(
        modifier = Modifier.fillMaxSize(),
        cameraState = cameraState
    ) {
        Polyline(
            geoPoints = geoPoint,
            color = Color.Red,
            cap = PolylineCap.ROUND,
            width = 18f,
            onPolylineLoaded = { paint ->
               // customize here (optional)
            }
        )
    }

Polygon

See official doc here

    OpenStreetMap(
        modifier = Modifier.fillMaxSize(),
        cameraState = cameraState
    ) {
        Polygon(
            geoPoints = geoPoint,
            color = Color.Red,
            width = 18f,
            onPolygonLoaded = { outlinePaint, fillPaint ->
                // customize here (optional)
            }
        )
    }