MarkerView does not follow map on drag (Android)

[traviswimer]

Describe the bug
When using MarkerViews on Android, if you drag the map to another position, the marker will remain in the same position on the screen rather than following the movement of the map. Once the drag has stopped, the marker seems to move to the correct location.

To Reproduce
This bug seems to be present any time a <MarkerView /> is used on Android.

It can actually be seen in the current example code for react-native-mapbox-gl under "Annotations/MarkerView": https://github.com/react-native-mapbox-gl/maps/blob/master/example/src/examples/Annotations/MarkerView.js

Expected behavior
The marker should remain at the same position on the map while dragging.

Actual behavior
The marker remains at a static position on the screen rather than moving along with the map.

Screenshots
Here is a video of the bug viewed in the unaltered project example code:

I also updated the example to include more MarkerViews to make it more apparent what is happening:

Versions (please complete the following information):

• Platform: Android
• Platform OS: Android 11
• Device: Pixel 5 (Also Pixel 4 emulator)
• Emulator/ Simulator: Both
• Dev OS: macOS 11.5.2
• react-native-mapbox-gl Version: 8.3.0
• Mapbox GL version: (I'm honestly not sure how to find this, but it's whatever is used by the example project.)
• React Native Version 0.64.2 (Also seeing it in 0.65.1)

Additional context
It kind of looks like when a marker hits the edge of the screen it just get's stuck there rather than being removed. Maybe there is a bug in the code checking for elements that are not within the visible map?

Something interesting to note is that this bug does not seem to occur with PointAnnotations, only MarkerViews.

I think this bug is specific to Android, as I am not seeing any problems on iOS.

Also, if you move the screen more slowly, you can see that the markers are slightly delayed in maintaining their correct location on the map. I'm not sure if that is even the same bug though.

[traviswimer]

I found a related open issue for the native Android plugin used by <MarkerView/>: mapbox/mapbox-plugins-android#1115

Unfortunately, it seems this bug has likely been around for over a year.

[mfazekas]

@traviswimer thanks for looking into it, it seems to be fixed by mapbox/mapbox-plugins-android#1165 but not sure if they'll release a binary. Also v9 of mapbox seems to be deprecated.

[jorisoudejans]

What I did to include this fix right now (using reflection):

mapboxMap.addOnCameraMoveListener {
                    markerViewManager?.let { markerViewManager ->
                        val function = MarkerViewManager::class.memberFunctions.find { it.name == "update" }
                        function?.let {
                            it.isAccessible = true
                            function.call(markerViewManager)
                        }
                    }
                }

[ferdicus]

@jorisoudejans : looking forward to review a PR, that I'm sure would make many users of this repo pretty happy :)

[jorisoudejans]

@ferdicus A PR (not mine) has been merged already, but no binary has been released.

mapbox/mapbox-plugins-android#1165

[ferdicus]

What I did to include this fix right now (using reflection):

Where did you add this fix to use it?

[jorisoudejans]

In the onStyleLoaded callback

[traviswimer]

it seems to be fixed by mapbox/mapbox-plugins-android#1165 but not sure if they'll release a binary. Also v9 of mapbox seems to be deprecated.

@mfazekas Thanks for the insight, although I'm a little confused on exactly what this means. Are you saying the mapbox/mapbox-plugins-android repo is using deprecated v9 features and is no longer actively maintained?

If so, what does that mean for @react-native-mapbox-gl/maps? Does this mean the <MarkerView /> component will be deprecated in favor of something else?

[ferdicus]

@traviswimer

Just to clarify the rich mapbox history, here a little write up with some links.

It's all a bit confusing, I'll try to show it with a flow:

   react-native-mapbox-gl/maps
          \ wraps /
           \     /
    mapbox/mapbox-gl-native-ios
  mapbox/mapbox-gl-native-android
          \ wraps /
           \     /
   mapbox/mapbox-gl-native 

The lib that was the center for the licensing debate was mapbox-gl-native, which moved to a closed source.
So no more open source changes happening since then.

Additionally the two SDK libs mapbox-gl-native-ios/mapbox-gl-native-android changed their distribution model (you need an access token in order to download it) and their licensing as well.

Shortly after, v10 of both SDKs was announced mapbox-maps-android/ mapbox-maps-ios which de facto have superseeded the old SDKs (they are no longer actively maintained by mapbox 😭 )

So all in all:

• closed source/ changed licensing native rendering lib mapbox-gl-native
• old open source/ changed licensing/ distribution model SDK libs
• new open source/ changed licensing/ distribution model SDK libs

We are at the moment heading towards a crossroad with this repo, where we decide to either continue supporting mapbox after v10 or leaning towards the opensource fork of mapbox => mapLibre

[mfazekas]

@traviswimer so mapbox released(ing) a almost rewrite of their libs with Kotlin and Swift - https://docs.mapbox.com/ios/beta/maps/guides/ https://docs.mapbox.com/android/beta/maps/guides/ and the <= v9 version we use is no longer seems to be maintained. No MarkerView like plugin seems to be exists for v10.

And there is MapLibre which is an open source fork of v9ish version

https://github.com/react-native-mapbox-gl/maps/discussions/1274

[ferdicus]

related to #1282

[waymond91]

Sorry - I'm just getting up to speed here. I am hoping to use this repo with expo to deploy a GIS app, but I see now that some big changes might be underway - I'm happy to help out anyway I can but my experience in the mobile space is very limited.
Does this and #1282 mean that for the moment, Android MarkerView is not currenlty working/supported?
Is there a different/bettery way to display points on the map that I am not aware of?

Can anyone comment on which way the repo is looking to go longterm in terms of mapbox vs maplibre?

[ombogdan]

same problem

[ombogdan]

mapbox is the worst map in the world

[ferdicus]

@ombogdan, thanks for helping to make it better 👍🏿

[Dakuan]

We also have this but the pin is not snapping to where it needs to be after the drag has finished

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[traviswimer]

For anyone coming across this, the bug does seem to be fixed now: #1735

It's not a 100% perfect fix, but it is pretty close. The markers now move with only a very slight delay, which should generally be acceptable functionality.

In other words, if you're experiencing this bug, you should try upgrading to the latest version.

[dpz3579]

For anyone coming across this, the bug does seem to be fixed now: #1735

It's not a 100% perfect fix, but it is pretty close. The markers now move with only a very slight delay, which should generally be acceptable functionality.

In other words, if you're experiencing this bug, you should try upgrading to the latest version.

Which version did you upgrade to?
I'm still facing the issue with

        rnmbglMapboxLibs = {
            implementation 'com.mapbox.mapboxsdk:mapbox-android-sdk:9.7.1'
            implementation 'com.mapbox.mapboxsdk:mapbox-sdk-services:6.3.0'
            implementation 'com.mapbox.mapboxsdk:mapbox-sdk-turf:6.3.0'
            implementation 'com.mapbox.mapboxsdk:mapbox-android-gestures:0.7.0'
        }
        rnmbglMapboxPlugins = {
            implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-annotation-v9:0.9.0'
            implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-localization-v9:0.14.0'
            implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-markerview-v9:0.4.0'
        }

Would be great if you can help with how you fixed it for your app.
P.S. I'm not using v10, if that's an issue let me know, I'll try to upgrade my dependencies.

[traviswimer]

@dpz3579 I think I just worded my comment poorly (or I was confused about the current release at the time).

I installed the npm package directly from a Github URL. In other words, my package.json has this dependency:

"@react-native-mapbox-gl/maps": "https://github.com/react-native-mapbox-gl/maps.git#e28abceecb1d484bd35bdc94f45a11d4420649b0",

If you look at the pull request I mentioned (#1735), you can see it was merged to master on Feb 13, so any commit after that should work.

8.6.0-beta.0 was released on Mar 6 though, so you should be able to use that.

I guess my original comment is a little misleading, since it's not necessarily ideal to use a beta release, but in my case it was worth it to solve this bug.

If that doesn't work, let me know and I can check if there's anything else I changed, but I think this is probably the main difference.

[dpz3579]

@traviswimer Thanks for pointing out the exact PR & commit. I tried to install it by configuring it in my package.json,
But was facing some odd errors.
As there were some pre-install scripts for 8.5.0 maybe those were creating issues.

But when I made the changes in my node_modules folder & specific files. I was able to resolve it.

So thanks a lot for it. 👏
Cheers. ✌️