Performance issues using MapKit for SwiftUI

Question

Created Oct ’23

Replies 2

Boosts 0

Participants 2

I'm working with a SwiftUI view that contains a Map with numerous Annotations (ranging from 30 to 100). Alongside these, there's a specific annotation that changes based on the user's selection from a list. The list selection might change rapidly, possibly up to 10 times a second.

When the selected annotation is updated, it seems that all the annotations on the map view get reloaded. This results in high CPU usage and a significant drop in screen refresh rate, especially during rapid selection changes.

How can I optimize this to only reload the selected annotation in the map view instead of all annotations when the selectedAnnotation is changed?

Here's the relevant pseudo code:

@State var annotations: [MKAnnotation]()
@State var selectedAnnotation: MKAnnotation?

Map {
    ForEach(annotations.indices, id: \.self) { idx in
        let anno = annotations[idx]
        Annotation("", coordinate: anno.coordinate) {
            Circle()
                .stroke(.black, lineWidth: 4)
                .fill(.white)
                .frame(width: 8, height: 8)
        }
    }
                
    if let selectedAnnotation {
         Annotation("", coordinate: selectedAnnotation.coordinate) {
             Circle()
                .stroke(.orange, lineWidth: 4)
                .fill(.white)
                .frame(width: 16, height: 16)
         }
    } else {
         EmptyMapContent()
    }
}

Boost

Answer 1

CLOX OP

Oct ’23

The minimal reproducible example:

import SwiftUI
import MapKit

extension CLLocationCoordinate2D: Identifiable, Hashable {
    public static func == (lhs: CLLocationCoordinate2D, rhs: CLLocationCoordinate2D) -> Bool {
        lhs.latitude == rhs.latitude && lhs.longitude == rhs.longitude
    }
    
    public func hash(into hasher: inout Hasher) {
        hasher.combine(self.id)
    }
    
    public var id: String {
        String(self.latitude) + " " + String(self.longitude)
    }
}

struct MapKitIssuesView: View {
    @State var coordinates: [CLLocationCoordinate2D] = []
    @State var selectedCoord: CLLocationCoordinate2D?
    
    var body: some View {
        ZStack {
            Map {
                ForEach(coordinates, id: \.self) { coord in
                    let _ = print("reloaded \(coord) at \(Date())")
                    Annotation("", coordinate: coord) {
                        Circle()
                            .fill(.black)
                            .frame(width: 4, height: 4)
                    }
                }
                            
                if let selectedCoord {
                     Annotation("", coordinate: selectedCoord) {
                         Circle()
                            .stroke(.orange, lineWidth: 4)
                            .fill(.white)
                            .frame(width: 16, height: 16)
                     }
                } else {
                     EmptyMapContent()
                }
            }
            .mapStyle(.standard(pointsOfInterest: .excludingAll))
            .onAppear {
                for lat in 30 ... 45 {
                    for lon in -137 ... -79 {
                        coordinates.append(.init(latitude: Double(lat), longitude: Double(lon)))
                    }
                }
            }
            .onDisappear {
                coordinates.removeAll()
            }
            
            VStack {
                Spacer()
                Button(action: {
                    selectedCoord = .init(latitude: .random(in: 30 ..< 45), longitude: .random(in: -137 ..< -79))
                }, label: {
                    Text("Change Selection")
                })
                .tint(.white)
            }
        }
        
    }
}

#Preview {
    MapKitIssuesView()
}

0

Answer 2

rnorty OP

Jul ’24

Did you end up making any progress on this?

0