Google Maps v2 Custom Tile Provider

Question

i am developing a custom tile provider to show traffic data on Google Maps. In high zoom levels it is good for me. But polylines are overlapping at low level zoom.

My custom tile provider class is

public class PolylineTileProvider implements TileProvider {
private static final String TAG = "TileOverlay";
private final int mTileSize = 256;
private final SphericalMercatorProjection mProjection = new SphericalMercatorProjection(mTileSize);
private final int mScale = 2;
private final int mDimension = mScale * mTileSize;
private final List<PolylineOptions> polylines;

public PolylineTileProvider(List<PolylineOptions> polylines) {
    this.polylines = polylines;
}

@Override
public Tile getTile(int x, int y, int zoom) {
    Matrix matrix = new Matrix();
    float scale = ((float) Math.pow(2, zoom) * mScale);
    matrix.postScale(scale, scale);
    matrix.postTranslate(-x * mDimension, -y * mDimension);
    Bitmap bitmap = Bitmap.createBitmap(mDimension, mDimension, Bitmap.Config.ARGB_8888); //save memory on old phones
    Canvas c = new Canvas(bitmap);
    c.setMatrix(matrix);
    drawCanvasFromArray(c, scale);
    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    bitmap.compress(Bitmap.CompressFormat.PNG, 100, baos);
    return new Tile(mDimension, mDimension, baos.toByteArray());
}

private void drawCanvasFromArray(Canvas c, float scale) {

    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeCap(Paint.Cap.ROUND);
    paint.setStrokeJoin(Paint.Join.ROUND);
    paint.setShadowLayer(0, 0, 0, 0);
    paint.setAntiAlias(true);

    if (polylines != null) {
        for (int i = 0; i < polylines.size(); i++) {
            List<LatLng> route = polylines.get(i).getPoints();
            paint.setColor(polylines.get(i).getColor());
            paint.setStrokeWidth(getLineWidth(polylines.get(i).getWidth(), scale));
            Path path = new Path();
            if (route != null && route.size() > 1) {
                Point screenPt1 = mProjection.toPoint(route.get(0)); //first point
                MarkerOptions m = new MarkerOptions();
                m.position(route.get(0));
                path.moveTo((float) screenPt1.x, (float) screenPt1.y);
                for (int j = 1; j < route.size(); j++) {
                    Point screenPt2 = mProjection.toPoint(route.get(j));
                    path.lineTo((float) screenPt2.x, (float) screenPt2.y);
                }
            }
            c.drawPath(path, paint);
        }
    }
}

private float getLineWidth(float width, float scale) {
    return width / (scale);
}
}

Trafic layer is shown at Google Maps android application so good.

How can i make a similar layer. Thanks in advance.

score 0 · Answer 1 · answered Aug 07 '17 at 10:45

the reason why it gets blured, or is maybe no more seen on the screen is because you create one image that is then scaled using the matrix you provided.

instead you shoudn't use a Matrix and generate the images in the right size.

Todo so, remove you your setMatrix call on the Canvas and add the Points to the Path with the right scaled coordinates.

 x = screenPt1.x * scale - x * mDimension;
 y = screenPt1.y * scale - y * mDimension;

then you get the exact line as specified, in every zoom level.

Google Maps v2 Custom Tile Provider

1 Answers1