You are on page 1of 9

Android Workshop

Presented by:
The Trinidad and Tobago Computer Society (TTCS) and the
University of the West Indies Department of Electrical and
Computer Engineering

Saturday April 24, 2010

Creating a Simple Map Application.


1. Creating a new Application
1. To start a new project named MyMap , click on File->New Project. Choose Android-
>Android Project from the list and click on “Next”

2. Fill out the details of the Project



Fill in the project details with the following values:





Project name: MyMap


This is the Eclipse Project name and the name of the directory that will contain the


project files.





Application name: My Map Application


This is the title for your application that will appear on the Android device.



Package name: com.example.android.MyMap (or your own private namespace)


This is the package namespace which follows the naming convention for packages in the


Java language



Create Activity: MyMap


This is the name for the class that will be generated for the project and will be a


subclass of Android's Activity class.





Min SDK Version: 2


This value specifies the minimum API Level required by your application.



2. Adding Map Functionality
1. Start a new project named MyMap.

2. Open the AndroidManifest.xml file and add the following as a child of the
<application> element:

<uses-library android:name="com.google.android.maps" />

3. In order to retrieve map tiles, so you must also request the INTERNET permission so that
the map application has access to the Internet. In the manifest file, add the following as a
child of the <manifest> element:




<uses-permission android:name="android.permission.INTERNET" />

4. Open the res/layout/main.xml file and add a single


com.google.android.maps.MapView as the root node:





<com.google.android.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:apiKey="0Udu-inrc1Bq158CbyTjg5rEYdWKxwcYwSMI7fQ" />

5. Open the MyMap.java file. Map capabilities can be provided by extending the
MapActivity (instead of android.app.Activity):



public class MyMap extends MapActivity {

6. You will need to include the unimplemented methods for MapActivity, which include
the isRouteDisplayed() method. This can be done by adding the following method
and overriding it :





@Override
protected boolean isRouteDisplayed() {
return false;
}
!! The unimplemented methods can also be automatically filled in using the Eclipse IDE.

7. This is all that is needed to show a map. Run the application.


2. Adding Map controls
1. The map application can now run so it’s time to add some additional functionality to it. We
will add the ability to Zoom as well as the ability to switch between the map and street views.

2. Now, a variable must be declared for the map view

private MapView mapView;

3. There is a simple zoom feature built into the MapView class, which you can summon with
setBuiltInZoomControls(boolean).

Do this at the end of the onCreate() method:


   
mapView = (MapView) findViewById(R.id.mapview);

mapView.setBuiltInZoomControls(true);

3. Now we need to add a menu that will allow the user to switch between the map and street
views. In the res->layout folder, create a file called options_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+id/satellite"
android:title="Satellite View" />
<item android:id="@+id/map"
android:title="Map View" />
</menu>

4. In MyMap.java, add a method to load the menu layout.

public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater inflater = getMenuInflater();


inflater.inflate(R.layout.options_menu, menu);
return true;
}

5. In the MyMap.java file add the following to make the menu functional:

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.satellite:
mapView.setSatellite(true);
mapView.setStreetView(false);
mapView.invalidate();
return true;

case R.id.map:
mapView.setSatellite(false);
mapView.setStreetView(true);
mapView.invalidate();
return true;
}
return false;
}

When you run the application you now you have a map, with the ability to zoom in and switch
between map and satellite views.
3. Adding Map Overlays
In order to add points to a map, you must implement the ItemizedOverlay class, which can
manage a whole set of Overlay (which are the individual items placed on the map).

1. Create a new Java class named MyMapOverlay that implements ItemizedOverlay.


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

2. First, you need an OverlayItem ArrayList, in which you'll put each of the
OverlayItem objects you want on the map.

Add this at the top of the MyMapOverlay class:

private ArrayList<OverlayItem> mOverlays = new ArrayList<OverlayItem>


();
private Context mContext;

3. Now define the MyMapOverlay constructors. The constructor must define the default
marker for each of the OverlayItems. In order for the Drawable to actually get
drawn, it must have its bounds defined. Most commonly, you want the center-point at the
bottom of the image to be the point at which it's attached to the map coordinates. This is
handled for you with the boundCenterBottom() method. Wrap this around our
defaultMarker, so the super constructor call looks like this:





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

4. In order to add new OverlayItems to the ArrayList, you need a new method:



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



Each time you add a new OverlayItem to the ArrayList, you must call populate()


for the ItemizedOverlay, which will read each of the OverlayItems and prepare


them to be drawn.
5. When the populate() method executes, it will call createItem(int) in the
ItemizedOverlay to retrieve each OverlayItem. You must override this method
to properly read from the ArrayList and return the OverlayItem from the position
specified by the given integer.
Your override method should look like this:

@Override
protected OverlayItem createItem(int i) {
// TODO Auto-generated method stub
return mOverlays.get(i);

6. You must also override the size() method to return the current number of items in the
ArrayList:

@Override
public int size() {
// TODO Auto-generated method stub
return mOverlays.size();

7. Then override the onTap(int) callback method, which will handle the event when an
item is tapped by the user:

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

You're now done with the MyMapOverlay class and can start using it to add items on the map.

Go back to the MyMap class. In the following procedure, you'll create an OverlayItem and
add it to an instance of the MyMapOverlay class, then add the MyMapOverlay to the
MapView using a GeoPoint to define its coordinates on the map.

1. First, you need the image for the map overlay. The should be an image in the res/
drawable/ directory of your project called androdmarker.png
2. At the end of your existing onCreate() method, instantiate :



List<Overlay> mapOverlays = mapView.getOverlays();
Drawable drawable = this.getResources().getDrawable
(R.drawable.androidmarker);
MyMapOverlay itemizedoverlay = new MyMapOverlay(drawable,
getBaseContext());

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



int latitude = (int) (10.6666667*1E6);
int longitude = (int) (-61.5166667*1E6);
GeoPoint point = new GeoPoint(latitude, longitude);
OverlayItem overlayitem = new OverlayItem(point, "First Point", "Port
of Spain");

4. All that's left is to add this OverlayItem to your collection in the MyMapOverlay
instance, then add the MyMapOverlay to the MapView:

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

5. Now run the application.

Portions of this tutorial are reproduced from work created and shared by the
Android Open Source Project and used according to terms described in the
Creative Commons 2.5 Attribution License.

You might also like