-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
66 lines (56 loc) · 2.12 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Skaner pozycji samolotów</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
<style type="text/css">
#map { height: 500px; }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var flights = [];
var map = L.map('map').setView([51.505, -0.09], 2);
L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png', {
attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
minZoom: 10,
maxZoom: 30
}).addTo(map);
function updateMarkers(data) {
console.log(data)
if(!Array.isArray(data)) {
return;
}
data.forEach(flight => {
var item = flights.find(f => f.flightId === flight.flightId);
if(!item) {
var marker = L.marker(flight.coords)
marker.addTo(map)
flights.push({
flightId: flight.flightId,
coords: flight.coords,
marker: marker
})
marker.bindPopup(`${flight.flightId}`)
}else {
var latLng = L.latLng(flight.coords[0], flight.coords[1])
item.marker.setLatLng(latLng)
}
})
}
var socket = io('http://localhost:8088');
socket.on('flights', updateMarkers);
socket.on('connect_error', reason => {
console.log(reason)
})
</script>
</body>
</html>