How can I render Emojis on Openlayers 4 map?

Question

I am told to render emojis on an openlayers 4 map.

Now I found several examples on how to use custom map markers, but that does not exactly fit my needs.

Is there a way to render emojis on an openlayers 4 map?

This is the test data I used (GeoJSON):

 {
    features: [
        {
            type: 'Feature',
            id: '1016392629',
            geometry: {
                type: 'Point',
                coordinates: [6.0, 6.0]
            },
            properties: {
                text: '\u1F31E',
            }
        },
        {
            type: 'Feature',
            id: '-2026663018',
            geometry: {
                type: 'Point',
                coordinates: [0.0, 0.0]
            },
            properties: {
                text: '\u1F31E',
            }
        }
    ],
    type: 'FeatureCollection'
 }

and using a style function:

    style: (feature: Feature) => {
        const { font, textBaseline, fillColor } = this.options;
        const s: ol.style.Style = new ol.style.Style({
            text: new ol.style.Text({
                text: feature.getProperties().text,
                font,
                textBaseline,
                fill: new ol.style.Fill({
                    color: fillColor
                })
            }),
            zIndex: 1
        });

        return s;
    }

But this only gives me:

Answer 1

Emoji in JS has two characters. (UTF-16 need to be represented with two codes)

So smiley emoji is: '\?\?' = 😀

Now, your emoji, '\ἱE' (Sunny), will be: '\?\?' = 🌞.

Read on about lead-surrogate and tail-surrogate at: medium.com: emojis-in-javascript

Simple google finds me online resources mapping the emoji at: timwhitlock.info emoji tables And you can inspect each character timwhitlock.info inspect 1F31E