2

The turf.rectangleGrid function from turf.js (https://www.npmjs.com/package/@turf/rectangle-grid) makes rectangles inside a bbox, but I want them in a polygon.

The options take in a mask: Polygon not sure what to do maybe pass in a bboxPolygon?

 initNewPolygon() {
      let coords = {
        "type": "FeatureCollection",
        "features": [
          {
            "type": "Feature",
            "properties": {},
            "geometry": {
              "type": "Polygon",
              "coordinates": [
                [
                  [
                    -8.184642791748047,
                    54.63688952465295
                  ],
                  [
                    -8.187904357910156,
                    54.63038157286219
                  ],
                  [
                    -8.178634643554688,
                    54.62665517743962
                  ],
                  [
                    -8.17159652709961,
                    54.63167331025528
                  ],
                  [
                    -8.176488876342773,
                    54.63534956905763
                  ],
                  [
                    -8.184642791748047,
                    54.63688952465295
                  ]
                ]
              ]
            }
          }
        ]
      };

      // bbox next to donegal
      let rectangleNew = L.geoJSON(coords).addTo(this.map);

      // bbox = min Longitude , min Latitude , max Longitude , max Latitude
      
      let bbox = [-8.184642791748046, 54.63038157286219, -8.178634643554688, 54.63167331025528]

      let cellWidth = 0.05;
      let cellHeight = 0.05;

      // let polygonn = turf.polygon([
      //             [
      //               -8.184642791748047,
      //               54.63688952465295
      //             ],
      //             [
      //               -8.187904357910156,
      //               54.63038157286219
      //             ],
      //             [
      //               -8.178634643554688,
      //               54.62665517743962
      //             ],
      //             [
      //               -8.17159652709961,
      //               54.63167331025528
      //             ],
      //             [
      //               -8.176488876342773,
      //               54.63534956905763
      //             ],
      //             [
      //               -8.184642791748047,
      //               54.63688952465295
      //             ]
      //           ]);

      // let options = { units: "kilometers", mask: polygonn};

      let options = { units: "kilometers"};

      let newRectangleGrid = rectangleGrid(
        bbox,
        cellWidth,
        cellHeight,
        options
      );

      let addToMap = [newRectangleGrid];

      L.geoJSON(addToMap).addTo(this.map);

    },
0

1 Answer 1

4

This is going to be step-by-step answer. turf.squareGrid method will be used for grid creation since turf.rectangleGrid is fairly new and I couldn't find corresponding turf.min.js library.

First bounding box is calculated for coordinates polygon with turf.bbox method. Corresponding layer is created just for visual representation:

let coordsLayer = L.geoJSON(coords).addTo(map);

let bbox = turf.bbox(coords);
let bboxLayer = L.geoJSON(turf.bboxPolygon(bbox)).addTo(map);
map.fitBounds(bboxLayer.getBounds());

This is the result:

enter image description here

Then grid is created, using computed bbox and coords GeoJSON polygon:

let coordsLayer = L.geoJSON(coords).addTo(map);

let bbox = turf.bbox(coords);
let bboxLayer = L.geoJSON(turf.bboxPolygon(bbox)).addTo(map);
map.fitBounds(bboxLayer.getBounds());

let cellWidth = 0.05;
let cellHeight = 0.05;

let options = { units: "kilometers", mask: coords};
let squareGrid = turf.squareGrid(
  bbox,
  cellWidth,
  options
);

L.geoJSON(squareGrid).addTo(map);      

This is the result:

enter image description here

Since grid from calculated bbox does not cover the polygon, obviously bbox has to be extended by the width of the grid, using turf.buffer method:

let coordsLayer = L.geoJSON(coords).addTo(map);

let bbox = turf.bbox(coords);
let bboxLayer = L.geoJSON(turf.bboxPolygon(bbox)).addTo(map);
map.fitBounds(bboxLayer.getBounds());

let cellWidth = 0.05;
let cellHeight = 0.05;

let bufferedBbox = turf.bbox(turf.buffer(coords, cellWidth, {units: 'kilometers'}));
let options = { units: "kilometers", mask: coords};
let squareGrid = turf.squareGrid(
  bufferedBbox,
  cellWidth,
  options
);

L.geoJSON(squareGrid).addTo(map); 

This is the result:

enter image description here

What is left now is to cut off parts of grid that is outside of the polygon. This is done with the help of turf.intersect method, while iterating through all the square features/polygons of the grid (bbox display is left out now):

let coordsLayer = L.geoJSON(coords).addTo(map);

let bbox = turf.bbox(coords);

let cellWidth = 0.05;
let cellHeight = 0.05;

let bufferedBbox = turf.bbox(turf.buffer(coords, cellWidth, {units: 'kilometers'}));
let options = { units: "kilometers", mask: coords};
let squareGrid = turf.squareGrid(
  bufferedBbox,
  cellWidth,
  options
);

let clippedGridLayer = L.geoJSON().addTo(map);
turf.featureEach(squareGrid, function (currentFeature, featureIndex) {
  let intersected = turf.intersect(coords.features[0], currentFeature);
  clippedGridLayer.addData(intersected);
});
map.fitBounds(clippedGridLayer.getBounds());

This is then the final result:

enter image description here

Here is working JSFiddle: https://jsfiddle.net/TomazicM/0dj4nqsb/

9
  • Hi thank you so much, this is what I was looking for, but the code does not want to work not sure it has consts that arent being used and cell height isn't being passed? any chance you could look at the code you gave me the final one and see if its 100%, thank you so much though!!! Jun 30, 2021 at 16:11
  • cell height isnt used and once i copied the coee there is no squares on the polygon but its not throwing errors either dont know whats up at all Jun 30, 2021 at 16:17
  • after step 2 when i put that code in it does not give me any rectangles inside Jun 30, 2021 at 16:19
  • 1
    GIS SE site is intended for focused questions, which means one question per question. If you have additional question, please publish it as a new question.
    – TomazicM
    Jun 30, 2021 at 16:41
  • 1
    If your code does not work, it means that there something wrong with it. Compare it with the JSFiddle code and check for differences.
    – TomazicM
    Jun 30, 2021 at 16:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.