[Bug] Artifact polygons when rendering GeoJsonLayer with transparency

[eemilhaa]

Description

When rendering a GeoJsonLayer with transparency, artifact polygons show up:

3D panning affects the artifacts:

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CartoLayer
• ArcGIS

Expected Behavior

The geojson should render normally. Here is the exact same data on geojson.io:

I've also tested the same data on maplibre, where the artifacts are not present either.

Steps to Reproduce

I've made a repository for a minimal reproduction. It is identical to the deckgl polygon geojson example, with changes to only include one layer, and to include the data needed to reproduce.

The code (app.jsx):

import React from 'react';
import {createRoot} from 'react-dom/client';
import {Map} from 'react-map-gl';
import maplibregl from 'maplibre-gl';
import DeckGL from '@deck.gl/react';
import {GeoJsonLayer, PolygonLayer} from '@deck.gl/layers';

// Source data GeoJSON
const DATA = './data.geojson'

const INITIAL_VIEW_STATE = {
  longitude: 24.88,
  latitude: 60.25,
  zoom: 10,
  pitch: 0,
  bearing: 0
};

const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';

export default function App({data = DATA, mapStyle = MAP_STYLE}) {
  const layers = [
    new GeoJsonLayer({
      id: 'geojson',
      data,
      opacity: 0.25,
      filled: true,
      getFillColor: f => [200, 0, 0],
    })
  ];

  return (
    <DeckGL
      layers={layers}
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
    >
      <Map reuseMaps mapLib={maplibregl} mapStyle={mapStyle} preventStyleDiffing={true} />
    </DeckGL>
  );
}

export function renderToDOM(container) {
  createRoot(container).render(<App />);
}

Environment

• Framework version: [email protected]
• Browser: Firefox 117.0, Chromium 116.0.5845.140
• OS: Arch linux / Fedora linux 38

Logs

The console shows no errors.

[felixpalmer]

Could you try and isolate which polygon in your GeoJSON is causing the issue? I.e. the polygon which isn't visible in other renderers: https://github.com/eemilhaa/geojsonlayer-bug/blob/main/data.geojson

[eemilhaa]

I managed to reproduce with just the outermost multipolygon. I updated the data accordingly.

[Pessimistress]

Thank you for sharing the data. I submitted a bug report for earcut: mapbox/earcut#162

[eemilhaa]

Thanks!