How to cache android.graphics.path or Bitmap when using Overlays?

Question

I'm using an Overlay to mark areas on Google Maps by drawing a shape of ten thousands of GeoPoints I get from any source. This works and looks like this:

    @Override
    public void draw(android.graphics.Canvas canvas, MapView mapView, boolean shadow)  {
        super.draw(canvas, mapView, false);

        Projection projection = mapView.getProjection();

        List<Zone> zones = ApplicationContext.getZones();

        path.rewind();

        for (Zone zone : zones) {
            paint.setDither(true);
            paint.setStyle(Style.FILL);
            paint.setAlpha(40);

            MultiPolygon multiPolygon = zone.getMultiPolygon();
            List<Polygon> polygons = multiPolygon.getPolygons();

            for (Polygon polygon : polygons) {
                for (List<Coordinate> coordinates : polygon.getCoordinates())  {
                    for (int i = 0; i < coordinates.size(); i++)  {
                        Point p = new Point();

                        projection.toPixels(new GeoPoint((int)(coordinates.get(i).getLatitude() * 1E6), (int)(coordinates.get(i).getLongitude() * 1E6)), p);

                        if (i == 0)  {
                            path.moveTo(p.x, p.y);
                        }
                        else  {
                            path.lineTo(p.x, p.y);
                        }
                    }
                }
            }
        }

        canvas.drawPath(path, paint);
    }

The problem is that this is very resource consuming. Every time one scrolls or moves the map on MapView, the path has to be calculated over and over again, because the pixel coordinates have been changed. The drawn area could become so big that the scrolling on the MapView is so slow that it is functional unusable.

My ideas are

• to somehow cache the "shape" the path generates and just redraw it when the zoom level changes on the MapView.
• to somehow draw the painting on an "on the fly"-Bitmap to use it as Overlay (maybe as ItemizedOverlay), listen for MapView scrolling and move the bitmap by the scrolled distance.

I'm not sure if there are better methods.

Any ideas how I could solve this problem? (I'm using Google Maps API 1 and can't change).

Answer 1

Before resorting to trying to figure out how to match the map's movement, there are some optimizations to your current code that will probably yield significant savings. In particular, these two lines inside your inner loop is executed the most times, but fairly expensive to execute (two memory allocations, floating point multiplies, and four method calls).

Point p = new Point();    
projection.toPixels(new GeoPoint((int)(coordinates.get(i).getLatitude() * 1E6), (int)(coordinates.get(i).getLongitude() * 1E6)), p);

First, you only ever need one Point object, so avoid allocating it in your loop. Move it to just below your path.rewind();

Second, if you pre-computed your coordinates as GeoPoints instead of computing them each time, you would save a lot of processing in your draw routine. You can also get rid of that if statement with a little work. Assuming you preconvert your list of coordinate to a list of GeoPoint, and make it available through polygon.getGeoCoordinates(), you could end up with your inner loops looking like -

for (List<GeoPoint> geoCoordinates : polygon.getGeoCoordinates())  {
    projection.toPixels(geoCoordinates.get(0),p);
    path.moveTo(p.x, p.y);  // move to first spot
    final List<GeoPoint> lineToList = geoCoordinates.sublist(1,geoCoordinates.size());  // A list of all the other points
    for(GeoPoint gp : lineToList) {
        projection.toPixels(gp, p);
        path.lineTo(p.x, p.y);
     }
}

And that will run a lot faster than what you were doing before.

Answer 2

After tinkering around in the last days I found a possible solution (and I don't think there is a better one) to not draw the path over and over again but move it to the current position.

The difficult part was to figure out how to cache the drawn shape to not calculate it over and over again. This can be done by using a Matrix. With this Matrix (I imagine this as some kind of "template") you can manipulate the points coordinates inside the path. The first time (when someone starts moving the Map) I draw the area as usual. When it tries to calculate it the second time or more, I don't redraw the shape but I manipulate the path by calculating the "delta" from the current point to the last point. I know what the current point is, because I always map the original GeoPoint (which always stays the same) to the point which results from the current projection. The "delta" needs to be set as Matrix. After that I transform the path by using this new Matrix. The result is really very fast. The scrolling of the Map is as fast as without using an Overlay.

This looks like this (this is no production code, and it cannot deal with zooming yet, but it shows the principle I use as basis for my optimizations):

public class DistrictOverlay extends Overlay {

//  private final static String TAG = DistrictOverlay.class.getSimpleName();
    private Paint paint = new Paint();
    private Path path = new Path();
    private boolean alreadyDrawn = false;
    private GeoPoint origGeoPoint;
    Point p = new Point();
    Point lastPoint = new Point();

    @Override
    public void draw(android.graphics.Canvas canvas, MapView mapView, boolean shadow) {
        super.draw(canvas, mapView, false);

        Projection projection = mapView.getProjection();

        List<Zone> zones = ApplicationContext.getZones();

        if (!alreadyDrawn) {
            path.rewind();

            for (Zone zone : zones) {
                if (!zone.getZoneId().equals(MenuContext.getChosenZoneId())) {
                    continue;
                }

                String dateString = zone.getEffectiveFrom().trim().replace("CEST", "").replace("GMT", "").replace("CET", "").replace("MESZ", "");
                if (DateUtil.isBeforeCurrentDate(dateString)) {
                    paint.setColor(Color.RED);
                } else {
                    paint.setColor(Color.GREEN);
                }

                paint.setDither(true);
                paint.setStyle(Style.FILL);
                paint.setAlpha(40);

                MultiPolygon multiPolygon = zone.getMultiPolygon();
                List<Polygon> polygons = multiPolygon.getPolygons();

                for (Polygon polygon : polygons) {
                    for (List<GeoPoint> geoPoints : polygon.getGeoPoints()) {
                        projection.toPixels(geoPoints.get(0), p);
                        path.moveTo(p.x, p.y);

                        origGeoPoint = new GeoPoint(geoPoints.get(0).getLatitudeE6(), geoPoints.get(0).getLongitudeE6());
                        lastPoint = new Point(p.x, p.y);

                        final List<GeoPoint> pathAsList = geoPoints.subList(1, geoPoints.size());

                        for (GeoPoint geoPoint : pathAsList) {
                            projection.toPixels(geoPoint, p);
                            path.lineTo(p.x, p.y);
                        }
                    }
                }
            }           
        }
        else  {
            projection.toPixels(origGeoPoint, p);       
            Matrix translateMatrix = new Matrix();
            translateMatrix.setTranslate(p.x - lastPoint.x, p.y - lastPoint.y);
            path.transform(translateMatrix);

            lastPoint = new Point(p.x, p.y);
        }

        canvas.drawPath(path, paint);

        if (!path.isEmpty()) {
            alreadyDrawn = true;
        }
    }

    @Override
    public boolean onTap(GeoPoint p, MapView mapView) {
        return true;
    }
}