top of page
Search

Direction of marker for cabs application

  • Writer: Prakhar Srivastava
    Prakhar Srivastava
  • Aug 31, 2020
  • 2 min read


All of us have seen that in the cab booking applications, the cabs can be seen moving in a certain direction.

Today we will doing it for a sample application. Today we will be building this


The full source code can be found here

We had already built the google maps application and we know how to plot a marker on any latitude-longitude. Now we will plot the marker along with the direction.

Assuming that we know how to integrate google maps in an application, we will now see how to use the direction. The google map integration can be found here: https://medium.com/@prakharsrivastava_219/place-search-for-cab-booking-apps-62fdb2820b55

For this application, we are going to use this json for the data:


[
  {
    "id": 717089,
    "coordinate": {
      "latitude": 13.000328929247145,
      "longitude": 77.66136940063981
    },
    "heading": 79.76481247942495
  },
  {
    "id": 138923,
    "coordinate": {
      "latitude": 13.004034501539103,
      "longitude": 77.66658092598375
    },
    "heading": 86.68768525531794
  },
  {
    "id": 845561,
    "coordinate": {
      "latitude": 13.008143569008332,
      "longitude": 77.66554754164146
    },
    "heading": 55.94253168584245
  },
  {
    "id": 552739,
    "coordinate": {
      "latitude": 12.998529266659475,
      "longitude": 77.65874105811088
    },
    "heading": 158.58042356238863
  }
]

Here the ‘heading’ parameter tells us about the direction of a cab. The value for heading is passed into a parameter called ‘rotation’ while plotting on the google map.


mMap!!.addMarker(
    MarkerOptions()
        .position(LatLng(latitude, longitude))      .icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_marker))
        .anchor(0.5f, 0.5f)
        .rotation(heading.toFloat())
        .flat(true)
)

Here, we have passed the value of heading to rotation.

If you have to calculate this value on runtime (without a json), we can calculate it using the latitude and longitudes. By using the FusedLocationServices, the application can get the location updates. Store the latitude longitude at a certain time and once the user moves, the application will get the updated lat-long.

This is how we calculate the direction, once we get the source/destination latitude and longitude.


fun calculateBearing(lat1: Double, lng1: Double, lat2: Double, lng2: Double): Float {
        val sourceLatLng = LatLng(lat1, lng1)
        val destinationLatLng = LatLng(lat2, lng2)
        return SphericalUtil.computeHeading(sourceLatLng,    destinationLatLng).toFloat()
}

This function calculates the heading direction. And we can call this using the latitude and longitude of the source and destination.


Val bearing  = calculateBearing(lat1, lng1, lat2, lng2)
marker.rotation(bearing)

This will calculate the direction when we move from a source to a destination.

Please try this and let me know in comments what challenges you faced or if you found a better way to achieve this. Happy coding!!

The full source code can be found here https://github.com/shree-vastava/CabDirection


May the source be with you


 
 
 

Comments


bottom of page