Flow map

A flow map is a series type that allows to display route paths (e.g. flights or ships routes) or flows (e.g. import/export between regions) on a map.

Setting the Flow Map Series

In the above example, our map data is based on regions, so we need to load and add a base map first:


const topology = await fetch(
    'https://code.highcharts.com/mapdata/custom/world.topo.json'
).then(response => response.json());


chart: {
    map: topology
}

Then you can add the mappoint series which will be the base series responsible for connecting the flowmap to specific map points (nodes):


series: [{
    type: 'mappoint',
    name: 'Cities',
    data: [{
          id: 'Oslo',
          lat: 60.1975501,
          lon: 11.1004152,
        }, {
          id: 'Warszawa',
          lat: 52.169192,
          lon: 20.973514
        },
        ...
    ],
    ...
}]

The last step is to add our flow map series configuration with series.type set to 'flowmap'. If you choose to use the data points from mappoint series, they will be connected by their id , otherwise simple [longitude, latitude] coordinates can be used for the end points. The important options that you may notice in the example below are curveFactor and markerEnd :


series: [{
    type: 'flowmap',
    name: 'Flowmap with mappoint series',
    data: [{
        from: 'Warszawa',
        to: 'Oslo',
        curveFactor: 0.4,
        weight: 5,
        growTorwards: true,
        markerEnd: {
            enabled: true,
            height: 15,
            width: 10
        }
        ...
    }],
    ...
}]

Alternatively, you can omit the creation of mappoint series, and create the flows directly with [longitude, latitude] coordinates specified in from/to properties.


series: [{
    type: 'flowmap',
    name: 'Flowmap with lon/lat coordinates',
    data: [
        {
            from: [52.2662, 20.9969],
            to: [59.9170, 10.7511]
        },
        ...
    ],
    ...
}]

API Reference

For an overview of the flowmap map series options see the API reference .