Failing to correctly fill GeoJSON Multipolygon

1. A concise explanation of the problem you’re experiencing.

I am loading a GeoJSON file that contains a MultiPolygon feature. Only one of the polygons is correctly rendered with a fill.

The same GeoJSON file renders and is correctly filled when using other readers such as QGIS.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

See example here: https://jsfiddle.net/dazzag/8eom035v/23/

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I want to have the regions filled when displayed on the map.

4. The Cesium version you’re using, your operating system and browser.

**Cesium.js used: **https://cesiumjs.org/Cesium/Build/Cesium/Cesium.js as of 10/05/2019

Google Chrome
74.0.3729.131 (Official Build) (64-bit) (cohort: Stable)
Revision
518a41c1fa7ce1c8bb5e22346e82e42b4d76a96f-refs/branch-heads/3729@{#954}
OS
Windows 10 OS Build 17763.437
JavaScript
V8 7.4.288.26

I think there might be something wrong with that GeoJSON. I tried loading it in GeoJSON.io (http://geojson.io) but it wouldn’t display. In LeafletJS it seems to only display one polygon as well.

It might be a corner case that QGIS is doing additional work to handle perhaps? Have you tried it successfully in any other viewers?

HI Omar,

Thank you for your reply.

I’ve fixed the geojson now and it loads in geojson.io. It was working when I posted, but I was fiddling with the geojson on the gist and suspect I broke it.

http://geojson.io/#id=gist:dazzag24/73155a22225bb6bbd6781e2689fa3d51&map=6/8.516/-1.648

See updated jsfiddle

https://jsfiddle.net/dazzag/wo75cv96/

I am still obswerving that only one of the polygons is filled when rendering using Cesium.

I suspect some kind of winding issue.

Thanks

Darren

Hi Darren,

You are correct about there being a winding order issue. I used QGIS to confirm this. FYI, it turns out that the first polygon in your example is ordered properly.

In 2016 the GeoJSON specification was modified to state that linear rings follow the right-hand rule such that exterior ring vertices are ordered counterclockwise. Guidance is further given that a parser should not reject polygons that are do not follow the right-hand rule. Cesium is not rejecting them, but is treating them as interior linear rings and are therefore left unfilled.

Not sure you can do much but fix the vertex order.

Scott

Ok, I see what the issue is. Cesium is reading this as one big polygon with many pieces, the first piece is interpreted as the outer polygon, and the others are interpreted as holes, hence no fill.

You can tell there’s nothing wrong with any of the individual polygons because if you swap the order around, the first polygon in the list will always be filled. The problem here is you need an extra layer of nesting (that’s why the first works and the second does not). So here’s two of the polygons as defined in the incorrect version:

{

“type”: “FeatureCollection”,

“features”: [

{

“type”: “Feature”,

“geometry”: {

“type”: “MultiPolygon”,

“coordinates”: [

[

[[3.912,4.689],[3.932,4.708],[3.957,4.692],[3.937,4.673],[3.912,4.689]],

[[-0.168,7.059],[-0.192,7.075],[-0.215,7.091],[-0.239,7.108],[-0.263,7.124],[-0.265,7.159],[-0.268,7.194],[-0.271,7.229],[-0.274,7.264],[-0.253,7.283],[-0.23,7.266],[-0.206,7.25],[-0.183,7.234],[-0.18,7.199],[-0.156,7.182],[-0.133,7.166],[-0.13,7.131],[-0.127,7.096],[-0.103,7.08],[-0.08,7.063],[-0.1,7.045],[-0.145,7.042],[-0.168,7.059]]

]

]

},

“properties”: {

“title”: “Some variable”

}

}

]

}

``

Only one of these will be filled. Even in geojson.io you can see it’ll only zoom to the first one.

Here it is with the correct nesting:

{

“type”: “FeatureCollection”,

“features”: [

{

“type”: “Feature”,

“geometry”: {

“type”: “MultiPolygon”,

“coordinates”: [

[

[[3.912,4.689],[3.932,4.708],[3.957,4.692],[3.937,4.673],[3.912,4.689]]

],

[

[[-0.168,7.059],[-0.192,7.075],[-0.215,7.091],[-0.239,7.108],[-0.263,7.124],[-0.265,7.159],[-0.268,7.194],[-0.271,7.229],[-0.274,7.264],[-0.253,7.283],[-0.23,7.266],[-0.206,7.25],[-0.183,7.234],[-0.18,7.199],[-0.156,7.182],[-0.133,7.166],[-0.13,7.131],[-0.127,7.096],[-0.103,7.08],[-0.08,7.063],[-0.1,7.045],[-0.145,7.042],[-0.168,7.059]]

]

]

},

“properties”: {

“title”: “Some variable”

}

}

]

}

``

This will fill both in Cesium and correctly zoom to both in geojson.io