In this post, I’ll show you how to add overlays to a Google map view in Android. And making it more interesting is the way we add them. For this example lets choose a rectangular shape which can be drawn by dragging the finger on a MapView component. Although this is the simpler case, I’ll show you in a later post a circle overlay example. You could use this for defining zones on the map in a more interactive way.

First let’s build a simple app with a MapView as an activity. If you already have it skip to next section.

  • get a map api key from here http://code.google.com/android/maps-api-signup.html . You’ll need the certificate used to sign the application and extract it’s MD5 fingerprint. You’ll basically need 2 api keys – one for emulator and one for device(if you test on it).

  • once you get that, you’re ready to start. Make sure you choose the Google API’s when creating a project  in order for package com.google.android to be available.
  • maps in Android uses two components which are working together: MapView and MapActivity(extension of Activity).
  • in manifest file, include permissions for internet and location. Also tell application we are using com.google.android package by inserting the following tags between application tags.
<uses-library android:name="com.google.android.maps" />
  • now create a new layout in your project’s layout folder for the MapActivity. Nothing different from the usual Activity layout just insert the following where your map should be displayed.
<com.google.android.maps.MapView
android:id="@+id/mapview" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:clickable="true"
android:apiKey="YOUR API KEY" />
  • for the code part, create a class extending MapActivity, load the layout and get a reference to the MapView. Notice the methods isRouteDisplayed() and isLocationDisplayed() which are required.

// This file is MapViewDemoActivity.java
import android.os.Bundle;
import android.view.View;

import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;

public class MapViewDemoActivity extends MapActivity
{
    private MapView mapView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.mapview);

    mapView = (MapView)findViewById(R.id.mapview);
    mapView.setBuiltInZoomControls(true); //display zoom controls
}

@Override
protected boolean isLocationDisplayed() {
    return false;
}

@Override
protected boolean isRouteDisplayed() {
    return false;
}

This is all you need for a basic application using Google Maps. Let’s get to the subject now.

Overlays on the map are represented by the Overlay class, so your overlays need to extend it. In order to draw something we need to catch touch events like pressing, dragging and releasing. This event will be processed in the overlays so at least one overlay should be present on the map.

We’ll call this EmptyOverlay – there is no drawing – it just catches press touch events to add the actual overlays.

MapOverlay class overrides draw method to draw rectangular shapes as user moves the finger. These are added to the map by EmptyOverlay and move event is handled by them.Two Geopoints are used to draw rectangles. Coordinates are converted to pixels by the map’s projection functions. This way the overlays will follow the map when zooming.

Notes

  1. if you want to restore the overlays when coming back to the map activity you should store the points for each one in a nonvolatile support. I would choose a sqlite db for this
  2. you could save them by opening a dialog view on touch up event in the MapOverlay
  3. when restoring I would declare a second constructor in the MapOverlay accepting 2 points. This way, from the MapActivity you can read all overlays from storage, initialize them and add them to the map.

Below is a example project I put together, so more words would be unnecessary. Code is pretty straightforward with some comments in key points. Don’t forget to put your own API key in the main layout.

Download Android Project Overlay Drawing

About these ads