I'm generating a GeoJSON feature layer for the multi polygons fetched from a PostGIS database which is actually the output from the st_intersection function. So for a particular area of interest the generated GeoJSON looks as below (I have provided only till few features I will provide full GeoJSON if its needed):
{"type":"FeatureCollection",
"crs":{"type":"name","properties":{"name":"EPSG:4326"}},
"features":[{"type":"Feature","geometry":{"type":"MultiPolygon",
"coordinates":[[[[77.0504999837346,12.0540609607428],[77.0504670015207,12.0540533671906],[77.0500538745132,12.0539897525635],[77.0496415625216,12.0540334570618],[77.0492940139483,12.0541410806579],[77.0490118025524,12.0543126184962],[77.0487079302381,12.0546549092822],[77.0483829863618,12.0550188210232],[77.0480798330858,12.0555316991205],[77.0475604457757,12.0565161447517],[77.0468994668443,12.0574474021504],[77.0462700897898,12.0578542195414],[77.0458357141604,12.0579410122292],[77.0452922132634,12.0579416143081],[77.0446834689955,12.0578150316788],[77.0441617939835,12.0576663432786],[77.0434440211145,12.057390300004],[77.0427261734285,12.0570283935346],[77.0413566787803,12.0567096718157],[77.0406068376636,12.0565942812823],[77.0398678819393,12.0565522442586],[77.0387814640766,12.0565545486476],[77.0382164139961,12.0565134929941],[77.0378254149941,12.0564926284887],[77.0372818486614,12.0564084827713],[77.0368466082349,12.056152949791],[77.0363461211011,12.0557690990549],[77.0359980398941,12.0554270653594],[77.0354211009732,12.054798613446],[77.0350722365078,12.0542001275376],[77.0347227579071,12.0533677851546],[77.0343288993419,12.0521290498555],[77.0340670296263,12.0515739874497],[77.0337943339865,12.0510291714992],[77.033423905977,12.0505381662147],[77.033140620001,12.0501109220863],[77.0329008857525,12.049598627461],[77.0326824112817,12.0489370492677],[77.0324414294062,12.0479536506224],[77.0323092261952,12.0471637782398],[77.0321117730781,12.0462444572171],[77.0318498518409,12.0456046588311],[77.0315441481083,12.0449425845553],[77.0310655871124,12.0444941641245],[77.0305869194393,12.0442603982933],[77.0299128692771,12.0440687264363],[77.0291960830412,12.0440705550746],[77.0268276064199,12.044224482781],[77.025991529862,12.0442373373188],[77.0254481411634,12.0441734977331],[77.0250351290432,12.0440465737601],[77.024752155049,12.0438113775736],[77.0243166542911,12.043363760587],[77.0240764391199,12.0429373207928],[77.0238584363358,12.0424881240316],[77.0236839650225,12.0421041378829],[77.0235744326395,12.0416552833695],[77.0235058685986,12.0400097027675],[77.023363192747,12.0392729964072],[77.0230145380292,12.0386959508749],[77.0227534788559,12.0383973252505],[77.0224923291576,12.0381630961019],[77.0218831517805,12.0379720600764],[77.0214922696223,12.0378867712357],[77.0209270030199,12.0378886070029],[77.0202535810485,12.0379318967323],[77.019938279702,12.0379002865757],[77.019764333003,12.037815683077],[77.0195686725375,12.0376668385641],[77.0193508765661,12.037474094678],[77.0191985090245,12.0372820050173],[77.0189809497873,12.0371977165643],[77.0186116223074,12.0371551979508],[77.0178728827274,12.0371356877268],[77.0170908416614,12.0371582885117],[77.0168083267566,12.0371366064704],[77.0167213539898,12.0370943036404],[77.016503475123,12.036967082993],[77.0162641952202,12.036817423066],[77.015785418143,12.0364119031542],[77.0155026281971,12.0361992883187],[77.0152199893406,12.0360070080347],[77.0146329469418,12.0358587272034],[77.0138833162214,12.0357635883695],[77.0132090476715,12.0356159329675],[77.0129702499023,12.0355306636773],[77.012774594264,12.0353818144147],[77.0125128718413,12.0351464484483],[77.0120993056529,12.0346342512312],[77.0117070768066,12.0340586307365],[77.0108357320101,12.0327984263586],[77.0104108106205,12.0321473442562],[77.0101487577726,12.0316351820849],[77.0099963750925,12.0312080922867],[77.0099947945712,12.030609318568],[77.0100586805016,12.0298620738698],[77.0100350857279,12.028772004527],[77.0102832257144,12.0277986057869],[77.0105860519479,12.0271569690033],[77.0108458950324,12.0266003752187],[77.0109968119827,12.0259812980537],[77.011017571356,12.0255314956284],[77.0108644590594,12.0250829443313],[77.0106032675859,12.0247628381116],[77.0103855926008,12.0245068149487],[77.0093741114181,12.0239209585874],[77.0085694240715,12.023516634739],[77.0081776174412,12.0233036635531],[77.0077648349868,12.0230479116346],[77.0070035077061,12.0226862025927],[77.0064010835227,12.0224335032766],[77.0064881461528,12.0226040370812],[77.006403412386,12.0229413314375],[77.0062759820921,12.0235523385081],[77.0059995686485,12.0246694230642],[77.0059666142163,12.0248412329155],[77.0059961585658,12.0248776415306],[77.0062946008068,12.0252217729104],[77.0063419554255,12.0253085905781],[77.0064665764551,12.0256733972914],[77.0065202707569,12.0259514381811],[77.0066182010329,12.0262438664297],[77.0067010672184,12.0263943501625],[77.0068192417037,12.0265215731814],[77.0071440674722,12.0268047953724],[77.0074804663507,12.026995269942],[77.0079321404325,12.0273332564999],[77.0082985229282,12.0277438734299],[77.0086412104137,12.0281023891982],[77.0087565415587,12.0282730803083],[77.0088573895315,12.0285510132744],[77.0089287004305,12.0288000374421],[77.0090060409589,12.0291069986031],[77.009035930666,12.0292865770534],[77.009116944282,12.029903564593],[77.0091000505896,12.0302397150168],[77.009100593439,12.0304715152841],[77.0092349525126,12.0312158717328],[77.009253272909,12.0314881971674],[77.0092713345344,12.0316504159089],[77.0095120997558,12.0325278164098],[77.0095479537523,12.0327363554697],[77.009577653059,12.0328348041017],[77.0097587462796,12.0333994085627],[77.009847536359,12.0335614667045],[77.0100013668612,12.0338103034968],[77.0101372830341,12.0339606646045],[77.0107190093569,12.0344548165255],[77.0112210369483,12.0348940953189],[77.0118563182939,12.0356025372016],[77.0122049145096,12.035961034301],[77.0131708848049,12.0369294942645],[77.0140300850735,12.0376084443391],[77.0141835641239,12.0377066085982],[77.0146347714863,12.0378359631336],[77.015236106286,12.0378925349612],[77.0157723066352,12.0378217639241],[77.0159579781068,12.0378242355389],[77.0161998832379,12.0379279905161],[77.0164064661613,12.0380492111269],[77.0170205816729,12.0385229916883],[77.0180806248168,12.0393811113353],[77.0183137946811,12.03952834686],[77.0188268199687,12.0396256797037],[77.0193101546104,12.0396303598851],[77.020733555779,12.0396125829535],[77.0210253516065,12.0396263951715],[77.021355590575,12.0396951699173],[77.0215090040421,12.0397643553894],[77.0217392361088,12.0399144921777],[77.0220286870996,12.0401803925613],[77.0220971699651,12.0404728815272],[77.0221807292527,12.0409073133813],[77.0222230568123,12.0413534322232],[77.0224220581155,12.0419991141172],[77.022511083635,12.0422538884463],[77.0226117976595,12.042468069722],[77.0231066395484,12.043582461489],[77.0236063637553,12.0442738043513],[77.0238663651798,12.0445455652399],[77.024849228454,12.0451546510711],[77.0256128240843,12.0454492775117],[77.0256246447258,12.0454443887541],[77.0257278556496,12.045428001976],[77.0258232331612,12.0454273080992],[77.0259348023941,12.0454655893024],[77.02607033355,12.0455193341604],[77.0261034968537,12.0455307135352],[77.0261077298398,12.0455321659371],[77.0261819028554,12.0455576170603],[77.026348934274,12.0455720391911],[77.0264442531591,12.0455635284156],[77.0265314490912,12.0455316208183],[77.026705777703,12.0454672176265],[77.026710699204,12.0454666892727],[77.0268288343383,12.0454395466615],[77.0268760267485,12.0454432373282],[77.0274900284874,12.0452180270654],[77.0279226194524,12.0449533431754],[77.0281345608711,12.0448485362423],[77.028293566494,12.0447902142357],[77.0284350000494,12.0447782925975],[77.0285941600886,12.0447837153776],[77.0295643614131,12.0450277284671],[77.0302486590817,12.0452579226845],[77.0305171076021,12.045364499616],[77.0306175775145,12.0454743676181],[77.0307772579889,12.0456942033501],[77.0308604517141,12.0459721672195],[77.0309500771436,12.0464703272886],[77.0309714163131,12.0467629251916],[77.0309605289984,12.0471338301754],[77.0309196212135,12.0472788025355],[77.0308375633533,12.0474702297211],[77.0307554513976,12.0476384780874],[77.0307410604826,12.0477804897968],[77.0307770868463,12.0480527696345],[77.030824874182,12.0483134329157],[77.0309673658073,12.048736133267],[77.0310442881691,12.0488576463525],[77.031130312341,12.0490863477106],[77.03127311393,12.0496365364848],[77.0313505570412,12.0499724644605],[77.0315858559058,12.0509889337263],[77.0316039064435,12.0511395608656],[77.0316037688109,12.0522956633848],[77.0317449585201,12.05339348424],[77.0317628245038,12.0534687771464],[77.0319278175849,12.0546592609759],[77.0320499033733,12.055171830119],[77.0321565679866,12.0554033789316],[77.0322809166609,12.0556348854379],[77.0323637354461,12.0557563854297],[77.033063836317,12.0564124654098],[77.0336070938402,12.0568052418782],[77.0349558676663,12.0575698887189],[77.0362982323867,12.0581201285199],[77.0377055978385,12.0587339528781],[77.0387878834866,12.0589892535582],[77.0392947737169,12.0589706614384],[77.0396808333766,12.0589552543958],[77.0399635580622,12.0588676537115],[77.0401930186999,12.0586932570765],[77.0404577016459,12.0584608263398],[77.0408607996191,12.0581846004399],[77.0409609221824,12.0581495917197],[77.0411495618216,12.0581549364667],[77.0412144456239,12.0581721656763],[77.0413738123002,12.058258710464],[77.0419113473115,12.0587152276738],[77.0426233837049,12.0594176143324],[77.0429657992055,12.0596312075223],[77.0433108701181,12.0597259979553],[77.0437647524965,12.0597249090257],[77.044137580086,12.0596450998785],[77.0441396747434,12.0596321383865],[77.0441787661134,12.0595458489001],[77.0442498891239,12.059490598703],[77.0443529243621,12.0594507500923],[77.0444482483223,12.0594422324496],[77.0445435713529,12.0594337147818],[77.0445914402195,12.0594568180393],[77.0446177827497,12.0594859865933],[77.0451636448156,12.0592898224542],[77.0453109517087,12.0592662874852],[77.0459359798862,12.0593459133746],[77.0473714901275,12.0594148902857],[77.0476516342131,12.059475062215],[77.0478228657811,12.0595905485278],[77.0481834460558,12.0599953264063],[77.0486501752495,12.0604172307651],[77.0493324130022,12.0609805923076],[77.0495213018378,12.0610844437544],[77.0501879884805,12.061320423232],[77.0507629230947,12.0614030569528],[77.0511283172838,12.0613731956822],[77.0515936585411,12.0612387814799],[77.0519436840092,12.0609568752877],[77.0522375704459,12.060620052633],[77.0525426934473,12.0600629935245],[77.0527632681991,12.0598741199841],[77.0530162986804,12.0596996558808],[77.0532812195539,12.0595657261898],[77.0536287958868,12.0594837509998],[77.0541917212379,12.0594794812233],[77.0542660497079,12.0594907135263],[77.0541757978082,12.0591286862305],[77.0546410894823,12.057403604195],[77.0541147951942,12.0569849876321],[77.0533976901581,12.0563594266356],[77.0526272275353,12.0559722608605],[77.0517346956125,12.0556632820814],[77.0505446298506,12.0545046287322],[77.0504999837346,12.0540609607428]]]]},
"properties":{"texture":"s","slope":"01","suitability":"S3"}}]}
Here is the function I have written for styling the features dynamically based on their properties:
function write_calcLayer(){
calcLayer=new ol.layer.Vector({
source: new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject,{
featureProjection: 'EPSG:3857'
}),
format: new ol.format.GeoJSON(),
}),
style: function(feature, resolution){
var S1 = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0,128,0, 1)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0,128,0, 1)'
})
});
var S2 = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,0, 1)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255,255,0, 1)'
})
});
var S3 = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgb(255,0,0,1)'
}),
stroke: new ol.style.Stroke({
color: 'rgb(255,0,0,1)'
})
});
var N = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(128,128,128, 1)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(128,128,128, 1)'
})
});
var NOA = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0,255,255, 1)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0,255,255, 1)'
})
});
if ( feature.get('suitability') == "S1") {
return [S1];
} else if(feature.get('suitability') == "S2") {
return [S2];
}
else if(feature.get('suitability') == "S3") {
return [S3];
}
else if(feature.get('suitability') == "N") {
return [N];
}
else{
return [NOA];
}
}
});
}
both the GeoJSON and the function seems to fine. This process works well for some areaa of interest but for some areas some of the polygons get black color even though I have only used only green, blue, yellow, red, and grey colours, (see the image).
To me it appears that this is happening due to polygon overlaying. Help me with identifying why those polygons are getting black color and possible solution to avoid them.
Best Answer
It was a simple mistake I blindly went with rgba color codes which was specified on some website. When I switched from rgba color codes to color names output was perfect as shown in the image.