1

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.

1 Answer 1

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]);
  }
});
1
  • Thanks a lot!!, it seems a lot easier to just change the render mode to ´vector´, which I did and now the points are shown the first time as it should be. I also tried updating to the latest OpenLayers version, but for some reason the map got freezed for 30 seconds or more. I didn't mention this on my question because that's another story.
    – Sergio
    Jun 13 at 20:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.