I am looking to make it so that every annotation in a clusterannotation when clicked on by the user will display each annotations title and a detailDisclosure button for each respective annotation that on click will lead to more info in regards to the specific annotation in the clusterannotation.
I have the following currently showing up:
Again I want it so that for all items in the cluster it shows the respective annotations title alongisde a button beside the title for each annotation
func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
if view.annotation is OtherAnnotation {
let btn = UIButton(type: .detailDisclosure)
view.rightCalloutAccessoryView = btn
}
if let cluster = view.annotation as? MKClusterAnnotation {
let btn = UIButton(type: .detailDisclosure)
view.detailCalloutAccessoryView = configureClusterDetailView(annotation: cluster)
}
}
func configureClusterDetailView(annotation anno: MKClusterAnnotation) -> UIView? {
let width = 200
let height = anno.memberAnnotations.count * 50
let calloutView = UIView()
calloutView.translatesAutoresizingMaskIntoConstraints = false
let views = ["calloutView": calloutView]
calloutView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[calloutView(\(width))]", options: [], metrics: nil, views: views))
calloutView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[calloutView(\(height))]", options: [], metrics: nil, views: views))
// calloutView.addSubview()
return calloutView
}
So far I have the following:
Not sure how to move forward from here. I have mainly been using SwiftUI for this project so havent worked with UIViews in a while. If someone could help out with setting up the uitableview that i can addSubview to the calloutView.addSubView(someSortOfViewWithCellsForEachClusterAnno)
or if tableviews arent the best approach what is? Looking for feedback and nextsteps on how to solve this problem
Additional Issue: If we are able to create a custom callout with titles and buttons for each annotation in the cluster. Is it possible to discern which button was clicked in the callout and display information based of that in the following function:
func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl) {
if let anno = view.annotation as? OtherAnnotation {
parent.annotationOnTap(anno.orderID)
}
if let cluster = view.annotation as? MKClusterAnnotation {
// Here
}
}
Or is there another possible approach? Thank you.
PROGRESS:
I have gotten the following to work out so far:
var currentCustomCallOut: UIView?
func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
currentCustomCallOut?.removeFromSuperview()
if view.annotation is OrderPoint {
let btn = UIButton(type: .detailDisclosure)
view.rightCalloutAccessoryView = btn
}
if let cluster = view.annotation as? MKClusterAnnotation {
// let btn = UIButton(type: .detailDisclosure)
// view.rightCalloutAccessoryView = btn
view.displayPriority = .required
let height = CGFloat(cluster.memberAnnotations.count * 50)
view.largeContentTitle = nil
let vc = UIHostingController(rootView: MapAnnotationListView(displayAnnotations: cluster.memberAnnotations as? [MKAnnotationCustom] ?? []))
if let swiftUIView = vc.view {
view.addSubview(swiftUIView)
view.inputViewController?.addChild(vc)
swiftUIView.translatesAutoresizingMaskIntoConstraints = false
swiftUIView.layer.cornerRadius = 10
swiftUIView.widthAnchor.constraint(equalToConstant: 200).isActive = true
swiftUIView.heightAnchor.constraint(equalToConstant: height).isActive = true
swiftUIView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
swiftUIView.bottomAnchor.constraint(equalTo: view.topAnchor).isActive = true
currentCustomCallOut = swiftUIView
}
}
}
func mapView(_ mapView: MKMapView, didDeselect view: MKAnnotationView) {
currentCustomCallOut?.removeFromSuperview()
}
struct MapAnnotationListView: View {
@State private var displayAnnotations: [MKAnnotationCustom]
init(displayAnnotations: [MKAnnotationCustom ]) {
self.displayAnnotations = displayAnnotations
}
var body: some View {
List() {
ForEach(displayAnnotations) { order in
Button(action: {
print("Clicked")
}, label: {
HStack {
Text("Random Name")
Spacer()
Image(systemName: "info.circle")
}
})
}
}
.listStyle(PlainListStyle())
}
}
However, there are still a few issues with this as i am unable to click the cells and have anything be printed. And the corner radius is not being applied properly any advice is appreciated.