turf

turf copied to clipboard

I try to use function 'hexgrid' to fill the whole world, with bbox = [-180, -90, 180, 90], mask is the featureCollection with coordinates from -180 to 180. But what I got from 'hexgrid' is an empty Array.-> {type: "FeatureCollection", features: Array(0)}. I wonder how to get the proper fill-map. Thanks!

I tried to do this myself but struggled to find a satisfactory result. Maybe @rowanwins would know best?

I can attest that hexGrid seems to behave very strangely. When given a bbox = [-180, -90, 180, 90], I get no features at all. Interestingly, if I use turf v 2.0 directly from mapbox api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js, I can create a hex grid for the entire world.

const bbox = [-179.84, -60, 179, 74];
const cellSide = 1;
const units = 'kilometers';
const hexgrid = turf.hexGrid(bbox, cellSide, 'kilometers');

// using Leafletjs
L.geoJSON(hexgrid).addTo(map); // this works

Strangely, I have set the cellSide = 1 which makes no sense with kilometers units. Of course, the cells are not 1 km in size (there would be millions of them for the whole world, and my browser would crash). But making the cell size bigger makes them too big. At cell size of 1000, one cell covers the entire world. I discovered this when searching for answers I came across https://github.com/muxlab/map-effects-100/blob/gh-pages/Leaflet/10_hex-grid-with-turf.html

Whatever the change from v 2.0.0 to the current version 6.x, seems like hexGrid has gone through some changes that have not been documented clearly.

Would be nice if someone can shed more light on what is going on.

Update: adding some more code to reproduce the baffling behavior of [email protected]

const EARTH = 510000000; // 510M sq kms
const hexarea = (side) => 3 * Math.sqrt(3) * side * side / 2;
// https://www.math.net/area-of-a-hexagon
const bbox = [-179.99, -90, 179.99, 90];
const options = { units: 'kilometers' };

const output = (side) => {
    const area_of_hex = hexarea(side);
    const grid = turf.hexGrid(bbox, side, options);
    
    console.log(`area of hexagon of side ${side} kms: ${area_of_hex}`);
    console.log(`number of hexagons to cover the earth: ${EARTH / area_of_hex}`);
    console.log(`num of hexagons generated by turf: ${grid.features.length}`);
    console.log(grid);
    console.log('----------------------------')
}

output(500);
output(1);
output(10);

area of hexagon of side 500 kms: 649519.052838329
number of hexagons to cover the earth: 785.1963660978911
num of hexagons generated by turf: 0
{ type: 'FeatureCollection', features: [] }
----------------------------
area of hexagon of side 1 kms: 2.598076211353316
number of hexagons to cover the earth: 196299091.52447274
num of hexagons generated by turf: 11555
{
  type: 'FeatureCollection',
  features: [
    { type: 'Feature', properties: {}, geometry: [Object] },
    { type: 'Feature', properties: {}, geometry: [Object] },
    … 98 more lines as above …
    ... 11455 more items
  ]
}
----------------------------
area of hexagon of side 10 kms: 259.8076211353316
number of hexagons to cover the earth: 1962990.9152447276
num of hexagons generated by turf: 0
{ type: 'FeatureCollection', features: [] }

@punkish I'm experiencing the same issue you described but with squareGrid instead of hexgrid. Have you found any solution or another library to accomplish this mindboggling task?

@alex-streza unfortunately I had no luck with @turf and I gave up on it. Instead, I went with H3 and am very happy. It is fast, well-documented, and just what I needed

H3 should be the solution here. A hexagonal tiling of a sphere is impossible, so H3 uses a few pentagons.