Display Hexagons on Mapboxgl with h3-js in a React Project

There are several options for open source mapping libraries, such as google maps, mapboxgl-js, open-street-map, leaflet-js, …etc. We have developed the map display with “mapbox-gl-js” which has one of the most customizable maps compare to other libraries. To show hexagons on the map within the h3-indexes, we need to add ‘h3-js’ as a dependency in our project.

Let me share a part of the project which is a map component that shows how to set GeoJSON data for displaying polygons within mapboxgl-js and h3-js libraries.

Set features for the map to display hexagons.

In the above, I have set the features for the map(GeoJSON data)which I had to be reversed the boundaries with the result from the h3ToGeoBoundary(‘h3-indexes’) function because the data payload needs to be merged to show hexagons properly.

initialize map with the default center points

This is how initialize the map in mapboxgl-js.

adding the source data in map load

Finally, we have had to add a source to the map, which we had set features with GeoJSON data before, now ready to add as a layer to the map. We also set fill-opacity CSS property to show that the feature is clicked.

This is the map component I have developed for displaying hexagons in the project. I hope you enjoy the reading!