Polygon

A polygon is a closed shape that defines an area with customizable stroke and fill properties. Polygons are useful for representing zones, regions, boundaries, or area-based features.

Composable Functions

Basic Polygon

@Composable
fun Polygon(
    points: List<GeoPointInterface>,
    id: String? = null,
    strokeColor: Color = Color.Black,
    strokeWidth: Dp = 1.dp,
    fillColor: Color = Color.Transparent,
    geodesic: Boolean = false,
    extra: Serializable? = null
)

Polygon with State

PolygonState(
    points: List<GeoPointInterface>,
    id: String? = null,
    strokeColor: Color = Color.Black,
    strokeWidth: Dp = 1.dp,
    fillColor: Color = Color.Transparent,
    geodesic: Boolean = false,
    extra: Serializable? = null
)

@Composable
fun Polygon(state: PolygonState)

Parameters

• points: List of geographic coordinates defining the polygon vertices (List<GeoPointInterface>)
• id: Optional unique identifier for the polygon (String?)
• strokeColor: Color of the polygon boundary (default: Color.Black)
• strokeWidth: Width of the boundary line (default: 1.dp)
• fillColor: Fill color of the polygon interior (default: Color.Transparent)
• geodesic: Whether to draw geodesic edges (default: false)
• extra: Additional data attached to the polygon (Serializable?)

Usage Examples

Basic Polygon

// Replace MapView with your chosen provider, such as GoogleMapView or MapboxMapView
MapLibreMapView(state = mapViewState) {
    val trianglePoints = listOf(
        GeoPoint.fromLatLong(37.7749, -122.4194),
        GeoPoint.fromLatLong(37.7849, -122.4094),
        GeoPoint.fromLatLong(37.7749, -122.3994),
        GeoPoint.fromLatLong(37.7749, -122.4194)
    )

    Polygon(
        points = trianglePoints,
        strokeColor = Color.Blue,
        strokeWidth = 2.dp,
        fillColor = Color.Blue.copy(alpha = 0.3f)
    )
}

Interactive Polygon with Vertex Markers

@Composable
fun InteractivePolygonExample() {
    val mapViewState =
        rememberMapLibreMapViewState(
            cameraPosition =
                MapCameraPosition(
                    position = GeoPoint.fromLatLong(37.7809, -122.4094),
                    zoom = 13.5,
                ),
        )

    var vertices by remember {
        mutableStateOf(
            listOf(
                GeoPoint.fromLatLong(37.7749, -122.4194),
                GeoPoint.fromLatLong(37.7849, -122.4094),
                GeoPoint.fromLatLong(37.7799, -122.3994),
                GeoPoint.fromLatLong(37.7649, -122.4094)
            )
        )
    }

    val closedVertices = vertices + vertices.first()

    val polygonState = PolygonState(
        id = "polygon",  // important
        points = closedVertices,
        strokeColor = Color.Red,
        strokeWidth = 3.dp,
        fillColor = Color.Red.copy(alpha = 0.2f),
        onClick = { polygonEvent ->
            println("Polygon clicked at: ${polygonEvent.clicked} at: ${polygonEvent.clicked}")
        }
    )

    val onVertexDrag: (MarkerState) -> Unit = { markerState ->
        val vertexIndex = markerState.extra as Int
        vertices = vertices.toMutableList().apply {
            if (vertexIndex < size) {
                set(vertexIndex, GeoPoint.from(markerState.position))
            }
        }
    }

    val vertexMarkers = vertices.mapIndexed { index, point ->
        MarkerState(
            id = "marker-${index + 1}",  // important
            position = point,
            icon = DefaultIcon(
                fillColor = Color.Red,
                strokeColor = Color.White,
                label = "${index + 1}",
                scale = 0.8f
            ),
            draggable = true,
            extra = index,
            onDrag = onVertexDrag,
        )
    }

    MapLibreMapView(
        modifier = modifier,
        state = mapViewState
    ) {
        Polygon(polygonState)
        vertexMarkers.forEach { marker ->
            Marker(marker)
        }
    }
}

Geodesic vs Standard Polygon

@Composable
fun MapView(modifier: Modifier = Modifier) {
    val mapViewState =
        rememberArcGISMapViewState(
            cameraPosition =
                MapCameraPosition(
                    position = GeoPoint(30, 0),
                    zoom = 2,
                ),
        )

    val points =
        listOf(
            GeoPoint.fromLongLat(23.66, 56.42),
            GeoPoint.fromLongLat(13.39, 2.95),
            GeoPoint.fromLongLat(-87.82, 38.58),
            GeoPoint.fromLongLat(23.66, 56.42),
        )

    var marker by remember { mutableStateOf<MarkerState?>(null) }
    val onMarkerClick: OnMarkerEventHandler = { markerState ->
        marker = markerState
    }
    val onMarkerDragStart: OnMarkerEventHandler = { markerState ->
        println("Started dragging marker: ${markerState.id}")
    }
    val onMarkerDrag: OnMarkerEventHandler = { markerState ->
        println("Dragging marker to: ${markerState.position}")
    }
    val onMarkerDragEnd: OnMarkerEventHandler = { markerState ->
        println("Finished dragging marker: ${markerState.id}")
    }
    val onPolygonClick: OnPolygonEventHandler = { event ->
        marker = MarkerState(
            position = event.clicked,
            icon = DefaultIcon(
                fillColor = event.state.fillColor,
                strokeColor = Color.Red,
            ),
            animation = MarkerAnimation.Drop,
            draggable = true,
            onClick = onMarkerClick,
            onDragStart = onMarkerDragStart,
            onDrag = onMarkerDrag,
            onDragEnd = onMarkerDragEnd,
        )
    }

    val polygonState =
        remember {
            PolygonState(
                points = points,
                strokeColor = Color.Yellow.copy(alpha = 0.3f),
                strokeWidth = 3.dp,
                fillColor = Color.Green.copy(alpha = 0.5f),
                geodesic = false,
                zIndex = 0,
                onClick = onPolygonClick,
            )
        }

    val geodesicPolygonState =
        remember {
            PolygonState(
                points = points,
                strokeColor = Color.Red.copy(alpha = 0.3f),
                strokeWidth = 3.dp,
                fillColor = Color.Blue.copy(alpha = 0.5f),
                geodesic = true,
                zIndex = 1,
                onClick = onPolygonClick,
            )
        }

    ArcGISMapView(
        modifier = modifier,
        state = mapViewState,
        onMapLoaded = {
            println("Map loaded and ready")
        },
        onMapClick = {
            marker = null // Clear selection when the map is clicked
        }
    ) {

        // Interactive content with markers
        Polygon(polygonState)
        Polygon(geodesicPolygonState)

        // Show information for the selected marker
        marker?.let { markerState ->
            Marker(markerState)
        }
    }
}