OpenLayers – How to Style LineString-Features with Stroke and Fill

openlayers

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.

Best Answer

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
    })
  })
]
Related Question