DrawRoute

DrawRoute wraps Google Directions API (https://developers.google.com/maps/documentation/directions/) using RxJava for Android so developers can download, parse and draw path on the map in very fast and flexible way (For now only JSON support).

The library contains two main parts.

• RouteAPI
  is responsible for sending request to Google's Direction API and handling the response
• DrawerAPI
  is responsible for drawing the path on the map

How to add (gradle)

If you are using gradle:
Step1: Add it in your root build.gradle at the end of repositories

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Step2: Add the dependency

dependencies {
      ...
	  implementation 'com.github.malikdawar:drawroute:1.0'
}

Otherwise you have to use library directly in your project.

USAGE

First we have to download the path. For this we need to provide two points (start and end) and travel mode.

interface RouteApi {
	fun getJsonDirections(
		start: LatLng,
		end: LatLng,
		mode: TravelMode,
		apiKey: String
	): Observable<String?>?
}

Where travel mode can be:

enum class TravelMode {
	DRIVING, WALKING, BICYCLING, TRANSIT
}

As you can see the above method returns Observable and our response is a String.
So far so good, we downloaded the route but what the hell - response as String, I don't want to parse it on my own.

With RxJava and some transformations nothing more easily.

Have a look:

val routeRest = RouteRest()
	routeRest.getJsonDirections(
		source, destination, //starting and ending point
		TravelMode.DRIVING, //Travel mode
		"Your api key" //google maps API from GCP, make sure google directions are enabled
	)
		?.observeOn(AndroidSchedulers.mainThread())
		?.map { s -> RouteJsonParser<Routes>().parse(s, Routes::class.java) }
		?.subscribe { r -> routeDrawer.drawPath(r) }
		

The most important part here is

 .map { 
	s -> RouteJsonParser<Routes>().parse(s, Routes::class.java) 
 }
 

For more details about 'map' operator can be find here - https://github.com/ReactiveX/RxJava/wiki/Transforming-Observables#map
In short, we parse our response to Routes object, so now we can go to draw the path on the map.

Here we have to use DrawerApi which for now provides one method:

fun drawPath(Routes routes);

(for now it forces to use Routes object).

We are almost there but before we invoke draw method we have to build our drawer using RouteDrawerBuilder.
It allows us to customize a little bit the path and the markers. It requires to get GoogleMap(!) and if we want we can provide

- marker icon
- path width
- path color
- marker alpha

This can look as

    val routeDrawer = RouteDrawer.RouteDrawerBuilder(googleMap)
            .withColor(context!!.getColorCompat(R.color.colorPrimary))
            .withWidth(13)
            .withAlpha(0.6f)
            .withMarkerIcon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ORANGE))
            .build()

And taking all together:

class YourFragment : Fragment(), OnMapReadyCallback {

    private var googleMap: GoogleMap? = null

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_map_route, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        //initialized google maps
        val mapFragment =
            childFragmentManager.findFragmentById(R.id.mapView) as SupportMapFragment
        mapFragment.getMapAsync(this)
    }

    override fun onMapReady(p0: GoogleMap?) {
        this.googleMap = p0

        val source = LatLng(31.490127, 74.316971) //starting point (LatLng)
        val destination = LatLng(31.474316, 74.316112) // ending point (LatLng)
	
		//check if map has been initialized
        googleMap?.run {
            //Called the drawRouteOnMap method to draw the polyline/route on google maps
			
            //creation of polyline with attributes
        val routeDrawer = RouteDrawer.RouteDrawerBuilder(this)
            .withColor(context!!.getColorCompat(R.color.colorPrimary))
            .withWidth(13)
            .withAlpha(0.6f)
            .withMarkerIcon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ORANGE))
            .build()

        //API call to get the path points from google
        val routeRest = RouteRest()
        routeRest.getJsonDirections(
            source, destination, //starting and ending point
            TravelMode.DRIVING, //Travel mode
            getString(R.string.google_map_api_key) //google maps API from GCP, make sure google directions are enabled
        )
            ?.observeOn(AndroidSchedulers.mainThread())
            ?.map { s -> RouteJsonParser<Routes>().parse(s, Routes::class.java) }
            ?.subscribe { r -> routeDrawer.drawPath(r) }
        }
    }
}

Screen Shot

Developed By

Malik Dawar - [email protected]

GitHub