Layers should be grouped to disappear together when overlapped

[divya1c]

I am looking to implement a way to have a round icon with a label at the side (layer1) and a small colored circle on the top right of the icon to indicate some property(layer2). I do not want to allow overlap of each group of icons. I chose circles to icons for my layer 2 since the color changes with a property.

Here's my code:

  map.addLayer({
    'id': 'basic-criticalinfrastructure-icon',
    'type': 'symbol',
    'interactive': true,
    'source': 'toggle-layer-markers',
    'layout': {
      "icon-image": "{category}",
      "icon-size": 0.8,
      "text-field": "Hello",
      "text-anchor": "left",
      "text-size": 10
    },
    'paint': {
      "text-translate": [12, 0]
    }
  });  
  map.addLayer({
    'id': 'basic-criticalinfrastructure-circle',
    'type': 'circle',
    'source': 'toggle-layer-markers',
    'paint': {
      'circle-color': '#ff0000',
      'circle-opacity': 1.0,
      'circle-radius': 4,
      'circle-stroke-width': 1,
      'circle-stroke-color': '#FFFFFF',
      'circle-translate': [7, -7]
    }
  });

Expected Behavior

When overlapped, the icon, text and circle disappear together.

Actual Behavior

Icon and text disappear and circles don't.

Heres what i don't want:

[ansis]

The only way to currently do this is to "bake" the status circle and icon into one image. So if you have the icons hospital, school and grocery with the statuses red and green you'd need to create hospital-red, hospital-green, school-red, school-green, grocery-red, grocery-green icons. This is far from ideal of course.

#4366 has a proposal about creating symbol layers with multiple icons. I'll close this issue as a duplicate of that one. Please let us know if you have any ideas about how we should add this functionality!

[ChrisLoer]

Hi @divya1c, unfortunately we don't support collision detection for non-symbol layers -- although I understand that in this case you'd want the circle layer to behave as if it were a symbol layer.

I chose circles to icons for my layer 2 since the color changes with a property.

Is there a reason you couldn't use the icon-color property on a circle-shaped icon to achieve something similar?

[ChrisLoer]

Oops, I missed @ansis had already commented! 😅