How to set polygon fill based on imported parameters from postGIS - ajax

Question

Have successfully imported polygons in OpenLayers along with popup of pertinent data. Need guidance on assigning fill colors from parameters passed via ajax.
your textHoping to assign fill color based on setting parameter in json file. Currently using:
var polyStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: [12,240,60]
}),
stroke: new ol.style.Stroke({
color: [0,0,0], width: 1
})
});
to load the following:
const layer = new ol.layer.Vector({
source: new ol.source.Vector({
features:features,
projection: 'EPSG: 3857'
}),
style: polyStyle
});
I next tried the following as a test based on the "settings feature the file:
// Polygons style
var setfcolor = function(features) {
console.log(features);
var fcolor;
if (feature.get("setting")=='Carbonate'){
fcolor = "blue";
} else if (feature.get("setting")=='Clastic: continental'){
fcolor = "yellow";
} else if (feature.get("setting")=='Extrusive: mafic'){
fcolor = "brown";
}
};
But it fails and reverts to all black.
Snippet of json file is:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-45.499757432,
60.988125868
],
[
-45.49967049,
60.988157751
],
[
-45.497458466,
60.989470026
],
[
-45.487258845,
60.995518876
],
[
-45.483858593,
60.999870372
],
[
-45.483858591,
60.99987019
],
[
-45.465241806,
60.991366687
],
[
-45.450273556,
60.988997409
],
[
-45.422944921,
60.990687369
],
[
-45.42294477,
60.990687194
],
[
-45.419225021,
60.984549241
],
[
-45.412472331,
60.973399399
],
[
-45.502278621,
60.96070259
],
[
-45.525166866,
60.957726342
],
[
-45.544395412,
60.955624111
],
[
-45.572353843,
60.951692596
],
[
-45.655768925,
60.94244974
],
[
-45.670854236,
60.94123391
],
[
-45.693899808,
60.940200373
],
[
-45.664305174,
60.947778021
],
[
-45.659448977,
60.949020163
],
[
-45.648191047,
60.951923402
],
[
-45.636669092,
60.954825483
],
[
-45.565410441,
60.967827923
],
[
-45.523123774,
60.979977384
],
[
-45.517219284,
60.981999
],
[
-45.517218946,
60.981999115
],
[
-45.5059008,
60.985872696
],
[
-45.499757432,
60.988125868
]
]
]
},
"properties": {
"setting_ty": "Supracrustal",
"setting": "Sedimentary and/or volcanic: undivided",
"lithology": "Basalt, sandstone, conglomerate",
"colour_cmy": "20 40 70 0",
"colour": "247"
}
},
[Polygons and popups working](https://i.stack.imgur.com/TqbV8.jpg)

Answer 1

strong text Got a good lead from Mike user:10118270 and applied it.Replaced the following code
var polyStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: [12,202,50]
}),
stroke: new ol.style.Stroke({
color: [0,0,0], width: 1
})
});
with the following code:
// Polygons style
const fillColors = {
'Slope and deep water': [100,100,100,1],
'Intrusive: syenitic': [240,10,10,1],
'Intrusive: gabbroic': [240,10,10,1],
'Intrusive: anorthositic': [240,10,10,1],
'Intrusive: tonalitic-granodioritic': [240,10,10,1],
'Intrusive: granitic':[240,10,10,1],
'Intrusive: undivided': [230,10,10,1],
'Sedimentary: undivided': [250,250,10,1],
'Clastic: shallow marine': [240,240,20,1],
'Clastic: continental': [255,255,1,1],
'Clastic: deltaic and nearshore': [240,240,20,1],
'Marine sedimentary: undivided': [230,230,10,1],
'Extrusive: mafic': [250,200,10,1],
'Sedimentary and/or volcanic: undivided': [250,120,10,1],
'Carbonate': [10,40,255,1],
'Metamorphic: undivided': [230,10,240,1],
'ice': [250,250,250,1],
};
const style = new ol.style.Style({
fill: new ol.style.Fill(),
stroke: new ol.style.Stroke({
color: [0, 0, 0, 1],
width: 0.5,
}),
});
strong text The end result is shown on the image.
geologic polygon