Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maptalks/maptalks.odline
A maptalks layer to draw OD(Origin-Destination) lines.
https://github.com/maptalks/maptalks.odline
Last synced: about 2 months ago
JSON representation
A maptalks layer to draw OD(Origin-Destination) lines.
- Host: GitHub
- URL: https://github.com/maptalks/maptalks.odline
- Owner: maptalks
- License: mit
- Created: 2017-02-01T04:03:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-25T04:09:34.000Z (about 1 year ago)
- Last Synced: 2024-04-14T07:57:13.184Z (5 months ago)
- Language: JavaScript
- Size: 91.8 KB
- Stars: 6
- Watchers: 4
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-flow-visualization - Odline - (Tools (by Language/ parent software) / R)
README
# maptalks.odline
[](https://circleci.com/gh/maptalks/maptalks.odline)
[](https://github.com/maptalks/maptalks.odline)
A maptalks Layer to draw OD(Origin-Destination) lines.
## Examples
* [Animated lines of migration in China](https://maptalks.github.io/maptalks.odline/demo/mig.html). (inspired by [echarts](http://echarts.baidu.com/echarts2/doc/example/map22.html))
* [Curves of migration](https://maptalks.github.io/maptalks.odline/demo/curves.html).
## Install
* Install with npm: ```npm install maptalks.odline```.
* Download from [dist directory](https://github.com/maptalks/maptalks.odline/tree/gh-pages/dist).
* Use unpkg CDN: ```https://unpkg.com/maptalks.odline/dist/maptalks.odline.min.js```
## Usage
As a plugin, ```maptalks.odline``` must be loaded after ```maptalks.js``` in browsers.
```html
var odlayer = new maptalks.ODLineLayer('od', data)
.addTo(map);
```
## Supported Browsers
IE 9-11, Chrome, Firefox, other modern and mobile browsers.
## API Reference
```ODLineLayer``` is a subclass of [maptalks.ParticleLayer](https://maptalks.github.io/docs/api/ParticleLayer.html) and inherits all the methods of its parent.
### `Constructor`
```javascript
// data's format
// [{ coordinates : [[x, y], [x, y]], symbol : {..} }, { coordinates : [[x, y], [x, y]], symbol : {..} } ..]
// symbol only supports lineWidth and lineColor
new maptalks.ODLineLayer(id, data, options)
```
* id **String** layer id
* data **Object[]** origin-destination data, `[{ coordinates : [[x, y], [x, y]], symbol : {..} }, { coordinates : [[x, y], [x, y]], symbol : {..} } ..]`
* options **Object** options
* animation **Boolean** is animation? true or false (true by default)
* animationRandom **Boolean** whether the animation starts randomly, true or false (false by default)
* animationDuration **Number** duration of a animation cycle in ms (6000 by default)
* animationOnce **Boolean** does animation only run once? (false by default)
* curveness **Number** curveness of the od-line, from 0(straight) to 1 (0.2 by default)
* trail **Number** trail length of the particle when animating (20 by default)
* globalCompositeOperation **String** [globalCompositeOperation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation) of the canvas when drawing particles
* symbol **Object** default symbol of OD-line, only supports lineWidth and lineColor ({ lineWidth : 2, lineColor : #000 } by default)
* Other options defined in [maptalks.ParticleLayer](https://maptalks.github.io/docs/api/ParticleLayer.html)
### `getData()`
get layer's data
**Returns** `Object[]`
### `setData(data)`
set new data to the layer
* data **Object[]** origin-destination data
**Returns** `this`
### `toJSON()`
export the ODLineLayer's JSON.
```javascript
var json = odlayer.toJSON();
```
**Returns** `Object`
## Contributing
We welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.
## Develop
The only source file is ```index.js```.
It is written in ES6, transpiled by [babel](https://babeljs.io/) and tested with [mocha](https://mochajs.org) and [expect.js](https://github.com/Automattic/expect.js).
### Scripts
* Install dependencies
```shell
$ npm install
```
* Watch source changes and generate runnable bundle repeatedly
```shell
$ npm run dev
```
* Tests
```shell
$ npm test
```
* Watch source changes and run tests repeatedly
```shell
$ npm run tdd
```
* Package and generate minified bundles to dist directory
```shell
$ npm run build
```
* Lint
```shell
$ npm run lint
```