leafet.migrationLayer is used to show migration data such as population, flight, vehicle, traffic and so on. Data visualization on map.
Internet Explorer 10+
Google Chrome
Safari
Firefox
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
migrationLayer.setData(newData);
4.hide migrationLayer
migrationLayer.hide();
5.show migrationLayer
migrationLayer.show();
6.pause migrationLayer animation
migrationLayer.pause();
7.play migrationLayer animation
migrationLayer.play();
8.destroy migrationLayer
migrationLayer.destroy();
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 = [{"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.
Requires Leaflet 1.0.2 or newer
MIT.