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' }
    }
}
XML

Step2: Add the dependency

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

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?>?
}
Kotlin

Where travel mode can be:

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

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) }
Kotlin

The most important part here is

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

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);
Kotlin

(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()
Kotlin

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) }
        }
    }
}
Kotlin

Screen Shot
map

Developed By

Malik Dawar - malikdawar332@gmail.com

GitHub