javascriptgeometryspatialhexagonal-tilesh3

How would I draw hexagonal grid using H3 in Javascript?


I want to make a system where a user will be able to draw a hexagonal grid. The regions and their coordinates will be stored in Database. We are thinking to implement H3 libary for this. How will be the library help is in making H3 hexagons all over the country?

I have made a node project with h3-js library but can't figure how which function to actually render or draw hexagons over a projection/map.


Solution

  • In general, to render H3 cells, you can get the vertexes using h3.h3ToGeoBoundary(cell) (v3) or h3.cellToBoundary(cell) (v4). This gives you an array of [lat, lng] pairs; passing true as the second argument gives you [lng, lat] pairs and closed loops appropriate for GeoJSON. You can use the geojson2h3 library to facilitate the process of converting one or more H3 cells to GeoJSON, which can be rendered to a map using Mapbox, Google Maps, or a variety of other mapping tools.

    See https://observablehq.com/@nrabinowitz/h3-tutorial-heatmap-rendering?collection=@nrabinowitz/h3-tutorial for an example of rendering cells to a map using Mapbox.