Leaflet.js - Can I add multiple holes/cutouts inside of a Single Polygon

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).

Answers


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.net/ve2huzxw/204/


Need Your Help

Unknown error creating a GMaps with IE8

javascript internet-explorer google-maps

I'm trying to create a Google Map on a div that it's generated dinamically and IE fails to load correctly the map and throws an error while loading all the elements "unknown error at line 25 of mai...