you're reading...
HCI, Tech

Overriding Android MapView’s Default Pan & Zoom

To enable this we first need to know about Overlay and how to use it -> here.

If we have learnt about Overlay, things become easy – all the overriding code happens in your Overlay class, keeping the MapView/MapActivity class(es) intact.


The implementation idea is similar to the GUI drag-and-drop. First, have two class members keeping track of the contact points:

private double savedTouchedX = -1;
private double savedTouchedY = -1;

The override the onTouchEvent method:

public boolean onTouchEvent(MotionEvent event, MapView mapView)
 int action = event.getAction();

    case MotionEvent.ACTION_DOWN:
        savedTouchedX = event.getX();
        savedTouchedY = event.getY();
    case MotionEvent.ACTION_MOVE:
        doPanning(event, mapView);
    case MotionEvent.ACTION_UP:
        doPanning(event, mapView);
        savedTouchedX = -1;
        savedTouchedY = -1;
 return true;

The doPanning method is implemented elsewhere:

private boolean doPanning(MotionEvent e, MapView mapView)
    if(savedTouchedX >= 0 && savedTouchedY >= 0)
        GeoPoint mapCenter = mapView.getMapCenter();
        GeoPoint panToCenter = new GeoPoint((int)(mapCenter.getLatitudeE6() + (e.getY() - savedTouchedY) * 1E5),
        (int)(mapCenter.getLongitudeE6() - (e.getX() - savedTouchedX) * 1E5));
    savedTouchedX = e.getX();
    savedTouchedY = e.getY();
    return true;


Having learnt panning, zooming is relatively easier.


where zoomLevel ranges between 1 and 21 inclusive.

For a particular example, let’s set the screen’s y axis as a ‘slider’ for zooming the map.

Display display = ((WindowManager)mapView.getContext().getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
zoomLevel -= (e.getY() - savedTouchedY) / (display.getHeight() / 5);
savedTouchedY = e.getY();

The zoomLevel is empirically adjusted, mapping from the changes of y coordinate.


About Xiang 'Anthony' Chen

Making an Impact in Your Life


No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Twitter Updates

%d bloggers like this: