Android Google Maps Utils library addition

Why another polyline animation library for Android? During the research I checked a couple of available polyline animation libraries and wasn’t fully satisfied by the results. Some points I noticed:

• draws on top of map labels
• overweight library
• inaccurate on map and missing styleable lines
• jerky when panning/zooming the map
• not kotlin based [optional]

On the innovation day at my employer WeShare I took the opportunity to implement a new polyline animation library.

In general there are two methods to achieve the animation of the polyline or any other object on the map :

a) The canvas approach is by using google maps projection API to transform EPSG coordinates into display coorindates to draw an overlay layer on top of the map as canvas with pixel coordinates. An example would be the popular Trail library.

b) The native approach uses the google maps objects only and refers to EPSG coordinates. No coordinate transformation will be used.

I decided to go with option b) because it has less transformation operations and takes the full power of the Google map rendering engine wich performs really well even with many markers.

Want to read this story later? Save it in Journal.

Mathematical background for the native approach is very simple. Only the Rule of three is used. Beside that there are two methods from the SphericalUtil of the Google Maps Utils Library used computeDistanceBetween(from, to) and interpolate(from, to, fraction). In addition a normal ValueAnimator is responsable for providing the animation fraction values. There are two loops over the list of polyline bases needed even though the second loop doesn’t have to run through completely.

Disclaimer: skip the next paragrap if code tells you more than words and check instead the AnimatedPolyline class for getting the algorithm logic.

The first step is to calculate all legs lengths in meters and store them in a list. Then the total path lenght is the sum of all sections (65 m). Next step is initializing a ValueAnimator interpolating form 0 to 100. It provides fraction values of the given interpolation algorithm. With the fraction value (40.0) the current path section can be calculated by taking the total path length (65 m) mulitplied by the fraction (40.0) divided by 100. With this path section value (26 m) you can determine the polyline until the current section.

The tricky part is to find the leg where the current path section falls into. Looping over all sections (a to c) and checking if the calculated path section length is smaller as the sum of the previously checked legs will lead you to the searched leg. Then the fraction of the found leg in consideration to the full path needs to be calculated. Again here the Rule of three is yours. The path section length of the found section (26 m) substracted by the sum of all previusly passed sections (20 m) divided by the current leg (40 m) will deliver the result e.g. section fraction (0.15). Now the section(q) of the found section fragtion can be computed. Taking the location of the start(B)and end point(C) of the found leg and using the SphericalUtil.interpolate method with the section fraction value (0.15) will give the searched point (Q). It needs to be added to the list of polyline bases (green polyline). Now we have the complete polyline path for the animation step calculated. It get’s added to the map after creating the PolylineOptions.

For every fraction value that the ValueAnimator emits the steps above are getting repeated until the ValueAnimator reached the value 100.

The most important part of any library is the integration effort and the interface of the SDK. It must be easy to use. Therefore I used jitpack for distribution and made the AnimatedPolyline Object as simple as possible to use (feedback and improvement is welcomed).

Animation time and interpolation algorithm and polyline styles can be applied as well. A listener for the animation can be passed as param also. The animation start can be delayed.

For the sample app and the full/updated documentation please check the repository directly.

More from Journal

There are many Black creators doing incredible work in Tech. This collection of resources shines a light on some of us: