autocomputeSpeed prop

Author: felixpalmer

modules/carto/src/index.ts

@@ -68,7 +68,6 @@ export {default as colorContinuous} from './style/color-continuous-style';
 export {fetchMap, LayerFactory} from './api/fetch-map';
 export {fetchBasemapProps} from './api/basemap';
 export {normalizeTimestamp} from './layers/trajectory-utils';
-export {applyTrajectoryColors} from './layers/trajectory-speed-utils';
 export type {
   FetchMapOptions,
   FetchMapResult,

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

@@ -23,14 +23,10 @@ function distanceBetweenPoints([lon1, lat1, lon2, lat2]: number[]): number {
 /**
  * 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]
-): void {
-  const {positions, attributes, numericProps} = geometry;
+export function autocomputeSpeed(geometry: ProcessedGeometry): void {
+  const {positions, attributes} = geometry;
   const n = positions.value.length / positions.size;
-  
-  numericProps.speed = { value: new Float32Array(n), size: 1 };
+  geometry.numericProps.speed = { value: new Float32Array(n), size: 1 };
 
   // Calculate speed and write to numericProps
   let previousSpeed = 0;
@@ -69,6 +65,6 @@ export function applyTrajectoryColors(
     }
 
     // Write speed to numericProps
-    numericProps.speed.value[i] = speed;
+    geometry.numericProps.speed!.value[i] = speed;
   }
 }

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

@@ -9,14 +9,14 @@ import {GeoJsonLayer} from '@deck.gl/layers';
 import type {TilejsonResult} from '@carto/api-client';
 import VectorTileLayer from './vector-tile-layer';
 import {transformTrajectoryData, type TileBounds, normalizeTimestamp} from './trajectory-utils';
-import {applyTrajectoryColors} from './trajectory-speed-utils';
+import {autocomputeSpeed} from './trajectory-speed-utils';
 import {createBinaryProxy, createEmptyBinary} from '../utils';
 
 const defaultProps: DefaultProps<TrajectoryTileLayerProps> = {
   ...TripsLayer.defaultProps,
   data: VectorTileLayer.defaultProps.data,
+  autocomputeSpeed: false,
   renderMode: 'trips',
-  palette: 'Sunset',
   fadeTrail: true,
   currentTime: 0,
   trailLength: 1000
@@ -30,31 +30,17 @@ export type TrajectoryTileLayerProps<FeaturePropertiesT = unknown> = _Trajectory
 type _TrajectoryTileLayerProps = {
   data: null | TilejsonResult | Promise<TilejsonResult>;
 
+  /**
+   * Set to true to automatically compute speed for each vertex and store in properties.speed
+   */
+  autocomputeSpeed?: boolean;
+
   /**
    * Rendering mode for trajectories.
    * - 'paths': Static path rendering
    * - 'trips': Animated trip rendering with time controls
    */
   renderMode?: 'paths' | 'trips';
-
-  /**
-   * Color palette for trajectory visualization (deprecated - use getVertexColor instead)
-   */
-  palette?: string;
-
-  /**
-   * Accessor function to get color for each vertex based on calculated attributes
-   * Receives an object with calculated properties (e.g., speed) and should return RGBA color array
-   * @param vertexData - Object containing calculated attributes like {speed: number}
-   * @param info - Additional info object with index, data, target properties
-   * @returns RGBA color array [r, g, b, a] where values are 0-255
-   */
-  getVertexColor?: (vertexData: {speed: number}, info: {index: number; data: any[]; target: any[]}) => [number, number, number, number];
-
-  /**
-   * Outline color for the trajectory
-   */
-  outline?: 'white' | 'black' | 'none';
 };
 
 // @ts-ignore
@@ -120,10 +106,9 @@ export default class TrajectoryTileLayer<
 
     if (!lines) return null;
 
-    // Optionally apply vertex colors
-    //if (this.props.getVertexColor) {
-      applyTrajectoryColors(lines, this.props.getVertexColor);
-    //}
+    if (this.props.autocomputeSpeed) {
+      autocomputeSpeed(lines);
+    }
 
     return { ...createEmptyBinary(), lines }
   }
@@ -157,7 +142,6 @@ export default class TrajectoryTileLayer<
       lineJointRounded: props.jointRounded !== undefined ? props.jointRounded : true,
       capRounded: props.capRounded !== undefined ? props.capRounded : true,
       _pathType: props._pathType || 'open',
-      outline: props.outline || 'none'
     };
 
     const {minTime, maxTime} = this.state;

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

@@ -40,6 +40,10 @@ export type ProcessedGeometry = BinaryLineFeature & {
     getColor?: {value: Uint8Array; size: number; normalized: boolean};
     getTimestamps: {value: Float32Array; size: number};
   };
+  numericProps: {
+    speed?: {value: Float32Array; size: number};
+    [key: string]: {value: Float32Array; size: number} | undefined;
+  };
 }
 
 function isPointInTileBounds(

test/apps/carto-trajectories/app.tsx

@@ -6,7 +6,7 @@ import {MapboxOverlay} from '@deck.gl/mapbox';
 
 import {DeckProps } from '@deck.gl/core';
 import {trajectoryQuerySource, trajectoryTableSource} from '@carto/api-client';
-import {TrajectoryTileLayer, VectorTileLayer, colorCategories, colorContinuous} from '@deck.gl/carto';
+import {TrajectoryTileLayer, VectorTileLayer,  colorContinuous} from '@deck.gl/carto';
 import {normalizeTimestamp} from '@deck.gl/carto/layers/trajectory-utils';
 
 import RangeInput from './range-input';
@@ -317,28 +317,14 @@ export default function App() {
         colors: palette
       }),
 
-      // Color each vertex, will be invoked once per vertex
-      _getFillColor: (d: any, info: any) => {
-        return [255 * Math.random(), 255 * Math.random(), 255 * Math.random(), 255];
-      },
+      // Color each vertex by speed
+      autocomputeSpeed: true, // Will add 'speed' attribute to geometry
       getFillColor: colorContinuous({
         attr: 'speed',
         domain: [0, 5, 10, 15, 20, 25],
         colors: palette
       }),
 
-      // Alternative API, dedicated accessor: Color each vertex by speed
-      _getVertexColor: colorContinuous({
-        attr: 'speed',
-        domain: [5, 7, 9, 11, 13, 15],
-        colors: palette
-      }),
-      
-      // Alternative examples:
-      // getVertexColor: (d: any) => {
-
-      //  return d.speed > 10 ? [255, 0, 0, 255] : [0, 255, 0, 255]; // Red/Green based on speed
-      //},
       currentTime,
       trailLength,
       getWidth: lineWidth,