Problem with reusable MKAnnotationView to show distinct images

Question

I am showing 3 distinct annotations in a map. To achive this I have a enum as a class variable which indicates the current value of the image name to be set in the MKAnnotationView property. I have subclassed MKAnnotationView to sore a class variable to get the image name in case of annotation reuse.

The problem is that when I drag the map leaving the annotations out of view and when I drag it again to see the annotations, these have their images exchanged.

My enum and custom MKAnnotationView class:

    enum AnnotationIcon: String {
        case taxi
        case takingIcon
        case destinyIcon
    }

final class MyMKAnnotationView: MKAnnotationView {
    var iconType: String = ""
}

And this is my viewFor annotation function:

 func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        
        guard !(annotation is MKUserLocation) else {
            return nil
        }
        
        let identifier = "Custom annotation"
        
        var annotationView: MyMKAnnotationView?
        
        guard let dequeuedAnnotationView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier) as? MyMKAnnotationView else {
            let av = MyMKAnnotationView(annotation: annotation, reuseIdentifier: identifier)
            annotationView = av
            annotationView?.annotation = annotation
            annotationView?.canShowCallout = true
            annotationView?.translatesAutoresizingMaskIntoConstraints = false
            annotationView?.widthAnchor.constraint(equalToConstant: 35).isActive = true
            annotationView?.heightAnchor.constraint(equalToConstant: 35).isActive = true
            annotationView?.iconType = annotationIcon.rawValue //AnnotationIcon enum class variable
            annotationView?.image = UIImage(named: annotationView?.iconType ?? "")
            
            return av
        }
        annotationView = dequeuedAnnotationView
        annotationView?.image = UIImage(named: annotationView?.iconType ?? "")
        
        return annotationView
    }

Images that explain the problem:

Before the draggin:

After the draggin:

What is the way for each annotation to retrieve the correct image in case of reuse?

Thank you.

Checking the memmory address of the MKAnnotationViews, they are being relocated over the map. Not exchanging their images. — Andoni Da Silva

Frankenstein Frankenstein · Accepted Answer · 2020-07-20T11:10:12

Before reusing the MyMKAnnotationView you've to empty the already set image in the prepareForReuse method.

final class MyMKAnnotationView: MKAnnotationView {
    var iconType: String = ""
    //...
    override func prepareForReuse() {
        super.prepareForReuse()
        image = nil // or set a default placeholder image instead
    }
}

Update: As suspected the iconType is not getting set before you're trying to set the image of MyMKAnnotationView. Either you need to set the iconType before setting the image, like this:

annotationView?.iconType = AnnotationIcon.taxi.rawValue
annotationView?.image = UIImage(named: annotationView?.iconType ?? "")

You can improve this a lot by being the image returning logic to the AnnotationIcon.

enum AnnotationIcon: String {
    //...
    var annotationImage: UIImage? { UIImage(named: rawValue) }
}

Then change the MyMKAnnotationView as follows:

final class MyMKAnnotationView: MKAnnotationView {
    var iconType = AnnotationIcon.taxi {
        didSet {
            image = iconType.annotationImage // image is set whenever `iconType` is set
        }
    }
    //...
}

Then in viewForAnnotation:

var iconTypes = [AnnotationIcon]() // should be equal to the number of annotation

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    //...
    dequeuedAnnotationView.annotation = annotation
    dequeuedAnnotationView.iconType = iconType
}

Problem with reusable MKAnnotationView to show distinct images

3 Answers