Paint clicked features on Android

[renatojobal]

I am trying to paint the clicked features on the map. Something like this but when clicked and on Android: https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/

My approach was the following:

I use the onMapClickListener and queryRenderedFeatures(pixel)

The code called when onMapClickListener is the following:

      private fun highlightClickedPart(point: LatLng)  : Boolean{

        // Search for the polygon clicked

        // <----------- Convert LatLng coordinates to screen pixel and only query the rendered features.
        val pixel: PointF = mapBox.projection.toScreenLocation(point)

        val features: List<Feature> = mapBox.queryRenderedFeatures(pixel)

        val featuresToPaint = mutableListOf<Feature>()

        // Get the first feature within the list if one exist
        if (features.isNotEmpty()) {
            // Get the features to be painted
            features.forEach {singleFeature ->
                singleFeature.geometry()?.let { safeGeometry ->

                    if (singleFeature.geometry() is Polygon) {  // <----------- I filter the features in which the geometry is a Polygon
                        Timber.v("Is polygon")

                        // Ensure the feature has properties defined
                        singleFeature.properties()?.let { safeProperties ->


                            safeProperties.entrySet().forEach {entry ->


                                if(entry.key == "ref"){   // <------------ Filter features for a custom tag
                                    Timber.d("Place id: ${entry.value}")
                                    featuresToPaint.add(singleFeature)

                                }

                            }
                        }

                    }

                }


            }

           // Now paint

            // Remove layers and source in case they were added previously
            this.safeStyle.getLayer(MapConstants.LAYER_HIGHLIGHTED_POLYGON)?.let { this.safeStyle.removeLayer(it) }
            this.safeStyle.removeSource(MapConstants.LAYER_HIGHLIGHTED_SOURCE)


            if(featuresToPaint.isNotEmpty()){

                // <--------------- Add the features to a new source and to a new layer
                this.safeStyle.addSource(GeoJsonSource(MapConstants.LAYER_HIGHLIGHTED_SOURCE, FeatureCollection.fromFeatures(featuresToPaint)))

                this.safeStyle.addLayerBelow(
                    FillLayer(
                        MapConstants.LAYER_HIGHLIGHTED_POLYGON,
                        MapConstants.LAYER_HIGHLIGHTED_SOURCE
                    )
                        .withProperties(
                            PropertyFactory.fillColor(this.polygonHighlightColorHex) // Set the color
                        ),
                    breakpointLayerID
                )

            }



        }

       ...
    }

But apparently, the polygons are cut, or somehow queryRenderedFeatures is returning incompleted polygons:

It looks like mapbox is cutting the polygons with the border of a bigger invisible square:

Platform information:

• OS: Android 13
• Platform: Android
• Version:

 implementation 'org.maplibre.gl:android-sdk:9.5.2'
 implementation 'org.maplibre.gl:android-plugin-annotation-v9:1.0.0'

Additional context
I am not sure if this is a bug with queryRenderedFeatures or if I am missing something.
Thank you for reading this.

[renatojobal]

Also maybe is a better way to achieve this instead of creating a new layer, but I am not sure how to do that.