turf-squareGrid

Takes a bounding box and a cell depth and returns a FeatureCollection of Polygon features in a grid.

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <link rel="stylesheet" href="assets/css/styles.css" type="text/css">
    <script src="//cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
    <script src="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <script src="assets/js/es6-promise.min.js"></script>
    <title>Turf and OpenLayers 3 - squareGrid</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">

      // Declare a source for polygons
      var vectorSourcePolygons = new ol.source.Vector();

      var vectorLayerPolygons = new ol.layer.Vector({
        source: vectorSourcePolygons,
        style: [
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: [0, 121, 88, 1],
              width: 1
            })
          })
        ]
      });

      // Instanciate a map and add layers
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          vectorLayerPolygons
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([-1.5603, 47.2383]),
          zoom: 5
        })
      });

      var poly = turf.squareGrid([-5, 42, 9, 52], 100, 'kilometers');

      vectorSourcePolygons.addFeatures((new ol.format.GeoJSON()).readFeatures(poly, {
        featureProjection: 'EPSG:3857'
      }));

    </script>
  </body>
</html>

results matching ""

    No results matching ""