Google Maps v2 - draw route with different colors - Android

Question

I am building a location based android app and I want to draw a route user takes based on his speed. For example: 0-10kmh - Yellow polyline 10-20kmh - Red polyline

Now I run everything in background service and I update Map Activity;

Location Service :

if (location.getSpeed() >0 && location.getSpeed < 10) {

           yellowPolyLineArray.add(new LatLng(location.getLatitude(), location.getLongitude()));
            polylineIntent.putParcelableArrayListExtra("yellow",yellowPolyLineArray);



 }else if (location.getSpeed() >10 && location.getSpeed < 20) {

           redPolyLineArray.add(new LatLng(location.getLatitude(), location.getLongitude()));
            polylineIntent.putParcelableArrayListExtra("red",redPolyLineArray);
}

This is all being done in onLocationChangedmethod and I send array Lists to map activity everytime user moves, using a Local Broadcast receiver:

private BroadcastReceiver mDrawRouteRec = new BroadcastReceiver() {
        @Override
        public void onReceive(Context context, Intent intent) {



            //Receiver array of yellowspeed polylines
            yellowPolyline = intent.getParcelableArrayListExtra("yellow");
            if(yellowPolyline != null){

                //Implement polyline options variable and draw as user moves
                PolylineOptions polylineOptions = new PolylineOptions();
                polylineOptions.addAll(yellowPolyLine);
                polylineOptions
                        .width(5)
                        .color(Color.YELLOW);
                mMap.addPolyline(polylineOptions);
            }


          //Receiver array of red speed polylines
            redPolyline = intent.getParcelableArrayListExtra("yellow");
            if(redPolyline != null){

                //Implement polyline options variable and draw as user moves
                PolylineOptions polylineOptions = new PolylineOptions();
                polylineOptions.addAll(redPolyLine);
                polylineOptions
                        .width(5)
                        .color(Color.RED);
                mMap.addPolyline(polylineOptions);
            }

Polyline is being drawn in real time as user moves

Now this works all fine if user drives some distance at 15kmh and then some distance at 5kmh.

But if user drives at 15kmh (yellow) then some distance at 5kmh (red) and then again at 15kmh (yellow). The polyline where 2nd 15kmh section is starts not where a green polyline ended, but it starts where 1st yellow polyline ended. Resulting in a line across the map.

Picture: Screenshot

One Idea was to clear yellow line array when I start drawing red line. But is there another, more efficient solution?

Answer 1

To draw polyline with colored segments you can use method like that:

private void showPolyline(List<ColoredPoint> points) {

    if (points.size() < 2)
        return;

    int ix = 0;
    ColoredPoint currentPoint  = points.get(ix);
    int currentColor = currentPoint.color;
    List<LatLng> currentSegment = new ArrayList<>();
    currentSegment.add(currentPoint.coords);
    ix++;

    while (ix < points.size()) {
        currentPoint = points.get(ix);

        if (currentPoint.color == currentColor) {
            currentSegment.add(currentPoint.coords);
        } else {
            currentSegment.add(currentPoint.coords);
            mGoogleMap.addPolyline(new PolylineOptions()
                    .addAll(currentSegment)
                    .color(currentColor)
                    .width(20));
            currentColor = currentPoint.color;
            currentSegment.clear();
            currentSegment.add(currentPoint.coords);
        }

        ix++;
    }

    mGoogleMap.addPolyline(new PolylineOptions()
            .addAll(currentSegment)
            .color(currentColor)
            .width(20));

}

where ColoredPoint is:

class ColoredPoint {
    public LatLng coords;
    public int color;

    public ColoredPoint(LatLng coords, int color) {
        this.coords = coords;
        this.color = color;
    }
}

and mGoogleMap is GoogleMap object. For

List<ColoredPoint> sourcePoints = new ArrayList<>();
sourcePoints.add(new ColoredPoint(new LatLng(-35.27801,149.12958), Color.GREEN));
sourcePoints.add(new ColoredPoint(new LatLng(-35.28032,149.12907), Color.GREEN));
sourcePoints.add(new ColoredPoint(new LatLng(-35.28099,149.12929), Color.YELLOW));
sourcePoints.add(new ColoredPoint(new LatLng(-35.28144,149.12984), Color.YELLOW));
sourcePoints.add(new ColoredPoint(new LatLng(-35.28194,149.13003), Color.RED));
sourcePoints.add(new ColoredPoint(new LatLng(-35.28282,149.12956), Color.RED));
sourcePoints.add(new ColoredPoint(new LatLng(-35.28302,149.12881), Color.BLUE));
sourcePoints.add(new ColoredPoint(new LatLng(-35.28473,149.12836), Color.BLUE));

showPolyline(sourcePoints);

you got something like:

Also, for convert speed to color, you can use method like that:

public int speedToColor(float speed) {
    int color = Color.TRANSPARENT;
    if (speed < 5) {
        color = Color.BLUE;
    } else if (speed < 25) {
        color = Color.GREEN;
    } else if (speed < 50) {
        color = Color.YELLOW;
    } else {
        color = Color.RED;
    }
    return color;
}