Drawing multi color PolyLines on Maps V2

Question

I am drawing a plain color PolyLine on my map the following way, and it works great:

PolylineOptions polyLine = new PolylineOptions();  
polyLine.width(5);  
polyLine.color(Color.RED);  
polyLine.geodesic(true);  
for (int i = 0; i < speed.length; i++) {  
    polyLine.add(new LatLng(lat, lng));
}

map.addPolyline(polyLine);

Now I would want to draw a polyline with different colors between different points, depending on the speed between those two points.

There doesn't seem to be an easy way of doing it.

I am referring to this question : draw polylines with different colors on v2 maps , and I can add multiple PolylineOptions one after another, but I don't think that will be an efficient approach, given I have more than 2000 points in a simple data set to draw.

Is there a better practice?

The ideal implementation would be how Nike+ app draws lines on maps:

Nike+ Screenshot from Google Play

Would greatly appreciate any help.

Thanks in advance!

were you able to find a solution? Running into the same problem with efficiency and not getting "choppy" polylines from always instantiating a new polylineoptions — M. Smith, Mar 04 '16 at 19:03
Not exactly. We dropped the idea. Just relooking at the above example I posted, I think they're using something like getPointOnScreen of MapView, and then drawing such a shape using Path or canvas or something, on top of a translucent view - not on the map itself — Aman Alam, Mar 18 '16 at 12:27
@M.Smith ground and tile overlays are really powerful. They follow zoom and tilt properly, so it looks like augmented reality. It looks really neat, I use both in my app: ground overlay for rendering an area (sort of a height map) and a custom tile overlay for the above kind of line drawing. I generate a Bitmap for each tile and then return `new Tile(w,h,bitmap.compress(PNG))`. You need tiles for lines, because they look really weird if they're on a ground overlay and the user zooms in. Tile continuity is not an issue, I just overdraw a little around the edges, the Canvas clips it for me. — TWiStErRob, Jul 27 '16 at 18:33
Although this is an old question, you may want to take a look at my project on GitHub: https://github.com/antoniocarlon/richmaps — antonio, Nov 30 '16 at 07:04
https://stackoverflow.com/questions/40880472/multi-color-polyline-in-google-map-v2-in-android/51905276#51905276 see this please — parnian, Aug 18 '18 at 04:38

score 3 · Answer 1 · answered Jul 22 '14 at 08:57

I just find a way to do that with OptionsLines, in fact, two OptionsLines. I use this function with a gpx file, that's why there ly personnal object TRKPT.

 int size = listPoints.size();
        PolylineOptions optline = new PolylineOptions();
        PolylineOptions optline2 = new PolylineOptions();
        optline.geodesic(true);
        optline.width(10);
        optline2.geodesic(true);
        optline2.width(10);
        for (int i = 0; i < size - 1; i++) {

            TRKPT pointD = listPoints.get(i);
            TRKPT pointA = listPoints.get(i + 1);
            int green = (int) ((float) 255 - (float) (i / (float) size) * (float) 255);
            int red = (int) ((float) 0 + (float) (i / (float) size) * (float) 255);

            optline.add(new LatLng(pointD.getLat(), pointD.getLon()), new LatLng(pointA.getLat(), pointA.getLon()));
            optline2.add(new LatLng(pointD.getLat(), pointD.getLon()), new LatLng(pointA.getLat(), pointA.getLon()));

            if(i%2 == 0){
                optline.color(Color.rgb(red, green, 0));
                mMap.addPolyline(optline);
                optline = new PolylineOptions();
                optline.geodesic(true);
                optline.width(10);
            }
            else{
                optline2.color(Color.rgb(red, green, 0));
                mMap.addPolyline(optline2);
                optline2 = new PolylineOptions();
                optline2.geodesic(true);
                optline2.width(10);
            }
        }

Now you have a beautiful line with gradient from green to red.

This doesn't create a real multicolor Polyline, but a whole lot of single line segments with different colors. Your points must be so close that you end up with a nice gradient. How about performance? I just added ~1000 Polylines to the map and it lags really bad on a Galaxy S5 when I scroll/zoom around. — TWiStErRob, Jul 27 '16 at 18:27
Yep, good observation. Performances are not good, but it was enought for me. It was the only way I found. If you find a better way, you're welcome ;) — Cocorico, Jul 28 '16 at 08:33
Yep, I found one, in case you're curious: http://stackoverflow.com/questions/22235237/drawing-multi-color-polylines-on-maps-v2/24882996?noredirect=1#comment64627082_22235237 — TWiStErRob, Jul 28 '16 at 09:18

score 2 · Answer 2 · answered Mar 06 '14 at 21:58

2

You can render anything you wish to a Bitmap and use GroundOverlay or TileOverlay with it.

answered Mar 06 '14 at 21:58

MaciejGórski

22,187
7
70
94

To be honest, I had never heard of these two, and upon exploring, they look quite interesting. Thanks! So you mean to say I should keep creating bitmaps with these colors and then put it on map either as a `GroundOverlay` or `TileOverlay` ? Please correct if wrong – Aman Alam Mar 07 '14 at 06:13
@SheikhAman Exactly that. I would go with `GroundOverlay` here because it has this simple `setImage(...)` method. – MaciejGórski Mar 07 '14 at 11:09
And for that I'll have to build multiple images! :-/ – Aman Alam Mar 07 '14 at 11:33
@SheikhAman Not really. I would use `Bitmap` one for a complete line. You just need to choose its size carefully, so it looks good when zoomed in. – MaciejGórski Mar 07 '14 at 22:54

Drawing multi color PolyLines on Maps V2

2 Answers2

Linked