Skip to main content
3 of 5
added 479 characters in body

OL3 Style function

I am attempting to write a style function within an open layers 3 application that will change the fill color of a circle based on an attribute from a geoJSON piece of data. I have looked over stack exchange and this site as well as the documentation and I still cant crack it. this is what I have:

var wellsLayer = new ol.layer.Vector({
  source: new ol.source.GeoJSON({
    projection: 'EPSG:3857',
    url: 'data/WELLS.geojson'
  }),
  customStyleFunction,

});

this is my best attempt so far:

var customStyleFunction = function(feature, resolution) {

  var fontSize = '18';
  if(feature.get('WELL_CLASS')= 'EXISTING') {
    fontSize = '10';
  } else if(feature.get('WELL_CLASS')= 'PROPOSED') {
    fontSize = '14';
  } else if(feature.get('WELL_CLASS')= 'INJECTION') {
    fontSize = '16';
  }

  return [new ol.style.Style({
    image: new ol.style.Circle({

      fill: new ol.style.Fill({
        color: '9999CC'
      }),
      stroke: new ol.style.Stroke({
        color: '#ddd',
        width: fontSize
      })
    })
  })];
};

I want to call feature.get and grab a field called "WELL_CLASS" which has some values in it. I wont bother detailing everything I have tried but I attempted the hyperlink syntax as well as what is on the ol3 docs with no luck.

it also bears mentioning that I am not very good at javascript.

*********UPDATE

thanks for the response. I believe the mistake may be with my function code. I say this because if I define a static style such as below the layer draws without issue. but if I attempt to use the function nothing appears.

 var staticwell = new ol.style.Style({
  image: new ol.style.Circle({
    fill:new ol.style.Fill({color: 'red'}),
    stroke: new ol.style.Stroke({color: 'black', width: 1}),
    radius: 5
  }),
});