Marker Icons

MapConductor proporciona varios tipos de iconos de marcador para personalizar la apariencia de los marcadores en el mapa. Todos los iconos implementan la interfaz MarkerIconInterface y pueden usarse con cualquier proveedor de mapas.

Interfaz MarkerIconInterface

Interfaz base para todos los iconos de marcador:

interface MarkerIconInterface {
    // Common properties for all marker icon implementations
}

Tipos de icono

DefaultMarkerIcon (ColorDefaultMarkerIcon)

Icono estándar de marcador coloreado con apariencia y texto personalizables.

Nota: DefaultMarkerIcon es un alias de ColorDefaultIcon.

DefaultMarkerIcon(
    scale: Float = 1.0f,
    label: String? = null,
    fillColor: Color = Color.Red,
    strokeColor: Color = Color.Black,
    strokeWidth: Dp = 1.dp,
    labelTextColor: Color = Color.White,
    labelStrokeColor: Color? = null,
    debug: Boolean = false
)

Parámetros

scale: Factor de escala del icono (1.0 = tamaño normal, 0.5 = mitad de tamaño, 2.0 = el doble).
label: Texto mostrado en el marcador (opcional).
fillColor: Color de fondo del marcador.
strokeColor: Color del borde del marcador.
strokeWidth: Grosor del borde.
labelTextColor: Color del texto de la etiqueta.
labelStrokeColor: Color de contorno opcional para el texto.
debug: Muestra información de depuración si está activado.

Ejemplos de uso

// Sustituye MapView por el proveedor de mapas que prefieras, como GoogleMapView o MapboxMapView
MapView(state = mapViewState) {
    // Basic red marker
    Marker(
        position = GeoPoint.fromLatLong(37.7749, -122.4194),
        icon = DefaultMarkerIcon()
    )

    // Custom colored marker with label
    Marker(
        position = GeoPoint.fromLatLong(37.7849, -122.4094),
        icon = DefaultIcon(
            scale = 1.2f,
            label = "SF",
            fillColor = Color.Blue,
            strokeColor = Color.White,
            strokeWidth = 2.dp
        )
    )

    // Small marker with custom styling
    Marker(
        position = GeoPoint.fromLatLong(37.7649, -122.4294),
        icon = DefaultIcon(
            scale = 0.8f,
            fillColor = Color.Green,
            labelTextColor = Color.Black,
            label = "POI"
        )
    )
}

DrawableDefaultMarkerIcon

Usa un recurso Drawable como fondo del marcador, con superposiciones de estilo opcionales.

DrawableDefaultIcon(
    backgroundDrawable: Drawable,
    scale: Float = 1.0f,
    strokeColor: Color? = null,
    strokeWidth: Dp = 1.dp
)

Parámetros

backgroundDrawable: Recurso drawable usado como fondo del marcador.
scale: Factor de escala del icono.
strokeColor: Color opcional del borde superpuesto.
strokeWidth: Grosor del borde superpuesto.

Ejemplos de uso

@Composable
fun DrawableIconExamples() {
    val context = LocalContext.current

    // Sustituye MapView por el proveedor de mapas que prefieras, como GoogleMapView o MapboxMapView
    MapView(state = mapViewState) {
        // Marcador con drawable personalizado
        AppCompatResources.getDrawable(context, R.drawable.custom_marker)?.let { drawable ->
            Marker(
                position = GeoPoint.fromLatLong(37.7749, -122.4194),
                icon = DrawableDefaultIcon(
                    backgroundDrawable = drawable,
                    scale = 1.0f
                )
            )
        }

        // Drawable con borde personalizado
        AppCompatResources.getDrawable(context, R.drawable.pin_icon)?.let { drawable ->
            Marker(
                position = GeoPoint.fromLatLong(37.7849, -122.4094),
                icon = DrawableDefaultIcon(
                    backgroundDrawable = drawable,
                    scale = 1.5f,
                    strokeColor = Color.Yellow,
                    strokeWidth = 3.dp
                )
            )
        }
    }
}

ImageDefaultIcon

Usa un drawable de imagen personalizado con control preciso del punto de anclaje.

ImageDefaultIcon(
    drawable: Drawable,
    anchor: Offset = Offset(0.5f, 0.5f),
    debug: Boolean = false
)

Parámetros

drawable: Drawable de imagen que se mostrará.
anchor: Punto de anclaje relativo dentro de la imagen (rango 0.0–1.0).
- Offset(0.5f, 0.5f): Anclaje centrado (por defecto).
- Offset(0.5f, 1.0f): Anclaje en el centro inferior.
- Offset(0.0f, 0.0f): Anclaje en la esquina superior izquierda.
- Offset(1.0f, 1.0f): Anclaje en la esquina inferior derecha.
debug: Muestra visualización de depuración del anclaje si está activado.

Ejemplos de uso

@Composable
fun ImageIconExamples() {
    val context = LocalContext.current

    // Sustituye MapView por el proveedor de mapas que prefieras, como GoogleMapView o MapboxMapView
    MapView(state = mapViewState) {
        // Icono de estación meteorológica con anclaje inferior centrado
        AppCompatResources.getDrawable(context, R.drawable.weather_station)?.let { icon ->
            Marker(
                position = GeoPoint.fromLatLong(37.7749, -122.4194),
                icon = ImageDefaultIcon(
                    drawable = icon,
                    anchor = Offset(0.5f, 1.0f), // Bottom center
                    debug = false
                )
            )
        }

        // Flecha direccional con anclaje centrado
        AppCompatResources.getDrawable(context, R.drawable.direction_arrow)?.let { icon ->
            Marker(
                position = GeoPoint.fromLatLong(37.7849, -122.4094),
                icon = ImageDefaultIcon(
                    drawable = icon,
                    anchor = Offset(0.5f, 0.5f), // Center
                    debug = true // Shows anchor point
                )
            )
        }
    }
}

Uso avanzado

Selección dinámica de iconos

@Composable
fun DynamicIconExample() {
    val iconType by remember { mutableStateOf("default") }
    val context = LocalContext.current

    // Sustituye MapView por el proveedor de mapas que prefieras, como GoogleMapView o MapboxMapView
    MapView(state = mapViewState) {
        val icon = when (iconType) {
            "default" -> DefaultIcon(
                fillColor = Color.Blue,
                label = "D"
            )
            "drawable" -> AppCompatResources.getDrawable(context, R.drawable.custom_pin)?.let {
                DrawableDefaultIcon(backgroundDrawable = it)
            }
            "image" -> AppCompatResources.getDrawable(context, R.drawable.location_icon)?.let {
                ImageDefaultIcon(
                    drawable = it,
                    anchor = Offset(0.5f, 1.0f)
                )
            }
            else -> DefaultIcon()
        }

        Marker(
            position = GeoPoint.fromLatLong(37.7749, -122.4194),
            icon = icon
        )
    }
}

Patrón de fábrica de iconos

object MarkerIconFactory {
    fun createLocationIcon(color: Color, label: String? = null): MarkerIconInterface {
        return DefaultMarkerIcon(
            fillColor = color,
            strokeColor = Color.White,
            strokeWidth = 2.dp,
            label = label,
            scale = 1.0f
        )
    }

    fun createCustomIcon(context: Context, drawableRes: Int, scale: Float = 1.0f): MarkerIconInterface? {
        return AppCompatResources.getDrawable(context, drawableRes)?.let {
            DrawableDefaultIcon(
                backgroundDrawable = it,
                scale = scale
            )
        }
    }

    fun createDirectionalIcon(context: Context, direction: Float): MarkerIconInterface? {
        return AppCompatResources.getDrawable(context, R.drawable.arrow)?.let { drawable ->
            // Apply rotation to drawable if needed
            val rotatedDrawable = drawable.mutate()
            rotatedDrawable.setColorFilter(null)

            ImageDefaultIcon(
                drawable = rotatedDrawable,
                anchor = Offset(0.5f, 0.5f)
            )
        }
    }
}

Mejores prácticas

Consideraciones de rendimiento

Reutilizar instancias de iconos: Crea iconos una vez y reutilízalos para múltiples marcadores.
Optimizar recursos drawable: Usa recursos con tamaños adecuados.
Limitar drawables personalizados: Demasiados drawables únicos pueden impactar el uso de memoria.

// Good: Reuse icon instances
val blueIcon = DefaultMarkerIcon(fillColor = Color.Blue)
val redIcon = DefaultMarkerIcon(fillColor = Color.Red)

markers.forEach { markerData ->
    val icon = if (markerData.isSelected) blueIcon else redIcon
    Marker(position = markerData.position, icon = icon)
}

Casos de uso comunes

Indicadores de estado

enum class MarkerStatus { ACTIVE, INACTIVE, WARNING, ERROR }

fun createStatusIcon(status: MarkerStatus): MarkerIconInterface = DefaultMarkerIcon(
    fillColor = when (status) {
        MarkerStatus.ACTIVE -> Color.Green
        MarkerStatus.INACTIVE -> Color.Gray
        MarkerStatus.WARNING -> Color.Yellow
        MarkerStatus.ERROR -> Color.Red
    },
    strokeColor = Color.White,
    strokeWidth = 2.dp,
    scale = 1.0f
)

Marcadores por categoría

sealed class PoiCategory(val icon: MarkerIconInterface) {
    object Restaurant : PoiCategory(DefaultMarkerIcon(fillColor = Color(0xFF4CAF50), label = "🍽️"))
    object Hotel : PoiCategory(DefaultMarkerIcon(fillColor = Color(0xFF2196F3), label = "🏨"))
    object GasStation : PoiCategory(DefaultMarkerIcon(fillColor = Color(0xFFFF9800), label = "⛽"))
    object Hospital : PoiCategory(DefaultMarkerIcon(fillColor = Color(0xFFF44336), label = "🏥"))
}

Solución de problemas

Problemas comunes

Iconos no visibles: Verifica que los recursos drawable existan y sean accesibles.
Posicionamiento incorrecto: Revisa los puntos de anclaje para iconos personalizados.
Problemas de rendimiento: Reduce el número de instancias de iconos únicos.
Problemas de escala: Asegura que los valores de escala sean positivos y razonables (0.1–3.0).

Modo de depuración

Activa el modo de depuración para visualizar puntos de anclaje y límites del icono:

Marker(
    position = position,
    icon = ImageDefaultIcon(
        drawable = customDrawable,
        anchor = Offset(0.5f, 1.0f),
        debug = true // Shows anchor point and bounds
    )
)