mapbox-gl-js icon indicating copy to clipboard operation
mapbox-gl-js copied to clipboard

Is there a way to overlay symbols on top of each other when collisions occur?

Open windwardapps opened this issue 3 years ago • 8 comments

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

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!

windwardapps avatar Sep 24 '20 15:09 windwardapps