It’s my first week at Mapbox. As I’ve been exploring Mapbox.js and trying to learn what’s possible, I wondered about map markers. I couldn’t help but think about , , , and . And sure, the more practical , , , and .
Emojis as map markers? I had to give it a try.
I didn’t know how one acquires the emoji trove, so I searched around Github. Sure enough, I found Github’s Emoji Showcase. I sifted through until emojify.js caught my attention.
Armed with hundreds of emojis, my next step was to swap markers with emoji keywords. After a few clicks around Mapbox.js documentation, I landed on divIcon. divIcon is the sweet spot for fully customized markers. It allows you to replace the traditional marker with a div. You can add a class to that div or, more importantly, nest HTML inside the div with the html option.
Using the html option within divIcon, I can drop the emoji keyword and I have an emoji map marker.