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():
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 useIconFactoryiconFactory=IconFactory.getInstance(FooActivity.this);Iconicon=iconFactory.fromResource(R.drawable.blue_marker);// Add the marker to the mapmapboxMap.addMarker(newMarkerViewOptions().position(newLatLng(-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(newMarkerViewOptions().position(newLatLng(-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.
Remove all markers: call the clear() method. Note that this will also remove any polylines and polygons you’ve added to your map.
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:
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 locationmarker.setPosition(newLatLng(-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 iconIconFactoryiconFactory=IconFactory.getInstance(FooActivity.this);Iconicon=iconFactory.fromResource(R.drawable.blue_marker);marker.setIcon(icon);
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.
Nice job! You’ve drawn and configured a marker, added an info window, added an event listener, and learned how to update your marker.