search

nitaliano / react-native-mapbox-gl

A Mapbox GL react native module for creating custom maps
Other
2.16k stars 699 forks source link

`ShapeSource -> OnPress()` not working as expected #1736

Open akshatjain-beam opened 6 months ago

akshatjain-beam commented 6 months ago

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.

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 -

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 commented 6 months ago

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. https://github.com/nitaliano/react-native-mapbox-gl/issues/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. https://github.com/rnmapbox/maps/issues/241
  9. https://github.com/nitaliano/react-native-mapbox-gl/issues/970
  10. https://stackoverflow.com/questions/59102112/mapbox-deciding-overlap-order
  11. https://github.com/rnmapbox/maps/issues/2990
  12. https://github.com/mapbox/mapbox-gl-js/issues/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. https://github.com/rnmapbox/maps/issues/3229
  16. https://github.com/rnmapbox/maps/issues/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. https://github.com/rnmapbox/maps/issues/2913
  20. https://github.com/rnmapbox/maps/blob/main/docs/ShapeSource.md#hitbox