Creating overlays on a map in a SwiftUI app in iOS 26

When using MapKit with SwiftUI, adding overlays on the map is just a matter of providing the shapes you want drawn in the map content closure. They conform to the MapContent protocol and are shapes rendered on top of the map and can be a MapPolygon, a MapPolyline or a MapCircle.

Creating a polygon overlay

To create a polygon overlay, you must provide a list of coordinates as CLLocationCoordinate2D, or a list of points as MKMapPoint or a MKPolygon object.

var coordinates: [CLLocationCoordinate2D] = [
    CLLocationCoordinate2D(latitude: 40.86, longitude: 14.25),
    CLLocationCoordinate2D(latitude: 40.86, longitude: 14.29),
    CLLocationCoordinate2D(latitude: 40.84, longitude: 14.29),
    CLLocationCoordinate2D(latitude: 40.84, longitude: 14.25)
]

var points: [MKMapPoint] = [
    MKMapPoint(CLLocationCoordinate2D(latitude: 40.86, longitude: 14.25)),
    MKMapPoint(CLLocationCoordinate2D(latitude: 40.86, longitude: 14.29)),
    MKMapPoint(CLLocationCoordinate2D(latitude: 40.84, longitude: 14.29)),
    MKMapPoint(CLLocationCoordinate2D(latitude: 40.84, longitude: 14.25))
]

Based on the list, the overlay will be created and placed over the map. You can customize the shape’s appearance using modifiers such as foregroundStyle(_:) and stroke(_:lineWidth:).

Map {
    MapPolygon(coordinates: polygonCoordinates)
        .foregroundStyle(.blue.opacity(0.5))
        .stroke(.blue, lineWidth: 2)
}

Creating a polyline overlay

Check more about MapPolyline at the reference article Using MapPolyline overlays in MapKit with SwiftUI.

The distinction between a polygon overlay and a polyline overlay lies in the fact that the latter comprises connected segments that link any number of coordinates, unlike the polygon overlay, which forms a closed geometric shape by connecting the initial and final points.

Just like the polygon, you can create a MapPolyline with a list of coordinates (CLLocationCoordinate2D) or a list of points (MKMapPoint). You can also create a MKPolyline object separately.

var polyline: MKPolyline {
    var coordinates = [
        CLLocationCoordinate2D(latitude: 40.877922, longitude: 14.282709),
        CLLocationCoordinate2D(latitude: 40.852935, longitude: 14.275285),
        CLLocationCoordinate2D(latitude: 40.836736, longitude: 14.306570)
    ]
    
    return MKPolyline(coordinates: &coordinates, count: coordinates.count)
}

Map {
    MapPolyline(polyline)
        .stroke(.red, lineWidth: 3)
}

When you request directions between two points in a map using the MKDirections API for calculating routes, calculate(completionHandler:), the response object will provide you with a list of possible routes as MKRoute objects, which then can be drawn on the map as a MapPolyline object.

Creating a circle overlay

Circles are quite common overlays used in maps. They are useful for displaying geofencing trigger zones, proximity and range, or confidence radius for services.

MapCircle is a circular overlay drawn based on a center coordinate and a radius.

var circleCenter: CLLocationCoordinate2D = CLLocationCoordinate2D(latitude: 40.8518, longitude: 14.2681)
    
var circleRadius: CLLocationDistance = 2000

Map {
    MapCircle(center: circleCenter, radius: circleRadius)
        .foregroundStyle(.blue.opacity(0.3))
        .stroke(.blue, lineWidth: 2)
}