mapbox / mapbox/mapbox-gl-js

Emoji in Symbol Layer Text Causes glyphs > 65535 Error

Open
#13,500 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature :green_apple:
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

![Image](https://github.com/user-attachments/assets/d5be8ba9-c433-4d66-a397-69dea465655b)

We're wanting to implement a position marker design like this:
![Image](https://github.com/user-attachments/assets/7f0e6750-4a96-4495-a46e-6e6ea7623de4)

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.