Turf.js grids

<!DOCTYPE html>
<html>

  <head>
    <link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" />
    <link href="http://leaflet.github.io/Leaflet.label/leaflet.label.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  </head>

  <body>
    <div id="map"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet-src.js"></script>
    <script src="http://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js'></script>
    <script src="script.js"></script>
  </body>

</html>

var map = L.map('map', {}).setView([0, 0], 1);

jQuery('document').ready(main);

function main() {
  // loadTurfGrid('point', -160);
  loadTurfGrid('hex', -80);
  loadTurfGrid('triangle', 0);
  loadTurfGrid('square', 80);
}

L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 16,
  atribution: 'Map data &copy; OSM.org'
}).addTo(map);

function loadTurfGrid(pattern, west) {
  var latMax = 70;
  var bbox = [west, -latMax, west + 50, latMax]
  var geojson = turfGrid(pattern, bbox, 500);
  var propertyNames = ['n1', 'n2', 'n3', 'm1', 'm2', 'm3', 's1', 's2', 's3', 'f1', 'f2', 'f3', ]
  var gridLayer = L.geoJson(geojson, {
    style: {
      weight: 1,
      fillOpacity: 0
    }
  })

  map.addLayer(gridLayer);
}

function turfGrid(pattern, extent, width) {
  var units = 'kilometers';
  if (pattern === 'hex') {
    return turf.hexGrid(extent, width, units);
  } else if (pattern === 'triangle') {
    return turf.triangleGrid(extent, width, units);
  } else if (pattern === 'point') {
    return turf.pointGrid(extent, width, units);
  }
  return turf.squareGrid(extent, width, units);
}

#map{
  height: 600px
}

Turf grid examples.