How to style points in openlayers 4

Question

I'm trying to style points in a vector source in OpenLayers 4.

I've defined a style:

var pStyle = new ol.style.Style({
          stroke: new ol.style.Stroke({
          width: 6, color: [255, 0, 0, 1]
          })
});

and added the style in the layer definition

var pLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [p]
        }),
        style: pStyle
});

Commenting the style definition makes the point appear on the map so I'm assuming the rest of the code is fine. But I can't get my point to appear in red on the map.

fiddle at: https://codepen.io/fundef/pen/VXKYjP

Where am I going wrong?

Answer 1

If you want to use fill and stroke

    var myStyle = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({color: 'black'}),
        stroke: new ol.style.Stroke({
          color: [255,0,0], width: 2
        })
      })
    })