How to add marker with different images in mapbox at runtime?

Question

I have a problem, I want to add different images on a marker at runtime.

I can basically add images in style and then I have to load the map to add a marker with a different image.

This is how I add images in mapbox right now

mapView.getMapAsync {
    it.setStyle(Style.Builder().fromUrl("mapbox://styles/{user}/{mapid}")) { style ->
        // Add the marker image to map
        ContextCompat.getDrawable(this, R.drawable.ic_user_one_round)?.let { img ->
            style.addImageAsync("key", img)
        }
}

Mapbox should be able to show images or render it at runtime on a different marker.

For example, snap chat using it right now.

Answer 1

If you want to use the older Marker API, you can simply add markers via mapView.addMarkers(). You can customize them at runtime with MarkerOptions() or MarkerViewOptions(). More on markers here.

On the other hand you could use a SymbolLayer to provide your custom markers, allowing more customization and custom logic for styling (and performance). I recommend reading this.

A third option would be using the new Annotation Plugin, that is mostly similar to using Layers directly, but with more convenience and less need to write boilerplate code. Some examples here and in the Github repo.