# leaflet-velocity

> A custom layer for leaflet to visualise arbitrary velocities

Latest version **2.1.4** (published 2023-03-15) · See LICENSE in LICENSE.md license · 0 weekly downloads

## Install

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

## 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 | 2.1.4 |
| Published | 2023-03-15 |
| First published | 2017-02-06 |
| Weekly downloads | 0 |
| License | See LICENSE in LICENSE.md |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 91.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 665 |
| Author | daniel.wild@csiro.au |
| Maintainers | danwild |
| Keywords | leaflet, velocity, ocean, current, wind, canvas, noaa, visualisation, overlay |

## Links

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

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 2.1.4 (latest) — 2023-03-15
- 2.1.3 — 2022-11-23
- 2.1.2 — 2022-02-21
- 2.1.1 — 2022-02-20
- 2.1.0 — 2021-09-23
- 2.0.0 — 2021-09-23
- 1.9.2 — 2021-03-31
- 1.9.1 — 2021-03-30
- 1.9.0 — 2021-02-25
- 1.8.1 — 2021-01-19
- 1.8.0 — 2021-01-19
- 1.7.0 — 2020-03-26
- 1.6.1 — 2020-02-05
- 1.6.0 — 2020-02-03
- 1.5.0 — 2019-11-22
- … 23 more at https://npm.io/package/leaflet-velocity/versions

## README

# leaflet-velocity [![NPM version][npm-image]][npm-url] [![NPM Downloads][npm-downloads-image]][npm-url]

## Version 2 Notice

As of version 2, `leaflet-velocity` is now under [CSIRO](https://www.csiro.au)'s [Open Source Software Licence Agreement](LICENSE.md), which is variation of the BSD / MIT License.

There are no other plans for changes to licensing, and the project will remain open source.

---

A plugin for Leaflet (v1.0.3, and v0.7.7) to create a canvas visualisation layer for direction and intensity of arbitrary velocities (e.g. wind, ocean current).

Live Demo: https://onaci.github.io/leaflet-velocity/

- Uses a modified version of [WindJS](https://github.com/Esri/wind-js) for core functionality.
- Similar to [wind-js-leaflet](https://github.com/danwild/wind-js-leaflet), however much more versatile (provides a generic leaflet layer, and not restricted to wind).
- Data input format is the same as output by [wind-js-server](https://github.com/danwild/wind-js-server), using [grib2json](https://github.com/cambecc/grib2json).

![Screenshot](/screenshots/velocity.gif?raw=true)

## Example use:

```javascript
var velocityLayer = L.velocityLayer({
  displayValues: true,
  displayOptions: {
    // label prefix
    velocityType: "Global Wind",

    // leaflet control position
    position: "bottomleft",

    // no data at cursor
    emptyString: "No velocity data",

    // see explanation below
    angleConvention: "bearingCW",

    // display cardinal direction alongside degrees
    showCardinal: false,

    // one of: ['ms', 'k/h', 'mph', 'kt']
    speedUnit: "ms",

    // direction label prefix
    directionString: "Direction",

    // speed label prefix
    speedString: "Speed",
  },
  data: data, // see demo/*.json, or wind-js-server for example data service

  // OPTIONAL
  minVelocity: 0, // used to align color scale
  maxVelocity: 10, // used to align color scale
  velocityScale: 0.005, // modifier for particle animations, arbitrarily defaults to 0.005
  colorScale: [], // define your own array of hex/rgb colors
  onAdd: null, // callback function
  onRemove: null, // callback function
  opacity: 0.97, // layer opacity, default 0.97

  // optional pane to add the layer, will be created if doesn't exist
  // leaflet v1+ only (falls back to overlayPane for < v1)
  paneName: "overlayPane",
});
```

The angle convention option refers to the convention used to express the wind direction as an angle from north direction in the control.
It can be any combination of `bearing` (angle toward which the flow goes) or `meteo` (angle from which the flow comes),
and `CW` (angle value increases clock-wise) or `CCW` (angle value increases counter clock-wise). If not given defaults to `bearingCCW`.

The speed unit option refers to the unit used to express the wind speed in the control.
It can be `m/s` for meter per second, `k/h` for kilometer per hour or `kt` for knots. If not given defaults to `m/s`.

## Public methods

| method       | params     | description                       |
| ------------ | ---------- | --------------------------------- |
| `setData`    | `{Object}` | update the layer with new data    |
| `setOptions` | `{Object}` | update the layer with new options |

## Build / watch

```shell
npm run watch
```

## Reference

`leaflet-velocity` is possible because of things like:

- [L.CanvasOverlay.js](https://gist.github.com/Sumbera/11114288)
- [WindJS](https://github.com/Esri/wind-js)
- [earth](https://github.com/cambecc/earth)

## Example data

Data shown for the Great Barrier Reef has been derived from [CSIRO's eReefs products](https://research.csiro.au/ereefs/)

## License

CSIRO Open Source Software Licence Agreement (variation of the BSD / MIT License)

[npm-image]: https://badge.fury.io/js/leaflet-velocity.svg
[npm-url]: https://www.npmjs.com/package/leaflet-velocity
[npm-downloads-image]: https://img.shields.io/npm/dt/leaflet-velocity.svg

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