196 lines
5.8 KiB
HTML
196 lines
5.8 KiB
HTML
<head>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
|
|
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
|
|
crossorigin=""/>
|
|
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
|
|
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
|
|
crossorigin=""></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script src=" https://unpkg.com/@joergdietrich/leaflet.terminator@1.0.0/L.Terminator.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
<style>
|
|
#mapid { height: 700px; }
|
|
|
|
|
|
</style>
|
|
|
|
<div class="container">
|
|
<div class="row"> .
|
|
<div class="col-md-12">
|
|
<center>
|
|
<img src="/static/satnogs-net-logo.png">
|
|
<br>
|
|
<br>
|
|
<div id="mapid" ></div>
|
|
|
|
</center>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
test = null
|
|
var light_sat = L.icon({
|
|
iconUrl: 'static/satellite-marker-light.png',
|
|
iconSize: [40, 40],
|
|
iconAnchor: [20, 20],
|
|
popupAnchor: [0, 0],
|
|
|
|
});
|
|
|
|
var dark_sat = L.icon({
|
|
iconUrl: 'static/satellite-marker-dark.png',
|
|
iconSize: [40, 40],
|
|
iconAnchor: [20, 20],
|
|
popupAnchor: [0, 0],
|
|
|
|
});
|
|
|
|
var station = L.icon({
|
|
iconUrl: 'static/station-marker.png',
|
|
iconSize: [10, 10],
|
|
iconAnchor: [5, 5],
|
|
popupAnchor: [0, 0],
|
|
|
|
});
|
|
|
|
var active_station = L.icon({
|
|
iconUrl: 'static/active-station-marker.png',
|
|
iconSize: [20, 20],
|
|
iconAnchor: [10, 10],
|
|
popupAnchor: [0, 0],
|
|
|
|
});
|
|
|
|
var mymap = L.map('mapid',{worldCopyJump:true}).setView([0,0], 2);
|
|
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
|
|
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
|
maxZoom: 18,
|
|
id: 'mapbox.streets',
|
|
accessToken: 'pk.eyJ1IjoiY2hpYmlsbCIsImEiOiJjamxsNHBuZG4wdG1uM3FwYTN5c2ZubmxrIn0.ghkx6AngBzUiZQWBAWKziQ'
|
|
}).addTo(mymap);
|
|
var t = L.terminator();
|
|
t.addTo(mymap);
|
|
setInterval(function(){updateTerminator(t)}, 500);
|
|
function updateTerminator(t) {
|
|
var t2 = L.terminator();
|
|
t.setLatLngs(t2.getLatLngs());
|
|
t.redraw();
|
|
}
|
|
|
|
Stations = {}
|
|
Workers = {}
|
|
Lines = {}
|
|
Sats = {}
|
|
|
|
dataS = null
|
|
function UpdateMap(e) {
|
|
var norad = e.data[0]
|
|
var name = e.data[1]
|
|
var satPos = e.data[2]
|
|
if (norad in Sats){
|
|
Sats[norad]._latlng = {"lat":satPos[0],"lng":satPos[1]}
|
|
Sats[norad].update()
|
|
}else{
|
|
Sats[norad] = L.marker(satPos,{icon: dark_sat,zIndexOffset:1000}).addTo(mymap);
|
|
Lines[norad] = {}
|
|
|
|
|
|
|
|
}
|
|
|
|
popupText = "<b>Name: "+name+"</b><br><b>Norad: "+norad+"</b><br><b>Station Count: "+e.data[3].length+"</b><br>"
|
|
|
|
e.data[4].forEach(function(x){
|
|
//console.log(x + " "+norad)
|
|
popupText = popupText + '<div class="trans" style="background-color:'+x[1]+'";>'+x[0]+"</div>"
|
|
})
|
|
Sats[norad].bindPopup(popupText)
|
|
Sats[norad]._popup.setContent(popupText)
|
|
|
|
temp = []
|
|
e.data[3].forEach(function(x){
|
|
temp.push(x[0])
|
|
})
|
|
|
|
e.data[3].forEach(function(x){
|
|
if (Object.keys(Lines[norad]).includes(String(x[0]))){
|
|
Object.keys(Lines[norad]).forEach(function(y){
|
|
Lines[norad][y]._latlngs[1]= {"lat":satPos[0],"lng":satPos[1]}
|
|
|
|
})}else{Lines[norad][x[0]] = new L.Polyline([[Stations[x[0]]._latlng.lat,Stations[x[0]]._latlng.lng],[satPos[0],satPos[1]]], {color: x[1],weight: 3,opacity: 1,smoothFactor: 1});
|
|
Lines[norad][x[0]].addTo(mymap)};
|
|
})
|
|
Object.keys(Lines[norad]).forEach(function(x){
|
|
if (temp.includes(Number(x))){
|
|
|
|
}else{
|
|
Lines[norad][x].removeFrom(mymap)
|
|
delete Lines[norad][x]
|
|
}
|
|
})
|
|
|
|
|
|
}
|
|
|
|
$.get("/active_stations", function(data, status){
|
|
data = JSON.parse(data)
|
|
dataS = data
|
|
data.forEach(function(x){
|
|
|
|
marker = L.marker(x["lat_lng"],{icon: station,zIndexOffset:-1000}).addTo(mymap);
|
|
marker.bindPopup("<b>Name: "+x['name']+"</b>")
|
|
Stations[x["id"]] = marker
|
|
});
|
|
});
|
|
|
|
$.get("/occuring_sats", function(data, status){
|
|
data = JSON.parse(data)
|
|
Object.keys(data).forEach(function(x){
|
|
worker = new Worker('/static/Worker.js');
|
|
worker.onmessage = UpdateMap
|
|
worker.postMessage([x,data[x]]);
|
|
Workers[x] =worker
|
|
});
|
|
});
|
|
|
|
|
|
|
|
setInterval(function(){
|
|
$.get("/occuring_sats", function(data, status){
|
|
data = JSON.parse(data)
|
|
Object.keys(data).forEach(function(x){
|
|
if (x in Workers){
|
|
}else{
|
|
worker = new Worker('/static/Worker.js');
|
|
worker.onmessage = UpdateMap
|
|
worker.postMessage([x,data[x]]);
|
|
Workers[x] =worker
|
|
}
|
|
});
|
|
Object.keys(Workers).forEach(function(x){
|
|
if (Object.keys(data).includes(x)){
|
|
}else{
|
|
Workers[x].terminate()
|
|
delete Workers[x]
|
|
UpdateMap({"data":[x,"",[0,0],[],[]]})
|
|
Sats[x].removeFrom(mymap)
|
|
delete Sats[x]
|
|
delete Lines[x]
|
|
|
|
}
|
|
})
|
|
});
|
|
|
|
}, 20000);
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>
|