Emoji map markers
By Katy DeCorah
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.
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
. 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
I have an emoji map marker.
js
var rocketIcon = L.divIcon({className: '',html:':rocket:'});
L.marker([38.91338, -77.03236], {icon: rocketIcon}).addTo(map);
I decided to take it one step further by pulling in places from Foursquare and querying the emoji keywords.
Try exploring your emojified city!
