Android MapView Tutorial Part 2

This tutorial follows from Android MapView Tutorial Part 1. You need to complete that before starting this tutorial.

For part 2 we are going to add overlays to the Map. This continues on directly from Part 1 so open up the same project.

1. We are going to create a new Java class named HelloItemizedOverlay that implements ItemizedOverlay.

In Eclipse, right-click the package name in the Package Explorer, and select New > Class. Fill-in the Name field as HelloItemizedOverlay. For the Superclass, enter "com.google.android.maps.ItemizedOverlay". Click the checkbox for Constructors from superclass. Click Finish.

You will notice in your new class there is a constructor and two methods for you to override. We will modify them shortly.

2. First, we are going to create an arraylist of OverLayItem objects. The arraylist will contain the OverlayItem objects we want to place on the map. We will also use a Context object later so we are going to create one called mContext. Add the following to your HelloItemizedOverlay class:

private ArrayList<OverlayItem> mOverlays = new ArrayList<OverlayItem>();    
private Context mContext;

3. The HelloItemizedOverlay constructor will define the default marker for each of the OverlayItems. We want the centre of the bottom of the image to be the point at which it's attached to the map coordinates. We do this with the boundCenterBottom() method. We also assign context to mContext. Modify the constructor like so:

public HelloItemizedOverlay(Drawable defaultMarker, Context context) {
    super(boundCenterBottom(defaultMarker));
    mContext = context;
}

4. We need a method to add new OverlayItems to the ArrayList which calls populate() for the ItemizedOverlay:

public void addOverlay(OverlayItem overlay) {
    mOverlays.add(overlay);
    populate();
}

5. populate() in turn calls createItem(int). We will override this method to read from the ArrayList and return the OverlayItem from the position specified by the integer:

@Override
protected OverlayItem createItem(int i) {
  return mOverlays.get(i);
}

6. Now we override the size() method to return the current number of items in the ArrayList:

@Override
public int size() {
  return mOverlays.size();
}

7. Next override the onTap(int) callback method:

@Override
protected boolean onTap(int index) {
    OverlayItem item = mOverlays.get(index);
    CharSequence text = item.getTitle()+" "+item.getSnippet();
    Toast toast = Toast.makeText(mContext, text, Toast.LENGTH_SHORT);
    toast.show();
    return true;
}

We display a Toast message when a user taps on the overlay(You'll see the OverlayItem title and snippet defined when you create it below).

You're now done with the HelloItemizedOverlay class and can use it to add items on the map.

Creating an Overlay Item

Go back to the HelloMapView class, we will create an OverlayItem and add it to an instance of the HelloItemizedOverlay class, then add to the MapView using a GeoPoint to define its coordinates on the map.

1. Place an image for a map pin under your res/drawable folder. In my case I used an image named map_pin. Note that a shadow for the map pin is automatically generated when it is displayed on the map.

2. At the end of onCreate() method, add:

List<Overlay> mapOverlays = mapView.getOverlays();
Drawable drawable = this.getResources().getDrawable(R.drawable.map_pin);
HelloItemizedOverlay itemizedoverlay = 
new HelloItemizedOverlay(drawable, mapView.getContext());

3. Now create a GeoPoint that defines the map coordinates for the first overlay item, and pass it to a new OverlayItem:

GeoPoint point = new GeoPoint(1220000,103480000);
OverlayItem overlayitem = new OverlayItem(point, "Hey!", "I'm in Singapore!");

4. Finally we add this OverlayItem to your collection in the HelloItemizedOverlay instance, then add the HelloItemizedOverlay to the MapView:

itemizedoverlay.addOverlay(overlayitem);
mapOverlays.add(itemizedoverlay);

You are done, run it and you should be able to see a pin over Singapore, and when you tap on it a Toast message appear.

It is easy to add a new overlay item. Just add another OverlayItem before calling addOverlay method with the GeoPoint data.