Android Map View With Pan & Zoom Events

I was working an Android application, and I had an activity that contains a map in it, the map is hosted inside a MapView. The application had to show some pins over the map, the pins locations are obtained from a web service. I had to retrieve the pins locations after the user pans the map or zooms in or out.

Google didn’t provide events for panning and zooming inside MapView class, but you can extend the class and do it your self, and that’s what I did.


Listener Interface

This listener will receive three events, onPan when the user pans the map, onZoom when the user zooms in or out, onClick when the user taps on the map without panning.
Each event will pass useful parameters, which are old and new values for the top left corner, bottom right corner, center point and zoom level.

Map View Code

The new map view will inherit the MapView class, and define some useful variables:

To get touch events we’re going to override the onTouchEvent:

Here we’re checking the new coordinates with the old coordinates, if they haven’t changed then the user has tapped on the map, but if they changed then it is a panning event, we’re not going to emit the event of panning now.

To be able to find if the user has zoomed we’re going to override the dispatchDraw method, because it will be called when the user pans or zooms, so it is the place we’re going to check for events in it.

Download

The source code is licensed under the GNU Public License (GPL).

You can download the source code from here:
Project on GitHub
Source code from GitHub

5 thoughts on “Android Map View With Pan & Zoom Events

  1. Thanks for the code/information.

    I am not exactly an experienced programmer, but can accomplish some things. How ever, I have a question as to how to implement this code. I put a System.out.println inside of the listener in the ObservableMapView class and get results. However, for the life of me, I can’t figure out how to get it to run inside my class that calls ObservableMapVie and builds the actual mapview.

    Basically, I need to run some code inside that class whenever the map is dragged.

    Any insight you could offer me, would be great.

    THANKS SO MUCH,
    Steve

    1. Steve, you will have to use ObservableMapView instead of the usual MapView; if your package is called com.example.mapviewtest you will have to write this in your layout file:
      <com.example.mapviewtest.ObservableMapView ... />
      And then you can bind its events in your code by referring to it by its id and setting the map listener.

  2. Great solution! But you have a bug – if the zoom level changes, the top-left and bottom-right co-ords will also change, so when you come to calculate the new zoom level you will be passing the *new* co-ordinates in place of the old. You could use a ‘was changed’ boolean to determine whether to update the old co-ordinates.

  3. Also, if the map view goes from ‘no zoom’ to some zoom level the listener’s onZoom() method will not be called, requiring a further zoom to trigger the method.

Leave a Reply