Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

IMPORTANT: This repository is in maintenance-only mode.

> The next version of the library is being developed here <

Flow map drawing layer for 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.

Try for an easy way of publishing a flow map backed by a Google Sheets spreadsheet (no programming skills required).

Check out the live examples Storybook or the minimal example apps: with React, without React.


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.

Location totals

Both the incoming and outgoing totals for the locations are represented. A darker outline means that there are more incoming flows, a lighter outline means that there are more outgoing flows.

For instance, below we compare between the evening and the morning commuting behaviors of a large city:

Difference mode

The layer can be used to show the difference between two moments in time.


First install the required dependencies:

npm install react-map-gl

Then, you can either use as a layer or as a React component:

Usage as a layer

With this approach you can use together with other layers.

import { StaticMap } from 'react-map-gl';
import { DeckGL } from '';
import FlowMapLayer from '';             
import * as ReactDOM from 'react-dom';

    initialViewState={{ longitude: 0, latitude: 0, zoom: 1 }}
      new FlowMapLayer({
        id: 'my-flowmap-layer',
          // either array of location areas or a GeoJSON feature collection
          [{ id: 1, name: New York, lat: 40.713543, lon: -74.011219 }, 
           { id: 2, name: London, lat: 51.507425, lon: -0.127738 }, 
           { id: 3, name: Rio de Janeiro, lat: -22.906241, lon: -43.180244 }],
          [{ origin: 1, dest: 2, count: 42 },
           { origin: 2, dest: 1, count: 51 },
           { origin: 3, dest: 1, count: 50 },
           { origin: 2, dest: 3, count: 40 },
           { origin: 1, dest: 3, count: 22 },
           { origin: 3, dest: 2, count: 42 }],
        getFlowMagnitude: (flow) => flow.count || 0,
        getFlowOriginId: (flow) => flow.origin,
        getFlowDestId: (flow) => flow.dest,
        getLocationId: (loc) =>,
        getLocationCentroid: (location) => [location.lon,],
    <StaticMap mapboxApiAccessToken={mapboxAccessToken} />

Usage as a React component

Install this additional dependency:

npm install
import FlowMap, { getViewStateForLocations } from ''

const MapVis = ({ width, height }) =>
    <div style={{ width, height }}>
            locations, l =>, [ width, height ]
          getLocationId={l =>}
          getLocationCentroid={l =>}
          getFlowOriginId={f => f.origin}
          getFlowDestId={f => f.dest}
          getFlowMagnitude={f => f.count}

The full list of supported props:

interface Props {
  id: string;
  locations: Locations;
  flows: Flow[];
  diffMode?: boolean;
  animate?: boolean;    
  animationCurrentTime?: number;
  animationTailLength?: number;
  colors?: Colors | DiffColors;
  getLocationId?: LocationAccessor<string>;
  getLocationCentroid?: LocationAccessor<[number, number]>;
  getLocationTotalIn?: LocationAccessor<number>;
  getLocationTotalOut?: LocationAccessor<number>;
  getLocationTotalWithin?: LocationAccessor<number>;
  getFlowOriginId?: FlowAccessor<string>;
  getFlowDestId?: FlowAccessor<string>;
  getFlowMagnitude?: FlowAccessor<number>;
  getAnimatedFlowLineStaggering?: FlowAccessor<number>;
  getFlowColor?: FlowAccessor<string | undefined>;
  maxFlowThickness?: number;
  flowMagnitudeExtent?: [number, number];
  locationTotalsExtent?: [number, number];
  maxLocationCircleSize?: number;
  minPickableFlowThickness?: number;
  showTotals?: boolean;
  showLocationAreas?: boolean;
  showOnlyTopFlows?: number;
  selectedLocationIds?: string[];
  highlightedLocationId?: string;
  highlightedLocationAreaId?: string;
  highlightedFlow?: Flow;
  outlineThickness?: number;
  pickable?: boolean;
  onClick?: PickingHandler<FlowLayerPickingInfo>;
  onHover?: PickingHandler<FlowLayerPickingInfo>;


Create an .env file in the project root containing one line:


Then, run:

yarn install
yarn start
open http://localhost:6006

If you want to make changes to the core and react packages and have them automatically recompiled, run the following:

yarn core-dev
yarn react-dev


Many thanks to Philippe Voinov for his help with the first version of the FlowLinesLayer.

License Copyright 2018 Teralytics

This product includes software developed at The Apache Software Foundation (

Portions of this software were developed at Teralytics (