Draw and configure markers with the Mapbox Android SDK

In the First steps with the Mapbox Android SDK guide, you created and configured a Mapbox map using MapView and MapboxMap. This guide takes your app to the next level by adding a marker to the map, customizing it, and adding interactivity.

Note: the SDK currently offers a few different ways to draw markers on your map. This guide walks through using MarkerViewOptions() to configure and customize markers. If you have a large amount of markers and don’t need the level of customization MarkerViewOptions() offers, use MarkerOptions() instead.

Draw and configure a marker

Markers describe a single location on a map. They appear on the map as an icon and can display an info window with additional information when clicked.

Add a marker

First you will need to create the marker using MarkerViewOptions() and pass it a position. You’ll then add the marker using mapboxMap.addMarker():

MarkerViewOptions markerViewOptions = new MarkerViewOptions()
        .position(new LatLng(-33.85699436, 151.21510684));

mapboxMap.addMarker(markerViewOptions);

You can customize your marker using the following properties:

  • Position: A LatLng value that describes where the location of the marker should be on the map. It is the only required property.
  • Title: A String that will be displayed when the user clicks the marker within the info window.
  • Snippet: Also a String that displays within the info window, below the title.
  • Icon: A custom icon that will replace the default icon.
  • Rotation: Change the orientation of the marker icon by passing in a float value, rotation occurs clockwise starting from the bottom.
  • Anchor: The point the icon will be placed on the given LatLng position. Default is bottom center.
  • Alpha: Sets the marker icon opacity. Defaults 1.0.
  • Visible: passing false will cause the marker to be invisible. Default is true.
  • Flat: When set to true, the marker will always have the same tilt as the map camera. Default is false.

Customize marker icon

You can specify a custom icon by using the IconFactory object and passing it to the marker. If you don’t specify an icon, your marker will be given the default marker icon.

Place your custom marker image in your project’s drawable folder and note its file name. In the example below, the custom icon’s image file is named blue_marker.png

// Create an Icon object for the marker to use
IconFactory iconFactory = IconFactory.getInstance(MainActivity.this);
Drawable iconDrawable = ContextCompat.getDrawable(MainActivity.this, R.drawable.blue_marker);
Icon icon = iconFactory.fromDrawable(iconDrawable);

// Add the marker to the map
mapboxMap.addMarker(new MarkerViewOptions()
        .position(new LatLng(-37.821648, 144.978594))
        .icon(icon));

Add an info window

The Mapbox Android SDK will automatically add an info window to any marker with a title or snippet option.

Add a title and snippet with the Sydney Opera House name and address:

mapboxMap.addMarker(new MarkerViewOptions()
        .position(new LatLng(-33.85699436, 151.21510684))
        .title("Sydney Opera House")
        .snippet("Bennelong Point, Sydney NSW 2000, Australia"));

Remove a marker

The Mapbox Android SDK comes with two methods for removing markers:

  • Remove a single marker: call the removeMarker() method with the name of the marker you would like to remove as the parameter.
mapboxMap.removeMarker(<MarkerView>);
  • Remove all markers: call the clear() method. Note that this will also remove any polylines and polygons you’ve added to your map.
mapboxMap.clear();

Marker events

The Mapbox Android SDK has built-in event listeners you can use to handle user interaction. By default, all markers come with an onMarkerClick event listener for displaying and hiding info windows. You can override this default event listener and set your own with the setOnMarkerClickListener method.

To display a toast message with the clicked marker’s title, listen for a click event with setOnMarkerClickListener, then call Toast.makeText(). To prevent displaying a toast message and an info window at the same time, return true at the end:

mapboxMap.setOnMarkerClickListener(new MapboxMap.OnMarkerClickListener() {
    @Override
    public boolean onMarkerClick(@NonNull Marker marker) {
        Toast.makeText(MainActivity.this, marker.getTitle(), Toast.LENGTH_LONG).show();
        return true;
    }
});

More customization

If you need to animate the marker icon or add additional customization options to the marker, you can extend the MarkerViewAdapter class. An example that pulses the marker icon can be found in the demo app here.

Update a marker

The Mapbox Android SDK’s marker API comes with a few handy methods for updating your markers after they’ve been added to your map. Use the marker API to update a marker’s position over time or interactively change a marker’s icon.

Change a marker location

Changing a marker’s location by calling the setPosition method. Update your marker’s position to the Sydney Harbour Bridge:

// Change the marker location
marker.setPosition(new LatLng(-37.822884, 144.981916));

Change a marker icon

A marker’s icon can be changed by calling the setIcon method. Create an icon, then call setIcon on the marker with the new icon as a parameter.

// Change the marker icon
IconFactory iconFactory = IconFactory.getInstance(MainActivity.this);
Drawable iconDrawable = ContextCompat.getDrawable(MainActivity.this, R.drawable.blue_marker);
Icon icon = iconFactory.fromDrawable(iconDrawable);

marker.setIcon(icon);

Updating MarkerView’s

Along with the updatable features listed above, if you are using MarkerView’s you can update any of it’s properties. This includes rotation, visibility, anchor, and other features.

Next steps

Nice job! You’ve drawn and configured a marker, added an info window, added an event listener, and learned how to update your marker.

Next article:

First steps with the Mapbox Android SDK

We'll walk you through installing the Mapbox Android SDK, getting a map on the screen, and placing a marker on it.

Additional questions? Ask our support team or learn more about How Mapbox Works.