[GIS] Unable to style KML layer in OpenLayers 3

kmlopenlayers

I have KML data, which looks like this:

<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document><Folder><name>City</name>
<Schema name="City" id="City">
<SimpleField name="Name" type="string"></SimpleField>
<SimpleField name="Description" type="string"></SimpleField>
<SimpleField name="LINK" type="string"></SimpleField>
</Schema>
<Placemark>
<ExtendedData><SchemaData schemaUrl="#City">
<SimpleData name="LINK">1 City</SimpleData>
</SchemaData></ExtendedData>
<LineString><coordinates>...some coordinates...</coordinates>    </LineString>
</Placemark>
... goes on

I want to load this layer, add it to the map and style it. I tried it like so:

var source = new ol.source.Vector({
    url: 'city.kml',
    format: new ol.format.KML({
        projection: 'EPSG:3857',
        extractStyles: false
    })
});

function styleFunction(feature) {
    var style = new ol.style.Style({
        stroke: new ol.style.Stroke({
        color: 'red',
        width: 4
        })
    })
    return [style];
}

var layer = new ol.layer.Vector({
    source: source,
    style: styleFunction
});
map.addLayer(layer);

As you can see, I set extractStyles to false, in order to use my own styles. And in style function I have a style just for a LineString (stroke), because in the data source I see almost only LineString tags. Still, all this does not work.

PS: I should add, that the file with data is loaded well

– I clearly see it in the console.

Best Answer

Can't understand why, but you must declare a new ol.style.Style...:

var layer = new ol.layer.Vector({
                        source: new ol.source.Vector({
                          url: 'city.kml',
                          format: new ol.format.KML({
                            extractStyles: false
                          })
                        }),
                        style: [
                            new ol.style.Style({
                                stroke: new ol.style.Stroke({color: 'black', width: 1})
                            })
                        ]
                    });
                map.addLayer(layer);
Related Question