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