rnmapbox / maps

A Mapbox react native module for creating custom maps
MIT License
2.27k stars 849 forks source link

[Android] - MapboxGL.UserLocation has wrong heading indicator #1070

Closed jun-nguyen-goldenowl closed 3 years ago

jun-nguyen-goldenowl commented 4 years ago

Describe the bug MapboxGL.UserLocation with showsUserHeadingIndicator enabled on Android device shows up wrong heading direction and randomly change the heading to unexpected direction

I 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:

        <MapboxGL.MapView
          ref={(ref) => { _map = ref || _map }}
          logoEnabled={false}
          onLongPress={({ geometry }) => addAnnotation(geometry.coordinates[0], geometry.coordinates[1])}
          onPress={handleSelectTrack}
          onRegionWillChange={handleMapRegionChange}
          onDidFinishLoadingMap={handleFinishLoadMap}
        >
          <MapboxGL.Camera
            ref={(ref) => {
              if (ref) {
                _camera = ref
              }
            }}
            centerCoordinate={initialCoords}
            zoomLevel={7}
            minZoomLevel={0}
            maxZoomLevel={18}
            followUserLocation={isLogging}
            followZoomLevel={18}
          />
           <MapboxGL.UserLocation
              showsUserHeadingIndicator
              onUpdate={handleUserLocationChange}
           />
        </MapboxGL.MapView>

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:

ferdicus commented 4 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}
/>
jun-nguyen-goldenowl commented 4 years ago

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

ferdicus commented 4 years ago

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

jun-nguyen-goldenowl commented 4 years ago

Screenshot_2020-10-13-21-54-24-742_au.com.newtracs.Newtracs.jpg

I received this error when trying your solution

systemlevel commented 4 years ago

We were getting this behavior on Android as well. Android Heading not working for us.

ferdicus commented 4 years ago

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

jun-nguyen-goldenowl commented 4 years ago

Much appreciate for that, @ferdicus !

systemlevel commented 4 years ago

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.

ferdicus commented 4 years ago

guys, sorry - I planned to have a look at this, however got bogged down by other tickets.... Will have a look throughout the week

systemlevel commented 4 years ago

@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.

jun-nguyen-goldenowl commented 4 years ago

Hope you guys can figure out how to fix this issue

systemlevel commented 4 years ago

No luck on my side yet.

ferdicus commented 4 years ago

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)

https://streamable.com/1pv2h2

Can you please provide a simple testcase to force the crash, preferably in the example app without any external dependencies - thanks 🙇

systemlevel commented 4 years ago

@ferdicus Thanks for your testing of this. I'm a bit perplexed about why ours is not using the correct heading.

ferdicus commented 4 years ago

@systemlevel, are you using the native icon or our RN rendering?

dorthwein commented 4 years ago

@systemlevel - We run into the locationComponent red screen with this when using the native icon.

ferdicus commented 4 years ago

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?

dorthwein commented 4 years ago

@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>
systemlevel commented 3 years ago

@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
ferdicus commented 3 years ago

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

jaltin commented 3 years ago

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.

stale[bot] commented 3 years ago

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.

rsedlr commented 1 year ago

I'm seeing this on iOS as well, heading always points north. Has anyone found a fix? Thanks (v10.0.0-beta.59)

manarfalah commented 1 year ago

Is there any fix/ workaround for this issue to get heading work like in ios?