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?

Hypoderma

Have you used jsfiddle or plunker? It can be much easier to demonstrate your code and get help. – Adelaidaadelaide

i need to use a KML file for my vector source. Do you know of a way that i could do this with jsfiddle or plunker? – Hypoderma

Take a look at this plunker + kml. – Adelaidaadelaide

just to clarify, i meant i need to upload my own already built KML file for my example. But there maybe some stuff in the example that could help me with my initial problem – Hypoderma

i just meant that im using my own KML file for the map i am using in my code. To use it in jsfiddle/plunker i need to upload it or host it somewhere. do you know of a way that i could host my file online for use in a fiddle example? the normal file hosting sites provide download links, but i want a link directly to the file without downloading it. So i can use it in for the url property of the vector source – Hypoderma

Yeah, I got it, because of it I sent you my plunker example. I host (temporarily) my kml on github. – Adelaidaadelaide

thanks. here is a plunker for the my problem. only it doesnt work for some reason, the map doesnt load, i dont see any problems with it and i am hosting the KML on git and using it like in your plunker. heres the link anyway: plunker – Hypoderma

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);
    });

Adelaidaadelaide