Turf: Is there a method to rotate the squareGrid?

[chan-dev]

Is there a way to rotate the squareGrid?

Here's what i have right now.

Link to source

What i want is for the grid to rotate to align with the angle of a polygon shape in google maps.

var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 3,
  maxZoom: 8,
  minZoom: 2,
  center: {
    lat: 0,
    lng: -180
  },
  streetViewControl: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var triangleCoords = [
  { lat: 25.774, lng: -80.19 },
  { lat: 18.466, lng: -66.118 },
  { lat: 32.321, lng: -64.757 },
  { lat: 25.774, lng: -80.19 }
];

// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.35
});
bermudaTriangle.setMap(map);

const polygonMap = bermudaTriangle.getMap();
const projection = polygonMap.getProjection();

google.maps.Polygon.prototype.my_getBounds=function(){
    var bounds = new google.maps.LatLngBounds()
    this.getPath().forEach(function(element,index){bounds.extend(element)})
    return bounds
}

let coordinates = [];

// convert to bermudaTriangle path to geojson
for (let point of bermudaTriangle.getPath().getArray()) {
  coordinates.push([point.lng(), point.lat()]);
}

const bounds = bermudaTriangle.my_getBounds();
const center = bounds.getCenter().toJSON();

const geojson = turf.polygon([coordinates]);

const pivot = [center.lng, center.lat];
const options = {pivot: pivot};
const rotatedPoly = turf.transformRotate(geojson, 0, options);
const bbox = turf.bbox(rotatedPoly);

const grid = turf.squareGrid(bbox, 50, {
  units: "miles",
  // mask: geojson
});

map.data.addGeoJson(grid);

[stebogit]

@chan-dev this is a tough one.
I believe you could try using @turf/transform-rotate on each square of the grid, using as origin of rotation the center of rotation for the big square "containing" the square grid.
Does that help?

[chan-dev]

@stebogit right now i have no idea how to achieve that. Isn't the grid generated a single unit? How do i deal with each grid cell?

[dpmcmlxxvi]

@chan-dev The grid is a just feature collection. Just iterate over the collection with, for example, @turf/meta.featureEach and apply @turf/transform-rotate to each feature (i.e., cell).

[chan-dev]

@dpmcmlxxvi thanks, i didn't know about that. I'll give it a try

But isn't that an expensive task to do having to rotate each grid cell?

[dpmcmlxxvi]

@chan-dev It's only as expensive as the number of grid cells you have. I don't see how to rotate them without rotating each cell. The other alternative would be to rotate the polygon first then create the grid, but turf doesn't support that.

Also, remember to use @stebogit's suggestion to use a fixed origin otherwise they will each get a different origin which is probably not what you want.

[chan-dev]

@dpmcmlxxvi would u mind if you can provide a snippet with rotating from a fixed origin?

[dpmcmlxxvi]

@chan-dev The documentation provides a snippet on using it.

https://turfjs.org/docs/#transformRotate

[chan-dev]

@dpmcmlxxvi @stebogit

I was able to rotate the grid now

Here's a snippet

const rotatedGrid = turf.featureCollection([]);

turf.featureEach(grid, (feature, i) => {
  const options = {pivot: pivot};
  const rotatedPoly = turf.transformRotate(feature, 10, options);
  rotatedGrid.features.push(rotatedPoly);
})

I have to create a featureCollection and then append each rotated cell. Can you guys suggest any solution that's more efficient than this?

[stebogit]

@chan-dev I don't think there is really a more efficient way.
I can only suggest a shorter/prettier, though not tested, version (no optimization, just a more compact form thanks to ES6 syntax):

const rotatedGrid = turf.featureCollection(
  grid.features.map((feature) => turf.transformRotate(feature, 10, {pivot}))
);

[dpmcmlxxvi]

I think @stebogit is correct. You have to transform each and store it somewhere. Except for saving a little memory by saving in place in the original collection, that's as good as it's going to get. Besides, unless you have a specific efficiency bottleneck, I wouldn't worry about preemptively optimizing code.

[chan-dev]

@stebogit @dpmcmlxxvi .

Oh i see, this is the only solution available.
I was searching for the solution for days regarding this and finally found one with your help. Thanks a lot guys for your help.