SwiftUI MapKit Callouts

Question

Created Jan ’21

Replies 2

Boosts 0

Views 2.7k

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.

Answered by joosttk in 660872022

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)

Answer 1 · Feb 5, 2021 02:15 AM

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

Answer 2 · Feb 6, 2021 09:45 AM

joosttk OP

Feb ’21

Accepted Answer

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)