geoarrow · kylebarron · Apr 15, 2026 · Apr 15, 2026 · Apr 15, 2026
diff --git a/examples/point/README.md b/examples/point/README.md
@@ -1,24 +1,38 @@
-## Example: Use `@geoarrow/deck.gl-layers` with GeoArrow point data
+# Example: GeoArrowScatterplotLayer
 
-## Data for example:
+Visualize point data from a GeoArrow table using `GeoArrowScatterplotLayer`.
+Data: Ookla mobile network performance tile centroids, 2019-01-01.
 
-Install [`uv`](https://docs.astral.sh/uv/), then run
+## Generate the data
+
+The example expects a local GeoArrow feather file. Install
+[`uv`](https://docs.astral.sh/uv/), then from this directory run:
 
 ```
 uv run generate_data.py
 ```
 
-## Serve data
+This downloads ~150MB of source data and writes
+`2019-01-01_performance_mobile_tiles.feather`.
+
+## Serve the data
+
+The file is served over HTTP so the browser can fetch it:
 
 ```
 npx http-server --cors
 ```
 
-## Usage
+## Run the example
 
-To install dependencies, run `npm install` at the top level of this workspace, not in this directory.
+From the repository root, install dependencies once:
+
+```
+pnpm install
+```
 
-Commands:
+Then from this directory:
 
-* `npm run start` is the development target, to serve the app and hot reload.
-* `npm run build` is the production target, to create the final bundle and write to disk.
+- `pnpm dev` — start the dev server (http://localhost:3000) with hot reload
+- `pnpm build` — build the production bundle
+- `pnpm preview` — preview the production build
diff --git a/examples/point/app.tsx b/examples/point/app.tsx
diff --git a/examples/point/index.html b/examples/point/index.html
@@ -1,13 +1,22 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>deck.gl GeoArrowPointLayer Example</title>
-  <style>
-    body {margin: 0; width: 100vw; height: 100vh; overflow: hidden;}
-  </style>
-</head>
-<body>
-</body>
-<script type="module" src="app.tsx"></script>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GeoArrowScatterplotLayer Example</title>
+    <style>
+      body {
+        margin: 0;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      }
+      #root {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/examples/point/package.json b/examples/point/package.json
@@ -2,27 +2,31 @@
   "name": "deckgl-example-geoarrow-point-layer",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "license": "MIT",
   "scripts": {
-    "start": "vite --open",
-    "build": "vite build"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
+    "@deck.gl/core": "^9.3.0",
+    "@deck.gl/layers": "^9.3.0",
+    "@deck.gl/mapbox": "^9.3.0",
     "@geoarrow/deck.gl-layers": "workspace:^",
     "@loaders.gl/compression": "^4.1.4",
     "@loaders.gl/crypto": "^4.1.4",
-    "apache-arrow": ">=14",
-    "deck.gl": "^9.2.1",
-    "react-dom": "^18.0.0",
-    "react-map-gl": "^5.3.0",
-    "react": "^18.0.0"
+    "@luma.gl/core": "^9.3.0",
+    "apache-arrow": ">=21",
+    "maplibre-gl": "^5.19.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-map-gl": "^8.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "vite": "^4.0.0"
-  },
-  "volta": {
-    "extends": "../../package.json"
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "vite": "^8.0.8"
   }
 }
diff --git a/examples/point/src/App.tsx b/examples/point/src/App.tsx
@@ -0,0 +1,111 @@
+import type { Layer, PickingInfo } from "@deck.gl/core";
+import type { MapboxOverlayProps } from "@deck.gl/mapbox";
+import { MapboxOverlay } from "@deck.gl/mapbox";
+import { GeoArrowScatterplotLayer } from "@geoarrow/deck.gl-layers";
+import * as arrow from "apache-arrow";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { useEffect, useState } from "react";
+import { Map as MaplibreMap, useControl } from "react-map-gl/maplibre";
+
+const GEOARROW_POINT_DATA =
+  "http://localhost:8080/2019-01-01_performance_mobile_tiles.feather";
+
+const INITIAL_VIEW_STATE = {
+  longitude: 0,
+  latitude: 20,
+  zoom: 2,
+  pitch: 0,
+  bearing: 0,
+};
+
+const MAP_STYLE =
+  "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
+
+function DeckGLOverlay(props: MapboxOverlayProps) {
+  const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay(props));
+  overlay.setProps(props);
+  return null;
+}
+
+export default function App() {
+  const [table, setTable] = useState<arrow.Table | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await fetch(GEOARROW_POINT_DATA);
+      const buffer = await data.arrayBuffer();
+      setTable(arrow.tableFromIPC(buffer));
+    };
+    if (!table) {
+      fetchData().catch(console.error);
+    }
+  }, [table]);
+
+  const onClick = (info: PickingInfo) => {
+    if (info.object) {
+      console.log(JSON.stringify(info.object.toJSON()));
+    }
+  };
+
+  const layers: Layer[] = [];
+  let batchIndex = 0;
+  for (const batch of table?.batches ?? []) {
+    layers.push(
+      new GeoArrowScatterplotLayer({
+        id: `geoarrow-points-${batchIndex}`,
+        data: batch,
+        getFillColor: batch.getChild("colors")!.data[0],
+        opacity: 0.3,
+        getRadius: ({ index, data }) => {
+          const recordBatch = data.data;
+          const row = recordBatch.get(index)!;
+          return row.avg_d_kbps / 200;
+        },
+        radiusMinPixels: 1,
+        pickable: true,
+      }),
+    );
+    batchIndex += 1;
+  }
+
+  return (
+    <div style={{ position: "relative", width: "100%", height: "100%" }}>
+      <MaplibreMap initialViewState={INITIAL_VIEW_STATE} mapStyle={MAP_STYLE}>
+        <DeckGLOverlay layers={layers} interleaved onClick={onClick} />
+      </MaplibreMap>
+
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          pointerEvents: "none",
+          zIndex: 1000,
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: "20px",
+            left: "20px",
+            background: "white",
+            padding: "16px",
+            borderRadius: "8px",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+            maxWidth: "300px",
+            pointerEvents: "auto",
+          }}
+        >
+          <h3 style={{ margin: "0 0 8px 0", fontSize: "16px" }}>
+            GeoArrowScatterplotLayer Example
+          </h3>
+          <p style={{ margin: 0, fontSize: "12px", color: "#666" }}>
+            Ookla mobile network performance, 2019-01-01.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/point/src/main.tsx b/examples/point/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/examples/point/src/vite-env.d.ts b/examples/point/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/point/tsconfig.json b/examples/point/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/point/vite.config.ts b/examples/point/vite.config.ts
@@ -0,0 +1,10 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  worker: { format: "es" },
+  server: {
+    port: 3000,
+  },
+});
diff --git a/package.json b/package.json
@@ -26,15 +26,15 @@
   },
   "packageManager": "pnpm@10.25.0",
   "overrides": {
-    "@deck.gl/aggregation-layers": "^9.2.1",
-    "@deck.gl/core": "^9.2.1",
-    "@deck.gl/extensions": "^9.2.1",
-    "@deck.gl/geo-layers": "^9.2.1",
-    "@deck.gl/layers": "^9.2.1",
-    "@luma.gl/constants": "^9.2.1",
-    "@luma.gl/core": "^9.2.1",
-    "@luma.gl/engine": "^9.2.1",
-    "@luma.gl/shadertools": "^9.2.1",
+    "@deck.gl/aggregation-layers": "^9.3.0",
+    "@deck.gl/core": "^9.3.0",
+    "@deck.gl/extensions": "^9.3.0",
+    "@deck.gl/geo-layers": "^9.3.0",
+    "@deck.gl/layers": "^9.3.0",
+    "@luma.gl/constants": "^9.3.0",
+    "@luma.gl/core": "^9.3.0",
+    "@luma.gl/engine": "^9.3.0",
+    "@luma.gl/shadertools": "^9.3.0",
     "apache-arrow": ">=21"
   },
   "volta": {