deck: initialization of H3HexagonLayer. TypeError: Cannot read properties of undefined (reading 'hexagon')

[kiyosoft]

when I tried to use the GeoArrowH3HexagonLayer

I am getting the following error, it doesn't seem to get hexagon from getHexagon

deck: initialization of H3HexagonLayer({id: 'geoarrow-polygons-geoarrow-polygons-geoarrow-arc-0'}): Cannot read properties of undefined (reading 'hexagon') TypeError: Cannot read properties of undefined (reading 'hexagon')

import React, { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
import DeckGL, { Layer, PickingInfo } from "deck.gl";
import { _GeoArrowH3HexagonLayer } from "@geoarrow/deck.gl-layers";
import * as arrow from "apache-arrow";

const GEOARROW_POLYGON_DATA = "http://localhost:8080/h3.arrow";

const INITIAL_VIEW_STATE = {
  latitude: 40.63403641639511,
  longitude: -111.91530172951025,
  zoom: 11,
  bearing: 0,
  pitch: 0,
};

const MAP_STYLE =
  "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json";
const NAV_CONTROL_STYLE = {
  position: "absolute",
  top: 10,
  left: 10,
};

function Root() {
  const onClick = (info: PickingInfo) => {
    if (info.object) {
      console.log(JSON.stringify(info.object.toJSON()));
    }
  };

  const [table, setTable] = useState<arrow.Table | null>(null);

  useEffect(() => {
    // declare the data fetching function
    const fetchData = async () => {
      const data = await fetch(GEOARROW_POLYGON_DATA);
      const buffer = await data.arrayBuffer();
      const table = arrow.tableFromIPC(buffer);
      setTable(table);
    };

    if (!table) {
      fetchData().catch(console.error);
    }
  });

  const layers: Layer[] = [];

  table &&
    layers.push(
      new _GeoArrowH3HexagonLayer({
        id: "geoarrow-polygons",
        data: table,
        getColor: [0, 100, 60, 160],
        getHexagon: table.getChild("l12")!,
        pickable: true,
        autoHighlight: true,
      }),
    );

  return (
    <DeckGL
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      layers={layers}
      ContextProvider={MapContext.Provider}
      onClick={onClick}
    >
      <StaticMap mapStyle={MAP_STYLE} />
      <NavigationControl style={NAV_CONTROL_STYLE} />
    </DeckGL>
  );
}

/* global document */
const container = document.body.appendChild(document.createElement("div"));
createRoot(container).render(<Root />);

[kylebarron]

I haven't actually used the _GeoArrowH3HexagonLayer yet. It may be that the underlying H3HexagonLayer works in a different way than other layers. Are you able to provide the full traceback?

[kiyosoft]

hook.js:608 deck: initialization of GeoArrowH3HexagonLayer({id: 'geoarrow-hexagon-layer'}): Cannot read properties of undefined (reading 'data') TypeError: Cannot read properties of undefined (reading 'data')
    at GeoArrowH3HexagonLayer._renderLayersPoint (h3-hexagon-layer.js:40:43)
    at GeoArrowH3HexagonLayer.renderLayers (h3-hexagon-layer.js:26:21)
    at GeoArrowH3HexagonLayer._postUpdate (composite-layer.js:194:40)
    at GeoArrowH3HexagonLayer._update (layer.js:793:18)
    at GeoArrowH3HexagonLayer._initialize (layer.js:733:14)
    at LayerManager._initializeLayer (layer-manager.js:287:19)
    at LayerManager._updateSublayersRecursively (layer-manager.js:254:26)
    at LayerManager._updateLayers (layer-manager.js:221:14)
    at LayerManager.setLayers (layer-manager.js:161:14)
    at LayerManager.updateLayers (layer-manager.js:172:18)

Here is the full stacktrace

[kiyosoft]

Any update on this one?

[kylebarron]

I don't have bandwidth to really dig into this right now. Your traceback seems to be giving a different error than the initial error.

Can you show the schema of your Arrow data?

It looks like this line is failing https://github.com/geoarrow/deck.gl-layers/blob/598a62cdae112129e12d43067d4f724f3742c9ed/src/layers/h3-hexagon-layer.ts#L86

That makes it sound like you're not passing in the data prop. Can you provide a reproducible example?