Layer not visible above building fill

[karlfock]

mapbox-gl-js version: 3.1.0

browser: Chrome 120.0.6099.216 (Official Build) (arm64)

Steps to Trigger Behavior

1. Zoom to level 15 or greater
2. Click a building
3. The real estate boarders of the building has blue lines that sometimes are hidden by the building

Link to Demonstration

This example is hard to replicate on jsbin.com or similar, since we use an internal tiles server. I will check if it is possible to create a shareable example some how.

Expected Behavior

In production we have this behaviour with mapbox 3.1, then using an explicit url in the settings. Zoom level 17:

Actual Behavior

When leaving out style of the map settings, we get this behaviour, the border of the real estate is sometimes hidden by the fill of the building. Zoom level 17:

Demo code (will see if it is possible to create an example on jsbin or similar)

This is a working example that is as small as possible to illustrate the example, this is using Vue 3:

<template>
  <div id="map-debug" class="map-debug-container" />
</template>

<script setup>
// imports leaved out for brevity

const mapboxRgbaToRgbString = (rgba) => {
  const r = parseInt(String(rgba.r * 255));
  const g = parseInt(String(rgba.g * 255));
  const b = parseInt(String(rgba.b * 255));
  return `rgb(${r},${g},${b})`;
};

// mapboxgl.accessToken = <access_token>;

const mapSettings = {
  container: 'map-debug',
  center: [18.0726, 59.3126],
  zoom: 17,
  doubleClickZoom: false,
  crossSourceCollisions: false,
  pitchWithRotate: false,
  dragRotate: false,
  boxZoom: false,
  transformRequest: (url, resourceType) => {
    if (resourceType !== 'Tile' || !url.includes('tiles-host')) {
      return;
    }
    return {
      url: `${url}?authorization=${store.state.session?.user?.jwt}`,
      credentials: 'same-origin',
    };
  },
};

const sourceData = {
  type: 'vector',
  tiles: [
    'https://tiles-host-1.com/maps/example-source-name/{z}/{x}/{y}/tile.pbf',
    'https://tiles-host-2.com/maps/example-source-name/{z}/{x}/{y}/tile.pbf',
    'https://tiles-host-3.com/maps/example-source-name/{z}/{x}/{y}/tile.pbf',
  ],
};

const realEstateLayer = {
  id: 'real_estate',
  type: 'fill',
  source: 'example-source-name',
  'source-layer': 'real_estate',
  minzoom: 15,
  paint: {
    'fill-color': '#0080FF',
    'fill-opacity': 0.2,
    'fill-outline-color': '#000000',
  },
  filter: [
    'all',
    ['<', ['get', 'num_surrounded_areas'], 3],
    ['<', ['get', 'area_m2'], 40000],
  ],
  layout: {
    visibility: 'visible',
  },
};

onMounted(() => {
  const map = new mapboxgl.Map(mapSettings);

  map.on('load', () => {
    map.addSource('example-source-name', sourceData);
    map.addLayer(realEstateLayer);
  });

  map.on('click', (e) => {
    let boundingBox = [
      [e.point.x - 5, e.point.y - 5],
      [e.point.x + 5, e.point.y + 5],
    ];
    let highlightedFeatures = map.queryRenderedFeatures(
      boundingBox,
      {
        layers: ['real_estate'],
      },
    );

    const realEstateFeature = highlightedFeatures[0];

    const lineColor = mapboxRgbaToRgbString(
      realEstateFeature.layer.paint['fill-color'],
    );

    const highlightLayer = {
      id: 'hLayerId',
      type: 'line',
      source: realEstateFeature.layer.source,
      'source-layer': realEstateFeature.layer['source-layer'],
      layout: {
        visibility: 'visible',
      },
      paint: {
        'line-width': 6,
        'line-color': lineColor,
      },
      filter: ['in', 'id', realEstateFeature?.properties?.id],
    };

    if (map.getLayer('hLayerId')) {
      map.removeLayer('hLayerId');
    }
    map.addLayer(highlightLayer);
  });
});
</script>

[ArmandBahi]

Anything new on this ?

I tried with slot: 'top' but I still have the same problem

[astojilj]

Would map.setTerrain(null) resolve this?

[ArmandBahi]

You're absolutely right, by removing the terrain, the layers appear well above, and it's something I don't understand.

I have a similar issue with adding 3D layers when objects are underground. There seems to be some sort of hindrance to transparency when using terrain.

Without terrain :

With terrain :

I've searched everywhere in the code, but I can't find what's causing it.