iOS 14 MapKit selected annotation image bug

Viewed 786

First of all, I encountered a problem that only came with iOS 14. I do not have such a problem with old versions.

I change the image of the pin when I chose from the pins on the map and throw an orange picture. While doing this assignment, I see some of the assets I use in the application during this change on iOS 14 devices.

First appearance:

Before

The moment the pin is selected:

During

After the pin is selected:

After

When the pin is selected, the assets do not appear normally, the pin was selected directly. Now, such a situation intervened.

The codes I use in pin click situations on the map are as follows

func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
    view.image = UIImage(named: "pin_selected")
}

func mapView(_ mapView: MKMapView, didDeselect view: MKAnnotationView) {
    view.image = UIImage(named: "pin")
}

It is a situation that passes in seconds, but how can I solve this problem?

5 Answers

I had the same issue, and after struggling a lot I realize it was a problem with the image. Probably some left metadata in the image cause the issue when the annotation animates between states. What I did was having the image for the annotation to be exported again from designs and replaced in the project, and that solved the issue.

Ran into this issue as well. A fix that worked for me is to put the images in a Sprite Atlas: select the asset library in Xcode, press the + button on the lower left, select New Sprite Atlas, then drag the images in the asset library into the Sprites folder.

For me the issue was only happening with small PNG images. JPEGs or large PNGs (I tried 256x256 and scaled down) seemed to work fine. However I ended up using the above workaround since small PNGs are ideal for these map pin icons. The devices I tested were running iOS 14.0.1.

I have the same problem, but I tested on the beta version of iOS 14.3 and the problem no longer occurred.

Documented issues I’ve seen here with a workaround. Appears related to the animation done when switching images and using an asset catalogue.

https://github.com/abotkin/FB8708184

I found solution

/// Pin image
func pinImageView(pinImage: UIImage) -> UIImage?  {
    /// Create canvas
    let scale = UIScreen.main.scale
    UIGraphicsBeginImageContextWithOptions(CGSize(width: 40, height: 40), false, scale)
    let currentContext = UIGraphicsGetCurrentContext()!
    currentContext.saveGState()
        
    /// Add pin image
    let imageRect = CGRect(x: 0, y: 0, width: 40, height: 40)
    pinImage.draw(in: imageRect)

    /// Generate new image
    let img = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()

    return img
}


func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
    view.image = pinImageView(pinImage: UIImage(named: "pin_selected"))
}

func mapView(_ mapView: MKMapView, didDeselect view: MKAnnotationView) {
    view.image = pinImageView(pinImage: UIImage(named: "pin"))
}

Set width and height from source pin image, in my case pin image is 40x40

Related