-
Notifications
You must be signed in to change notification settings - Fork 0
/
flights.html
90 lines (76 loc) · 2.91 KB
/
flights.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 lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<style>
.map {
height: 100vh;
width: 100%;
}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RG4HKM3EP9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-RG4HKM3EP9');
</script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin="">
</script>
<script src="airports.js"></script>
<script src="flightpaths.js"></script>
<title>Visited airports & flights taken</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var icon = L.icon({
iconUrl: 'mapmarker.png',
iconAnchor: [8, 22],
popupAnchor: [0, 0]
});
// prepare markers for the 'airports' layer
var markers = L.layerGroup();
for (var i = 0; i < airports.length; i++) {
L.marker([airports[i].lat, airports[i].lon], {icon: icon}).bindPopup(airports[i].city + " - " + airports[i].name + "<br># of flights: " + airports[i].count).addTo(markers);
}
// draw flight paths
var flights = L.layerGroup();
for (var i = 0; i < flightpaths.length; i++) {
var pointList = [new L.LatLng(flightpaths[i][0], flightpaths[i][1]),
new L.LatLng(flightpaths[i][2], flightpaths[i][3])];
var firstpolyline = new L.Polyline(pointList, {
color: 'blue',
weight: 1.5,
opacity: 0.5,
smoothFactor: 1
});
firstpolyline.addTo(flights);
}
var mbAttr = 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2VyZ2UtcyIsImEiOiJja3Y1a2U5dGIwbWtmMnJva2VhMjQxeTR0In0.A9eGuucWjyJQPggiQg2ImA';
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
var mymap = L.map('map', {
center: [54.3520, 18.6455], // center on Gdansk
zoom: 6,
layers: [streets, markers, flights]
});
var baseLayers = {
"Streets": streets,
"Grayscale": grayscale
};
var overlays = {
"Airports": markers,
"Flights": flights
};
L.control.layers(baseLayers, overlays).addTo(mymap);
</script>
</body>
</html>