CODEWITHSUNDEEP
javascriptgeolocationleafletpolygonshapes
Mark P
Mark P

Reputation: 21

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

Upvotes: 2

Views: 3055

Answers (1)

ghybs
ghybs

Reputation: 53185

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/

enter image description here

Upvotes: 8

Related Questions