Show Level 1 H3 Cells on Cesium

h3_cells.js

// Drop this into https://sandcastle.cesium.com/
import * as Cesium from "cesium";
import * as h3 from "https://cdnjs.cloudflare.com/ajax/libs/h3-js/4.3.0/h3-js.es.min.js";

const someColors = [
    Cesium.Color.GOLD,
    Cesium.Color.AQUA,
    Cesium.Color.BLUEVIOLET,
    Cesium.Color.CHARTREUSE,
    Cesium.Color.CORAL,
    Cesium.Color.DEEPPINK
];

function getH3Level1Cells() {
    const level_0 = h3.getRes0Cells();
    const level_1 = [];
    for (const res0_i of level_0) {
        const children = h3.cellToChildren(res0_i, 1);
        level_1.push(...children);
    }
    return level_1;
}

function createH3GroundPrimitives(h3Indexes, alpha=0.3) {
  return h3Indexes.map(index => {
    const color = someColors[Math.floor(Math.random()*someColors.length)].withAlpha(alpha);
    const boundary = h3.cellToBoundary(index); 
    const positions = boundary.map(coords => {
      return Cesium.Cartesian3.fromDegrees(coords[1], coords[0]);
    });
    const instance = new Cesium.GeometryInstance({
      geometry: new Cesium.PolygonGeometry({
        polygonHierarchy: new Cesium.PolygonHierarchy(positions),
        height: 0 // Keep at ground level
      }),
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(color)
      }
    });
    return new Cesium.GroundPrimitive({
      geometryInstances: instance,
      appearance: new Cesium.PerInstanceColorAppearance({
        flat: true // Flat shading often looks better for data overlays
      })
    });
  });
}

const viewer = new Cesium.Viewer("cesiumContainer", {
  terrain: Cesium.Terrain.fromWorldTerrain(),
});

const primitives = createH3GroundPrimitives(getH3Level1Cells());
primitives.forEach(p => viewer.scene.primitives.add(p));

Example in sandcastle.