Java – Set up a mapbox image mapbox android

In iOS, you can easily set labels for your tags by calling

[marker setCanShowCallout:YES];
[marker setRightCalloutAccessoryView:YOUR_BUTTON];

But I can’t find this feature of the Mapbox Android SDK. I now have a listener that detects touches on calloutview, but how do I set up callout images/buttons?

Marker marker = new Marker(p.getTitle(), p.getCatagoryName(), new LatLng(p.getLatitude(), p.getLongitude()));
                        marker.setMarker(getResources().getDrawable(getResources().getIdentifier(string, "drawable", getActivity().getPackageName())));
                                mMapView.addMarker(marker);

InfoWindow toolTip = marker.getToolTip(mMapView);
                        View view = toolTip.getView();
                         view.setBackgroundResource(R.drawable.callout_button); THIS DOES NOT WORK
                        view.setOnTouchListener(new View.OnTouchListener() {
                            @Override
                            public boolean onTouch(View view, MotionEvent motionEvent) {
                                Log.e(TAG, "onTouch");

return true;
                            }
                        });

You’ll have to build this functionality yourself, but it’s actually easy to implement by defining custom markup and tooltip layouts.

Start by defining your tooltip layout. Obviously, it must be RelativeLayout to position the callout image. Set your context to any activity that creates the tag. You must include the TipView at the bottom because it controls the size of the custom tooltip.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/white"
    android:id="@+id/parent_layout"
    android:padding="5dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context="com.XXX.MainActivity">

<TextView
        android:id="@+id/tooltip_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:maxEms="17"
        android:layout_gravity="left"
        android:layout_weight="1"
        android:text="@string/toolTipTitle"/>

<TextView
        android:id="@+id/tooltip_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="14sp"
        android:maxEms="17"
        android:text="@string/toolTipDescription"
        android:layout_below="@+id/tooltip_title"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/marker_about"
        android:src="@drawable/ic_action_about"
        android:layout_toEndOf="@+id/tooltip_description"
        android:layout_toRightOf="@+id/tooltip_description"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp" />

<com.mapbox.mapboxsdk.views.TipView
            android:layout_width="132dp"
            android:layout_height="10dp"/>
</RelativeLayout>

Then create a custom Marker class and override the createTooltip method to return InfoWindow: with the new layout

public class CustomMarker extends Marker {

public CustomMarker(MapView mv, String aTitle, String aDescription, LatLng aLatLng){
        super(mv, aTitle, aDescription, aLatLng);
    }

@Override
    protected InfoWindow createTooltip(MapView mv) {
        return new InfoWindow(R.layout.custom_tooltip, mv);
    }
}

This should not change any other functionality, so the code you have still works. Just change the markup to a custom class name and you’re set.

EDIT: This is the code that actually sets up CustomMarker and InfoWindow using my map. You can see that I started another activity on click, and I’ve set a custom icon for the tag, but these things aren’t necessary :

        CustomMarker m =
                new CustomMarker(mv, report.issue, report.getFormattedDateString(), latLng);
        m.setIcon(new Icon(this, Icon.Size.LARGE, "oil-well", "FF0000"));
        get the InfoWindow's view so that you can set a touch listener which will switch
        to the marker's detailed view when clicked
        final InfoWindow infoWindow = m.getToolTip(mv);
        View view = infoWindow.getView();
        view.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                make sure to choose action down or up, otherwise the intent will launch twice
                if(motionEvent.getAction() == MotionEvent.ACTION_DOWN){
                    startActivity(intent);
                    close the InfoWindow so it's not still open when coming back to the map
                    infoWindow.close();
                }
                return true;
            }
        });
        mv.addMarker(m);

I AM ALSO USING SDK 0.5.0-SNAPSHOT. I’m not sure if this works with older versions of the SDK.