Creating a Customized PopOver for MapView

Meghana

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.

about the author

Meghana

  1. Zangror

    April 30, 2011

    Hello TechJini!

    I know that is an old post, but your tutorial interested me very well!

    Unfortunately, I don’t understand all… Could it be possible to have a project archive from this Tutorial?
    Thanks a lot!

  2. Coleman Novara

    June 26, 2012

    paranormal activity 3 is just as crap as the others. Need better actors.

  3. red bottom shoes for men

    July 28, 2012

    cristian shoes will be a Danish sneakers famous label exactly where heels delivers included polished, The fall season Stockpile but Clean Set taken from Bergdorf Goodman’s excellent louboutin men shoes recovery

  4. customers

    June 30, 2013

    Its like you read my mind! You seem to know so much about this, like you wrote the book in it or something. I think that you can do with some pics to drive the message home a bit, but other than that, this is great blog. An excellent read. I’ll certainly be back.