Atlaslog
Atlaslog / Field Notes / Styling & rendering
Field note · Styling & rendering

Hole ring winds the wrong way and the lake gets filled

Quick answer

A polygon with a 240-vertex outer boundary and an inner lake ring renders with the lake painted in the same color. Both rings wind clockwise, so nonzero fill never cancels the hole and the satellite basemap disappears underneath.

Last verified 2026-11-03 · Multiple versions · Cite this page
Applies to: Leaflet 1.9.x / Mapbox GL JS 2.15 / Canvas 2D / GeoJSON RFC 7946
Symptom
Checklist
  1. Compute the signed area of each ring with the shoelace formula; outer and inner must have opposite signs
  2. Run a QGIS validity check for `Ring Self-intersection` or `Hole lies outside shell`
  3. Temporarily switch the fill rule to `evenodd` and see whether the hole appears
  4. Compare the winding against RFC 7946: outer counter-clockwise, inner clockwise
  5. Check whether the data provider rewound rings during export
Fix

Rewind rings before rendering, outer counter-clockwise (positive area) and inner clockwise (negative), by reversing any ring whose sign does not match; as a fallback set `fill-rule: evenodd` on the SVG path via `layer._path.setAttribute('fill-rule', 'evenodd')`.

Code
function signedArea(ring) {
  let s = 0;
  for (let i = 0, n = ring.length; i < n - 1; i++) {
    s += ring[i][0] * ring[i + 1][1] - ring[i + 1][0] * ring[i][1];
  }
  return s / 2;
}

signedArea(poly[0]);   // 外环  1.2e-3  正
signedArea(poly[1]);   // 内环  3.4e-5  正  -> 同号,洞失效
function rewindPolygon(rings) {
  const out = rings.map((ring, i) => {
    const positive = signedArea(ring) > 0;
    const wantPositive = i === 0;        // 外环为正,内环为负
    return positive === wantPositive ? ring : ring.slice().reverse();
  });
  return out;
}

fc.features.forEach(f => {
  if (f.geometry.type !== 'Polygon') return;
  f.geometry.coordinates = rewindPolygon(f.geometry.coordinates);
});
Watch out
All 120 field notesChinese originalRunnable examples
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Cite this page

Atlaslog (2026). Hole ring winds the wrong way and the lake gets filled. https://www.jingweizhi.com/en/cookbook/polygon-hole-winding.html (accessed 2026-11-03).