Skip to content
Migration data visualization on map
Branch: master
Clone or download
Sylvenas Merge pull request #8 from lycheelin/dev-width
The width of arc depends on the value
Latest commit 51217be Oct 29, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist delete console.log() Jan 17, 2017
lib 添加显示、隐藏、暂停、销毁等方法 Jan 15, 2017
src feat: 根据value显示不同宽度 Oct 23, 2018
.gitignore Initial commit Jan 14, 2017
LICENSE Initial commit Jan 14, 2017 update README Oct 23, 2018
index.html feat: 根据value显示不同宽度 Oct 23, 2018


leafet.migrationLayer is used to show migration data such as population,flight,vehicle,traffic and so on.Data visualization on map.


Supported Browsers

Internet Explorer 10+
Google Chrome

Demo online

A demo is available on the Github Pages webpage for leaflet.migrationLayer Check out demo!.


1.Include the JavaScript files located in \dist directory.

<script src="./dist/leaflet.migrationLayer.js"></script>

2.Create a new migrationLayer

var migrationLayer = new L.migrationLayer({
    map: map,
    data: data

3.update or set data to migrationLayer


4.hide migrationLayer

migrationLayer.hide(); migrationLayer;

6.pause migrationLayer animation

migrationLayer.pause(); migrationLayer animation;

8.destroy migrationLayer



option Description Default Value Possible values Required
map the map obj null Map yes
data data for migrationLayer null Json yes
pulseRadius the pulse radius 25 any number>0 no
pulseBorderWidth pulse border width 3 any number>0 no
arcWidth arc width 1 any number>0 no
arcLabel show from and to label true Bool no
arcLabelFont label font and size '15px sans-serif' 'size font' no
maxWidth the max width of arc 10 any number>1 no

data format

data = [{"from":[-118.2705,33.9984],"to":[-122.789336,37.920458],"labels":["Los Angeles","San Francisco"],"color":"#ff3a31","value":15}];

If the value is not undefined, the width of arc will depend on the value.

Leaflet Version

Requires Leaflet 1.0.2 or newer



You can’t perform that action at this time.