You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 =
Z-index properties
trying linking the both the markers using aboveLayerId, and belowLayerID
Tried using symbol-z-order params
tried using symbol-sort-key params
tried using hitbox param
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
The text was updated successfully, but these errors were encountered:
akshatjain-beam
changed the title
ShapeSource -> OnPress() not working as expectedShapeSource -> OnPress() not working as expected
Dec 15, 2023
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 usingShape Source [MapboxGL.ShapeSource]
] andzindexprops
property [for layering them over the map usingSymbol Layer [MapboxGL.SymbolLayer]
.Scenario
When I zoom out the map [issues, with
onPress()
method ofShapeSource
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 -
z-index
:200
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 =
aboveLayerId
, andbelowLayerID
symbol-z-order
paramssymbol-sort-key
paramshitbox
paramicon-allow-overlap
,text-allow-overlap
and tried toggling their valuesSo 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
The text was updated successfully, but these errors were encountered: