mapbox-maps-android Point annotations are tinted black

Environment

Android OS version: All(?) Tested on APIs 24-31
Devices affected: All(?) Tested on multiple OnePlus and Pixel devices, Motorola Moto One (2018) and the official Android Emulator
Maps SDK Version: 10.2.0

Observed behavior and steps to reproduce

After deleting a point annotation, all point annotation created after are tinted black. The issue also occurs if the original annotation is updated with a new point, instead of deleting and recreating.

Create a point annotation on a map view
Delete the point annotation
Create a new point annotation with the same bitmap (not necessarily the same object, the issue also occurs if the bitmap is created from a drawable res each time)

My specific use case is calling the following code segment in an OnMapLongClickListener so a user can select a specific location on a map.

            // Setup annotation manager if we haven't
            if (annotationManager == null) {
                val annotationApi = mapView?.annotations
                annotationManager = annotationApi?.createPointAnnotationManager(mapView!!)
            }

            // Build marker annotation at point
            val pointAnnotationOptions: PointAnnotationOptions = PointAnnotationOptions()
                .withPoint(point)
                .withIconImage(pin)

            // Replace any existing marker with the new marker
            marker?.let {
                it.point = point
                annotationManager?.update(it)
            }
            if (marker == null) {
                marker = annotationManager?.create(pointAnnotationOptions)
            }

Expected behavior

Annotation icon should be the correct colors.

Notes / preliminary analysis

none

Additional links and references

First created annotation/Expected behavior: After deleting/creating or updating point:

Jan 10 '22 21:01 frap129

@frap129 thank you for reporting this behavior. I'm able to reproduce it on v10.2.0.

Jan 11 '22 16:01 ZiZasaurus

@frap129 after testing this on a physical device I am not able to reproduce. Are you testing this on an emulator or a physical device?

Jan 19 '22 14:01 ZiZasaurus

@ZiZasaurus Both. I am able to reproduce it on my Motorola Moto One (2018) running Android 9 and the emulator on APIs 24-31, but I am not able to reproduce it on my OnePlus Nord N10 running Android 11.

Jan 19 '22 14:01 frap129

@frap129 does the marker color return if you change zoom levels or pan around?

Jan 20 '22 15:01 ZiZasaurus

@frap129 closing this ticket but please feel free to reopen with additional questions or more information about your use case.

Jan 31 '22 16:01 ZiZasaurus

Hi @ZiZasaurus was this issue fixed, or is there a workaround? I'm seeing it often when the map is reloaded in the simulator. We are planning a release to users and I'm afraid it will happen on real devices, as @frap129 reported.

Screenshot 2022-02-18 at 12 02 40

Feb 18 '22 12:02 TiagoLira

Hi @ZiZasaurus, it's happening to me as well, both on the emulator API 30 and on a real device, Pixel 2 running Android 11

Feb 23 '22 16:02 etherlind

@TiagoLira hi, please share more details, seems your issue is not exactly the one described here. The code you use to reproduce, emulator & sdk version, does it happen on map reload only?

Feb 23 '22 16:02 yunikkk

Hi @ZiZasaurus, it's happening to me as well, both on the emulator API 30 and on a real device, Pixel 2 running Android 11

hey, how does it reproduce, are the steps described in the issue the same for you?

Feb 23 '22 16:02 yunikkk

Hey @yunikkk , in my case it's happening with a SymbolLayer. It happens on just simply loading the map and adding a geojson source and the layer:

private fun bitmapFromDrawableRes(context: Context, @DrawableRes resourceId: Int) =
        convertDrawableToBitmap(AppCompatResources.getDrawable(context, resourceId))
        
bitmapFromDrawableRes(this, R.drawable.ic_cross)?.let { bitmap ->
     style.addImage("restaurant", bitmap, true)
}
        
style.addSource(
       geoJsonSource(GEOJSON_SOURCE_ID) {
          url("asset://restaurants.geojson")
      }
  )
 style.addLayer(
       symbolLayer("unclustered-points", GEOJSON_SOURCE_ID) {
            iconAnchor(IconAnchor.BOTTOM)
            iconImage( "restaurant" )
        }
  )

The icon I'm loading is: restaurant

And loaded on the map it looks like this:

Screenshot 2022-02-23 at 17 59 43

I'm using Mapbox v10.3.0

Feb 23 '22 17:02 etherlind

Hi @yunikkk

Target SDK - v30 Emulator - Pixel 4 API 30

On onViewCreated I call loadStyleUri(Style.MAPBOX_STREETS). After the OnStyleLoaded callback I add some PointAnnotations with custom bitmaps. Nothing out of the ordinary I think. And it's not specific on reloads. Maybe 20% of the times when I load this fragment, the bug happens.

Also tried it with a drawable image and it still happens - so the image is not the issue. Apparently, light colors turn black and darker colors become transparent. Maybe some kind of color conversion is happening when rendering markers?

Thanks for looking into it, let me know if you need any extra info from my side.

if (pointManager == null) {
            pointManager = annotationApi.createPointAnnotationManager()
            pointManager!!.addClickListener(OnPointAnnotationClickListener {
                didSelectAnnotation(it)
                return@OnPointAnnotationClickListener true
            })
        }

        //add markers
        list.forEach { item ->
            addAnnotationToMap(item, pointManager!!)
        }

private fun addAnnotationToMap(item: MapItem, manager: PointAnnotationManager) {
        val context = context ?: return

        val bitmap = MapMarkerHelper.createCircleMarker(...)

        val pointAnnotationOptions: PointAnnotationOptions = PointAnnotationOptions()
                .withPoint(Point.fromLngLat(item.destination.coordinates.longitude, item.destination.coordinates.latitude))
                .withIconImage(bitmap)
            .withData(JsonPrimitive(item.destination.id))

        manager.create(pointAnnotationOptions)
    }

Mar 01 '22 13:03 TiagoLira

It also happens with annotations included in the MAPBOX_STREETS style. I've detected the following behaviour on the emulator (Pixel 5 API 30), but not on a real device (Pixel 2 Android 11):

https://user-images.githubusercontent.com/45455098/156340081-4022fe1c-7a92-4aa9-a4f3-495264b40b17.mp4

Mar 02 '22 10:03 etherlind

Have this exact issue too. any fix?

Jan 20 '23 14:01 meruiden

Hi. I am also seeing this behavior on the emulator API 33, mapbox vs 10.10.0. I couldn't reproduce it on any physical device. It should look like this: but onClick event it turns black and white: The color returns if I change zoom levels or pan around. Thanks.

Jan 23 '23 10:01 chankeiro

To get around this, add a slight zoom when you position the map view after deleting an annotation. (or decrease it if you just added it, so that you don't end up at the maximum zoom and disturb the user)

We can imagine a var zoom = 7, then if this variable == 7, then we zoom by 8, otherwise 7, to stay about the same zoom.

The zoom process makes the bitmap correct.