/
main.js
71 lines (66 loc) · 1.96 KB
/
main.js
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
mapboxgl.accessToken = 'sk.eyJ1IjoiZGhhaXJ5YXNoYWgtMjQiLCJhIjoiY2xuOHMwNHZyMDByOTJtbWQ5YWJzMmZ5eiJ9.GIN_6klWeopNwTl_xqi0RQ';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/dark-v10', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 0 // starting zoom
});
var long = 0;
var latt = 0;
const ISSLoc = (lng, lat) => {
const geojson = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [lng, lat]
},
properties: {
title: 'Mapbox',
description: 'San Francisco, California'
}
},
]
};
for (const feature of geojson.features) {
const el = document.getElementById('marker');
new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map);
}
new mapboxgl.Marker(el)
.setLngLat(feature.geometry.coordinates)
.setPopup(
new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML(
`<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`
)
)
.addTo(map);
new mapboxgl.Marker(el)
.setLngLat(feature.geometry.coordinates)
.setPopup(
new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML(
`<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`
)
)
.addTo(map);
}
const getISSLoc = () => {
fetch('https://api.wheretheiss.at/v1/satellites/25544')
.then(response => response.json())
.then(data => {
ISSLoc(data.longitude, data.latitude)
long = data.longitude
latt = data.latitude
// console.log(data)
})
}
const updateISSLoc = () => {
setInterval(() => {
getISSLoc()
}, 1000 )
}
updateISSLoc()
// ISSLoc(long, latt)