Skip to main content

Add a marker symbol

Add a blue teardrop-shaped marker image to a style and display it on the map using a SymbolLayer.
AddOneMarkerSymbolActivity.kt
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.Point
import com.mapbox.maps.CameraOptions
import com.mapbox.maps.MapView
import com.mapbox.maps.Style
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

/**
* Add a blue teardrop-shaped marker image to a style and display it on the
* map using a SymbolLayer.
*/
class AddOneMarkerSymbolActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val mapView = MapView(this)
setContentView(mapView)

mapView.mapboxMap.also {
it.setCamera(
CameraOptions.Builder()
.center(Point.fromLngLat(LONGITUDE, LATITUDE))
.zoom(8.0)
.build()
)
}.loadStyle(
styleExtension = style(Style.STANDARD) {
// prepare blue marker from resources
+image(
BLUE_ICON_ID,
ContextCompat.getDrawable(this@AddOneMarkerSymbolActivity, R.drawable.ic_blue_marker)!!.toBitmap()
)
+geoJsonSource(SOURCE_ID) {
geometry(Point.fromLngLat(LONGITUDE, LATITUDE))
}
+symbolLayer(LAYER_ID, SOURCE_ID) {
iconImage(BLUE_ICON_ID)
iconAnchor(IconAnchor.BOTTOM)
}
}
)
}

companion object {
private const val BLUE_ICON_ID = "blue"
private const val SOURCE_ID = "source_id"
private const val LAYER_ID = "layer_id"
private const val LATITUDE = 55.665957
private const val LONGITUDE = 12.550343
}
}
Was this example helpful?