Load and Display already H3-JS binned dataset in Openlayers

Question

I have a website that uses h3-js to bin the points and store them in a geoJSON file. Then I call a function that counts the number of points in each of the hexagons after the H3-JS hexabinning and embeds these as attributes within the geoJSON (see https://github.com/uber/h3-js/issues/162). Then I save the geoJSON to disk. I can then send this GeoJSON to another user.

Now, I would like add a feature on my website that allows another user, after receiving the hexabinned GeoJSON, to load it and display the points, in OpenLayers map canvas. I was not able to find an example on the web that allows a user to upload a geoJSON (containing the binned points) which then is to be read and displayed on an Openlayers map canvas.

Basically, I have seen examples where points in a geoJSON are binned using H3-JS. However, I need to design a approach which allows users to upload and display already binned dataset. To provide more detail, I have created a 3-minute youtube video:

https://www.youtube.com/watch?v=5k51HNvygwY

Initial code for Openlayers is on jsbin. Use Firefox, or on Chrome, click Show Map and then drag the frame sideways to display. https://jsbin.com/waqojixipo/1/edit?html,output

I am sure these two functions need to be worked upon.

async function refreshMap(vectorLayer) {
      console.log('refreshMap');

      const combinedLayers = await getData();

      renderHexes(vectorLayer, combinedLayers);
    }

    function renderHexes(vectorLayer, hexagons) {
      console.log("renderHexes");

      // Transform the current hexagon map into a GeoJSON object
      const geojson = geojson2h3.h3SetToFeatureCollection(
        Object.keys(hexagons),
        (hex) => ({ value: hexagons[hex] })
      );

It is not a h3-js issue since its already binned successfully.

This would not be easy, as while saving the binned geoJSON, it has to save the h3 resolution, the hexagons, and the counts as well. Later, all this information would need to be read.

the original example from Uber H3-JS is at https://observablehq.com/@nrabinowitz/h3-tutorial-using-point-layers?collection=@nrabinowitz/h3-tutorial. In the above link I found a function that counts the number of points in each of the hexagons after the binning and embeds these as attributes within the geoJSON I found this function on the above page.

function _countPoints(h3,h3Resolution,normalizeLayer){return(
function countPoints(geojson) {
  const layer = {};
  geojson.features.forEach(feature => {
    const [lng, lat] = feature.geometry.coordinates;
    const h3Index = h3.geoToH3(lat, lng, h3Resolution);
    layer[h3Index] = (layer[h3Index] || 0) + 1;
  });
  return normalizeLayer(layer, true);
}
)}

This code can help me save the counts for each hexagon. However, when displaying the aggregated points (hexabinning), these counts have to be read. This is what I do not know how to do.

Related post: Openlayers H3 Binning works but map only displays on page load