0

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:

enter image description here

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:

enter image description here

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:

enter image description here

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.

Cheolhyun
  • 169
  • 1
  • 7

0 Answers0