Add Heatmap example

Author: vgeorge

examples/heatmap/README.md

@@ -0,0 +1,30 @@
+## Example: Use `@geoarrow/deck.gl-layers` with GeoArrow point data to render a Heatmap
+
+## Data for example
+
+```
+wget https://ookla-open-data.s3.us-west-2.amazonaws.com/parquet/performance/type=mobile/year=2019/quarter=1/2019-01-01_performance_mobile_tiles.parquet
+poetry install
+poetry run python generate_data.py
+```
+
+## Serve data
+
+```
+npx http-server --cors
+```
+
+## Usage
+
+To install dependencies:
+
+```bash
+npm install
+# or
+yarn
+```
+
+Commands:
+
+* `npm 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.

examples/heatmap/app.tsx

@@ -0,0 +1,88 @@
+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 { GeoArrowHeatmapLayer } from "@geoarrow/deck.gl-layers";
+import * as arrow from "apache-arrow";
+
+const GEOARROW_POINT_DATA =
+  "http://localhost:8080/2019-01-01_performance_mobile_tiles.feather";
+
+const INITIAL_VIEW_STATE = {
+  latitude: 20,
+  longitude: 0,
+  zoom: 2,
+  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_POINT_DATA);
+      const buffer = await data.arrayBuffer();
+      const table = arrow.tableFromIPC(buffer);
+      setTable(table);
+    };
+
+    if (!table) {
+      fetchData().catch(console.error);
+    }
+  });
+
+  const layers: Layer[] = [];
+
+  // Scenario 1: Just pass the table to the layer, with no additional properties. As the layer is a GeoArrowLayer, it should automatically detect the columns that are needed for the visualization.
+  // table &&
+  //   layers.push(
+  //     new GeoArrowHeatmapLayer({
+  //       id: "geoarrow-heatmap",
+  //       data: table,
+  //     }),
+  //   );
+
+  // Scenario 2: pass a getWeight function returning a random number, which
+  // avoids the error in the construction, but do not render anything.
+  table &&
+    layers.push(
+      new GeoArrowHeatmapLayer({
+        id: "geoarrow-heatmap",
+        data: table,
+        getWeight: (d: any) => Math.random() * 100 + 1,
+      }),
+    );
+
+  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 />);

examples/heatmap/generate_data.py

@@ -0,0 +1,49 @@
+from pathlib import Path
+
+import geopandas as gpd
+import pandas as pd
+import pyarrow as pa
+import pyarrow.feather as feather
+import shapely
+from lonboard._geoarrow.geopandas_interop import geopandas_to_geoarrow
+from lonboard.colormap import apply_continuous_cmap
+from palettable.colorbrewer.diverging import BrBG_10
+
+url = "https://ookla-open-data.s3.us-west-2.amazonaws.com/parquet/performance/type=mobile/year=2019/quarter=1/2019-01-01_performance_mobile_tiles.parquet"
+
+path = Path("2019-01-01_performance_mobile_tiles.parquet")
+
+
+def main():
+    if not path.exists():
+        msg = f"Please download file to this directory from {url=}."
+        raise ValueError(msg)
+
+    df = pd.read_parquet(path)
+    centroids = shapely.centroid(shapely.from_wkt(df["tile"]))
+
+    # Save space by using a smaller data type
+    df_cols = ["avg_d_kbps", "avg_u_kbps", "avg_lat_ms"]
+    for col in df_cols:
+        df[col] = pd.to_numeric(df[col], downcast="unsigned")
+
+    gdf = gpd.GeoDataFrame(df[df_cols], geometry=centroids)
+    table = geopandas_to_geoarrow(gdf, preserve_index=False)
+
+    min_bound = 5000
+    max_bound = 50000
+    download_speed = gdf["avg_d_kbps"]
+    normalized_download_speed = (download_speed - min_bound) / (max_bound - min_bound)
+
+    colors = apply_continuous_cmap(normalized_download_speed, BrBG_10)
+    table = table.append_column(
+        "colors", pa.FixedSizeListArray.from_arrays(colors.flatten("C"), 3)
+    )
+
+    feather.write_feather(
+        table, "2019-01-01_performance_mobile_tiles.feather", compression="uncompressed"
+    )
+
+
+if __name__ == "__main__":
+    main()

examples/heatmap/index.html

@@ -0,0 +1,13 @@
+<!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>
+</html>

examples/heatmap/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "deckgl-example-geoarrow-heatmap-layer",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "start": "vite --open",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@loaders.gl/compression": "^4.1.4",
+    "@loaders.gl/crypto": "^4.1.4",
+    "apache-arrow": ">=14",
+    "deck.gl": "^9.0.27",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-map-gl": "^5.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "vite": "^4.0.0"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}