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?

This seems to do the trick ` pStyle = new Style({ image: new Circle({ radius: 8, fill: new Fill({color: 'rgba(200, 200, 255, 0.3)'}), stroke: new Stroke({color: 'blue', width: 1}) }) });` — und, Mar 18 '18 at 19:40

score 17 · Answer 1 · answered Mar 19 '18 at 20:21

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

score 0 · Answer 2 · edited Mar 16 '18 at 22:30

0

You can use ol.style.icon for that.

This is a example:

<script>

iconFeature.setStyle(new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          color: '#8959A8',
          crossOrigin: 'anonymous',
          src: 'https://openlayers.org/en/v4.6.4/examples/data/dot.png'
        }))
      }));

<script>

edited Mar 16 '18 at 22:30

ADyson

57,178
14
51
63

answered Mar 16 '18 at 21:54

rebg85

1
1

thanks for the workaround, I could change all my points to icons and display a png, but I was really looking for a way to style points using stroke and fill. – und Mar 18 '18 at 13:23

How to style points in openlayers 4

2 Answers2