CircleState

CircleState gestiona la configuración y el comportamiento de las superposiciones circulares en el mapa. Proporciona propiedades reactivas para la posición del centro, el radio, el estilo y la configuración de interacción.

Constructor

CircleState(
    center: GeoPointInterface,
    radiusMeters: Double,
    clickable: Boolean = true,
    strokeColor: Color = Color.Red,
    strokeWidth: Dp = 1.dp,
    fillColor: Color = Color(red = 255, green = 255, blue = 255, alpha = 127),
    id: String? = null,
    zIndex: Int? = null,
    extra: Serializable? = null
)

Propiedades

Propiedades básicas

• id: String: Identificador único (se genera automáticamente si no se proporciona).
• center: GeoPointInterface: Centro geográfico del círculo.
• radiusMeters: Double: Radio en metros.
• clickable: Boolean: Indica si el círculo responde a eventos de clic.
• extra: Serializable?: Datos adicionales asociados al círculo.

Propiedades visuales

• strokeColor: Color: Color del borde.
• strokeWidth: Dp: Grosor del borde.
• fillColor: Color: Color de relleno.
• zIndex: Int?: Orden de dibujo (valores más altos se dibujan por encima).

Métodos

fun copy(...): CircleState // Crear una copia modificada
fun fingerPrint(): CircleFingerPrint // Detección de cambios
fun asFlow(): Flow<CircleFingerPrint> // Actualizaciones reactivas

Ejemplos de uso

Círculo básico

val circleState = CircleState(
    center = GeoPoint.fromLatLong(37.7749, -122.4194),
    radiusMeters = 1000,
    strokeColor = Color.Blue,
    fillColor = Color.Blue.copy(alpha = 0.3f)
)

MapView(state = mapViewState) {
    Circle(circleState)
}

Círculo interactivo

@Composable
fun InteractiveCircleExample() {
    var circleState by remember {
        mutableStateOf(
            CircleState(
                center = GeoPoint.fromLatLong(37.7749, -122.4194),
                radiusMeters = 500,
                strokeColor = Color.Red,
                fillColor = Color.Red.copy(alpha = 0.2f),
                clickable = true,
                onClick = { event ->
                    println("Círculo pulsado en: ${event.clicked}")
                }
            )
        )
    }

    Column {
        Slider(
            value = circleState.radiusMeters.toFloat(),
            onValueChange = {
                circleState = circleState.copy(radiusMeters = it.toDouble())
            },
            valueRange = 100f..2000f
        )

        MapView(
            state = mapViewState
        ) {
            Circle(circleState)
        }
    }
}

Varios círculos con Z-Index

val circles = listOf(
    CircleState(
        center = GeoPoint.fromLatLong(37.7749, -122.4194),
        radiusMeters = 1000,
        fillColor = Color.Red.copy(alpha = 0.3f),
        zIndex = 1
    ),
    CircleState(
        center = GeoPoint.fromLatLong(37.7749, -122.4194),
        radiusMeters = 500,
        fillColor = Color.Blue.copy(alpha = 0.5f),
        zIndex = 2
    )
)

MapView(state = mapViewState) {
    circles.forEach { circleState ->
        Circle(circleState)
    }
}

Manejo de eventos

Los eventos de círculo proporcionan tanto el estado como la posición del clic:

data class CircleEvent(
    val state: CircleState,
    val clicked: GeoPointInterface
)

typealias OnCircleEventHandler = (CircleEvent) -> Unit

Buenas prácticas

1. Unidades del radio: Utiliza siempre metros para el radio para mantener la consistencia.
2. Alfa del color: Usa transparencia para mejorar la visibilidad del mapa.
3. Z-Index: Utiliza z-index para controlar círculos superpuestos.
4. Rendimiento: Evita crear demasiados círculos grandes.
5. Reactividad: Actualiza las propiedades directamente para un renderizado eficiente.