# leaflet-streamlines

> Visualise two dimensional vector fields in leaflet using stream lines.

Latest version **1.0.1** (published 2022-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install leaflet-streamlines
pnpm add leaflet-streamlines
yarn add leaflet-streamlines
bun add leaflet-streamlines
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-09-09 |
| First published | 2021-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | James Runnalls |
| Maintainers | jamesrunnalls |
| Keywords | streamlines, leaflet, geospatial, flows, vector |

## Links

- npm: https://www.npmjs.com/package/leaflet-streamlines
- Repository: https://github.com/JamesRunnalls/leaflet-streamlines
- Homepage: https://github.com/JamesRunnalls/leaflet-streamlines#readme
- Issues: https://github.com/JamesRunnalls/leaflet-streamlines/issues
- npm.io page: https://npm.io/package/leaflet-streamlines

## Dependencies (2)

- [d3](https://npm.io/package/d3.md) ^6.7.0
- [leaflet](https://npm.io/package/leaflet.md) ^1.7.1

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-09-09
- 1.0.0 — 2021-06-01

## README

# Leaflet Streamlines

[![npm version](https://badge.fury.io/js/leaflet-streamlines.svg)](https://badge.fury.io/js/leaflet-streamlines)

Visualise two dimensional vector fields in leaflet using stream lines.

![Image of Leaflet Streamlines](https://runnalls.s3.eu-central-1.amazonaws.com/streamlines.gif)

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

Check out the examples:

- [Basic](https://jamesrunnalls.github.io/leaflet-streamlines/example/basic/) ([source](https://github.com/jamesrunnalls/leaflet-streamlines/blob/master/example/basic/index.html))

This project is inspired by [earth](https://earth.nullschool.net/) and borrows code from the [IH.Leaflet.CanvasLayer.Field](https://github.com/IHCantabria/Leaflet.CanvasLayer.Field) project.

## Quick start

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

or

```
<link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""
/>
<script
    src="https://unpkg.com/leaflet@1.7.1/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 <br> 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 |

---
_Source: https://npm.io/package/leaflet-streamlines · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._