Leaflet Streamlines

Visualise two dimensional vector fields in leaflet using stream lines.

Grid of simulated water velocity values on Lake Geneva from the Meteolakes project, plotted as streamlines.

Check out the examples:

• Basic (source)

This project is inspired by earth and borrows code from the IH.Leaflet.CanvasLayer.Field project.

Quick start

import L from "leaflet";
import 'leaflet-streamlines';

or

<link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""
/>
<script
    src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""
></script>
<script type="text/javascript" src="https://unpkg.com/leaflet-streamlines"></script>

then

var map = L.map("map");
L.streamlines(data, options).addTo(map);

API reference

data

Data must be an object {u: [[]], v:[[]]} where u and v are 2D arrays of equivalent shape. u: y veloctiy (northward) v: x veloctiy (eastward)

options

| Option | Description | Default | Type | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------ | | xMax (Required) | Maximum x coordinate | | Number | | xMin (Required) | Minimum x coordinate | | Number | | yMax (Required) | Maximum y coordinate | | Number | | yMin (Required) | Minimum y coordinate | | Number | | paths | Number of streamlines to plot | 800 | Number | | color | Color of streamlines, either a html color ("white", #FF5733) or a function that returns a color based on a single input of velocity magnitude. | white | Custom | | width | Width of the streamline | 0.5 | Number | | fade | Control the streamline fade | 0.97 | Number | | duration | Milliseconds between timesteps | 10 | Number | | maxAge | Max number of timesteps for streamline | 50 | Number | | velocityScale | Factor to toggle speed of streamlines | 0.01 | Number | | opacity | Opacity of streamlines | 1 | Number |