View annotation is sliding/moving while the map is moving

[ghadeeraqraa1992]

Environment

• Android OS version: Android 11
• Devices affected: real android devices
• Maps SDK Version: 10.7

Observed behavior and steps to reproduce

I'm using view annotation in order to draw a custom pin on the map following the code below. I notice an issue which is the pins are sliding/moving while changing the map area by moving it and zooming in/out Attached is a video record

Add view annotation code

` private fun addViewAnnotation1(point: Point) {

    // Define the view annotation
    if(viewAnnotation == null) {
        viewAnnotationManager?.removeAllViewAnnotations()
        viewAnnotation = viewAnnotationManager?.addViewAnnotation(
            // Specify the layout resource id
            resId = R.layout.pin_poi_layout,

            // Set any view annotation options
            options = viewAnnotationOptions {
                geometry(point)
                offsetY(0)
                offsetX(0)
                allowOverlap(false)
                anchor(ViewAnnotationAnchor.BOTTOM)
            }
        )
    }

    val bitThumbnailImage = PlayerConstants.playlist[currentPlayingIndex].thumbnail
    viewAnnotation?.let { PinPoiLayoutBinding.bind(it).apply {
        annotationTitle.text = PlayerConstants.playlist[currentPlayingIndex].place_name
        Glide.with(this@MapBoxActivity)
            .load(bitThumbnailImage)
            .placeholder(null)
            .diskCacheStrategy(DiskCacheStrategy.ALL)
            .fitCenter()
            .into(bitThumbnail)
    }
    }
}

`

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent" xmlns:app="http://schemas.android.com/apk/res-auto">

<com.example.automotive.CustomViews.CustomTextView
    android:id="@+id/annotationTitle"
    android:includeFontPadding="false"
    android:ellipsize="end"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="84dp"
    android:maxWidth="180dp"
    android:gravity="center"
    android:textColor="#282A38"
    android:maxLines="2"
    android:textSize="20sp"
    android:fontFamily="@font/roboto_bold"
    android:paddingBottom="10dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="@id/annotationTitle" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" > <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintBaseline_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" > <com.mikhaellopez.circularimageview.CircularImageView android:id="@+id/bitThumbnail" android:layout_width="70dp" android:layout_height="70dp" app:civ_border_width="0dp" android:layout_marginStart="8dp" android:layout_marginTop="2dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" android:contentDescription="@string/background_image" /> <ImageView android:id="@+id/backgroundImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/story_pin" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" android:contentDescription="@string/background_image" /> </androidx.constraintlayout.widget.ConstraintLayout> </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Additional links and references

https://drive.google.com/file/d/1uOi09cH3S4-b-Fe2DZnuCeaRzm7udIMc/view?usp=sharing

[kiryldz]

@ghadeeraqraa1992 on Android it is impossible to fully synchronize Android view (aka view annotation in our SDK) and Mapbox MapView (using dedicated OpenGL thread). We are trying to render them at the same time to achieve better synchronization however e.g. if your overall Android system is overloaded - it could still be not perfect.

Firstly, make sure that you're using correct view annotation update mode (however it should be synchronized by default):

mapView.viewAnnotationManager.setViewAnnotationUpdateMode(ViewAnnotationUpdateMode.MAP_SYNCHRONIZED)
// you could also try out ViewAnnotationUpdateMode.MAP_FIXED_DELAY just of curiosity

Secondly, if you want perfect synchronization - you could add that image from the video as a symbol - in that case it will be rendered as part of MapView's style and will be perfectly synchronized with the map - however in that case you will need to convert your Android view to the Bitmap (described e.g. here) and it will not be interactive. You could refer to following example how to add symbol with icon to the map.

[ghadeeraqraa1992]

@kiryldz

1. I converted my view to bitmap : Passed
2. I added the bitmap to the map view following the code below

   mapView?.getMapboxMap()?.loadStyle(

        styleExtension = style(Style.MAPBOX_STREETS) {
            // prepare blue marker from resources
            +image(BLUE_ICON_ID) {
               b
            }
            +geoJsonSource(SOURCE_ID) {
                geometry(point)
            }
            +symbolLayer("LAYER_ID", SOURCE_ID) {
                iconImage(BLUE_ICON_ID)
                iconAnchor(IconAnchor.BOTTOM)
            }
        }
    )

I got this error : java.lang.IllegalStateException: An image plugin requires an image input. at com.mapbox.maps.extension.style.image.ImageExtensionImpl$Builder.build(ImageExtensionImpl.kt:147) at com.mapbox.maps.extension.style.image.ImageUtils.image(ImageExt.kt:12)

[AshrafyanAshot]

@kiryldz I need to use viewAnnotationManager as I need to do animations with my view. I have set setViewAnnotationUpdateMode(ViewAnnotationUpdateMode.MAP_SYNCHRONIZED) to my viewAnnotationManager, but it doesn’t help.... I have issue look like that https://github.com/mapbox/mapbox-maps-ios/issues/979. How I can solve that ?

[milan121]

i have same issue look like that https://github.com/mapbox/mapbox-maps-ios/issues/979. How I can solve that ?