Openlayers 4: loading features from array

Question

So, i'm pretty new to JS. I'm creating features styled as markers in the center of my rgb layers and assign them to an array with this code:

        for (var i = 0, len = Layers.length; i < len; i++) {
            var mExtent = ol.proj.transformExtent(Layers[i].BoundingBox[0].extent, 'EPSG:4326', 'EPSG:3857');

            var X = mExtent[0] + (mExtent[2]-mExtent[0])/2;
            var Y = mExtent[1] + (mExtent[3]-mExtent[1])/2;

  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point([X, Y]),
    name: Layers[i].Title,
    layername: Layers[i].Name,
    description: Layers[i].Abstract
  });                
  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: ortho
    }))
  });

  iconFeature.setStyle(iconStyle);

  var vectorSource = new ol.source.Vector({
    features: [iconFeature]
  });

var vectorLayer = new ol.layer.Vector({source: vectorSource, zIndex: 100 });
layers2[i] = vectorLayer
            }

when im trying then to call a map with:

var map = new ol.Map({
    layers:[BaseLayers, POI, layers2],    
    target: document.getElementById('map')
});

My layers2 array of features does not show up on the map. If then i try to add this array of features manually in the console:

map.addLayer(layers2)

I get following error:

TypeError: a.addEventListener is not a function

But if i try to manually call an element from array like such:

map.addLayer(layers2[0])

It works fine. My array containing base layers(OSM+mapbox) works fine. Im pretty sure there's something wrong with my type of array. But don't know what.

Thanks for coming by.

Edit 1

Tried to put all my features, rgb layers and basemaps in a single array "layers". So the code changed in a first loop from

layers2[i] = vectorLayer;

To:

layers.push(vectorLayer);

Where "layers" already contains all the rest layer objects. When calling the map - no "vectorLayer" features are on it. When calling "layers" manually in console with map.addLayer(layers) still get the same error. When calling specific "vectorLayer" feature with map.addLayer(layers[2]), for example - it show's up.

Sumanth Shastry Sumanth Shastry · Accepted Answer · 2017-08-01T18:17:54

By looking at the code layers2 is an array of layers. While creating ol.Map object layers attribute should be single dimension array but in your code its a 2 dimensional array like below. Thats the reason its giving error.

[ BaseLayer, POI, [layers[0],layers2[1],.....]]

Solution 1: Add array of layers after creating the map object using loop.

var map = new ol.Map({
    layers:[BaseLayers, POI],    
    target: document.getElementById('map')
});

for ( var i=0; i<layers2.length; i++ ) {
   map.addLayer(layers2[i]);
};

Solution 2 : Insert BaseLayers and POI to layers2 then configure ol.Map by declaring only layers2.

Openlayers 4: loading features from array

1 Answers