Point cloud example

examples/point/app.tsx

@@ -2,7 +2,10 @@ 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/typed";
-import { GeoArrowScatterplotLayer } from "@geoarrow/deck.gl-layers";
+import {
+  GeoArrowScatterplotLayer,
+  GeoArrowPointCloudLayer,
+} from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
 
 const GEOARROW_POINT_DATA =
@@ -51,19 +54,20 @@ function Root() {
 
   table &&
     layers.push(
-      new GeoArrowScatterplotLayer({
+      new GeoArrowPointCloudLayer({
         id: "geoarrow-points",
         data: table,
         // Pre-computed colors in the original table
-        getFillColor: table.getChild("colors")!,
+        getColor: table.getChild("colors")!,
+        getNormal: [0, 0, 1],
         opacity: 0.01,
-        getRadius: ({ index, data }) => {
-          const recordBatch = data.data;
-          const row = recordBatch.get(index)!;
-          return row["avg_d_kbps"] / 10;
-        },
-        radiusMinPixels: 0.1,
-        pickable: true,
+        // getRadius: ({ index, data }) => {
+        //   const recordBatch = data.data;
+        //   const row = recordBatch.get(index)!;
+        //   return row["avg_d_kbps"] / 10;
+        // },
+        // radiusMinPixels: 0.1,
+        // pickable: true,
       }),
     );
 

examples/point/generate_data.py

@@ -21,6 +21,7 @@ def main():
 
     df = pd.read_parquet(path)
     centroids = shapely.centroid(shapely.from_wkt(df["tile"]))
+    centroids = shapely.points(shapely.get_x(centroids), shapely.get_y(centroids), 0)
 
     # Save space by using a smaller data type
     df_cols = ["avg_d_kbps", "avg_u_kbps", "avg_lat_ms"]

src/index.ts

@@ -3,6 +3,7 @@ export { GeoArrowColumnLayer } from "./column-layer.js";
 export { GeoArrowH3HexagonLayer as _GeoArrowH3HexagonLayer } from "./h3-hexagon-layer.js";
 export { GeoArrowHeatmapLayer } from "./heatmap-layer.js";
 export { GeoArrowPathLayer } from "./path-layer.js";
+export { GeoArrowPointCloudLayer } from "./point-cloud-layer.js";
 export { GeoArrowPolygonLayer } from "./polygon-layer.js";
 export { GeoArrowScatterplotLayer } from "./scatterplot-layer.js";
 export { GeoArrowSolidPolygonLayer } from "./solid-polygon-layer.js";
@@ -14,6 +15,7 @@ export type { GeoArrowColumnLayerProps } from "./column-layer.js";
 export type { GeoArrowH3HexagonLayerProps as _GeoArrowH3HexagonLayerProps } from "./h3-hexagon-layer.js";
 export type { GeoArrowHeatmapLayerProps } from "./heatmap-layer.js";
 export type { GeoArrowPathLayerProps } from "./path-layer.js";
+export type { GeoArrowPointCloudLayerProps } from "./point-cloud-layer.js";
 export type { GeoArrowPolygonLayerProps } from "./polygon-layer.js";
 export type { GeoArrowScatterplotLayerProps } from "./scatterplot-layer.js";
 export type { GeoArrowSolidPolygonLayerProps } from "./solid-polygon-layer.js";