I have KML data, which looks like this:

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

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.


1 Answer 1


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.