@dzole0311/deck.gl-edge-bundle

Edge-bundling layer for deck.gl flow maps.

Install

npm install @dzole0311/deck.gl-edge-bundle @deck.gl/core @deck.gl/layers

@deck.gl/core and @deck.gl/layers are peer dependencies.

Usage

import {Deck} from '@deck.gl/core';
import {EdgeBundleLayer} from '@dzole0311/deck.gl-edge-bundle';

const data = [
  {
    sourcePosition: [2.3522, 48.8566],
    targetPosition: [-0.1276, 51.5072],
    group: 'northwest',
    weight: 2
  },
  {
    sourcePosition: [4.9041, 52.3676],
    targetPosition: [-0.1276, 51.5072],
    group: 'northwest',
    weight: 1
  }
];

new Deck({
  initialViewState: {longitude: 7, latitude: 48, zoom: 4},
  controller: true,
  layers: [
    new EdgeBundleLayer({
      id: 'bundled-flows',
      data,
      getSourcePosition: (d) => d.sourcePosition,
      getTargetPosition: (d) => d.targetPosition,
      getBundleKey: (d) => d.group,
      getWeight: (d) => d.weight,
      bundlingAlgorithm: 'force-gpu',
      getColor: [34, 113, 179, 210],
      getWidth: (d) => Math.max(1, d.weight),
      widthMinPixels: 1,
      widthMaxPixels: 6
    })
  ]
});

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | getSourcePosition | Accessor | d => d.sourcePosition | Origin [lng, lat]. | | getTargetPosition | Accessor | d => d.targetPosition | Destination [lng, lat]. | | getBundleKey | Accessor | index | Group key for stronger within-group bundling. | | getWeight | Accessor | 1 | Edge weight used for bundle centroids. | | bundleStrength | number | 0.85 | Pull toward the bundle center, from 0 to 1. | | subdivisionCount | number | 16 | Control points per edge path. | | bundlingAlgorithm | 'centroid' \| 'spine' \| 'force' \| 'force-gpu' | 'force-gpu' | Bundling algorithm. | | forceIterations | number | 8 | Force simulation iteration multiplier. | | forceStepSize | number | 0.15 | Force simulation step size. | | renderMode | 'path' \| 'arc' | 'path' | Render bundled splines or ArcLayer approximations. |

Algorithms

centroid routes edges through a weighted group centroid. spine blends edges toward a shared source-to-target spine. force runs a CPU force-directed bundling pass. force-gpu runs the force simulation in WebGL2 with floating point textures and falls back to CPU force mode when WebGL2 or EXT_color_buffer_float is unavailable.

Limitations

Bundling runs during updateState on the main thread. Large edge counts, especially above about 5,000 edges, can cause frame hitches. Worker offloading is not implemented.

Bundled paths are origin-destination abstractions. They reduce flow-map clutter, but they are not observed movement trajectories.

License

MIT