H3 - Show hexagons all over India

Question

I am trying to show the hexagons all over the world, (at least all over India) using H3 on my Leaflet map. I have tried the below logic but it doesn't work:

Logic:

const boundingBoxIndia = [
[38.11727165830543, 76.37695312500001],
[23.785344805941214, 67.41210937500001],
[6.293458760393985, 77.16796875000001],
[28.51696944040106, 98.525390625],
];

const cellIdsInIndia = h3.polyfill(boundingBoxIndia, 13, true);

const hexagonsInIndia = [];
const hexagonInIndia = cellIdsInIndia?.map((cellId, i) => {
  const polygon = h3.h3ToGeoBoundary(cellId, false);
  return [polygon];
});
hexagonsInIndia.push(hexagonInIndia);

In render:

<IndiaCells cellGroups={hexagonsInIndia} />

Component

const IndiaCells = (props) => {
if (props.cellGroups?.length) {
  return props.cellGroups.map((cells, index) => {
    return cells.map(([polygon], groupIndex) => {
      return (
        <div key={groupIndex}>
          <Polygon
            positions={polygon}
            pathOptions={{...}}
          ></Polygon>
        </div>
      );
    });
  });
} else {
  return null;
}
};

I am able to render other hexagons for a smaller sample by the same logic. Also the above code takes a lot of time to load the map but hexagons aren't visible. Looks like size might be an issue here. Is there any better way to show the H3 hexagon grids all over the map? Something like this:

score 1 · Accepted Answer · answered Jun 21 '22 at 21:13

I think you simply have too many H3 cells for the map to handle. Using your bounding box above, h3.polyfill(boundingBoxIndia, 8, true) yields over 1.5M cells - at resolution 13, you're looking at that number times 7^5, or roughly 25.4 billion cells. I'm guessing that you don't see any cells because the polyfill operation runs out of memory, though I'm somewhat surprised that the page doesn't hang completely.

In general, if you want to render cell boundaries at some fine grain, you need to render only the current viewport (and stop rendering when the expected count gets too high, e.g. when you zoom out). See this h3-viewer project for an example of per-viewport rendering using Leaflet.

Yes, you are right. It renders when I reduce the resolution in `h3.polyfill(boundingBoxIndia, 8, true)` as there are less number of cells. I might have to think of some better approach for performance as I would also need to toggle them conditionally. — Premshankar Tiwari, Jun 23 '22 at 18:13

H3 - Show hexagons all over India

1 Answers1