map.addLayer doesn't display KML points layer the first time in OpenLayers 4.6.4

Question

I've posted this question on StackOverflow, but it seems like this is the correct forum to ask this, since nobody answered over there.

I have an OpenLayers project where the user can display/hide some layers (KML files) by selecting them using checkboxes.

One of these layers have Placemarks with a single location (long/lat), the other layers are polygons.

When I load the placemarks/points layer for the 1st time, it doesn't show the points/icons in the map, however, if I move the map or zoom in/out the map, then the placemarks icons appear. Once they appear for the first time, then everything works fine, I can show & hide them as many times as I want, the problem is that they're not shown the first time unless I interact with the map (moving it or zooming it)

The other layers (polygons) don't have this problem, they're shown the 1st time as it should be.

This is the relevant code:

    var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        src: './images/pin2.png',
    })
    });


    var vMinera = new ol.layer.Vector({
        renderMode: 'image',
        source: new ol.source.Vector({
            url: './kmls/cajerosFake.kml',
            format: new ol.format.KML({
                extractStyles: false
            })
        }),
        style: iconStyle
    });


    $('input.checkboxes').on('click', function (e) {

        var nombreLayer = $(this).attr('vectorName');
        if($(this).prop('checked') == true){

            map.addLayer(window[nombreLayer]);

        } else {
            map.removeLayer(window[nombreLayer]);
        }
    });

In case it matters, the structure of the kml that is loaded is this:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:ns2="http://www.google.com/kml/ext/2.2" xmlns:ns3="http://www.w3.org/2005/Atom" xmlns:ns4="urn:oasis:names:tc:ciq:xsdschema:xAL:2.0">
    <Document>

<Placemark id="1"><Point><coordinates>-99.38903025627826,20.77704555024246</coordinates></Point><description>Some info</description></Placemark>
<Placemark id="2"><Point><coordinates>-101.75086441023652,20.978493199466094</coordinates></Point><description>Some info</description></Placemark>
<Placemark id="3"><Point><coordinates>-99.55872360994415,20.96280642577179</coordinates></Point><description>Some info</description></Placemark>
...

I'm using Openlayers v4.6.4.

Answer 1

It looks like a bug in OL 4.6.4 when vector layer renderMode is image and vector points style is custom icon. If either renderMode is vector or style for points is not defined, it works OK.

Rather primitive workaround is to wait for a short time the first time that layer is added and then remove and add layer again.

Relevant part of the code could look something like this (you have to experiment with the actual wait time):

var firstTimeDone = {};

$('input.checkboxes').on('click', function (e) {
  var nombreLayer = $(this).attr('vectorName');
  if($(this).prop('checked') == true){
    map.addLayer(window[nombreLayer]);
    if (!firstTimeDone[nombreLayer]) {
      setTimeout(function() {
        map.removeLayer(window[nombreLayer]);
        map.addLayer(window[nombreLayer]);
      }, 200);
      firstTimeDone[nombreLayer] = true;
    }
  } else {
    map.removeLayer(window[nombreLayer]);
  }
});