Skip to main content

Introduction

flowmap.gl is a flow map drawing layer for deck.gl. It can be used for visualizing movement of people (e.g. migration), goods, or any other type of flow between geographic locations. The layer is rendered in WebGL and can handle large numbers of flows with good rendering performance.

Features​

  • WebGL Rendering: Smooth, hardware-accelerated visualization of thousands of flows
  • Automatic Clustering: Nearby locations cluster at lower zoom levels for clarity
  • Animation Support: Optional animated particles along flow lines
  • Interactive: Hover and click handlers for locations and flows
  • Customizable: 40+ color schemes, dark/light mode, and extensive styling options
  • Framework Agnostic: Works with React, Svelte, Vue, or vanilla JavaScript

Quick Install​

npm install @flowmap.gl/layers @flowmap.gl/data deck.gl

Minimal Example​

import {FlowmapLayer} from '@flowmap.gl/layers';
import DeckGL from '@deck.gl/react';

const layer = new FlowmapLayer({
  id: 'flowmap',
  data: {
    locations: [
      {id: 'A', lat: 40.7, lon: -74.0},
      {id: 'B', lat: 34.0, lon: -118.2},
    ],
    flows: [
      {origin: 'A', dest: 'B', count: 1000},
    ],
  },
  getLocationId: (loc) => loc.id,
  getLocationLat: (loc) => loc.lat,
  getLocationLon: (loc) => loc.lon,
  getFlowOriginId: (flow) => flow.origin,
  getFlowDestId: (flow) => flow.dest,
  getFlowMagnitude: (flow) => flow.count,
});

<DeckGL
  initialViewState={{longitude: -95, latitude: 38, zoom: 4}}
  controller={true}
  layers={[layer]}
/>

Live Demo​

Try the interactive demo to see flowmap.gl in action.

No-Code Options​

If you don't need to write code, check out these tools built with flowmap.gl:

Example Projects​

Explore the source code of these example implementations:

Next Steps​