Skip to content

πŸš• Simple, smooth animation for route / polylines on google maps using projections.

License

Notifications You must be signed in to change notification settings

amalChandran/trail-android

Folders and files

NameName
Last commit message
Last commit date

Latest commit

14ec733 Β· Nov 15, 2019
May 21, 2019
Nov 10, 2017
Nov 15, 2019
May 13, 2019
May 21, 2019
Nov 11, 2017
Nov 15, 2019
May 13, 2019
Dec 26, 2016
Dec 21, 2018
Dec 21, 2018
Nov 11, 2017
May 14, 2019
Nov 10, 2017

Repository files navigation

Smooth route animation over Google maps. Uses projection from Google maps to draw a route on an overlay layout. Can add multiple routes with different sytles while supporting pan and zoom of maps.

Build Status Android Arsenal License: MIT

(Gif running @ 10fps. Check the video on youtube.)


Overlay polyline

Marker and polyline

With zoom

Setup

  1. Add jitpack to the root build.gradle file of your project at the end of repositories.
allprojects {
    repositories {
      ...
      maven { url 'https://jitpack.io' }
    }
}
  1. Add the dependency
implementation 'com.github.amalChandran:trail-android:v1.51'

Usage

Place RouteOverlayView over your google map layout in xml. Make sure that the routeoverlayview covers the map completely. This is the view in which the routes will be drawn.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <fragment
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:name="com.google.android.gms.maps.SupportMapFragment"/>
  <com.amalbit.trail.RouteOverlayView
    android:id="@+id/mapOverlayView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</FrameLayout>

In your activity, create routes with three predefined styles as of now.

googleMap.setOnMapLoadedCallback(() -> {
    Route normalOverlayPolyline = new Route.Builder(mRouteOverlayView)
        .setRouteType(RouteType.PATH)
        .setCameraPosition(mMap.getCameraPosition())
        .setProjection(mMap.getProjection())
        .setLatLngs(mRoute)
        .setBottomLayerColor(Color.YELLOW)
        .setTopLayerColor(Color.RED)
        .create();

To make sure that the overlay moves along with the Google maps movement we need to add a hook from its cameramovelistener.

googleMap.setOnCameraMoveListener(() -> {
      mRouteOverlayView.onCameraMove(googleMap.getProjection(), googleMap.getCameraPosition());
    }
);

Library uses java 8 bytecode, so dont forget to enable java 8 in your application's build.gradle file.

android {
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
}

License

MIT Β© Amal Chandran

Logo

Jibin Joseph