Adding a Wrld polygon with holes
Add a Wrld polygon to a map with holes.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://unpkg.com/wrld.js@1.x.x"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" rel="stylesheet" />
</head>
<body>
<div style="position: relative">
<div id="map" style="height: 400px"></div>
<script>
var map = Wrld.map("map", "your_api_key_here", {
center: [37.7900, -122.401],
zoom: 15
});
// There's two ways to do this.
// Example A: creating a polygon with holes represented by separate arrays
var polygonPointsA = [
[37.786617, -122.404654],
[37.797843, -122.407057],
[37.798962, -122.398260],
[37.794299, -122.395234]];
var hole1 = [
[37.795168, -122.402665],
[37.792300, -122.403781],
[37.792656, -122.400420]];
var hole2 = [
[37.790979, -122.403028],
[37.790404, -122.401272],
[37.788705, -122.402579],
[37.789706, -122.403516]];
var polygonWithHoles = Wrld.native.polygon(polygonPointsA)
.addHole(hole1)
.addHole(hole2)
.addTo(map);
// Example B: creating a polygon with a hole that is represented by a nested array
var polygonPointsB = [
[[37.78273953994771, -122.40649223327635],
[37.779025458849496, -122.40187883377075],
[37.782586910155075, -122.39739418029785],
[37.78626689622757, -122.40202903747559]],
[[37.78285825179079, -122.40526914596556],
[37.77990735801459, -122.40183591842651],
[37.78243428004723, -122.398681640625],
[37.78530028168537, -122.40209341049193]]];
var polygonWithHolesB = Wrld.native.polygon(polygonPointsB)
.addTo(map);
</script>
</div>
</body>
</html>