mapbox / mapbox/mapbox-gl-js

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

Open
#13,594 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### 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

```typescript
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

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the Angular 19 + Mapbox GL 3.16.0 reproduction at deckgl-iconlayer-repro and verify that ScatterplotLayer renders while IconLayer does not. Compare it with the Angular 18/Mapbox and Angular 19/MapLibre reproductions to isolate the integration difference; done means IconLayer icons render in the reported Angular 19 and Mapbox setup without console errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.