restore per-layer entrypoint

build.mjs

@@ -3,7 +3,12 @@ import esbuild from "esbuild";
 // import { wasmLoader } from "esbuild-plugin-wasm";
 
 esbuild.build({
-  entryPoints: ["./src/index.tsx"],
+  entryPoints: [
+    "./src/index.tsx",
+    "./src/point.tsx",
+    "./src/linestring.tsx",
+    "./src/polygon.tsx",
+  ],
   bundle: true,
   minify: true,
   target: ["es2020"],

lonboard/layer.py

@@ -1,15 +1,20 @@
 from __future__ import annotations
 
 from io import BytesIO
+from pathlib import Path
 
 import geopandas as gpd
 import ipywidgets
 import pyarrow as pa
 import pyarrow.feather as feather
 import traitlets
+from anywidget import AnyWidget
 
 from lonboard.geoarrow.geopandas_interop import geopandas_to_geoarrow
 
+# bundler yields lonboard/static/{index.js,styles.css}
+bundler_output_dir = Path(__file__).parent / "static"
+
 
 class BaseLayer(ipywidgets.Widget):
     def _repr_keys(self):
@@ -25,7 +30,9 @@ def _repr_keys(self):
             yield key
 
 
-class PointLayer(BaseLayer):
+class PointLayer(AnyWidget):
+    _esm = bundler_output_dir / "point.js"
+
     _layer_type = traitlets.Unicode("scatterplot").tag(sync=True)
 
     table_buffer = traitlets.Bytes().tag(sync=True)
@@ -67,7 +74,8 @@ def from_geopandas(cls, gdf: gpd.GeoDataFrame, **kwargs) -> PointLayer:
         return cls.from_pyarrow(table, **kwargs)
 
 
-class LineStringLayer(BaseLayer):
+class LineStringLayer(AnyWidget):
+    _esm = bundler_output_dir / "linestring.js"
     _layer_type = traitlets.Unicode("path").tag(sync=True)
 
     table_buffer = traitlets.Bytes().tag(sync=True)
@@ -102,7 +110,8 @@ def from_geopandas(cls, gdf: gpd.GeoDataFrame, **kwargs) -> LineStringLayer:
         return cls.from_pyarrow(table, **kwargs)
 
 
-class PolygonLayer(BaseLayer):
+class PolygonLayer(AnyWidget):
+    _esm = bundler_output_dir / "polygon.js"
     _layer_type = traitlets.Unicode("solid-polygon").tag(sync=True)
 
     table_buffer = traitlets.Bytes().tag(sync=True)

lonboard/widget.py

@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-import pathlib
+from pathlib import Path
 
 import anywidget
 import ipywidgets
@@ -9,7 +9,7 @@
 from lonboard.layer import BaseLayer
 
 # bundler yields lonboard/static/{index.js,styles.css}
-bundler_output_dir = pathlib.Path(__file__).parent / "static"
+bundler_output_dir = Path(__file__).parent / "static"
 _css = bundler_output_dir / "styles.css"
 
 

src/linestring.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { createRender, useModelState } from "@anywidget/react";
+import Map from "react-map-gl/maplibre";
+import DeckGL from "@deck.gl/react/typed";
+import * as arrow from "apache-arrow";
+import { GeoArrowPathLayer } from "@geoarrow/deck.gl-layers";
+
+const INITIAL_VIEW_STATE = {
+  latitude: 10,
+  longitude: 0,
+  zoom: 0.5,
+  bearing: 0,
+  pitch: 0,
+};
+
+const MAP_STYLE =
+  "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json";
+
+function App() {
+  let [dataView] = useModelState<DataView>("table_buffer");
+  let [widthUnits] = useModelState("width_units");
+  let [widthScale] = useModelState("width_scale");
+  let [widthMinPixels] = useModelState("width_min_pixels");
+  let [widthMaxPixels] = useModelState("width_max_pixels");
+  let [jointRounded] = useModelState("joint_rounded");
+  let [capRounded] = useModelState("cap_rounded");
+  let [miterLimit] = useModelState("miter_limit");
+  let [billboard] = useModelState("billboard");
+  let [getColor] = useModelState("get_color");
+  let [getWidth] = useModelState("get_width");
+
+  const layers = [];
+
+  if (dataView && dataView.byteLength > 0) {
+    const arrowTable = arrow.tableFromIPC(dataView.buffer);
+    // TODO: allow other names
+    const geometryColumnIndex = arrowTable.schema.fields.findIndex(
+      (field) => field.name == "geometry"
+    );
+
+    const geometryField = arrowTable.schema.fields[geometryColumnIndex];
+    const geoarrowTypeName = geometryField.metadata.get("ARROW:extension:name");
+    switch (geoarrowTypeName) {
+      case "geoarrow.linestring":
+        {
+          const layer = new GeoArrowPathLayer({
+            id: "geoarrow-path",
+            data: arrowTable,
+
+            ...(widthUnits && { widthUnits }),
+            ...(widthScale && { widthScale }),
+            ...(widthMinPixels && { widthMinPixels }),
+            ...(widthMaxPixels && { widthMaxPixels }),
+            ...(jointRounded && { jointRounded }),
+            ...(capRounded && { capRounded }),
+            ...(miterLimit && { miterLimit }),
+            ...(billboard && { billboard }),
+            ...(getColor && { getColor }),
+            ...(getWidth && { getWidth }),
+          });
+          layers.push(layer);
+        }
+        break;
+
+      default:
+        console.warn(`no layer supported for ${geoarrowTypeName}`);
+        break;
+    }
+  }
+
+  return (
+    <div style={{ height: 500 }}>
+      <DeckGL
+        initialViewState={INITIAL_VIEW_STATE}
+        controller={true}
+        layers={layers}
+        // ContextProvider={MapContext.Provider}
+      >
+        <Map mapStyle={MAP_STYLE} />
+      </DeckGL>
+    </div>
+  );
+}
+
+export let render = createRender(App);

src/point.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { createRender, useModelState } from "@anywidget/react";
+import Map from "react-map-gl/maplibre";
+import DeckGL from "@deck.gl/react/typed";
+import * as arrow from "apache-arrow";
+import { GeoArrowScatterplotLayer } from "@geoarrow/deck.gl-layers";
+
+const INITIAL_VIEW_STATE = {
+  latitude: 10,
+  longitude: 0,
+  zoom: 0.5,
+  bearing: 0,
+  pitch: 0,
+};
+
+const MAP_STYLE =
+  "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json";
+
+function App() {
+  let [dataView] = useModelState<DataView>("table_buffer");
+  let [radiusUnits] = useModelState("radius_units");
+  let [radiusScale] = useModelState("radius_scale");
+  let [radiusMinPixels] = useModelState("radius_min_pixels");
+  let [radiusMaxPixels] = useModelState("radius_max_pixels");
+  let [lineWidthUnits] = useModelState("line_width_units");
+  let [lineWidthScale] = useModelState("line_width_scale");
+  let [lineWidthMinPixels] = useModelState("line_width_min_pixels");
+  let [lineWidthMaxPixels] = useModelState("line_width_max_pixels");
+  let [stroked] = useModelState("stroked");
+  let [filled] = useModelState("filled");
+  let [billboard] = useModelState("billboard");
+  let [antialiasing] = useModelState("antialiasing");
+  let [getRadius] = useModelState("get_radius");
+  let [getFillColor] = useModelState("get_fill_color");
+  let [getLineColor] = useModelState("get_line_color");
+  let [getLineWidth] = useModelState("get_line_width");
+
+  const layers = [];
+
+  if (dataView && dataView.byteLength > 0) {
+    const arrowTable = arrow.tableFromIPC(dataView.buffer);
+    // TODO: allow other names
+    const geometryColumnIndex = arrowTable.schema.fields.findIndex(
+      (field) => field.name == "geometry"
+    );
+
+    const geometryField = arrowTable.schema.fields[geometryColumnIndex];
+    const geoarrowTypeName = geometryField.metadata.get("ARROW:extension:name");
+    switch (geoarrowTypeName) {
+      case "geoarrow.point":
+        {
+          const layer = new GeoArrowScatterplotLayer({
+            id: "geoarrow-points",
+            data: arrowTable,
+            ...(radiusUnits && { radiusUnits }),
+            ...(radiusScale && { radiusScale }),
+            ...(radiusMinPixels && { radiusMinPixels }),
+            ...(radiusMaxPixels && { radiusMaxPixels }),
+            ...(lineWidthUnits && { lineWidthUnits }),
+            ...(lineWidthScale && { lineWidthScale }),
+            ...(lineWidthMinPixels && { lineWidthMinPixels }),
+            ...(lineWidthMaxPixels && { lineWidthMaxPixels }),
+            ...(stroked && { stroked }),
+            ...(filled && { filled }),
+            ...(billboard && { billboard }),
+            ...(antialiasing && { antialiasing }),
+            ...(getRadius && { getRadius }),
+            ...(getFillColor && { getFillColor }),
+            ...(getLineColor && { getLineColor }),
+            ...(getLineWidth && { getLineWidth }),
+          });
+          layers.push(layer);
+        }
+        break;
+
+      default:
+        console.warn(`no layer supported for ${geoarrowTypeName}`);
+        break;
+    }
+  }
+
+  return (
+    <div style={{ height: 500 }}>
+      <DeckGL
+        initialViewState={INITIAL_VIEW_STATE}
+        controller={true}
+        layers={layers}
+        // ContextProvider={MapContext.Provider}
+      >
+        <Map mapStyle={MAP_STYLE} />
+      </DeckGL>
+    </div>
+  );
+}
+
+export let render = createRender(App);

src/polygon.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { createRender, useModelState } from "@anywidget/react";
+import Map from "react-map-gl/maplibre";
+import DeckGL from "@deck.gl/react/typed";
+import * as arrow from "apache-arrow";
+import { GeoArrowSolidPolygonLayer } from "@geoarrow/deck.gl-layers";
+
+const INITIAL_VIEW_STATE = {
+  latitude: 10,
+  longitude: 0,
+  zoom: 0.5,
+  bearing: 0,
+  pitch: 0,
+};
+
+const MAP_STYLE =
+  "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json";
+
+function App() {
+  let [dataView] = useModelState<DataView>("table_buffer");
+  let [filled] = useModelState("filled");
+  let [extruded] = useModelState("extruded");
+  let [wireframe] = useModelState("wireframe");
+  let [elevationScale] = useModelState("elevation_scale");
+  let [getElevation] = useModelState("get_elevation");
+  let [getFillColor] = useModelState("get_fill_color");
+  let [getLineColor] = useModelState("get_line_color");
+
+  const layers = [];
+
+  if (dataView && dataView.byteLength > 0) {
+    const arrowTable = arrow.tableFromIPC(dataView.buffer);
+    // TODO: allow other names
+    const geometryColumnIndex = arrowTable.schema.fields.findIndex(
+      (field) => field.name == "geometry"
+    );
+
+    const geometryField = arrowTable.schema.fields[geometryColumnIndex];
+    const geoarrowTypeName = geometryField.metadata.get("ARROW:extension:name");
+    switch (geoarrowTypeName) {
+      case "geoarrow.polygon":
+        {
+          const layer = new GeoArrowSolidPolygonLayer({
+            id: "geoarrow-polygons",
+            data: arrowTable,
+            ...(filled && { filled }),
+            ...(extruded && { extruded }),
+            ...(wireframe && { wireframe }),
+            ...(elevationScale && { elevationScale }),
+            ...(getElevation && { getElevation }),
+            ...(getFillColor && { getFillColor }),
+            ...(getLineColor && { getLineColor }),
+          });
+          layers.push(layer);
+        }
+        break;
+
+      default:
+        console.warn(`no layer supported for ${geoarrowTypeName}`);
+        break;
+    }
+  }
+
+  return (
+    <div style={{ height: 500 }}>
+      <DeckGL
+        initialViewState={INITIAL_VIEW_STATE}
+        controller={true}
+        layers={layers}
+        // ContextProvider={MapContext.Provider}
+      >
+        <Map mapStyle={MAP_STYLE} />
+      </DeckGL>
+    </div>
+  );
+}
+
+export let render = createRender(App);