Flow map drawing layer for deck.gl
npm install flowmap.glFlow map drawing layer for deck.gl. Can be used for visualizing movement of people (e.g. migration) or objects between geographic locations. The layer is rendered in WebGL and can handle large numbers of flows with a good rendering performance.
Check out the live examples.

Given an array of locations and an array of flows between these locations the layer will do the following:
- Represent the flows as lines of varying thickness depending on the flow magnitudes
- The flow lines are sorted so that the larger flows are drawn above
- GeoJSON geometries of the location areas are rendered as polygons
- Total incoming and outgoing flows for the locations are calculated and represented as circles of varying sizes.
For instance, below we compare between the evening and the morning commuting behaviors of a large city:

Here's a usage example:
``jsx harmony
import * as React from 'react';
import DeckGL from 'deck.gl';
import { StaticMap } from 'react-map-gl';
import FlowMapLayer from 'flowmap.gl';
const colors = {
flows: {
max: '#137CBD',
},
locationAreas: {
outline: 'rgba(92,112,128,0.5)',
normal: 'rgba(187,187,187,0.5)',
selected: 'rgba(217,130,43,0.5)',
},
};
class MyFlowMap extends React.Component {
state = { viewState: this.props.initialViewState };
render() {
const flowMapLayer = new FlowMapLayer({
id: 'flow-map-layer',
colors,
locations: [...], // array of GeoJSON features of location areas
flows: [...], // array of Flow objects
getLocationId: l => l.id,
getLocationCentroid: l => l.properties.centroid,
getFlowOriginId: f => f.origin,
getFlowDestId: f => f.dest,
getFlowMagnitude: f => f.count,
showTotals: true,
showLocationAreas: true,
locationCircleSize: 3,
varyFlowColorByMagnitude: true,
});
return (
initialViewState={this.state.viewState}
controller={true}
onViewStateChange={({ viewState }) => this.setState({ viewState })}
children={({ width, height, viewState }) => (
)}
/>
);
}
}
`
The full list of supported props:
`typescript`
interface Props {
id: string;
colors: Colors | DiffColors;
locations: Locations;
flows: Flow[];
fp64?: boolean;
onClick?: PickingHandler
onHover?: PickingHandler
getLocationId?: LocationAccessor
getLocationCentroid?: LocationAccessor<[number, number]>;
getLocationTotalIn?: LocationAccessor
getLocationTotalOut?: LocationAccessor
getFlowOriginId?: FlowAccessor
getFlowDestId?: FlowAccessor
getFlowMagnitude?: FlowAccessor
showTotals?: boolean;
locationCircleSize?: number;
showLocationAreas?: boolean;
varyFlowColorByMagnitude?: boolean;
selectedLocationIds?: string[];
highlightedLocationId?: string;
highlightedFlow?: Flow;
visible?: boolean;
opacity?: number;
pickable?: boolean;
fp64?: boolean;
updateTriggers?: UpdateTriggers;
}
Here's the code for the complete static example
and a more complex interactive example.
Create an .env` file in the project root
containing one line:
MapboxAccessToken=
Then, run:
npm install
npm start
open http://localhost:6006 to open storybook
Many thanks to Philippe Voinov
for his help with the first version of the FlowLinesLayer.
This product includes software developed at
The Apache Software Foundation (http://www.apache.org/).
Portions of this software were developed at Teralytics (http://www.teralytics.net)