Twemojis for React & Mapbox gl

Emoji Problem

So my group decided on doing an app using emoji’s and mapbox, it’s Pokemon Go for chat where you (or businesses) could drop and discover messages (mockup screenshots below) around you. Well apparently you need to upload images to Mapbox Studio for custom marker icons in MapboxGL, the only other custom image (using css) was the user’s avartar which updated on map move rather than as a marker property. We thought we could upload all 1200+ emoji / 874 twemoji svg files and be done (they were only 1mb, why not?), but strangely there was an (AFAIK) undocumented 500 sprite limit.

Lesser is better

Anyway emojis like flags and letters would not be too relevant for our purposes, so we just had to choose which emojis we would support. Based on http://emojitracker.com/ we thought that using the people + objects categories (425 twemojis) would cover well enough ground for people to post their reactions and activities.

How to get the files

The next step was to upload the svgs. To choose a subset of twemojis to upload to Mapbox Studio and to use with react-emoji-picker in our app, I had to first get the list of twemojis we would support on the emoji picker. There was a category to name mapping, then there was a name to unicode mapping, put the two together and a script and tada I got the files, here’s the repo.

Mockups of our app

What it looks like now

Edit: Check it out - https://drop-dev.surge.sh/