Mapbox-gl-js: Visual glitches with stacked fill-extrusion layers

[danvk]

I'm stacking several Polygon layers in a GeoJSON to render the floors of a building in Mapbox GL JS using the fill-extrusion layer type. This mostly works fine, but I frequently see some visual glitches in the form of white dots in the seam between floors of the building. These flicker in and out as you rotate/zoom the map. They appear for some but not all sides of some but not all buildings.

Curious if this is a known issue and whether there's a workaround. Here's all the data you need for a repro. I'm on Mapbox GL JS 0.52 and Mac OS X 10.13.6 with Chrome 71.0.3578.98, but I've seen this across a couple of devices.

• mapbox studio repro
• Gist of GeoJSON data

Style:

{
  "fillExtrusionPaint": {
    "fill-extrusion-base": {
      "property": "min_height",
      "type": "identity"
    },
    "fill-extrusion-color": "#ffffff",
    "fill-extrusion-height": {
      "property": "height",
      "type": "identity"
    }
  }
}

mapbox-gl-js version: 0.52

browser: Chrome 71.0.3578.98 / Mac OS X 10.13.6

Steps to Trigger Behavior

1. Click this mapbox studio link
2. Right click to rotate around
3. Observe the glitchy white lines

Link to Demonstration

mapbox studio link

Expected Behavior

Actual Behavior

cc @pandananta

[FatihHyusein]

Do you have any updates on this issue?
In my case it is even worse:

[rbrundritt]

@FatihHyusein I've had your issue before, the cause of my issue is I have multiple polygons with the same surfaces. Check that you haven't added the polygons more than once.

[DannyDelott]

It seems like stacked fill-extrusion layers behave differently than stacked fill or line layers because the z-dimension.

For example, we want extrude total population (grey), then extrude adult population (green) on top of that.

We've tried to do this by:

1. creating fill-extrusion layers for total_pop and adult_pop.
2. Calling map.addLayer(totalPopLayer) first, then map.addLayer(adultPopLayer) second to visualize them on the map in the correct order.

However, this doesn't quite result in the "layer cake" viz we were going for, ie: green on top of grey. Instead they are "blended" together, and in this case the order looks reversed!

https://codesandbox.io/s/fervent-feather-uo33w

[asheemmamoowala]

@DannyDelott In your example, the fill-extrusion layers are overlapping, but not stacking. To stack them. you can use the fill-extrusion-base property.

Heres a fixed version of the layer cake you are looking for: https://codesandbox.io/s/distracted-chatelet-n90sb

[alemesa]

this example doesn't work for me it just shows the grey layer @asheemmamoowala did something change in your example?
also I'm wondering if is possible with mapbox to stack the extrusion-layer and then filter them out so they fall on top of each other, like a stacked bar chart for example but on a map context?

[asheemmamoowala]

@alemesa Not sure what happened there. Try this link: https://codesandbox.io/s/mystifying-beaver-p043s. It shows how to stack extrusions.

[alemesa]

thank you so much man this is exactly what I was looking for @asheemmamoowala 🥇