ShapeSource -> OnPress() not working as expected

[akshatjain-beam]

Overview

Language Used - React-Native
mapbox version - "@react-native-mapbox-gl/maps": "^8.3.0",

I have 2 types of marker which I want to display on the map.

• Vehicle Marker
• Parking Marker

I am using Shape Source [MapboxGL.ShapeSource] to display both the types of the markers.
Also, I am using z-index property [for markers using Shape Source [MapboxGL.ShapeSource]] and zindexprops property [for layering them over the map using Symbol Layer [MapboxGL.SymbolLayer].

Scenario

When I zoom out the map [issues, with onPress() method of ShapeSource

The vehicles and the parking markers overlap. Since, I am using z-index property, the overlapping of markers, and deciding which marker to show at the top is working as expected.

For example -

• Vehicle Marker = z-index: 200
• Parking Maker = z-index: 700

Expectation - Parking Marker comes over Vehicle Marker
Reality - Parking Marker is coming over Vehicle Marker

Issue / Error

Scenario - Makers are clustered at a place due to zoom-out, and parking marker is placed over vehicle marker.
Happens - When the Parking Marker is clicked, the vehicle marker is clicked.

Efforts put in - I have tried using and changing =

1. Z-index properties
2. trying linking the both the markers using aboveLayerId, and belowLayerID
3. Tried using symbol-z-order params
4. tried using symbol-sort-key params
5. tried using hitbox param
6. tried using icon-allow-overlap, text-allow-overlap and tried toggling their values

So far none of the methods worked. Now, I am stuck how to approach the problem.

When I zoom in the map [No issue, things working as expected]

Here, when the map is zoomed-in, and each marker is separately visible. Upon clicking on each type of marker [parking and vehicle], they are working as expected [clicking means the onPress() method.

Need help in how to approach the problem now

[akshatjain-beam]

Links Used

List of few links, i was using for my investigation, research and testing -

1. https://github.com/nitaliano/react-native-mapbox-gl/blob/master/docs/ShapeSource.md
2. Conditional SymbolLayer overlaps rather than replaces #1335
3. https://docs.mapbox.com/style-spec/reference/layers/#symbol
4. https://docs.mapbox.com/mapbox-gl-js/example/add-image/
5. https://stackoverflow.com/questions/2837057/what-has-bigger-priority-opacity-or-z-index-in-browsers
6. https://stackoverflow.com/questions/25298961/mapbox-markers-not-respecting-zindex
7. https://docs.mapbox.com/style-spec/reference/layers/#layout-symbol-symbol-sort-key
8. Can't press ShapeSource on top of UserLocation rnmapbox/maps#241
9. Complicated layerID level hierarchy/overlapping management #970
10. https://stackoverflow.com/questions/59102112/mapbox-deciding-overlap-order
11. [Bug]: aboveLayerID and belowLayerID is not working  rnmapbox/maps#2990
12. Is there a z-index like property? mapbox/mapbox-gl-js#7016
13. https://docs.mapbox.com/style-spec/reference/layers/#layout-symbol-symbol-z-order
14. https://github.com/mapbox/mapbox-gl-js/issues?page=3&q=is%3Aissue+is%3Aopen
15. [Bug]: PointAnnotation onTap logic is incorrect rnmapbox/maps#3229
16. [Bug]: aboveLayerID and belowLayerID is not working  rnmapbox/maps#2990
17. https://stackoverflow.com/questions/55341462/mapbox-markers-flashing-when-using-icon-allow-overlap
18. https://docs.mapbox.com/style-spec/reference/layers/#layout-symbol-icon-ignore-placement
19. [Bug]: onPress triggers when i click outside of the Mapbox ShapeSource rnmapbox/maps#2913
20. https://github.com/rnmapbox/maps/blob/main/docs/ShapeSource.md#hitbox