getLineColor/getFillColor accessors

Author: felixpalmer

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

@@ -8,10 +8,9 @@ import {GeoJsonLayer} from '@deck.gl/layers';
 
 import type {TilejsonResult} from '@carto/api-client';
 import VectorTileLayer from './vector-tile-layer';
-import {EdgedPathLayer, EdgedTripsLayer} from './edged-layers';
 import {transformTrajectoryData, type TileBounds, normalizeTimestamp} from './trajectory-utils';
 import {applyTrajectoryColors} from './trajectory-speed-utils';
-import { createEmptyBinary } from '../utils';
+import {createEmptyBinary} from '../utils';
 
 const defaultProps: DefaultProps<TrajectoryTileLayerProps> = {
   ...TripsLayer.defaultProps,
@@ -164,8 +163,23 @@ export default class TrajectoryTileLayer<
     const {minTime, maxTime} = this.state;
     const totalTimeSpan = maxTime - minTime;
 
+    const getLineColorFromFillColor = (d: any, info: any) => {
+      const {index, data} = info;
+      const startIndex = data.startIndices[index];
+      const endIndex = data.startIndices[index + 1];
+      const nVertices = endIndex - startIndex;
+      const colors = new Array(nVertices).fill(0).map((_, index) => {
+        return props.getFillColor!(undefined, {index, data});
+      });
+
+      return colors;
+      //return props.getLineColor(d, info);
+    }
+    const getLineColor = props.getFillColor ? getLineColorFromFillColor : props.getLineColor;
+
     const modifiedProps = {
       ...props,
+      getLineColor,
       _subLayerProps: {
         ...props._subLayerProps,
         linestrings: {

test/apps/carto-trajectories/app.tsx

@@ -310,27 +310,22 @@ export default function App() {
       renderMode: showTrips ? 'trips' : 'paths',
       uniqueIdProperty: 'trajectoryId', // TODO internalize this
 
-      // Color entire line by trajectoryId
-      //_getLineColor: colorContinuous({
-      //  attr: 'trajectoryId',
-      //  domain: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
-      //  colors: palette
-      //}),
-      getLineColor: (d: any, info: any) => {
-        //return [255 * Math.random(), 255 * Math.random(), 255 * Math.random(), 255];
-        const { data, index } = info;
-        const nVertices = data.startIndices[index + 1] - data.startIndices[index];
-        const colors = new Array(nVertices).fill(0).map((_, i) => {
-          return [255 * Math.random(), 255 * Math.random(), 255 * Math.random(), 255];
-        });
+      // Color entire line by trajectoryId, will be invoked once per line
+      getLineColor: colorContinuous({
+        attr: 'trajectoryId',
+        domain: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
+        colors: palette
+      }),
 
-        // Return an array to color each vertex
-        return colors;
+      // 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];
       },
 
 
+
       // Alternative API, dedicated accessor: Color each vertex by speed
-      getVertexColor: colorContinuous({
+      _getVertexColor: colorContinuous({
         attr: (d: any) => d.speed,
         domain: [5, 7, 9, 11, 13, 15],
         colors: palette
@@ -396,20 +391,6 @@ export default function App() {
       <ObjectSelect title="Map Style" obj={MAP_STYLES} value={mapStyle} onSelect={setMapStyle} top={60} />
       <ObjectSelect title="Palette" obj={PALETTES} value={palette} onSelect={setPalette} top={90}/>
       <ObjectSelect title="Outline" obj={OUTLINES} value={outline} onSelect={setOutline} top={120} />
-      {clickedTrajectoryId && (
-        <div style={{
-          position: 'absolute', 
-          right: 2, 
-          top: 150, 
-          background: 'rgba(0,0,0,0.8)', 
-          color: 'white', 
-          padding: '4px 8px', 
-          borderRadius: '4px',
-          fontSize: '12px'
-        }}>
-          📍 Following: {clickedTrajectoryId}
-        </div>
-      )}
       {showTrips && <RangeInput
         name={'Time'}
         animationSpeed={animationSpeed}
@@ -447,19 +428,21 @@ export default function App() {
         onChange={setLineWidth}
         formatLabel={(x: number) => formatLabel(x, 'pixels')}
       />
-      <div style={{
-        position: 'absolute',
-        left: 10,
-        bottom: 10,
-        background: 'rgba(0,0,0,0.7)',
-        color: 'white',
-        padding: '8px',
-        borderRadius: '4px',
-        fontSize: '12px',
-        maxWidth: '300px'
-      }}>
-        💡 Click any trajectory to jump to its start time
-      </div>
+      {showTrips && (
+        <div style={{
+          position: 'absolute',
+          left: 10,
+          bottom: 10,
+          background: 'rgba(0,0,0,0.7)',
+          color: 'white',
+          padding: '8px',
+          borderRadius: '4px',
+          fontSize: '12px',
+          maxWidth: '300px'
+        }}>
+          💡 Click any trajectory to jump to its start time
+        </div>
+      )}
     </>
   );
 }