Mapbox-gl-native: Prevent flickering when adding/removing annotations

[kkaefer]

When adding a new annotation, tiles that contain this annotation are flickering because we are removing the tile, and parsing the new tile may still take a frame or two. Instead of removing the tile, we should reparse the tile and update the bucket as required.

[ghost]

I'm still noticing this for both adding & removing annotations. (iOS)

[incanus]

@jfirebaugh Would you have time to look into this sometime, at least to scope the work required?

[incanus]

This is pretty satisfactory right now. See https://github.com/mapbox/mapbox-gl-native/issues/1798#issuecomment-137858050.

[parrots]

Regarding comment about #1798 demo seemingly addressing flickering, made a PR to Justin's sample project to show the flickering is still there. See here: https://github.com/incanus/UISyncedMap/pull/1 which just zooms out the map to show the entire user route.

Ideal outcomes, as far as I'd see, besides just "make it faster" which could always still have a visible flicker on old hardware or with enough complex data:

• Find a way to not remove the old drawn layer until the new version can be swapped in so there is 0.1 seconds of stale data vs 0.1 seconds of empty space.
• Only redraw the annotations that were modified.

[mourner]

Find a way to not remove the old drawn layer until the new version can be swapped in so there is 0.1 seconds of stale data vs 0.1 seconds of empty space.

This is what GL JS does currently, which is good enough for use cases like mouse-driven polylines etc.

[pkmital]

We're still experiencing issues with flickering for our use case. We are drawing a polyline of about 100 points, and are constantly removing it and redrawing it with each update, though require updating the polyline so often as we are changing only the last few points of the line.

[maciekish]

We're also experiencing this issue in 294b307cb3f470b1cf5fb94633c9082dc0bfd719. When the user pans our map we reload search results and the experience is horrible. The idea suggested by @mourner sounds like a very good one. cc @zakay

[incanus]

Going to have to move this from the current iOS milestone as it's non-blocking.

[futureshape]

Having the same problem here, my map markers show a different image based on live data (availability of bikes and spaces on a bicycle hire scheme) and the only way to change the image is to add/remove, which causes flicker when more than a couple of markers are visible.

[kkaefer]

Depends on #2103 and #2481

[kkaefer]

This will be a lot easier after #2617 has landed, it introduces updatable tiles. We have to refactor Annotations so that the tiles themselves remain, but only their content is updated.

[ljbade]

Once this is implemented we can expose the set methods in the Android API, and wire them up to update existing annotations.

/cc @bleege @tobrun

[incanus]

@jfirebaugh Does this relate to your annotation work and/or is it on the near-term roadmap now that #2617 has landed?

[jfirebaugh]

I don't have plans to investigate this in the near future. I think @kkaefer may be planning to as a followup to #2617.

[jfirebaugh]

After #2617 and #2853 this looks pretty tractable. Sending a PR momentarily.

[picciano]

This is a really nice fix. Already have happy feedback from users. Thanks.
"So much easier on the eyes and more polished without the flickering!!! Thank you!!! "

[incanus]

:tada:

[mitchellporter]

I'm really excited for this fix. What's the best way for me to get this for the iOS SDK? I've already been using the latest version @ 2.1.2 with Cocoapods. Will the pod be ready to be updated soon, or do I need to start using a custom fork?

[friedbunny]

@mitchellporter It's possible to use the master development branch as a pod and get the latest pre-release, but be aware that things can/will break. Don't use this in production, clearly. :boom:

pod 'Mapbox-iOS-SDK', :podspec => 'https://raw.githubusercontent.com/mapbox/mapbox-gl-native/master/ios/Mapbox-iOS-SDK.podspec'

[incanus]

More closely to the impending release, you could use https://raw.githubusercontent.com/mapbox/mapbox-gl-native/release-ios-v3.0.0/ios/Mapbox-iOS-SDK.podspec instead, but post-release it will go away once the release branch is merged completely back to master.

[mitchellporter]

@friedbunny @incanus Thanks guys. I've already noticed some things with the update, both good and bad. Would you prefer me to post here or create a separate issue specifically for iOS?

[incanus]

I’d say flag any specific issues, indicating the version tested against, as we near release.

[euroboy]

Hi. I'm facing this issue in version 3.3.4. I'm drawing a tracking path on map, and before adding annotations I remove the old ones, and as result the path is blinking. How to fix this?

[zivlevy]

I have the same issue as @euroboy when removing MGLPolyline and re-adding it it flickers.
I need to update the polyline every 1 sec due to user location update. The current flickering is unacceptable UX.
What is the best way to overcome this issue ?

[t-yoshii]

MGLPolyline (MGLMultipoint) has setCoodinates method. I think it dynamically updates its coordinates without removing/re-adding.

https://www.mapbox.com/ios-sdk/api/3.4.0-beta.6/Classes/MGLMultiPoint.html#/c:objc(cs)MGLMultiPoint(im)setCoordinates:count:

[zivlevy]

@t-yoshii thanks.
Unfortunately that doesn't help with the flickering.

[t-yoshii]

@zivlevy How about replaceCoordinates? I made a mistake...

[zivlevy]

@t-yoshii - Yes, that removes the flickering.
Thanks for your help !

[stuyam]

I can confirm that the method @t-yoshii suggests of using replaceCoordinates to update a line rather than deleting a line and redrawing it does in fact fix the flicker.