A maptalks layer to draw OD(Origin-Destination) lines.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
test fix typo, change default to animation false, fix #2 Oct 22, 2017
.babelrc
.editorconfig initial commit Feb 1, 2017
.eslintrc prepare to publish May 2, 2017
.gitignore initial commit Feb 1, 2017
.npmignore
LICENSE initial commit Feb 1, 2017
README.md fix typo, change default to animation false, fix #2 Oct 22, 2017
circle.yml initial commit Feb 1, 2017
gulpfile.js update to es modules Oct 21, 2017
index.js fix typo, change default to animation false, fix #2 Oct 22, 2017
karma.config.js
package.json 0.4.1 Oct 22, 2017

README.md

maptalks.odline

CircleCI NPM Version

A maptalks Layer to draw OD(Origin-Destination) lines.

screenshot

Examples

Install

  • Install with npm: npm install maptalks.odline.
  • Download from dist directory.
  • 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.

<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/maptalks.odline/dist/maptalks.odline.min.js"></script>
<script>
var odlayer = new maptalks.ODLineLayer('od', data)
    .addTo(map);
</script>

Supported Browsers

IE 9-11, Chrome, Firefox, other modern and mobile browsers.

API Reference

ODLineLayer is a subclass of maptalks.ParticleLayer and inherits all the methods of its parent.

Constructor

// 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)
    • random 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 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

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.

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 and tested with mocha and expect.js.

Scripts

  • Install dependencies
$ npm install
  • Watch source changes and generate runnable bundle repeatedly
$ npm run dev
  • Tests
$ npm test
  • Watch source changes and run tests repeatedly
$ npm run tdd
  • Package and generate minified bundles to dist directory
$ npm run build
  • Lint
$ npm run lint