Looking Mapbox js alternative "icon-allow-overlap": true, "text-allow-overlap": false in react-map-gl

[singhamritpal49]

I am having an issue with react-map-gl that is not displaying icons and text ( see attached images) properly (overlapping). I found some old code that I used in Mapbox js, which displayed everything correctly. Now I am using react but cannot find something useful.

map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}",
"text-field": "{title}",
"icon-allow-overlap": true,
"text-allow-overlap": false,}
})

[Pessimistress]

Layer

[singhamritpal49]

I looked at Layer documentation but did not find any property that is related to icon-allow-overlap": true, "text-allow-overlap.
Are these built into the Layer component?

[Pessimistress]

It is just a wrapper of Mapbox GL JS’s layer descriptor. As the documentation states:

The props provided to this component should be conforming to the Mapbox layer specification.

[eylonshm]

Hey, did you succeed ?
I'm trying to implement icon-allow-overlap and have some problems with it.
How did you implement icon-allow-overlap, where did you add this code-line?
Thank you :)

[singhamritpal49]

In order to get it working, I had to use Layer instead of markers (Source and Layer),
I looked through these:
https://visgl.github.io/react-map-gl/docs/api-reference/source
https://visgl.github.io/react-map-gl/docs/api-reference/layer

In Layer, you use icon-allow-overlap": true, "text-allow-overlap properties

Let me know if that helped