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:

Would greatly appreciate any help.

Thanks in advance!

Magnitogorsk

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 – Anticatalyst

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 – Magnitogorsk

@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. – Frisbie

Although this is an old question, you may want to take a look at my project on GitHub: github.com/antoniocarlon/richmaps – Volpe

#40880972 see this please – Turbulence

Answer 1

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.

Bethesda

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. – Frisbie

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 ;) – Bethesda

Yep, I found one, in case you're curious: #22235737 – Frisbie

Answer 2

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

Resonant

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 – Magnitogorsk

@SheikhAman Exactly that. I would go with GroundOverlay here because it has this simple setImage(...) method. – Seng

And for that I'll have to build multiple images! :-/ – Magnitogorsk

@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. – Seng