SwiftUI MapKit Callouts

Question

Created Jan ’21

Replies 2

Boosts 0

Views 2.2k

Participants 4

I think they are called callouts.
I want to create custom map annotations using swiftUI Views in the map this is the code i'm using:

Code Block SwiftMap(coordinateRegion: $coordinateStart, interactionModes: interactionMode, showsUserLocation: true, userTrackingMode: $trackingMode, annotationItems: locations, annotationContent:{(location)in
                        MapAnnotation(coordinate: location.coordinate){ EventMapAnnotation()}
                    })

The custom map Annotation uses the view "EventMapAnnotation" to show a yellow circle that I'm using to test as a button. Now I want this button or this Annotation to show me a window or a view with more details about the location.

I've heard of something called a "Callout" But im not sure if the pure SwiftUI map supports it yet.

Boost

Answer 1

Thisisbohau OP

Feb ’21

Hi,
sadly the SwiftUI MapKit implementation is very poor at the moment. You can wrap the EventMapAnnotation in a Button(action: {}), this at least gives you the option of calling a function that will then trigger some action.
Take care,
David

0

Answer 2

joosttk OP

Feb ’21

You can create your own custom AnnotationViews using the MapAnnotation. See below an example that creates a callout with an image.

Code Block Map(coordinateRegion: $coordinateRegion, annotationItems: annotations) { annotation in
   MapAnnotation(coordinate: annotation.coordinate, anchorPoint: CGPoint(x: 0.5, y: 1)) {
       AssetAnnotationView(image: annotation.image)
   }
}

Where AssetAnnotationView could look like this:

Code Block struct AssetAnnotationView: View {
    var image: UIImage
    var body: some View {
        Image(uiImage: image)
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 100, height: 100)
            .cornerRadius(3.0)
            .padding(4)
            .callOut()
        }
    }
}

callout is a custom modifier here that draws the callout shape (a rounded rect with a beak/point to the bottom of the view)

0