Looking over the documentation for the L.Polygon constructor, it looks like you can pass in multiple arrays of coordinates after the initial array to construct a Polygon, with multiple holes in it.

I tried a few small samples of data with multiple arrays, and the holes were shaded in after the first one was added. But when one is added, it worked fine.

Coming from MSSQL, the shapes are reported as valid using the geometry::STIsValid function.

Is my data incorrect, or is this not supported at the time? The documentation would suggest it is supported. And every example I find on stackoverflow or the general internet only shows single holes.

This is also with the L.Polygon function (not GeoJSON).

Looking over the documentation for the L.Polygon constructor, it looks like you can pass in multiple arrays of coordinates after the initial array to construct a Polygon, with multiple holes in it.

I tried a few small samples of data with multiple arrays, and the holes were shaded in after the first one was added. But when one is added, it worked fine.

Coming from MSSQL, the shapes are reported as valid using the geometry::STIsValid function.

Is my data incorrect, or is this not supported at the time? The documentation would suggest it is supported. And every example I find on stackoverflow or the general internet only shows single holes.

This is also with the L.Polygon function (not GeoJSON).

• javascript
• geolocation
• leaflet
• polygon
• shapes

• Could you give an example of the array you pass to L.Polygon? – iH8 Commented Mar 15, 2016 at 17:08
• iH8, this has been answered and confirmed for me below. The issue seems to be with the UNION'ed shapes ing back from MSSQL for me. – Mark P Commented Mar 23, 2016 at 20:35

1 Answer 1

Looks to work with multiple holes:

var coords = [
  [ // Exterior Ring
    [48.84, 2.3],
    [48.9, 2.3],
    [48.9, 2.4],
    [48.84, 2.4],
    [48.84, 2.3]
  ], // Then holes (interior rings)
  [ // First hole
    [48.85, 2.31],
    [48.89, 2.31],
    [48.89, 2.33],
    [48.85, 2.33],
    [48.85, 2.31]
  ],
  [ // Second hole
    [48.85, 2.34],
    [48.89, 2.34],
    [48.89, 2.35],
    [48.85, 2.35],
    [48.85, 2.34]
  ],
  [ // Third hole
    [48.85, 2.36],
    [48.89, 2.36],
    [48.89, 2.39],
    [48.85, 2.39],
    [48.85, 2.36]
  ]
];

L.polygon(coords).addTo(map);

JSFiddle: http://jsfiddle/ve2huzxw/204/