Closed jun-nguyen-goldenowl closed 3 years ago
hey @jun-nguyen-goldenowl, thanks for opening the ticket (also thanks for following the template). Can you try and report back what happens when you change it to this:
<MapboxGL.UserLocation
renderMode='native'
androidRenderMode='compass'
onUpdate={handleUserLocationChange}
/>
hi @ferdicus, I've just tested your solution. My app went to crashing all the time until I remove the props renderMode='native'
(this prop is for iOS only). Then I tried my solution:
<MapboxGL.UserLocation
androidRenderMode="compass"
showsUserHeadingIndicator
onUpdate={handleUserLocationChange}
/>
Here is my screen recording for my app which is compared to Google Maps: https://drive.google.com/file/d/1ATnxoBICc_iOnRGrDacIp3ieP46xuDyx/view?usp=sharing
renderMode='native'
(this prop is for iOS only)
What makes you think that?
androidRenderMode
will have no impact without renderMode
set to native
.
Feel free to check the source for implementation details
I received this error when trying your solution
We were getting this behavior on Android as well. Android Heading not working for us.
I guess that seems to be related to this issue :S https://github.com/react-native-mapbox-gl/maps/issues/344
I'll have a look on Friday to figure out what's going on
Much appreciate for that, @ferdicus !
To clarify our behavior, we get the same behavior as the video you created/shared (https://drive.google.com/file/d/1ATnxoBICc_iOnRGrDacIp3ieP46xuDyx/view?usp=sharing). The heading coming from the location manager is incorrect for some reason. It will flip from North to South and doesn't seem to represent the Android device's heading accurately.
iOS works fine.
guys, sorry - I planned to have a look at this, however got bogged down by other tickets.... Will have a look throughout the week
@ferdicus Thank you again for looking at this. I'm stumped at the moment. Been testing it on various Android devices with the same result.
Hope you guys can figure out how to fix this issue
No luck on my side yet.
hey @jun-nguyen-goldenowl @systemlevel, I've just tested this on the ShowMap
example of the /example
app in the repo.
return (
<TabBarPage
{...props}
scrollable
options={_mapOptions}
onOptionPress={onMapChange}>
<MapboxGL.MapView styleURL={styleURL.styleURL} style={sheet.matchParent}>
<MapboxGL.Camera followZoomLevel={12} followUserLocation />
<MapboxGL.UserLocation
renderMode="native"
androidRenderMode="compass"
onPress={onUserMarkerPress}
/>
</MapboxGL.MapView>
</TabBarPage>
);
and it works as expected (although I can't judge if the heading is perfectly accurate - in the building)
Can you please provide a simple testcase to force the crash, preferably in the example app without any external dependencies - thanks 🙇
@ferdicus Thanks for your testing of this. I'm a bit perplexed about why ours is not using the correct heading.
@systemlevel, are you using the native icon or our RN rendering?
@systemlevel - We run into the locationComponent red screen with this when using the native icon.
I mean, it kinda morphed into two issues by now: 1) heading is not correctly shown on location indicator in "normal" mode 2) native indicator is causing crash
Does anyone have a reliable repro case for the second?
@ferdicus - it happens to us in our app consitantly with just a basic map component using native location.
We also use react-native-background-geolocation, so I wonder if there is some conflict between the 2 and the android Location Manager kicking on.
<MapboxGL.MapView style={{ flex: 1 }}>
<MapboxGL.UserLocation
animated={true}
renderMode="native"
androidRenderMode="normal"
showsUserHeadingIndicator={true}
/>
</MapboxGL.MapView>
@ferdicus when I run in native we just get fatal error. Not sure why now:
E/Mbgl-MapChangeReceiver: Exception in onDidFinishLoadingStyle
java.lang.NullPointerException: Attempt to invoke virtual method 'void com.mapbox.mapboxsdk.location.LocationComponent.setLocationComponentEnabled(boolean)' on a null object reference
For everyone having a crash when using renderMode="native"
, make sure, your Camera component has followUserLocation
set, like so:
<MapView style={styles.mapView}>
<Camera followUserLocation />
<UserLocation renderMode='native' androidRenderMode='compass' />
</MapView>
Seems to be the magic sauce.
See discussion in #1167
Hi all,
I believe that the heading indicator behaving incorrectly in Android is due to the fact that the heading value is incorrectly reporting the course value.
You can see a deeper explanation for this in an issue we created a few weeks back: https://github.com/react-native-mapbox-gl/maps/issues/1213
In short, to fix the incorrect heading a change is needed in the native mapbox Android project. We have created an issue about this in the native android project (https://github.com/mapbox/mapbox-gl-native-android/issues/652).
It would be great if any of you peeps wanting this to be fixed also comment and/or add positive reactions in that issue to increase the chance of it being noticed by the mapbox native maintainers.
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.
I'm seeing this on iOS as well, heading always points north. Has anyone found a fix? Thanks (v10.0.0-beta.59)
Is there any fix/ workaround for this issue to get heading work like in ios?
Describe the bug MapboxGL.UserLocation with
showsUserHeadingIndicator
enabled on Android device shows up wrong heading direction and randomly change the heading to unexpected directionI have got into the same trouble with this guy on Stackoverflow. https://stackoverflow.com/questions/63575092/showsuserheadingindicator-not-changing-direction-on-android
To Reproduce
Example:
Expected behavior User location heading indicator behavior looks like Google maps: Show correct heading indicator.
Screen recording Here is my screen recording for my app which is compared to Google Maps: https://drive.google.com/file/d/1ATnxoBICc_iOnRGrDacIp3ieP46xuDyx/view?usp=sharing
Versions: