-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (66 loc) · 2.71 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
<!DOCTYPE html>
<html>
<head>
<title>USAirNet (unofficial) Map - A handy tool for finding your local USAirNet Aviation Weather</title>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
</head>
<body>
<div id="map"></div>
<script>
// Initialize and add the map to middle of USA
var map = L.map('map').setView([38.8782217,-97.6745261], 6);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'MAPBOX_TOKEN'
}).addTo(map);
function placeMarker(state, station) {
//- create marker
const marker = L.marker([station.latitude, station.longitude]).addTo(map);
//- create popup
var stationHtml = '<font size="+3"><div id=' + state.code + '-' + station.code + '>' +
'<b>' + station.name + ', ' + state.name + '</b><br>' +
'<a href="http://www.usairnet.com/cgi-bin/launch/code.cgi?Submit=Go&sta=' + station.code + '&state=' + state.code + '">USAirNet Aviation Weather</a><br>' +
'</div></font>';
marker.bindPopup(stationHtml);
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
//console.log(data);
for (var stateCode in data.states) {
//console.log(stateCode);
var stateData = data.states[stateCode];
//console.log(stateData.name)
for (var stationCode in stateData.stations) {
//console.log(stationCode);
var stationData = stateData.stations[stationCode];
placeMarker(stateData, stationData);
}
}
}
};
xmlhttp.open("GET", "/data.json", true);
xmlhttp.send();
</script>
</body>
</html>