UIImage is not loading after URLSession Data Task - ios

Question

I'm having a hard time with an image download. I'm using an image URL from Firebase to download a jpeg, and using the image in a map view callout. Currently, the callout appears at the correct size but with no image or subtitle. It works perfectly when I pass in an image asset manually. The image URL is saved perfectly to the newDog object. When I debug and inspect the image, it appears in memory but looks empty.
I think maybe this has something to do with loading the callout views before the image download has completed?
Here's my viewDidLoad:
override func viewDidLoad() {
super.viewDidLoad()
self.map.mapType = .standard
self.map.showsUserLocation = true
self.map.userTrackingMode = .follow
self.map.delegate = self
self.map.mapType = .hybrid
let userDogRef = FIRDatabase.database().reference().child("users").child((FIRAuth.auth()?.currentUser?.uid)!).child("dogs")
userDogRef.observe(.childAdded, with: { (snapshot) in
if snapshot.value == nil {
print("no new dog found")
} else {
print("new dog found")
let snapshotValue = snapshot.value as! Dictionary<String, String>
let dogID = snapshotValue["dogID"]!
let dogRef = FIRDatabase.database().reference().child("dogs").child(dogID)
dogRef.observeSingleEvent(of: .value, with: { (snap) in
print("Found dog data!")
let value = snap.value as! Dictionary<String, String>
let name = value["name"]!
let breed = value["breed"]!
let creator = value["creator"]!
let score = Int(value["score"]!)!
let lat = Double(value["latitude"]!)!
let lon = Double(value["longitude"]!)!
let url = value["imageURL"]!
let location = CLLocationCoordinate2D(latitude: lat, longitude: lon)
let newDog = Dog()
newDog.name = name
newDog.breed = breed
newDog.creator = creator
newDog.score = score
newDog.imageURL = url
newDog.location = location
let downloadURL = URL(string: newDog.imageURL)!
URLSession.shared.dataTask(with: downloadURL, completionHandler: { (data, response, error) in
if error != nil {
print(error!)
return
}
newDog.picture = UIImage(data: data!)!
self.dogs.append(newDog)
let annotation = CustomAnnotation(location: newDog.location, title: newDog.name, subtitle: newDog.creator)
DispatchQueue.main.async {
self.map.addAnnotation(annotation)
}
}).resume()
})
}
})
}
Here's my mapview and annotation methods:
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
if(annotation is MKUserLocation){
return nil
}
let ident = "pin"
var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: ident)
if annotationView == nil {
annotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: ident)
annotationView?.canShowCallout = true
} else {
annotationView!.annotation = annotation
}
configureDetailView(annotationView!)
return annotationView
}
func configureDetailView(_ annotationView: MKAnnotationView) {
let width = 300
let height = 300
let dogPhotoView = UIView()
let views = ["dogPhotoView": dogPhotoView]
dogPhotoView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[dogPhotoView(\(height))]", options: [], metrics: nil, views: views))
dogPhotoView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[dogPhotoView(\(width))]", options: [], metrics: nil, views: views))
for dog in self.dogs {
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
imageView.image = dog.picture
}
annotationView.detailCalloutAccessoryView = dogPhotoView
}
I'm using a custom annotation class. Here's that:
class CustomAnnotation: NSObject, MKAnnotation {
var coordinate : CLLocationCoordinate2D
var title: String?
var subtitle: String?
init(location: CLLocationCoordinate2D, title: String, subtitle: String) {
self.coordinate = location
self.title = title
self.subtitle = title
super.init()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
Here's a photo of my debugger:

Answer 1

Move self.map.addAnnotation(annotation) to URLSession.shared.dataTask completion handler. Currently picture is set to Dog object after map adds annotation. Don't forget to wrap addAnnotation(_:) call with OperationQueue.main.addOperation.

Answer 2

dataTask works asynchronously. You should move to code to create the annotation in the completion handler.
URLSession.shared.dataTask(with: downloadURL, completionHandler: { (data, response, error) in
if error != nil {
print(error!)
return
}
newDog.picture = UIImage(data: data!)!
self.dogs.append(newDog)
let annotation = CustomAnnotation(location: newDog.location, title: newDog.name, subtitle: newDog.creator)
DispatchQueue.main.async {
self.map.addAnnotation(annotation)
}
}).resume()

Answer 3

The issue occurred when I was constructing the callout image view. I created an imageView, but I didn't ever add it as a subview of it's superview. What a silly oversight! Here's the correct code:
func configureDetailView(_ annotationView: MKAnnotationView) {
let width = 300
let height = 300
let dogPhotoView = UIView()
let views = ["dogPhotoView": dogPhotoView]
dogPhotoView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[dogPhotoView(\(height))]", options: [], metrics: nil, views: views))
dogPhotoView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[dogPhotoView(\(width))]", options: [], metrics: nil, views: views))
for dog in self.dogs {
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
imageView.image = dog.picture
DispatchQueue.main.async {
dogPhotoView.addSubview(imageView)
self.view.layoutIfNeeded()
}
}
annotationView.detailCalloutAccessoryView = dogPhotoView
}