Custom Images on multiple MKPointAnnotations

Question

I'm trying to add different images on MKPointAnnotations. this is my code and its working fine when there is only one annotation. I'm facing problem to add different images on different annotations.

func showDevices(Devs: Array<Devices.Device>){

    if let annotations = self.MainMap?.annotations {
        self.MainMap.removeAnnotations(annotations)
    }

    if let overlays = self.MainMap?.overlays {
        self.MainMap.removeOverlays(overlays)
    }
    if Devs.count > 200{

    }
    else{
        for Dev in Devs {


            let lat: CLLocationDegrees = Dev.lt!
            let lon: CLLocationDegrees = Dev.ln!

            let coordinate = CLLocationCoordinate2D(latitude: lat, longitude: lon)


            let mapAnnotation = MKPointAnnotation()
            mapAnnotation.title = Dev.dn
            mapAnnotation.subtitle = Dev.dn
            mapAnnotation.coordinate = coordinate

            iconImage = Common.getIcon(Dev.icon!, ign: Dev.ign!)

            DispatchQueue.main.async {
                self.MainMap.addAnnotation(mapAnnotation)
            }
        }
        Common.endLoadingInNavigationCtrl(self)
    }
}

and here is my mapView( :viewFor) function:

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation ) -> MKAnnotationView? {
    // Don't want to show a custom image if the annotation is the user's location.
    guard !annotation.isKind(of: MKUserLocation.self) else {
        return nil
    }
    let annotationIdentifier = "AnnotationIdentifier"

    var annotationView: MKAnnotationView?
    if let dequeuedAnnotationView = mapView.dequeueReusableAnnotationView(withIdentifier: annotationIdentifier) {
        annotationView = dequeuedAnnotationView
        annotationView?.annotation = annotation
    }
    else {
        let av = MKAnnotationView(annotation: annotation, reuseIdentifier: annotationIdentifier)
        av.rightCalloutAccessoryView = UIButton(type: .detailDisclosure)
        annotationView = av
    }

    if var annotationView = annotationView {
            //Configure your annotation view here
            //annotationView.image = UIImage(named: iconImage!)
        if iconImage != nil {
            annotationView = addImageToAnnotation(annotationView, rotate: degrees, imageUrl: iconImage!)
        }

    }

    if annotationView == nil {
        annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: annotationIdentifier)
        annotationView?.canShowCallout = true
        // Resize image
        let pinImage = UIImage(named: "pin maps.png")
        let size = CGSize(width: 60, height: 90)
        UIGraphicsBeginImageContext(size)
        pinImage!.draw(in: CGRect(x: 0, y: 1, width: size.width, height: size.height))
            //(0, 0, size.width, size.height))
        let resizedImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        annotationView?.image = resizedImage

        let rightButton: AnyObject! = UIButton(type: UIButtonType.detailDisclosure)
        annotationView?.rightCalloutAccessoryView = rightButton as? UIView
    }
    else {
        annotationView?.annotation = annotation
    }

    return annotationView

}

function to add Image to pin:

func addImageToAnnotation( _ annotationView:MKAnnotationView , rotate : CGFloat? , imageUrl : String) -> MKAnnotationView {


        var img = UIImage(named: imageUrl)
        let size = CGSize(width:50 ,height:50);
        UIGraphicsBeginImageContext(size)
        img?.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        img = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        annotationView.canShowCallout = true
        annotationView.image = rotate != nil ? img?.imageRotatedByDegrees(rotate!, flip: false) : img


    return annotationView
}

I want to add different image to each annotation on map, but it keeps override single image on all annotations.

Answer 1

Create a custom MKAnnotation class.

class ImageAnnotation : NSObject, MKAnnotation {
    var coordinate: CLLocationCoordinate2D
    var title: String?
    var subtitle: String?
    var imageUrl: String?

    override init() {
        self.coordinate = CLLocationCoordinate2D()
        self.title = nil
        self.subtitle = nil
        self.imageUrl = nil
    }
}

Set data and add the annotation to your mapView.

    let annotation = ImageAnnotation()
    annotation.coordinate = coordinate1
    annotation.title = "title"
    annotation.subtitle = "subtitle"
    annotation.imageUrl = "https:// ..."
    self.mapView.addAnnotation(annotation)

Implement mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) delegate method.

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    guard let annotation = annotation as? ImageAnnotation else {
        return nil
    }

    let reuseId = "Pin"
    var pinView = mapView.dequeueReusableAnnotationView(withIdentifier: reuseId)
    if pinView == nil {
        pinView = MKAnnotationView(annotation: annotation, reuseIdentifier: reuseId)
        pinView?.canShowCallout = true
        let data = NSData(contentsOf: URL(string: annotation.imageUrl!)!)
        pinView?.image = UIImage(data: data! as Data)
    }
    else {
        pinView?.annotation = annotation
    }

    return pinView
}