-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (82 loc) · 2.61 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
<!DOCTYPE html>
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<style>
h2 {
font-family:sans-serif;
font-size:13px;
}
#map {
width: 100%;
top:0;
bottom: 0;
position:absolute;
}
#inset {
position: absolute;
width: 95%;
margin: 10px;
padding: 10px 20px;
background-color: white;
bottom:20px;
}
#slider {
width:100%;
}
</style>
<div id='map'></div>
</div>
<div id='inset'>
<div class='session' id='sliderbar'>
<h2>time: <label id='active-day'></label></h2>
<input id='slider' class='row' type='range' min='1505574000000' max='1507410000000' step='21600000' value='1505574000000' />
</div>
</div>
<script>
// max time is 1506805200000 + 60 * 60 * 24 * 7 * 1000
mapboxgl.accessToken = 'pk.eyJ1IjoiYmRvbiIsImEiOiJjamRpMWwxczMxNXg3MnFtZjY5dzJqeTJxIn0.JVY5527uh_HLMJu-eEoFbg';
var map = new mapboxgl.Map({
container: 'map',
style: 'style.json',
zoom: 4,
center: [-70.36,20.06]
});
map.addControl(new mapboxgl.NavigationControl());
var storm = [];
$.getJSON('datasets/storm_track.json', function(data) {
console.log(data);
storm = data.map(function(v) {
v['date'] = Date.parse(v['timestamp'])
return v;
});
});
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(images/eye.svg)';
el.style.width = '40px';
el.style.height = '40px';
var marker = new mapboxgl.Marker(el)
marker.setLngLat([-50.5,12.2])
.addTo(map);
document.getElementById('slider').addEventListener('input', function(e) {
var queryDate = e.target.value;
var queryDateObj = new Date(+queryDate).toString();
document.getElementById('active-day').innerText = queryDateObj;
var currentTrackPoint;
storm.forEach(function(p) {
if (p['date'] <= queryDate) {
currentTrackPoint = p;
} else {
marker.setLngLat([currentTrackPoint.lon,currentTrackPoint.lat])
}
});
map.setFilter('drifters', ['<=',['to-number',['get', 'timestamp']], +queryDate]);
});
</script>
</body>
</html>