khuffie/swiftui-mapkit-callout

Add a SwiftUI View inside a MapKit callout for detailCalloutAccessoryView

swiftui-mapkit-callout

This is a simple class to add a SwiftUI View inside an MKAnnotationView.detailCalloutAccessoryView property.

Yes, you can technically set .canShowCallout to false and create your own completely custom callout, but you'd have to draw your own bubble, position it manually and who knows what can happen in the future.

I wanted to avoid doing that, and wanted to avoid using UIKit.

Usage

• Copy the MapCalloutView file located inside the MapViews folder into your project.
• Inside the mapView:viewFor:annotation method, create or reuse an MKAnnotationView as normal
• Set .canShowCallout to true on your MKAnnotationView
• Create your SwiftUI View as normal
• Pass your created view in the initializer for MapCalloutView, making sure it's type casted to AnyView
• Pass your instance of MapCalloutView to detailCalloutAccessoryView

Example

view = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: identifier)
view?.canShowCallout = true

//create any SwiftUI View you like
let customView = Text("This is a SwiftUI Text View")

//create an instance of MapCalloutView
let callout = MapCalloutView(rootView: AnyView(customView))

//pass it to detailCalloutAccessoryView
view?.detailCalloutAccessoryView = callout

The sample project includes initializations of a few different kind of views.

Tips & Tricks

• I'd recommend setting a maxHeight and maxWidth to the .frame of your SwiftUI View
• The left and right callout accessory views will work as expected
• If title is set on the annotation, it will be displayed above your SwiftUI View. I haven't figured out a way to hide this. If you have any thoughts, would love to hear them!

swiftui-mapkit-callout's Issues

Project License

Please add a LICENSE file to this project. I'd suggest that the MIT License would be appropriate.

Callout View is misplaced after map is dragged

Hi,
I'm trying to use this to add a SwiftUI view to the MKAnnotationView's detailCalloutAccessoryView. It works fine at first, but if the annotation is presented and the user drags the MKMapView around, the callout bubble looks fine but the detailCalloutAccessoryView doesn't move along with it! With views with buttons on it, it becomes a problem since the tap targets are different than what is showing on screen.

This is from the sample code, after dragging the map while the button test was visible:

The only work-around I've found so far is to detect the drags in MKMapView's regionDidChangeAnimated delegate call and then de-select the selected annotation. But it's not idea.

Any idea how to fix this properly?