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 Image may be NSFW.
Clik here to view.
, Image may be NSFW.
Clik here to view.
, Image may be NSFW.
Clik here to view.
, and Image may be NSFW.
Clik here to view.
. And sure, the more practical Image may be NSFW.
Clik here to view.
, Image may be NSFW.
Clik here to view.
, Image may be NSFW.
Clik here to view.
, and Image may be NSFW.
Clik here to view.
.
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 Image may be NSFW.
Clik here to view.
. 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 Image may be NSFW.
Clik here to view.
I have an emoji map marker.
var rocketIcon = L.divIcon({className: '',html:':rocket:'});
L.marker([38.91338, -77.03236], {icon: rocketIcon}).addTo(map);Image may be NSFW.
Clik here to view.
I decided to take it one step further by pulling in places from Foursquare and querying the emoji keywords.
Try exploring your emojified city!
