Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drawing multi color PolyLines on Maps V2

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!

like image 754
Aman Alam Avatar asked Mar 06 '14 20:03

Aman Alam


1 Answers

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.

like image 116
Cocorico Avatar answered Sep 19 '22 09:09

Cocorico