Using Image in GoogleMap

Question

I get latitudes and longitudes from json and I want to show them on the map. I did this the usual way, for example using googleMap and Overlays. but actually I want it to be as shown below.

I searched and got some tips, for example, showing the map in webView and using Javascript. but don't find any tutorial or sample code.

This is a static image and will not increase or decrease. I just want to put the location coordinates on the image.

so my question is is it possible to have an image like gooleMap?

early.

Answer 1

I suggest you override ImageView # onDraw () and draw location points on top of the image. The main task is to transfer coordinates from geospace to ImageView space. Therefore, you need to know the boundaries of your map image in geospatial.

I took a screenshot of the USA on Google Maps. Using the Right click -> What is here? menu Right click -> What is here? , I found the geographers of my screenshot. I also selected several control points around the border of the country.

Here is 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" important because the coordinates are mapped to ImageView borders, not to the map image.

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:

Answer 2

If you want to go beyond Google Maps, I would suggest you try jVector Map, a JavaScript-based map solution using jQuery.

The following is an example code that shows the US unemployment rate:

The following source code will help you get this result:

 $(function(){ $.getJSON('/data/us-unemployment.json', function(data){ var val = 2009; statesValues = jvm.values.apply({}, jvm.values(data.states)), metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population)), metroUnemplValues = Array.prototype.concat.apply([], jvm.values(data.metro.unemployment)); $('#world-map-gdp').vectorMap({ map: 'us_aea_en', markers: data.metro.coords, series: { markers: [{ attribute: 'fill', scale: ['#FEE5D9', '#A50F15'], values: data.metro.unemployment[val], min: jvm.min(metroUnemplValues), max: jvm.max(metroUnemplValues) },{ attribute: 'r', scale: [5, 20], values: data.metro.population[val], min: jvm.min(metroPopValues), max: jvm.max(metroPopValues) }], regions: [{ scale: ['#DEEBF7', '#08519C'], attribute: 'fill', values: data.states[val], min: jvm.min(statesValues), max: jvm.max(statesValues) }] }, onMarkerLabelShow: function(event, label, index){ label.html( ''+data.metro.names[index]+''+ 'Population: '+data.metro.population[val][index]+''+ 'Unemployment rate: '+data.metro.unemployment[val][index]+'%' ); }, onRegionLabelShow: function(event, label, code){ label.html( ''+label.html()+''+ 'Unemployment rate: '+data.states[val][code]+'%' ); } }); var mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject'); $("#slider").slider({ value: val, min: 2005, max: 2009, step: 1, slide: function( event, ui ) { val = ui.value; mapObject.series.regions[0].setValues(data.states[ui.value]); mapObject.series.markers[0].setValues(data.metro.unemployment[ui.value]); mapObject.series.markers[1].setValues(data.metro.population[ui.value]); } }); }); }); 

The above code will display a map as shown below:

LINK TO JVECTORMAP

Answer 3

Isn't that a scaling issue?

Insert a flat image and then draw the dots exactly the same as usual, but scale it.

Those.

 h_scale=(real_america_width/image_america_width) v_scale=(real_america_height/image_america_height) lat = lat_from_json*h_scale) lon = lon_from_json*v_scale) 

Then just outline the markers.

Sorry, this is not a real code, but I don’t know what language you want it in. The end of the day is a fairly simple method.

Answer 4

Follow the steps below:

First duplicate the image that you want to use as the image map, and color each section. Of course, each section has a different color: D. Then create two images in your layout. Set the background of the first as the image that you want to display on the screen, and the background of the second as the color in one.

Then set the visibility of the second ImageView invisible. If you run the program at this moment, you will see the image you want to display. Then use the OnTouch listener and get the color of the pixel you touched. The color will match the color of the color image.

The following getColour method must be passed in the x and y coordinates of the touch event. R.id.img2 is an invisible image.

 private int getColour( int x, int y) { ImageView img = (ImageView) findViewById(R.id.img2); img.setDrawingCacheEnabled(true); Bitmap hotspots=Bitmap.createBitmap(img.getDrawingCache()); img.setDrawingCacheEnabled(false); return hotspots.getPixel(x, y); } 

Hope this helps you :).

Answer 5

An alternative to the android google map api is the Google Static Maps API ( https://developers.google.com/maps/documentation/staticmaps/ ). Just get a map image with ur coordinates and compare other coordinates.