Wednesday, 9 May 2012

Add Google Map to your App - Part 3

On part 1 of this tutorial, we saw how to display a map on your application.
On part 2, we learn how to display markers and listen to tap event on your map.

Now let's finish this tutorial by drawing custom elements on it.

We will draw small points on Mexico City, Paris and Tokyo, then draw lines between those cities.
To do so, you have to create a custom overlay and use the Projection#toPixels function to convert your latitude and longitude coordinates to pixel coordinates.
Let's take our MapActivity and add those features:

package com.fordemobile.brightstars;

import java.util.List;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.os.Bundle;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;

public class MapsActivity extends MapActivity {

 private MapView mapView;

 @Override
 protected void onCreate(Bundle bundle) {
  super.onCreate(bundle);

  setContentView(R.layout.map);
  // retrieves the map fro mthe layout
  this.mapView = (MapView) findViewById(R.id.mapView);
  // allow zoom in and zoom out features
  this.mapView.setBuiltInZoomControls(true);

  // create coordinates with latitude and longitude in microdegrees
  // (degrees * 1E6).
  final GeoPoint mexicoGeopoint = new GeoPoint(19240000, -99120000);
  final GeoPoint parisGeopoint = new GeoPoint(48833000, 2333000);
  final GeoPoint tokyoGeopoint = new GeoPoint(35667000, 139750000);

  // setup drawing properties
  final Paint paint = new Paint();
  paint.setAntiAlias(true);
  paint.setTextSize(18);
  paint.setFakeBoldText(true);
  paint.setColor(Color.RED);

  // add this overlay to the list of overlays of the map
  final List<Overlay> mapOverlays = this.mapView.getOverlays();
  mapOverlays.add(new Overlay() {
   @Override
   public boolean draw(Canvas canvas, MapView mapView, boolean shadow,
     long when) {
    super.draw(canvas, mapView, shadow);

    // convert geo coordinates to screen pixels
    Point mexicoPoint = new Point();
    mapView.getProjection().toPixels(mexicoGeopoint, mexicoPoint);

    Point parisPoint = new Point();
    mapView.getProjection().toPixels(parisGeopoint, parisPoint);

    Point tokyoPoint = new Point();
    mapView.getProjection().toPixels(tokyoGeopoint, tokyoPoint);

    // draw small circles at the cities location
    canvas.drawCircle(mexicoPoint.x, mexicoPoint.y, 2, paint);
    canvas.drawCircle(parisPoint.x, parisPoint.y, 2, paint);
    canvas.drawCircle(tokyoPoint.x, tokyoPoint.y, 2, paint);

    // draw lines between cities
    canvas.drawLines(new float[] { mexicoPoint.x, mexicoPoint.y,
      parisPoint.x, parisPoint.y, parisPoint.x, parisPoint.y,
      tokyoPoint.x, tokyoPoint.y, tokyoPoint.x, tokyoPoint.y,
      mexicoPoint.x, mexicoPoint.y }, paint);
    
    // draw text
    canvas.drawText("Mexico City", mexicoPoint.x, mexicoPoint.y, paint);
    canvas.drawText("Paris", parisPoint.x, parisPoint.y, paint);
    canvas.drawText("Tokyo", tokyoPoint.x, tokyoPoint.y, paint);

    return true;
   }
  });
 }

 @Override
 protected boolean isRouteDisplayed() {
  return false;
 }
}

Here is the final result:

4 comments:

  1. An excellent information provided thanks for all the information i must say great efforts made by you.
    thanks a lot for all the information you provided.
    please visit our official website for further details-
    Packers And Movers Jaipur

    ReplyDelete

  2. After the grand success of Play Station 4 (PS 4), Sony has announced the next version of Play Station, the PS 5. It will obviously be more powerful and rigid than the PS 4, for better and smooth gameplay experience. If you are a hardcore gamer and love console games, you must be interested in checking out the technical details of Playstation 5 release date.

    ReplyDelete