Thumbnail Image not show showing up in MKMapView Annotation View

Question

I am trying to make the left callout accessory for my annotations view and image that is downloaded from Parse. For some reason the image associated with the image isn't showing up and the left callout accessory is blank.

Here is my current code:

func mapView(mapView: MKMapView, viewForAnnotation annotation: MKAnnotation) -> MKAnnotationView? {

     if annotation is ImageAnnotation {

        let reuseId = "image"

        var anView = mapView.dequeueReusableAnnotationViewWithIdentifier(reuseId)
        if anView == nil {
            anView = MKAnnotationView(annotation: ImageAnnotation() as MKAnnotation, reuseIdentifier: reuseId)
            anView!.canShowCallout = true
        } else {

            anView!.annotation = ImageAnnotation() as MKAnnotation
        }

        let cpa = annotation as! ImageAnnotation
        anView!.image = UIImage(named: cpa.imageNameI)

        let button = UIButton(type: UIButtonType.DetailDisclosure) // button with info sign in it

        anView!.rightCalloutAccessoryView = button

        anView!.leftCalloutAccessoryView = UIImageView(frame: CGRectMake(0, 0, 59, 59))


        return anView
    }

    return nil
}



func mapView(mapView: MKMapView, didSelectAnnotationView view: MKAnnotationView) {

        if let Annotation =  view.annotation as? ImageAnnotation {

            if let thumbnailImageView = view.leftCalloutAccessoryView as? UIImageView {

func loadImage() {

    let Coordinate = view.annotation?.coordinate

    let lat = Coordinate?.latitude
    let lon = Coordinate?.longitude

    let AnCoordinate = PFGeoPoint(latitude: lat!, longitude: lon!)

    let query = PFQuery(className: "ImageAn")
    query.whereKey("shoutoutlocation", equalTo: AnCoordinate)
    query.findObjectsInBackgroundWithBlock ({(objects:[AnyObject]?, error: NSError?) in
        if(error == nil){

            _ = objects as! [PFObject]

            for object in objects! {

                let thumbNail = object["image"] as! PFFile

                thumbNail.getDataInBackgroundWithBlock({
                    (imageData: NSData?, error: NSError?) -> Void in
                    if (error == nil) {

                        let Image = UIImage(data:imageData!)

                        thumbnailImageView.image = Image

                        }
                    })
                }

            }else{
                print("Error in retrieving \(error)")
            }
        })

        }
    }

    }
}

Can anyone tell me what I am doing wrong? Thanks

Answer 1

You need to either refresh the view in the completion block after assigning the image data or you can use a PFImageView instead of a UIImageView.

PFImageView is included in the ParseUI framework and automatically handles displaying a placeholder image while the file is being downloaded and then updates the view when ready.

Typical usage

// Set placeholder image
thumbnailImageView.image = UIImage(named: "thumbnail_placeholder")

// Set remote image (PFFile)
thumbnailImageView.file = object["image"] as! PFFile

// Once the download completes, the remote image will be displayed
thumbnailImageView.loadInBackground { (image: UIImage?, error: NSError?) -> Void in
    if (error != nil) {
        // Log details of the failure
        println("Error: \(error!) \(error!.userInfo!)")
    } else {
        // profile picture loaded
    }
}