Skip to main content
Polygon layers allow you to display filled shapes with optional holes on your map. They support user interaction through click handlers and visual highlighting.

​
Basic Setup

Create a polygon layer and add polygon shapes to it. 
val polygonLayer = PolygonLayerInterface.create()
polygonLayer.add(
    PolygonInfo(
        identifier = "Polygon",
        coordinates = PolygonCoord(
            positions = /* coordinates */, 
            holes = /* hole coordinates */
        ),
        color = Color(1.0f, 0.0f, 0.0f, 0.5f),
        highlightColor = Color(1.0f, 0.4f, 0.4f, 0.7f),
    )
)

mapView.addLayer(polygonLayer.asLayerInterface())

​
SwiftUI Integration

For SwiftUI apps, use UIViewRepresentable to manage polygon layers.
iOS (SwiftUI)
struct MapWithPolygonView: UIViewRepresentable {
    @Binding var camera: MapView.Camera
    let coords: [MCCoord]
    
    func makeUIView(context: Context) -> MCMapView {
        let mapView = MCMapView()
        
        // Add base layer
        mapView.add(layer: TiledRasterLayer("osm", webMercatorUrlFormat: "https://tiles.sample.org/{z}/{x}/{y}.png"))
        
        // Add polygon layer
        let polygonLayer = MCPolygonLayerInterface.create()
        let polygonInfo = MCPolygonInfo(
            identifier: "switzerland",
            coordinates: MCPolygonCoord(positions: coords, holes: []),
            color: UIColor.red.mapCoreColor,
            highlight: UIColor.red.withAlphaComponent(0.2).mapCoreColor
        )
        
        polygonLayer?.add(polygonInfo)
        mapView.add(layer: polygonLayer?.asLayerInterface())
        
        // Set initial camera position
        if let center = camera.center.value, let zoom = camera.zoom.value {
            mapView.camera.move(toCenterPositionZoom: center, zoom: zoom, animated: false)
        }
        
        return mapView
    }
    
    func updateUIView(_ uiView: MCMapView, context: Context) {
        // Handle camera updates if needed
    }
}

struct ContentView: View {
    @State private var camera = MapView.Camera(
        latitude: 46.962592372639634,
        longitude: 8.378232525377973,
        zoom: 1000000
    )
    
    var body: some View {
        MapWithPolygonView(
            camera: $camera,
            coords: [
                // your coordinates here
            ]
        )
    }
}

​
Adding User Interaction

Enable click handling and respond to polygon interactions. 
polygonLayer.setLayerClickable(true)
polygonLayer.setCallbackHandler(object : PolygonLayerCallbackInterface(){
    override fun onClickConfirmed(polygon: PolygonInfo) {
        // Handle polygon click
        Log.d("Map", "Clicked polygon: ${polygon.identifier}")
    }
})

​
PolygonInfo Parameters

​
identifier
String
required
Unique identifier for the polygon
​
coordinates
PolygonCoord
required
Polygon coordinates including positions and optional holes
​
color
Color
required
Fill color for the polygon in normal state (RGBA values from 0.0 to 1.0)
​
highlightColor
Color
required
Fill color when the polygon is highlighted or selected

​
PolygonCoord Structure

​
positions
Array<Coord>
required
Array of coordinates defining the polygon boundary. The coordinates should form a closed ring.
​
holes
Array<Array<Coord>>
Optional array of coordinate arrays, each defining a hole in the polygon. Each hole should be a closed ring.

​
Color Format

Colors are specified using RGBA values: 
// Red with 50% opacity
Color(1.0f, 0.0f, 0.0f, 0.5f)

// Blue fully opaque
Color(0.0f, 0.0f, 1.0f, 1.0f)

​
Example: Country Boundary

Android
// Define coordinates for a country boundary
val switzerlandCoords = listOf(
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 6.022, 46.398, 0.0),
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 10.492, 46.398, 0.0),
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 10.492, 47.808, 0.0),
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 6.022, 47.808, 0.0),
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 6.022, 46.398, 0.0)
)

val polygonLayer = PolygonLayerInterface.create()
polygonLayer.add(
    PolygonInfo(
        identifier = "switzerland",
        coordinates = PolygonCoord(
            positions = switzerlandCoords,
            holes = emptyList()
        ),
        color = Color(0.0f, 0.5f, 0.0f, 0.3f),
        highlightColor = Color(0.0f, 0.8f, 0.0f, 0.5f)
    )
)

polygonLayer.setLayerClickable(true)
polygonLayer.setCallbackHandler(object : PolygonLayerCallbackInterface(){
    override fun onClickConfirmed(polygon: PolygonInfo) {
        Toast.makeText(context, "Clicked: ${polygon.identifier}", Toast.LENGTH_SHORT).show()
    }
})

mapView.addLayer(polygonLayer.asLayerInterface())

​
Polygons with Holes

Android
val outerRing = listOf(
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 8.0, 46.0, 0.0),
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 9.0, 46.0, 0.0),
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 9.0, 47.0, 0.0),
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 8.0, 47.0, 0.0),
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 8.0, 46.0, 0.0)
)

val hole = listOf(
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 8.3, 46.3, 0.0),
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 8.7, 46.3, 0.0),
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 8.7, 46.7, 0.0),
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 8.3, 46.7, 0.0),
    Coord(CoordinateSystemIdentifiers.EPSG4326(), 8.3, 46.3, 0.0)
)

val polygonInfo = PolygonInfo(
    identifier = "polygon-with-hole",
    coordinates = PolygonCoord(
        positions = outerRing,
        holes = listOf(hole)
    ),
    color = Color(1.0f, 0.0f, 0.0f, 0.4f),
    highlightColor = Color(1.0f, 0.5f, 0.0f, 0.6f)
)
Ensure polygon coordinates form a closed ring by making the first and last coordinates identical.

Build docs developers (and LLMs) love

Get started for freeTalk to us