Rendered problem with 2 FeaturesLayers created from JSON

[IonutAlixandroae1]

Hi all,

I have a simple map with 2 layers in it. The layers are FeatureLayers created by specifing the "rings" from JSON. On top of that, a simple renderer with simple fill is applied.

My problem is that 1 layer is correctly displayed and the second is not, meaning only the countour is the layer, and inside is like a hole.

Not sure if this is a problem with the renderer or with the json data.

Please see example here: https://codepen.io/ialixandroae/pen/yLYgzYv 

Correct polygon: 

Error polygon:

The layers are created from these 2 jsons:

1. const aoi1 = {"type":"Polygon","coordinates":[[[35.7129570843,35.5924058435],[35.8406162505,35.5924058435],[35.8406162505,35.4837313832],[35.7129570843,35.4837313832],[35.7129570843,35.5924058435]]],"crs":{"type":"name","properties":{"name":"EPSG:4326"}}}

2. const aoi2 = {"type":"Polygon","coordinates":[[[22.625794,44.166363],[22.744446,44.166363],[22.744446,44.27656],[22.625794,44.27656],[22.625794,44.166363]]],"crs":{"type":"name","properties":{"name":"EPSG:4326"}}}

If I test the aoi2 in the application geojson.io , basically take aoi2 data and throw it in the right panel, then in the map I get a whole polygon, no hole or contour, but with JS API I have this situation...

Many thanks!

[RalucaNicola1 · Accepted solution]

Hi Ionut, 

the winding order for your second polygon is not correct, it should be counter-clockwise for outer rings. I swapped the vertices and it should display correctly: https://codepen.io/ralucanicola/pen/bGVgYKz?editors=0010 

I was sure that this would be in the documentation, but it seems it isn't. I'll make sure to add that to the doc, thanks for the feedback!

Raluca

[IonutAlixandroae1]

Thank you very much Raluca!

I was thinking that the coordinates array might be the problem here but it didn`t not even cross my mind about the winding order  

Yup, good idea to update the docs.

Thanks again for your help!

Best,

Ionut