Cards & Content DisplaysFree ComponentiOS 16.0+Xcode 15+

Map with Polyline Overlay

MapKit card rendering navigation paths and multi-point tracking routes.

Download in Compot App Browse all Cards & Content Displays

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies

mapWMapPolylines.swift

import SwiftUI
import MapKit

struct MapWMapPolylines: View {
    
    let coordinates: [CLLocationCoordinate2D]
    
    var body: some View {
            Map {
                MapPolyline(coordinates: coordinates)
                    .stroke(.red, lineWidth: 5)
                    .mapOverlayLevel(level: .aboveRoads)
            }
            .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 UseMapWMapPolylines: View {
    var body: some View {
        MapWMapPolylines(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 {
    UseMapWMapPolylines()
}