4

In openlayers (v4.6.4) when I'm using font-awesome as marker icons, they don't show up at first load (empty cache and hard reload). All I see is a rectangle, like a broken character. At the second load they appear perfectly.

broken fontawesome icon in openlayers

    var mapMarkerIcon = new ol.style.Style({
        text: new ol.style.Text({
            text: '\uf041 ', // <-- fa marker unicode
            font: 'Normal ' + 24 + 'px ' + 'FontAwesome',
            textBaseline: 'bottom',
            fill: new ol.style.Fill({
                color: green,
            })
        })
    });

I guess this is because openlayers draws the unicode icon code before font-awesome css had the chance to load. At the second refresh, the page cached the css and that's why it works.

I can't ask all my users to refresh one time. Has someone any idea how to solve this problem?

Can I force the JS to wait for css?

I'm thinking that I only need one icon for the moment (the map-marker). Maybe I can just load this one to make it faster? (I guess even then there is no guarantee to have the css before the JS runs)

Can I add a little piece of javascript to redraw the icons after a few ms or something?

stallingOne
  • 3,633
  • 3
  • 41
  • 63

2 Answers2

1

This might be a bit dirty, but maybe you want to implement a check like described in http://allthingssmitty.com/2016/09/12/checking-if-font-awesome-loaded/. As soon as that returns true, you initialize your map.

P.S. Is there a specific reason that you use an icon font? Why don't you use an SVG icon?

Grmpfhmbl
  • 1,119
  • 12
  • 24
-1

You might be able to get away with redrawing the map using setTimeout

setTimeout(function(){ map.render(); }, 1000);

Though it's probably best to use something that waits for everything to load before drawing. See the top answer here if you can use jQuery here Is it possible to wait until all javascript files are loaded before executing javascript code?

J Stein
  • 9
  • 2
  • I just tried that and also redrawing vectorLayer but it doesn't work. Thanks for the idea though, it could have worked. – stallingOne Jan 12 '18 at 10:32