-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
103 lines (97 loc) · 5.69 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
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
<title>International Space Station</title>
<link rel="icon" type="image/x-icon" href="images/favicon.png">
<link
href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap"
rel="stylesheet"/>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>
<link rel="stylesheet" type = "text/css" href= "css/style.css">
</head>
<body>
<div id="particles-js"> </div>
<div><img class="circle" src="images/sat.png"></div>
<h5><span id="ana1">INTERNATIONAL </span><span id="ana2">SPACE STATION</span></h5>
<div class="mainbox">
<div class="textbox">
<div class="text">
<p align="center"><br>Speed = 17310 mph<br>Orbital Period = 1½ hours
<br></p><hr width="250px" size="30">
<p align="center">
Latitude : <span id="latitude"></span>
<br>
Longitude : <span id="longitude"></span>
</p>
<div id="mymap"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js" integrity="sha512-Kef5sc7gfTacR7TZKelcrRs15ipf7+t+n7Zh6mKNJbmW+/RRdCW9nwfLn4YX0s2nO6Kv5Y2ChqgIakaC6PW09A==" crossorigin="anonymous"></script>
<script src="js/particle-script.js"></script>
<script src="js/app.js"></script>
<script>
function changeImg(imgNumber){
var myImages=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg","images/8.jpg"];
var imgShown =document.body.style.backgroundImage;
var newImgNumber=Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage='url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
</script>
<!-- <script src="js/app.js"></script> -->
<script>
//url for live data
const url="https://api.wheretheiss.at/v1/satellites/25544";
// ISS image as an icon
var issIcon = L.icon({
iconUrl: 'images/iss.png',
iconSize: [50, 50], // size of the icon
iconAnchor: [25, 25], // point of the icon which will correspond to marker's location
});
const mymap = L.map('mymap').setView([0, 0], 3);
// attribution to give credit to leaf.js
const attribution = '<a href="https://www.openstreetmap.org/copyright"></a>'
const tileUrl = 'https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=FR7wo1Grg93xtV1wT0A8';
document.getElementsByClassName( 'leaflet-control-attribution' )[0].style.display = 'none';
const tiles = L.tileLayer(tileUrl, { attribution });
tiles.addTo(mymap);
// adding marker on the map
const marker = L.marker([0, 0],{icon:issIcon}).addTo(mymap);
// getting ISS data through Fetch
async function getIss(){
const response=await fetch(url);
const data=await response.json();
// latitude and longitude data
const {latitude, longitude}=data; if (latitude>7.8 && longitude<80.7){
}
document.getElementById('latitude').textContent = latitude.toFixed(1);
document.getElementById('longitude').textContent = longitude.toFixed(1);
mymap.setView([latitude, longitude], 3);
marker.setLatLng([latitude, longitude]);
}
//getting data in every second
setInterval(getIss,1000);
</script>
</body>
</html>