Custom MKMarkerAnnotationView not displayed correctly in UITableViewCell the first time

Question

I have a tableview where I want to display in UITableViewCell a custom MKMarkerAnnotationView. This tableview is displayed in a dedicated ViewController and the ViewController is in a TabBarController. The second Tab display a Map (but it's not important here).

I have created a class "EdgePinViewAnnotation" that inherits from the MKMarkerAnnotationView In my storyboard, in the TableView I have added a UITableViewCell that contains some labels and a view with the class "EdgePinViewAnnotation"

In the implementation of a UITableViewCell, I'm initializing my custom "EdgePinViewAnnotation". Unfortunately when the Cell is displayed in the table, it's a default MKMarkerAnnotationView that is displayed and not my customized "EdgePinViewAnnotation".

When I scroll my TableView and the cell goes out of screen and then it's refreshed it displays my "EdgePinViewAnnotation" correctly.

Why it's not displaying correctly the first time?

Here the code I have implemented for my custom MKMarkerAnnotationView

class EdgePinViewAnnotation: MKMarkerAnnotationView {

    override var annotation: MKAnnotation? {
        willSet {
            if let edgeAnnotation = newValue as? EdgePin {
                animatesWhenAdded = true
                isDraggable = true
                canShowCallout = true
                initRenderingProperties(pin: edgeAnnotation)
            }
        }
    }


    func initWith(edgePin:EdgePin) {
        animatesWhenAdded = false
        isDraggable = false
        canShowCallout = false
        initRenderingProperties(pin: edgePin)
    }

    func initRenderingProperties(pin edgePin:EdgePin) {
        glyphTintColor = UIColor.white
        glyphText = "\(edgePin.index)"
        markerTintColor = edgePin.renderingColor
    }

}

Here the code from my UITableView

   func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        if indexPath.section == 0 {
            if let cell = tableView.dequeueReusableCell(withIdentifier: CellId.DistanceConfigurationCellId, for: indexPath) as? DistanceConfigurationTableViewCell {
                cell.theLabel.text = findMe.edgePoints[indexPath.row].address
                let coord = findMe.edgePoints[indexPath.row].coordinate
                cell.coordinates.text = "Lat:\(coord.latitude) / Long:\(coord.longitude)"
                cell.theTextField.text = "\(findMe.edgePoints[indexPath.row].distance)"
                cell.theTextField.delegate = self
                cell.theTextField.tag = indexPath.row
                cell.theMarker.initWith(edgePin:findMe.edgePoints[indexPath.row])
                return cell
            }
        } else {
     return UITableViewCell()
    }
}



class DistanceConfigurationTableViewCell: UITableViewCell {

    @IBOutlet weak var theLabel: UILabel!
    @IBOutlet weak var coordinates: UILabel!
    @IBOutlet weak var theTextField: UITextField!

    @IBOutlet weak var theMarker: EdgePinViewAnnotation!

}

Answer 1

I found the solution, even if I don't really understand it.

The MKMarkerAnnotationView must be configured in

tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) 

instead of

tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

and then the following code is working and the MKMarkerAnnotationView is displayed correctly in each UITableViewCell

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        if indexPath.section == 0 {
            if let cell = tableView.dequeueReusableCell(withIdentifier: CellId.DistanceConfigurationCellId, for: indexPath) as? DistanceConfigurationTableViewCell {
                cell.theLabel.text = findMe.edgePoints[indexPath.row].address
                let coord = findMe.edgePoints[indexPath.row].coordinate
                cell.coordinates.text = "Lat:\(coord.latitude) / Long:\(coord.longitude)"
                cell.theTextField.text = "\(findMe.edgePoints[indexPath.row].distance)"
                cell.theTextField.delegate = self
                cell.theTextField.tag = indexPath.row

                return cell
            }
        } else {
     return UITableViewCell()
    }
}

  func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        if let theCell = cell as? DistanceConfigurationTableViewCell {

            theCell.theMarker.initWith(edgePin:findMe.edgePoints[indexPath.row])
        }
    }