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:


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) {

      const combinedLayers = await getData();

      renderHexes(vectorLayer, combinedLayers);

    function renderHexes(vectorLayer, hexagons) {

      // Transform the current hexagon map into a GeoJSON object
      const geojson = geojson2h3.h3SetToFeatureCollection(
        (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

  • 1
    It's not clear what do you mean by "who has received the binned dataset". What is this "binned dataset"? And what is "binned geoJSON"? Please edit your question and add more info.
    – TomazicM
    Feb 17 at 18:44
  • Edited. binned dataset was referring to hexabinned dataset. Feb 17 at 21:14
  • 1
    Sorry, but I still don't get it. Since this hexabinning is not my area, I would have to go through the whole logic of your app to understand anything. If you are willing to explain each step of your app and it's logic/data flow, I'm willing to try to find the solution.
    – TomazicM
    Feb 17 at 21:36


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.