How to draw a shape dynamically on map touched location in android

Question

I want to draw a shape, wherever the user touches the map, the should be drawn dynamically. I don't have any idea about drawing these shapes. How could I achieve this? Can I get this done through canvas? I am using MapFragment.

Please see the image,

Please give me any idea!! Any help is appreciated!!

Answer 1

You can do that by adding a View overlaying the map.

• have a Polyline object (initially empty) that will be your line
• handle onTouchEvent on that View
• translate x,y from events to LatLng using Projection
• add new point to Polyline

And you are done.

Note that this consumes all the events that would otherwise make map pan or zoom. You will have to have some other way to interact with map or enable consuming events using some flag.

Answer 2

1. Add a ImageView overlying on the map. You can't draw on map.
2. The ImageView should implement "OnTouchListener"

3. Add any button on map, so as to bring the ImageView to front and map will be visible on background. 4.when touched on ImageView, perform the below action

   public boolean onTouch(View v, MotionEvent event) {
   int action = event.getAction();
   Point p = new Point();
   path = new Path();
   float upX;
   float upY;
   
   switch (action) {
   case MotionEvent.ACTION_DOWN:
       laArray = "";
       lnArray = "";
       canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
       downx = event.getX();
       downy = event.getY();
       eventX = downx;
       eventY = downy;
       Log.d("", "startx" + eventX);
       p.x = (int) downx;
       p.y = (int) downy;
       LatLng latlngpoint;
       latlngpoint = map.getProjection().fromScreenLocation(p);
       break;
   case MotionEvent.ACTION_MOVE:
       upx = event.getX();
       upy = event.getY();
       canvas.drawLine(downx, downy, upx, upy, paint);
       drawable.invalidate();
       downx = upx;
       downy = upy;
       Log.d("", "Action_Move");
       Log.d("", "downx, downy: " + downx + "," + downy);
       Log.d("", "upx, upy: " + upx + "," + upy);
       p.x = (int) upx;
       p.y = (int) upy;
       LatLng latlngpoint1;
       latlngpoint1 = map.getProjection().fromScreenLocation(p);           
       break;
   case MotionEvent.ACTION_UP:
       upX = event.getX();
       upY = event.getY();
       p.x = (int) upX;
       p.y = (int) upY;
       Log.d("", "Action Up");
       canvas.drawLine(eventX, eventY, upX, upY, paint);
       LatLng latlngpoint2;
       latlngpoint2 = map.getProjection().fromScreenLocation(p);           
       drawable.invalidate();
   
       // When finger is Up, Start UserSearch.
   
       StartUserSearch(); //user defined function
       return true;
   case MotionEvent.ACTION_CANCEL:
       break;
   default:
       break;
   }
   
   return true;
   

   }

Add ImageView like this,

   <ImageView
    android:id="@+id/viewOnMap"
    style="@style/AppTheme"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    >

  </ImageView> 

so, when the draw button on map is clicked,

 ImageView drawable= (ImageView) findViewById(R.id.viewOnMap);
 drawable.setVisibility(View.VISIBLE);
 drawable.bringToFront();

Now, you should be able to draw on the imageView, but it seems that you are drawing on the map.

You can modify the code according to your requirement. Hope this will be helpfull.