# Any way to style LineString-features with Stroke and Fill?

I am using the latest version of OpenLayers to draw some features within a map rendering data from GeoJSON-files. Within each of these files I have a FeatureCollection containing a couple of LineString-features.

So far the following style is applied, which works fine and draws each feature as a thin dark line:

return new Style({
stroke: new Stroke({
color: '#333333',
width: 1
})
});


I know, that I can not use Fill to style LineString-features (if I am right). However, I really want to style these lines with two colors using a inner line (1px;red) and a border/stroke around this inner line (1px;blue).

Is there any possibility to accomplish this?

A first solution would be to copy the features drawing the lower ones blue and 3px wide and the upper ones red and 1px wide - but this would also double the amount of features.

• Use two styles for the features like you wrote. Draw 3 pixel wide blue line first and 1 pixel wide red over it.You do need to copy the features. – user30184 Sep 15 '18 at 18:31

As recommanded by @user30184, you should double the style like below. You may need to adapt width to your liking.

return [
new Style({
stroke: new Stroke({
color: 'blue',
width: 4
})
}),
new Style({
stroke: new Stroke({
color: 'red',
width: 2
})
})
]

• Thank you. I didn't know that I could pass styles as an array. – pzaenger Sep 20 '18 at 13:21