Your SlideShare is downloading. ×
AndroidTutorialMaps
AndroidTutorialMaps
AndroidTutorialMaps
AndroidTutorialMaps
AndroidTutorialMaps
AndroidTutorialMaps
AndroidTutorialMaps
AndroidTutorialMaps
AndroidTutorialMaps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AndroidTutorialMaps

1,225

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,225
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
40
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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.
  • 2. 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:
  • 3. 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"
  • 4. 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.
  • 5. 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:
  • 6. 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.
  • 7. 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.
  • 8. 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
  • 9. 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.

×