Overlapping Layer Events

const layers = [
  { data: layer1, color: 'red', hoverCursor: 'help' },
  { data: layer2, color: 'green', hoverCursor: '' },
  { data: layer3, color: 'blue', hoverCursor: 'not-allowed' },
];

<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class="relative w-full aspect-[9/16] max-h-[70vh] sm:max-h-full sm:aspect-video"
  standardControls
>
  {#each layers as { data, color, hoverCursor }, i}
    <GeoJson id="layer{i + 1}" data={{ type: 'FeatureCollection', features: data }} generateId>
      <CircleLayer
        {eventsIfTopMost}
        manageHoverState
        {hoverCursor}
        paint={{
          'circle-color': color,
          'circle-radius': ['get', 'radius'],
          'circle-opacity': hoverStateFilter(1.0, 0.5),
        }}
        on:click={(e) => {
          lastEvent[i] = e.detail.features?.[0];
        }}
        on:mouseleave={(e) => {
          lastEvent[i] = undefined;
        }}
        on:mousemove={(e) => {
          lastEvent[i] = e.detail.features?.[0];
        }}
      >
        <Popup {openOn} {openIfTopMost} let:features>
          <div style:background={color} style:color="white">
            <p>{features.length} features from {color} layer</p>
            {#if color == 'red'}
              <p>extra padding for lowest red layer</p>
              <p>extra padding for lowest red layer</p>
            {/if}
            {#if color == 'green'}
              <p>extra padding for middle green layer</p>
            {/if}
          </div>
        </Popup>
      </CircleLayer>
    </GeoJson>
  {/each}
</MapLibre>