DeckGL IconLayer fail to render in Angular 19 with Mapbox GL 3.x (works with MapLibre GL)

[danielkuhlwein]

mapbox-gl-js version

3.16.0 (latest release as of testing)

Browser and version

Chrome (latest), tested on macOS

Expected behavior

DeckGL's IconLayer should render icons on the map when using Mapbox GL with Angular 19, just as they do in Angular 18 with the same Mapbox GL version.

Expected:

• Red circles from ScatterplotLayer (baseline)
• Blue camera icons from IconLayer
• Both layers visible and rendering correctly

Actual behavior

When using Mapbox GL 3.x with Angular 19 and DeckGL 9.2.2:

• ✅ ScatterplotLayer renders correctly (red circles visible)
• ❌ IconLayer does NOT render (no icons appear)

No JavaScript errors are logged to the console. The layers are created successfully, but the iconssimply don't appear on the map.

Important finding: The same code works correctly with MapLibre GL 5.0.0 in Angular 19, proving this is a Mapbox GL-specific issue, not a general Angular 19 or DeckGL problem.

Link to the demonstration

https://github.com/danielkuhlwein/deckgl-iconlayer-repro

Steps to trigger the unexpected behavior

I've created three minimal reproduction projects to demonstrate the issue:

1. ❌ Broken: Angular 19 + Mapbox GL 3.16.0 + DeckGL 9.2.2
   https://github.com/danielkuhlwein/deckgl-iconlayer-repro
2. ✅ Works: Angular 18 + Mapbox GL 3.16.0 + DeckGL 9.2.2 (same Mapbox version)
   https://github.com/danielkuhlwein/deckgl-iconlayer-repro-ng18
3. ✅ Works: Angular 19 + MapLibre GL 5.0.0 + DeckGL 9.2.2 (proves Mapbox-specific)
   https://github.com/danielkuhlwein/deckgl-iconlayer-repro-maplibre

All three projects use identical DeckGL code - the only differences are the Angular version and map library (Mapbox vs MapLibre).

---

Steps to trigger the unexpected behaviour

1. Create an Angular 19 project
   npx @angular/cli@19 new test-app
2. Install Mapbox GL and DeckGL
   npm install mapbox-gl@3.16.0 @deck.gl/core@9.2.2 @deck.gl/layers@9.2.2 @deck.gl/mapbox@9.2.2
3. Create a component with Mapbox map and DeckGL IconLayer

import mapboxgl from 'mapbox-gl';
import { MapboxOverlay } from '@deck.gl/mapbox';
import { IconLayer } from '@deck.gl/layers';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v11',
  center: [-122.4, 37.8],
  zoom: 12,
  accessToken: 'YOUR_TOKEN'
});

map.on('load', () => {
  const overlay = new MapboxOverlay({
    layers: [
      new IconLayer({
        id: 'icon-layer',
        data: [{ position: [-122.4, 37.8] }],
        getIcon: () => ({
          url: 'data:image/svg+xml;charset=utf-8,...', // Simple SVG
          width: 64,
          height: 64
        }),
        getPosition: (d) => d.position,
        getSize: 64
      })
    ]
  });
  map.addControl(overlay);
});

4. Run the application
   npm start
5. Observe: Icons do not render (only the base map appears)
6. Verification: The exact same code works in:

• Angular 18 with Mapbox GL 3.16.0 ✅
• Angular 19 with MapLibre GL 5.0.0 ✅

Relevant log output

No errors or warnings appear in the browser console. The IconLayer is created successfully, but icons simply don't render on the map.

[Matthew-G-Jennings]

Having a very similar issue. We aren't using Angular but as of the latest chrome update some features aren't rendering.

It is only symbol layers and generally only on the first attempt to load the page, refreshing often fixes it. Also appears to scale with the total number of features, more likely to occur when more features are trying to render. Seems like some sort of race condition.

Only occurs on browsers based on chromium 143+, firefox works normally and this only started happening as of chrome 143

EDIT: We are using mapbox 3.7.0, tried updating to 3.17.0 but the issue is still there