mapbox-gl-js
mapbox-gl-js copied to clipboard
Is there a way to overlay symbols on top of each other when collisions occur?
mapbox-gl-js version: 1.12.0
Question
In a symbol layer, when there's an icon/label collision, and when allowing overlaps, how can I get one icon/label to overlay "on top" of another?
In this screenshot you can see that instead of overlaying on top of each other (like a deck of cards IRL), all the collisions sort of blend together illegibly. How can I fix this?
![Screen Shot 2020-09-24 at 7 29 28 AM](https://user-images.githubusercontent.com/39322113/94168359-668c7880-fe42-11ea-9f95-2bfbc7f85142.png)
Links to related documentation
I read through https://docs.mapbox.com/help/troubleshooting/optimize-map-label-placement/. All the permutations of those 4 options don't help. Currently I have them all turned on:
layout: {
'text-allow-overlap': true,
'text-ignore-placement': true,
'icon-allow-overlap': true,
'icon-ignore-placement': true,
}
I was hoping to find some sort of { 'stack-collisions': true }
layout/paint option in https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol, but no luck.
Any ideas? Thanks!