UIKit Custom Annotation with Callout in SwiftUI

Photo by delfi de la Rua on Unsplash

Annotation views in SwiftUI provide some basic functionality, but if you are looking for more than a custom view to define your annotation, SwiftUI falls a bit short there. But, UIKit is to the rescue. By using UIKit’s MapView we can bring all that powerful customization to SwiftUI.

In this article, we will bring custom annotations to SwiftUI. You will have this 👇 by the end of this article.

Let’s start with a data structure.

We will create a class called MapPlace which will contain our location information. This class will also be responsible to provide sample data so we can drop annotations for those locations. We will also make this class conform to MKAnnotation protocol so we can use it directly for Annotation View.

Our class will look like this:

final class MapPlace: NSObject, Identifiable {
    let id = UUID()
    let name: String
    let image: String
    let location: CLLocation
    
    init(name: String, image: String, location: CLLocation) {
        self.name = name
        self.image = image
        self.location = location
    }
}