speed color written to numeric props

Author: felixpalmer

modules/carto/src/layers/trajectory-speed-utils.ts

@@ -21,18 +21,18 @@ function distanceBetweenPoints([lon1, lat1, lon2, lat2]: number[]): number {
 
 
 /**
- * Calculate speeds and apply colors to trajectory geometry using a color accessor
+ * Calculate speeds and write to numericProps attribute for trajectory geometry
  */
 export function applyTrajectoryColors(
   geometry: ProcessedGeometry,
-  getVertexColor: (vertexData: {speed: number}, info: {index: number; data: any[]; target: any[]}) => [number, number, number, number]
+  getVertexColor?: (vertexData: {speed: number}, info: {index: number; data: any[]; target: any[]}) => [number, number, number, number]
 ): void {
-  // Add new attribute for per-vertex colors
-  const {positions, attributes} = geometry;
+  const {positions, attributes, numericProps} = geometry;
   const n = positions.value.length / positions.size;
-  attributes.getColor = { value: new Uint8Array(4 * n), size: 4, normalized: true };
 
-  // Calculate speed and apply colors
+  numericProps.speed = { value: new Float32Array(n), size: 1 };
+  
+  // Calculate speed and write to numericProps
   let previousSpeed = 0;
 
   for (let i = 0; i < n; i++) {
@@ -68,8 +68,7 @@ export function applyTrajectoryColors(
       speed = 100; // fallback speed
     }
 
-    // Use the provided color accessor
-    const color = getVertexColor({speed}, {index: i, data: [], target: []});
-    attributes.getColor.value.set(color, 4 * i);
+    // Write speed to numericProps
+    numericProps.speed.value[i] = speed;
   }
 }

modules/carto/src/layers/trajectory-tile-layer.ts

@@ -121,9 +121,9 @@ export default class TrajectoryTileLayer<
     if (!lines) return null;
 
     // Optionally apply vertex colors
-    if (this.props.getVertexColor) {
+    //if (this.props.getVertexColor) {
       applyTrajectoryColors(lines, this.props.getVertexColor);
-    }
+    //}
 
     return { ...createEmptyBinary(), lines }
   }

test/apps/carto-trajectories/app.tsx

@@ -322,14 +322,14 @@ export default function App() {
         return [255 * Math.random(), 255 * Math.random(), 255 * Math.random(), 255];
       },
       getFillColor: colorContinuous({
-        attr: 'ts',
-        domain: [0, 200, 300, 500, 700],
+        attr: 'speed',
+        domain: [0, 5, 10, 15, 20, 25],
         colors: palette
       }),
 
       // Alternative API, dedicated accessor: Color each vertex by speed
       _getVertexColor: colorContinuous({
-        attr: (d: any) => d.speed,
+        attr: 'speed',
         domain: [5, 7, 9, 11, 13, 15],
         colors: palette
       }),