How to label GeoJSON polygons from properties using OpenLayers 3?

Question

I have a working script to show GeoJSON feature and style them by properties/attributes. But when I tried label the feature browser said 'feature is not defined'. Can anyone help with a working label script?

code:

    var areal = new ol.layer.Vector({
    source: new ol.source.GeoJSON({
        defaultprojection: 'EPSG:4326',
        projection: 'EPSG:3857',
        url: 'data/tes.geojson'
    }),
    style: (function() {
      var style08 = [new ol.style.Style({
        fill: new ol.style.Fill({color: '#ff0000'}),
        stroke: new ol.style.Stroke({color: 'black', width: 1}),
        text: new ol.style.Text({
            font: '12px Verdana',
            text: feature.get('ARESTA'),
            fill: new ol.style.Fill({color: 'black'}),
            stroke: new ol.style.Stroke({color: 'white', width: 0.5})
            })
      })];
      var style12 = [new ol.style.Style({
        fill: new ol.style.Fill({color: '#55ff00'}),
        stroke: new ol.style.Stroke({color: 'black', width: 1}),
        text: new ol.style.Text({
            font: '12px Verdana',
            text: feature.get('ARESTA'),
            fill: new ol.style.Fill({color: 'black'}),
            stroke: new ol.style.Stroke({color: 'white', width: 0.5})
            })          
      })];
      var style13 = [new ol.style.Style({
        fill: new ol.style.Fill({color: '#0070ff'}),
        stroke: new ol.style.Stroke({color: 'black', width: 1}),
        text: new ol.style.Text({
            font: '12px Verdana',
            text: feature.get('ARESTA'),
            fill: new ol.style.Fill({color: 'black'}),
            stroke: new ol.style.Stroke({color: 'white', width: 0.5})
            })          
      })];
      return function(feature, resolution) {
        if (feature.get('ARESTA') == 'Areal Tahun Tanam 2008') {
          return style08;
        } else if (feature.get('ARESTA') == 'Areal Tahun Tanam 2012') {
          return style12;
        } else {
          return style13;
        }
      };
    })(),
});

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
    }),
    areal
    ],
    view: new ol.View({
        center: ol.proj.transform([104.15, -5.06], 'EPSG:4326', 'EPSG:3857'),
        zoom: 13
    })
});

geojson (not a complete code, just for example):

    {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "ESTATE": "COBA", "AFDELING": "01", "BLOK": "C016", "KODE_ORG": "SOGE01C016", "ARESTA": "Areal Tahun Tanam 2013", "TT": "2013 - 03", "BIBIT": "MARIHAT" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 104.160343, -5.059834 ], [ 104.160346, -5.059834 ], [ 104.160841, -5.059825 ], [ 104.160850, -5.059825 ], [ 104.160851, -5.059825 ], [ 104.161012, -5.059816 ], [ 104.161145, -5.059825 ], [ 104.161145, -5.059825 ], [ 104.161147, -5.059826 ], [ 104.161552, -5.059826 ], [ 104.161553, -5.059826 ], [ 104.161796, -5.059817 ], [ 104.162750, -5.059818 ], [ 104.163308, -5.059828 ], [ 104.163309, -5.059828 ], [ 104.163310, -5.059828 ], [ 104.163616, -5.059819 ], [ 104.163617, -5.059819 ], [ 104.163618, -5.059819 ], [ 104.163725, -5.059810 ], [ 104.164434, -5.059811 ], [ 104.164595, -5.059820 ], [ 104.164748, -5.059829 ], [ 104.164750, -5.059829 ], [ 104.164966, -5.059830 ], [ 104.164967, -5.059830 ], [ 104.165309, -5.059821 ], [ 104.165849, -5.059821 ], [ 104.165850, -5.059821 ], [ 104.166453, -5.059813 ], [ 104.166453, -5.059813 ], [ 104.166994, -5.059804 ], [ 104.167578, -5.059796 ], [ 104.167748, -5.059805 ], [ 104.167750, -5.059805 ], [ 104.167772, -5.059805 ], [ 104.167794, -5.059813 ], [ 104.167796, -5.059813 ], [ 104.167798, -5.059814 ], [ 104.167799, -5.059814 ], [ 104.167799, -5.059973 ], [ 104.167799, -5.059975 ], [ 104.167800, -5.059978 ], [ 104.167800, -5.059979 ], [ 104.167808, -5.060030 ], [ 104.167808, -5.060605 ], [ 104.167798, -5.060803 ], [ 104.167798, -5.060805 ], [ 104.167797, -5.061934 ], [ 104.167790, -5.062050 ], [ 104.167790, -5.062050 ]

The part of error is:

    text: feature.get('ARESTA'),

Any help?

Answer 1

I end up using vector-labels example instead, with a slight modification it finally worked. Using olivier approach I can't get the style the way I want it.

var getText = function(feature) {
    var text = feature.get('BLOK');
    return text;
};

var createTextStyle = function(feature) {
  return new ol.style.Text({
    textAlign: 'center',
    textBaseline: 'middle',
    font: '12px Verdana',
    text: getText(feature),
    fill: new ol.style.Fill({color: 'black'}),
    stroke: new ol.style.Stroke({color: 'white', width: 0.5})
  });
};

// Polygons
var createPolygonStyleFunction = function() {
  return function(feature) {
    var style08 = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 1
      }),
      fill: new ol.style.Fill({
        color: '#ff0000'
      }),
      text: createTextStyle(feature)
    });
    var style12 = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 1
      }),
      fill: new ol.style.Fill({
        color: '#55ff00'
      }),
      text: createTextStyle(feature)
    });
    var style13 = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 1
      }),
      fill: new ol.style.Fill({
        color: '#0070ff'
      }),
      text: createTextStyle(feature)
    });
        if (feature.get('STATUS') == 'PLANTED') {
          return [style08];
        } else if (feature.get('STATUS') == 'NOT PLANTED') {
          return [style12];
        } else {
          return [style13];
        }
    };
  };


var soge = new ol.layer.Vector({
    source: new ol.source.GeoJSON({
        defaultprojection: 'EPSG:4326',
        projection: 'EPSG:3857',
        url: 'data/soge.geojson'
    }),
    style: createPolygonStyleFunction()
});

Answer 2

Your closure cannot work properly. when you defined your styles, feature variable is not defined.

Regarding ol3 API doc styleFunction I suggest you to avoid closure and return an array of Style

style: function(feature, resolution) {
    var styles = [];
    styles['style08'] = new ol.style.Style({
        fill: new ol.style.Fill({color: '#ff0000'}),
        stroke: new ol.style.Stroke({color: 'black', width: 1}),
        text: new ol.style.Text({
            font: '12px Verdana',
            text: feature.get('ARESTA'),
            fill: new ol.style.Fill({color: 'black'}),
            stroke: new ol.style.Stroke({color: 'white', width: 0.5})
        })
      });

    ...

    return styles
}