Emoticon Map Markers in Emoji Heatmapper App
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: .
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 emoji-picker.js, and few more *.js files hooked up on my page, and a little JavaScript to get everything working accordingly.
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:
var style = new ol.style.Style({ stroke: new ol.style.Stroke({ color: [64, 200, 200, 0.5], width: 5 }), text: new ol.style.Text({ font: '30px sans-serif', text: document.getElementById('searchField').value !== '' ? document.getElementById('searchField').value : '', fill: new ol.style.Fill({ color: [64, 64, 64, 0.75] }) }) });
and 🎇 I have an emoji map marker.
Resources:
- 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/
You must be logged in to post a comment.