As I’ve been exploring and trying to learn what’s possible in the maps of OpenLayers 3 using LokLak API, I wondered about map markers. The markers which i used earlier seem to be so dull on the map, and as I am working on Emoji Heatmapper 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 many solutions on GitHub. I sifted through all of them until Emoji-picker caught my attention. So i tried giving a dropdown using the emoji-picker as searching would be lot more easier for the user.
Emoji-picker will convert an emoji keyword to the image internally. That is why when you hover over an emoji in the drop-down menu, it shows the corresponding keyword. For instance, the image 🚀 when hovered on it, it displays :rocket: .
Armed with hundreds of emojis, my next step was to swap markers with emoji keywords. After a few clicks around emoji-picker documentation, I landed on data-emoji-input=”unicode” . It allows you to replace the traditional marker with a unicode emojis so the search outputs data. You can add a class to that lead emoji-picker-container and data-emoji-input=”unicode” for the HTML option.
Style the Open Layers 3 map:
and 🎇 I have an emoji map marker.
- Emoji-picker: https://github.com/OneSignal/emoji-picker
- Code for Emoji Heatmapper App: https://github.com/fossasia/apps.loklak.org/tree/master/emojiHeatmapper
- Live Demo here: http://apps.loklak.org/emojiHeatmapper/