Question

Background

I´m developing an application that displays a path over a map (Google maps and OpenStreet maps). Bellow an output example:

To draw the above path I´m using the following approach:

private void drawWithoutElevation(Canvas canvas, Projection projection){
    if(rebuildRequired)
        pathBuild();
    else{ //check if path need to be offset
        if(offsetRequired){
            path.offset(offset.x, offset.y);
        }
    }
    canvas.drawPath(path, paint); 
}

The approach above takes about 1.5ms to draw 10.000 points, which is acceptable.

However, I also want to show the path using different colors depending on the point altitude. Bellow an output example:

As I couldn’t find a way to define different color per path segment, I’ve tried the following approaches:

Approach 1

The most obvious solution, using a canvas.drawLine() between each point in the path. Example bellow:

private void drawWithElevation(Canvas canvas, Projection projection){
    for(int i=1; i<geoArrList.size(); i++){
            paint.setColor(geoArrList.get(i));
            canvas.drawLine(pPrev.x, pPrev.y, p1.x, p1.y, paint);
            pPrev.set(p1.x, p1.y);
        }
    }
}

This results in a very disappointing time of about 80ms for the same 10.000 points.

Approach 2

Segment the altitude in discrete steps, and build a list of Path objects, one per altitude segment change. Code example below:

private void drawWithElevation(Canvas canvas, Projection projection){
    if(rebuildRequired)
        pathBuild();
    for(int i=0; i<pathSegments.size(); i++){
        if(needOffset){
            pathSegments.get(i).path.offset(offsetX, offsetY);
        }
        paint.setColor(pathSegments.get(i).color);
        canvas.drawPath(pathSegments.get(i).path, paint); 
    }
}

This results in a less disappointing time of about 5ms for the same 10.000 points.

Question

Although the last approach shows a significant improvement, compared to the first one, I would like to further improve it.

Is there any other approach that could be used to draw the path with different color per segment in a more efficient way (speed and/or memory usage)?

Thanks for your time and your help.

Answer 1

Check out the source for MyTracks by google, that may lead to some inspiration