2018-10-24 14:32:53 -06:00
< 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 >
2018-11-01 13:12:35 -06:00
< script src = " https://unpkg.com/@joergdietrich/leaflet.terminator@1.0.0/L.Terminator.js" > < / script >
2018-12-18 19:30:14 -07:00
2018-11-21 13:28:37 -07:00
2018-10-24 14:32:53 -06:00
< / head >
< style >
2018-11-01 13:12:35 -06:00
#mapid { height: 700px; }
2018-12-22 01:09:23 -07:00
2018-12-22 01:21:30 -07:00
2018-10-24 14:32:53 -06:00
< / style >
< div class = "container" >
< div class = "row" > .
< div class = "col-md-12" >
< center >
2018-11-01 13:12:35 -06:00
< img src = "/static/satnogs-net-logo.png" >
< br >
< br >
2018-10-24 14:32:53 -06:00
< div id = "mapid" > < / div >
< / center >
< / div >
< / div >
< / div >
2018-11-21 13:28:37 -07:00
2018-10-24 14:32:53 -06:00
< script >
2018-12-19 14:25:38 -07:00
test = null
2018-11-01 13:12:35 -06:00
var light_sat = L.icon({
2018-11-21 13:28:37 -07:00
iconUrl: 'static/satellite-marker-light.png',
2018-11-01 13:12:35 -06:00
iconSize: [40, 40],
iconAnchor: [20, 20],
popupAnchor: [0, 0],
});
var dark_sat = L.icon({
2018-11-21 13:28:37 -07:00
iconUrl: 'static/satellite-marker-dark.png',
2018-10-24 14:32:53 -06:00
iconSize: [40, 40],
iconAnchor: [20, 20],
popupAnchor: [0, 0],
});
var station = L.icon({
iconUrl: 'static/station-marker.png',
2018-10-24 14:58:38 -06:00
iconSize: [10, 10],
iconAnchor: [5, 5],
2018-10-24 14:32:53 -06:00
popupAnchor: [0, 0],
});
var active_station = L.icon({
iconUrl: 'static/active-station-marker.png',
iconSize: [20, 20],
iconAnchor: [10, 10],
popupAnchor: [0, 0],
});
2018-11-01 13:12:35 -06:00
var mymap = L.map('mapid',{worldCopyJump:true}).setView([0,0], 2);
2018-10-24 14:32:53 -06:00
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);
2018-12-19 14:25:38 -07:00
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();
}
2018-10-24 14:32:53 -06:00
2018-12-19 14:25:38 -07:00
Stations = {}
Workers = {}
Lines = {}
Sats = {}
2019-01-10 16:26:34 -07:00
Orbits = {}
CurrentOrbit = null
2018-10-24 14:32:53 -06:00
2018-12-19 14:25:38 -07:00
dataS = null
2018-12-18 19:30:14 -07:00
function UpdateMap(e) {
2018-12-19 14:25:38 -07:00
var norad = e.data[0]
var name = e.data[1]
var satPos = e.data[2]
if (norad in Sats){
2018-12-22 00:33:23 -07:00
Sats[norad]._latlng = {"lat":satPos[0],"lng":satPos[1]}
2018-12-19 15:15:59 -07:00
Sats[norad].update()
2018-12-19 14:25:38 -07:00
}else{
2019-01-10 16:26:34 -07:00
Sats[norad] = L.marker(satPos,{icon: dark_sat,zIndexOffset:1000,title:norad}).addTo(mymap);
Sats[norad].norad = norad
Sats[norad].on('click',SatClick)
2018-12-19 14:25:38 -07:00
Lines[norad] = {}
2019-01-10 16:26:34 -07:00
Orbits[String(norad)] = e.data[5]
2018-12-22 00:33:23 -07:00
2018-12-19 14:25:38 -07:00
}
2018-12-22 00:33:23 -07:00
popupText = "< b > Name: "+name+"< / b > < br > < b > Norad: "+norad+"< / b > < br > < b > Station Count: "+e.data[3].length+"< / b > < br > "
2018-12-19 15:15:59 -07:00
2018-12-22 00:33:23 -07:00
e.data[4].forEach(function(x){
//console.log(x + " "+norad)
2018-12-22 01:09:23 -07:00
popupText = popupText + '< div class = "trans" style = "background-color:'+x[1]+'" ; > '+x[0]+"< / div > "
2018-12-22 00:33:23 -07:00
})
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){
2018-12-22 01:09:23 -07:00
if (Object.keys(Lines[norad]).includes(String(x[0]))){
2018-12-22 00:33:23 -07:00
Object.keys(Lines[norad]).forEach(function(y){
2018-12-22 01:09:23 -07:00
Lines[norad][y]._latlngs[1]= {"lat":satPos[0],"lng":satPos[1]}
2018-12-22 00:33:23 -07:00
})}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)};
2018-12-19 14:25:38 -07:00
})
2018-12-22 01:09:23 -07:00
Object.keys(Lines[norad]).forEach(function(x){
if (temp.includes(Number(x))){
}else{
Lines[norad][x].removeFrom(mymap)
delete Lines[norad][x]
}
})
2018-12-19 14:25:38 -07:00
2018-12-18 19:30:14 -07:00
}
2018-12-18 20:13:31 -07:00
$.get("/active_stations", function(data, status){
2018-12-18 19:30:14 -07:00
data = JSON.parse(data)
2018-12-19 14:25:38 -07:00
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
2018-12-18 19:30:14 -07:00
});
});
2018-12-19 14:25:38 -07:00
$.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]]);
2018-12-19 14:53:09 -07:00
Workers[x] =worker
2018-12-19 14:25:38 -07:00
});
});
2018-12-18 20:09:46 -07:00
2018-12-19 14:53:09 -07:00
2018-12-18 17:33:36 -07:00
2018-12-19 14:53:09 -07:00
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]
2018-12-22 01:09:23 -07:00
UpdateMap({"data":[x,"",[0,0],[],[]]})
2018-12-19 14:53:09 -07:00
Sats[x].removeFrom(mymap)
delete Sats[x]
delete Lines[x]
}
})
});
2018-12-18 17:33:36 -07:00
2018-12-19 14:53:09 -07:00
}, 20000);
2018-11-01 13:12:35 -06:00
2019-01-10 16:26:34 -07:00
function SatClick(e){
if (CurrentOrbit == null){
}else{
CurrentOrbit.removeFrom(mymap)
}
CurrentOrbit = L.polyline(Orbits[Number(e.target.norad)], {color: 'red'});
CurrentOrbit.addTo(mymap)
}
2018-12-19 14:53:09 -07:00
2018-11-01 13:12:35 -06:00
< / script >
2018-10-24 14:32:53 -06:00
2018-11-01 13:12:35 -06:00
< 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 >