CODEWITHSUNDEEP
javascripthtmlopenlayersopenlayers-5
user2018
user2018

Reputation: 356

Openlayers 5 icons are not showing on the map

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?

Upvotes: 0

Views: 1112

Answers (1)

Mike
Mike

Reputation: 17897

The layer needs to be added to the map

map.addLayer(vectorLayer);

Upvotes: 1

Related Questions