At some zoom levels, holes in geojson features are rendered wrong

[kretz]

mapbox-gl-js version: 0.21.0

Steps to Trigger Behavior

I use geojson data like below, which is one feauture consiting of a polygon with a hole. I render it in mapbox.

{
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "type": "area"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [0.00010,0.00010],
          [0.00010,0.00004],
          [0.00008,0.00004],
          [0.00009,0.00003],
          [0.00007,0.00003],
          [0.00008,0.00002],
          [0.00000,0.00002],
          [0.00010,0.00010]
        ],
        [
          [0.00006,0.00004],
          [0.00007,0.00003],
          [0.00009,0.00003],
          [0.00008,0.00004],
          [0.00006,0.00004]
        ]
      ]
    }
  }]
}

Expected Behavior

The hole should always be rendered correctly, like the image below. This is zoom level 18.

### Actual Behavior

At certain zoom levels, the hole is not like to should. This is zoom level 17.

[lucaswoj]

It looks to me as though you are trying to render a complex polygon. Mapbox GL JS's behavior in this case is undefined.

Can you confirm @mourner @mapsam?

[kretz]

Yes, it is a complex polygon. i.e. is has holes. I was expecting it to work since it is supported in the GeoJSON spec, http://geojson.org/geojson-spec.html#id4.

Also, other geojson rendering tools I have tried does this successfully; Openlayers, Leaflet. There are even bugs that have been fixed on mapbox-gl-js that support holes; #1202.

I stumbled upon this bug just because we are rendering at this precis zoom level.

(And regarding the #1202 issue, I suspect that this is not a polygon winding issue, as I tried rewinding just in case without luck.)

Also, here is a jsbin link for the curious; https://output.jsbin.com/joruwi/5. Try zooming in and out until the rendering changes.

[lucaswoj]

The problem isn't the holes -- we support those! The problem seems to be that the that the 2nd ring is outside of the 1st ring. The 1st ring defines the outer perimeter of the polygon and subsequent rings define holes in the polygon, subject to the even-odd rule.

It is unfortunate that other map renderers, including Leaflet, differ in behaviour in this case.

[kretz]

I'm not sure what the definition is, but the hole in the example shares 3 coordinates with the outer perimeter. I would have guessed that was inside?

This is what the polygon looks like without the hole.

[lucaswoj]

@kretz Is your desired effect a solid polygon and a diamond-shaped stroke?

[kretz]

The reason for the weirdly shaped polygon is that this was the only way I could get the effect. It is a simplified version of a more complex shape of a building.

[lucaswoj]

Would it be accurate to say that you want the 2nd ring to "subtract" from the 1st ring?

[kretz]

Yep, exactly.

[lucaswoj]

Unfortunately the spec we are working from doesn't allow interior rings to be coincident with the exterior ring. You need to do this subtraction operation outside of GL JS https://www.mapbox.com/vector-tiles/specification/#winding-order

[kretz]

Alright, thanks for taking the time to explain it!