Styling Vectors in Open Layers 3

Question

I am working with the Vector Layer in ol3 and I fined the API Docs really lacking.

The only reference available is the default styles as show in ol.style

this is what I have so far, taken from examples and trail and error

style = [
  new ol.style.Style({

    image: new ol.style.Circle({
      radius: Math.max(10*log10(size), 10),
      stroke: new ol.style.Stroke({
        width: 1.5,
        color: '#fff'
      }),
      fill: new ol.style.Fill({
        color: 'hsl(220,60%,60%)'
      })
    }),

    text: new ol.style.Text({
      text: size.toString(),
      fill: new ol.style.Fill({
        color: '#fff'
      })
    })

  })
];

Why is there an array?

How do I change font size? "font-size": and size: didn't work

Is there some other docs I should look in?

I'm lost.

Answer 1

See http://openlayers.org/en/v3.0.0/apidoc/ol.layer.Vector.html ( style option of constructor to see what is supported).

It can be a style, an array of style if you want multiple style for one feature, or a function returning style (All of these will be converted to a stylefunction internally). For the code you provide, nesting a single value in a array in unneeded.

For the size, the font property has to be used: use it as a css font value( font: '12px Calibri,sans-serif' . See example ( https://github.com/openlayers/ol3/blob/master/examples/vector-layer.js#L23 ).