Android: UserTrackingMode `FollowWithHeading` doesn't rotate the map

[kristfal]

When enabling userTrackingMode FollowWithHeading, the android app shows the user's orientation with an arrow, but the map camera doesn't follow the user's orientation in the same way as it does for iOS.

Version: Master

[nitaliano]

Are you testing on a physical device? The heading does not update on the emulator

[kristfal]

Was testing on a physical device, Samsung S5.

The heading arrow updates as expected, but the camera orientation state doesn't, it just snaps to north when I toggle to FollowWithHeading.

[Gp2mv3]

It would be perfect to be able to select if we want the map to rotate or not according to the heading. Personally, I prefer to have the arrow but no rotation at all. Is it possible ?

[kristfal]

@nitaliano Update here: It seems like the map camera during FollowWithHeading on Android works just as it does during followWithCourse. In other words, FollowWithHeading shows the heading arrow in the map, but the camera orientation matches the user's course.

[giantss]

1408 I also encountered the same problem, I want to do the FollowWithHeading effect like ios on the android phone, but I don't know how to do it, I am really annoyed. @kristfal

[giantss]

Is there no recent progress on this issue ? 😒

[qlereboursBS]

I have the same issue on Android 6, Real device (Xiaomi MI5)

[giantss]

@qlereboursBS Android phone is the same.

[kristfal]

To make this work properly and have a uniform behaviour across iOS and Android, we'll need to to control user location marker and camera from the RN side instead of relying on the native implementation.

For now, I'll recommend anyone having issues to build a custom implementation. We'll look at getting in a set of maintained components for this at a later stage. Closing as this is a duplicate of a few other tickets.

[juergengunz]

@kristfal any examples to have a followWithCourse behavior that follows a snaped polyline? kinda like a navigation would do?

[kristfal]

@juerhengunz you should be able to achieve something like that by using a custom location marker layer and turf.js. With turf.js, you could use lineDistance and snap your location marker to a given poly line when the lineDistance is below a given threshold.

[juergengunz]

Yeah I know, but how to make it as smooth as the navigation sdk? Isnt there a way to manipulate the location for the followWithCourse?

Kristian Fallrø notifications@github.com schrieb am Mi. 3. Apr. 2019 um 08:39:

@juerhengunz you should be able to achieve something like that by using a custom location marker layer and turf.js. With turf.js, you could use lineDistance and snap your location marker to a given poly line when the lineDistance is below a given threshold.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/nitaliano/react-native-mapbox-gl/issues/1078#issuecomment-479359998, or mute the thread https://github.com/notifications/unsubscribe-auth/AMUfVs_HSKP4h61BeGjKmLH92WCzlYEVks5vdEyvgaJpZM4SWtku .

[kristfal]

There is no direct way to manipulate the location native layer.

[smolleyes]

hi

i created this small hook to fix it on android and get the map rotating on compass changes...

1/ import the module:

import CompassHeading from "react-native-compass-heading";

2/ add a ref to your Camera (import useRef from react first..)

const camera = useRef(null);

then

<MapboxGL.Camera
          ref={camera}
          zoomLevel={zoomLevel}
          centerCoordinate={[
            position.coords.longitude,
            position.coords.latitude,
          ]}
          animationMode={"flyTo"}
          animationDuration={2}
></MapboxGL.Camera>

3/ add effect before render

useEffect(() => {
    const degree_update_rate = 0;

    CompassHeading.start(degree_update_rate, (degree) => {
      camera.current &&
        camera.current.setCamera({
          heading: degree,
          duration: 10,
        });
    });

    return () => {
      CompassHeading.stop();
    };
  }, []);

and it works great 👍

++