7

I am trying to replicate this feature of Maps in Android: Custom Map Overlay

You can see that on the map, there's a Circle depicting the range that the user has selected.

In my application, I'll also want a dragger to reside on the perimeter of the circle, which can be dragged to redefine radius.

If someone could tell me how to draw custom drawable overlays and 2D graphics over map, I can do other things on my own.

Thanks!

The full application can be reached at this link

1

3 Answers 3

18

Okay, I tried to do things on my Own, and put this code to get the above effect:

public class MarkerOverlay extends Overlay {

    Geocoder geoCoder = null;

    public MarkerOverlay() {
        super();
    }


    @Override
    public boolean onTap(GeoPoint geoPoint, MapView mapView){
        selectedLatitude = geoPoint.getLatitudeE6(); 
        selectedLongitude = geoPoint.getLongitudeE6();
        return super.onTap(geoPoint,mapView);
    }

    @Override
    public void draw(Canvas canvas, MapView mapV, boolean shadow){

        if(shadow){
            Projection projection = mapV.getProjection();
            Point pt = new Point();
            projection.toPixels(globalGeoPoint,pt);

            GeoPoint newGeos = new GeoPoint(selectedLat+(100),selectedLong); // adjust your radius accordingly
            Point pt2 = new Point();
            projection.toPixels(newGeos,pt2);
            float circleRadius = Math.abs(pt2.y-pt.y);

            Paint circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

            circlePaint.setColor(0x30000000);
            circlePaint.setStyle(Style.FILL_AND_STROKE);
            canvas.drawCircle((float)pt.x, (float)pt.y, circleRadius, circlePaint);

            circlePaint.setColor(0x99000000);
            circlePaint.setStyle(Style.STROKE);
            canvas.drawCircle((float)pt.x, (float)pt.y, circleRadius, circlePaint);

            Bitmap markerBitmap = BitmapFactory.decodeResource(getApplicationContext().getResources(),R.drawable.pin);
            canvas.drawBitmap(markerBitmap,pt.x,pt.y-markerBitmap.getHeight(),null);

            super.draw(canvas,mapV,shadow);
        }
    }
}

This let me have following effect:

Effect on Map

The calculation used may not be what you want.
Its just for demonstration purposes.
Real range/distance calculation requires the use of bearing too and has some specific formula.
Let me know if you have any questions regarding this.

10
  • what is selectedlatitude and longidute? where have you used latitude,longitude values ? please guide i want to implement same thing. Commented Apr 16, 2011 at 12:04
  • and please paste code of its usage from google map. how you call this class any help would be appreciated. Commented Apr 16, 2011 at 12:16
  • Sorry, it is the latitude/longitude the user tapped on. its a global variable which holds these values. This class is an Inner class of my MapActivity
    – Aman Aalam
    Commented Apr 17, 2011 at 8:06
  • 2
    how you call it from google map? to create this current overlay item can you please add that code also so that i can utilize it? Commented May 1, 2011 at 11:49
  • 1
    While you add the overlay, use this class. and the onDraw() method will always be called whenever Android draws map tiles (on zoom, pan etc)
    – Aman Aalam
    Commented May 1, 2011 at 17:18
1

Extend the class ItemizedOverlay to override the draw() method. The Canvas where overlays are drawn is passed to that method and you can call drawCircle or anything that's needed to make your range dragger appear.

3
  • This is a good option, but as it can be seen in the image above, I'll need to have the points where a marker currently is. first it will give me geoPoints, and I'll have to convert them into screen-pixel format (co-ordinates like x,y) i can't anything for that! :-/
    – Aman Aalam
    Commented Dec 15, 2010 at 13:26
  • Check this out: code.google.com/android/add-ons/google-apis/reference/com/…
    – ognian
    Commented Dec 15, 2010 at 14:52
  • Cool.. i got the mouse points. however, Since I am also using the onTap method to put a marker at the position where user clicks, after overriding the draw() method, onTap mechanism isn't working. Because it used to call the default draw() method for putting up markers, which I have overridden now. Any solution to this!?
    – Aman Aalam
    Commented Dec 17, 2010 at 6:11
0

An example code to draw a pushpin with the circle:

public class MapDemoActivity extends MapActivity {
    MapView mapView;
    MapController mc;
    GeoPoint p;

    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    mapView = (MapView) findViewById(R.id.mapView);
    LinearLayout zoomLayout = (LinearLayout)findViewById(R.id.zoom);  
    View zoomView = mapView.getZoomControls(); 

    zoomLayout.addView(zoomView, 
        new LinearLayout.LayoutParams(
            LayoutParams.WRAP_CONTENT, 
            LayoutParams.WRAP_CONTENT)); 
    mapView.displayZoomControls(true);

    mc = mapView.getController();        
    String coordinates[] = {"28.38", "77.12"};
    double lat = Double.parseDouble(coordinates[0]);
    double lng = Double.parseDouble(coordinates[1]);

    p = new GeoPoint(
        (int) (lat * 1E6), 
        (int) (lng * 1E6));

    mc.animateTo(p);
    mc.setZoom(8); 
    //---Add a location marker---
    MapOverlay mapOverlay = new MapOverlay();
    List<Overlay> listOfOverlays = mapView.getOverlays();
    listOfOverlays.clear();
    listOfOverlays.add(mapOverlay);        
    mapView.invalidate();
    }

    class MapOverlay extends com.google.android.maps.Overlay
{
    @Override
    public boolean draw(Canvas canvas, MapView mapView, 
    boolean shadow, long when) 
    {
        super.draw(canvas, mapView, shadow);                   

        //---translate the GeoPoint to screen pixels---
        Point screenPts = new Point();
        mapView.getProjection().toPixels(p, screenPts);
        //--------------draw circle----------------------            

        Point pt=mapView.getProjection().toPixels(p,screenPts);

        Paint circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        circlePaint.setColor(0x30000000);
        circlePaint.setStyle(Style.FILL_AND_STROKE);
        canvas.drawCircle(screenPts.x, screenPts.y, 50, circlePaint);           

        //---add the marker---
        Bitmap bmp = BitmapFactory.decodeResource(
            getResources(), R.drawable.pin);            
        canvas.drawBitmap(bmp, screenPts.x, screenPts.y-bmp.getHeight(), null);              
        super.draw(canvas,mapView,shadow);

        return true;

    }
}
@Override
protected boolean isRouteDisplayed() {
    // TODO Auto-generated method stub
    return false;
}
}
2
  • HI manaco ..while running I have some doubts in your code. for zoom functionality there is button zoom or any? Commented Feb 20, 2012 at 11:27
  • @denny I have used zoom controls in main.xml Refer this link for more on map link
    – Monica M
    Commented Feb 21, 2012 at 12:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.