CODEWITHSUNDEEP
javascriptstylesopenlayerspoint
und
und

Reputation: 81

How to style points in openlayers 4

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?

Upvotes: 8

Views: 20288

Answers (2)

MakeLoveNotWar
MakeLoveNotWar

Reputation: 954

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

Upvotes: 18

rebg85
rebg85

Reputation: 1

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>

Upvotes: 0

Related Questions