Generating markers with the user's direction

Question

I am making a react native app in which I am displaying live location of buses. I am using react-native-maps. The markers and live location are working perfectly but I am unable to find markers which can show the direction of the bus as well.

By direction I mean the rotation of bus wether it turns left, right , etc. Like this:

How can I show such a marker?

Answer 1

You can achieve this with heading angle, the direction you are getting from the buses should have a heading value. For example, you are getting a location object with :

{ lat: 123, lng: 123, heading: 350 }

First make sure you are receiving the heading angle from the location. If so, then you need to use an Animated marker to achieve this.

For example:

In your MapView

<MapView.Marker.Animated 
        coordinate={{ latitude: Number(origin.lat), longitude: Number(origin.lng) }}
        ref={marker => { this.marker = marker }}
        flat
        style={{ transform: [{
          rotate: origin.heading === undefined ? '0deg' : `${origin.heading}deg`
        }]
      }}
        >
        <Image
          style={{ 
            height: 25,
            width: 25,
            transform: [{
            rotate: '270deg'
            }]
          }}
          source={require('../../assets/car.png')}
        />
      </MapView.Marker.Animated>

Here, origin.lat and origin.lng represent latitude and longitude and if you are receiving them as a string, you can parse them to Number and the heading refers to the direction of the car, and the image is off-course your car logo and the rotation in the image is just to adjust it little bit (its not important).

Now you are 50% done here, Lets see the componentWillReceiveProps function now, here you need to update the direction with respective to heading.

componentWillReceiveProps(nextProps) {
const duration = 1000;

if (this.props.liveLocation.origin !== nextProps.liveLocation.origin) {
  const newCoordinate = {
    latitude: Number(nextProps.liveLocation.origin.lat),
    longitude: Number(nextProps.liveLocation.origin.lng)
  };


  if (Platform.OS === 'android') {
    if (this.marker) {
      this.marker._component.animateMarkerToCoordinate(
        newCoordinate,
        duration
      );
    }
  } else if (this.props.liveLocation.origin != null) {
    const oldCoordinate = new AnimatedRegion({
      latitude: Number(this.props.liveLocation.origin.lat),
      longitude: Number(this.props.liveLocation.origin.lng)
    });
    oldCoordinate.timing(newCoordinate).start();
    }
}

}

For ios it doesn't work perfect, The flat prop doesn't let the image inside your marker rotate while you are rotating your map, but unfortunately it doesn't work for ios, You can disable your map rotation for IOS.

You can also visit here for more references. https://github.com/react-community/react-native-maps/issues/1701