Add markers to map
This example demonstrates how to use the Mapbox Maps SDK for Android to add markers with different icons and properties to a map. It uses a geoJsonSource to define the marker data, including custom properties such as icon_key to determine the marker style. This example prepares two marker icons (RED_ICON_ID and BLUE_ICON_ID) from drawable resources and adds them to the map style using the image method.
A symbolLayer is used to display the markers, with the iconImage and iconRotate properties dynamically set using the match expression. This enables conditional styling of markers based on their icon_key value, allowing customization of both the icon image and rotation. The example also demonstrates key configuration options, such as iconAllowOverlap and iconAnchor, to control marker behavior and appearance. For further details, refer to the Mapbox Style Specification.
There are several ways to add markers, annotations, and other shapes to the map using the Maps SDK. To choose the appropriate approach for your application, read the Markers and annotations guide.
This example code is part of the Maps SDK for Android Examples App, a working Android project available on GitHub. Android developers are encouraged to run the examples app locally to interact with this example in an emulator and explore other features of the Maps SDK.
See our Run the Maps SDK for Android Examples App tutorial for step-by-step instructions.
package com.mapbox.maps.testapp.examples.markersandcallouts
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.ContextCompat
import androidx.core.graphics.drawable.toBitmap
import com.mapbox.geojson.Feature
import com.mapbox.geojson.FeatureCollection
import com.mapbox.geojson.Point
import com.mapbox.maps.Style
import com.mapbox.maps.extension.style.expressions.dsl.generated.match
import com.mapbox.maps.extension.style.image.image
import com.mapbox.maps.extension.style.layers.generated.symbolLayer
import com.mapbox.maps.extension.style.layers.properties.generated.IconAnchor
import com.mapbox.maps.extension.style.sources.generated.geoJsonSource
import com.mapbox.maps.extension.style.style
import com.mapbox.maps.testapp.R
import com.mapbox.maps.testapp.databinding.ActivityAddMarkerSymbolBinding
/**
* Example showing how to add 2 different markers based on their type
*/
class AddMarkersSymbolActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val binding = ActivityAddMarkerSymbolBinding.inflate(layoutInflater)
setContentView(binding.root)
binding.mapView.mapboxMap.loadStyle(
styleExtension = style(Style.STANDARD) {
// prepare red marker from resources
+image(
RED_ICON_ID,
ContextCompat.getDrawable(this@AddMarkersSymbolActivity, R.drawable.ic_red_marker)!!.toBitmap()
)
// prepare blue marker from resources
+image(
BLUE_ICON_ID,
ContextCompat.getDrawable(this@AddMarkersSymbolActivity, R.drawable.ic_blue_marker)!!.toBitmap()
)
// prepare source that will hold icons and add extra string property to each of it
// to identify what marker icon should be used
+geoJsonSource(SOURCE_ID) {
featureCollection(
FeatureCollection.fromFeatures(
arrayOf(
Feature.fromGeometry(
Point.fromLngLat(
12.554729,
55.70651
)
).apply {
addStringProperty(ICON_KEY, ICON_RED_PROPERTY)
},
Feature.fromGeometry(
Point.fromLngLat(
12.65147,
55.608166
)
).apply {
addStringProperty(ICON_KEY, ICON_BLUE_PROPERTY)
}
)
)
)
}
// finally prepare symbol layer with
// if get(ICON_KEY) == ICON_RED_PROPERTY
// then
// RED_MARKER
// else if get(ICON_KEY) == ICON_BLUE_PROPERTY
// BLUE_MARKER
// else
// RED_MARKER
// rotate the blue marker with 45 degrees.
+symbolLayer(LAYER_ID, SOURCE_ID) {
iconImage(
match {
get {
literal(ICON_KEY)
}
stop {
literal(ICON_RED_PROPERTY)
literal(RED_ICON_ID)
}
stop {
literal(ICON_BLUE_PROPERTY)
literal(BLUE_ICON_ID)
}
literal(RED_ICON_ID)
}
)
iconRotate(
match {
get {
literal(ICON_KEY)
}
stop {
literal(ICON_BLUE_PROPERTY)
literal(45.0)
}
literal(0.0)
}
)
iconAllowOverlap(true)
iconAnchor(IconAnchor.BOTTOM)
}
}
)
}
companion object {
private const val RED_ICON_ID = "red"
private const val BLUE_ICON_ID = "blue"
private const val SOURCE_ID = "source_id"
private const val LAYER_ID = "layer_id"
private const val ICON_KEY = "icon_key"
private const val ICON_RED_PROPERTY = "icon_red_property"
private const val ICON_BLUE_PROPERTY = "icon_blue_property"
}
}