Search code examples
androidmapsballoon

How to Customize information displayed in Android Maps using Polaris Library


I'm using Polaris Library for Android Maps because it has Clustering support: Polaris with Clustering. I'm not relying on Google maps V2 cause it would leave out of my target many devices.

What I need to do, is to be able to personalize the information displayed in a balloon. When a user taps a marker, a balloon should be shown with a picture in the left, 4 lines of text in the middle and another drawable to the right.

I've exchanged a couple of mails with Polaris creator who is unable to give full support to every developer using his library for obvious reasons. He hinted me at using MapCalloutView#setCustomView but I can't figure it out.

Thank you in advance.


Solution

  • I've finally made it work.

    First of all I've extended Annotation to add additional fields:

    public class CustomAnnotation extends Annotation {
    private CustomObject cObject;
    
    public CustomObject getCustomObject() {
        return cObject;
    }
    
    public void setCustomObject(CustomObject cObject) {
        this.cObject = cObject;
    }
    
    public CustomAnnotation(GeoPoint point, String title, String snippet,CustomObject cObject) {
        super(point, title, snippet);
        this.cObject = cObject;
    }
    

    I created a layout for the CallOutView:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/content"
    android:paddingLeft="5dip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <LinearLayout
          android:id="@+id/balloon_inner_layout"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:layout_gravity="center_vertical">
      <ImageView
          android:id="@+id/image"
          android:layout_width="50dip"
          android:layout_height="50dip"
          android:contentDescription="@string/descr_image"
          android:src="@drawable/stub"
          android:scaleType="centerCrop"
          android:layout_gravity="center_vertical"/>
      <LinearLayout
              android:paddingLeft="5dip"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:orientation="vertical">
          <TextView
            android:id="@+id/price"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
          <TextView
        android:id="@+id/address"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
        <TextView
          android:id="@+id/sup"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"            
          android:visibility="gone"/>
        <TextView
                   android:layout_height="wrap_content"
                   android:layout_width="wrap_content"
                   android:id="@+id/rooms"
                   android:visibility="gone"/>      
              </LinearLayout>
       </LinearLayout>
    

    In my MapActivity class I've implemented OnAnnotationSelectionChangedListener. Dont forget to set the listener.

    In MapActivity#onAnnotationSelected I cast the annotation received to my CustomAnnotation so I can use the additional Fields, Inflate a layout into a View Object and setText to all my TextViews:

    @Override
    public void onAnnotationSelected(PolarisMapView mapView,
            MapCalloutView calloutView, int position, Annotation annotation) {
        CustomAnnotation ca = (CustomAnnotation) annotations.get(position);
        View view = (View)getLayoutInflater().inflate(R.layout.balloon_test, null);
                CustomObject object = ca.getCustomObject();
            TextView txView = (TextView)view.findViewById(R.id.field1);
            txView.setText(object.getField1());
            txView.setVisibility(View.VISIBLE);
        ...
                //set aditional data in your callout
                ...
                        calloutView.setDisclosureEnabled(true);
            calloutView.setClickable(true);
            calloutView.setCustomView(view);
            calloutView.show(mPolarisMapView, annotation.getPoint(), false);
            }
    

    That's all. Hope it helps somebody.