Fixed multi polygon attribute rendering (#49)

Author: kylebarron

examples/multipolygon/app.tsx

@@ -9,9 +9,9 @@ const GEOARROW_POLYGON_DATA =
   "http://localhost:8080/ne_10m_admin_0_countries.feather";
 
 const INITIAL_VIEW_STATE = {
-  latitude: 0,
+  latitude: 25,
   longitude: 0,
-  zoom: 2,
+  zoom: 1.5,
   bearing: 0,
   pitch: 0,
 };
@@ -58,7 +58,7 @@ function Root() {
         wireframe: true,
         extruded: true,
         getPolygon: table.getChild("geometry")!,
-        getFillColor: [255, 0, 0],
+        getFillColor: table.getChild("pop_colors")!,
         // pickable: true,
         // autoHighlight: true,
       })

examples/multipolygon/generate_data.py

@@ -1,11 +1,27 @@
 import geopandas as gpd
+import numpy as np
+import pyarrow as pa
 import pyarrow.feather as feather
+from lonboard.colormap import apply_continuous_cmap
 from lonboard.geoarrow.geopandas_interop import geopandas_to_geoarrow
+from palettable.colorbrewer.diverging import PRGn_11
 
 
 def main():
     gdf = gpd.read_file("ne_10m_admin_0_countries.zip", engine="pyogrio")
     table = geopandas_to_geoarrow(gdf)
+
+    log_pop_est = np.where(gdf["POP_EST"] == 0, 0, np.log10(gdf["POP_EST"]))
+
+    min_pop = np.min(log_pop_est)
+    max_pop = np.max(log_pop_est)
+    normalized = (log_pop_est - min_pop) / (max_pop - min_pop)
+    colors = apply_continuous_cmap(normalized, PRGn_11)
+
+    table = table.append_column(
+        "pop_colors", pa.FixedSizeListArray.from_arrays(colors.flatten("C"), 3)
+    )
+
     feather.write_feather(
         table, "ne_10m_admin_0_countries.feather", compression="uncompressed"
     )

src/path-layer.ts

@@ -286,7 +286,7 @@ export class GeoArrowPathLayer<
 
       const nDim = pointData.type.listSize;
       const flatCoordinateArray = coordData.values;
-      const resolvedRingOffsets =
+      const multiLineStringToCoordOffsets =
         getMultiLineStringResolvedOffsets(multiLineStringData);
 
       const props: PathLayerProps = {
@@ -303,6 +303,8 @@ export class GeoArrowPathLayer<
         data: {
           // Note: this needs to be the length one level down.
           length: lineStringData.length,
+          // Offsets into coordinateArray where each single-line string starts
+          //
           // Note: this is ringOffsets, not geomOffsets because we're rendering
           // the individual paths on the map.
           // @ts-ignore
@@ -313,19 +315,21 @@ export class GeoArrowPathLayer<
         },
       };
 
+      // Note: here we use multiLineStringToCoordOffsets, not ringOffsets,
+      // because we want the mapping from the _feature_ to the vertex
       assignAccessor({
         props,
         propName: "getColor",
         propInput: this.props.getColor,
         chunkIdx: recordBatchIdx,
-        geomCoordOffsets: resolvedRingOffsets,
+        geomCoordOffsets: multiLineStringToCoordOffsets,
       });
       assignAccessor({
         props,
         propName: "getWidth",
         propInput: this.props.getWidth,
         chunkIdx: recordBatchIdx,
-        geomCoordOffsets: resolvedRingOffsets,
+        geomCoordOffsets: multiLineStringToCoordOffsets,
       });
 
       const layer = new PathLayer(this.getSubLayerProps(props));

src/solid-polygon-layer.ts

@@ -308,11 +308,22 @@ export class GeoArrowSolidPolygonLayer<
       const nDim = pointData.type.listSize;
 
       // const geomOffsets = multiPolygonData.valueOffsets;
-      const polygonOffsets = polygonData.valueOffsets;
+      // const polygonOffsets = polygonData.valueOffsets;
       // const ringOffsets = ringData.valueOffsets;
       const flatCoordinateArray = coordData.values;
 
-      const resolvedRingOffsets =
+      // NOTE: we have two different uses of offsets. One is for _rendering_
+      // each polygon. The other is for mapping _accessor attributes_ from one
+      // value per feature to one value per vertex. And for that we need to use
+      // these offsets in two different ways.
+      //
+      // TODO: Don't construct the offsets twice from scratch? I.e. from the
+      // polygon-to-coord offsets you should be able to infer the
+      // multi-polygon-to-coord offsets? Or something like that
+      const resolvedPolygonToCoordOffsets =
+        getPolygonResolvedOffsets(polygonData);
+
+      const resolvedMultiPolygonToCoordOffsets =
         getMultiPolygonResolvedOffsets(multiPolygonData);
 
       const props: SolidPolygonLayerProps = {
@@ -330,11 +341,12 @@ export class GeoArrowSolidPolygonLayer<
           // Note: this needs to be the length one level down, because we're
           // rendering the polygons, not the multipolygons
           length: polygonData.length,
-          // Offsets into coordinateArray where each polygon starts
-          // Note: this is polygonOffsets, not geomOffsets because we're
-          // rendering the individual polygons on the map.
-          // @ts-ignore
-          startIndices: resolvedRingOffsets,
+          // Offsets into coordinateArray where each single-polygon starts
+          //
+          // Note that this is polygonToCoordOffsets and not geomToCoordOffsets
+          // because we're rendering each part of the MultiPolygon individually
+          // @ts-expect-error
+          startIndices: resolvedPolygonToCoordOffsets,
           attributes: {
             getPolygon: { value: flatCoordinateArray, size: nDim },
           },
@@ -346,21 +358,21 @@ export class GeoArrowSolidPolygonLayer<
         propName: "getElevation",
         propInput: this.props.getElevation,
         chunkIdx: recordBatchIdx,
-        geomCoordOffsets: resolvedRingOffsets,
+        geomCoordOffsets: resolvedMultiPolygonToCoordOffsets,
       });
       assignAccessor({
         props,
         propName: "getFillColor",
         propInput: this.props.getFillColor,
         chunkIdx: recordBatchIdx,
-        geomCoordOffsets: resolvedRingOffsets,
+        geomCoordOffsets: resolvedMultiPolygonToCoordOffsets,
       });
       assignAccessor({
         props,
         propName: "getLineColor",
         propInput: this.props.getLineColor,
         chunkIdx: recordBatchIdx,
-        geomCoordOffsets: resolvedRingOffsets,
+        geomCoordOffsets: resolvedMultiPolygonToCoordOffsets,
       });
 
       const layer = new SolidPolygonLayer(this.getSubLayerProps(props));

src/utils.ts

@@ -524,17 +524,20 @@ export function getPolygonResolvedOffsets(data: PolygonData): Int32Array {
   return resolvedRingOffsets;
 }
 
-/**
- * Get offsets pointing from each exploded polygon from the MultiPolygonArray to
- * their coordinates.
- *
- * Despite the fact that this is a MultiPolygonArray, we want the offsets from
- * the _PolygonArray_ instead, because each MultiPolygon is rendered as separate
- * Polygons.
- */
 export function getMultiPolygonResolvedOffsets(
   data: MultiPolygonData
 ): Int32Array {
   const polygonData = getMultiPolygonChild(data);
-  return getPolygonResolvedOffsets(polygonData);
+  const ringData = getPolygonChild(polygonData);
+
+  const geomOffsets = data.valueOffsets;
+  const polygonOffsets = polygonData.valueOffsets;
+  const ringOffsets = ringData.valueOffsets;
+
+  const resolvedRingOffsets = new Int32Array(geomOffsets.length);
+  for (let i = 0; i < resolvedRingOffsets.length; ++i) {
+    resolvedRingOffsets[i] = ringOffsets[polygonOffsets[geomOffsets[i]]];
+  }
+
+  return resolvedRingOffsets;
 }