Cards & Content DisplaysFree ComponentiOS 16.0+Xcode 15+

Map with Polygon Overlay

MapKit card displaying bounded area polygons (e.g. zones or delivery regions).

Download in Compot App Browse all Cards & Content Displays

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies

mapWMapPolygon.swift

import SwiftUI
import MapKit

struct MapWMapPolygon: View {
    
    let coordinates: [CLLocationCoordinate2D]
    
    var body: some View {
        Map {
            MapPolygon(coordinates: coordinates)
                .foregroundStyle(.red)
                .stroke(.white, lineWidth: 2)
        }
        .controlSize(.extraLarge)
        .mapControlVisibility(.hidden)
        .mapStyle(.standard)
        .frame(width: 160, height: 160)
        .clipShape(.rect(cornerRadius: 25, style: .continuous))
        .shadow(color: .gray.opacity(0.5), radius: 5, x: 0, y: 2)
    }
}

struct UseMapWMapPolygon: View {
    var body: some View {
        MapWMapPolygon(coordinates: [
            CLLocationCoordinate2D(latitude: 40.0, longitude: -122.0),
            CLLocationCoordinate2D(latitude: 39.5, longitude: -121.0),
            CLLocationCoordinate2D(latitude: 38.5, longitude: -120.5),
            CLLocationCoordinate2D(latitude: 37.5, longitude: -120.7),
            CLLocationCoordinate2D(latitude: 37.0, longitude: -121.5),
            CLLocationCoordinate2D(latitude: 37.5, longitude: -122.3),
            CLLocationCoordinate2D(latitude: 38.5, longitude: -123.5),
            CLLocationCoordinate2D(latitude: 39.5, longitude: -123.0),
            CLLocationCoordinate2D(latitude: 40.0, longitude: -122.0)
        ])
    }
}

#Preview {
    UseMapWMapPolygon()
}