Adding numbers to marker in mapbox android

Question

I'm trying to figure out how to add numbers to markers programmatically in mapbox to get the result of the image below

MARKERS WITH NUMBERS

Here is the code of the map that displays some markers

public class DepartMissionFragment extends Fragment {
    private MapView mapView;

    private static final String TAG = "DirectionsActivity";


    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        Mapbox.getInstance(requireActivity(), getString(R.string.access_token));
        View view  = inflater.inflate(R.layout.fragment_mission_depart, container, false);

        mapView = view.findViewById(R.id.mapView20);
        mapView.onCreate(savedInstanceState);
        mapView.getMapAsync(new OnMapReadyCallback() {
            @Override
            public void onMapReady(@NonNull MapboxMap mapboxMap) {

                mapboxMap.addMarker(new MarkerOptions()
                        .position(new LatLng(33.589886, -7.603869))
                        .title("marker one"));
// It is possible to use .setIcon() to get a custom icon from ressources


                mapboxMap.addMarker(new MarkerOptions()
                        .position(new LatLng(33.589790, -7.603989))
                        .title("marker two"));

                mapboxMap.addMarker(new MarkerOptions()
                        .position(new LatLng(33.589190, -7.603089))
                        .title("marker three"));


                mapboxMap.addMarker(new MarkerOptions()
                        .position(new LatLng(33.588790, -7.603289))
                        .title("etc.."));

                mapboxMap.addMarker(new MarkerOptions()
                        .position(new LatLng(33.580790, -7.603989))
                        .title("etc...."));
                mapboxMap.setStyle(getString(R.string.navigation_guidance_day), new Style.OnStyleLoaded() {

                    @Override
                    public void onStyleLoaded(@NonNull Style style) {


                    }
                });

            }
        });
        return view;
    }

    @Override
    public void onAttach(@NonNull Context context) {
        super.onAttach(context);
    }

    @Override
    public void onStart() {
        super.onStart();
        mapView.onStart();
    }

    @Override
    public void onResume() {
        super.onResume();
        mapView.onResume();
    }

    @Override
    public void onPause() {
        super.onPause();
        mapView.onPause();
    }

    @Override
    public void onStop() {
        super.onStop();
        mapView.onStop();
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mapView.onSaveInstanceState(outState);
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        mapView.onDestroy();
    }

    @Override
    public void onLowMemory() {
        super.onLowMemory();
        mapView.onLowMemory();
    }
}

I'm searching for a way to give numbers to the markers, a proper way for me would be to add custom marker from drawable.

Any other method is welcomed.

Answer 1

Rather than displaying markers with the MapboxMap#addMarker method and depending on a drawable resource, you could add icons from coordinates stored as GeoJSON features using a symbol layer, as shown in this example for the Mapbox Maps SDK for Android.

When adding each Feature representing a coordinate to the a GeoJSON object, you could add a property to each Feature's properties object containing the number to display on the marker for this coordinate. Then, in addition to the iconImage added with SymbolLayer#setProperties as shown in the example, you could also add a textField for each symbol populated by the property added to the GeoJSON. This symbol layer clustering example shows a similar workflow applied to a clustering use case. The difference between the clustering example and your implementation will mainly be that, rather than obtaining the number to display from a clustered count, you will be obtaining it from a GeoJSON property which you specified for the coordinate.

Answer 2

In v10, Marker means annotation and we can achieve multiple marker like this:

    var markerList :ArrayList<PointAnnotationOptions> = ArrayList()
            var annotationApi : AnnotationPlugin? = null
            lateinit var annotaionConfig : AnnotationConfig
            var pointAnnotationManager : PointAnnotationManager? = null
            var mapView: MapView? = null
            val layerID = "map_annotation";
            
            mapView = findViewById(R.id.map);
            mapView?.getMapboxMap()?.loadStyleUri(
                   Style.MAPBOX_STREETS,
                   object : Style.OnStyleLoaded {
                            createMarkerList()
                            annotationApi = mapView?.annotations
                            annotaionConfig = AnnotationConfig(
                                      layerId = layerID
                            )
                           pointAnnotationManager = annotationApi?.createPointAnnotationManager(annotaionConfig)!!
    
                            }
                   }
           )
        
        fun createMarkerList(){
          markerList =  ArrayList();
          for (i in 0 until 5) {
          bitmapFromDrawableRes(context!!.applicationContext,R.drawable.doctor_online
              )?.let {
            val pointAnnotationOptions: PointAnnotationOptions = 
            PointAnnotationOptions()
                .withPoint(Point.fromLngLat(latLng!!.longitude,latLng!!.latitude))
                .withIconImage(it)
                .withData(Gson().fromJson(data.toString(), JsonElement::class.java))
                .withIconSize(2.0)
           markerList.add(pointAnnotationOptions);
            } 
         }
         // For Creating marker
         pointAnnotationManager?.create(markerList)
       }

private fun convertDrawableToBitmap(sourceDrawable: Drawable?): Bitmap? {
        if (sourceDrawable == null) {
            return null
        }
        return if (sourceDrawable is BitmapDrawable) {
            sourceDrawable.bitmap
        } else {
// copying drawable object to not manipulate on the same reference
            val constantState = sourceDrawable.constantState ?: return null
            val drawable = constantState.newDrawable().mutate()
            val bitmap: Bitmap = Bitmap.createBitmap(
                drawable.intrinsicWidth, drawable.intrinsicHeight,
                Bitmap.Config.ARGB_8888
            )
            val canvas = Canvas(bitmap)
            drawable.setBounds(0, 0, canvas.width, canvas.height)
            drawable.draw(canvas)
            bitmap
        }
    }