Emojis and special characters not displayed in symbol labels

[dancherb]

As initially discussed in the repo for the React Native SDK, and judged to be an upstream issue:
nitaliano/react-native-mapbox-gl#1407

(any workarounds would be appreciated in the meantime!)

[1ec5]

Emoji isn’t supported for at least a couple reasons:

• mbgl assumes a character can fit in 8 bits. Add support for rendering characters from unicode supplementary planes mapbox-gl-js#4001 tracks the same issue in GL JS.
• Glyphs for most writing systems (other than CJK) come from the Mapbox Fonts API, which incorrectly assumes a one-to-one mapping between Unicode codepoints and font glyphs. Many emoji are represented by surrogate pairs or use combining characters such as skin tone modifiers.
• The Fonts API doesn’t have an emoji font, and a system font currently can only be used for some CJK character ranges: Allow using system fonts or fonts bundled in the app #7862.

#7774 tracks complex text support, and #7528 tracks using a proper text layout library for text shaping. Resolving either issue would force us to address all these limitations. We’d still need to support rendering color fonts, however. That would probably be a major shader-level change.

[1ec5]

An implementation of images embedded in labels is underway in mapbox/mapbox-gl-js#8904. One it is ported to gl-native, you could convert emoji of interest into style images and embed them inside labels. Embedding the images would be a manual affair for now, because there isn’t yet a find-and-replace expression operator: mapbox/mapbox-gl-js#4100.

[stale]

This issue has been automatically detected as stale because it has not had recent activity and will be archived. Thank you for your contributions.