-
Notifications
You must be signed in to change notification settings - Fork 45
/
Copy pathindex.html
92 lines (84 loc) · 3.98 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Migration Layer</title>
<link rel="stylesheet" href="./lib/leaflet.css" />
<style>
html,body{
margin: 0;
padding: 0;
}
#map{
position: absolute;
height: 100%;
width: 100%;
}
#event{
position: absolute;
top: 50px;
right: 600px;
height: 100px;
width: 400px;
z-index: 10000;
}
.btn{
border-color:gray;
border-width: 2px;
background-color:white;
}
</style>
</head>
<body>
<div id="map"></div>
<div id='event'>
<input type="button" value="setData" class="btn" onclick="setData()">
<input type="button" value="hide" class="btn" onclick="hide()">
<input type="button" value="show" class="btn" onclick="show()">
<input type="button" value="pause" class="btn" onclick="pause()">
<input type="button" value="play" class="btn" onclick="play()">
<input type="button" value="destroy" class="btn" onclick="destroy()">
</div>
<script src="./lib/leaflet.js"></script>
<script src='./src/src.js'></script>
<script>
var lrmap = L.map('map').setView([35, -95], 5);
L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw')
.addTo(lrmap);
var data = [{"from":[-118.2705,33.9984],"to":[-122.789336,37.920458],"labels":["Los Angeles","San Francisco"],"color":"#ff3a31"},{"from":[-118.2705,33.9984],"to":[-80.247887,25.792296],"labels":[null,"Miami"],"color":"#ff7e2b"},{"from":[-118.2705,33.9984],"to":[-73.999705,40.795047],"labels":[null,"New York"],"color":"#ffc726"},{"from":[-118.2705,33.9984],"to":[-87.724088,41.917846],"labels":[null,"Chicago"],"color":"#e9ff20"},{"from":[-118.2705,33.9984],"to":[-92.145189,46.77372],"labels":[null,"Duluth"],"color":"#99ff1b"},{"from":[-118.2705,33.9984],"to":[-111.824547,40.788055],"labels":[null,"Salt Lake"],"color":"#45ff15"},{"from":[-118.2705,33.9984],"to":[-111.364615,47.536109],"labels":[null,"Great Falls"],"color":"#10ff33"},{"from":[-118.2705,33.9984],"to":[-97.585039,35.511099],"labels":[null,"Oklahoma"],"color":"#0aff84"},{"from":[-118.2705,33.9984],"to":[-115.157907,36.173032],"labels":[null,"Las Vegas"],"color":"#05ffd9"},{"from":[-118.2705,33.9984],"to":[-103.196215,34.418753],"labels":[null,"Clovis"],"color":"#00ccff"}];
var data2=[{"from":[-73.875523,40.781063],"to":[-80.247887,25.792296],"labels":["New York","Maima"],"color":"#05ffd9"},{"from":[-73.875523,40.781063],"to":[-118.2705,33.9984],"labels":[null,"Los Angeles"],"color":"#00ccff"},{"from":[-73.875523,40.781063],"to":[-87.724088,41.917846],"labels":[null,"Chicago"],"color":"#ffc726"},{"from":[-73.875523,40.781063],"to":[-71.058437,42.35902],"labels":[null,"Boston"],"color":"#e9ff20"},{"from":[-73.875523,40.781063],"to":[-75.683057,45.42172],"labels":[null,"Ottawa"],"color":"#99ff1b"}];
data = data.map(item => { return {...item, value: parseInt(Math.random()*20)}});
data2 = data2.map(item => { return {...item, value: parseInt(Math.random()*20)}});
var migrationLayer = new L.migrationLayer({
map: lrmap,
data: data,
pulseRadius:30,
pulseBorderWidth:3,
arcWidth:1,
arcLabel:true,
arcLabelFont:'10px sans-serif',
maxWidth:10
}
);
migrationLayer.addTo(lrmap);
function setData(){
migrationLayer.setData(data2);
}
function hide(){
migrationLayer.hide();
}
function show(){
migrationLayer.show();
}
function play(){
migrationLayer.play();
}
function pause(){
migrationLayer.pause();
}
function destroy() {
migrationLayer.destroy();
}
</script>
</body>
</html>