Add getFlowColor method

packages/data/src/FlowmapAggregateAccessors.ts

@@ -65,6 +65,17 @@ export default class FlowmapAggregateAccessors<L, F> {
     return isAggregateFlow(f) ? f.count : this.accessors.getFlowMagnitude(f);
   };
 
+  getFlowColor = (f: F | AggregateFlow) => {
+    // used only with non animated flows (i.e. not with FlowmapAnimated)
+    // animated flows need to use the default color sheme
+    if (isAggregateFlow(f))
+      // don't know if this is the best way to do this, color from aggregated flow like flow from cluster
+      return f.color;
+
+    const {getFlowColor} = this.accessors;
+    return getFlowColor ? getFlowColor(f) : undefined;
+  };
+
   // Note: Aggregate flows have no time
   getFlowTime = (f: F) => {
     const {getFlowTime} = this.accessors;

packages/data/src/FlowmapSelectors.ts

@@ -30,6 +30,7 @@ import getColors, {
   getFlowColorScale,
   isDiffColors,
   isDiffColorsRGBA,
+  colorAsRgba,
 } from './colors';
 import FlowmapAggregateAccessors from './FlowmapAggregateAccessors';
 import {FlowmapState} from './FlowmapState';
@@ -1154,6 +1155,7 @@ export default class FlowmapSelectors<L, F> {
       getFlowOriginId,
       getFlowDestId,
       getFlowMagnitude,
+      getFlowColor,
       getLocationId,
       getLocationLon,
       getLocationLat,
@@ -1247,10 +1249,19 @@ export default class FlowmapSelectors<L, F> {
         }
       })(),
     );
+
     const flowLineColors = Uint8Array.from(
       (function* () {
         for (const flow of flows) {
-          yield* flowColorScale(getFlowMagnitude(flow));
+          const customColor = getFlowColor(flow);
+
+          if (customColor) {
+            // need to use color from flow with acssesor `getFlowColor`
+            yield* colorAsRgba(customColor);
+          } else {
+            // use default color generated with `getFlowMagnitude`
+            yield* flowColorScale(getFlowMagnitude(flow));
+          }
         }
       })(),
     );
@@ -1421,7 +1432,10 @@ function aggregateFlows<F>(
     (ff: F[]) => {
       const origin = flowAccessors.getFlowOriginId(ff[0]);
       const dest = flowAccessors.getFlowDestId(ff[0]);
-      // const color = ff[0].color;
+      const color = flowAccessors.getFlowColor
+        ? flowAccessors.getFlowColor(ff[0])
+        : null;
+
       const rv: AggregateFlow = {
         aggregate: true,
         origin,
@@ -1435,7 +1449,8 @@ function aggregateFlows<F>(
         }, 0),
         // time: undefined,
       };
-      // if (color) rv.color = color;
+
+      if (color) rv.color = color;
       return rv;
     },
     flowAccessors.getFlowOriginId,

packages/data/src/cluster/ClusterIndex.ts

@@ -48,7 +48,12 @@ export interface ClusterIndex<F> {
   aggregateFlows: (
     flows: F[],
     zoom: number,
-    {getFlowOriginId, getFlowDestId, getFlowMagnitude}: FlowAccessors<F>,
+    {
+      getFlowOriginId,
+      getFlowDestId,
+      getFlowMagnitude,
+      getFlowColor,
+    }: FlowAccessors<F>,
     options?: {
       flowCountsMapReduce?: FlowCountsMapReduce<F>;
     },
@@ -165,7 +170,7 @@ export function buildIndex<F>(clusterLevels: ClusterLevels): ClusterIndex<F> {
     aggregateFlows: (
       flows,
       zoom,
-      {getFlowOriginId, getFlowDestId, getFlowMagnitude},
+      {getFlowOriginId, getFlowDestId, getFlowMagnitude, getFlowColor},
       options = {},
     ) => {
       if (zoom > maxZoom) {
@@ -187,6 +192,7 @@ export function buildIndex<F>(clusterLevels: ClusterLevels): ClusterIndex<F> {
         const originCluster = findClusterFor(origin, zoom) || origin;
         const destCluster = findClusterFor(dest, zoom) || dest;
         const key = makeKey(originCluster, destCluster);
+        const color = getFlowColor ? getFlowColor(flow) : null;
         if (originCluster === origin && destCluster === dest) {
           result.push(flow);
         } else {
@@ -198,6 +204,9 @@ export function buildIndex<F>(clusterLevels: ClusterLevels): ClusterIndex<F> {
               count: flowCountsMapReduce.map(flow),
               aggregate: true,
             };
+            if (color) {
+              aggregateFlow.color = color;
+            }
             result.push(aggregateFlow);
             aggFlowsByKey.set(key, aggregateFlow);
           } else {

packages/data/src/types.ts

@@ -27,7 +27,7 @@ export interface FlowAccessors<F> {
   getFlowDestId: FlowAccessor<F, string | number>;
   getFlowMagnitude: FlowAccessor<F, number>;
   getFlowTime?: FlowAccessor<F, Date>; // TODO: use number instead of Date
-  // getFlowColor?: FlowAccessor<string | undefined>;
+  getFlowColor?: FlowAccessor<F, string | undefined>;
 }
 
 export interface LocationAccessors<L> {
@@ -115,6 +115,7 @@ export interface AggregateFlow {
   dest: string | number;
   count: number;
   aggregate: true;
+  color?: string;
 }
 
 export function isAggregateFlow(

packages/layers/src/FlowLinesLayer/FlowLinesLayer.ts

@@ -9,7 +9,7 @@ import GL from '@luma.gl/constants';
 import {Geometry, Model} from '@luma.gl/core';
 import FragmentShader from './FlowLinesLayerFragment.glsl';
 import VertexShader from './FlowLinesLayerVertex.glsl';
-import {FlowLinesLayerAttributes, RGBA} from '@flowmap.gl/data';
+import {FlowLinesLayerAttributes, RGBA, colorAsRgba} from '@flowmap.gl/data';
 import {LayerProps} from '../types';
 
 export interface Props<F> extends LayerProps {
@@ -103,7 +103,10 @@ class FlowLinesLayer<F> extends Layer {
   static defaultProps = {
     getSourcePosition: {type: 'accessor', value: (d: any) => [0, 0]},
     getTargetPosition: {type: 'accessor', value: (d: any) => [0, 0]},
-    getColor: {type: 'accessor', value: DEFAULT_COLOR},
+    getColor: {
+      type: 'accessor',
+      value: (d: any) => (d.color && colorAsRgba(d.color)) || DEFAULT_COLOR,
+    },
     getThickness: {type: 'accessor', value: (d: any) => d.count}, // 0..0.5
     getPickable: {type: 'accessor', value: (d: any) => 1.0},
     drawOutline: true,

packages/layers/src/FlowmapLayer.ts

@@ -345,6 +345,7 @@ export default class FlowmapLayer<L, F> extends CompositeLayer {
               origin: origin,
               dest: dest,
               count: accessors.getFlowMagnitude(flow),
+              color: accessors.getFlowColor && accessors.getFlowColor(flow),
             },
           };
         }

packages/layers/src/types.ts

@@ -49,6 +49,7 @@ export interface FlowPickingInfoObject<L, F> {
   origin: L | ClusterNode;
   dest: L | ClusterNode;
   count: number;
+  color?: string;
 }
 
 export type FlowPickingInfo<L, F> = PickingInfo<FlowPickingInfoObject<L, F>>;