Anas Shahid Android Development: Displaying mulitiple markers on Map

Wednesday, July 3, 2013

Displaying mulitiple markers on Map

So after I had configured maps in my application by using Android Map Integration I came accross a problem. How to show multiple markers on the map? I searched on the net but was'nt quite able to find the answer. I had a number of places to point on but in the tutorials they would mark a single place. Then I came across to the solution that for displaying markers one have to extend a class named ItemizedOverlay.

Now name the new class as you want (I named it MyItemizedOverlay). Set the Superclass be ItemizedOverlay

Now put the following functions into the class.

//Create Array list of overlays. Since we are trying to mark as many places as we want
private ArrayList<OverlayItem>mOverlays = new ArrayList<OverlayItem>();

//constructor of the class.called by passing a drawable as argument.you can use any drawable by placing it in //drawable-hdpi folder.
public MyItemizedOverlay(Drawable defaultMarker) 
{ super(boundCenterBottom(defaultMarker)); }

//Creates an ovelay item
@Override
protected OverlayItem createItem(int i) 
{ return mOverlays.get(i); }
 //returns the size of array list
@Override
public int size() 
{ return mOverlays.size();}
 //if you want a dialog or toast when the user touches the marker, you can override onTap function.
//Here's the sample.I am showing a dialog
@Override
protected boolean onTap(int index)
{ OverlayItem item= mOverlays.get(index);
String title=item.getTitle();
String snippet=item.getSnippet();
AlertDialog.Builder builder= new AlertDialog.Builder(MyItemizedOverlay.this);
builder.setTitle(title);
builder.setMessage("abcdef");
builder.setNeutralButton("OK", new DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();

}
});
AlertDialog alert=builder.create();
alert.show();
return true;
}
 //and the most important function to add a marker
public void addOverlay(OverlayItem over)
{
mOverlays.add(over);
populate();
}

It will give you some errors you will have to do the necessary imports.

Now in our MainActivity Class where we import the map(See the previous post)

Declare some variables like

MapView stopmap=(MapView) findViewById(R.id.stopsmap);//My map view
MapController smcontroller; //map controller to control map operations
Drawable marker=this.getResources().getDrawable(R.drawable.pushpin); 
//get the drawable(marker)from drawble folder
List<Overlay> stopmapoverlays=stopmap.getOverlays();
MyItemizedOverlay itemizedoverlay= new MyItemizedOverlay(marker); //instance of our custom class

now define some points to show on maps
you can get the latitude and longitude of a perticular point on net easily
GeoPoint londonbridge= getpoint(24.867203, 67.082713);
GeoPoint timessquare= getpoint(24.85742,67.083174);
GeoPoint whitehouse= getpoint(24.884977,67.057178);
GeoPoint chinawall=getpoint(24.917849,67.097025);

GeoPoint sportscity=getpoint(24.9368959, 67.0759951);

getpoint(latitude,longitude) is our custom functuion that converts the latitude and longitude into location
private GeoPoint getpoint (double lat, double lon)
{
return (new GeoPoint((int)(lat*1E6), (int)(lon*1E6)));
}


We have defined the points we want to define overlayitems coresponding to these points
OverlayItem londonbridgeoverlay=new OverlayItem(londonbridge, "LondonBridge", ""));
OverlayItem chinawalloverlay=new OverlayItem(chinawall, "ChinaWall", ''));
OverlayItem whitehouseoverlay=new OverlayItem(whitehous, "WhiteHouse", ""));
OverlayItem sportscityoverlay=new OverlayItem(sportscity, "SportsCity", "");
OverlayItem timessquareoverlay=new OverlayItem(timessquare, "TimesSquare", "");

a new overlayitem constructor has 3 arguments OverlayItem(GeoPoint,title,snippet)
Geopoint is the variable we declared earlier defines the location of marker,other two are strings and can be used on tap to display the title of the point etc(if you dont wanna use these fields put an empty double quotes in each)

Now add these overlays to the itemized overlay arraylist
itemizedoverlay.addOverlay( londonbridgeoverlay);
itemizedoverlay.addOverlay(timessquareoverlay);
itemizedoverlay.addOverlay(whitehouseoverlay);
itemizedoverlay.addOverlay(sportscityoverlay);
itemizedoverlay.addOverlay(chinawalloverlay); 

Finally add these Overlays to the map and you are done:
stopmapoverlays.add(itemizedoverlay);

I have displayed many markers (around 200) on a single map using this technique, here's the snapshot of the result that i get:

View Anas Shahid's profile on LinkedIn

No comments:

Post a Comment