Use of an Image as GoogleMap

Issue

I am getting latitudes and longitudes from json and i want to show them on a map. I've done it using normal way like by using googleMap and Overlays. but actually i want it to be like below image.

I've searched and got some hints like showing map in webView and using Javascript. but don't find any tutorial or sample code.

Its a static image and will not be zoom in or out. just i wants to put location coordinates on image.

so my question is, is that possible to have an image as a gooleMap?

thanks in advance.

Solution

I suggest you to override ImageView#onDraw() and draw location points on top of an image. The main task is to translate coordinates from geo space to ImageView space. Therefore, you need to know bounds of your map image in geo space.

I made a screenshot of USA in Google Maps. Using Right click -> What is here? menu I found geo bounds of my screenshot. Also I picked some test points around the country border.

Here's a simple example. Custom ImageView:

public class MapImageView extends ImageView {
    private float latitudeTop, latitudeBottom, longitudeRight, longitudeLeft;
    private List<Float> points = new ArrayList<Float>();
    private Paint pointPaint;
    private Matrix pointMatrix = new Matrix();

    public MapImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        pointPaint = new Paint();
        pointPaint.setAntiAlias(true);
        pointPaint.setStrokeCap(Cap.ROUND);
        pointPaint.setColor(Color.RED);
        pointPaint.setStrokeWidth(8.0f);
    }

    public void setBounds(float latitudeTop, float latitudeBottom, float longitudeLeft, float longitudeRight) {
        this.latitudeTop = latitudeTop;
        this.latitudeBottom = latitudeBottom;
        this.longitudeLeft = longitudeLeft;
        this.longitudeRight = longitudeRight;
    }

    public void addPoint(float latitude, float longitude) {
        points.add(longitude);
        points.add(latitude);
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        pointMatrix.reset();
        pointMatrix.postTranslate(-longitudeLeft, -latitudeTop);
        pointMatrix.postScale(
                getMeasuredWidth()/(longitudeRight-longitudeLeft), 
                getMeasuredHeight()/(latitudeBottom-latitudeTop));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawPoints(mapPoints(), pointPaint);
    }

    private float[] mapPoints() {
        float[] pts = new float[points.size()];

        for (int i = 0; i < points.size(); i++) {
            pts[i] = points.get(i);
        }

        pointMatrix.mapPoints(pts);

        return pts;
    }
}

In your layout:

<com.example.stackoverflow.MapImageView
    android:id="@+id/img_map"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/map"
    android:scaleType="fitXY" />

Note that scaleType="fitXY" is important, because coordinates are mapped to ImageView bounds, not the map picture.

In your activity:

MapImageView mapView = (MapImageView)findViewById(R.id.img_map);
mapView.setBounds(52.734778f, 19.979026f, -130.78125f, -62.402344f);

mapView.addPoint(42.163403f,-70.839844f);
mapView.addPoint(42.163403f,-70.839844f);

Result:

Answered By - vokilam