Openlayers 5 icons are not showing on the map

Question

I'm using OpenLayers 5 to create a simple map with icons on it. I have followed the Icon Colors example and it works. Now, I changed the source data from an array. I have, for example, four points to show on the map.

window.locs = [{
        "y": "52,51241",
        "x": "13,38961"
      }, {
        "y": "52,52107",
        "x": "13,38773"
      }, {
        "y": "52,52488",
        "x": "13,40369"
      }, {
        "y": "52,54902",
        "x": "13,41655"
      }];

I only change the part where we create the vector source, from manually setting one by one to using a loop.

for (var i in window.locs) {
    var data = window.locs[i];
    iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(data.x.replace(",", ".")), parseFloat(data.y.replace(",", "."))]))
        });

    iconFeature.setStyle(new ol.style.Style({
            image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */({
                    color: [113, 140, 0],
                    crossOrigin: 'anonymous',
                    src: 'https://openlayers.org/en/v3.20.1/examples/data/dot.png'
                }))
        }));
    window.iconFeatures.push(iconFeature);
}
var vectorSource = new ol.source.Vector({
        features: window.iconFeatures
    });

Unfortunately, the icons are not showing on the map. If I don't use the loop, the icons are shown. I have a lot of data and cannot assign the value one by one.

This is my JSFiddle: Fiddle

How can I resolve this?

Your fiddle needs `map.addLayer(vectorLayer);` Apart from that it seems to be working correctly. — Mike, Mar 08 '19 at 14:12
@Mike Wow. Thank you! Why don't they use 'addLayer' in the example though? There is no explanation about it there. And can you post this as an answer so I can accept it? — user2018, Mar 08 '19 at 14:23
The map is created after the layers so both layers can be included in the setup. — Mike, Mar 08 '19 at 14:28
Hi @Mike, can you post your comment as an answer so I can accept it? — user2018, Mar 14 '19 at 13:46

score 1 · Accepted Answer · answered Mar 14 '19 at 13:49

1

The layer needs to be added to the map

map.addLayer(vectorLayer);

answered Mar 14 '19 at 13:49

Mike

16,042
2
14
30

Openlayers 5 icons are not showing on the map

1 Answers1