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 doughnut, heart_eyes_cat, icecream, and crystal ball. And sure, the more practical house, office, coffee, and hotel.

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.

Emojify.js will convert an emoji keyword to the image. That means I can type :rocket: and the script will replace that keyword with the image rocket. All the emojis are saved as data URIs, so I don’t need to worry about lugging around hundreds of images. All I need is emojify.js and emojify.css hooked up on my page, and a little JavaScript to get everything working.

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 boom I have an emoji map marker.

var rocketIcon = L.divIcon({className: '',html:':rocket:'});
L.marker([38.91338, -77.03236], {icon: rocketIcon}).addTo(map);

rocket emoji

I decided to take it one step further by pulling in places from Foursquare and querying the emoji keywords.

Try exploring your emojified city!