Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

License

Notifications You must be signed in to change notification settings

droidTank/trail-android

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 99.9%
  • Kotlin 0.1%

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /