The android developers tutorial guides to create an app that shows a map the user can use to zoom and add overlay items that mark points of interest. Suppose the user wants to display the location of the overlay items that were added,as a callout bubble, a customized layout has to be created and added as a subview of the mapView.
Creating a layout:
Create a new xml file in Layout folder,say popOver.xml.
<FrameLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/mapBubbleWrap”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” >
<LinearLayout android:orientation=”horizontal” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:id=”@+id/bubble_container”>
<FrameLayout android:layout_width=”wrap_content” android:layout_height=”wrap_content”>
<ImageView android:layout_width=”wrap_content” android:layout_height=”wrap_content”
android:id=”@+id/dialogimage” android:src=”@drawable/popup_leftpointer”/>
<ImageView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:paddingLeft=”10dip” android:paddingTop=”7dip”
android:id=”@+id/dialogimage1″/>
</FrameLayout>
<FrameLayout android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:background=”@drawable/popup_middlebg”>
<TextView android:id=”@+id/mapBubble”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:gravity=”center” android:paddingTop=”7dip”/>
</FrameLayout>
<ImageView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:id=”@+id/dialogimage2″
android:src=”@drawable/popup_right” />
</LinearLayout>
</FrameLayout>
The above xml code just contains the image of the popover that is to be displayed onTap of the overlay item. I have 3 images joined together to form a single popover image. One can use a single image and add a text displaying the location inside it. However, 2 images and a text is being displayed in popover so 3 images are being used.
Figure(A)
Figure(B)
Figure(C)
I have used the figure(B) to display the text(location), the left pointer points the top of the item marker.
Figure(D)
Figure(D) shows how the popover will look once we add the above view in the mapview.
Adding the customized view in the MapView
Then,in the MapOverLay class that extends ItemizedOverlay,in the overridden OnTap method, inflate the popOver.xml layout.i.e. protected boolean onTap(int index)
First, we have to get the location of the overlay item. This is done by the getProjection method of the MapView class.
Point point = map.getProjection().toPixels(item.getPoint(), null);
- getProjection() gets a projection for converting between screen-pixel coordinates and latitude/longitude coordinates.
- item is the overlay item (Overlay item = (Overlay) getItem(index);)
Now,we know where we have to place the customized view on the screen. But the point we have got will place the popover on the marker. We need to place it on top of the marker. To get the marker image’s height and width ,use getIntrinsicHeight and getIntrincsicWidth.
height=marker.getIntrinsicHeight();
width=marker.getIntrinsicWidth();
The customized view now has to be moved a few pixels above that corresponds to the marker height and displaced a few pixels in the x-direction that is half the marker’s width.
Set the LayoutParams of the layout that is being inflated.
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT, point.x – width/2, point.y
- height, 0);
layout.setLayoutParams(params);
Now,add the view to the mapView.
mapView.addView(layout);
The x and y parameters being set in the LayoutParams depends on the kind of image being used as the popover. The image that I have used has a pointer that has to be displayed in the middle of the marker and it won’t be set in the middle of the marker if I use the above logic of setting the x and y parameters of the LayoutParams to half the width of the marker and the full height of the marker. If I do so,the left corner of the image will be displayed on the marker as shown. So use it according to the image being used. 