Emoji in Symbol Layer Text Causes glyphs > 65535 Error
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
**mapbox-gl-js version**: 3.12.0
**browser**: MS Edge
### Steps to Trigger Behavior
1. Create a new Symbol Layer.
2. Set its layout.text-field to include an emoji, for example:
```
> map.current.addLayer({
> 'id': 'marker',
> 'source': 'marker-data',
> 'type': 'symbol',
> 'layout': {
> 'text-field': '🚗 Team A'
> }
> });
```
3. View the rendered map. Only the text 'Team A' is shown. Inspect the browser console. Following error is returned:
> glyphs > 65535 not supported.
### Link to Demonstration
https://codesandbox.io/p/sandbox/stupefied-dirac-5q84fz
### Expected Behavior
The emoji should be rendered alongside the text in the label.
### Actual Behavior
Instead, the following error is thrown in the console:
> glyphs > 65535 not supported

We're wanting to implement a position marker design like this:

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the emoji text-field example in the linked CodeSandbox with mapbox-gl-js 3.12.0 and confirm the glyphs > 65535 console error. Trace the symbol-layer text rendering and glyph handling responsible for the missing emoji. Done means emoji text renders alongside the rest of the label without the console error, with regression coverage if the existing tests support it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- computer-graphics, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100