OpenLayers 3: how to set fill style of a vector feature

Question

i am trying to set the fill colour of seperate features of a vector layer. using the code below, i thought i would be able to iterate through the features and set their fill style individually, but a strange issue happens. Without the setStyle function, the various properties of the features are logged in the console. id, name and geometry. There is about 5 or so features that get logged. basically like

room1
room2
room3
room4
room5

with the extra data underneath each one (id, geometry)

but when i add the line for setting the fill of the feature, i get a strange problem. It seems to hang the loop on the first feature and the console fills up with logs of that features properties, like:

room1
room1
room1
room1
room1
room1
room1

for a long time, to the point where the firefox log limit is reached and it tells me that 2000 entries are not shown!

but on the plus side, the first feature does actually get its fill colour changed! so i think the line of code i used is at least half right! but there is definately something drastically wrong with it.

the code:

vector.getSource().on('change', function (evt) {
    var source = evt.target;
    if (source.getState() === 'ready') {

        var features = vector.getSource().getFeatures()
        for (var k in features) {
            console.log(features[k].getProperties()['name']);
            console.log(features[k].getProperties()['id']);
            console.log(features[k].getGeometry()['n']);
            features[k].setStyle(new ol.style.Style({fill: fill}));
        }

    }        
});

i really do not know much about OL3 or styling features and i arrived at this through a lot of trial and guessing. can anyone point me in the right direction?

Answer 1

So, here is your plunk modified.

First of all, unless you have a specific reason, use the latest library version. This is the main reason your kml was not loading.

And secondly, your setFill became this:

    vector.getSource().forEachFeature(function(feature){

        console.log(feature.getProperties());

        style = new ol.style.Style({
            //I don't know how to get the color of your kml to fill each room
            //fill: new ol.style.Fill({ color: '#000' }),
            stroke: new ol.style.Stroke({ color: '#000' }),
            text: new ol.style.Text({
                text: feature.get('name'),
                font: '12px Calibri,sans-serif',
                fill: new ol.style.Fill({ color: '#000' }),
                stroke: new ol.style.Stroke({
                    color: '#fff', width: 2
                })
            })
        });
        feature.setStyle(style);
    });