Skip to main content

Leaflet Flow Map

LeafletFlowMap is an extension of LeafletMap that can display flying particles between two points on the map. Particles will be rendered on a separate three.js canvas on top of the base map. LeafletFlowMap has the same configuration ope as LeafletMap with a few extra properties related to the particles.

<VisLeafletFlowMap style={style} data={data}/>
Loading...

Data​

LeafletFlowMap expects the data to be an object with points and flows arrays:

type LeafletMapData = {
  points: MapPointRecord[];
  flows: MapFlowRecord[];
}

The points array corresponds to regular LeafletMap points. The flows array should contain information about source and target coordinates of the flying particles. By default, LeafletFlowMap expects the following data format:

type MapFlowRecord = {
  sourceLongitude: number;
  sourceLatitude: number;
  targetLongitude: number;
  targetLatitude: number;
}

You can also use custom accessor functions to get the source and target coordinates of the particles by providing them to the following configuration options: sourceLatitude, sourceLongitude, targetLatitude, targetLongitude.

Particles​

LeafletFlowMap allows to change the appearance of the flying particles by providing either constant values or accessor functions (that will be executed per flow) to the configuration attributes specified below.

Color​

The color of the particles can be set by using the flowParticleColor property:

<VisLeafletFlowMap style={style} flowParticleColor="#f00" data={data}/>
Loading...

Radius​

You can chance the radius of the particles with the flowParticleRadius property:

<VisLeafletFlowMap style={style} flowParticleRadius={10} data={data}/>
Loading...

Speed​

The speed of the particles can be controlled by using the flowParticleSpeed property. The value is in arbitrary angular units, we recommend it to be in the range of [0,0.2].

<VisLeafletFlowMap style={style} flowParticleSpeed={0.02} data={data}/>
Loading...

Density​

The flowParticleDensity property can be used to set the density / frequency of the flying particles. The recommended range is [0, 3].

<VisLeafletFlowMap style={style} flowParticleDensity={2} data={data}/>
Loading...

Flow Source Points​

Similarly, you can change how the source points will look.

Color​

The color of the flow source can be customized by using the sourcePointColor configuration property:

<VisLeafletFlowMap
  style={style} 
  sourcePointColor="#4A46B5" 
  data={data}
/>
Loading...

Radius​

The sourcePointRadius property sets the radius of the source point:

<VisLeafletFlowMap style={style} sourcePointRadius={5} data={data}/>
Loading...

Events​

The flow source points have the following configurable callback functions for mouse events:

/** Flow source point click callback function. Default: `undefined` */
onSourcePointClick: (f: FlowDatum, x: number, y: number, event: MouseEvent) => void;
/** Flow source point mouse over callback function. Default: `undefined` */
onSourcePointMouseEnter: (f: FlowDatum, x: number, y: number, event: MouseEvent) => void;
/** Flow source point mouse leave callback function. Default: `undefined` */
onSourcePointMouseLeave: (f: FlowDatum, event: MouseEvent) => void;

Component Props​

NameTypeDescription
* required property