view raw
Helen Danger Burns Helen Danger Burns - 9 months ago 199
Javascript Question

Openlayers 3: add text label to feature

I have the current set up here: fully functional fiddle example and whilst I have managed to zoom to each polygon feature I would also like to display a centralised text label on each... the

variable found within the
method. I have no idea how to do this and all my googling has come up with this article: which I find totally confusing as I'm a little new to OL!


To add a text to ol.Feature you will store the description in the feature and set a style that is a style function (that will get the description from the feature and show it):

field_polygon.set('description', field_title);

function styleFunction() {
  return [
        fill: new{
        color: 'rgba(255,255,255,0.4)'
      stroke: new{
        color: '#3399CC',
        width: 1.25
      text: new{
        font: '12px Calibri,sans-serif',
        fill: new{ color: '#000' }),
        stroke: new{
          color: '#fff', width: 2
        // get the text from the feature - `this` is ol.Feature
        // and show only under certain resolution
        text: map.getView().getZoom() > 12 ? this.get('description') : ''

Your fiddle.