Annotation Views stick to top-left corner of the map while tapping on any Annotation

[mobihunterz]

Environment

• Xcode version: 13
• iOS version: 13.0 +
• Devices affected: All
• Maps SDK Version: 6.4.1

I have integrated Mapbox v6 with my current application and found an issue related to Annotation view selection/deselection.

In my current implementation, I am using MGLPointAnnotation to add custom Annotation View. The main method which sets new location for Annotation is added here:

func setAnnotation(atLocation location: CLLocation, with bearing: Double, forDevice device: String, andUser userId: Int) {
        var locationMarker = LSTPointAnnotation() // Inherits MGLPointAnnotation which can hold previous coordinate for the annotation
        // Check if Annotation is already added to the Map else add it, userId is unique identifier
        if let userMarker = self.markerAnnotations[userId] {
            locationMarker = userMarker
        } else {
            markerAnnotations[userId] = locationMarker
            self.mapView?.addAnnotation(locationMarker)
        }
        
        var duration = LSTTheme.Animation.quick

        // Showing custom Annotation view for the MGLAnnotation
        // LSTLocoAnnotationView inherits from MGLAnnotationView and displays user icon with custom styling
        if let annotationView = self.mapView?.view(for: locationMarker) as? LSTLocoAnnotationView {
            // Some styling changes for Annotation View + rotating Annotation using bearing 
        }
        
        UIView.animate(withDuration: 0.25) {
            // New location coordinate
            locationMarker.coordinate = location.coordinate
        }
    }

So, for every location we find in didUpdateLocations: we call the above method.

Here is code block for viewFor annotation:

func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
        guard let lstAnnotation = annotation as? LSTPointAnnotation else { return nil }
     
        // For better performance, always try to reuse existing annotations.
        var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: "UserMarker") as? LSTLocoAnnotationView
     
        // If there’s no reusable annotation view available, initialize a new one.
        if annotationView == nil {
            annotationView = LSTLocoAnnotationView(annotation: lstAnnotation, reuseIdentifier: reuseIdentifier)
            annotationView!.bounds = CGRect(x: 0, y: 0, width: 36, height: 36)
            annotationView?.rotatesToMatchCamera = true
             
            let color = UIColor.LSTGrayColor
            annotationView!.backgroundColor = color.withAlphaComponent(0.3)
            annotationView!.setup(color)
        }
        return annotationView
    }

This is how we are showing our custom Annotation View for every annotation on Mapbox.

Now the issue here I face is, when I tap on any Annotation, all annotations jump to top-left corner on the map and then comes back to their original position/location after few seconds. Following is my Annotation selection/deselection code:

func mapView(_ mapView: MGLMapView, didSelect annotationView: MGLAnnotationView) {
        guard let view = annotationView as? LSTLocoAnnotationView else {
            return
        }
        view.toggleSelection(true) // Selection toggling
    }

func mapView(_ mapView: MGLMapView, didDeselect annotationView: MGLAnnotationView) {
        guard let view = annotationView as? LSTLocoAnnotationView else {
            return
        }
        view.toggleSelection()  // Selection toggling
    }

Basically, in Annotation View selection/deselection methods, we just toggle Annotation View's UI. Not doing anything else.

Here is the issue of the video on my phone:
https://user-images.githubusercontent.com/371306/178981127-12c7b357-8d07-4a77-9cc0-bf780684b889.MP4

NOTE: I have been using Mapbox SDK v6 for my application and also planned to migrate to v10 but due to some issues I have to stop the migration. The main issue I face while migrating to v10 due to which I have to postpone migration:

• Unable to move custom annotation views to new coordinates
• Another is I am not able to handle tap gesture for custom Annotation view like I am doing in v6

Ideally Annotation Views should not jump to top-left corner of the Map and should stay only on the location where they are bound.

Please suggest me some solution for this.

[tom-skydio]

Im also seeing view annotation stick to the top left corner

[ZiZasaurus]

Transferring this issue to the appropriate repository - gl-native-ios.

[paresh-thakor]

@tom-skydio Were you able to find any solution?

[Surferdude667]

Having the same problem...