leaflet plugin that provides migration lines layer.
npm install -S leaflet.migration
- leaflet ^1.5.1
- node 10.8.0
import 'leflet.migration';
const data = [{
labels: ['from', 'to'],
from: [lat, lng],
to: [lat, lng],
color: '',
value: ''
}];
const migrationLayer = L.migrationLayer(data, {
pulseRadius: 10,
arcWidth: 1,
label: true,
}).addTo(map);
migrationLayer.setStyle({ pulse: { radius: 20 }})
migrationLayer.setData([])
map.remove(migrationLayer)
Data
type | description |
---|---|
[<MigrationData>] |
migration data list |
MigrationData
attribute | type | description |
---|---|---|
labels | [<string>from, <string> to] |
label |
from | [<number>lat, <number>lng] |
from label latlng |
from | [<number>lat, <number>lng] |
to label latlng |
color | string | the color of each arc and pulse |
value | number | intense value of migration line |
Options|Style
option | type | default | description |
---|---|---|---|
pulseRadius | number | 10 | pulse max radius, pulse radius from 3 to this value |
arcWidth | number | 1 | arc border width |
label | boolean | true | set it to false if you don't want show label |
Options|EventHandler
method | returns | description |
---|---|---|
replacePopover(<pixel>x , <pixel>y , <MigrationData>data , <integer>index ) |
Element | replace default popover by return element |
onShowPopover(<MigrationData>data , <integer>index ) |
none | called on mouse hover pulse |
onHidePopover(<integer>index ) |
none | called on mouse leave pulse |
Methods
method | returns | descrition |
---|---|---|
setData([<MigrationData>] ) |
this | update migration data |
setStyle(options) | this | update style |
show() | this | show layer |
hide() | this | hide layer |
play() | this | run animate of arc and pulse |
pause() | this | pause animate of arc and pulse |
Methods inherited from L.Layer
method | returns | descrition |
---|---|---|
onAdd(<Map> map ) |
this | called on L.migrationLayer(data, style).addTo(map) |
onRemove(<Map> map ) |
this | called on map.remove(migrationLayer) |
- npm start
- web server will listen on 3000
- open http://localhost:3000
- fix spark cannot move
- accomplish setData/setStyle
- accomplish addTo and remove function
- update init options
- add demo to gh-pages
- customize popover
- update return value of new MigrationLayer()
- set pulse size by data value, radius, zoom
- add webpack
- add popover
- config data, style
- layer.setData