wrld.js

Adding a Wrld polygon with holes

Add a Wrld polygon to a map with holes.

<!DOCTYPE HTML>
<html>
  <head>
    <script src="https://cdn-webgl.wrld3d.com/wrldjs/dist/latest/wrld.js"></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 = L.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 = L.Wrld.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 = L.Wrld.polygon(polygonPointsB)
        .addTo(map);
        
    </script>
  </div>
  </body>
</html>
v0.1.1452