Swiftui performance

Hi
I am developing an app with swiftUI. Here is the code of a map view. I create customized annotations and show them on the map view. The issue is that when I drag or zoom in/ out on the map view. The app is so slow. The fps decrease to about 20 - 30 from 60. I use instruments to analyze this app. The result shows that there are thousands of times annotation render. I think that the reason for this issue may be off-screen rendering. But I don't know how to solve it. Looking forward to your help.
Code Block swift
Map(coordinateRegion: $region, interactionModes: .all, showsUserLocation: true, userTrackingMode: $trackingMode, annotationItems: result, annotationContent: { mark in
MapAnnotation(coordinate: CLLocationCoordinate2D(latitude: mark.lat, longitude: mark.long)) {  
Button {withAnimation {
self.selectedGymUid = Int(mark.uid)
}} label: {RoundedGymIconOnMapView(name:mark.name)
.clipShape(Circle())
.overlay(Circle().stroke(selectedGymUid == Int(mark.uid) ? Color(.green).opacity(0.5) : AppColor.shared.joggingColor.opacity(0.5),lineWidth: 1.4))
.scaleEffect(selectedGymUid == Int(mark.uid) ? 2 : 1)
.shadow(radius: 5) }
}
})


Replies

Yeah. I am experiencing this too. Even with just basic content the panning/zooming performance is terrible any time there are > ~10 visible annotations.

Using a basic MapPin or MapMarker yields better improvement, but that's not exactly ideal if we want any sort of customization.

  • cluster the map annotations

  • You cannot do clustering w/ Map in SwiftUI

    source

  • no but with MapView you can

Add a Comment

try this maybe it will help

struct LazyView<Content: View>: View {

    let build: () -> Content

    init(_ build: @autoclosure @escaping () -> Content) {

        self.build = build

    }

    var body: Content {

        build()

    }

}

LazyView(

 MapAnnotation(coordinate: CLLocationCoordinate2D(latitude: mark.lat, longitude: mark.long)) {

Button {withAnimation {

 self.selectedGymUid = Int(mark.uid)

 }} label: {RoundedGymIconOnMapView(name:mark.name)

 .clipShape(Circle())

 .overlay(Circle().stroke(selectedGymUid == Int(mark.uid) ? Color(.green).opacity(0.5) : AppColor.shared.joggingColor.opacity(0.5),lineWidth: 1.4))

.scaleEffect(selectedGymUid == Int(mark.uid) ? 2 : 1)

 .shadow(radius: 5) }

}

)

I'm experiencing the same thing. Did anyone find a solution ? It's really dragging my app down. I want it to be snappy.