Implement pan, zoom and click listeners on a map view in Andoid

Untitled Document

Calling onPan() method for reload Google map tiles randomly, onZoom() method is used for zoom in and zoom out the Google map and onClick() method is used for performed action on a click .These three methods are used frequently in Google map.


Solution :


Part 1: Create the interface by the name MapViewListener and declare these three method in MapViewListener interface. These methods needs to be overridden in the class where you extends MapActivity.

import com.google.android.maps.GeoPoint;

public interface MapViewListener {

void onPan(GeoPoint oldTopLeft,
GeoPoint oldCenter,
GeoPoint oldBottomRight,
GeoPoint newTopLeft,
GeoPoint newCenter,
GeoPoint newBottomRight);

void onZoom(GeoPoint oldTopLeft,
GeoPoint oldCenter,
GeoPoint oldBottomRight,
GeoPoint newTopLeft,
GeoPoint newCenter,
GeoPoint newBottomRight,
int oldZoomLevel,
int newZoomLevel);

void onClick(GeoPoint clickedPoint);
}

So when we need these methods we only have to implements this interface in our class.

Part 2:

1. Now Create CustomizedMapView.java which extends the MapView class.
   public class CustomizedMapView extends MapView
2. Now define the constructors same as of MapView class.
   public CustomizedMapView(Context context, String apiKey) {
   super(context, apiKey);
   }

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

   public CustomizedMapView (Context context, AttributeSet attrs, int defStyle) {
   super(context, attrs, defStyle);
   }


3. Now define these data members globally, because every time screen zoom or panning its new geoPoint will get assign from previous points.
   private GeoPoint mOldTopLeft;    //It is a top left corner geoPoint of a Google map
   private GeoPoint mOldCenter;    // It is center geoPoint of a Google map
   private GeoPoint mOldBottomRight;    //It is a top right bottom geoPoint of a Google map
   private int mOldZoomLevel = -1;    //It is a zoomlevel of Google map

4. Now define MapViewListener interface reference mMapViewListener because interface object cannot be created and create setter and getter method.

   private MapViewListener mMapViewListener;

   public MapViewListener getMapViewListener() {
   return mMapViewListener;
   }

   public void setMapViewListener(MapViewListener value) {
   mMapViewListener = value;
   }

   When we create object of this class in our class and from that object we must call this setMapViewListener(Context of present class).

5. Now in CustomizedMapView class define override the onTouchEvent() method. Declare motionFlag and initialized.

   private boolean motionFlag=false; //declare it as global variable

   @override
   public boolean onTouchEvent(MotionEvent ev) {
   if (ev.getAction() == MotionEvent.ACTION_UP) {
   GeoPoint newTopLeft = this.getProjection().fromPixels(0,0);
   if (this.mMapViewListener != null
   && newTopLeft.getLatitudeE6() == mOldTopLeft.getLatitudeE6()
   && newTopLeft.getLongitudeE6() ==    mOldTopLeft.getLongitudeE6()) {
   mMapViewListener.onClick(this.getProjection().fromPixels((int) ev.getX(), (int) ev.getY()));
   }
   motionFlag = true;
   }
   return super.onTouchEvent(ev);
   }

   On touching the screen onTouchEvent() method is called but we restricted that the action will be performed only
   when you lift up your finger from the touch screen.
   Get the latitude and longitude of newTopLeft and oldTopLeft. If both latitude and longitude of newTopLeft and oldTopLeft
   are same and mMapViewListener is not null then onClick() method is called and change motionFlag value into true

6. Now in this method first get the geoPoint of newCenter, newTopLeft and newBottomRight and get the newZoomLevel, then assign
   those value in    mOldCenter, mOldTopLeft and mBottomRight if these are null.
   When latitude and longitude of newTopLeft and oldTopLeft are not same and zoom level is not changed and motionFlag
   is true then onPan() method is called.
   When oldZoomLevel and newZoomLevel are not same and motionFlag must be true then onZoom() method is called.

   @override
   protected void dispatchDraw(Canvas canvas) {
   super.dispatchDraw(canvas);
   GeoPoint newCenter = this.getMapCenter();
   GeoPoint newTopLeft = this.getProjection().fromPixels(0, 0);
   GeoPoint newBottomRight = this.getProjection().fromPixels(
   this.getWidth(), this.getHeight());
   int newZoomLevel = this.getZoomLevel();

   if (mOldCenter == null)
   mOldCenter = newCenter;

   if (mOldTopLeft == null)
   mOldTopLeft = newTopLeft;

   if (mOldBottomRight == null)
   mOldBottomRight = newBottomRight;

   if (motionFlag
   && (newTopLeft.getLatitudeE6() != mOldTopLeft.getLatitudeE6() || newTopLeft.getLongitudeE6() != mOldTopLeft.getLongitudeE6())

   && mOldZoomLevel == newZoomLevel) {
   if (this.mMapViewListener != null) {
   mMapViewListener.onPan(mOldTopLeft, mOldCenter,mOldBottomRight, newTopLeft, newCenter, newBottomRight);

   mOldBottomRight = newBottomRight;
   mOldTopLeft = newTopLeft;
   mOldCenter = newCenter;

   }
   }

   if (mOldZoomLevel == -1) {
   mOldZoomLevel = newZoomLevel;
   } else if (motionFlag && mOldZoomLevel != newZoomLevel
   && mMapViewListener != null) {
   int oldZoomLevel = mOldZoomLevel;

   mMapViewListener.onZoom(mOldTopLeft, mOldCenter, mOldBottomRight,
   newTopLeft, newCenter, newBottomRight, oldZoomLevel,
   newZoomLevel);

   mOldZoomLevel = newZoomLevel;
   mOldBottomRight = newBottomRight;
   mOldTopLeft = newTopLeft;
   mOldCenter = newCenter;

   }
   motionFlag = false;
   }

   At last change the motionFlag value and assign false.

Part 3: Now if we want to use onPan(), onZoom() and onClick() method then we have to implement MapViewListener interface and create object of CustomizedMapView class in our class .Then on object of CustomizedMapView call the setter method setMapViewListener() method and the pass the object if class to listen to the event.

public class ExampleClassForMapEvents extends MapActivity implements MapViewListener {

InteractiveMapView eventsMapView ;
--
---

public void creatMap(){
eventsMapView = new InteractiveMapView(this,"your_api_key ");
eventsMapView.setMapViewListener(ExampleClassForMapEvents.this);
eventsMapView.setLayoutParams(new LayoutParams(
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
eventsMapView.setEnabled(true);
eventsMapView.setClickable(true);
eventsMapView.setBuiltInZoomControls(true);
}
}

0 comments:

Post a Comment