leaflet.migration
leaflet plugin that provides migration lines layer.
Installation
npm install -S leaflet.migration
Demo
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leflet.migration';
const data = [
{
labels: ['from', 'to'],
from: [lat, lng],
to: [lat, lng],
color: '',
value: '',
},
];
const popover = document.querySelector('.popover');
const options = {
marker: {
radius: [5, 10],
pulse: true,
textVisible: true
},
line: {
width: 1,
order: false,
icon: {
type: 'arrow',
imgUrl: '',
size: 20
},
},
// marker: 'https://github.githubassets.com/favicons/favicon.png',
replacePopover(x, y, data, index) {
console.log(x, y, data, index, 'replace popover');
popover.innerHTML =
'value:' + data.value + '\nfrom:' + data.labels[1] + '\nto:' + data.labels[0];
return popover;
},
onShowPopover(data, index) {
console.log(data, index, 'show popover');
},
onHidePopover(data) {
console.log('hide popover', data);
},
};
const migrationLayer = L.migrationLayer(data, options);
migrationLayer.setStyle({ pulse: { radius: 20 } });
migrationLayer.setData([]);
map.remove(migrationLayer);
API
Data
type | description |
---|---|
[<MigrationData>] |
migration data list |
MigrationData
name | type | description |
---|---|---|
labels | [<string>from, <string> to] |
label |
from | [<number>lat, <number>lng] |
from label latlng |
to | [<number>lat, <number>lng] |
to label latlng |
color | string | the color of each arc and pulse |
value | number | intense value of migration line |
Options
name | type | default | description |
---|---|---|---|
marker | MarkerOption | - | marker style |
line | LineOption | - | line style |
minZoom | number | 3 | migration layer display when zoom >= 3 |
replacePopover | (<pixel>x , <pixel>y , <MigrationData>data , <integer>index ) => Element |
- | replace default popover by return element |
onShowPopover | (<MigrationData>data , <integer>index ) => void |
- | called on mouse hover pulse |
onHidePopover | (<integer>index ) => void |
none | called on mouse leave pulse |
MarkerOption
name | type | default | description |
---|---|---|---|
radius | [<number>min, <number> max] |
[5, 10] | marker size range, measure by MigrationData.value |
pulse | boolean | true | marker's ring animation |
textVisible | boolean | false | whether marker label |
LineOption
name | type | default | description |
---|---|---|---|
width | number | 1 | migration line width |
order | boolean | false | whether the sweep run in sequence |
icon | LineIcon | { type: 'circle', size: 20 } | sweep header style |
LineIcon
name | type | default | description |
---|---|---|---|
type | `circle | arrow | img` |
imgUrl | string | - | Image url when type is img |
size | number | 20 | icon size |
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) |
Requirements
- leaflet ^1.8.0
- node ^14.17.3